/* ═══════════════════════════════════════════════════════════════════ ΤΑ ΧΡΩΜΑΤΑ — όλα εδώ, κανένα σκληρό hex πιο κάτω. Τρία σύνολα τιμών, τα ίδια ονόματα: :root η ανοιχτή παλέτα (και το χαρτί) @media (prefers-color-scheme: dark) η σκούρα, αν το ζητά το σύστημα html[data-theme="…"] η σκούρα/ανοιχτή, αν τη διάλεξε ο χρήστης ⚠ Η ΕΚΤΥΠΩΣΗ: στο τέλος του αρχείου το @media print ξαναδηλώνει ΟΛΟ αυτό το μπλοκ με τις ανοιχτές τιμές. Το χαρτί μένει ίδιο ό,τι κι αν δείχνει η οθόνη. Αν προσθέσεις token εδώ, πρόσθεσέ το ΚΑΙ εκεί. ═══════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* ---- επιφάνειες ---- */ --page: #fff; /* η σελίδα */ --surface: #fff; /* καρτέλα/κουμπί πάνω στη σελίδα */ --surface-2: #fcfdfe; /* απαλή καρτέλα σχημάτων */ --surface-3: #e4e8eb; /* δείκτης κόμβου */ --grey-soft: #f4f5f6; --code-bg: #fbfbfc; --overlay: rgba(20,28,36,.35); /* σκίαση πίσω από το μενού */ --scrim: rgba(0,0,0,.16); /* δισκάκι αρίθμησης σε πίνακα */ --hairline: rgba(0,0,0,.09); /* γραμμή κάτω από τίτλο πλαισίου */ --shadow: rgba(0,0,0,.1); --shadow-lg: rgba(0,0,0,.16); --bar-bg: rgba(255, 255, 255, .93); --bar-shadow: rgba(20, 30, 40, .1); --chip-shadow: rgba(20, 30, 40, .12); /* ---- μελάνι ---- */ --ink: #1a1a1a; --ink-2: #3d464d; /* δευτερεύον κείμενο σε σχήματα */ --ink-3: #33404b; /* σύνδεσμοι του μενού */ --ink-4: #24303a; --muted: #5b6670; --faint: #8a949c; --faint-2: #6b7680; --on-accent: #fff; /* γράμματα πάνω σε γεμάτο χρώμα */ --stamp-ink: #97a1a9; /* το προσωπικό αντίτυπο */ --stamp-b: #7d878f; /* ---- γραμμές ---- */ --rule: #e3e7ea; --rule-2: #ccd4db; --rule-3: #b8c0c7; --rule-4: #c9d3db; --rule-mid: #7d8b96; --rule-strong: #4a5560; /* ---- μπλε: η ταυτότητα του βιβλίου ---- */ --blue: #1f6fb2; --blue-soft: #eef5fb; --blue-tint: #f6fafd; --blue-fill: #dbe9f6; --blue-line: #cfe0ee; --blue-line-2: #b9d5ea; --blue-ink: #14456b; /* γράμματα πάνω σε ανοιχτό μπλε */ --blue-ink-2: #17547f; /* ---- θερμά ---- */ --orange: #e07b27; --orange-soft: #fdf4e9; --amber-soft: #fff8e6; --amber-line: #e9c46a; --gold: #8a6508; --gold-2: #a9781a; --rose: #f7dbd6; --rose-line: #c98c82; /* ---- σημασία ---- */ --green: #2e7d32; --red: #c62828; /* ---- χρωματισμός ΓΛΩΣΣΑΣ ---- */ --c-kw: #0033cc; --c-str: #067d17; --c-num: #7a6a00; /* ---- επισημάνσεις πινάκων ---- */ --mark-1: #dbe9f6; --mark-2: #dcecd3; --mark-3: #fdf0cd; --mark-4: #f7dbd6; /* ---- σχήματα και εξώφυλλα ---- */ --svg-ink: #1f262e; /* δέντρα και γράφοι (.tsvg) */ --cover-ink: #1f262e; --cover-accent: #e8b21f; --font: "Source Sans 3", "Segoe UI", system-ui, sans-serif; --mono: "JetBrains Mono", Consolas, monospace; --measure: 38rem; } /* ─────────────────────────────────────────────────────────────────── ΣΚΟΤΕΙΝΟ ΘΕΜΑ Το `data-theme` το βάζει το JavaScript στο , πριν ζωγραφιστεί η σελίδα (βλ. THEME_JS στο build.py). Γιατί έτσι κι όχι με σκέτο @media (prefers-color-scheme: dark); · οι τιμές γράφονται ΜΙΑ φορά, όχι δύο (μία για το σύστημα και μία για τη ρητή επιλογή του χρήστη) — αλλιώς οι δύο λίστες ξεσυγχρονίζονται · χωρίς JavaScript μένει το ανοιχτό, δηλαδή ό,τι ίσχυε πάντα: η σελίδα δεν χαλάει, απλώς δεν αλλάζει θέμα · δεν χρειάζεται light-dark(), που σε κινητό με παλιό browser θα ακύρωνε τις μεταβλητές και θα άφηνε τη σελίδα άχρωμη Οι τιμές δεν είναι η ανοιχτή παλέτα ανάποδα. Τα μπλε ανοίγουν (σκούρο μπλε πάνω σε σκούρο φόντο δεν διαβάζεται), τα απαλά φόντα γίνονται σκούρες αποχρώσεις του ίδιου τόνου, και το μελάνι δεν είναι καθαρό λευκό — κουράζει στο σκοτάδι. ─────────────────────────────────────────────────────────────────── */ html[data-theme="dark"] { color-scheme: dark; /* ---- επιφάνειες ---- */ --page: #14181c; --surface: #1b2027; --surface-2: #191e25; --surface-3: #2a313a; --grey-soft: #1e242b; --code-bg: #171c22; --overlay: rgba(0,0,0,.6); --scrim: rgba(255,255,255,.14); --hairline: rgba(255,255,255,.1); --shadow: rgba(0,0,0,.5); --shadow-lg: rgba(0,0,0,.6); --bar-bg: rgba(27, 32, 39, .93); --bar-shadow: rgba(0,0,0,.5); --chip-shadow: rgba(0,0,0,.45); /* ---- μελάνι ---- */ --ink: #dfe3e7; --ink-2: #b3bcc4; --ink-3: #c3ccd4; --ink-4: #dfe3e7; --muted: #939ea8; --faint: #7d8892; --faint-2: #8a949c; --on-accent: #10141a; /* τώρα τα γεμάτα χρώματα είναι ανοιχτά */ --stamp-ink: #6d767e; --stamp-b: #858e96; /* ---- γραμμές ---- */ --rule: #2c333b; --rule-2: #3a434d; --rule-3: #454f59; --rule-4: #3a434d; --rule-mid: #55606b; --rule-strong: #6b7681; /* ---- μπλε ---- */ --blue: #6ab0e8; --blue-soft: #172836; --blue-tint: #151e27; --blue-fill: #22374a; --blue-line: #33506b; --blue-line-2: #3a5c7a; --blue-ink: #a9d3f5; --blue-ink-2: #9fcdf2; /* ---- θερμά ---- */ --orange: #e8944a; --orange-soft: #2c2018; --amber-soft: #2b2415; --amber-line: #b08a3a; --gold: #d9b05a; --gold-2: #d0a154; --rose: #3d2724; --rose-line: #7d4d45; /* ---- σημασία ---- */ --green: #6cc070; --red: #ef6b6b; /* ---- χρωματισμός ΓΛΩΣΣΑΣ ---- */ --c-kw: #7aa2f7; --c-str: #7fc98a; --c-num: #d3c07a; /* ---- επισημάνσεις πινάκων ---- */ --mark-1: #1e2f3f; --mark-2: #223322; --mark-3: #33301c; --mark-4: #3a2622; /* ---- σχήματα και εξώφυλλα ---- */ --svg-ink: #cfd6dd; --cover-ink: #dfe3e7; --cover-accent: #e8b21f; } * { box-sizing: border-box; } /* οι εικόνες φέρουν width/height για σταθερή διάταξη — το ύψος μένει αναλογικό */ img { max-width: 100%; height: auto; } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.62; color: var(--ink); background: var(--page); } main { max-width: var(--measure); margin: 0 auto; padding: 3rem 1.25rem 6rem; } h1 { font-size: 1.95rem; line-height: 1.2; margin: 3.5rem 0 1.5rem; color: var(--blue); letter-spacing: -0.01em; } h1:first-child { margin-top: 0; } h2 { font-size: 1.2rem; margin: 2.5rem 0 .7rem; color: var(--ink); padding-bottom: .35rem; border-bottom: 2px solid var(--rule); } p { margin: 0 0 .9rem; } ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; } li { margin-bottom: .3rem; } li > ul, li > ol { margin-top: .3rem; } /* απλό κείμενο (εκτός πλαισίων): πλήρης στοίχιση */ main > p, main > ul, main > ol { text-align: justify; } strong { font-weight: 650; } /* ---------- blocks ---------- */ .block { margin: 1.5rem 0; padding: .9rem 1.1rem; border-radius: 6px; font-size: .96em; } .block :last-child { margin-bottom: 0; } .definition { background: var(--blue-soft); border-left: 4px solid var(--blue); font-style: italic; color: var(--blue-ink-2); } /* παραπομπές: μικρότερα και πιο σφιχτά — είναι βοηθητικά, όχι κυρίως ύλη */ .xref { background: var(--amber-soft); border: 1px solid var(--amber-line); font-style: italic; font-size: .84em; padding: .55rem .75rem .6rem; margin: 1.1rem 0; } /* η επικεφαλίδα λέει απευθείας «Πήγαινε στο κεφάλαιο 9» — δεν υπάρχει πια ξεχωριστή ετικέτα από πάνω (έβγαζε διπλό «στο») */ .xref .xref-lead { margin: 0 0 .25rem; font-style: normal; font-weight: 700; line-height: 1.3; color: var(--gold); } .xref ul { margin: 0; padding-left: 1.05rem; } .xref li { margin: 0 0 .05rem; line-height: 1.32; } .note { background: var(--grey-soft); border-left: 4px solid var(--rule-3); color: var(--ink-2); } .code { background: var(--code-bg); border: 1px solid var(--rule); font-family: var(--mono); font-size: .87rem; line-height: 1.5; white-space: pre-wrap; overflow-x: auto; border-left: 4px solid var(--rule-4); tab-size: 2; } .game { background: var(--orange-soft); border-top: 2px solid var(--orange); border-bottom: 2px solid var(--orange); border-radius: 0; text-align: center; font-size: .92rem; padding: .6rem 1rem; } .figure { text-align: center; background: none; padding: 0; } .figure img { max-width: 100%; height: auto; } /* ---------- tables ---------- */ table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .92rem; } th, td { line-height: 1.3; border: 1px solid var(--rule); padding: .28rem .5rem; text-align: left; vertical-align: top; } /* Το Word αφήνει

