/* ========================================================= Life Archive – E-ink-Modus Alles hier hängt an einem Merkmal: html[data-eink]. Gesetzt wird es vor dem ersten Bild von einem kurzen Skript im von index.html und danach von app/eink.js. --------------------------------------------------------- Was ein E-ink-Bildschirm anders kann Er kann kein Grau in Bewegung. Jede Änderung am Bild ist ein Umblättern – bei einer Überblendung geschieht das dutzendfach hintereinander und sieht aus wie Flimmern. Also: keine Übergänge, keine Animationen, kein Unschärfe- Vorhang (der wäre ein Neuzeichnen der halben Fläche). Er kann keine Farbe. Was hier bunt ist, wird ein Grauton – und weil die App zwölf Farben trägt, müssen es zwölf unterscheidbare Graustufen sein. Sortiert nach Helligkeit, damit die Reihenfolge stimmt, die das Auge schon kennt. Und er ist Papier: hell, mit dunkler Schrift. Die App ist das Gegenteil. Diese Datei dreht sie um – nicht Regel für Regel, sondern an den Token: --g-01 … --g-51 die Graustufen-Leiter aus base.css. Sie ist nach Helligkeit sortiert, und genau deshalb genügt hier ein Block: was im Dunkeln vorne stand (hell), wird auf Papier Tinte; was hinten stand (dunkel), wird Fläche. --o, --t-* die durchscheinenden Überzüge. Ein heller Schleier auf Dunkel wird ein dunkler auf Hell – ein Token, 152 Stellen. --c-* die Modulfarben, mit !important: die eigenen Farben aus den Einstellungen stehen als Inline-Stil an , und nur !important sticht die aus. Kontrast: Schwarz auf Papier ist 20:1. Der hellste Ton, den diese Datei für Schrift vergibt, ist #626262 – 5,3:1 auf dem Papier und 4,9:1 auf der Leistenfläche, also über den 4,5:1, die AA verlangt. Nachgemessen wird nicht nach Augenmaß: eine Prüfung über alle Bildschirme rechnet jede Schrift gegen ihren tatsächlichen Grund. ========================================================= */ html[data-eink] { color-scheme: light; /* Das Papier selbst. Kein reines Weiß: ein Hauch warm-neutral liest ruhiger und entspricht dem, was das Gerät zeigt. */ --eink-paper: #fafaf9; --eink-scrim: #dcdbd9; /* Vorhang hinter Popups – Fläche, nicht Schleier */ --danger: #000000; /* zerstörend heißt hier: unterstrichen (app/hold.js) */ --late: #000000; /* „late" steht als Wort da – Farbe trägt hier nichts */ /* ---------- Die Leiter, umgedreht -------------------------------------- Vorne (hell im Dunkeln) wird Tinte, hinten (dunkel) wird Fläche. Der Sprung liegt zwischen --g-32 und --g-33: bis dahin ist ein Ton in der App Vordergrund, danach Untergrund. */ /* Tinte */ --g-01: #000000; --g-02: #000000; --g-03: #000000; --g-04: #000000; --g-05: #000000; --g-06: #111111; --g-07: #111111; --g-08: #111111; --g-09: #111111; --g-10: #111111; --g-11: #1c1c1c; --g-12: #1c1c1c; --g-13: #1c1c1c; --g-14: #1c1c1c; --g-15: #1c1c1c; --g-16: #262626; --g-17: #262626; --g-18: #262626; --g-19: #262626; --g-20: #262626; --g-21: #333333; --g-22: #333333; --g-23: #333333; --g-24: #333333; --g-25: #333333; --g-26: #404040; --g-27: #404040; --g-27b: #404040; /* --text-muted – 9,4:1 auf Papier */ --g-28: #404040; --g-29: #404040; --g-29b: #4a4a4a; /* --text-subtle – 8,5:1 auf Papier */ --g-30: #505050; --g-31: #505050; /* --text-disabled – 7,8:1 auf Papier */ --g-32: #505050; /* Fläche */ --g-33: #9a9a9a; /* kräftiger Rahmen */ --g-34: #a6a6a6; /* Kontur des Knopfes */ --g-35: #dcdcdc; /* --surface-3 */ --g-36: #e2e2e2; --g-37: #e8e8e8; /* --surface-2 */ --g-38: #ebebeb; --g-39: #efefef; /* --surface */ --g-40: #f0f0f0; --g-41: #f0f0f0; --g-42: #e6e6e6; /* Hover – auf Papier eine Spur dunkler, nicht heller */ --g-43: #f3f2f0; /* Leistenfläche */ --g-44: #f7f6f4; --g-45: #f6f5f3; --g-46: var(--eink-paper); /* --bg */ --g-47: #efeeec; /* --field-bg – die Vertiefung eines Eingabefeldes */ --g-48: #ffffff; /* Schrift auf einem Akzent (Fitness) – siehe --on-accent */ --g-49: #f2f1ef; /* --bg-deep */ --g-50: #f0efed; --g-51: #ffffff; /* --ink – Schrift auf einem Akzent, überall sonst */ /* ---------- Überzüge ---------------------------------------------------- */ --o: 0, 0, 0; /* aus hell wird dunkel */ --o-deep: 0, 0, 0; --o-bg: 250, 250, 249; /* Schleier über einer Kachel: jetzt Papier */ --o-bg2: 250, 250, 249; --o-ink: 0, 0, 0; /* Linien dürfen kräftiger sein als im Dunkeln: ein 8-%-Schleier ist auf Papier nichts, und E-ink zeichnet harte Kanten am besten. */ --line: rgba(0, 0, 0, .18); --line-strong: rgba(0, 0, 0, .34); /* Schatten sind auf Papier eine Grauwolke ohne Aussage. */ --shadow-1: none; --shadow-2: none; /* Was auf einem Akzent steht. Im Farbbild ist der Akzent hell und die Schrift darauf dunkel; auf Papier ist es umgekehrt – der Akzent muss dunkel sein, weil er auch als Schriftfarbe auftritt (185 Stellen schreiben `color: var(--accent-app)`). Also Weiß darauf. --ink und --g-48 sind dieselbe Rolle unter anderem Namen. */ --on-accent: #ffffff; /* ---------- Modulfarben ------------------------------------------------ Neun Bereiche, neun Stufen – sortiert nach der Helligkeit, die sie im Farbbild haben, damit die Reihenfolge vertraut bleibt. Die Kontur ist jeweils dunkler als die Fläche, wie im Farbbild auch. Warum das dunkle Ende der Leiter: ein Modulton ist in dieser App zweierlei. Er füllt Sechsecke – und er ist Schriftfarbe, in jeder Überschrift eines Bereichs, jedem „TODAY", jedem aktiven Reiter. Auf Papier entscheidet die zweite Rolle: ein heller Ton wäre dort eine Schrift, die man nicht liest. Der hellste Wert hier ist #626262 und damit 5,3:1 auf dem Papier, 4,9:1 auf der Leistenfläche und 5,9:1 unter weißer Schrift – jede der drei Rollen über AA. Die Sechsecke bekommen ihre helle Fläche weiter unten zurück, aufgehellt aus genau diesen Werten. !important, weil eigene Farben aus den Einstellungen als Inline-Stil an stehen (app/settings.js) – ohne das bliebe der Bereich bunt, den jemand selbst eingefärbt hat. */ --c-journal: #626262 !important; --c-journal-stroke: #444444 !important; --c-nutrition: #5b5b5b !important; --c-nutrition-stroke: #3d3d3d !important; --c-calendar: #545454 !important; --c-calendar-stroke: #363636 !important; --c-cue-diary: #4d4d4d !important; --c-cue-diary-stroke: #2f2f2f !important; --c-archive: #464646 !important; --c-archive-stroke: #282828 !important; --c-home: #383838 !important; --c-home-stroke: #1a1a1a !important; --c-fitness: #3f3f3f !important; --c-fitness-stroke: #212121 !important; /* Arten und Pulszonen: fünf unterscheidbare Graustufen, hell = ruhig. */ --fk-gym: #212121; --fk-cardio: #4a4a4a; --fk-sport: #737373; --fk-stretch: #a3a3a3; --hz-1: #bdbdbd; --hz-2: #9a9a9a; --hz-3: #737373; --hz-4: #4a4a4a; --hz-5: #1c1c1c; --pose-near: #ffffff; --pose-mid: #e0e0e0; --pose-deep: #cecece; --pose-far: #bdbdbd; --pose-hot: #1c1c1c; --pose-warm: #6e6e6e; --pose-ink: #000000; --pose-prop: #4a4a4a; --pose-prop-top: #6e6e6e; --pose-mat: #d0d0d0; --pose-floor: #000000; --pose-strap: #000000; --pose-arrow: #000000; --pose-ghost: rgba(0, 0, 0, .14); --fmap-bg: #ffffff; --c-meditation: #383838 !important; --c-meditation-stroke: #1a1a1a !important; --c-finance: #313131 !important; --c-finance-stroke: #131313 !important; --c-reader: #2a2a2a !important; --c-reader-stroke: #0c0c0c !important; /* Eigene Tracker: dieselbe Leiter wie die Bereiche, dazwischen gesetzt. Zwei Tracker nebeneinander bleiben unterscheidbar, weil auch hier die Helligkeit die Reihenfolge trägt. */ --tr-iris: #4a4a4a; --tr-lime: #5e5e5e; --tr-amber: #565656; --tr-teal: #424242; --tr-coral: #3a3a3a; --tr-sky: #515151; --tr-sand: #606060; --tr-orchid: #343434; --tr-custom: #4e4e4e; /* jede eigene Farbe aus dem Rad (LA.wheel) */ /* Auf Papier ist der Sockel unter den Flächen von Patterns schwarz – er liest dort besser als im Dunkeln (diligent-work, Abschnitt 2.5). */ --py-plinth: #000000; --accent-app: #383838 !important; /* Dieselben Töne als Zahlenpaar, für die durchscheinenden Flächen. Mit geringer Deckkraft über Papier ergibt das den hellen Schleier, den die Regeln meinen. */ --t-journal: 117, 117, 117; --t-journal-stroke: 85, 85, 85; --t-nutrition: 109, 109, 109; --t-calendar: 101, 101, 101; --t-cue-diary: 93, 93, 93; --t-archive: 85, 85, 85; --t-fitness: 77, 77, 77; --t-fitness-stroke: 45, 45, 45; --t-meditation: 69, 69, 69; --t-meditation-stroke: 37, 37, 37; --t-reader: 53, 53, 53; --t-cover: 0, 0, 0; /* ---------- Paletten aus JavaScript ------------------------------------ Gelesen über LA.dom.var(); app/dom.js frischt die Listen auf, sobald la:eink gemeldet wird – ohne Neuladen. */ /* Makros: vier Flächen im Ring und im Stapel, weit genug auseinander, dass ein Bildschirm mit sechzehn Graustufen sie noch trennt. */ --chart-protein: #6a6a6a; --chart-fat: #a2a2a2; --chart-carbs: #3e3e3e; --chart-fiber: #cacaca; /* Ampel: je schlechter, desto mehr Tinte. Die Stufen stehen auch als Schrift („low", „high"), also bleibt die hellste über 4,5:1. */ --traffic-low: #6e6e6e; --traffic-medium: #4a4a4a; --traffic-high: #1c1c1c; /* Nutri-Score: A hell, E dunkel. Der Buchstabe darin ist weiß, der hellste Wert deshalb #757575 (4,5:1). */ --nutri-a: #757575; --nutri-b: #656565; --nutri-c: #555555; --nutri-d: #454545; --nutri-e: #333333; /* Ränge: neun Stufen, aufsteigend mehr Tinte – dieselbe Reihenfolge wie Holz bis Unsterblich. Die Zahl im Abzeichen ist weiß, also beginnt die Reihe bei #757575. */ --rank-wood: #757575; --rank-bronze: #6b6b6b; --rank-silver: #616161; --rank-gold: #575757; --rank-platinum: #4d4d4d; --rank-diamond: #434343; --rank-champion: #393939; --rank-olympian: #2f2f2f; --rank-immortal: #252525; /* Kennzahlen: sechs Linien in einem Diagramm. Eine Linie ist Grafik, nicht Schrift – 3:1 genügt, und dort endet die Reihe (#8a8a8a). */ --stat-workouts: #1a1a1a; --stat-lifted: #2e2e2e; --stat-reps: #424242; --stat-sets: #5a5a5a; --stat-heaviest: #727272; --stat-time: #8a8a8a; --grid-line: rgba(0, 0, 0, .12); --grid-fill: rgba(0, 0, 0, .07); /* „Kein Rang" ist eine Fläche mit weißer Zahl darauf – sie muss dunkel genug dafür sein. --rank-dim ist nur ein Punkt, also Grafik. */ --rank-none: rgba(0, 0, 0, .62); --rank-dim: rgba(0, 0, 0, .45); /* Ersatzcover eines PDF */ --cover-text: #000000; --cover-from: #dcdcdc; --cover-to: #b4b4b4; /* Linien im Lesebildschirm */ --rd-line: rgba(0, 0, 0, .18); } /* ========================================================= Kein Bild, das sich bewegt Jede Überblendung ist auf E-ink ein sichtbares Umblättern. Das gilt auch für die View-Animation und den Streifen des laufenden Workouts – deshalb hier ohne Ausnahme. Das ist bewusst getrennt von @media (prefers-reduced-motion): dort bleibt alles, wie es war. Wer den E-ink-Modus wieder ausschaltet, hat wieder die Bewegung, die das System erlaubt. ========================================================= */ html[data-eink], html[data-eink] *, html[data-eink] *::before, html[data-eink] *::after { transition: none !important; animation: none !important; } html[data-eink] { scroll-behavior: auto; } /* Unschärfe heißt: die Fläche dahinter jedes Mal neu rechnen und neu zeichnen. Auf Papier ist das das Teuerste überhaupt – und zu sehen wäre davon ohnehin nichts. */ html[data-eink] *, html[data-eink] *::before, html[data-eink] *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Ein weicher Schatten ist auf E-ink ein Fleck aus Rasterpunkten. Die Tiefe kommt hier aus der Kante, nicht aus dem Schatten – die beiden großen Flächen tragen sie ohnehin schon. (--shadow-1 und --shadow-2 sind oben auf `none`; diese beiden schreiben ihren eigenen.) */ html[data-eink] .modal-panel { box-shadow: none; } /* Seit das Popup den Eckschnitt trägt, hängt sein Schatten an filter: drop-shadow() statt an box-shadow – die Zeile darüber erwischt ihn also nicht mehr. Auf Papier fällt er ganz weg: die Fläche ist heller als der Vorhang darunter, und diese Kante liest auf E-ink schärfer als jeder Verlauf. Die Akzentlinie unter der Kopfzeile wird zu einer schwarzen – ein Grauton trüge dort die Aussage „hier fängt der Inhalt an" nicht mehr. */ html[data-eink] .modal-panel { filter: none; } html[data-eink] .pop__head { border-bottom-color: #1c1c1c; } /* Der Vorhang hinter Menü und Popup: eine Fläche statt eines Schleiers. Der Bildschirm zeichnet dann einen Rechteckbereich, nicht die ganze Seite mit neuen Zwischentönen. */ html[data-eink] .sheet__backdrop, html[data-eink] .modal-layer__backdrop { background: var(--eink-scrim); } /* Die SVGs in assets/icons sind schwarz. `.icon-inv` dreht sie um, damit sie auf den dunklen Flächen der App zu sehen sind – auf Papier ist genau das falsch herum, und ein weißes Zeichen auf hellem Grund ist kein Zeichen mehr. Eine Zeile, alle Stellen. */ html[data-eink] .icon-inv { filter: none; } /* ========================================================= Die Sechsecke Der Modulton ist oben dunkel geworden, weil er Schrift sein muss. Ein Sechseck ist aber Fläche – und das Zeichen darin ist ein schwarzes SVG als , das keine Farbe annimmt. Ein dunkles Sechseck hätte darin ein unsichtbares Zeichen. Also wird der Ton hier wieder aufgehellt, und zwar aus sich selbst: der Abstand zwischen den neun Bereichen bleibt erhalten, die Kontur bleibt dunkler als die Fläche, und das schwarze Zeichen steht auf hellem Grund. Die feste Fläche davor gilt für Browser ohne color-mix. ========================================================= */ html[data-eink] .hex__face { background: #c8c8c8; background: color-mix(in srgb, var(--hex-color) 32%, #ffffff); } html[data-eink] .hex__shape { background: #8a8a8a; background: color-mix(in srgb, var(--hex-stroke) 60%, #ffffff); } /* ========================================================= Stellen, die eine eigene Farbe tragen Alles bis hier lief über Token. Was folgt, sind die Regeln, die eine Farbe direkt nennen – Warnrot, die warmen Töne des Lesebildschirms, die Marker im Buch. ========================================================= */ /* ---------- Warnen und Löschen --------------------------------------------- Rot sagt auf Papier nichts. Was warnt, wird dunkler als der Rest – und der Löschknopf bekommt eine Fläche, damit er trotzdem heraussticht. */ html[data-eink] .opt-btn--danger, html[data-eink] .doc-act--danger, html[data-eink] .cd-btn--danger, html[data-eink] .cd-opt--danger, html[data-eink] .lib-row.is-danger .lib-row__label, html[data-eink] .ra-act--danger, html[data-eink] .rd-delta.is-down, html[data-eink] .nu-btn--danger, html[data-eink] .nu-warn__title, html[data-eink] .brt-issue, html[data-eink] .gong-issue { color: #1c1c1c; } html[data-eink] .cd-btn--danger, html[data-eink] .opt-btn--danger, html[data-eink] .nu-btn--danger { border-color: rgba(0, 0, 0, .5); } html[data-eink] .doc-act__icon, html[data-eink] .lib-row.is-danger .lib-row__icon { background: #1c1c1c; } html[data-eink] .doc-ask__btn--danger, html[data-eink] .rd-btn--danger, html[data-eink] .cd-manage__act--danger { background: #2e2e2e; color: #ffffff; } html[data-eink] .cd-manage__act--danger:hover { background: #000000; } html[data-eink] .gong-row.has-issue .gong-time { border-color: #6e6e6e; } /* ---------- Auf und ab ----------------------------------------------------- Grün und Rot werden hell und dunkel: nach oben ist wenig Tinte, nach unten viel. Das Vorzeichen steht ohnehin daneben. */ html[data-eink] .fit-delta.is-up, html[data-eink] .cd-delta.is-down, html[data-eink] .cd-wave.is-down, html[data-eink] .rd-delta.is-up, html[data-eink] .rd-goalring--lg.is-done b { color: #4a4a4a; } html[data-eink] .fit-delta.is-down, html[data-eink] .cd-delta.is-up { color: #000000; } html[data-eink] .cd-wave.is-down .cd-wave__mark, html[data-eink] .fit-stale__row--ok { border-color: #7a7a7a; } html[data-eink] .fit-stale__row--ok { border-inline-start-color: #7a7a7a; } /* ---------- Marken im Kalender --------------------------------------------- */ html[data-eink] .cal-badge--level, html[data-eink] .cal-badge--record, html[data-eink] .cal-badge--rank, html[data-eink] .cal-badge--link { color: #333333; border-color: rgba(0, 0, 0, .3); } /* ---------- Notizen: die Chips --------------------------------------------- Fällig, überfällig, Priorität. Ohne Farbe trägt die Kante die Aussage: je dringender, desto dunkler. */ html[data-eink] .nt-chip--due.is-soon, html[data-eink] .nt-chip--prio.is-normal { border-color: #8a8a8a; color: #3a3a3a; } html[data-eink] .nt-chip--due.is-over, html[data-eink] .nt-chip--prio.is-high { border-color: #000000; color: #000000; } /* Vier Stellen in styles/notes.css schreiben das helle Archivgrau direkt als Schriftfarbe. Auf Papier steht es dann hell auf hell. */ html[data-eink] .nt-chip--tag, html[data-eink] .nt-chip--bell, html[data-eink] .nt-tag, html[data-eink] .nt-opt { color: #1c1c1c; } /* Das Archive setzt seine Akzente als Literal (styles/notes.css) – die beiden Grauwerte von dort sind auf Papier fast unsichtbar. */ html[data-eink] .ar, html[data-eink] .modal-layer.ar { --accent-app: #464646 !important; --accent-deep: #282828 !important; } /* ---------- Ernährung ------------------------------------------------------ */ html[data-eink] .nu-score { color: var(--on-accent); } /* ========================================================= Der Lesebildschirm Hier ist der E-ink-Modus zu Hause. Die Seite ist Papier, die Schrift schwarz, das Overlay erscheint ohne Blende. ========================================================= */ html[data-eink] .rd-stage { background: #ffffff; border-color: rgba(0, 0, 0, .22); } html[data-eink] .rd-flow, html[data-eink] .rd-flow *:not(mark):not(.ra-hl) { color: #000000; } /* Die Tinte des Buches (seit 0.6.0 beta als Token) – auf Papier schwarz. Seiten-Töne sind Filter, und Filter sind auf E-ink Grauschleier. */ html[data-eink] .rdr { --rd-ink: #000000; --rd-ink-strong: #000000; --rd-ink-soft: #1c1c1c; } html[data-eink] .rd-pdf[data-tone] .rd-pdfpage__canvas { filter: none; } html[data-eink] .rd-pdf[data-tone] .rd-pdfpage { background: #ffffff; } html[data-eink] .rd-flow .rd-chend::after, html[data-eink] .rd-flow hr, html[data-eink] .rd-flow .rd-orn { background: #000000; } html[data-eink] .rd-fmt__tag { background: transparent; box-shadow: inset 0 0 0 1px #000000; color: #000000; } html[data-eink] .rd-flow blockquote, html[data-eink] .rd-foot__chapter, html[data-eink] .rd-font, html[data-eink] .ra-act, html[data-eink] .ra-quote, html[data-eink] .rn-quote, html[data-eink] .rn-passage, html[data-eink] .rn-child__note, html[data-eink] .rn-note, html[data-eink] .rn-card__text, html[data-eink] .rd-goal__label { color: #1c1c1c; } /* Kopf- und Fußzeile über der Seite: eine deckende Fläche mit Kante, statt einer durchscheinenden mit Unschärfe. */ html[data-eink] .rd-head, html[data-eink] .rd-foot, html[data-eink] .rd-read.is-bare .rd-foot, html[data-eink] .rd-tool { background: var(--eink-paper); border: 1px solid rgba(0, 0, 0, .16); } /* Die Fortschrittszeile muss auf Papier zu sehen sein – der Akzent ist dafür ein zu helles Grau. */ html[data-eink] .rd-foot__bar { background: rgba(0, 0, 0, .14); } html[data-eink] .rd-foot__bar span { background: #000000; } html[data-eink] .rd-foot__left, html[data-eink] .rd-foot__inchap { color: #000000; } /* Die Marke auf einem Buchrücken im Regal liegt im Dunkeln als dunkler Schleier mit weißer Schrift auf dem Cover. Auf Papier sind beide Seiten dunkel – also andersherum: helle Marke, schwarze Schrift. „Gelesen" bleibt der Akzent und behält seine weiße Schrift. */ html[data-eink] .lib-tile__badge { background: rgba(255, 255, 255, .88); color: #000000; } html[data-eink] .lib-tile__badge.is-unread { color: rgba(0, 0, 0, .75); } /* Eine PDF-Seite ist ein Bild auf Weiß und bleibt es. */ html[data-eink] .rd-pdfpage { background: #ffffff; } html[data-eink] .rd-pdfpage.is-failed { background: #e2e2e2; } /* Markierungen: fünf Stufen statt fünf Farben. Die Fläche entsteht in reader.css als color-mix aus --ra – ein Grauwert dort genügt. */ html[data-eink] .ra--sun { --ra: #9a9a9a; } html[data-eink] .ra--moss { --ra: #8a8a8a; } html[data-eink] .ra--sky { --ra: #7a7a7a; } html[data-eink] .ra--rose { --ra: #6a6a6a; } html[data-eink] .ra--clay { --ra: #5a5a5a; } /* ========================================================= Blöcke in Journal und Notizen Ein Block darf Farbe tragen (Textfarbe und Markierung stehen als --b-color / --b-bg am Element, gesetzt aus app/doc/blockmenu.js). Auf Papier ist das eine Tinte für alle; die Markierung bleibt als heller Kasten erhalten, damit die Auszeichnung nicht verschwindet. ========================================================= */ html[data-eink] .doc-b[data-color] .doc-b__text { color: var(--text) !important; } html[data-eink] .doc-b[data-bg] { background: rgba(0, 0, 0, .08) !important; } /* Dasselbe für die beiden Farben, die seit dem Ausbau des Blockmenüs dazugekommen sind: die Linie eines Zitats und der Rahmen eines Textblocks. Auch sie stehen als fester Farbwert am Element (--b-line / --b-frame) und können deshalb nicht mitkippen – ein Amber-Rahmen bliebe auf Papier ein heller Fleck ohne Kontur. Auf Papier ist die Auszeichnung die FORM, nicht der Ton: die Linie bleibt eine Linie, der Rahmen bleibt ein Rahmen, beide in der Tinte, die es dort gibt. */ html[data-eink] .doc-b--quote[data-line] { border-inline-start-color: var(--text) !important; } html[data-eink] .doc-b--tblock[data-frame] .doc-tblock__box { box-shadow: inset 0 0 0 1.5px var(--text) !important; background: rgba(0, 0, 0, .05) !important; } /* ========================================================= Einzelfälle Flächen, die im Dunkeln hell waren, weil sie eine Fläche sind – nicht, weil sie Schrift wären. Die Leiter würde sie zu Tinte machen; hier stehen sie richtig. ========================================================= */ /* Die Bahn eines Fortschrittsbalkens */ html[data-eink] .mnt-bar--track { background: rgba(0, 0, 0, .14); } /* Die Körperkarte: Silhouette hell, Partien in ihrer Rangstufe darauf. */ html[data-eink] .bm-base { fill: #e4e4e4; } html[data-eink] .bm-mg--idle { fill: #d4d4d4; } html[data-eink] .bm-side { fill: rgba(0, 0, 0, .45); } html[data-eink] .bodymap.has-focus .bm-mg.is-focus { stroke: rgba(0, 0, 0, .95); } /* Der Schein um eine gewählte Partie ist auf Papier nur Rauschen. */ html[data-eink] .bm-mg--glow, html[data-eink] .bodymap.has-focus .bm-mg.is-focus { filter: none; } /* Verläufe zeichnet E-ink als Streifen. Wo einer nur Fläche meint, wird er eine. */ html[data-eink] .bodymap--loading { background: #e6e6e6; } /* ---------- Knöpfe mit Sockel auf Papier -------------------------------- Die Sockel greifen in die Graustufen-Leiter, und die dreht sich hier um: aus dem dunklen Sockel im Dunkeln würde auf Papier ein heller, der auf Papier nichts mehr ist. Tiefe ist aber gerade auf E-ink das verlässlichste Mittel – ein voller schwarzer Sockel liest schärfer als jeder Verlauf. Also steht er hier ausdrücklich auf Schwarz. */ html[data-eink] .btn, html[data-eink] .btn3d, html[data-eink] .nt-icon, html[data-eink] .nt-add, html[data-eink] button.pop__icon, html[data-eink] .nt-toast__open, html[data-eink] .nt-toast__close { --btn-lift: #000000; } /* Die handelnden Knöpfe tragen auf Papier eine schwarze Fläche mit weißer Schrift – der Akzent ist dort ein Grauton und trüge die Aussage „das ist der Knopf" nicht mehr. */ html[data-eink] .btn3d--accent, html[data-eink] .sh-tool--act, html[data-eink] .nt-add, html[data-eink] .nt-toast__open { --btn-face: #1c1c1c; --btn-face-hover: #000000; color: var(--eink-paper); } /* Ein eingeschaltetes Zeichen: schwarze Fläche, weißes Symbol. */ html[data-eink] .nt-icon.is-on { --btn-face: #1c1c1c; --btn-face-hover: #000000; } html[data-eink] .nt-icon.is-on img { filter: none; } html[data-eink] .nt-icon img { filter: none; } /* Marken und Filter: ohne Rahmen tragen sie ihre Fläche, und die muss sich auf Papier vom Untergrund abheben. */ html[data-eink] .nt-tag.is-on, html[data-eink] .nt-opt.is-on, html[data-eink] .nt-due__chip.is-on, html[data-eink] .nt-day.is-on { background: #1c1c1c; color: var(--eink-paper); } /* Die gewählte Frist: die Fläche trägt sie, nicht eine Farbe. */ html[data-eink] .nt-due__chip { background: #e8e8e8; color: #1c1c1c; } html[data-eink] .nt-due__value { background: #e8e8e8; } html[data-eink] .nt-due__more { color: #1c1c1c; text-decoration: underline; } /* Wochentage, Zahlenfeld und der Schalter der Hauptliste: dieselben drei Dichten wie überall auf Papier – Fläche hell, Ausgewähltes dunkel, Schrift schwarz. */ html[data-eink] .nt-day, html[data-eink] .nt-step__btn { background: #e8e8e8; color: #1c1c1c; } html[data-eink] .nt-switch { background: #e8e8e8; } html[data-eink] .nt-switch__name { color: #1c1c1c; } html[data-eink] .nt-switch__hint { color: #3a3a3a; } html[data-eink] .nt-switch__mark { border-color: #1c1c1c; } html[data-eink] .nt-switch.is-on .nt-switch__mark { background: #1c1c1c; } html[data-eink] .nt-switch.is-on .nt-switch__mark::after { border-color: var(--eink-paper); } /* Die Zustands-Marken tragen ihre Aussage seit dem Eckschnitt in der Fläche statt im Rahmen, und diese Flächen sind echte Farben – sie gehen deshalb nicht über die Leiter und müssen hier von Hand aufs Papier. Fällig, überfällig und Priorität unterscheiden sich dort nicht mehr durch den Farbton, sondern durch die Dichte. */ html[data-eink] .nt-chip--due.is-soon, html[data-eink] .nt-chip--prio.is-normal { background: #dcdcdc; color: #1c1c1c; } html[data-eink] .nt-chip--due.is-over, html[data-eink] .nt-chip--prio.is-high { background: #1c1c1c; color: var(--eink-paper); } html[data-eink] .nt-chip--due, html[data-eink] .nt-chip--prio.is-low, html[data-eink] .nt-chip--bell, html[data-eink] .nt-chip { background: #e8e8e8; color: #262626; } /* Dieselbe Leiter für die Marken einer Aufgabe: die Flächen dort sind ebenfalls echte Farben und gingen sonst als Grau ohne Aussage durch. Dauer und Wiederholung ruhig, eine verstrichene Frist am dichtesten, eine verfallene dazwischen und durchgestrichen. */ html[data-eink] .doc-task__chip { background: #e8e8e8; color: #262626; } html[data-eink] .doc-task__chip--due.is-over { background: #1c1c1c; color: var(--eink-paper); } html[data-eink] .doc-task__chip--due.is-expired { background: #dcdcdc; color: #3a3a3a; } /* Der Grund einer ungültigen Regel trägt im Dunkeln einen roten Ton – auf Papier sagt ihn der Rahmen links, nicht die Fläche. */ html[data-eink] .nt-rule__sum { background: #e8e8e8; color: #1c1c1c; } html[data-eink] .nt-rule__sum.is-bad { background: #dcdcdc; border-inline-start-color: #1c1c1c; color: #1c1c1c; } /* Der Schalter auf Papier: die Bahn ist eine helle Fläche mit Kontur, der Knauf volle Tinte. Ohne das wäre „an" von „aus" nicht zu unterscheiden – der Akzent ist auf Papier nur ein Grauton. */ html[data-eink] .lay-switch, html[data-eink] .rd-check--switch .rd-check__box { background: #dcdcdc; box-shadow: inset 0 0 0 1px #8a8a8a; } html[data-eink] .lay-switch::after, html[data-eink] .rd-check--switch .rd-check__box::after { background: #8a8a8a; } html[data-eink] .lay-switch.is-on, html[data-eink] .rd-check.rd-check--switch input:checked + .rd-check__box { background: #ffffff; box-shadow: inset 0 0 0 1px #000000; } html[data-eink] .lay-switch.is-on::after, html[data-eink] .rd-check.rd-check--switch input:checked + .rd-check__box::after { background: #000000; } /* ---------- Die Tableiste auf Papier ------------------------------------ Im Dunkeln trägt sie eine Unschärfe, die nach oben ausläuft, und einen dünnen Schleier. Beides gibt es auf E-ink nicht: die Unschärfe ist hier ausgeschaltet (sie wäre ein Neuzeichnen der halben Fläche), und ein 46-%-Schleier auf Papier ist nichts. Übrig blieb eine durchsichtige Leiste, durch die der Inhalt in die Beschriftung lief – „Triceps" stand mitten in „Stats". Auf Papier bekommt sie deshalb, was Papier kann: eine volle Fläche und eine harte Kante. Kein Verlauf, keine Andeutung – E-ink zeichnet Kanten am besten und Zwischentöne am schlechtesten. */ html[data-eink] .sh-tabs::before { inset: 0; background: var(--eink-paper); border-top: 1px solid #8a8a8a; -webkit-mask: none; mask: none; } /* Der Schatten der Meldung hängt seit dem Eckschnitt an filter statt an box-shadow – auf Papier fällt er weg, die Kante trägt dort selbst. */ html[data-eink] .nt-toast { filter: none; } /* Der Zeitstrich liefe auf Papier als Flackern ab – er bleibt weg. Das × trägt reines Schwarz statt des gedämpften Graus. */ html[data-eink] .nt-toast::after { display: none; } html[data-eink] .nt-toast__close { color: #000000; } /* ---------- Meditation auf Papier ---------------------------------------- Der Bereich hat drei Reiter bekommen (Today · Practices · Progress) und dabei eine Reihe neuer Knöpfe mit Sockel. Jeder Sockel braucht hier eine Fassung, sonst verschwindet er: im Dunkeln ist er ein helles Grau auf dunklem Grund, auf Papier wäre er ein helles Grau auf weißem Grund – also nichts. Dieselbe Kur wie bei den geteilten Knöpfen darüber: der Sockel wird schwarz, die handelnde Fläche wird schwarz mit weißer Schrift, der Glyph darauf verliert seine Umkehrung. */ html[data-eink] .mnt-btn, html[data-eink] .mnt-icon, html[data-eink] .mnt-chip, html[data-eink] .mnt-addrow, html[data-eink] .mnt-nudge__act, html[data-eink] .mnt-choice, html[data-eink] .mnt-act, html[data-eink] .mnt-ctrl, html[data-eink] .mnt-done__btn, html[data-eink] .mnt-edit-btn, html[data-eink] .gong-add, html[data-eink] .gong-row__del, html[data-eink] .brt-move__btn { --btn-lift: #000000; } /* Die handelnden: schwarze Fläche, weiße Schrift, Glyph nicht umgekehrt (er ist ohnehin schon hell auf Schwarz). */ html[data-eink] .mnt-btn--go, html[data-eink] .mnt-nudge__act, html[data-eink] .mnt-choice.is-on, html[data-eink] .mnt-act, html[data-eink] .mnt-ctrl--lg, html[data-eink] .mnt-done__btn, html[data-eink] .mnt-edit-btn, html[data-eink] .gong-add { --btn-face: #1c1c1c; --btn-face-hover: #000000; color: var(--eink-paper); } html[data-eink] .mnt-btn--go img, html[data-eink] .mnt-ctrl--lg img, html[data-eink] .mnt-edit-btn img, html[data-eink] .mnt-act img, html[data-eink] .gong-add img { filter: invert(1); } /* Konturen, die im Dunkeln aus dem Akzent kommen: auf Papier ist der ein Grauton und trüge die Linie eines Eingabefeldes nicht mehr. */ html[data-eink] .mnt-date, html[data-eink] .mnt-select select, html[data-eink] .mnt-addrow, html[data-eink] .gong-time { box-shadow: inset 0 0 0 1.5px #1c1c1c; } html[data-eink] .mnt-date:focus, html[data-eink] .mnt-select select:focus { box-shadow: inset 0 0 0 2.5px #000000; } html[data-eink] .unit, html[data-eink] .name-input, html[data-eink] .gong-select, html[data-eink] .brt-secs { box-shadow: inset 0 0 0 1.5px #1c1c1c; } html[data-eink] .unit:focus-within, html[data-eink] .name-input:focus, html[data-eink] .gong-select:focus, html[data-eink] .brt-secs:focus-within { box-shadow: inset 0 0 0 2.5px #000000; } html[data-eink] .mnt-practice, html[data-eink] .brt-preset { box-shadow: inset 2px 0 0 #1c1c1c; } /* Der aktive Reiter des Segmentschalters. Der Akzent trägt ihn auf Papier nicht – Schwarz schon. */ html[data-eink] .mnt-seg__item.is-on { background: #1c1c1c; color: var(--eink-paper); } /* Balken, Bänder und Leisten: gefüllte Flächen statt Akzentfarbe. */ html[data-eink] .mnt-week__bar, html[data-eink] .mnt-goal__bar { background: rgba(0, 0, 0, .14); } html[data-eink] .mnt-week__fill, html[data-eink] .mnt-goal__fill, html[data-eink] .mnt-bars__bar { background: #1c1c1c; } html[data-eink] .mnt-bars__col.is-now .mnt-bars__bar { background: #000000; } html[data-eink] .mnt-bars__goal { border-top-color: #000000; } /* Der Hinweis auf den gerissenen Tag lebt im Dunkeln von einer lila getönten Fläche. Auf Papier trägt ihn eine Kontur. */ html[data-eink] .mnt-nudge { background: none; box-shadow: inset 0 0 0 1.5px #1c1c1c; } /* Today und die laufende Sitzung (0.4 beta). Die Abendfläche der Einladung ist auf Papier eine Kontur; die Sechsecke der Woche und der Ring sind Schwarz auf Papier statt Lila auf Grau. */ html[data-eink] { --med-dusk: var(--eink-paper); --med-ring: #000000; --med-ring-track: rgba(0, 0, 0, .16); } /* Konturen brechen an den geschnittenen Ecken ab (clip-path) – auf Papier trägt deshalb die Fläche den Unterschied, nicht ein Rand. */ html[data-eink] .mnt-invite { background-color: var(--g-47); box-shadow: inset 0 2px 0 #1c1c1c; } html[data-eink] .mnt-invite__kicker, html[data-eink] .mnt-label { color: #1c1c1c; } html[data-eink] .mnt-glyph__outer { stroke: #1c1c1c; } html[data-eink] .mnt-glyph__inner { fill: rgba(0, 0, 0, .18); } html[data-eink] .mnt-tile { background: var(--g-47); } html[data-eink] .mnt-tile.is-on { background: #1c1c1c; color: var(--eink-paper); } html[data-eink] .mnt-tile.is-on .mnt-tile__meta, html[data-eink] .mnt-tile.is-on .mnt-tile__name { color: var(--eink-paper); } html[data-eink] .mnt-tile.is-on .mnt-tile__icon { filter: invert(1); } html[data-eink] .mnt-day__shape { fill: none; stroke: #1c1c1c; } html[data-eink] .mnt-day.is-done .mnt-day__shape { fill: #1c1c1c; } html[data-eink] .mnt-day.is-today .mnt-day__shape { stroke-width: 9; } html[data-eink] .mnt-path__hex polygon { fill: var(--eink-paper); stroke: #000000; } html[data-eink] .mnt-path__gong.is-past polygon { fill: #000000; } html[data-eink] .mnt-feel__opt.is-on { --btn-face: #1c1c1c; color: var(--eink-paper); } /* ========================================================= Calendar Auf Papier fällt jede Bereichsfarbe auf denselben Grauwert. Alles, was im Kalender „Farbe = Bereich" sagt, muss deshalb eine zweite Kodierung haben – sonst bleibt vom Dichtebalken ein grauer Strich und von den vier Tönungsstufen eine Fläche. ========================================================= */ /* Der Dichtebalken zählt statt zu färben: eine helle Fuge zwischen den Segmenten macht ihre Zahl ablesbar, und die ist die Aussage – „an diesem Tag lief dreierlei". */ html[data-eink] .cal-cell__bar { gap: 1.5px; background: var(--eink-paper); } html[data-eink] .cal-cell__bar i { background: #1c1c1c !important; } html[data-eink] .cal-cell__rest { background: rgba(0, 0, 0, .35) !important; } /* Vier Stufen als vier Graustufen – dieselbe Ordnung, ohne Ton. */ html[data-eink] .cal-cell[data-level="1"] { background: rgba(0, 0, 0, .07); } html[data-eink] .cal-cell[data-level="2"] { background: rgba(0, 0, 0, .16); } html[data-eink] .cal-cell[data-level="3"] { background: rgba(0, 0, 0, .27); } html[data-eink] .cal-cell[data-level="4"] { background: rgba(0, 0, 0, .40); } html[data-eink] .cal-cell.is-today { border-color: #000000; } html[data-eink] .cal-cell.is-selected { box-shadow: 0 0 0 1.5px #000000; } html[data-eink] .cal-cell__open { border-color: #1c1c1c; } /* Farbige Schienen, Zeichen und Punkte werden Schwarz. Sie sagen dann nicht mehr, WELCHER Bereich – das steht als Wort daneben. */ html[data-eink] .cal-sec__dot, html[data-eink] .cal-ribbon__dot, html[data-eink] .cal-chip__dot, html[data-eink] .cal-bal__fill { background: #1c1c1c; } html[data-eink] .cal-item--rail, html[data-eink] .cal-plan__row, html[data-eink] .cal-goal, html[data-eink] .cal-mention { border-inline-start-color: #1c1c1c; } html[data-eink] .cal-ribbon { border-inline-start-color: #000000; } html[data-eink] .cal-sec { border-top-color: #1c1c1c; } html[data-eink] .cal-chip { border-top-color: #1c1c1c; } /* Der aktive Teil des Segmentschalters und die gewählte Marke: der Akzent trägt sie auf Papier nicht, Schwarz schon. */ html[data-eink] .cal-seg__btn.is-on, html[data-eink] .cal-jump__cell.is-on, html[data-eink] .cal-hexmark, html[data-eink] .cal-chip__live, html[data-eink] .cal-tl__chip { background: #1c1c1c; color: var(--eink-paper); } html[data-eink] .cal-opt.is-on .cal-opt__box { background: #1c1c1c; border-color: #1c1c1c; } /* Gemessen gegen nachgetragen: im Dunkeln trennt sie die Deckkraft derselben Farbe, auf Papier die Fläche gegen die Kontur. */ html[data-eink] .cal-tl__span { background: none; box-shadow: inset 0 0 0 1px #1c1c1c; opacity: 1; } html[data-eink] .cal-tl__span.is-measured { background: #1c1c1c; } /* Die Heatmap des Jahres – fünf Graustufen statt fünf Tönungen. */ html[data-eink] .cal-year__cell, html[data-eink] .cal-year__key i { background: rgba(0, 0, 0, .06); } html[data-eink] .cal-year__cell[data-level="1"], html[data-eink] .cal-year__key i[data-level="1"] { background: rgba(0, 0, 0, .20); } html[data-eink] .cal-year__cell[data-level="2"], html[data-eink] .cal-year__key i[data-level="2"] { background: rgba(0, 0, 0, .40); } html[data-eink] .cal-year__cell[data-level="3"], html[data-eink] .cal-year__key i[data-level="3"] { background: rgba(0, 0, 0, .62); } html[data-eink] .cal-year__cell[data-level="4"], html[data-eink] .cal-year__key i[data-level="4"] { background: #1c1c1c; } html[data-eink] .cal-year__cell.is-void { background: none; } /* Der Leseziel-Ring lebt von einem Farbverlauf. Auf Papier bleibt die Fläche, aber in Schwarz gegen ein helles Grau. */ html[data-eink] .cal-goal__ring { background: linear-gradient(to top, #1c1c1c 0 calc(var(--ratio) * 100%), rgba(0, 0, 0, .14) calc(var(--ratio) * 100%) 100%); } /* ---------- Home ------------------------------------------------------------ Der Schein in der Ecke der Now-Karte ist ein Verlauf – auf Papier ein Streifenfeld. Die Karte wird eine ruhige Fläche; der Ton des Bereichs steckt ohnehin im Zeichen und im Knopf. Die Kachel- Knöpfe bekommen einen vollen schwarzen Sockel wie jeder Knopf hier. */ html[data-eink] .hb-now { background: var(--surface); } html[data-eink] .hb-tile__act::before, html[data-eink] .sh-tool::before { background: #000000; } /* Der getönte Kachelknopf: weiße Fläche, schwarze Kante, Zeichen schwarz. */ html[data-eink] .hb-tile__act { color: #000000; } html[data-eink] .hb-tile__act::after, html[data-eink] .hb-tile__act:hover::after { background: #ffffff; box-shadow: inset 0 0 0 1.5px #000000; } html[data-eink] .hb-note__card { background: var(--surface); } /* ---------- Zurück im Kopf eines Fensters -------------------------------------- Seine Fläche ist durchsichtig (die stille Stufe), der Sockel auf Papier schwarz – der Sockel schien durch, und der schwarze Pfeil lag auf einem schwarzen Quadrat. Auf Papier: weiße Fläche, schwarze Kante. */ html[data-eink] button.pop__icon { --btn-under: #ffffff; --btn-edge: #000000; } html[data-eink] button.pop__icon:hover::after, html[data-eink] button.pop__icon:focus-visible::after { background: #ffffff; } /* ---------- Tagesziele (app/nutrition/targets.js) ------------------------------- Die Rechnung und die Kette tragen ihren Ton in color-mix – auf Papier eine graue Fläche mit schwarzer Kante statt eines Schimmers. */ html[data-eink] .nu-eq__t.is-focus { background: #ffffff; box-shadow: inset 0 0 0 1.5px #000000; } html[data-eink] .nu-chain__row.is-due { background: #ffffff; box-shadow: none; } html[data-eink] .nu-chain__item:not(:last-child)::after { background: #000000; } html[data-eink] .nu-unit__b.is-on { background: #1c1c1c; color: #ffffff; } html[data-eink] .nu-step__n { background: #000000; color: #ffffff; } /* Das „i" und seine Erklärung (app/infotip.js): auf Papier kein Schatten, sondern eine schwarze Kante – außen schwarz, innen das Papier, beide mit demselben Schnitt. Das „i" selbst: schwarzer Sockel. */ html[data-eink] .la-tip { filter: none; padding: 2px; background: #000000; clip-path: var(--cut-clip); } html[data-eink] .la-tip__panel { --cut: 11px; background: var(--eink-paper); } html[data-eink] .la-i__mark { color: #000000; } html[data-eink] .la-i__mark::before { background: #000000; } html[data-eink] .la-i__mark::after { background: var(--eink-paper); box-shadow: inset 0 0 0 1.5px #000000; } /* Abgleichen: der Punkt schwarz, ohne Drehen (app/home/hub.js) */ html[data-eink] .sh-sync__dot, html[data-eink] .sh-tool--sync[data-state="error"] .sh-sync__dot { background: #000000; box-shadow: 0 0 0 2px #ffffff; } html[data-eink] .sh-tool--sync[data-state="syncing"] .sh-sync__icon { animation: none; opacity: .55; }