/* GUI — κέλυφος και κοινά στοιχεία (GUI_SPEC §1-§3, §6). Φάση Π1. * * ΚΑΝΟΝΕΣ ΤΟΥ ΑΡΧΕΙΟΥ: * 1. Καμία τιμή χρώματος εδώ — μόνο `var(--…)` από το `tokens.css` (το επιβάλλει test). * 2. Λογικές ιδιότητες παντού (`margin-inline`, `inset-inline-end`): η αραβικά/εβραϊκά έκδοση (§B6) * αλλάζει ΜΟΝΟ το `dir` του — κανένα CSS δεν ξαναγράφεται. * 3. Ό,τι είναι ζωντανό αναπνέει, ό,τι είναι στατικό δεν κουνιέται· `prefers-reduced-motion` = όλα off. */ /* ════════════════════════════════════════════════════════════════════════════════════════════════════ * 🏛 Ο ΝΟΜΟΣ ΤΟΥ ΣΠΙΤΙΟΥ — ΔΙΑΒΑΣΕ ΤΟΝ ΠΡΙΝ ΦΤΙΑΞΕΙΣ ΟΘΟΝΗ (05/09) * * ΤΟ ΠΑΡΑΠΟΝΟ ΠΟΥ ΤΟΝ ΓΕΝΝΗΣΕ, ΑΥΤΟΥΣΙΟ (ιδιοκτήτης, ζωντανά μπροστά στις Μισθώσεις): «ΚΑΜΙΑ στοίχιση, * κανένα ωραίο design. Πες στον καλλιτέχνη να δει ΟΛΟ το site.» Ο ίδιος άνθρωπος είχε εγκρίνει το * φινίρισμα της «Σήμερα» — άρα το ζητούμενο ΔΕΝ είναι γούστο ανά οθόνη, είναι ΤΟ ΙΔΙΟ γούστο παντού. * * ΤΙ ΕΙΝΑΙ ΑΥΤΟ ΤΟ ΚΕΙΜΕΝΟ: η απογραφή των ΚΑΛΩΝ οθονών (Σήμερα μετά το φινίρισμα, Στόλος, μπάντα * υγείας) γραμμένη ως κανόνας, ώστε η επόμενη οθόνη να μη χρειαστεί να την ανακαλύψει ξανά. Δεν είναι * θεωρία: κάθε γραμμή του υπάρχει ήδη ΚΑΠΟΥ στο αρχείο — εδώ απλώς λέγεται μία φορά και για όλους. * * ── 1. ΚΕΦΑΛΙΔΑ ΣΕΛΙΔΑΣ — `.page-head` (το ιδίωμα του `.td-top`) ───────────────────────────────── * Τίτλος αριστερά, ΨΙΛΑ ΚΑΙ ΚΥΡΙΑ ΠΡΑΞΗ δεξιά, στοίχιση ΣΤΗ ΒΑΣΗ ΤΩΝ ΓΡΑΜΜΑΤΩΝ (`baseline`, ποτέ * `center`: δίπλα σε τίτλο 26 px ένα κουμπί 44 px κεντραρισμένο κάθεται ΠΑΝΤΑ λίγο πιο ψηλά απ' όσο * πρέπει), και ΜΙΑ ΤΡΙΧΑ ΑΠΟ ΚΑΤΩ. Η τρίχα δεν είναι διακόσμηση: χωρίς αυτήν ο τίτλος και το πρώτο * περιεχόμενο είναι δύο πράγματα που τυχαίνει να είναι κοντά — με αυτήν, η κορυφή γίνεται κεφαλίδα * εργαλείου. ΕΝΑ μέγεθος τίτλου σε όλη την εφαρμογή (`h1`), όχι τρία. * * ── 2. ΕΤΙΚΕΤΑ ΟΡΓΑΝΟΥ, ΟΧΙ ΕΠΙΚΕΦΑΛΙΔΑ ΑΡΘΡΟΥ ────────────────────────────────────────────────── * Κάθε κάρτα/ομάδα/πάνελ τιτλοφορείται με ΜΙΚΡΑ ΓΡΑΜΜΑΤΑ ΜΕ ΑΝΟΙΓΜΑ. ΤΡΕΙΣ βαθμίδες, και μόνο τρεις * (η απογραφή της 05/09 βρήκε ΕΞΙ παραλλαγές για τρεις δουλειές — 11/12/12,5/13,5/17 px, τέσσερα * διαφορετικά ανοίγματα, άλλοτε muted άλλοτε μελάνι): * · ΗΣΥΧΗ (μέσα σε κάρτα) → `.inc-label` / `.stat-label`: `--fs-xs`, `--muted`, `.04em`. * · ΕΝΟΤΗΤΑ / ΛΩΡΙΔΑ (κεφαλίδα) → `.td-h-title` / `.set-h2`: `--fs-s`, `--fw-semi`, `.05em`, `--ink`. * · ΜΙΚΡΟ-ΕΤΙΚΕΤΑ ΚΕΦΑΛΑΙΩΝ (κεφαλίδα στήλης/ομάδας μενού, όπου η ΘΕΣΗ λέει ήδη τι είναι) * → `.tt-col-h` / `.usr-perm-h` / `.side-group`: `--fs-xs`, * `--fw-semi`, `.06em`, `uppercase`, `--muted`. * `h2`/`h3` με τη ΔΙΚΗ τους κλίμακα μέσα σε κάρτα ΔΕΝ μπαίνουν: φέρνουν περιθώρια και τέταρτο μέγεθος. * * ── 3. ΓΡΑΜΜΗ ΛΙΣΤΑΣ — ΑΡΙΣΤΕΡΑ Η ΤΑΥΤΟΤΗΤΑ, ΔΕΞΙΑ ΤΑ ΨΙΛΑ ────────────────────────────────────── * Στόχος αφής ≥44 px (52 στο κινητό/αυλή). Η ταυτότητα παίρνει `flex: 1 1 …; min-width: 0`· τα ψιλά * πάνε δεξιά με `margin-inline-start: auto` ΚΑΙ `justify-content: flex-end` ΚΑΙ `text-align: end` * (τα τρία μαζί — αλλιώς, τη στιγμή που τυλίγουν, στοιχίζονται αριστερά μέσα σε δεξιά στήλη). * Όποια γραμμή σε πηγαίνει αλλού κουβαλά το ΙΔΙΟ βελάκι: το εικονίδιο `back` γυρισμένο 180°. * * ── 4. Η ΟΙΚΟΓΕΝΕΙΑ ΤΩΝ ΠΛΑΚΙΔΙΩΝ — ΔΥΟ ΣΧΗΜΑΤΑ, ΚΑΝΕΝΑ ΤΡΙΤΟ ────────────────────────────────── * · `.pill` = ΕΤΙΚΕΤΑ (δεν πατιέται): `3px var(--sp-4)`, `--fs-xs`, `--fw-med`, χωρίς περίγραμμα. * · `.chip` = ΦΙΛΤΡΟ (πατιέται): `5px var(--sp-5)`, `--fs-xs`, `--fw-med`, ΜΕ περίγραμμα. * Ό,τι μοιάζει με πλακίδιο ΕΙΝΑΙ ένα από τα δύο. Μια τρίτη γεωμετρία («2px», «1px sp-3») δεν είναι * λεπτομέρεια: δίπλα-δίπλα διαβάζεται ως δύο διαφορετικά είδη πράγματος, και δεν είναι. * * ── 5. ΑΡΙΘΜΟΙ: ΠΑΝΤΑ `.num` ──────────────────────────────────────────────────────────────────── * Ώρα, ημερομηνία, πλήθος, ποσό, πινακίδα, χιλιόμετρα → κλάση `.num` (`tabular-nums`). Σε λίστα, τα * αναλογικά ψηφία κάνουν κάθε γραμμή να ξεκινά αλλού· αυτό ΕΙΝΑΙ η «καμία στοίχιση» που φαίνεται. * Το ίδιο ισχύει και μέσα σε πρόταση («λήγει 12/07 10:00»): το κείμενο δεν χοροπηδά στην ανανέωση. * * ── 6. ΡΥΘΜΟΣ: Η ΚΛΙΜΑΚΑ, ΟΧΙ ΤΟ ΜΑΤΙ ────────────────────────────────────────────────────────── * Μόνο `--sp-*`. Το μέτρο της σελίδας: κεφαλίδα→περιεχόμενο `--sp-6`, κάρτα→κάρτα `--sp-5`, * γραμμή→γραμμή λίστας `--sp-3`, μέσα σε γραμμή `--sp-3`/`--sp-4`. Ωμά px μόνο για ΟΠΤΙΚΗ διόρθωση * κάτω από 4 px, και με σχόλιο που λέει γιατί. * * ── 7. ΤΟ ΧΡΩΜΑ ΕΧΕΙ ΜΙΑ ΔΟΥΛΕΙΑ Η ΚΑΘΕ ΑΠΟΧΡΩΣΗ ─────────────────────────────────────────────── * `--accent` = ΤΑΥΤΟΤΗΤΑ ΚΑΙ ΠΛΟΗΓΗΣΗ, ΠΟΤΕ ΚΑΤΑΣΤΑΣΗ — ούτε για 200 ms σε hover. Κατάσταση = * `crit`/`warn`/`ok`, ΜΙΑ ένταση (απαλό φόντο + έγχρωμο κείμενο)· το ΣΥΜΠΑΓΕΣ ανήκει ΜΟΝΟ στο * κρίσιμο· κανένα bold ως τρίτος άξονας. Ο πλήρης νόμος: `components.js`, πάνω από την `vehicleCard`. * Η «μπάρα προσοχής» (`border-inline-start: 3px solid var(--warn)`) είναι ΕΝΑ σχήμα με ΕΝΑ πλάτος — * και ανήκει στο `warn`: το κρίσιμο το λέει το περίγραμμα + η λάμψη της `.card.crit`, όχι λωρίδα. * * ── 8. ΤΑ ΟΡΙΑ ──────────────────────────────────────────────────────────────────────────────────── * 390 px πρώτο, δύο θέματα, `prefers-reduced-motion` = όλα off, καμία βιβλιοθήκη, κανένα χρώμα εκτός * `tokens.css`. Ό,τι από τα παραπάνω κλειδώνεται δομικά, κλειδώνεται: `test_gui_house_law.py`. * ════════════════════════════════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } /* Το `hidden` του HTML πρέπει να κερδίζει: οι δικοί μας κανόνες `#id { display: … }` έχουν μεγαλύτερη ειδικότητα από τον προεπιλεγμένο κανόνα του browser και θα εμφάνιζαν στοιχείο που ζητήσαμε να κρυφτεί. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-m); line-height: var(--lh-text); -webkit-font-smoothing: antialiased; } /* Οι αριθμοί ευθυγραμμίζονται σε στήλη — ένα SoC που «χοροπηδά» καθώς ανανεώνεται φαίνεται σαν σφάλμα. */ .num, .mono, table td, input, .metric { font-variant-numeric: tabular-nums; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); } /* ---------------------------------------------------------------- top bar (mockup «Αιγαίο») */ #top { display: flex; align-items: center; gap: var(--sp-7); padding: var(--sp-5) var(--sp-8); background: var(--card); border-block-end: 1px solid var(--line); position: sticky; inset-block-start: 0; z-index: 20; } /* 🧷 ΤΟ ΣΥΜΒΟΛΑΙΟ ΤΗΣ ΜΠΑΡΑΣ: ΤΑ ΚΕΙΜΕΝΑ ΥΠΟΧΩΡΟΥΝ, ΟΙ ΣΤΟΧΟΙ ΑΦΗΣ ΠΟΤΕ (05/09) * * 🚨 ΤΟ ΝΑΥΑΓΙΟ ΠΟΥ ΚΛΕΙΝΕΙ ΕΔΩ: στα 390 px ΚΑΘΕ σελίδα της εφαρμογής είχε 28 px οριζόντια κύλιση * (`scrollWidth` 418 σε `clientWidth` 390, μετρημένο σε αληθινό Chrome). Δεν έφταιγε καμία οθόνη — * έφταιγε αυτή η μπάρα· γι' αυτό φαινόταν παντού και δεν κατηγορήθηκε πουθενά για εβδομάδες. Ο * λογαριασμός: content-box 390 − 28 padding = 362 διαθέσιμα, ενώ τα παιδιά ζητούσαν 131,9 (`.brand`) * + 76,6 (`.pill`) + 4 × 34 (κουμπιά) = 344,5, συν 6 κενά × 10 = 404,5. Τα δύο ΚΕΙΜΕΝΑ έχουν * `white-space: nowrap` ΧΩΡΙΣ `min-width: 0`, οπότε το αυτόματο `min-width: auto` του flex τα κλείδωνε * στο πλήρες πλάτος του κειμένου τους: τίποτα δεν μπορούσε να υποχωρήσει και η διαφορά βγήκε ως κύλιση. * * ΓΙΑΤΙ ΟΧΙ `max-width` + ΤΕΛΙΤΣΕΣ ΣΤΟ ΠΛΑΚΙΔΙΟ ΤΟΥ ΠΕΛΑΤΗ (η «γρήγορη» λύση): λύνει τα 28 px του * «Luna Trips» και τίποτα άλλο. Ο επόμενος πελάτης λέγεται «Mediterraneo Camper Rentals», ο * μεθεπόμενος δουλεύει σε iPhone SE στα 375 px — και το ίδιο σφάλμα γυρίζει, τότε όμως σε παραγωγή, σε * ξένη οθόνη, χωρίς αυτή τη διάγνωση. ΕΔΩ Η ΛΥΣΗ ΔΕΝ ΞΕΡΕΙ ΚΑΝΕΝΑ ΟΝΟΜΑ: τα κείμενα γίνονται ελαστικά * και μοιράζονται ό,τι ΠΕΡΙΣΣΕΥΕΙ από τα κουμπιά, όσο λίγο κι αν είναι αυτό. Το άθροισμα δεν μπορεί να * ξεπεράσει το πλάτος — με όνομα δέκα ή εξήντα χαρακτήρων, στα 390 ή στα 320 px. * * ΠΟΙΟ ΥΠΟΧΩΡΕΙ ΠΡΩΤΟ: ΤΟ ΟΝΟΜΑ ΤΟΥ ΠΡΟΪΟΝΤΟΣ. ΤΕΛΕΥΤΑΙΟ ΦΕΥΓΕΙ ΤΟΥ ΠΕΛΑΤΗ. * · Ο υπάλληλος της Luna ξέρει σε ποιο προϊόν βρίσκεται — και το ΣΗΜΑ δεν φεύγει ποτέ, άρα η μάρκα * μένει στην οθόνη· η λέξη δίπλα στο ίδιο της το σήμα είναι επανάληψη, όχι πληροφορία. * · Το πλακίδιο του πελάτη είναι η ΜΟΝΗ ΚΑΤΑΣΤΑΣΗ που κουβαλά η μπάρα. Σε χρήστη με δύο στόλους * (multi-tenant από την πρώτη μέρα) είναι ο μόνος τρόπος να μη δηλώσει έτοιμο όχημα σε ΛΑΘΟΣ * στόλο, με το όχημα στην πύλη. Ένα κομμένο «WomoRe…» δεν λέει τίποτα· ένα κομμένο * «Mediterraneo Camp…» εξακολουθεί να ονομάζει τον πελάτη. * Η ιεραρχία γράφεται ως ΛΟΓΟΣ ΣΥΡΡΙΚΝΩΣΗΣ (100 προς 1) και όχι ως σκαλοπάτι οθόνης: η μάρκα δίνει * όλο της τον χώρο πριν ο πελάτης δώσει το πρώτο pixel, σε ΚΑΘΕ πλάτος, χωρίς μαγικό αριθμό. * * ΤΟ ΠΑΤΩΜΑ ΤΟΥ ΣΗΜΑΤΟΣ ΒΓΑΙΝΕΙ ΜΟΝΟ ΤΟΥ — ΓΙ' ΑΥΤΟ ΤΟ `min-width: 0` ΜΠΑΙΝΕΙ ΣΤΟ ΚΑΙ ΟΧΙ ΣΤΟ * `.brand`: έτσι το `min-width: auto` του `.brand` παραμένει το min-content του, δηλαδή ΑΚΡΙΒΩΣ το * σήμα (26 px) συν το κενό. Το σήμα δεν κόβεται ποτέ, όσο κι αν στενέψει η οθόνη, και δεν χρειάζεται * κανένα breakpoint για να το εγγυηθεί. Αν το `min-width: 0` έμπαινε στο `.brand`, με λόγο 100 προς 1 * θα έτρωγε πρώτο το ΙΔΙΟ ΤΟΥ ΤΟ ΣΗΜΑ και μετά το κείμενο — ακριβώς ανάποδα. */ #top > .brand { flex-shrink: 100; } #top > .brand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* `display: block` και όχι το `inline-flex` του `.pill`: το `text-overflow` ισχύει σε block container — σε flex container το κείμενο κόβεται στη μέση γράμματος, χωρίς τελίτσες. Και τα δύο πλακίδια που μπαίνουν στη μπάρα (όνομα πελάτη, «εγκατάσταση») είναι σκέτο κείμενο, χωρίς κουκκίδα ή εικονίδιο. */ #top > .pill { display: block; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Ο επιλογέας πολλών στόλων: το ` (ένα tap στο κινητό, μηδέν κώδικας popover). */ .tenant { font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-med); padding: 3px var(--sp-4); max-width: 12rem; border-radius: var(--r-pill); border: none; background: var(--neutral-soft); color: var(--ink); cursor: pointer; appearance: none; text-overflow: ellipsis; } .tenant-wrap { position: relative; display: inline-flex; align-items: center; } .tenant-wrap::after { content: '▾'; position: absolute; inset-inline-end: var(--sp-4); font-size: 10px; color: var(--muted); pointer-events: none; } .tenant-wrap .tenant { padding-inline-end: var(--sp-7); } /* Μενού λογαριασμού */ .menu-wrap { position: relative; display: flex; } .menu { position: absolute; inset-block-start: calc(var(--ctl) + var(--sp-3)); inset-inline-end: 0; min-width: 15rem; padding: var(--sp-2); background: var(--card2); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-strong); z-index: 30; } .menu .who { padding: var(--sp-3) var(--sp-4) var(--sp-2); } .menu .who b { display: block; font-weight: var(--fw-semi); } .menu hr { border: none; border-block-start: 1px solid var(--line); margin: var(--sp-2) 0; } .menu button, .menu a { display: block; width: 100%; text-align: start; font: inherit; font-size: var(--fs-s); padding: var(--sp-3) var(--sp-4); border: none; border-radius: var(--r-s); background: none; color: var(--ink); cursor: pointer; } .menu button:hover, .menu a:hover { background: var(--hover); text-decoration: none; } .menu .danger { color: var(--crit); } /* ---------------------------------------------------------------- Επιλογέας γλώσσας (02/09) ΕΦΥΓΕ ΑΠΟ ΤΗ ΦΟΥΣΚΑ ΤΟΥ ΛΟΓΑΡΙΑΣΜΟΥ (εδώ ζούσαν τα παλιά κουμπάκια EL/EN/DE) ΚΑΙ ΜΠΗΚΕ ΣΤΗ ΜΠΑΡΑ: το avatar δεν υπάρχει πριν από το login, άρα η γλώσσα ήταν απρόσιτη ακριβώς στην οθόνη όπου κάποιος ανακαλύπτει ότι δεν διαβάζει τι γράφει. Ίδια γεωμετρία με το `.icon-btn` (ύψος `--ctl`), ώστε γλώσσα, θέμα και avatar να κάθονται σε μία γραμμή που δεν χορεύει. */ .lang-wrap { position: relative; display: flex; } .lang-btn { display: flex; align-items: center; gap: var(--sp-2); height: var(--ctl); flex: none; padding: 0 var(--sp-3); /* ρητό: το γενικό `button` βάζει 8/18 και ψηλώνει τη μπάρα */ border-radius: var(--r-s); border: 1px solid var(--line); background: none; color: var(--muted); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-med); white-space: nowrap; cursor: pointer; transition: color var(--t) var(--ease), border-color var(--t) var(--ease); } .lang-btn:hover, .lang-btn.active { color: var(--ink); border-color: var(--muted); } /* 🚩 Η ΣΗΜΑΙΑ ΕΙΝΑΙ ΔΙΚΟ ΜΑΣ SVG, ΟΧΙ EMOJI (Vassilis 02/09). Το emoji δούλευε παντού εκτός από τη μισή αγορά-στόχο: σε **Windows + Chrome** το 🇬🇷 δεν αποδίδεται και ο browser γράφει τα δύο regional indicator letters — «GR», «DE», «NL» με ΓΡΑΜΜΑΤΑ. Καμία δήλωση `font-family` δεν το σώζει: τα Windows δεν έχουν σημαίες σε καμία εγκατεστημένη γραμματοσειρά. Τώρα το σχήμα το ζωγραφίζουμε εμείς (`icons.flag`, πλέγμα 20×14) και είναι ίδιο σε κάθε λειτουργικό. */ svg.lang-flag { display: block; flex: none; width: 20px; height: 14px; border-radius: 2px; } /* 🚨 ΤΑ ΜΟΝΑ ΧΡΩΜΑΤΑ ΤΟΥ GUI ΠΟΥ ΔΕΝ ΑΛΛΑΖΟΥΝ ΜΕ ΤΟ ΘΕΜΑ — και σωστά: το μπλε της ελληνικής σημαίας είναι το μπλε της ελληνικής σημαίας, όχι απόχρωση της διεπαφής. Οι τιμές ζουν στο `tokens.css` (`--flag-*`), όπως ΚΑΘΕ χρώμα· εδώ μόνο η αντιστοίχιση σχήμα → token, ίδιο μοτίβο με τις `.mark-*` του σήματος. Το `.fl-edge` ΔΕΝ είναι χρώμα σημαίας: είναι το περίγραμμα, με `--line` του θέματος, ώστε NL/FR (λευκό στην άκρη) να μη λιώνουν στο ανοιχτό φόντο. */ .fl-w { fill: var(--flag-white); } .fl-gr { fill: var(--flag-gr-blue); } .fl-uk-navy { fill: var(--flag-uk-navy); } .fl-uk-red { fill: var(--flag-uk-red); } .fl-de-black { fill: var(--flag-de-black); } .fl-de-red { fill: var(--flag-de-red); } .fl-de-gold { fill: var(--flag-de-gold); } .fl-nl-red { fill: var(--flag-nl-red); } .fl-nl-blue { fill: var(--flag-nl-blue); } .fl-fr-blue { fill: var(--flag-fr-blue); } .fl-fr-red { fill: var(--flag-fr-red); } .fl-es-red { fill: var(--flag-es-red); } .fl-es-gold { fill: var(--flag-es-gold); } .fl-s-w { stroke: var(--flag-white); } .fl-s-uk-red { stroke: var(--flag-uk-red); } .fl-edge { stroke: var(--line); } /* ΕΞΙ ΓΛΩΣΣΕΣ ΧΩΡΑΝΕ, Η ΕΒΔΟΜΗ ΘΑ ΚΥΛΑΕΙ: σε κινητό ξαπλωτό (390×~350 px ωφέλιμα) έξι γραμμές των 40 px φτάνουν ήδη τον πάτο. Χωρίς αυτό, η τελευταία γλώσσα θα ήταν κομμένη και απάτητη. */ .lang-menu { min-width: 11rem; max-height: min(60vh, 20rem); overflow-y: auto; } .lang-menu button { display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; } .lang-menu button.active { background: var(--accent-soft); color: var(--ink); font-weight: var(--fw-semi); } /* ΣΤΟ ΚΙΝΗΤΟ ΜΟΝΟ Η ΣΗΜΑΙΑ (390 px): η μπάρα κρατά ήδη μάρκα, πελάτη, θέμα και avatar — ένα «Nederlands» δίπλα τους σπρώχνει το avatar εκτός οθόνης. Το όνομα ΚΡΥΒΕΤΑΙ, δεν λείπει από το DOM: ο αναγνώστης οθόνης το βρίσκει, και το `aria-label` λέει τι είναι το κουμπί σε κάθε πλάτος. */ @media (max-width: 719px) { .lang-name { display: none; } .lang-btn { width: var(--ctl); padding: 0; justify-content: center; } } /* ---------------------------------------------------------------- μπάρα κινητού (<720px) */ #bottom { position: fixed; inset-block-end: 0; inset-inline: 0; display: none; background: var(--card); border-block-start: 1px solid var(--line); padding-block-end: env(safe-area-inset-bottom); z-index: 20; } #bottom a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--bottombar-h); font-size: 11px; color: var(--muted); } #bottom a:hover { text-decoration: none; } #bottom a.active { color: var(--accent); } #bottom svg { width: 21px; height: 21px; display: block; } /* ---------------------------------------------------------------- σελίδα * * 🚨 ΤΟ `inline-size: 100%` ΔΕΝ ΕΙΝΑΙ ΠΛΕΟΝΑΣΜΟΣ — ΕΙΝΑΙ Η ΜΙΣΗ ΟΘΟΝΗ (05/09). * * ΤΙ ΕΓΙΝΕ: στα 1440 px το `#app` ζούσε σε κολόνα grid 1208 px και έπιανε 646. Δηλαδή κάθε σελίδα * ζωγραφιζόταν σε μια στενή λωρίδα στο κέντρο, με τεράστιο κενό αριστερά ΚΑΙ δεξιά. Τα πλακίδια της * «Σήμερα» έσπαγαν σε δύο σειρές, οι κάρτες οχημάτων έβγαιναν 2 ανά σειρά αντί για 3, και το * περιεχόμενο των καρτών ξεχείλιζε από το περίγραμμά τους. * * ΤΟ ΑΙΤΙΟ ΗΤΑΝ ΕΔΩ, ΟΧΙ ΣΕ ΚΑΜΙΑ ΟΘΟΝΗ: το `margin-inline: auto`. Σε ΑΠΛΟ block το `width: auto` * γεμίζει από μόνο του και το αυτόματο περιθώριο δεν κάνει τίποτα — γι' αυτό έμοιαζε αθώο για μήνες. * Μέσα όμως στο grid του `#shell.has-side` το `main` είναι GRID ITEM, και εκεί το αυτόματο περιθώριο * ΑΚΥΡΩΝΕΙ το stretch (CSS Grid §10.2: τα auto περιθώρια απορροφούν τον ελεύθερο χώρο ΠΡΙΝ την * στοίχιση): ο browser δίνει στο item το intrinsic —shrink-to-fit— πλάτος του ΠΕΡΙΕΧΟΜΕΝΟΥ του και * κεντράρει τα υπόλοιπα. * * ΓΙΑΤΙ ΔΕΝ ΤΟ ΕΙΔΕ ΚΑΝΕΙΣ: ο Στόλος σωζόταν ΚΑΤΑ ΤΥΧΗ — οι κάρτες του θέλουν 1136 px από μόνες τους, * οπότε το shrink-to-fit έβγαινε σχεδόν όσο και η κολόνα. Η πιο συχνή σελίδα έκρυβε το σφάλμα για * ΟΛΕΣ τις άλλες. * * ΓΙΑΤΙ ΡΗΤΟ ΠΛΑΤΟΣ ΚΑΙ ΟΧΙ ΣΚΕΤΟ `justify-self: stretch`: όσο υπάρχει auto περιθώριο το stretch * αγνοείται, άρα θα έπρεπε να φύγει το `margin-inline: auto` — και τότε σε οθόνη πλατύτερη από * `--page-max` (η κολόνα ξεπερνά τα 1440 από τα ~1672 px και πάνω) το `max-width` θα κόλλαγε το * περιεχόμενο ΑΡΙΣΤΕΡΑ, με ένα ολόκληρο κενό δεξιά. Με ΡΗΤΟ 100% παίρνουμε και τα δύο: το `main` * γεμίζει την κολόνα του, το `max-width` το κόβει στο `--page-max`, και το `margin-inline: auto` * κρατά ΑΚΡΙΒΩΣ τη δουλειά για την οποία μπήκε — να κεντράρει ό,τι περισσεύει, στο κινητό και στο * γραφείο, μέσα ΚΑΙ έξω από το grid. Φρουρός: `test_gui_main_fills_its_column.py`. */ main { padding: var(--sp-7) var(--sp-8) var(--sp-8); inline-size: 100%; max-width: var(--page-max); margin-inline: auto; } h1 { font-size: var(--fs-2xl); font-weight: var(--fw-semi); line-height: var(--lh-num); margin: 0 0 var(--sp-6); } h2 { font-size: var(--fs-l); font-weight: var(--fw-semi); margin: var(--sp-8) 0 var(--sp-4); } h3 { font-size: var(--fs-m); font-weight: var(--fw-semi); margin: var(--sp-6) 0 var(--sp-3); } p { margin: 0 0 var(--sp-4); } /* 🏛 ΚΕΦΑΛΙΔΑ ΣΕΛΙΔΑΣ (νόμος §1) — ΤΟ ΙΔΙΩΜΑ ΠΟΥ ΕΝΕΚΡΙΝΕ Ο ΙΔΙΟΚΤΗΤΗΣ ΣΤΗ «ΣΗΜΕΡΑ», ΓΙΑ ΟΛΟ ΤΟ ΣΠΙΤΙ. Εδώ ζει και όχι στην ενότητα της «Σήμερα», γιατί ΔΕΝ είναι της «Σήμερα»: είναι η κορυφή κάθε σελίδας. `baseline` και όχι `center`: δίπλα σε τίτλο 26 px, ένα κουμπί 44 px κεντραρισμένο κάθεται πάντα λίγο πιο ψηλά από τη γραμμή των γραμμάτων και όλη η κορυφή διαβάζεται στραβή. Η τρίχα από κάτω κάνει την κορυφή ΚΕΦΑΛΙΔΑ ΕΡΓΑΛΕΙΟΥ: χωρίς αυτήν, τίτλος και περιεχόμενο είναι δύο πράγματα που τυχαίνει να είναι κοντά. Τα ψιλά/η κύρια πράξη φεύγουν δεξιά με τον υπάρχοντα `.spacer` — ΟΧΙ με κανόνα `:last-child`, που θα κέρδιζε σε ειδικότητα τις διορθώσεις των 390 px κάθε οθόνης. */ .page-head { display: flex; align-items: baseline; gap: var(--sp-5); flex-wrap: wrap; padding-block-end: var(--sp-5); margin-block-end: var(--sp-6); border-block-end: 1px solid var(--line); } .page-head h1 { margin: 0; letter-spacing: -.01em; } /* 🏛 Η ΕΠΙΣΤΡΟΦΗ (νόμος §3) — ΜΙΑ ΓΙΑ ΟΛΟ ΤΟ ΣΠΙΤΙ. Ήταν τέσσερις: το `.rn-back` της μίσθωσης (εικονίδιο + λέξη, muted), το «πίσω» των Ρυθμίσεων (ίδιο σχήμα, ΜΠΛΕ), και δύο σελίδες που έγραφαν ωμό «← » μέσα σε `.link` — δηλαδή υπογραμμισμένο κείμενο ύψους 20 px, που δεν πιάνεται με γάντι και δεν μοιάζει με τίποτα άλλο στην εφαρμογή. Το βέλος είναι ΤΟ ΙΔΙΟ εικονίδιο με το βελάκι της πόρτας (`back`), απλώς όχι γυρισμένο: πας πίσω από εκεί που ήρθες. ΜΕΛΑΝΙ ΚΑΙ ΟΧΙ ACCENT: μια επιστροφή στην κορυφή κάθε σελίδας βαμμένη μπλε γίνεται το πιο δυνατό πράγμα της οθόνης — και η οθόνη δεν υπάρχει για να φύγεις από αυτήν. */ .back-link { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: 44px; padding: var(--sp-2) var(--sp-3); background: none; border: 0; border-radius: var(--r-s); font: inherit; font-size: var(--fs-s); font-weight: var(--fw-med); color: var(--muted); text-decoration: none; cursor: pointer; } .back-link:hover { filter: none; background: var(--hover); color: var(--ink); text-decoration: none; } .back-link svg { flex: none; } /* 🏛 ΤΟ ΒΕΛΑΚΙ ΤΗΣ ΠΟΡΤΑΣ (νόμος §3): ΤΟ ΙΔΙΟ ΣΧΗΜΑ ΠΑΝΤΟΥ. Ήταν δύο υλοποιήσεις της ίδιας γωνίας — το εικονίδιο `back` γυρισμένο 180° (`.td-caret`, `.rn-caret`, `.dfl-caret`) και το ωμό γλυφικό «›» σε bold (`.msg-caret`, πέντε οθόνες). Ίδιο σχέδιο, άλλο πάχος, άλλο ύψος γραμμής, άλλη στοίχιση: δίπλα-δίπλα (Συμβάντα: το chip «Μηνύματα ›» πάνω από λίστα με βελάκια-εικονίδια) φαινόταν. Τώρα είναι ένα, και ο διαφορετικός ΡΟΛΟΣ λέγεται με την ΚΙΝΗΣΗ: η πόρτα δεν γυρίζει, η αναδίπλωση (`.dmg-caret`) γυρίζει όταν ανοίγει. */ .muted { color: var(--muted); } .small { font-size: var(--fs-s); } .mono, code { font-family: var(--font-mono); font-size: .88em; } .big { font-size: var(--fs-2xl); font-weight: var(--fw-semi); line-height: var(--lh-num); } /* ---------------------------------------------------------------- κάρτες και διάταξη */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-6); margin-block-end: var(--sp-5); box-shadow: var(--shadow); } a.card { display: block; color: inherit; transition: border-color var(--t) var(--ease); } a.card:hover { text-decoration: none; } /* 🚨 ΤΟ ΠΕΡΙΓΡΑΜΜΑ ΜΙΑΣ ΚΡΙΣΙΜΗΣ ΚΑΡΤΑΣ ΕΙΝΑΙ ΚΑΤΑΣΤΑΣΗ — ΑΡΑ ΤΟ HOVER ΔΕΝ ΤΟ ΒΑΦΕΙ ACCENT (05/09 β). ΤΟ ΖΩΝΤΑΝΟ ΕΥΡΗΜΑ ΤΟΥ ΙΔΙΟΚΤΗΤΗ, ΑΥΤΟΥΣΙΟ: «μπλε γίνεται πάλι». Ο λόγος ήταν ΕΙΔΙΚΟΤΗΤΑ, όχι σειρά: το `a.card:hover` είναι (0,2,1) και το `.card.crit` (0,2,0) — δηλαδή το hover κέρδιζε ΠΑΝΤΑ, όπου κι αν γραφόταν, και το κόκκινο δαχτυλίδι κάθε κρίσιμης κάρτας γινόταν μπλε όσο ήταν από πάνω το ποντίκι. Δεν ήταν σφάλμα της «Σήμερα»: είναι το ΓΕΝΙΚΟ ιδίωμα της κάρτας, άρα έσπαγε ΚΑΙ στον Στόλο — γι' αυτό διορθώνεται ΕΔΩ, στην πηγή, και όχι με πιο ειδικό selector μέσα σε μία οθόνη. Η ΚΡΙΣΙΜΗ ΚΑΡΤΑ ΔΕΝ ΜΕΝΕΙ ΧΩΡΙΣ ΑΠΑΝΤΗΣΗ ΣΤΟ ΠΟΝΤΙΚΙ: ανάβει στο ΔΙΚΟ ΤΗΣ χρώμα (`--crit-line` → `--crit`). Ίδια χειρονομία, ίδια πληροφορία — αλλάζει η ένταση, ποτέ η σημασία. */ a.card:not(.crit):hover { border-color: var(--accent); } a.card.crit:hover { border-color: var(--crit); } /* Το κρίσιμο ΔΕΝ παίρνει αριστερή χρωματιστή μπάρα (κλισέ): περίγραμμα + απαλό glow (§1). */ .card.crit { border-color: var(--crit-line); box-shadow: 0 0 0 3px var(--crit-glow), var(--shadow-strong); } .grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } .row { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; } .between { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); } .stack > * + * { margin-block-start: var(--sp-4); } .narrow { max-width: 26rem; } /* ---------------------------------------------------------------- chips, κουκκίδες, σοβαρότητα */ .pill { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-med); padding: 3px var(--sp-4); border-radius: var(--r-pill); background: var(--neutral-soft); color: var(--muted); white-space: nowrap; } .pill.accent { background: var(--accent-soft); color: var(--accent); } .pill.on { background: var(--ok-soft); color: var(--ok); } .pill.off { background: var(--crit-soft); color: var(--crit); } /* 🚨 ΤΟ ΚΙΤΡΙΝΟ ΕΠΑΨΕ ΝΑ ΦΩΝΑΖΕΙ ΟΣΟ ΤΟ ΚΟΚΚΙΝΟ (05/09). ΗΤΑΝ `background: var(--warn)` — ΣΥΜΠΑΓΕΣ, δηλαδή ίδια ένταση με το κρίσιμο, σε ΔΕΚΑΠΕΝΤΕ θέσεις (Ζημιές, Συμβάντα, Γνώση, Πρωτόκολλα, Routers, Όχημα, Μηνύματα, Σήμερα…). Ο νόμος της σοβαρότητας γράφτηκε την ίδια μέρα στην `vehicleCard` και λέει το αντίθετο: ΜΙΑ ένταση (απαλό φόντο + έγχρωμο κείμενο), και το ΣΥΜΠΑΓΕΣ ανήκει ΜΟΝΟ στο κρίσιμο — αλλιώς η διαφορά crit/warning είναι μόνο απόχρωση, δηλαδή αόρατη σε αχρωματοψία, σε ήλιο και σε ασπρόμαυρη εκτύπωση. Η κάρτα οχήματος ήταν ήδη σωστή (`sev-warning`)· ΟΛΗ η υπόλοιπη εφαρμογή διαφωνούσε μαζί της. Τώρα είναι ΤΟ ΙΔΙΟ πλακίδιο. */ .pill.warn, .pill.sev-warning { background: var(--warn-soft); color: var(--warn); } .pill.crit { background: var(--crit); color: var(--on-crit); } /* ΠΡΟΤΑΣΗ ΜΕ ΤΟ ΣΧΗΜΑ ΠΛΑΚΙΔΙΟΥ: το `nowrap` του `.pill` είναι σωστό για δύο λέξεις και καταστροφικό για ολόκληρη πρόταση — κλειδώνει το πλάτος της στο κείμενό της και βγάζει ΟΛΗ τη σελίδα σε οριζόντια κύλιση (μετρημένο στα 390 px, «Σήμερα» 05/09, 7 px). Δύο ακόμα σελίδες το κάνουν σήμερα (Νομικά, Γνώση) με `

