/* eink.css — the light, flat, monochrome skin. * * E-ink is not a dim LCD; it is a different medium with three hard rules: * 1. Light background, dark text. A dark theme means the panel drives almost every * particle to black on every repaint — slower, ghostier, and it wastes the one * thing e-ink is good at. * 2. No animation, no transitions, no shadows, no blur. Each is a full-screen refresh * that reads as a strobe. * 3. No meaning carried by colour alone. The device is monochrome, so anything that * distinguished Canvas from Coursera by hue has to say so in words or weight. * * Applied by adding class="eink" to (shell.js: auto-detected, user-overridable). * Loaded LAST so it beats each page's own :root; html.eink also outranks :root. */ /* ---------------------------------------------------------------- tokens */ html.eink{ --page:#FFFFFF; --card:#FFFFFF; --card-2:#F4F4F4; --ink:#000000; --ink-2:#141414; --ink-3:#4A4A4A; --hairline:#9A9A9A; --hairline-2:#5A5A5A; --brand:#000000; --s-good:#000000; --s-warn:#000000; --s-crit:#000000; --canvas:#000000; --cour:#000000; /* graph.html uses a different token set */ --bg:#FFFFFF; --panel:#FFFFFF; --line:#9A9A9A; --accent:#000000; --dim:#4A4A4A; /* e-ink renders thin type badly — start a notch larger */ --fs-hero:48px; --fs-xl:27px; --fs-lg:20px; --fs-md:17px; --fs-sm:15px; --fs-xs:13px; background:#fff; } /* ---------------------------------------------------------------- kill motion + depth */ html.eink *, html.eink *::before, html.eink *::after{ transition:none !important; animation:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; text-shadow:none !important; scroll-behavior:auto !important; } html.eink body{ background:#fff !important; color:#000 !important; -webkit-font-smoothing:antialiased; } html.eink img{ filter:grayscale(1) contrast(1.15); } /* ---------------------------------------------------------------- shell */ html.eink #faren-shell{ background:#fff !important; border-bottom:2px solid #000; } html.eink #faren-shell .fs-name{ color:#000; } html.eink #faren-shell .fs-brand svg path{ stroke:#000 !important; } html.eink #faren-shell .fs-brand svg circle{ fill:#000 !important; } html.eink #faren-shell nav.fs-tabs a{ color:#3a3a3a; border:1px solid transparent; } html.eink #faren-shell nav.fs-tabs a.cur{ background:#000 !important; color:#fff !important; border-color:#000; } html.eink #fs-zoom button, html.eink #shell-right button, html.eink #shell-right input{ border-color:#5A5A5A !important; color:#000 !important; background:#fff !important; } /* ---------------------------------------------------------------- coach */ html.eink .step{ background:#fff !important; border:1px solid #9A9A9A !important; } html.eink .step.done{ opacity:1; color:#6a6a6a; } html.eink .step.done .t{ color:#6a6a6a; } /* Tap targets: a stylus tip is precise, a finger on a 10" panel is not. */ html.eink .box{ width:34px; height:34px; border:2px solid #000 !important; border-radius:6px; } html.eink .step.done .box{ background:#000 !important; border-color:#000 !important; color:#fff !important; } html.eink .kind{ border:1px solid #000 !important; color:#000 !important; } html.eink .kind.submit, html.eink .kind.quiz, html.eink .kind.team, html.eink .kind.admin{ background:#000 !important; color:#fff !important; } /* Urgency was colour-coded; on a mono screen it has to be weight and a rule. */ html.eink .due{ background:#fff !important; color:#000 !important; border:1px solid #000; } html.eink .due.d1{ background:#000 !important; color:#fff !important; font-weight:700; } html.eink .due.d7{ border-width:2px; font-weight:700; } html.eink .flag{ background:#000 !important; color:#fff !important; border-color:#000 !important; } html.eink .thead .dot{ background:#000 !important; } html.eink .thead.cour .dot{ background:#fff !important; border:2px solid #000; } html.eink .thead .lbl{ color:#000 !important; font-weight:700; } html.eink .duenext{ background:#fff !important; border:2px solid #000 !important; } html.eink .dn-h{ color:#000 !important; font-weight:700; } html.eink .tally .ok{ color:#000 !important; } html.eink .tally .warnq{ color:#000 !important; font-weight:700; text-decoration:underline; } html.eink .lockbar{ background:#fff !important; border:1px dashed #000 !important; color:#000 !important; } html.eink .mchip{ background:#fff !important; border:1px solid #9A9A9A !important; } html.eink .mchip.cur{ background:#000 !important; border-color:#000 !important; } html.eink .mchip.cur .n, html.eink .mchip.cur .s{ color:#fff !important; } html.eink .ctab.cur{ background:#000 !important; color:#fff !important; border-color:#000 !important; } html.eink .bar{ background:#e2e2e2 !important; } html.eink .bar i{ background:#000 !important; } html.eink #capdock{ background:#fff !important; border-top:2px solid #000 !important; } html.eink #cap{ background:#fff !important; border:1px solid #5A5A5A !important; color:#000 !important; } html.eink #capbtn{ background:#000 !important; color:#fff !important; } html.eink .go{ color:#000 !important; text-decoration:underline; } html.eink .xbody, html.eink .xbar{ color:#000 !important; } html.eink .xpdf{ border:1px solid #000 !important; } /* ---------------------------------------------------------------- wiki */ html.eink .dlabel:hover, html.eink .fitem:hover, html.eink .rowitem:hover{ background:#EDEDED !important; } html.eink .dlabel.cur, html.eink .fitem.cur{ background:#000 !important; color:#fff !important; } html.eink .seclabel{ color:#000 !important; border-bottom:1px solid #000 !important; font-weight:700; } html.eink .ri-sub{ color:#4A4A4A !important; } html.eink #meta, html.eink #crumb{ color:#000 !important; } html.eink #doc code, html.eink #doc pre, html.eink .xbody code, html.eink .xbody pre{ background:#F0F0F0 !important; border:1px solid #9A9A9A !important; color:#000 !important; } html.eink #doc a, html.eink .xbody a{ color:#000 !important; text-decoration:underline; } html.eink #doc h3, html.eink .xbody h3{ color:#000 !important; } /* ---------------------------------------------------------------- graph The force-directed canvas repaints continuously, which e-ink physically cannot do. Rather than let it thrash the screen, say so and offer the way out. */ html.eink #graph{ display:none !important; } html.eink #legend, html.eink #hint, html.eink #preview{ display:none !important; } html.eink #eink-graph-note{ display:block !important; } #eink-graph-note{ display:none; } html.eink #reader{ position:static !important; width:auto !important; height:auto !important; max-width:820px; margin:0 auto; border:none !important; resize:none !important; background:#fff !important; } /* ---------------------------------------------------------------- diagnostics */ html.eink #faren-diag{ background:#fff !important; border:2px solid #000 !important; color:#000 !important; } html.eink #faren-diag div{ color:#000 !important; } /* ---------------------------------------------------------------- theme toggle */ #fs-eink{ font-family:ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:.06em; background:none; border:1px solid rgba(255,255,255,.16); color:#7A8494; padding:6px 9px; border-radius:7px; cursor:pointer; white-space:nowrap; flex:none; } html.eink #fs-eink{ border-color:#000; color:#000; background:#fff; } @media(max-width:640px){ #fs-eink{ display:none; } }