μέσα σε κάθε κελί· με το κανονικό περιθώριο παραγράφου οι πίνακες βγαίνουν αραιοί. Μέσα στα κελιά οι παράγραφοι είναι απλώς γραμμές. */ th > p, td > p { margin: 0; } th > p + p, td > p + p { margin-top: .15rem; } th { padding-top: .22rem; padding-bottom: .22rem; } th { background: var(--grey-soft); font-weight: 650; } table th[colspan] { text-align: center; } td:first-child { font-weight: 500; } /* ---------- εξώφυλλο ---------- σχεδιασμένο «ανοιχτόχρωμο»: οι περισσότεροι browsers δεν τυπώνουν φόντα, οπότε τίποτα κρίσιμο δεν στηρίζεται σε γέμισμα — μόνο τύπος, γραμμές και περιγράμματα, που τυπώνονται πάντα */ .cover { --cv-ink: var(--cover-ink); --cv-accent: var(--cover-accent); position: relative; display: flex; flex-direction: column; padding: 2.2rem 1.8rem 1.5rem; border: 2px solid var(--cv-ink); border-left: 14px solid var(--cv-accent); margin-bottom: 3rem; } /* διακοσμητικές γωνίες πάνω δεξιά */ .cover::before { content: ""; position: absolute; top: 1rem; right: 1rem; width: 2.2rem; height: 2.2rem; border-top: 3px solid var(--cv-accent); border-right: 3px solid var(--cv-accent); } .cv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding-bottom: .6rem; border-bottom: 1px solid var(--rule); font-size: .82rem; color: var(--muted); } .cv-author { font-weight: 700; color: var(--cv-ink); letter-spacing: .01em; } /* σήμα έκδοσης: το κείμενο και η σφραγίδα από κάτω — τα ορίζει το build.py (λεξικό BADGES), μία γραμμή ανά έκδοση. Γεμάτο πλαίσιο με ανοιχτά γράμματα· στην εκτύπωση γυρίζει σε περίγραμμα (βλ. @media print), γιατί τα φόντα δεν τυπώνονται πάντα. */ .cv-stamp { display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; } /* η σφραγίδα ξεχωρίζει την έκδοση με μια ματιά, χωρίς διάβασμα. Γραμμές και περίγραμμα, ώστε να τυπώνεται όπως φαίνεται. */ .cv-mark { --bd: var(--cv-ink); width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 2px solid var(--bd); border-radius: 50%; color: var(--bd); } .cv-mark svg { width: 1.35rem; height: 1.35rem; display: block; } .cv-mark.free { --bd: var(--green); } .cv-mark.full { --bd: var(--blue); } .cv-mark.sub { --bd: var(--gold); } .cv-mark.plain { --bd: var(--rule-strong); } .cv-badge { --bd: var(--cv-ink); padding: .3rem .8rem; background: var(--bd); border: 2px solid var(--bd); border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--on-accent); white-space: nowrap; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cv-badge.free { --bd: var(--green); } .cv-badge.full { --bd: var(--blue); } .cv-badge.sub { --bd: var(--gold); } .cv-badge.plain { --bd: var(--rule-strong); } /* επωνυμία φροντιστηρίου (build.py "Όνομα") */ .cv-brand { margin: .8rem 0 0; padding: .4rem .8rem; border-left: 5px solid var(--cv-ink); display: flex; flex-direction: column; gap: .05rem; } .cv-brand span { font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); font-weight: 700; } .cv-brand b { font-size: 1.15rem; font-weight: 700; color: var(--cv-ink); letter-spacing: -.01em; } .cv-hero { margin: 2.4rem 0 0; } .cv-eyebrow { margin: 0 0 .3rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; color: var(--muted); } .cv-title { margin: 0; padding: 0; border: 0; font-size: 3.2rem; line-height: .98; letter-spacing: -.03em; color: var(--cv-ink); font-weight: 700; } /* display:table -> δική του γραμμή, αλλά το πλάτος «μαζεύει» στο κείμενο, ώστε η κίτρινη υπογράμμιση να μην τρέχει σε όλη τη σελίδα */ .cv-title b { display: table; margin-top: .18rem; color: var(--blue); font-weight: 700; border-bottom: 8px solid var(--cv-accent); } .cv-sub { margin: 1rem 0 0; font-size: 1rem; color: var(--ink-2); } /* έτος + σήμανση ενημέρωσης, δίπλα δίπλα */ .cv-meta { display: flex; align-items: stretch; gap: 1rem; flex-wrap: wrap; margin: 1.6rem 0 0; } .cv-year { margin: 0; padding: .5rem .9rem; border: 2px solid var(--cv-ink); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); line-height: 1.3; } .cv-year b { display: block; font-size: 1.25rem; letter-spacing: -.01em; text-transform: none; color: var(--cv-ink); } .cv-flag { margin: 0; padding: .5rem 0 .5rem .9rem; border-left: 5px solid var(--cv-accent); font-weight: 650; font-size: .92rem; color: var(--cv-ink); line-height: 1.35; display: flex; align-items: center; } .cv-lead { margin: 1.5rem 0 0; max-width: 30rem; font-size: .98rem; line-height: 1.6; color: var(--ink-2); } /* ---- καρτέλα εφαρμογής ---- */ .cv-card { margin: 1.8rem 0 0; padding: 0; border: 2px solid var(--cv-ink); border-radius: 8px; overflow: hidden; } .cv-card-h { margin: 0; padding: .45rem .9rem; border-bottom: 2px solid var(--cv-ink); background: var(--grey-soft); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--cv-ink); } .cv-card-body { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; padding: .9rem; } .cv-qr { flex: 0 0 auto; text-decoration: none; text-align: center; } .cv-qr-tile { display: block; width: 6.4rem; line-height: 0; border: 2px solid var(--cv-ink); border-radius: 6px; padding: .35rem; } .cv-qr-tile svg { display: block; width: 100%; height: auto; } .cv-scan { display: block; margin-top: .35rem; font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--cv-ink); } .cv-app-txt { flex: 1 1 12rem; } .cv-app-t { margin: 0; font-family: var(--mono); font-size: .9rem; font-weight: 700; color: var(--cv-ink); letter-spacing: -.01em; } .cv-app-t span { font-family: var(--font); font-weight: 400; font-style: italic; color: var(--muted); } .cv-app-n { margin: .15rem 0 .35rem; font-size: 1.5rem; font-weight: 700; color: var(--blue); letter-spacing: -.02em; line-height: 1.1; } .cv-app-d { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.45; } .cv-foot { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: 1.3rem; padding-top: .7rem; border-top: 4px solid var(--cv-accent); font-size: .8rem; color: var(--muted); } .cv-foot span { white-space: nowrap; } .cv-site { font-weight: 700; color: var(--cv-ink); } @media (max-width: 32rem) { .cover { padding: 1.5rem 1.1rem 1.2rem; border-left-width: 10px; } .cover::before { display: none; } .cv-title { font-size: 2.35rem; } .cv-qr-tile { width: 5.4rem; } .cv-app-n { font-size: 1.25rem; } /* εδώ το σήμα πέφτει σε δική του γραμμή: η σφραγίδα ευθυγραμμίζεται με την αρχή του, όχι με το δεξί άκρο της στήλης */ .cv-stamp { align-items: flex-start; } } /* ---------- μενού πλοήγησης ---------- */ #navbtn { position: fixed; top: 1rem; left: 1rem; z-index: 40; width: 2.6rem; height: 2.6rem; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .28rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 1px 6px var(--shadow); cursor: pointer; } #navbtn span { display: block; width: 1.1rem; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .18s, opacity .18s; } .nav-open #navbtn span:nth-child(1) { transform: translateY(.28rem) rotate(45deg); } .nav-open #navbtn span:nth-child(2) { opacity: 0; } .nav-open #navbtn span:nth-child(3) { transform: translateY(-.28rem) rotate(-45deg); } #navback { position: fixed; inset: 0; z-index: 38; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity .2s; } .nav-open #navback { opacity: 1; pointer-events: auto; } .toc { position: fixed; top: 0; left: 0; z-index: 39; width: 19rem; max-width: 86vw; height: 100vh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-right: 1px solid var(--rule); padding: 4.2rem 1rem 2rem; transform: translateX(-102%); transition: transform .22s ease; } .nav-open .toc { transform: none; } .toc-head { margin: 0 0 .6rem; font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .toc ul { list-style: none; margin: 0; padding: 0; } .toc li { margin: 0; } .toc a { display: block; padding: .26rem .45rem; border-radius: 4px; color: var(--ink-3); text-decoration: none; font-size: .85rem; line-height: 1.3; } .toc a:hover { background: var(--grey-soft); } /* γραμμή κεφαλαίου: σύνδεσμος + κουμπί ανάπτυξης */ .toc .nav-row { display: flex; align-items: center; gap: .2rem; margin-top: .35rem; } .toc .nav-row > a { flex: 1 1 auto; font-weight: 650; color: var(--blue); } .nav-tog { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; padding: 0; background: none; border: 0; cursor: pointer; border-radius: 4px; position: relative; } .nav-tog:hover { background: var(--grey-soft); } /* βελάκι από περιγράμματα — δείχνει δεξιά, γυρίζει κάτω όταν ανοίγει */ .nav-tog::before { content: ""; position: absolute; top: 50%; left: 50%; width: .42rem; height: .42rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translate(-60%, -50%) rotate(-45deg); transition: transform .18s; } .nav-ch.open .nav-tog::before { transform: translate(-50%, -70%) rotate(45deg); } /* οι ενότητες είναι κρυφές μέχρι να ανοίξει το κεφάλαιο */ .toc .nav-ch > ul { display: none; margin: .1rem 0 .1rem .55rem; border-left: 1px solid var(--rule); } .toc .nav-ch.open > ul { display: block; } .toc .nav-ch > ul a { font-size: .8rem; color: var(--muted); padding-left: .6rem; } .toc a.here { background: var(--blue-soft); color: var(--blue-ink); font-weight: 650; box-shadow: inset 2px 0 0 var(--blue); } /* σε φαρδιά οθόνη το μενού μένει μόνιμα ανοιχτό */ @media (min-width: 1100px) { .toc { transform: none; box-shadow: none; } #navbtn, #navback { display: none; } main { margin-left: 19rem; } } /* ⚠ ΟΧΙ scroll-behavior: smooth στο html. Το βιβλίο είναι ~77.000px. Ένα κλικ στο μενού από το κεφ. 1 στο κεφ. 13 είναι άλμα 36.000px: με ομαλή κύλιση ο Chrome το κάνει σε ~2 δευτερόλεπτα, που μοιάζει με «δεν δουλεύει το μενού» — μετρημένο, ήταν ακριβώς αυτό. Η πλοήγηση θέλει να σε πάει ΤΩΡΑ. */ main h1, main h2 { scroll-margin-top: 1.2rem; } /* ---------- λειτουργία σήμανσης (./run.sh --mark) ---------- */ /* τα σημάδια των σχημάτων/πινάκων στη σήμανση δεν φαίνονται ποτέ */ .ut, .ut-end { display: none; } body.mark .markable { cursor: pointer; border-radius: 3px; } body.mark .markable:hover { box-shadow: 0 0 0 2px var(--amber-line); background: var(--amber-soft); } body.mark .cut { opacity: .45; text-decoration: line-through; text-decoration-color: #d64545; text-decoration-thickness: 2px; background: #fdecec; } body.mark .cut:hover { box-shadow: 0 0 0 2px #d64545; } /* συντόμευση: κόβεται μόνο η ουρά του στοιχείου */ body.mark .cut-part { background: #fff6e5; } body.mark .cut-tail { opacity: .45; text-decoration: line-through; text-decoration-color: #d64545; text-decoration-thickness: 2px; } #markbar { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; width: 22rem; max-width: calc(100vw - 2rem); background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 4px 18px var(--shadow-lg); padding: .6rem .7rem; font-size: .82rem; } #markbar .mb-top { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; } #markbar .mb-top b { font-size: 1.1rem; color: #d64545; } #markbar .mb-seed { margin: .3rem 0 0; padding: .3rem .5rem; background: #eef4ff; border-left: 3px solid #2f6fd0; border-radius: 2px; font-size: .74rem; color: #234; } #markbar button { margin-left: auto; padding: .25rem .6rem; cursor: pointer; border: 1px solid var(--rule); border-radius: 5px; background: var(--blue); color: var(--on-accent); font: 600 .78rem var(--font); } #markbar button.ghost { margin-left: .3rem; background: var(--surface); color: var(--muted); } #markbar .mb-hint { margin: 0 0 .4rem; font-size: .7rem; line-height: 1.35; color: var(--muted); } #markbar textarea { width: 100%; font: .74rem/1.4 var(--mono); border: 1px solid var(--rule); border-radius: 5px; padding: .35rem; resize: vertical; background: var(--code-bg); } @media print { #markbar { display: none !important; } } /* ---------- print ---------- */ @media print { @page { size: A4; margin: 12mm 12mm 14mm; } body { font-size: 10pt; line-height: 1.35; } main { max-width: none; padding: 0; margin: 0; } /* το μενού είναι εργαλείο οθόνης — δεν τυπώνεται */ #navbtn, #navback, .toc { display: none !important; } /* το εξώφυλλο γεμίζει τη σελίδα 1 και το κεφάλαιο 1 ξεκινά στη 2 */ .cover { min-height: 262mm; margin-bottom: 0; padding-top: 0; page-break-after: always; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cover + h1 { margin-top: 0; } .cv-title { font-size: 34pt; } /* το σήμα γίνεται περίγραμμα: αν ο εκτυπωτής δεν βάλει το φόντο, τα ανοιχτά γράμματα θα ήταν αόρατα στο λευκό χαρτί */ .cv-badge { background: none; color: var(--bd); } .cv-app-n { font-size: 16pt; } /* στο χαρτί η καρτέλα σπρώχνεται στο κάτω μέρος της σελίδας */ .cv-card { margin-top: auto; } /* τα κεφάλαια τρέχουν συνέχεια· η αλλαγή σελίδας ανά κεφάλαιο κόστιζε ~6 σελίδες */ h1 { page-break-before: auto; page-break-after: avoid; margin: 1.2rem 0 .8rem; font-size: 16pt; } h1:first-of-type { margin-top: 0; } h2 { font-size: 11.5pt; margin: 1.3rem 0 .5rem; page-break-after: avoid; } /* σφιχτότερος κάθετος ρυθμός: στην οθόνη τα κενά βοηθούν, στο χαρτί κοστίζουν */ p { margin: 0 0 .5rem; } ul, ol { margin: 0 0 .5rem; } li { margin-bottom: .15rem; } .block { margin: .8rem 0; padding: .6rem .8rem; } table, .figure { margin: .8rem 0; } /* Τα πλαίσια (ορισμοί, σημειώσεις, λωρίδα παιχνιδιού) είναι μπλοκ με φόντο και γραμμές: χωρίς αυτό απλώνονται κάτω από την εικόνα και οι γραμμές τους «κόβονται» από το σχήμα. Με flow-root σέβονται το πλαίσιο κειμένου και παίρνουν το ίδιο πλάτος με τις παραγράφους. */ .block:not(.side) { display: flow-root; } .block, .figure { page-break-inside: avoid; break-inside: avoid; } /* Οι ψηλοί πίνακες σπάνε ΑΝΑΜΕΣΑ σε γραμμές αντί να μετακομίζουν ολόκληροι στην επόμενη σελίδα αφήνοντας μισή σελίδα κενή. Κάθε γραμμή όμως μένει ακέραιη. */ table { page-break-inside: auto; break-inside: auto; } tr { page-break-inside: avoid; break-inside: avoid; } thead { display: table-header-group; } /* το ίδιο για τις διατάξεις με κάρτες: σπάνε ανάμεσα στις κάρτες */ .sub-compare, .if-forms, .stacks, .nodes, .shift, .queues { page-break-inside: auto; break-inside: auto; } .sub-card, .if-card, .stack-col, .node-card, .shift-col, .queue-row { page-break-inside: avoid; break-inside: avoid; } /* να μη μένει μονή γραμμή παραγράφου στο τέλος ή στην αρχή σελίδας */ p { orphans: 2; widows: 2; } a { color: inherit; text-decoration: none; } } /* ---------- πλαίσιο στο πλάι, όπως στο Word ---------- */ .block.side, .wrap.side { float: right; width: 40%; margin: .35rem 0 1rem 1.4rem; clear: right; font-size: .88em; } .wrap.side table { margin: 0; font-size: .85rem; } h1, h2 { clear: both; } .block.side p { margin-bottom: .5rem; } /* κινητό: τα πλαϊνά γίνονται κανονικά */ @media (max-width: 46rem) { .block.side, .wrap.side { float: none; width: auto; margin: 1.5rem 0; } } /* ---------- σήμανση ελέγχου θέσης ---------- */ body.review .check { outline: 2px dashed #d64545; outline-offset: 3px; position: relative; } body.review { counter-reset: chk; } body.review .check::after { counter-increment: chk; content: "έλεγξε θέση #" counter(chk); position: absolute; top: -.75rem; right: .4rem; background: #d64545; color: #fff; /* το κόκκινο του ελέγχου μένει σταθερό, άρα και τα γράμματα */ font: 600 .68rem/1.5 var(--font); padding: 0 .45rem; border-radius: 3px; letter-spacing: .02em; } @media print { body.review .check { outline: none; } body.review .check::after { display: none; } } /* ---------- ολίσθηση: δύο στήλες με δυαδικά ---------- */ .shift { display: flex; gap: 1.1rem; margin: 1.5rem 0; flex-wrap: wrap; } .shift-col { flex: 1 1 15rem; border: 1px solid var(--rule); border-radius: 6px; padding: .8rem .9rem 1rem; background: var(--surface-2); } .shift-col h4 { margin: 0 0 .6rem; font-size: .98rem; color: var(--blue); } table.bits { border-collapse: separate; border-spacing: 2px; margin: 0 0 .55rem; width: auto; } table.bits th.lbl { background: none; border: none; padding: .1rem .45rem .1rem 0; font: 600 .82rem/1 var(--mono); text-align: right; white-space: nowrap; } table.bits td.bit { border: 1px solid var(--rule); width: 1.55rem; padding: .16rem 0; text-align: center; font: .82rem/1.35 var(--mono); color: var(--faint); background: var(--surface); } table.bits td.bit.on { color: var(--blue-ink); font-weight: 700; background: var(--blue-soft); border-color: var(--blue-line-2); } .shift-col .cap { margin: 0 0 .3rem; font-size: .84rem; color: var(--muted); } .shift-col .res { margin: 0; font-size: .9rem; } /* ---------- χρωματισμός ΓΛΩΣΣΑΣ ---------- */ .code .kw { color: var(--c-kw); font-weight: 650; } .code .str { color: var(--c-str); } .code .num { color: var(--c-num); } .code .op { color: var(--red); font-weight: 600; } .code .cm { color: var(--faint); font-style: italic; } /* Αναφορά πηγής: μπαίνει ΜΕΣΑ στην τελευταία παράγραφο του πλαισίου (βλ. build.py), οπότε δεν τρώει δική της γραμμή. Σε 32 ορισμούς αυτό είναι ~1 σελίδα. */ .block .src { font-size: .7rem; font-style: normal; opacity: .6; letter-spacing: .01em; white-space: nowrap; } .block .src::before { content: " — "; } /* αν για κάποιον λόγο μείνει μόνη της, να μη χαλάει */ p.src { margin: .35rem 0 0; text-align: right; } /* «:::note plain» — γραμμές παράθεσης, χωρίς κουκκίδες και χωρίς τα περιθώρια της παραγράφου: διαβάζονται ως μπλοκ, όχι ως κείμενο */ .block.plain p { margin-bottom: .18rem; } .block.plain p.box-title { margin-bottom: .5rem; } /* τίτλος πλαισίου */ .block .box-title { font-weight: 650; font-size: .95em; margin: 0 0 .45rem; padding-bottom: .3rem; border-bottom: 1px solid var(--hairline); font-style: normal; } /* εισαγωγική πρόταση πλαισίου (τελειώνει σε «:») — όχι κουκκίδα */ .block .box-lead { margin: 0 0 .35rem; } .block ul { margin: 0; padding-left: 1.15rem; } .block li { margin: 0 0 .12rem; line-height: 1.45; } /* κώδικας μέσα σε κελί πίνακα */ pre.cell-code { margin: 0; font-family: var(--mono); font-size: .82rem; line-height: 1.45; white-space: pre-wrap; } pre.cell-code .kw { color: var(--c-kw); font-weight: 650; } pre.cell-code .op { color: var(--red); font-weight: 600; } pre.cell-code .num { color: var(--c-num); } /* ολίσθηση σε στενή οθόνη */ @media (max-width: 34rem) { .shift { gap: .8rem; } .shift-col { flex: 1 1 100%; padding: .7rem .6rem .8rem; } table.bits { border-spacing: 1px; width: 100%; } table.bits td.bit { width: auto; font-size: .74rem; padding: .12rem 0; } table.bits th.lbl { font-size: .74rem; padding-right: .3rem; } } /* ---------- επισημάνσεις πίνακα: το κελί δείχνει τη σημείωσή του ---------- */ td.mark1, th.mark1 { background: var(--mark-1); } td.mark2, th.mark2 { background: var(--mark-2); } td.mark3, th.mark3 { background: var(--mark-3); } td.mark4, th.mark4 { background: var(--mark-4); } /* οι σημειώσεις στο τέλος του πίνακα: κανονικό κείμενο, όχι κεφαλίδα */ th.mark1, th.mark2, th.mark3, th.mark4 { font-weight: 400; text-align: left; font-size: .86rem; line-height: 1.45; } /* κελί με σήμανση: μικρός δείκτης που παραπέμπει στη σημείωση */ td[class*="mark"] { position: relative; font-weight: 700; } td.mark1::after { content: "1"; } td.mark2::after { content: "2"; } td.mark3::after { content: "3"; } td.mark4::after { content: "4"; } td[class*="mark"]::after { position: absolute; top: 1px; right: 3px; font-size: .6rem; font-weight: 600; color: var(--faint-2); } /* σημείωση στο τέλος: αριθμημένη ώστε να ταιριάζει με τα κελιά */ th[class*="mark"] { position: relative; padding-left: 1.9rem; } th.mark1::before { content: "1"; } th.mark2::before { content: "2"; } th.mark3::before { content: "3"; } th.mark4::before { content: "4"; } th[class*="mark"]::before { position: absolute; left: .6rem; top: .5rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--scrim); color: var(--ink-4); font: 600 .68rem/1.05rem var(--font); text-align: center; } /* σύμβολα ✓ / ✗ */ td.sym { text-align: center; font-size: 1.05em; } td.sym.yes { color: var(--green); } td.sym.no { color: var(--red); } /* ---------- κόμβοι λίστας ---------- */ .nodes { display: flex; gap: 1.1rem; flex-wrap: wrap; margin: 1.5rem 0; } .node-card { flex: 1 1 17rem; border: 1px solid var(--rule); border-radius: 6px; padding: .85rem .95rem 1rem; background: var(--surface-2); } .node-card h4 { margin: 0 0 .7rem; font-size: .96rem; color: var(--blue); } .node { display: inline-flex; border: 1.5px solid var(--rule-strong); border-radius: 3px; overflow: hidden; font-size: .84rem; margin-bottom: .5rem; } .node span { padding: .3rem .7rem; text-align: center; } .node .data { background: var(--surface); border-right: 1.5px solid var(--rule-strong); } .node .ptr { background: var(--surface-3); color: var(--ink-2); } .node .ptr + .data { border-left: 0; } .node .data + .ptr { border-left: 0; } .node .ptr:first-child { border-right: 1.5px solid var(--rule-strong); } .node .ptr.null { color: var(--red); font-weight: 700; } .node-card .cap { margin: 0 0 .2rem; font-size: .83rem; color: var(--muted); } @media (max-width: 34rem) { .node-card { flex: 1 1 100%; } } /* ---------- πίνακας βημάτων (εισαγωγή/διαγραφή κόμβου) ---------- */ table.steps { border-collapse: collapse; width: 100%; margin: 1.4rem 0; } table.steps tr { border-bottom: 1px solid var(--rule); } table.steps tr:last-child { border-bottom: 0; } table.steps td { border: 0; padding: .7rem .5rem; vertical-align: middle; } table.steps .step-txt { width: 36%; } table.steps .step-t { margin: 0 0 .15rem; font-weight: 650; color: var(--blue); font-size: .95rem; } table.steps .step-txt p { margin: 0; font-size: .87rem; color: var(--ink-2); } table.steps .step-img { text-align: center; } table.steps .step-img img { max-width: 100%; height: auto; } @media (max-width: 34rem) { table.steps td { display: block; width: auto; padding: .35rem 0; } table.steps tr { display: block; padding: .5rem 0; } } /* μικρότερα παραδείγματα δέντρων */ .figure.small img { max-width: 48%; } @media (max-width: 34rem) { .figure.small img { max-width: 100%; } } /* ---------- ειδικοί χαρακτήρες ως πλακίδια ---------- */ .chips { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 1.2rem 0; padding: .7rem .8rem; background: var(--grey-soft); border-radius: 6px; } .chips-t { width: 100%; font-weight: 650; font-size: .88rem; margin-bottom: .15rem; } .chip { display: inline-block; min-width: 1.7rem; padding: .18rem .4rem; text-align: center; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; font-family: var(--mono); font-size: .88rem; } .chip.word { font-family: var(--font); font-size: .82rem; color: var(--muted); } /* ---------- μήτρα πράξεων × δομών: 7 στήλες σε στενή οθόνη ---------- */ @media (max-width: 34rem) { table.matrix { font-size: .72rem; } table.matrix th, table.matrix td { padding: .2rem .25rem; line-height: 1.2; } table.matrix th[class*="mark"] { padding-left: 1.55rem; font-size: .74rem; } table.matrix th[class*="mark"]::before { left: .35rem; } } /* πολύ στενές συσκευές (π.χ. iPhone SE) */ @media (max-width: 22rem) { table.matrix { font-size: .66rem; } table.matrix th, table.matrix td { padding: .1rem .12rem; line-height: 1.15; } /* τα ονόματα των πράξεων μένουν ακέραια — χωρίς σπάσιμο μέσα στη λέξη */ table.matrix td:first-child { white-space: nowrap; } } /* ---------- πυκνοί πίνακες τελεστών ---------- */ table.dense { width: auto; } table.dense th, table.dense td { padding: .18rem .55rem; line-height: 1.3; font-size: .88rem; } /* ---------- οι μορφές της εντολής ΑΝ ---------- */ .if-forms { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; } .if-card { flex: 1 1 15rem; border: 1px solid var(--rule); border-radius: 6px; padding: .75rem .9rem .85rem; background: var(--surface-2); } .if-card h4 { margin: 0 0 .5rem; font-size: .96rem; color: var(--blue); } .if-card pre.cell-code { margin: 0; } .if-card .cap { margin: .5rem 0 0; font-size: .82rem; color: var(--muted); } @media (max-width: 34rem) { .if-card { flex: 1 1 100%; } } /* ---------- οι 3 δομές επανάληψης ---------- */ table.loops { table-layout: fixed; } table.loops td { vertical-align: top; } table.loops .loop-form { width: 40%; font-weight: 400; } table.loops .loop-form pre.cell-code { margin: 0 0 .6rem; } table.loops .loop-form img { display: block; max-width: 100%; height: auto; margin: 0 auto; } table.loops .loop-notes ul { margin: 0; padding-left: 1.1rem; } table.loops .loop-notes li { margin-bottom: .25rem; } @media (max-width: 28rem) { table.loops, table.loops tbody, table.loops tr, table.loops td { display: block; } table.loops .loop-form { width: auto; border-bottom: 0; } table.loops .loop-notes { border-top: 0; } } /* ---------- πίνακας σεναρίων ελέγχου ---------- */ table.scenarios { table-layout: fixed; font-size: .74rem; } table.scenarios caption { caption-side: top; text-align: left; font-weight: 650; font-size: .95rem; padding-bottom: .35rem; } table.scenarios th, table.scenarios td { padding: .3rem .35rem; line-height: 1.25; overflow-wrap: break-word; } table.scenarios td { height: 1.6rem; } table.scenarios td:first-child { font-weight: 400; } table.scenarios th:nth-child(1) { width: 7%; } table.scenarios th:nth-child(2) { width: 15%; } table.scenarios th:nth-child(3) { width: 22%; } table.scenarios th:nth-child(4) { width: 18%; } table.scenarios th:nth-child(5) { width: 19%; } table.scenarios th:nth-child(6) { width: 19%; } /* ---------- διαδικασία vs συνάρτηση ---------- */ .sub-compare { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; } /* σε φαρδιά οθόνη βγαίνει έξω από τη στήλη του κειμένου, για να χωρέσουν οι δύο στήλες δίπλα δίπλα */ @media (min-width: 46rem) { .sub-compare { width: min(58rem, calc(100vw - 4rem)); margin-left: 50%; transform: translateX(-50%); } } .sub-card { flex: 1 1 15rem; border: 1px solid var(--rule); border-radius: 6px; padding: .8rem .9rem .9rem; background: var(--surface-2); } .sub-card h4 { margin: 0 0 .2rem; font-size: 1rem; color: var(--blue); } .sub-card .sub-lead { margin: 0 0 .6rem; font-size: .82rem; color: var(--muted); } .sub-card .sub-lead code { font-family: var(--mono); font-size: .9em; color: var(--ink); } .sub-card pre.cell-code { margin: 0; padding: .45rem .55rem; background: var(--code-bg); border: 1px solid var(--rule); border-radius: 4px; font-size: .76rem; } .sub-flow { margin: .55rem 0; } .sub-flow .lane { display: flex; align-items: flex-start; gap: .45rem; padding: .3rem .4rem; border-left: 3px solid var(--blue-line); margin-bottom: .3rem; background: var(--blue-tint); border-radius: 0 4px 4px 0; } .sub-flow .lane.back { border-left-color: var(--amber-line); background: var(--amber-soft); } .sub-flow .ar { font-size: 1.05rem; line-height: 1.1; color: var(--blue); flex: none; } .sub-flow .lane.back .ar { color: var(--gold-2); } .sub-flow .lane-t { font-size: .79rem; line-height: 1.35; color: var(--ink-2); } .sub-card .cap { margin: .5rem 0 0; font-size: .82rem; color: var(--muted); } @media (max-width: 34rem) { .sub-card { flex: 1 1 100%; } } @media print { .sub-compare { width: auto; margin-left: 0; transform: none; } .sub-card { flex: 1 1 40%; } } /* ---------- σύντομες λίστες σε σειρά ---------- Τέσσερις λέξεις σε τέσσερις γραμμές είναι σπατάλη· μπαίνουν δίπλα δίπλα και γίνονται στήλη μόνες τους αν δεν χωρούν. */ .quad { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; } .quad > span { flex: 1 1 7rem; padding: .3rem .6rem; border: 1px solid var(--rule); border-left: 3px solid var(--blue); background: var(--surface-2); font-weight: 600; font-size: .88rem; text-align: center; } .quad.tight { margin: .4rem 0 0; } .quad.tight > span { flex: 0 1 auto; padding: .2rem .8rem; } @media (max-width: 30rem) { .quad > span { flex: 1 1 100%; } } /* ---------- δέντρα σε SVG ---------- Αντικαθιστούν σαρώσεις: παίρνουν τίτλο, μπαίνουν δύο δίπλα δίπλα ώστε να γεμίζουν τη γραμμή, και τυπώνονται καθαρά (γραμμές, όχι φόντα). */ .tfig { margin: 1.1rem 0; } .tfig svg { display: block; width: 100%; height: auto; margin: 0 auto; } /* μόνο του, το σχήμα δεν πρέπει να φουσκώνει σε όλο το πλάτος της σελίδας */ .tfig > svg { max-width: 21rem; } .figpair .tfig > svg { max-width: none; } .fig-cap { margin: .3rem 0 0; text-align: center; font-size: .78rem; color: var(--muted); line-height: 1.3; } .tsvg { fill: none; stroke: var(--svg-ink); stroke-width: 1.3; font-size: 12px; } .tsvg text { fill: var(--svg-ink); stroke: none; font-family: var(--font); font-weight: 600; text-anchor: middle; dominant-baseline: middle; } /* το μέγεθος το ορίζει το κάθε σχήμα (inline στο ), τα υπόλοιπα ακολουθούν αναλογικά με em */ .tsvg text.el { font-weight: 400; font-size: .92em; fill: var(--muted); } .tsvg text.el.big { font-size: 1.2em; font-weight: 600; fill: var(--svg-ink); } .tsvg marker path { fill: var(--svg-ink); stroke: none; } /* δύο σχήματα στη σειρά· σε στενή οθόνη το ένα κάτω από το άλλο */ .figpair { display: flex; gap: 1.2rem; align-items: center; margin: 1.2rem 0; } .figpair .tfig { flex: 1 1 0; min-width: 0; margin: 0; } .figpair.trio { gap: .8rem; } /* πλαίσιο γύρω από υποδέντρο */ .tsvg .bx { stroke: var(--muted); stroke-width: 1; fill: none; } @media (max-width: 34rem) { .figpair { flex-direction: column; gap: .8rem; } } /* ---------- σύμβολα διαγράμματος ροής ---------- */ /* Στενότερα, ώστε να χωράνε και τα τέσσερα σε μία σειρά αντί για δύο. */ .fsym { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0; align-items: flex-start; } .fs-item { flex: 1 1 6.5rem; min-width: 6.5rem; text-align: center; } /* ο ρόμβος θέλει χώρο και για τα δύο βέλη εξόδου */ .fs-item.wide { flex: 1 1 10.5rem; min-width: 10.5rem; } .fs-shape { display: flex; align-items: center; justify-content: center; min-height: 2.4rem; padding: .35rem .4rem; background: var(--blue-soft); border: 1.5px solid var(--blue); color: var(--blue-ink); font-size: .75rem; font-weight: 600; line-height: 1.2; } .fs-shape.term { border-radius: 999px; } /* η κλίση «βγαίνει» έξω από το κουτί — αφήνουμε περιθώριο γι' αυτήν */ .fs-shape.io { transform: skewX(-18deg); margin: 0 .6rem; } .fs-shape.io > * { transform: skewX(18deg); } .fs-shape.proc { border-radius: 3px; } .fs-diamond { position: relative; width: 100%; height: 5rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .fs-diamond::before { content: ""; position: absolute; left: 50%; top: 50%; width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0 -1.7rem; background: var(--blue-soft); border: 1.5px solid var(--blue); transform: rotate(45deg); } /* Οι δύο έξοδοι: βέλος από κάθε πλάγια κορυφή, με την ετικέτα από πάνω. Η μισή διαγώνιος του ρόμβου είναι 3.4rem × √2 / 2 ≈ 2.4rem — από εκεί και έξω ξεκινούν τα βέλη. */ /* translateY(-100%): το κάτω άκρο του μπλοκ πέφτει ακριβώς στο ύψος του κέντρου, δηλαδή η γραμμή του βέλους βγαίνει από την κορυφή — αλλιώς κεντραριζόταν το ζευγάρι «ετικέτα+γραμμή» και το βέλος έπεφτε χαμηλά. */ .d-out { position: absolute; top: 50%; width: 2.6rem; transform: translateY(-100%); font-size: .62rem; color: var(--muted); text-align: center; } .d-out.left { left: 50%; margin-left: -5.1rem; } .d-out.right { left: 50%; margin-left: 2.5rem; } .d-out i { display: block; font-style: normal; line-height: 1; margin-bottom: .2rem; } .d-out .ln { display: block; position: relative; height: 0; border-top: 1.2px solid var(--blue); } .d-out .ln::after { content: ""; position: absolute; top: -3.4px; border: 3.5px solid transparent; } .d-out.left .ln::after { left: -1px; border-right-color: var(--blue); } .d-out.right .ln::after { right: -1px; border-left-color: var(--blue); } .fs-diamond > span:first-child { position: relative; font-size: .78rem; font-weight: 600; color: var(--blue-ink); } /* Οι ετικέτες αληθής/ψευδής έφευγαν πάνω στον ρόμβο όταν στένεψε το σύμβολο — πλέον λέγονται στη λεζάντα. */ .fs-diamond .lbl-f, .fs-diamond .lbl-t { display: none; } .fs-cap { margin: .35rem 0 0; font-size: .78rem; color: var(--muted); } /* ---------- στοίβα & ουρά ---------- */ .stacks { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; align-items: flex-start; margin: 1.4rem 0; } .queues { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin: 1.4rem 0; } .stack-col { flex: 0 0 auto; text-align: center; } /* γραμμή πράξης πάνω από κάθε στοίβα — σταθερό ύψος ώστε να ευθυγραμμίζονται */ .stack-op { height: 1.15rem; font-size: .74rem; line-height: 1.15rem; white-space: nowrap; } .op-in { color: var(--green); font-weight: 650; } .op-out { color: var(--red); font-weight: 650; } .stack { display: flex; flex-direction: column; justify-content: flex-end; width: 4.6rem; margin: 0 auto; border: 2px solid var(--rule-strong); border-top: 0; padding: .25rem; gap: .16rem; } .stack .cell, .queue .cell { position: relative; border: 1px solid var(--rule-mid); background: var(--blue-fill); padding: .2rem .35rem; font-size: .82rem; text-align: center; font-family: var(--mono); line-height: 1.3; } .stack .cell.hot, .queue .cell.hot { background: var(--rose); border-color: var(--rose-line); } /* κενές θέσεις: κρατούν το ύψος/πλάτος χωρίς να φαίνονται */ .stack .cell.ghost, .queue .cell.ghost { border-color: transparent; background: none; } .stack .cell.ghost::after, .queue .cell.ghost::after { content: "\00a0"; } /* ο δείκτης top δείχνει την κορυφή */ .stack .cell.top::before { content: "top →"; position: absolute; right: 100%; margin-right: .3rem; top: 50%; transform: translateY(-50%); font: 650 .62rem/1 var(--font); color: var(--blue); white-space: nowrap; } .queue-row { text-align: center; } .q-line { display: flex; align-items: center; justify-content: center; gap: .3rem; } .q-out, .q-in { flex: 0 0 6.2rem; font-size: .72rem; white-space: nowrap; } .q-out { text-align: right; } .q-in { text-align: left; } .queue { display: flex; align-items: center; gap: .16rem; border: 2px solid var(--rule-strong); border-left: 0; border-right: 0; padding: .26rem .3rem; } .queue .cell { width: 1.7rem; padding: .2rem 0; } .queue .end { font-size: .62rem; line-height: 1.1; color: var(--muted); padding: 0 .3rem; text-align: center; } .queue .end small { font-size: .92em; } .stack-col .cap, .queue-row .cap { margin: .3rem 0 0; font-size: .76rem; color: var(--muted); line-height: 1.3; } .stack-col .cap { max-width: 8.5rem; margin-left: auto; margin-right: auto; } .struct-note { margin: .2rem 0 1.4rem; font-size: .85rem; color: var(--ink-2); } /* στενή οθόνη: οι ετικέτες των πράξεων πάνε πάνω/κάτω από την ουρά */ @media (max-width: 30rem) { .q-line { flex-wrap: wrap; gap: .15rem; } .q-out, .q-in { flex: 1 1 100%; text-align: center; } .q-out:empty, .q-in:empty { display: none; } .queue .cell { width: 1.55rem; } .stacks { gap: 1.1rem; } } /* ---------- αλυσίδα μεταγλώττισης ---------- */ .pipe { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .25rem; margin: 1.5rem 0; } .pipe-node { flex: 0 1 auto; padding: .45rem .5rem; text-align: center; font-size: .73rem; line-height: 1.2; border: 1.5px solid var(--blue); } .pipe-node.data { background: var(--blue-soft); border-radius: 999px; color: var(--blue-ink); } .pipe-node.proc { background: var(--surface); border-radius: 4px; font-weight: 650; } .pipe-ar { color: var(--blue); font-size: .95rem; } /* ---------- διερμηνευτής vs μεταγλωττιστής ---------- */ .interp { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; } .ip-col { flex: 1 1 15rem; border: 1px solid var(--rule); border-radius: 6px; padding: .8rem .9rem; background: var(--surface-2); } .ip-col h4 { margin: 0 0 .15rem; font-size: .98rem; color: var(--blue); } .ip-note { margin: 0 0 .6rem; font-size: .8rem; color: var(--muted); } .ip-step { display: flex; flex-direction: column; gap: .1rem; border-left: 3px solid var(--blue-line); background: var(--blue-tint); padding: .3rem .5rem; margin-bottom: .3rem; border-radius: 0 4px 4px 0; } .ip-step.whole { border-left-color: var(--amber-line); background: var(--amber-soft); } .ip-n { font-size: .8rem; font-weight: 650; } .ip-do { font-size: .76rem; color: var(--ink-2); line-height: 1.3; } .ip-dots { text-align: center; color: var(--muted); line-height: 1; margin: .1rem 0; } .ip-ar { text-align: center; color: var(--gold-2); font-size: 1.05rem; } .ip-end { margin: .5rem 0 0; font-size: .78rem; color: var(--muted); line-height: 1.35; } /* ---------- στοίβα χρόνου εκτέλεσης ---------- */ .xstack { clear: right; margin: 1rem 0 .2rem; } /* τα τρία προγράμματα σε ΜΙΑ σειρά όσο χωράνε — αλλιώς σπάνε μόνα τους */ .xs-progs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; } .xs-prog { flex: 1 1 9rem; border: 1px solid var(--rule); border-radius: 5px; padding: .4rem .55rem; background: var(--surface-2); } .xs-prog h5 { margin: 0 0 .2rem; font-size: .8rem; color: var(--blue); } .xs-prog pre.cell-code { margin: 0; font-size: .7rem; } /* η στοίβα είναι μικρή: κάθεται στο πλάι του κειμένου */ .xs-side { float: right; width: 6.4rem; text-align: center; margin: .1rem 0 .5rem 1.1rem; } .xs-side .stack { min-height: 3.4rem; } .xs-side .cap { font-size: .68rem; line-height: 1.25; margin-top: .25rem; } @media (max-width: 34rem) { .xs-side { float: none; width: auto; margin: 1rem 0; } } @media (max-width: 34rem) { .ip-col, .xs-progs { flex: 1 1 100%; } } /* ---------- τελεστές ---------- */ .ops { margin: 1.5rem 0; } .op-group { border: 1px solid var(--rule); border-radius: 6px; padding: .75rem .9rem .85rem; margin-bottom: .75rem; background: var(--surface-2); } .op-group h4 { margin: 0 0 .5rem; font-size: .96rem; color: var(--blue); } .op-note { margin: 0 0 .45rem; font-size: .82rem; color: var(--muted); } .op-group .op-tier + .op-note { margin-top: .45rem; } .op-tier { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; padding: .28rem 0; border-top: 1px dashed var(--rule); } .op-tier:first-of-type { border-top: 0; } /* οι τρεις λογικοί τελεστές σε μία σειρά, όχι ο ένας κάτω από τον άλλο· σε στενή οθόνη ξαναγίνονται στήλη μόνοι τους */ .op-row { display: flex; flex-wrap: wrap; gap: .45rem; } /* Σε κουτί μπαίνει ΟΛΟΚΛΗΡΟ το bullet («1 όχι άρνηση»), όχι μόνο η λέξη: διαβάζεται ως μία μονάδα αντί για τρία σκόρπια κομμάτια. */ .op-row .op-tier { border: 1px solid var(--rule-2); border-radius: 5px; background: var(--surface); padding: .22rem .55rem; gap: .35rem; } .op-row .op-tier .op { border: 0; background: none; padding: 0; min-width: 0; } .op-tier.plain { border: 0; padding: .1rem 0 .35rem; } .tier-n { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font: 650 .7rem/1.15rem var(--font); text-align: center; margin-right: .2rem; flex: none; } /* ΠΡΟΣΟΧΗ: μόνο μέσα στο .ops — το σκέτο .op έπιανε και τα βελάκια εκχώρησης που παράγει ο χρωματιστής μέσα στα πλαίσια κώδικα */ .ops .op { display: inline-block; min-width: 1.8rem; padding: .12rem .45rem; background: var(--surface); border: 1px solid var(--rule-2); border-radius: 4px; font-family: var(--mono); font-size: .88rem; text-align: center; } .ops .op.word { font-family: var(--font); font-weight: 600; color: var(--blue); } .op-desc { font-size: .8rem; color: var(--muted); margin-left: .35rem; } .op-row .op-desc { margin-left: 0; } /* ═══════════════════════════════════════════════════════════════════ ΛΕΞΙΚΟ ΣΥΓΧΥΣΕΩΝ — :::lex στο extras/99-λεξικό.md Δύο χρήσεις: (α) ως κεφάλαιο μέσα στο βιβλίο, με την παλέτα του βιβλίου· (β) ως αυτοτελές dist/lexiko.html, όπου το .lex-page αλλάζει ΜΟΝΟ τις μεταβλητές της παλέτας — τίποτε άλλο δεν διπλώνει. ═══════════════════════════════════════════════════════════════════ */ /* (β) η δική του παλέτα: πράσινο του κισσού αντί για μπλε, ζεστό χαρτί */ body.lex-page { --blue: #2f6b4f; /* τίτλοι, λέξη-λήμμα */ --blue-soft: #eef4f0; /* φόντο σημασιών */ --orange: #b8562f; /* η παγίδα */ --orange-soft: #fdf1ec; --rule: #e2e7e3; --muted: #5d6b62; --page: #fcfcfa; background: var(--page); } /* το λεξικό στα σκούρα: κρατά την πράσινη ταυτότητά του. Πιο ειδικό από το html[data-theme="dark"], ώστε να το υπερισχύει. */ html[data-theme="dark"] body.lex-page { --blue: #6cbf95; --blue-soft: #16241d; --blue-ink: #a8dcc3; --orange: #e08b63; --orange-soft: #2b1d16; --rule: #2b332e; --muted: #93a399; --page: #131714; } .lex-head { margin-bottom: 2.5rem; } .lex-head h1 { margin: 0 0 .6rem; } .lex-head > p { color: var(--muted); font-size: .95rem; } .lex-brand { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .4rem; } .lex-search { position: relative; margin-top: 1.4rem; } .lex-search input { width: 100%; padding: .7rem 6.5rem .7rem .9rem; font: inherit; font-size: .95rem; color: var(--ink); background: var(--surface); border: 2px solid var(--rule); border-radius: 8px; -webkit-appearance: none; } .lex-search input:focus { outline: none; border-color: var(--blue); } .lex-count { position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); font-size: .78rem; color: var(--muted); pointer-events: none; } .lex-none { color: var(--muted); font-style: italic; } /* ---------- το λήμμα ---------- */ .lex-entry { margin: 0 0 1.6rem; padding: 0 0 1.4rem; border-bottom: 1px solid var(--rule); break-inside: avoid; } .lex-entry:last-child { border-bottom: none; } .lex-term { font-size: 1.08rem; font-weight: 700; color: var(--blue); margin: 0 0 .7rem; } .lex-senses { margin: 0; } /* κάθε σημασία: ετικέτα αριστερά, εξήγηση δεξιά· σε κινητό η μία κάτω από την άλλη (βλ. @media παρακάτω) */ .lex-sense { display: grid; grid-template-columns: 11.5rem 1fr; gap: .1rem .9rem; padding: .4rem 0; border-top: 1px solid var(--rule); } .lex-sense:first-child { border-top: none; padding-top: 0; } .lex-sense dt { font-weight: 650; font-size: .9rem; color: var(--ink); padding: .1rem .5rem; background: var(--blue-soft); border-radius: 4px; align-self: start; hyphens: none; } .lex-sense dd { margin: 0; font-size: .94rem; line-height: 1.5; } /* λέξεις της ΓΛΩΣΣΑΣ μέσα στο κείμενο: `ΛΟΓΙΚΕΣ:` */ .lex-entry code { font-family: var(--mono); font-size: .86em; padding: .05em .3em; background: var(--grey-soft); border-radius: 3px; } /* η παγίδα — αυτό που ξεχνιέται κάθε φορά */ .lex-tip { margin: .7rem 0 0; padding: .5rem .8rem; background: var(--orange-soft); border-left: 3px solid var(--orange); border-radius: 0 4px 4px 0; font-size: .9rem; } .lex-tip::before { content: "Πρόσεξε: "; font-weight: 700; color: var(--orange); } @media (max-width: 34rem) { .lex-sense { grid-template-columns: 1fr; gap: .25rem; } .lex-sense dt { justify-self: start; } } @media print { .lex-search, .lex-none { display: none; } .lex-entry { page-break-inside: avoid; } /* τα φόντα δεν τυπώνονται: κρατάμε γραμμές, όπως παντού στο βιβλίο */ .lex-sense dt { background: none; padding-left: 0; } .lex-tip { background: none; } } /* --------------------------------------------------------------- ΠΡΟΣΩΠΙΚΟ ΑΝΤΙΤΥΠΟ — build.py --για Είναι ΚΕΙΜΕΝΟ, όχι φόντο: οι browsers δεν τυπώνουν φόντα, γράμματα όμως τυπώνουν πάντα (ίδιος λόγος που το εξώφυλλο είναι ανοιχτόχρωμο). Το position:fixed κάνει τον Chrome να το επαναλάβει σε ΚΑΘΕ σελίδα. --------------------------------------------------------------- */ .stamp { position: fixed; right: .8rem; bottom: .5rem; z-index: 40; font-size: .62rem; letter-spacing: .04em; color: var(--stamp-ink); background: var(--surface); padding: .15rem .4rem; border-radius: 4px; pointer-events: none; user-select: none; } .stamp b { font-weight: 600; color: var(--stamp-b); } @media print { .stamp { right: 0; bottom: 0; background: none; padding: 0; font-size: .58rem; color: #8a9299; } } /* ═══════════════════════════════════════════════════════════════════ ΠΡΟΓΡΑΜΜΑΤΑ ΓΙΑ ΕΠΑΝΑΛΗΨΗ — :::prog στο extras/98-προγράμματα.md Ίδια λογική με το λεξικό: μέσα στο βιβλίο παίρνει την παλέτα του βιβλίου· ως αυτοτελές dist/programmata.html το .prog-page αλλάζει ΜΟΝΟ τις μεταβλητές. ═══════════════════════════════════════════════════════════════════ */ body.prog-page { --blue: #4a4a8f; /* τίτλοι, αρίθμηση */ --blue-soft: #eeeef7; --orange: #a25c3c; /* οι σημειώσεις */ --orange-soft: #fbf2ee; --rule: #e5e5ec; --muted: #63637a; --page: #fcfcfd; background: var(--page); } /* τα προγράμματα στα σκούρα: κρατούν τη μοβ ταυτότητά τους */ html[data-theme="dark"] body.prog-page { --blue: #9d9ddb; --blue-soft: #1e1e2c; --blue-ink: #c5c5ee; --orange: #d18f6d; --orange-soft: #2a1e18; --rule: #302f3a; --muted: #9a9ab0; --page: #15151b; } /* η αρίθμηση ξαναρχίζει σε κάθε ενότητα — χωρίς καθόλου Python */ body.prog-page main, .prog-host { counter-reset: prog; } h2 { counter-reset: prog; } .prog { margin: 0 0 1.8rem; padding: 0 0 1.5rem; border-bottom: 1px solid var(--rule); break-inside: avoid; } .prog:last-child { border-bottom: none; } .prog-title { font-size: .99rem; font-weight: 650; line-height: 1.45; color: var(--ink); margin: 0 0 .6rem; padding-left: 2.1rem; text-indent: -2.1rem; } .prog-title::before { counter-increment: prog; content: counter(prog); display: inline-block; width: 1.5rem; margin-right: .6rem; padding: .05rem 0; text-indent: 0; background: var(--blue-soft); color: var(--blue); border-radius: 4px; font-size: .78rem; font-weight: 700; text-align: center; vertical-align: 2px; } .prog-var + .prog-var { margin-top: .9rem; } .prog-label { margin: 0 0 .3rem; font-size: .78rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } /* ο κώδικας μέσα στο παράδειγμα κάθεται πιο σφιχτά από τα :::code */ .prog .block.code { margin: 0; } .prog-note { margin: .6rem 0 0; padding-left: .8rem; border-left: 3px solid var(--orange); font-size: .88rem; line-height: 1.5; color: var(--muted); } .prog-note code { font-family: var(--mono); font-size: .88em; color: var(--ink); } /* φίλτρα ενοτήτων (μόνο στην αυτοτελή σελίδα) */ .lex-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; } .chipf { padding: .3rem .7rem; font: inherit; font-size: .82rem; color: var(--muted); background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; } .chipf:hover { border-color: var(--blue); color: var(--blue); } .chipf.on { background: var(--blue); border-color: var(--blue); color: var(--on-accent); } @media print { .lex-chips { display: none; } .prog { page-break-inside: avoid; } .prog-title::before { background: none; } } /* Τα παραδείγματα δεν σπάνε στα δύο, οπότε κάθε ένα που δεν χωράει αφήνει κενό. Πιο σφιχτός κώδικας στην εκτύπωση = περισσότερα ανά σελίδα = λιγότερα κενά. Στην οθόνη μένει ακριβώς όπως ήταν. */ @media print { .prog .block.code { font-size: .68rem; line-height: 1.35; padding: .5rem .7rem; } .prog { margin-bottom: 1rem; padding-bottom: .8rem; } .prog-title { font-size: .9rem; margin-bottom: .4rem; } .prog-note { font-size: .78rem; } } /* ═══════════════════════════════════════════════════════════════════ ΜΠΑΡΑ ΕΝΑΛΛΑΓΗΣ ΕΝΤΥΠΟΥ — build.py --πακέτο Τρία έντυπα (θεωρία, λεξικό, προγράμματα) με ΕΝΑ κλικ μεταξύ τους. Κάτω, γιατί εκεί φτάνει ο αντίχειρας στο κινητό — και γιατί πάνω κάθεται ήδη το κουμπί των περιεχομένων. ═══════════════════════════════════════════════════════════════════ */ .docbar { position: fixed; left: 50%; bottom: .9rem; transform: translateX(-50%); z-index: 60; display: flex; gap: .15rem; padding: .25rem; background: var(--bar-bg); border: 1px solid var(--rule); border-radius: 999px; box-shadow: 0 3px 14px var(--bar-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .doctab { display: flex; align-items: center; gap: .35rem; padding: .42rem .85rem; border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; } .doctab svg { width: 1.05rem; height: 1.05rem; flex: none; } .doctab:hover { color: var(--blue); background: var(--blue-soft); } /* το τρέχον έντυπο: γεμάτο, ώστε να φαίνεται με μια ματιά πού είσαι */ .doctab.on { background: var(--blue); color: var(--on-accent); cursor: default; } .doctab.on:hover { background: var(--blue); color: var(--on-accent); } /* να μην κρύβει τις τελευταίες γραμμές */ main { padding-bottom: 6rem; } /* σε στενή οθόνη πιάνει όλο το πλάτος και χάνει τις λέξεις: τα τρία εικονίδια αρκούν, και ο αντίχειρας έχει μεγάλο στόχο */ @media (max-width: 30rem) { .docbar { left: 0; right: 0; bottom: 0; transform: none; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; padding: .2rem .3rem calc(.2rem + env(safe-area-inset-bottom)); } .doctab { flex: 1; justify-content: center; padding: .55rem .3rem; } /* μόνο το τρέχον κρατά τη λέξη του: γεμίζει το πλακίδιο και λέει πού βρίσκεσαι· τα άλλα δύο μένουν εικονίδια, με μεγάλο στόχο */ .doctab span { display: none; } .doctab.on span { display: inline; } .doctab svg { width: 1.25rem; height: 1.25rem; } } @media print { .docbar { display: none; } main { padding-bottom: 0; } } /* κρύβεται όσο κατεβαίνεις, γυρίζει με την πρώτη κίνηση προς τα πάνω */ .docbar { transition: transform .22s ease, opacity .22s ease; } .docbar.away { transform: translateX(-50%) translateY(150%); opacity: 0; pointer-events: none; } @media (max-width: 30rem) { .docbar.away { transform: translateY(150%); } } @media (prefers-reduced-motion: reduce) { .docbar { transition: none; } } /* ═══════════════════════════════════════════════════════════════════ Η ΑΝΑΖΗΤΗΣΗ ΠΟΥ ΔΕΝ ΦΕΥΓΕΙ Ήταν στην κεφαλίδα: για να ψάξεις έπρεπε να γυρίσεις στην κορυφή. Τώρα κολλάει επάνω μόλις την προσπεράσεις — μηδέν κύλιση, ένα πάτημα. Καθαρό CSS, χωρίς JavaScript. ═══════════════════════════════════════════════════════════════════ */ .stickybar { position: sticky; top: 0; z-index: 50; /* καλύπτει και τα περιθώρια του main, αλλιώς περνά κείμενο από πλάι */ margin: 0 -1.25rem 2.2rem; padding: .7rem 1.25rem; background: var(--page); } /* γραμμή και σκιά ΜΟΝΟ όταν είναι κολλημένη — όχι όσο κάθεται στη θέση της */ .stickybar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); opacity: 0; transition: opacity .2s ease; } .stickybar.stuck::after { opacity: 1; } .stickybar .lex-search { margin-top: 0; } /* κολλημένη = πιο χαμηλή, για να μην τρώει οθόνη στο κινητό */ .stickybar.stuck .lex-search input { padding-top: .5rem; padding-bottom: .5rem; } .stickybar.stuck .lex-chips { margin-top: .5rem; } /* τα φίλτρα δεν τυλίγονται πια σε τρεις σειρές: μία σειρά που σέρνεται */ .lex-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: .15rem; } .lex-chips::-webkit-scrollbar { display: none; } .chipf { flex: none; } @media print { .stickybar { display: none; } } /* σβήσιμο στην άκρη: «συνεχίζει και δεξιά» */ .chipwrap.more .lex-chips { -webkit-mask-image: linear-gradient(to right, #000 86%, transparent); mask-image: linear-gradient(to right, #000 86%, transparent); } .chipwrap.less.more .lex-chips { -webkit-mask-image: linear-gradient(to right, transparent, #000 8% 86%, transparent); mask-image: linear-gradient(to right, transparent, #000 8% 86%, transparent); } .chipwrap.less:not(.more) .lex-chips { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%); mask-image: linear-gradient(to right, transparent, #000 8%); } /* --------------------------------------------------------------- ΒΕΛΗ ΣΤΑ ΦΙΛΤΡΑ Το σβήσιμο στην άκρη είναι υπαινιγμός· το βέλος είναι οδηγία. Εμφανίζεται ΜΟΝΟ όταν υπάρχει πράγματι κάτι προς τα εκεί, και κάνει και τη δουλειά — κλικ και μετακινείται. --------------------------------------------------------------- */ .chipwrap { position: relative; margin-top: .8rem; } .chipwrap .lex-chips { margin-top: 0; } .chipnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: none; /* το JS το ανοίγει όταν χρειάζεται */ place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; color: var(--blue); background: var(--page); border: 1px solid var(--rule); border-radius: 50%; box-shadow: 0 1px 5px var(--chip-shadow); cursor: pointer; } .chipnav svg { width: .85rem; height: .85rem; } .chipnav:hover { border-color: var(--blue); } .cn-left { left: -.35rem; } .cn-right { right: -.35rem; } .chipwrap.less .cn-left, .chipwrap.more .cn-right { display: grid; } /* σε οθόνη αφής το σύρσιμο είναι ο φυσικός τρόπος — τα βέλη μένουν ως ένδειξη, γι' αυτό μικραίνουν αντί να εξαφανίζονται */ @media (hover: none) { .chipnav { width: 1.4rem; height: 1.4rem; box-shadow: none; } .chipnav svg { width: .72rem; height: .72rem; } } @media (prefers-reduced-motion: reduce) { .lex-chips { scroll-behavior: auto; } } /* ═══════════════════════════════════════════════════════════════════ ΕΞΩΦΥΛΛΟ ΕΝΘΕΤΟΥ — ένα μπλοκ, δύο συμπεριφορές Οθόνη : λεπτή ταινία ταυτότητας, να μη φάει τη μισή πρώτη οθόνη. Χαρτί : ολοσέλιδο εξώφυλλο, όπως το βιβλίο — ίδια γλώσσα (γραμμές και περιγράμματα, όχι φόντα, γιατί τα φόντα δεν τυπώνονται). ═══════════════════════════════════════════════════════════════════ */ .icover { --ic-ink: var(--cover-ink); position: relative; padding: .9rem 1.1rem; border: 1px solid var(--rule); border-left: 8px solid var(--blue); border-radius: 3px; margin-bottom: 1.6rem; } .ic-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .72rem; color: var(--muted); } .ic-author { font-weight: 700; color: var(--ic-ink); } .ic-kind { letter-spacing: .14em; text-transform: uppercase; font-weight: 600; } .ic-hero { display: flex; align-items: center; gap: .8rem; margin-top: .5rem; } .ic-hero h1 { margin: 0; font-size: 1.5rem; line-height: 1.15; } .ic-count { /* στην οθόνη το πλήθος το λέει ήδη —και ζωντανά— το πεδίο αναζήτησης· εδώ θα ήταν σκέτη επανάληψη. Στο τυπωμένο εξώφυλλο όμως μετράει. */ display: none; margin: .15rem 0 0; font-size: .8rem; color: var(--muted); } .ic-mark { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: var(--blue); border: 1.5px solid currentColor; border-radius: 50%; } .ic-mark svg { width: 1.25rem; height: 1.25rem; } .ic-brand { margin: .6rem 0 0; font-size: .72rem; color: var(--muted); } .ic-brand span { letter-spacing: .1em; text-transform: uppercase; } .ic-brand b { color: var(--ic-ink); margin-left: .4rem; } /* ό,τι έχει νόημα μόνο σε τυπωμένο εξώφυλλο */ .ic-print { display: none; } @media print { .icover { /* ολόκληρη η πρώτη σελίδα, με το κείμενο να ξεκινά στη δεύτερη */ display: flex; flex-direction: column; min-height: 245mm; padding: 2.2rem 1.8rem 1.5rem; border: 2px solid var(--ic-ink); border-left: 14px solid var(--blue); border-radius: 0; margin-bottom: 0; break-after: page; page-break-after: always; } /* οι ίδιες διακοσμητικές γωνίες με το εξώφυλλο του βιβλίου */ .icover::before { content: ""; position: absolute; top: 1rem; right: 1rem; width: 2.2rem; height: 2.2rem; border-top: 3px solid var(--blue); border-right: 3px solid var(--blue); } .ic-top { font-size: .82rem; /* δεξιά κάθεται η διακοσμητική γωνία — της αφήνουμε χώρο */ padding: 0 3.2rem .6rem 0; border-bottom: 1px solid var(--rule); } .ic-hero { display: block; margin-top: 3.5rem; } .ic-hero h1 { font-size: 2.4rem; letter-spacing: -.01em; } .ic-mark { width: 3.2rem; height: 3.2rem; margin-bottom: 1.4rem; } .ic-mark svg { width: 1.7rem; height: 1.7rem; } .ic-count { margin-top: .7rem; font-size: 1rem; padding-top: .7rem; border-top: 1px solid var(--rule); display: inline-block; } .ic-print { display: block; margin-top: auto; } .ic-print p { margin: 0 0 .5rem; } .ic-tie { font-size: .95rem; color: var(--ic-ink); } .ic-site { font-size: .8rem; letter-spacing: .06em; color: var(--muted); border-top: 1px solid var(--rule); padding-top: .6rem; } .ic-brand { font-size: .85rem; margin-top: 1.2rem; } } /* ═══════════════════════════════════════════════════════════════════ ΔΙΑΓΡΑΜΜΑΤΑ ΚΛΑΣΕΩΝ (ΑΟΠ) — patch «σχήματα-ΑΟΠ» Αντικαθιστούν τις σαρώσεις image42-45. HTML και όχι SVG, επειδή το περιεχόμενο είναι κείμενο σε κουτιά: έτσι αναδιατάσσεται στο κινητό, επιλέγεται, αναζητείται — και τυπώνεται ως γραμμές, όχι ως εικόνα. ═══════════════════════════════════════════════════════════════════ */ .uml { display: flex; flex-direction: column; align-items: center; margin: 1.4rem 0; font-size: .82rem; line-height: 1.45; } /* ---------- το κουτί της κλάσης ---------- */ .umlb { border: 1.5px solid var(--ink); background: var(--surface); min-width: 9.5rem; max-width: 100%; } .umlb-n { margin: 0; padding: .3rem .55rem; font-weight: 700; text-align: center; border-bottom: 1.5px solid var(--ink); } .umlb-a, .umlb-o { padding: .3rem .55rem; } .umlb-o { border-top: 1.5px solid var(--ink); } .umlb-a span, .umlb-o span { display: block; } /* ---------- δύο αντικείμενα που συνεργάζονται (image42) ---------- */ .uml-pair { flex-direction: row; align-items: stretch; justify-content: center; gap: 0; } .uml-link { display: flex; align-items: center; flex: 1 1 auto; /* αρκετά φαρδύ ώστε να χωρά η ετικέτα από πάνω χωρίς να πατά τα κουτιά */ min-width: 7rem; max-width: 10rem; position: relative; } /* η γραμμή της συνεργασίας, με την ετικέτα να κάθεται πάνω της */ .uml-link::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid var(--ink); } .uml-link span { /* ΠΑΝΩ από τη γραμμή, όχι επάνω της: με λευκό φόντο έκοβε τη σύνδεση στη μέση και τα δύο αντικείμενα έμοιαζαν ασύνδετα */ position: absolute; left: 50%; bottom: calc(50% + .3rem); transform: translateX(-50%); padding: 0 .3rem; text-align: center; font-size: .72rem; line-height: 1.25; } /* ---------- ιεραρχία: γονιός πάνω, παιδιά κάτω ---------- */ .uml-stem { width: 0; height: 1.5rem; border-left: 1.5px solid var(--ink); position: relative; } /* βέλος προς τα πάνω = «is_a» (μόνο στην κληρονομικότητα) */ .uml-stem.up::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border: .32rem solid transparent; border-bottom-color: var(--ink); border-top: 0; } .umlk { display: flex; justify-content: center; align-items: flex-start; gap: .7rem; position: relative; padding-top: 1.1rem; width: 100%; } .umlk > * { flex: 1 1 0; min-width: 0; } /* η οριζόντια αγκύλη: πιάνει ΑΚΡΙΒΩΣ από το κέντρο του πρώτου παιδιού ως το κέντρο του τελευταίου — εξ ου και το --n */ .umlk::before { content: ""; position: absolute; top: 0; left: calc(50% / var(--n)); right: calc(50% / var(--n)); border-top: 1.5px solid var(--ink); } /* Κάθε παιδί κρεμάει από την αγκύλη. Το κλαδί ξεκινά από την ΚΟΡΥΦΗ του κουτιού και ανεβαίνει (bottom:100%) ως την αγκύλη — αν μπει με top:0 ζωγραφίζεται μέσα στο κουτί και αφήνει κενό από πάνω. */ .umlk > *::before { content: ""; position: absolute; bottom: 100%; height: 1.1rem; border-left: 1.5px solid var(--ink); transform: translateX(-50%); } .umlk > .umlb { position: relative; } .umlk > .umlb::before { left: 50%; } /* Το πλαίσιο των στιγμιοτύπων (image43): ΧΩΡΙΣ εσωτερική αγκύλη. Η ίδια η περίκλειση λέει «αυτά ανήκουν στην κλάση από πάνω» — έτσι είναι και στο πρωτότυπο, και γλιτώνουμε γραμμές που δεν προσθέτουν νόημα. */ .umlk.framed { padding: .9rem; border: 1.5px solid var(--ink); border-radius: 14px; } .umlk.framed::before, .umlk.framed > .umlb::before, .umlk.framed > .umlb::after { display: none; } .uml-note { margin: 0 0 .5rem; font-size: .78rem; color: var(--muted); text-align: center; max-width: 30rem; } .uml-note.bottom { margin: .7rem 0 0; } .uml-note b { color: var(--ink); } /* ---------- κινητό: τα κουτιά μπαίνουν το ένα κάτω από το άλλο ---------- */ @media (max-width: 32rem) { /* ---- δύο αντικείμενα που συνεργάζονται: το ένα κάτω από το άλλο, με τη γραμμή να τα ενώνει κάθετα (μένουν κεντραρισμένα) ---- */ .uml-pair { flex-direction: column; align-items: center; } .uml-link { min-height: 3rem; max-width: none; width: 100%; } .uml-link::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1.5px solid var(--ink); } /* κάθετα, η ετικέτα δεν πρέπει να κόβει τη γραμμή στη μέση: πάει δίπλα της, χωρίς φόντο, ώστε η σύνδεση να διαβάζεται ενιαία */ .uml-link span { margin: 0 auto 0 calc(50% + .55rem); padding: 0; background: none; text-align: left; } /* ---- ιεραρχία: γίνεται δέντρο με ραχοκοκαλιά, όπως ο κατάλογος αρχείων. Ο κορμός ΞΕΚΙΝΑΕΙ από το κουτί του γονιού και φτάνει ως το τελευταίο παιδί, ώστε η σύνδεση να διαβάζεται. ---- */ .uml:not(.uml-pair) { align-items: flex-start; } /* τα κουτιά παίρνουν το πλάτος του περιεχομένου τους, όχι όλο το πλάτος */ .uml:not(.uml-pair) > .umlb { align-self: flex-start; } /* ο κορμός κατεβαίνει στο x = 1.1rem — εκεί ακριβώς όπου θα περάσει και η ραχοκοκαλιά των παιδιών, ώστε να είναι μία συνεχής γραμμή */ .uml-stem { margin-left: 1.1rem; height: 1.3rem; } .umlk { flex-direction: column; align-items: flex-start; padding: 0 0 0 2.2rem; gap: 0; width: 100%; } .umlk::before { display: none; } .umlk > * { margin-top: .7rem; max-width: 100%; } /* το κλαδί: οριζόντιο, από τη ραχοκοκαλιά ως το κουτί */ .umlk > .umlb::before { left: -1.1rem; top: 1.15rem; width: 1.1rem; height: 0; border-left: 0; border-top: 1.5px solid var(--ink); transform: none; } /* Η ραχοκοκαλιά: κάθε κουτί φέρνει το κομμάτι που περνά ΔΙΠΛΑ του, από το προηγούμενο κουτί ως το κάτω άκρο του δικού του. Το τελευταίο κουτί κόβει τη γραμμή στο ύψος του κλαδιού του, ώστε να μην κρέμεται γραμμή στο κενό. Έτσι βγαίνει μία συνεχής γραμμή, όσα κουτιά κι αν είναι, χωρίς να ξέρει κανείς εκ των προτέρων το ύψος τους. */ .umlk > .umlb::after { content: ""; position: absolute; left: -1.1rem; top: -.7rem; bottom: 0; border-left: 1.5px solid var(--ink); } .umlk > .umlb:last-child::after { bottom: auto; height: 1.85rem; } .umlk.framed { padding: .9rem; } } @media print { .uml { break-inside: avoid; page-break-inside: avoid; } .umlb { background: none; } } /* ---------- το κουμπί του θέματος ---------- Πάνω δεξιά: αριστερά κάθεται το μενού, κάτω η μπάρα εντύπων. Δείχνει ΤΙ ΘΑ ΚΑΝΕΙ (φεγγάρι στο ανοιχτό, ήλιος στο σκούρο), όχι πού βρίσκεσαι. Δεν τυπώνεται. */ #themebtn { position: fixed; top: 1rem; right: 1rem; z-index: 55; width: 2.6rem; height: 2.6rem; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--muted); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 1px 6px var(--shadow); cursor: pointer; } #themebtn:hover { color: var(--blue); border-color: var(--blue); } #themebtn svg { width: 1.25rem; height: 1.25rem; display: block; } #themebtn .th-sun { display: none; } html[data-theme="dark"] #themebtn .th-moon { display: none; } html[data-theme="dark"] #themebtn .th-sun { display: block; } @media print { #themebtn { display: none; } } /* Στα ένθετα το κουμπί πέφτει πάνω στο εξώφυλλο-ταινία και, μόλις κολλήσει η αναζήτηση στην κορυφή, πάνω στο πλήθος («24 λήμματα»). Του κρατάμε διάδρομο — αλλά ΜΟΝΟ όπου χρειάζεται: · το εξώφυλλο τον θέλει πάντα (το κουμπί κάθεται από πάνω του) · η μπάρα μόνο ΚΟΛΛΗΜΕΝΗ· όσο είναι στη θέση της, το κουμπί είναι ψηλότερα και το πεδίο μπορεί να πάρει όλο το πλάτος — σε οθόνη 375px αυτά τα 62px είναι μισή λέξη παραπάνω στο placeholder Σε πλατιά οθόνη το κουμπί είναι έξω από το κείμενο· δεν χρειάζεται τίποτα. */ @media (max-width: 46rem) { body.lex-page .icover, body.prog-page .icover, body.lex-page .stickybar.stuck, body.prog-page .stickybar.stuck { padding-right: 3.9rem; } } /* ═══════════════════════════════════════════════════════════════════ ΣΚΟΤΕΙΝΟ ΘΕΜΑ — τα σημεία που δεν λύνονται με μεταβλητή ═══════════════════════════════════════════════════════════════════ */ /* ⚠ ΟΛΟ ΤΟ ΜΠΛΟΚ ΕΙΝΑΙ ΣΕ @media screen — ΕΠΙΤΗΔΕΣ. Αυτά δεν είναι χρώματα· είναι πλάκες και γεμίσματα που υπάρχουν μόνο επειδή η οθόνη είναι σκοτεινή. Στο χαρτί δεν έχουν κανένα νόημα και, αν τα άφηνες να περάσουν, θα ζωγράφιζαν λευκά ορθογώνια πάνω στο PDF. Μετρημένο: η λευκή πλάκα του QR άλλαζε τη σελίδα 1 του βιβλίου όταν τύπωνες με το σκοτεινό θέμα ανοιχτό. Κρατώντας τα εδώ μέσα, το @media print παρακάτω δεν χρειάζεται να τα ξεκάνει ένα-ένα — δεν φτάνουν ποτέ ως εκεί. */ @media screen { /* Οι σαρώσεις που απομένουν από το σχολικό βιβλίο είναι μαύρο σε ΛΕΥΚΟ. Πάνω σε σκούρα σελίδα καίνε σαν προβολέας. Δεν τις αντιστρέφουμε (θα γίνονταν αρνητικό, με γκρίζα «βρόμικα» περιγράμματα)· τους δίνουμε λευκή πλάκα, ώστε να διαβάζονται σαν χαρτάκια καρφιτσωμένα στη σελίδα. ⚠ `main img`, όχι `.figure img`: από τις 10 εικόνες μόνο η μία κάθεται σε .figure. Οι υπόλοιπες εννιά είναι μέσα σε κελιά πίνακα (td.step-img: κόμβοι λίστας · td.loop-form: διαγράμματα επανάληψης). Όταν κάποτε γίνουν κι αυτές HTML/SVG, ο κανόνας απλώς αδειάζει. */ html[data-theme="dark"] main img { background: #fff; padding: .5rem; border-radius: 4px; } /* Το QR είναι σκούρες γραμμές σε διάφανο φόντο: σε σκούρο εξώφυλλο εξαφανίζεται και ΔΕΝ σαρώνεται. Κρατά λευκή πλάκα. */ html[data-theme="dark"] .cv-qr-tile { background: #fff; border-color: var(--rule-strong); } /* Το εργαλείο σήμανσης έχει δικά του σταθερά χρώματα (ανοιχτό κόκκινο, ανοιχτό κίτρινο). Πάνω τους τα γράμματα μένουν σκούρα. */ html[data-theme="dark"] body.mark .cut, html[data-theme="dark"] body.mark .cut-part, html[data-theme="dark"] #markbar .mb-seed { color: #1a1a1a; } } /* ═══════════════════════════════════════════════════════════════════ ΤΟ ΧΑΡΤΙ ΔΕΝ ΞΕΡΕΙ ΑΠΟ ΘΕΜΑΤΑ Ό,τι κι αν δείχνει η οθόνη, η εκτύπωση ξαναπαίρνει ΤΙΣ ΑΝΟΙΧΤΕΣ ΤΙΜΕΣ — τις ίδιες που είχε το βιβλίο πριν μπει το σκοτεινό θέμα. Ο επιλογέας είναι τόσο ειδικός όσο το html[data-theme="dark"] και έρχεται μετά, οπότε κερδίζει. ⚠ Νέο token στο :root; Πρόσθεσέ το ΚΑΙ εδώ, αλλιώς θα διαρρεύσει το σκούρο του στο PDF. ═══════════════════════════════════════════════════════════════════ */ @media print { html, html[data-theme="dark"], html[data-theme="light"] { color-scheme: light; --page: #fff; --surface: #fff; --surface-2: #fcfdfe; --surface-3: #e4e8eb; --grey-soft: #f4f5f6; --code-bg: #fbfbfc; --overlay: rgba(20,28,36,.35); --scrim: rgba(0,0,0,.16); --hairline: rgba(0,0,0,.09); --shadow: rgba(0,0,0,.1); --shadow-lg: rgba(0,0,0,.16); --bar-bg: rgba(255, 255, 255, .93); --bar-shadow: rgba(20, 30, 40, .1); --chip-shadow: rgba(20, 30, 40, .12); --ink: #1a1a1a; --ink-2: #3d464d; --ink-3: #33404b; --ink-4: #24303a; --muted: #5b6670; --faint: #8a949c; --faint-2: #6b7680; --on-accent: #fff; --stamp-ink: #97a1a9; --stamp-b: #7d878f; --rule: #e3e7ea; --rule-2: #ccd4db; --rule-3: #b8c0c7; --rule-4: #c9d3db; --rule-mid: #7d8b96; --rule-strong: #4a5560; --blue: #1f6fb2; --blue-soft: #eef5fb; --blue-tint: #f6fafd; --blue-fill: #dbe9f6; --blue-line: #cfe0ee; --blue-line-2: #b9d5ea; --blue-ink: #14456b; --blue-ink-2: #17547f; --orange: #e07b27; --orange-soft: #fdf4e9; --amber-soft: #fff8e6; --amber-line: #e9c46a; --gold: #8a6508; --gold-2: #a9781a; --rose: #f7dbd6; --rose-line: #c98c82; --green: #2e7d32; --red: #c62828; --c-kw: #0033cc; --c-str: #067d17; --c-num: #7a6a00; --mark-1: #dbe9f6; --mark-2: #dcecd3; --mark-3: #fdf0cd; --mark-4: #f7dbd6; --svg-ink: #1f262e; --cover-ink: #1f262e; --cover-accent: #e8b21f; } /* και οι δύο παλέτες των ενθέτων, ανοιχτές όπως πάντα */ html[data-theme="dark"] body.lex-page { --blue: #2f6b4f; --blue-soft: #eef4f0; --blue-ink: #14456b; --orange: #b8562f; --orange-soft: #fdf1ec; --rule: #e2e7e3; --muted: #5d6b62; --page: #fcfcfa; } html[data-theme="dark"] body.prog-page { --blue: #4a4a8f; --blue-soft: #eeeef7; --blue-ink: #14456b; --orange: #a25c3c; --orange-soft: #fbf2ee; --rule: #e5e5ec; --muted: #63637a; --page: #fcfcfd; } }