/* ============================================================ Simple Pomodoro — styles.css Monochrome, serif + monospace, no shadows, no radii. ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { color-scheme: light; --paper: #FFFFFF; --ink: #000000; --link: #0000EE; } /* Dark mode. Follows the OS by default; an explicit choice on always wins. Only these three values change — every rule below is already written against them. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #111111; --ink: #E8E8E8; --link: #9AB4FF; } } :root[data-theme="dark"] { color-scheme: dark; --paper: #111111; --ink: #E8E8E8; --link: #9AB4FF; } html { background: var(--paper); } body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; color: var(--ink); background: var(--paper); font-family: "Courier New", Courier, monospace; font-size: 14px; line-height: 1.5; padding: 40px 16px 24px; } main { width: 100%; max-width: 420px; text-align: center; flex: 1; } h1 { font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: 28px; letter-spacing: 0.5px; margin-bottom: 14px; } /* --- links & link-styled buttons --- */ a, .linklike { color: var(--link); text-decoration: underline; background: none; border: none; font: inherit; cursor: pointer; padding: 0; } a:visited { color: var(--link); } a:focus-visible, .linklike:focus-visible, input:focus-visible, summary:focus-visible { outline: 1px dotted var(--ink); outline-offset: 2px; } /* --- mode tabs --- */ .modes { margin-bottom: 20px; } .mode-tab { margin: 0 9px; } .mode-tab.active { color: var(--ink); text-decoration: none; font-weight: bold; cursor: default; } /* --- dial --- */ .dial-wrap { margin: 0 auto 6px; } #dial { width: min(300px, 78vw); height: auto; display: block; margin: 0 auto; } #dial-ticks line { stroke: var(--ink); stroke-width: 1; } #dial-ticks line.major { stroke-width: 2; } #dial-wedge { fill: var(--ink); } #dial-rim { fill: none; stroke: var(--ink); stroke-width: 2; } #dial-hub { fill: var(--paper); stroke: var(--ink); stroke-width: 2; } #dial-time { font-family: "Courier New", Courier, monospace; font-size: 25px; font-weight: bold; text-anchor: middle; dominant-baseline: central; fill: var(--ink); font-variant-numeric: tabular-nums; } /* --- cycle dots --- */ #cycle { font-size: 15px; letter-spacing: 5px; min-height: 1.5em; margin-bottom: 6px; } /* --- controls --- */ .controls { margin-bottom: 26px; } .controls .linklike { margin: 0 9px; } /* --- collapsible sections --- */ details { text-align: left; border-top: 1px solid var(--ink); padding: 8px 0; } details:last-of-type { border-bottom: 1px solid var(--ink); } summary { cursor: pointer; font-size: 13px; user-select: none; } details[open] summary { margin-bottom: 8px; } table { border-collapse: collapse; } td { padding: 3px 12px 3px 0; text-align: left; } input[type="number"] { font: inherit; width: 58px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: 1px 4px; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 110px; height: 12px; background: transparent; vertical-align: middle; } input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--ink); } input[type="range"]::-moz-range-track { height: 1px; background: var(--ink); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 12px; background: var(--ink); margin-top: -5.5px; border: none; } input[type="range"]::-moz-range-thumb { width: 8px; height: 12px; background: var(--ink); border: none; border-radius: 0; } #log { font-size: 12px; } #log li { list-style: none; } #log li::before { content: "* "; } .keys { font-size: 12px; } kbd { font-family: inherit; border: 1px solid var(--ink); padding: 0 3px; font-size: 11px; } /* --- footer credit --- */ footer { width: 100%; text-align: center; margin-top: 28px; } .credit { font-size: 11px; } /* --- completion flash --- */ body.flash, body.flash html { background: var(--ink); } body.flash { color: var(--paper); } body.flash #dial-ticks line, body.flash #dial-rim, body.flash #dial-hub { stroke: var(--paper); } body.flash #dial-wedge { fill: var(--paper); } body.flash #dial-hub { fill: var(--ink); } body.flash #dial-time { fill: var(--paper); } body.flash h1, body.flash .mode-tab.active { color: var(--paper); } body.flash details { border-color: var(--paper); } @media (prefers-reduced-motion: reduce) { body.flash { background: var(--paper); color: var(--ink); } body.flash #dial-ticks line, body.flash #dial-rim, body.flash #dial-hub { stroke: var(--ink); } body.flash #dial-wedge { fill: var(--ink); } body.flash #dial-hub { fill: var(--paper); } body.flash #dial-time { fill: var(--ink); } body.flash h1, body.flash .mode-tab.active { color: var(--ink); } body.flash details { border-color: var(--ink); } } @media (max-width: 380px) { .mode-tab { margin: 0 5px; } .controls .linklike { margin: 0 5px; } }