/* ===================================================================== ekΜάθησις — Design Tokens v4 «FROST» · (11/6/2026) --------------------------------------------------------------------- ΠΑΛΕΤΑ ΑΝΤΩΝΗ (αυστηρά): - Φόντο: mauve (μωβ) glow πάνω-αριστερά + ΑΠΑΛΟ MINT-GREEN glow — πάνω σε ανοιχτό γκρι-λιλά (το φόντο της 1ης προσπάθειας/reference). - Θετικοί εκπαιδευτικοί: mint πράσινο #54CE96 (soft #C9F2DB) - Θεωρητικοί εκπαιδευτικοί: μπλε ίδιου τόνου #5FB0EA (soft #D2E9FA) - Γενικό accent: παστέλ ΚΙΤΡΙΝΟ (reference) · δευτερεύον: ΜΩΒ (reference) - Κύρια δράση/ενεργά: ΜΑΥΡΟ pill. Τυπογραφία: Inter — ΜΕΓΑΛΕΣ & ΛΕΠΤΕΣ (300/400) σε τίτλους/νούμερα. ΘΕΜΑΤΑ: light (default) | dark. Παλιά skins: git commit 1a23ee4. ⚠️ WCAG AA: κείμενο ≥ 4.5:1 και στα δύο. ───────────────────────────────────────────────────────────────────── ⚠ (28/7) ΥΠΑΡΧΕΙ RUNTIME OVERRIDE LAYER: /assets/theme-overrides.css (παράγεται από τον «Επεξεργαστή Επιπέδων» — Ρυθμίσεις, super-only· φορτώνει ΜΕΤΑ από αυτό σε ΟΛΑ τα layouts). Οι τιμές ΕΔΩ = ΕΡΓΟΣΤΑΣΙΑΚΑ. Ζωντανή αλήθεια = αυτό + overrides (αν υπάρχει το αρχείο). Πηγή overrides: storage/theme-overrides.json. «Κλείδωμα» τιμών = μεταφορά εδώ + άδειασμα εκεί. ===================================================================== */ :root{ /* ┌────────────────────────────────────────────────────────────────────────────────────┐ │ ΜΕΓΕΘΗ ΚΟΥΜΠΙΩΝ — ΕΔΩ ΚΑΙ ΠΟΥΘΕΝΑ ΑΛΛΟΥ │ │ Άλλαξε έναν αριθμό εδώ και ακολουθεί όλη η πλατφόρμα. Καμία σάρωση, κανένα άλλο │ │ αρχείο. Δοκίμασε πρώτα με το μάτι: /_button-sizes.html │ └────────────────────────────────────────────────────────────────────────────────────┘ ΤΡΕΙΣ ΟΜΑΔΕΣ, γιατί δεν θέλουμε πάντα να αλλάζουν όλα μαζί (αίτημα Αντώνη 5/8ιε «να αλλάζουμε [επιλεκτικά], γιατί μην αλλάζουν όλα»): --btn-h-bar γραμμές εργαλείων — αναζήτηση, Facebook, «+ Νέος», στρογγυλά πάνω --btn-h-groove αύλακες — φίλτρα, παραρτήματα, βαθμίδες (το ΔΟΧΕΙΟ) --btn-h-card μέσα σε κάρτα — Νέα σημείωση, Επιστροφή, Σύγκριση, φόρμες Το --btn-h είναι η ΒΑΣΗ: άλλαξε μόνο αυτό και αλλάζουν και οι τρεις μαζί (όπως πριν). Θέλεις να πειράξεις μία μόνο; Δώσε της δική της τιμή, π.χ. --btn-h-groove:40px. ΙΣΤΟΡΙΚΟ: πριν υπήρχαν έξι διαφορετικά ύψη (48/44/41/40/37/33) γραμμένα με το χέρι σε 29 αρχεία, τα μισά κάτω από τα 44px που θέλει το δάχτυλο σε tablet (αρχή #1). ΔΕΝ ΠΑΙΡΝΟΥΝ ΥΨΟΣ: ετικέτες που δεν πατιούνται (badges) · ό,τι ζει ΜΕΣΑ σε άλλο στοιχείο (κουμπί αποστολής μέσα σε πλαίσιο κειμένου, «+» χρονογραμμής) · το κινητό, που δουλεύεται ξεχωριστά (@media max-width, html.mview — δεν πειράχτηκαν ποτέ από αυτή τη δουλειά). */ --btn-h:44px; --btn-h-bar:var(--btn-h); --btn-h-groove:var(--btn-h); --btn-h-card:var(--btn-h); --btn-in:calc(var(--btn-h-groove) - 8px); /* κουμπί ΜΕΣΑ στην αύλακα — παράγωγο, μην το ορίζεις */ /* 📌 ΕΚΚΡΕΜΟΤΗΤΑ (5/8ιε): ίσως 48 ΜΟΝΟ σε tablet — «αν σου πω, το ξαναβλέπουμε». Όταν έρθει: ένα @media (768–1100px) που αλλάζει ΜΟΝΟ το --btn-h εδώ. Τίποτε άλλο. */ --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --ease:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.16,1,.3,1); --dur-fast:.22s; --dur:.42s; --dur-slow:.55s; --w-num:200; --w-title:400; --w-label:500; /* ΛΕΠΤΕΣ μεγάλες — βάρος 200 (επιλογή Αντώνη 11/6) */ --r-sm:14px; --r-md:20px; --r-lg:24px; --r-xl:30px; --r-pill:999px; --r-frame:34px; /* χρώματα ρόλων: ΠΗΓΗ = UserRepository::SPECIALTY_ROLE_COLORS (το base.php τα τυπώνει ως override — εδώ μόνο fallbacks). Τα soft ΠΑΡΑΓΟΝΤΑΙ από τα κύρια → μία αλλαγή, όλα μαζί. */ --pos:#54CE96; --pos-soft:color-mix(in srgb, var(--pos) 26%, #FFFFFF); /* θετικός — mint */ --the:#66eeff; --the-soft:color-mix(in srgb, var(--the) 26%, #FFFFFF); /* θεωρητικός/φιλόλογος — έντονο κυανό (30/6) */ /* ═══ POPUP/MODAL system (9/7, γενικός κανόνας «καθολικά παντού») — ΜΙΑ πηγή αλήθειας για ΚΑΘΕ παράθυρο (ops modals + καρτέλα υποψηφίου). Άλλαξε εδώ → αλλάζει παντού. ═══ */ --popup-frame-blur:8px; /* blur ΠΙΣΩ από το ΠΛΑΙΣΙΟ (θολώνει πιο πολύ) */ --popup-overlay-blur:2px; /* blur του overlay ΓΥΡΩ-γύρω (9/7: 1→2px) */ --popup-overlay-tint:rgba(20,24,45,.25);/* σκίαση overlay πίσω (9/7: .20→.25) */ /* ═══ ΥΨΟΣ ΠΑΡΑΘΥΡΟΥ — ΜΙΑ ΤΙΜΗ ΓΙΑ ΟΛΑ (9/8θ, απόφαση Αντώνη) ═══════════════════════════ *«Ρύθμισε το ύψος του κάθε παραθύρου· στο tablet να χωράει στο ύψος της οθόνης. Γενικά να το κάνουμε παντού.»* ΓΙΑΤΙ ΞΕΦΕΥΓΑΝ ΤΑ ΠΑΡΑΘΥΡΑ ΣΤΟ TABLET: κάθε modal είχε το ΔΙΚΟ του νούμερο σε `vh` (86/88/90/92/94) — και το `vh` σε κινητό/tablet μετρά το **ΜΕΓΑΛΥΤΕΡΟ** viewport, αυτό με τις μπάρες του browser ΚΡΥΜΜΕΝΕΣ. Όσο οι μπάρες φαίνονται (δηλαδή σχεδόν πάντα στην πράξη), το «92vh» είναι ΨΗΛΟΤΕΡΟ από ό,τι βλέπει ο άνθρωπος → το κάτω μέρος, μαζί με τα κουμπιά «Αποθήκευση/Άκυρο», έπεφτε εκτός οθόνης. Στον υπολογιστή δεν φαινόταν ποτέ, γιατί εκεί `vh` και ορατό ύψος ταυτίζονται — γι' αυτό «γίνεται μόνο σε υπολογιστή». Η ΛΥΣΗ: `dvh` = το ΔΥΝΑΜΙΚΟ ύψος, ό,τι είναι όντως ορατό αυτή τη στιγμή. Με fallback σε `vh` για παλιά Safari (ίδιο μοτίβο που ήδη χρησιμοποιεί το handwriting.css). ΕΝΑ TOKEN, ΟΧΙ ΔΕΚΑΠΕΝΤΕ ΝΟΥΜΕΡΑ: αλλάζει εδώ → αλλάζει σε κάθε παράθυρο της πλατφόρμας. */ --popup-h:92vh; } @supports (height: 1dvh) { :root { --popup-h:92dvh; } } /* ---- LIGHT (DEFAULT) ---- */ [data-theme="light"], :root:not([data-theme]), [data-theme=""]{ /* v1 ΦΟΝΤΟ (έως 11/6 — ΚΡΑΤΗΘΗΚΕ για revert: ξεσχολίασε αυτό & σβήσε το ενεργό από κάτω): --body:radial-gradient(1050px 780px at -6% 4%, #C3B3EC 0%, rgba(195,179,236,0) 60%), radial-gradient(750px 600px at 108% 112%, #CDC2E8 0%, rgba(205,194,232,0) 55%), linear-gradient(150deg,#DBD8E1 0%,#E0DDE5 55%,#E4E1E9 100%); */ /* v3 (14/6): μωβ glow πάνω-αριστερά ΜΕΝΕΙ · κάτω-δεξιά ΠΡΑΣΙΝΟ glow (σβήνει ομαλά στο γκρι) */ --body:radial-gradient(1050px 780px at -6% 4%, #C3B3EC 0%, rgba(195,179,236,0) 60%), radial-gradient(1150px 900px at 64% 70%, rgba(195,241,246,.62) 0%, rgba(195,241,246,.3) 34%, rgba(195,241,246,0) 56%), linear-gradient(150deg,#D4D2D8 0%,#D7D6DA 55%,#DAD9DC 100%); /* mauve ↖ + υφή #c3f1f6 που ΚΑΤΕΒΑΙΝΕΙ από ~κέντρο ↘ προς κάτω-δεξιά & σβήνει σε γκρι στη γωνία (14/6) */ --blur:blur(var(--lvl-1-blur)) saturate(150%); /* (28/7) ΕΝΟΠΟΙΗΣΗ: μία ακτίνα παντού */ --frame-bg:transparent; --frame-bd:0; --shell-sh:none; --rail-bg:var(--lvl-1); --rail-bd:1px solid rgba(255,255,255,.8); /* (28/7) ράγα = πίσω chrome → επ.1 */ --folder-edge:rgba(255,255,255,.8); /* (27/7) ΙΔΙΟ χρώμα με το περίγραμμα της ράγας */ /* (28/7ε) ΠΕΡΙΓΡΑΜΜΑ ΕΠΙΠΕΔΟΥ 1 — ΕΝΑΣ ΔΙΑΚΟΠΤΗΣ ΓΙΑ ΟΛΑ: ημερολόγιο, πλαϊνό φύλλο + γλωσσίδες, τμήματα, κάδρο μαθητών. ΓΙΑΤΙ ΞΕΧΩΡΙΣΤΟ από το --glass-bd: εκείνο ντύνει επιφάνειες που κάθονται πάνω στο ΣΚΟΥΡΟ φόντο (λωρίδα ημερομηνιών, ράγα) όπου το λευκό .7 διαβάζεται. Αυτές εδώ κάθονται ανάμεσα σε ΑΝΟΙΧΤΕΣ επιφάνειες — λευκό πάνω σε λευκό — και θέλουν παραπάνω ένταση. ΡΥΘΜΙΣΗ: άλλαξε ΜΟΝΟ αυτή τη γραμμή. Δοκιμασμένες τιμές: .7 = σχεδόν αόρατο · .9 = το ελάχιστο ορατό · rgba(70,60,110,.28) = σκούρο μωβ, διαβάζεται παντού. */ --lvl-edge:rgba(255,255,255,.9); /* ── ΜΙΑ ΣΚΙΑ ΓΙΑ ΟΛΑ ΤΑ ΚΟΥΜΠΙΑ (5/8ιε, επιλογή Αντώνη) ───────────────────────────── «Πήγαινε στο ημερολόγιο, στο κουμπί των ειδοποιήσεων ή στο "όλα" — αυτή η σκιά μου αρέσει. Εφάρμοσέ τη σε όλα. Κάποια έχουν μικρότερη, κάποια μεγαλύτερη· δεν είναι ωραίο.» Η τιμή είναι ΑΥΤΟΥΣΙΑ του `.ops-allbtn`. Η προηγούμενη (0 6px 16px -6px, .45) ήταν αρκετά πιο βαριά — γι' αυτό τα CTA «έβγαιναν» από τη σελίδα ενώ τα διπλανά τους κάθονταν επίπεδα. Δύο τιμές, όχι μία: η δεύτερη είναι η ίδια σκιά λίγο πιο ψηλά, για hover. */ --btn-sh:0 2px 8px -3px rgba(20,16,40,.18); --btn-sh-h:0 3px 11px -3px rgba(20,16,40,.26); --menu-bg:transparent; --content-bg:transparent; --right-bg:transparent; --line:rgba(50,45,75,.1); --text:#1B1A21; --muted:#75717F; /* TWO-LAYER (reference): εξωτερική κάρτα = frosted ημιδιάφανη · μέσα = ΑΣΠΡΑ κουτιά (--paper) */ /* (28/7) --card-bg = ΕΠΙΠΕΔΟ 2 της νέας κλίμακας (ήταν .5 σκληρογραμμένο — τώρα ακολουθεί τα --lvl) */ --card-bg:var(--lvl-2); --card-bd:1px solid rgba(255,255,255,.75); --card-sh:0 18px 44px -28px rgba(70,60,110,.38); --rail-ind-sh:0 3px 10px -3px rgba(40,30,70,.30); /* (22/7) σκιά ίδια με επιλεγμένα pills (.fr-bpill.on) — ουδέτερη, μικρό εύρος */ /* (15/8μβ, απόφαση Αντώνη μετά από mockup) ΜΕΓΕΘΥΝΣΗ DOCK ΣΤΗΝ ΚΕΝΤΡΙΚΗ ΡΑΓΑ — ΜΟΝΟ desktop. --rail-dock-max = πόσο ανοίγει ο ΧΩΡΟΣ του εικονιδίου κάτω από τον κέρσορα (βάση 44) --rail-dock-dist = σε πόση απόσταση σβήνει το κύμα Ρυθμίζονται ζωντανά από τον Επεξεργαστή Επιπέδων (ενότητα «Κεντρική ράγα»). */ --rail-dock-max:55px; --rail-dock-dist:111px; --paper:#FFFFFF; --paper-bd:1px solid #F1F0F4; --chip:#F0EFF4; --track:#E9E8EE; --accent:#D8EE6F; --accent-ink:#455214; --accent-soft:#EDF6C7; /* κιτρινο-lime #D8EE6F (αντικ. Wasabi 14/6, αίτημα Αντώνη) */ --lav:#8B7BE8; --lav-soft:#E0DAF7; /* μωβ reference */ /* (24/8) ΧΡΩΜΑΤΑ ΔΕΔΟΜΕΝΩΝ — δύο σειρές, για γραφήματα με ΔΥΟ πηγές μέτρησης. ΓΙΑΤΙ ΝΕΑ TOKENS ΚΑΙ ΟΧΙ ΥΠΑΡΧΟΝΤΑ: η «Κίνηση ιστότοπου» ζωγράφιζε μπάρες με το `--the` (#66eeff, ανοιχτό κυανό) — αυτό είναι χρώμα ΠΡΟΣΩΠΟΥ (εκπαιδευτικού), όχι δεδομένων, και πάνω σε κάρτα ήταν σχεδόν αόρατο. Δεδομένα και πρόσωπα ΔΕΝ μοιράζονται παλέτα: αν αύριο αλλάξει το χρώμα μιας εκπαιδευτικού, δεν πρέπει να αλλάξει το γράφημα. ΔΥΟ ΚΑΙ ΟΧΙ ΠΕΡΙΣΣΟΤΕΡΑ: οι σειρές είναι ακριβώς δύο (δικός μας μετρητής · GA4) και διαφέρουν ΚΑΙ σε απόχρωση ΚΑΙ σε φωτεινότητα, ώστε να ξεχωρίζουν και σε ασπρόμαυρη εκτύπωση ή σε αχρωματοψία — το χρώμα δεν είναι ποτέ η μόνη ένδειξη. */ --data-1:var(--lav); --data-2:var(--accent-ink); /* ΠΛΑΙΣΙΟ ΕΙΔΟΠΟΙΗΣΗΣ («δεν πήρα φρέσκα νούμερα»). Ηταν καρφωμένο #FFF6D8/#E0B400 και θα τύφλωνε στο σκούρο θέμα — εδώ ζει ως token και γυρίζει μαζί με το θέμα. */ --warn-bg:#FBF3D6; --warn-bd:#E3C766; --warn-ink:#5A4508; --glass-bg:var(--lvl-2); --glass-bd:rgba(255,255,255,.7); /* (28/7) glass ομάδες = κάρτες → επ.2 */ --ops-card:var(--lvl-1); /* (28/7) «κάδρα /ops» = το πίσω πλαίσιο → επ.1 */ /* glassmorphism ΔΙΑΒΑΘΜΙΣΗ νήματος (15/6): μπλοκ θέματος πιο διάφανο (+ σκιά για ανάδειξη) · απαντήσεις πιο λευκές → μεγάλη αντίθεση θέματος↔απάντησης (folder .55 · θέμα .50 + shadow · απάντηση .92) */ /* (28/7) Το νήμα κουμπώνει στη νέα κλίμακα: γεγονός = ΕΠΙΠΕΔΟ 2 · απάντηση = ΕΠΙΠΕΔΟ 3 */ /* (28/7 απόφαση Αντώνη) φόντο συζήτησης = επ.2 · ό,τι ΓΡΑΦΕΙ κάποιος = ΛΕΥΚΟ (επ.5) */ /* (2/8λ, ΤΕΛΙΚΗ επιλογή Αντώνη) Φόντο συζήτησης = ΕΠΙΠΕΔΟ 2 · γραμμές νήματος = ΛΕΥΚΕΣ. Οι λευκές γραμμές είναι η απάντηση στο αρχικό πρόβλημα: πάνω στο ημιδιάφανο επ.2 περνά το σκούρο φόντο της σελίδας, οπότε το ΛΕΥΚΟ ξεχωρίζει — ενώ το γκρι #E6E5EC χανόταν. (Διαδρομή του γύρου: επ.2 → 95% λευκό → επ.2 με σκούρες γραμμές → λευκό → ΕΔΩ.) */ --ops-ev-bg:var(--lvl-2); --ops-reply-bg:var(--lvl-5); --ops-thread:#FFFFFF; --ops-ev-shadow:0 8px 20px -7px rgba(45,35,75,.26); --ops-reply-shadow:0 2px 9px -4px rgba(45,35,75,.15); /* ── (28/7 απόφαση Αντώνη — transparency-levels-tool.html) 5 ΕΠΙΠΕΔΑ ΔΙΑΦΑΝΕΙΑΣ, ΚΑΘΟΛΙΚΑ ── 1=πίσω πλαίσιο/φάκελος · 2=συζήτηση/γεγονός · 3=ενδιάμεσο/απάντηση · 4=ΣΕ ΑΝΑΜΟΝΗ (τοποθετείται ΜΟΝΟ όπου το ορίσει ρητά ο Αντώνης) · 5=συμπαγές, εκεί που ζει το κείμενο. Σκιά: ενιαία ένταση 35%, γεωμετρία που σφίγγει όσο βαθαίνει. Blur ΜΟΝΟ στο επίπεδο 1 (20px — προσοχή: κόστος σε αδύναμα tablet· ιστορικό banding στο .ops-folder, 14/6). Αλλαγές τιμών: ΜΟΝΟ μέσω του εργαλείου (ekmathisis/tech/transparency-levels-tool.html) → εδώ. */ /* (28/7 απόφαση Αντώνη — levels-tool.html) ΘΟΛΩΜΑ ΜΟΝΟ ΣΤΑ ΕΠΙΠΕΔΑ 1 ΚΑΙ 1.5, κλειδωμένο. Η διαφάνεια είναι πρακτικά δωρεάν (μία ανάμειξη/pixel)· το θόλωμα κοστίζει ~2×ακτίνα+1 δείγματα ανά pixel — γι' αυτό ζει σε ΔΥΟ επιφάνειες και πουθενά αλλού. ΤΙΜΕΣ 28/7 (από το εργαστήριο, card-lab): 1 = 40% + θόλωμα 4px · 2 = 15% · 3 = 80% 4 = ΣΥΜΠΑΓΕΣ #F2F2F2 («σε αναμονή» — ουδέτερο γκρι) · 5 = λευκό */ --lvl-1:rgba(255,255,255,.40); --lvl-2:rgba(255,255,255,.15); --lvl-3:rgba(255,255,255,.80); --lvl-4:#F2F2F2; --lvl-5:#FFFFFF; /* (28/7 απόφαση Αντώνη) ΕΠΙΠΕΔΟ 1.5 — ΜΟΝΟ για φόντο ΠΑΡΑΘΥΡΩΝ (pop-up). Ξεχωριστό από το 1, που μένει για ράγα/πλαίσια σελίδας. Έχει ΔΙΚΗ ΤΟΥ ακτίνα θολώματος: δύο διαφορετικές ακτίνες δεν κοστίζουν παραπάνω από δύο ίδιες — το κόστος μετριέται ανά επιφάνεια. */ --lvl-15:rgba(255,255,255,.30); /* (28/7γ) 25 → 30 από το εργαστήριο */ --lvl-15-blur:15px; --lvl-15-sh:0 12px 30px -12px rgba(45,35,75,.38); --lvl-1-blur:4px; --lvl-1-sh:0 10px 26px -10px rgba(45,35,75,.350); --lvl-2-sh:0 5px 14px -6px rgba(45,35,75,.22); /* (28/7) λίγο πιο έντονη από .15 */ --lvl-3-sh:0 6px 16px -6px rgba(45,35,75,.245); --lvl-4-sh:0 4px 12px -5px rgba(45,35,75,.203); --lvl-5-sh:0 2px 8px -4px rgba(45,35,75,.147); --g1a:#C9F2DB; --g2a:#54CE96; --g1b:#DDD6F6; --g2b:#A293EC; --hatch:#E0DAF7; --stripe:#DDD6F6; --toggle:#17161B; --toggle-ink:#FFFFFF; --dot:#17161B; } /* ---- DARK ---- */ [data-theme="dark"]{ --body:radial-gradient(1050px 780px at -6% 4%, rgba(139,120,232,.38) 0%, rgba(139,120,232,0) 60%), radial-gradient(1150px 900px at 64% 70%, rgba(195,241,246,.2) 0%, rgba(195,241,246,.1) 34%, rgba(195,241,246,0) 56%), linear-gradient(155deg,#17141F 0%,#1A1722 55%,#1C1925 100%); /* + υφή #c3f1f6 ↘ κέντρο→κάτω-δεξιά (14/6) */ --blur:blur(var(--lvl-1-blur)) saturate(140%); /* (28/7) ΕΝΟΠΟΙΗΣΗ */ --frame-bg:transparent; --frame-bd:0; --shell-sh:none; --rail-bg:var(--lvl-1); --rail-bd:1px solid rgba(255,255,255,.1); /* (28/7) ράγα = επ.1 και σε dark */ --folder-edge:rgba(255,255,255,.1); --lvl-edge:rgba(255,255,255,.16); /* (28/7ε) περίγραμμα επιπέδου 1 σε dark — βλ. σχόλιο στο light */ --btn-sh:0 2px 8px -3px rgba(0,0,0,.5); --btn-sh-h:0 3px 11px -3px rgba(0,0,0,.62); /* σε σκούρο φόντο η ίδια σκιά χρειάζεται περισσότερη αδιαφάνεια για να φανεί */ --menu-bg:transparent; --content-bg:transparent; --right-bg:transparent; --line:rgba(255,255,255,.09); --text:#EDEBF2; --muted:#9B98A8; /* (28/7) card = ΕΠΙΠΕΔΟ 2 και σε dark */ --card-bg:var(--lvl-2); --card-bd:1px solid rgba(255,255,255,.08); --card-sh:0 14px 36px -22px rgba(0,0,0,.6); --rail-ind-sh:0 3px 10px -3px rgba(0,0,0,.5); --paper:#251F31; --paper-bd:1px solid rgba(255,255,255,.06); --chip:rgba(255,255,255,.07); --track:rgba(255,255,255,.09); --accent:#D8EE6F; --accent-ink:#E9F3A8; --accent-soft:rgba(216,238,111,.16); /* κιτρινο-lime #D8EE6F σε dark (14/6) */ --lav:#A493F0; --lav-soft:rgba(139,120,230,.22); --data-1:var(--lav); --data-2:var(--accent-ink); /* (24/8) σειρές δεδομένων — σε dark και τα δύο ανοιχτά πάνω στο σκούρο */ --warn-bg:rgba(227,199,102,.14); --warn-bd:rgba(227,199,102,.45); --warn-ink:#EBD79A; --glass-bg:var(--lvl-2); --glass-bd:rgba(255,255,255,.5); /* (28/7) glass ομάδες = επ.2 και σε dark */ --ops-card:var(--lvl-1); /* (28/7) «κάδρα /ops» = επ.1 και σε dark */ /* glassmorphism ΔΙΑΒΑΘΜΙΣΗ νήματος σε dark (15/6): λεπτό λευκό φιλμ → ξεχωρίζουν θέμα/απαντήσεις πάνω στο σκούρο κάδρο */ --ops-ev-bg:var(--lvl-2); --ops-reply-bg:var(--lvl-3); /* (28/7) γεγονός=επ.2 · απάντηση=επ.3 */ --ops-ev-shadow:0 6px 16px -6px rgba(0,0,0,.45); --ops-reply-shadow:0 2px 8px -4px rgba(0,0,0,.32); /* 5 επίπεδα σε DARK — κλιμάκωση πάνω στα προϋπάρχοντα dark (.05 κάρτες / .12 απαντήσεις)· ΔΕΝ βαθμονομήθηκε από τον Αντώνη με το εργαλείο (μόνο το light) — αν «λασπώνει», ρύθμιση εκεί → εδώ. */ --lvl-15:rgba(255,255,255,.10); --lvl-15-blur:4px; --lvl-15-sh:0 12px 30px -12px rgba(0,0,0,.6); --lvl-1:rgba(255,255,255,.04); --lvl-2:rgba(255,255,255,.04); --lvl-3:rgba(255,255,255,.14); --lvl-4:rgba(255,255,255,.17); --lvl-5:#251F31; --lvl-1-blur:20px; --lvl-1-sh:0 10px 26px -10px rgba(0,0,0,.55); --lvl-2-sh:0 8px 20px -7px rgba(0,0,0,.45); --lvl-3-sh:0 6px 16px -6px rgba(0,0,0,.38); --lvl-4-sh:0 4px 12px -5px rgba(0,0,0,.30); --lvl-5-sh:0 2px 8px -4px rgba(0,0,0,.22); --g1a:#C9F2DB; --g2a:#54CE96; --g1b:#DDD6F6; --g2b:#A493F0; --hatch:rgba(139,120,230,.2); --stripe:rgba(164,147,240,.35); --toggle:#EDEBF2; --toggle-ink:#17161B; --dot:#54CE96; } /* ═══ (27/7 απόφαση Αντώνη) ΔΙΑΚΟΠΤΗΣ ΓΥΑΛΙΟΥ ΓΙΑ ΑΔΥΝΑΜΑ TABLET ══════════════════════════════ ΓΙΑΤΙ ΕΤΣΙ: υπάρχουν 38 δηλώσεις backdrop-filter, μόνο 5 περνούν από token — ένας διακόπτης μέσω token θα έσβηνε το 1/7. Ο καθολικός κανόνας τα πιάνει όλα, και είναι ασφαλής επειδή το backdrop-filter είναι ΚΑΘΑΡΑ διακοσμητικό: τίποτα δεν σπάει, χάνεται μόνο το θόλωμα. ΤΟ ΚΟΣΤΟΣ ΕΙΝΑΙ ΜΙΚΡΟ: επίπεδα 2-5 είναι αδιαφανή (δεν τα αγγίζει), και το επίπεδο 1 κρατά το 40% λευκό του — απλώς παύει να είναι θολό. ΕΞ ΟΡΙΣΜΟΥ ΣΒΗΣΤΟΣ. Ενεργοποίηση ανά συσκευή: άνοιξε την πλατφόρμα μία φορά με ?glass=0 (θυμάται στο tablet)· επαναφορά με ?glass=1. Το bootstrap ζει στο κάθε layout. */ /* το [data-theme] στο είναι πιο ειδικό — γι' αυτό χρειάζεται ΚΑΙ αυτό, αλλιώς το token μένει 20px */ html.no-glass, html.no-glass [data-theme] { --lvl-1-blur: 0px; --lvl-15-blur: 0px; } html.no-glass *, html.no-glass *::before, html.no-glass *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Δίχτυ ασφαλείας: αν ο χρήστης έχει ζητήσει «λιγότερη διαφάνεια» από τις ρυθμίσεις της συσκευής, το σεβόμαστε χωρίς να χρειάζεται σημαία. */ @media (prefers-reduced-transparency: reduce) { :root, [data-theme] { --lvl-1-blur: 0px; --lvl-15-blur: 0px; } *, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* ═══════════════════════════════════════════════════════════════════════ (2/8κβ, απόφαση Αντώνη — ενεργοποίηση της εκκρεμότητας «ελάφρυνση εφέ») ΕΛΑΦΡΙΑ ΠΡΟΒΟΛΗ (html.lite) — για αδύναμα tablet. ΦΙΛΟΣΟΦΙΑ: η ιεραρχία των 5 επιπέδων ΔΙΑΤΗΡΕΙΤΑΙ, αλλά αποδίδεται με ΣΥΜΠΑΓΕΙΣ αποχρώσεις λευκού/γκρι αντί για διαφάνεια+θόλωμα: επ.1 (ήταν 40% λευκό+blur) → απαλό γκρι-λιλά #ECEBF2 επ.1.5 (παράθυρα, 30%+blur) → πιο ανοιχτό #F3F2F7 επ.2 (συζήτηση, 15%) → δύο τόνοι κάτω #E6E4EC επ.3 (απάντηση, 80%) → σχεδόν λευκό #F7F6FA επ.4/5 μένουν ως έχουν (ήδη συμπαγή). Επειδή (28/7) ΟΛΕΣ οι ακτίνες θολώματος περνούν από tokens, το σβήσιμο είναι καθολικό εδώ + ένα δίχτυ !important πιο κάτω για τα ελάχιστα σκληρογραμμένα. Ο διακόπτης: Ρυθμίσεις → Εμφάνιση → «Ελαφριά» (base.php, localStorage ekmLite — προτίμηση ΣΥΣΚΕΥΗΣ, όπως το θέμα). ΔΕΝ αγγίζει το dark theme (τα tablet τρέχουν light). */ /* ΠΡΟΣΟΧΗ ΣΤΟΝ ΣΤΟΧΟ (2/8κη — «το πατάω και δεν βλέπω διαφορά»): τα tokens ΔΕΝ ζουν στο :root — ζουν στο , που κουβαλά το data-theme (βλ. levels-editor.js: «τα tokens ζουν στο [data-theme] = »). Ο πρώτος κανόνας έγραφε στο · το body τα ΞΑΝΑΟΡΙΖΕ από κάτω, και επειδή τα custom properties κληρονομούνται από τον ΠΛΗΣΙΕΣΤΕΡΟ πρόγονο, όλα τα στοιχεία έπαιρναν τις αρχικές τιμές. Μετρήθηκε: στο html #ECEBF2, στο body rgba(255,255,255,.40). Γι' αυτό στοχεύουμε ΚΑΙ τα δύο, με !important ώστε να νικά και τα inline του επεξεργαστή επιπέδων (γράφει κι εκείνος στο body.style). */ html.lite:not([data-theme="dark"]), html.lite body:not([data-theme="dark"]) { --blur: none !important; --lvl-1-blur: 0px !important; --lvl-15-blur: 0px !important; --popup-frame-blur: 0px !important; --popup-overlay-blur: 0px !important; --lvl-1: #ECEBF2 !important; --lvl-15: #F3F2F7 !important; --lvl-2: #E6E4EC !important; --lvl-3: #F7F6FA !important; --rail-bg: #F1F0F6 !important; --card-bg: #F3F2F7 !important; --glass-bg: #EFEEF4 !important; /* τα λευκά περιγράμματα πάνω σε συμπαγές ανοιχτό φόντο εξαφανίζονται → παίρνουν αχνό μελάνι */ --glass-bd: rgba(70, 60, 110, .14) !important; --lvl-edge: rgba(70, 60, 110, .14) !important; --card-bd: 1px solid rgba(70, 60, 110, .10) !important; --rail-bd: 1px solid rgba(70, 60, 110, .10) !important; --folder-edge: rgba(70, 60, 110, .12) !important; --popup-overlay-tint: rgba(20, 24, 45, .30) !important; /* πιο σκούρο overlay — δεν υπάρχει πια blur να χωρίζει */ } /* Δίχτυ: ΚΑΘΕ backdrop-filter σβήνει — και τα σκληρογραμμένα σε views/JS (μετρημένα: ~52 δηλώσεις σε 17 css + ~26 inline). Το !important νικά και τα inline styles. */ html.lite *, html.lite *::before, html.lite *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ══════════════════════════════════════════════════════════════════════════════════════════ (9/8) ΕΠΙΦΑΝΕΙΕΣ ΠΟΥ ΖΩΓΡΑΦΙΖΟΥΝ ΦΟΝΤΟ ΠΙΣΩ ΑΠΟ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ — ΠΙΑΣΙΜΕΣ ΑΠΟ ΤΟΝ ΧΑΡΤΗ Μια τέτοια επιφάνεια πρέπει να έχει `pointer-events: none` στην κανονική χρήση, αλλιώς τρώει τα κλικ των κουμπιών που κάθονται πάνω της. Αυτό όμως την κάνει ΑΟΡΑΤΗ στον Επεξεργαστή Επιπέδων, που βρίσκει το στοιχείο από το σημείο του κλικ. ΕΔΩ ΕΙΝΑΙ Ο ΚΑΝΟΝΑΣ, ΣΕ ΕΝΑ ΣΗΜΕΙΟ: όποια επιφάνεια φέρει `.lvl-surface` ξαναπαίρνει pointer-events ΜΟΝΟ όσο ο χάρτης είναι ανοιχτός (`html.led-mapping`, το βάζει το levels-editor.js). Κάθε νέα τέτοια επιφάνεια χρειάζεται ΜΟΝΟ αυτή την κλάση — τίποτε άλλο. ══════════════════════════════════════════════════════════════════════════════════════════ */ html.led-mapping .lvl-surface { pointer-events: auto !important; }