style.css (1235 bytes)
1 :root { color-scheme: light dark; --accent: #005577; --muted: #555; --line: #ddd; } 2 @media (prefers-color-scheme: dark) { :root { --accent: #4fb3d9; --muted: #aaa; --line: #444; } } 3 4 body { font: 14px/1.4 system-ui, sans-serif; margin: 0; } 5 a { color: var(--accent); } 6 .note { color: var(--muted); } 7 input { font: inherit; box-sizing: border-box; width: 100%; padding: 6px; margin: 2px 0 8px; } 8 button { font: inherit; padding: 4px 12px; } 9 label { display: block; } 10 11 .popup { width: 380px; padding: 8px; } 12 .popup #list { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; } 13 .popup #list a { display: block; padding: 6px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; } 14 .popup #list a:hover, .popup #list a:focus { background: color-mix(in srgb, var(--accent) 15%, transparent); } 15 .popup #list small { color: var(--muted); } 16 .popup footer { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } 17 .popup nav { font-size: 12px; } 18 19 .options { max-width: 36em; margin: 2em auto; padding: 0 1em; font-size: 15px; } 20 .options h1 { color: var(--accent); } 21 .options section { margin: 1.5em 0; } 22 .options footer { margin-top: 3em; font-size: 13px; color: var(--muted); }