`. Ό,τι είναι παράγραφος ΔΕΝ είναι πλακίδιο: τυλίγει. */ p.pill { white-space: normal; min-inline-size: 0; } /* ---------------------------------------------------------------- η κλίμακα σοβαρότητας (05/09) «Αλλού κόκκινες ειδοποιήσεις, αλλού κίτρινες, bold κίτρινα… δεν καταλαβαίνει κανείς τη σημασία των χρωμάτων.» Ο νόμος ζει γραμμένος στο `components.js` (πάνω από την `vehicleCard`)· εδώ είναι τα δύο σκαλοπάτια του: · ΑΠΑΛΟ (εδώ) = «υπάρχει, κοίτα το» — απαλό φόντο, έγχρωμο κείμενο, ΕΝΑ βάρος, · ΣΥΜΠΑΓΕΣ (`.solid`, πιο κάτω) = «φωνάζω» — και ανήκει ΜΟΝΟ στο κρίσιμο. Έτσι η διαφορά crit/warning ΔΕΝ είναι μόνο απόχρωση αλλά ΕΝΤΑΣΗ: διαβάζεται σε αχρωματοψία και σε ασπρόμαυρη εκτύπωση. Το `info`/`customer` δεν παίρνει χρώμα ΚΑΘΟΛΟΥ — χρώμα που μπαίνει παντού παύει να σημαίνει κάτι. Το ρητό βάρος στο κρίσιμο ΔΕΝ είναι περιττό: ακυρώνει το `--fw-semi` που κληρονομεί από το σκέτο `.sev-critical` από κάτω (εκεί είναι σωστό — είναι τίτλος γραμμής, όχι πλακίδιο). */ .pill.sev-critical { background: var(--crit-soft); color: var(--crit); font-weight: var(--fw-med); } /* (το `sev-warning` δηλώνεται μαζί με το `.pill.warn` παραπάνω: ΕΙΝΑΙ το ίδιο πλακίδιο) */ .pill.sev-info, .pill.sev-customer { background: var(--neutral-soft); color: var(--muted); } .dot { width: 8px; height: 8px; border-radius: var(--r-pill); flex: none; background: var(--muted); } .dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse var(--pulse-dot) infinite; } .dot.off { background: var(--crit); box-shadow: 0 0 8px var(--crit); } .sev-critical { color: var(--crit); font-weight: var(--fw-semi); } .sev-warning { color: var(--warn); } .sev-info, .sev-customer { color: var(--muted); } /* ---------------------------------------------------------------- κουμπιά και φόρμες */ button, .btn { font: inherit; font-size: var(--fs-s); font-weight: var(--fw-med); padding: var(--sp-3) var(--sp-6); border-radius: var(--r-s); border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer; transition: filter var(--t) var(--ease); } button:hover { filter: brightness(1.08); } button.ghost { background: none; color: var(--accent); } button.ghost:hover { background: var(--accent-soft); } button.link { background: none; border: none; color: var(--muted); padding: var(--sp-2) var(--sp-3); text-decoration: underline; } button.link:hover { color: var(--ink); } button.danger { background: none; border-color: var(--crit); color: var(--crit); } button[disabled] { opacity: .55; cursor: progress; filter: none; } input, select, textarea { font: inherit; font-size: var(--fs-m); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-s); border: 1px solid var(--line); background: var(--bg2); color: var(--ink); width: 100%; max-width: 22rem; } input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; } /* Το γενικό `width: 100%` είναι για πεδία κειμένου. Ένα checkbox σε πλάτος 22rem δεν είναι πεδίο, είναι λωρίδα — και η ετικέτα του καταλήγει στην άλλη άκρη της οθόνης (φάνηκε σε αληθινό browser, 01/09). */ input[type='checkbox'], input[type='radio'] { width: auto; max-width: none; } input[type='number'] { max-width: 6rem; } label.row { display: flex; align-items: center; gap: var(--sp-3); } input::placeholder { color: var(--muted); } label { display: block; margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-s); color: var(--muted); } /* ---------------------------------------------------------------- πίνακες */ table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); } td, th { text-align: start; padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); font-weight: var(--fw-med); } tr:last-child td { border-block-end: none; } .src { color: var(--muted); padding-inline-start: var(--sp-7); } details.card > summary { cursor: pointer; color: var(--accent); } /* ---------------------------------------------------------------- καταστάσεις (§6) */ #toast { position: fixed; inset-inline-start: 50%; transform: translateX(-50%); inset-block-end: calc(var(--sp-7) + env(safe-area-inset-bottom)); background: var(--card2); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-strong); padding: var(--sp-4) var(--sp-6); border-radius: var(--r); max-width: 90vw; /* 🚨 ΠΑΝΩ ΑΠΟ ΚΑΘΕ ΠΕΤΑΣΜΑ (05/09). Ήταν 40, δηλαδή ΚΑΤΩ από το `.rn-modal` (60): κάθε μήνυμα που έβγαινε από ανοιχτό popup ήταν κυριολεκτικά αόρατο — μετρημένο με `elementFromPoint` στο ζωντανό, «ΚΑΛΥΜΜΕΝΟ από rn-go-big», γιατί το toast κάθεται ακριβώς πίσω από το sticky footer. Ο χειριστής πατούσε «δες τι θα γίνει» και δεν έβλεπε τίποτα. Ένα μήνυμα που δεν φαίνεται είναι χειρότερο από κανένα: ο άνθρωπος ξαναπατάει, και την τρίτη φορά δεν εμπιστεύεται την οθόνη. */ z-index: 80; } #toast.bad { border-color: var(--crit-line); color: var(--crit); } /* Φόρτωση: σκελετοί, όχι spinner σε όλη τη σελίδα — η οθόνη κρατά το σχήμα της. */ .skeleton { background: var(--skeleton); border-radius: var(--r); animation: breathe 1.6s ease-in-out infinite; } .skeleton.line { height: 12px; margin-block-end: var(--sp-3); } .skeleton.card-sk { height: 8.5rem; } /* Κείμενο μόνο για αναγνώστες οθόνης (π.χ. «Φόρτωση…» πάνω από τους σκελετούς). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .empty { text-align: center; color: var(--muted); padding: var(--sp-8) var(--sp-5); } .empty svg { width: 96px; height: 96px; color: var(--line); margin-block-end: var(--sp-5); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } /* ---------------------------------------------------------------- Στόλος (Π2): μπάντα υγείας */ .band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); margin-block-end: var(--sp-6); } .stat { overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-5) var(--sp-6); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); font: inherit; text-align: start; color: inherit; } .stat:hover { filter: none; } .stat.clickable { cursor: pointer; transition: border-color var(--t) var(--ease); } .stat.clickable:hover { border-color: var(--accent); } .stat.active { border-color: var(--accent); background: var(--card2); } .stat-label { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .04em; } .stat-main { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; min-width: 0; } .stat-main .spark { max-width: 100%; } .stat-value { font-size: 30px; font-weight: 650; line-height: var(--lh-num); color: var(--ink); } .stat-value.warn { color: var(--warn); } .stat-value.crit { color: var(--crit); } .stat-unit { font-size: var(--fs-l); font-weight: var(--fw-med); color: var(--muted); white-space: nowrap; } .stat-sub { font-size: var(--fs-xs); color: var(--muted); } /* ---------------------------------------------------------------- Στόλος: φίλτρα και ένδειξη ζωής */ .fleet-tools { display: flex; align-items: center; gap: var(--sp-4); margin-block-end: var(--sp-5); flex-wrap: wrap; } .chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .chip { font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-med); padding: 5px var(--sp-5); border-radius: var(--r-pill); border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; } .chip:hover { color: var(--ink); filter: none; } .chip.active { background: var(--accent-soft); color: var(--ink); border-color: transparent; } /* Ψαχτήρι στόλου: το γενικό `input` (22rem) θα έσπρωχνε τα φίλτρα στην επόμενη σειρά. Το πεδίο παίρνει ό,τι περισσεύει, μαζεύεται χωρίς να σπάει τη γραμμή, και έχει το ύψος των chip δίπλα του. */ .fleet-search { flex: 1 1 10rem; min-width: 0; max-width: 15rem; font-size: var(--fs-s); padding: var(--sp-2) var(--sp-4); } .fleet-search::-webkit-search-cancel-button { cursor: pointer; margin-inline-start: var(--sp-2); } @media (max-width: 719px) { .fleet-search { flex: 1 1 100%; max-width: none; } } .live { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--muted); } .live.off { color: var(--warn); } /* ---------------------------------------------------------------- Στόλος: κάρτα οχήματος */ .cards { grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr)); } .vcard { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-6) var(--sp-6) 13px; margin: 0; } /* 🚨 ΤΙΠΟΤΑ ΕΞΩ ΑΠΟ ΤΟ ΠΕΡΙΓΡΑΜΜΑ (05/09): η κάρτα ζει σε κολόνα `minmax(17rem, 1fr)` — δηλαδή σε 272 px όταν το πλέγμα στενέψει. Χωρίς `flex-wrap`, το όνομα (κουκκίδα + κωδικός + πινακίδα) και τα πλακίδια κατάστασης έχουν όλα `min-width: auto`, οπότε η σειρά κλειδώνει στο άθροισμα των min-content τους και το τελευταίο πλακίδιο βγαίνει ΕΞΩ από την κάρτα, κομμένο στη μέση («διο…»). Η σωστή υποχώρηση είναι ΓΡΑΜΜΗ ΠΑΡΑΚΑΤΩ, όχι κόψιμο: το `wrap` τη δίνει, το `min-inline-size: 0` αφήνει το όνομα να στενέψει, και το `overflow-wrap` σώζει τον έναν κωδικό χωρίς κενά που δεν χωρά ούτε μόνος του. */ .vcard-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } .vcard-name { display: flex; align-items: center; gap: var(--sp-3); font-size: 15.5px; font-weight: var(--fw-semi); color: var(--ink); min-inline-size: 0; overflow-wrap: anywhere; } /* ΚΑΙ ΤΟ ΙΔΙΟ ΤΟ ΠΛΑΚΙΔΙΟ ΤΥΛΙΓΕΙ, όταν η λέξη της κατάστασης δεν χωρά ούτε μόνη της σε μια γραμμή: το λεξιλόγιο έρχεται από τη ΒΑΣΗ και σε έξι γλώσσες («nicht verfügbar»), δηλαδή το πλάτος του δεν το ξέρουμε τη στιγμή που γράφεται το CSS. Δύο γραμμές μέσα στο πλακίδιο είναι άσχημες· μισή λέξη έξω από την κάρτα είναι χαλασμένη οθόνη. */ .vcard-top .pill { white-space: normal; } .vcard-body { display: flex; align-items: center; gap: var(--sp-5); } .vcard-side { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .vcard-extra { font-size: 12.5px; color: var(--muted); } .vcard-extra.crit { color: var(--crit); } .vcard-extra.warn { color: var(--warn); } /* Η γραμμή του πελάτη (02/09, «communication first»): πρώτη στη στήλη και — ΜΟΝΟ όταν ζητά πράξη — έγχρωμη· η ήσυχη επαφή μένει σβηστή. 🚨 ΤΟ ΒΑΡΟΣ ΕΦΥΓΕ (05/09, «bold κίτρινα»): ήταν ο ΤΡΙΤΟΣ άξονας έμφασης στην ίδια κάρτα (χρώμα, ένταση πλακιδίου, βάρος κειμένου) και κανείς δεν διάβαζε πια τι σημαίνει ο καθένας. Το επιχείρημα του 02/09 («αλλιώς χάνεται δίπλα στο ψυγείο 4,1°») έχει λήξει: ο αριθμός του ψυγείου ΔΕΝ είναι πια σε αυτή τη στήλη. Η έμφαση μένει εκεί που ήταν πάντα η δυνατή — Η ΘΕΣΗ: πρώτη γραμμή, και χρώμα. */ /* Παγωμένη τιμή: γκριζάρει ΚΑΙ λέει πόσο παλιά είναι (§2). Ποτέ κρυμμένη — μια τιμή που εξαφανίζεται χωρίς εξήγηση είναι χειρότερη από μια τιμή που παραδέχεται την ηλικία της. */ .vcard-extra.stale { opacity: .55; text-decoration: line-through solid; text-decoration-thickness: 1px; } .vcard-extra.stale .age { text-decoration: none; display: inline-block; } .ring.stale { opacity: .45; } /* Ίδιος κανόνας με το `.vcard-top`, ίδιος λόγος: «3 ειδοποιήσεις» δίπλα σε «πριν 2 ώρες» δεν χωρά σε στενή κολόνα, και ένα πλακίδιο μισό έξω από την κάρτα διαβάζεται ως χαλασμένη οθόνη. */ .vcard-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); } /* Τιμή που μόλις ενημερώθηκε: 300ms λάμψη. Ό,τι είναι ζωντανό αναπνέει (§1) — τίποτα άλλο δεν κουνιέται. */ .vcard.flash { animation: flash var(--flash) var(--ease); } @keyframes flash { from { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } } /* Δαχτυλίδι SoC και γραμμούλα: χρώμα ΜΟΝΟ από κλάση, ποτέ από attribute (θέμα + αχρωματοψία). */ .ring, .spark { flex: none; } .ring-track { fill: none; stroke: var(--line); } .ring-value { fill: none; stroke: var(--accent); } /* Το τόξο βάφεται από ΤΗ ΔΙΚΗ ΤΟΥ μέτρηση (κανόνας 4): κόκκινο εδώ σημαίνει «η ΜΠΑΤΑΡΙΑ είναι κρίσιμη», ποτέ «το όχημα έχει κάπου αλλού κρίσιμο» — μέχρι τις 05/09 σήμαινε το δεύτερο και κατηγορούσε τον αθώο. */ .ring-value.crit { stroke: var(--crit); } .ring-value.warn { stroke: var(--warn); } .ring-text { fill: var(--ink); } /* Το «%» και το εικονίδιο μπαταρίας μέσα στο δαχτυλίδι (02/09 β): ΤΟΝΟΣ κάτω από τον αριθμό, ώστε το μάτι να πιάνει πρώτα το «73» και μετά να καταλαβαίνει τι είναι. Ίδιο μοτίβο με το `.tile-unit`. Το εικονίδιο παίρνει χρώμα από `color` (το `icons.js` ζωγραφίζει με `currentColor`). */ .ring-unit { fill: var(--muted); font-weight: var(--fw-med); } .ring-icon { color: var(--muted); } .ring-empty { flex: none; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--line); border-radius: var(--r-pill); color: var(--muted); font-size: 11px; /* ΚΥΚΛΟΣ ΚΑΙ ΟΧΙ ΕΤΙΚΕΤΑ: τη διάμετρο τη δίνει το `components.js` (ίδια με το δαχτυλίδι δίπλα). Το ελάχιστο εδώ δεν αλλάζει τίποτα στη ζωγραφιά — δηλώνει ΣΧΗΜΑ, ώστε να μη διαβαστεί ποτέ ως πλακίδιο εκτός οικογένειας (νόμος §4, `test_gui_house_law`). */ min-inline-size: 1em; } /* ---------------------------------------------------------------- το σήμα του μεγέθους που φταίει (05/09) Ίδια θέση και ίδιο μέγεθος με το δαχτυλίδι, ΑΛΛΗ ΥΠΟΣΧΕΣΗ: το τόξο λέει «τόσο τοις εκατό», και τα 10,1 °C δεν είναι ποσοστό — ένα τόξο στο 10 % του κύκλου θα ήταν κυριολεκτικά ψέμα. Εδώ ο δίσκος είναι ΓΕΜΑΤΟΣ (απαλό χρώμα σοβαρότητας) με συμπαγές περίγραμμα: σήμα, όχι μετρητής. Η σοβαρότητα δεν κρέμεται από το χρώμα — τη λένε ήδη το περίγραμμα της κάρτας, το πλακίδιο των ειδοποιήσεων και το `aria-label`/tooltip του ίδιου του σήματος, με λέξη («ΚΡΙΣΙΜΟ»). */ .mdial { flex: none; } .mdial-face { fill: var(--crit-soft); stroke: var(--crit); } .mdial.warn .mdial-face { fill: var(--warn-soft); stroke: var(--warn); } .mdial-text { fill: var(--crit); font-weight: var(--fw-semi); } .mdial.warn .mdial-text { fill: var(--warn); } .mdial-unit { font-weight: var(--fw-med); opacity: .78; } .mdial-icon { color: var(--crit); } .mdial.warn .mdial-icon { color: var(--warn); } /* Η μπαταρία που υποχώρησε: εικονίδιο + αριθμός σε μία ψιλή γραμμή, στον τόνο των υπόλοιπων «έξτρα». Το εικονίδιο ΔΕΝ συρρικνώνεται όταν στενέψει η κολόνα — αλλιώς γίνεται μουτζούρα δίπλα στο «98 %». */ .vcard-extra.soc { display: flex; align-items: center; gap: 5px; color: var(--muted); } .vcard-extra.soc svg { flex: none; } .spark polyline { stroke: var(--accent); } .spark-end { fill: var(--accent); } .spark.crit polyline { stroke: var(--crit); } .spark.crit .spark-end { fill: var(--crit); } @media (max-width: 1100px) { .band { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------------------------------------------------------------- Στόλος: ο χάρτης (Π2, 02/09) * * Ο χάρτης δεν έχει βιβλιοθήκη — άρα ΟΛΟ το σχήμα του είναι εδώ (`map.js` γράφει μόνο θέσεις σε pixel). * ΚΑΝΕΝΑ ΧΡΩΜΑ ΣΤΟ SVG: οι πινέζες παίρνουν χρώμα από κλάση, όπως το δαχτυλίδι SoC — αλλιώς στο δεύτερο * θέμα βγαίνουν αόρατες. Τα ΠΛΑΚΙΔΙΑ έρχονται όπως είναι από τον OSM (φωτεινά και στα δύο θέματα)· το * πλαίσιο, οι πινέζες και τα κουμπιά είναι δικά μας και ακολουθούν το θέμα. */ .map-card { margin-block-end: var(--sp-5); } .map-view { position: relative; height: 420px; margin-block-start: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card2); cursor: grab; user-select: none; /* Το σύρσιμο ΜΕΤΑΚΙΝΕΙ ΤΟΝ ΧΑΡΤΗ — δεν σκρολάρει τη σελίδα. Ίδια σύμβαση με κάθε χάρτη· χωρίς αυτό, σε κινητό ο χάρτης είναι εικόνα που δεν πιάνεται. Η σελίδα σκρολάρει από παντού αλλού. */ touch-action: none; } .map-view.dragging { cursor: grabbing; } .map-tiles, .map-marks { position: absolute; inset: 0; } .map-marks { pointer-events: none; } /* το κενό ανάμεσα στις πινέζες ανήκει στο σύρσιμο */ .map-tile { position: absolute; top: 0; left: 0; width: 256px; height: 256px; display: block; background: var(--card2); /* γκρι τετράγωνο όσο φορτώνει */ } /* Πλακίδιο που δεν ήρθε: ΕΞΑΦΑΝΙΖΕΤΑΙ, δεν γίνεται σπασμένη εικόνα. Από κάτω είναι το ίδιο γκρι της κάρτας, οπότε η τρύπα δεν φαίνεται· το εικονίδιο «broken image» του browser φαινόταν από χιλιόμετρα. */ .map-tile.missing { visibility: hidden; } /* Πινέζα οχήματος: η ΜΥΤΗ είναι η θέση, γι' αυτό το -100 % στον κατακόρυφο άξονα. */ .map-mark { position: absolute; top: 0; left: 0; padding: 0; border: none; background: none; line-height: 0; cursor: pointer; pointer-events: auto; transform: translate(-50%, -100%); } .map-mark:hover { filter: none; } /* Πινέζα ΧΩΡΙΣ σύννεφο (σελίδα οχήματος): σχήμα, όχι κουμπί — δεν πιάνει τον δείκτη, ώστε το σύρσιμο του χάρτη να δουλεύει και πάνω της. Σε κάρτα 260px η πινέζα και η αυλή σκεπάζουν το μισό κάδρο. */ .map-mark.static { pointer-events: none; } .map-mark.site { transform: translate(-50%, -50%); } /* Παλιά θέση: ξεθωριάζει, ΔΕΝ εξαφανίζεται — «δεν ξέρω πού είναι» δεν γράφεται ποτέ ως κενός χάρτης. */ .map-mark.stale { opacity: .45; } .map-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-s); } .mk-pin { fill: var(--muted); stroke: var(--card); stroke-width: 1.5; } .mk-eye { fill: var(--card); } .map-mark.out .mk-pin { fill: var(--accent); } /* σε μίσθωση = έξω, με το χρώμα ταυτότητας */ .map-mark.crit .mk-pin { fill: var(--crit); } /* ΣΗΜΕΙΑ ΕΞΥΠΗΡΕΤΗΣΗΣ (0071): κύκλος με το ΚΕΝΤΡΟ του πάνω στη θέση — γι' αυτό -50 % και στους δύο άξονες, όπως η αυλή και όχι όπως η πινέζα οχήματος (που έχει μύτη). Μικρότερα και πιο ήσυχα από το όχημα: είναι το πλαίσιο της απάντησης, όχι η απάντηση. Το `pointer-events` ΜΕΝΕΙ ενεργό ακόμα και σε χάρτη χωρίς σύννεφα (σελίδα οχήματος): μια πινέζα POI χωρίς όνομα και απόσταση δεν λέει τίποτα, άρα πρέπει να πατιέται — το `map.js` της δίνει `