/* ============================================================================ Unit Calculator — stylesheet Sections (search for the banners to jump around): 1. Theme tokens (colors) 2. Global reset & page background 3. Calculator shell (outer frame) & main column 4. Top bar (title) 5. History list (past calculations) 6. Side panel (slide-out tool panel) 7. Side rail (the tab buttons on the right) 8. Panel content (function list & format options) 9. Input card (preview, text input, syntax colors) 10. Responsive / mobile ============================================================================ */ /* ---- 1. Theme tokens (color palettes) ------------------------------------ */ /* A palette only needs FIVE values: the panel (surface) color and the four syntax-highlight colors. Everything else — page background, recessed surfaces, borders, text and muted text — is derived automatically from --panel below in the shared `:root` block, so each palette stays tiny. The active palette is chosen by the `data-theme` attribute on (set in index.html and persisted to a cookie by app.js). TO ADD A NEW PALETTE: 1. Copy one of the small blocks below and rename the data-theme value. 2. Set --panel and the four --syn-* hex codes. That's it. 3. Add a matching { value, label } entry to THEMES in app.js so it shows up in the Color Scheme tab. The `value` must equal the data-theme name. Per-palette inputs: --panel calculator frame / panel surface (the button background) --syn-number syntax: numbers --syn-unit syntax: units --syn-op syntax: operators --syn-bracket syntax: brackets */ :root { color-scheme: light dark; /* Static brand colors — identical across every palette. */ --accent: #d99a00; /* headings & highlights */ --accent-2: #5aa832; /* result values (green) */ --danger: #e0524d; /* error text */ --ok: #5aa832; /* inline color */ /* Everything below is derived from --panel so palettes only supply --panel. --text flips light/dark automatically by inverting the panel lightness. */ --text: oklch(from var(--panel) clamp(0.12, 1 - l, 0.95) min(c, 0.03) h); --muted: color-mix(in srgb, var(--text) 52%, var(--panel)); --bg-outer: color-mix(in srgb, var(--panel), #000 60%); --panel-2: color-mix(in srgb, var(--panel), #000 25%); --input-fill: color-mix(in srgb, var(--panel), #000 16%); --line: color-mix(in srgb, var(--panel) 82%, var(--text)); /* Default palette (Terminal) — overridden by the [data-theme] blocks below. */ --panel: #3a1030; --syn-number: #ffffff; --syn-unit: #73c936; --syn-op: #fce94f; --syn-bracket: #d7d6d8; } /* Solarized Dark */ :root[data-theme="solarized-dark"] { --panel: #073642; --syn-number: #839496; --syn-unit: #4c6500; --syn-op: #b58900; --syn-bracket: #a9aab3; } /* Solarized Light */ :root[data-theme="solarized-light"] { --panel: #fdf6e3; --syn-number: #657b83; --syn-unit: #859900; --syn-op: #b58900; --syn-bracket: #002b36; } /* Standard (clean light) */ :root[data-theme="standard"] { --panel: #ffffff; --syn-number: #282828; --syn-unit: #ef2928; --syn-op: #969696; --syn-bracket: #ffa05a; } /* Terminal (default) */ :root[data-theme="terminal"] { --panel: #300a24; --syn-number: #ffffff; --syn-unit: #4a9a07; --syn-op: #c4a000; --syn-bracket: #ad7fa8; } /* Tomorrow (light) */ :root[data-theme="tomorrow"] { --panel: #ffffff; --syn-number: #f5871f; --syn-unit: #c82829; --syn-op: #63999f; --syn-bracket: #4d4d4c; } /* Tomorrow Night (dark) */ :root[data-theme="tomorrow-night"] { --panel: #1d1f21; --syn-number: #de9356; --syn-unit: #cc6666; --syn-op: #69beb7; --syn-bracket: #c5c8c6; } /* Tomorrow Night Bright (dark) */ :root[data-theme="tomorrow-night-bright"] { --panel: #000000; --syn-number: #e78c45; --syn-unit: #b64e53; --syn-op: #70c0b1; --syn-bracket: #eaeaea; } /* ---- 2. Global reset & page background ------------------------------------ */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { display: grid; place-items: center; padding: 28px; background: var(--bg-outer); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; } /* ---- 3. Calculator shell (outer frame) & main column ---------------------- */ /* The outer frame. */ .calculator-shell { position: relative; width: min(1300px, 100%); height: min(900px, calc(100vh - 56px)); display: flex; overflow: hidden; background: var(--panel); } /* The left column holding the top bar, history list and input card */ .calculator-main { flex: 1 1 auto; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; } /* ---- 4. Top bar (title) --------------------------------------------------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px 18px; border-bottom: 1px solid var(--line); background: var(--panel); } h1 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.8rem); } h1 span { color: var(--accent); } /* ---- 5. History list (past calculations) ---------------------------------- */ .history-panel { min-height: 0; overflow-y: auto; padding: 10px 10px; background: var(--panel); } .empty-state { color: var(--muted); padding: 10px; background: rgba(0, 0, 0, 0.18); } /* One history row: expression | "=" | result, in three columns. */ .entry { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: baseline; padding: 9px 0; font-size: 1.15rem; border-bottom: 1px solid var(--line); } /* The entered expression (left column). */ .entry .expr { color: var(--text); overflow-wrap: anywhere; } /* The "=" separator (middle column). */ .entry .equals { color: var(--accent); } /* The computed result (right column). */ .entry .result { color: var(--accent-2); overflow-wrap: anywhere; } /* Small badge marking which angle unit a trig calculation used. */ .entry .result .angle-badge { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; font-size: 0.62em; font-weight: 600; letter-spacing: 0.04em; vertical-align: middle; opacity: 0.7; } /* Error styling: a failed calculation shows its message/sign in red. */ .entry.error .result { color: var(--danger); } .entry.error .equals { color: var(--danger); } /* A definition entry ("A = 5 meter" / "f(x) = x * y"). The right side holds the definition body rather than a computed value, so tone it like an expression. */ .entry-def .result { color: var(--text); } /* ---- 6. Side panel (slide-out tool panel) --------------------------------- */ /* The panel that appears between the main column and the rail when a tab is opened (Functions list, Format options, etc.). Change its width here. */ .side-panel { flex: 0 0 300px; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--panel-2); } .side-panel[hidden] { display: none; } .side-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 12px; border-bottom: 1px solid var(--line); } .side-panel-header h2 { margin: 0; font-size: 1rem; letter-spacing: -0.02em; } .side-panel-close { border: 0; background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1; padding: 0 6px; border-radius: 0; cursor: pointer; } .side-panel-close:hover { color: var(--text); } .side-panel-body { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; } /* Placeholder text for tabs that aren't built yet ("… coming soon"). */ .panel-placeholder { color: var(--muted); padding: 22px 18px; font-size: 0.9rem; } .panel-search { margin: 12px 18px 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; background: var(--input-fill); color: var(--text); font: inherit; font-size: 0.9rem; outline: none; } .panel-search:focus { border-color: var(--accent); } /* ---- 7. Side rail (the tab buttons on the right) -------------------------- */ .side-rail { flex: 0 0 90px; display: flex; flex-direction: column; gap: 4px; padding: 8px 5px; border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto; } .rail-btn { display: flex; align-items: center; justify-content: center; border: 1px solid transparent; padding: 7px 4px; color: var(--muted); background: transparent; font: inherit; text-align: center; text-decoration: none; cursor: pointer; } /* Push the action buttons (Clear History, Help) to the bottom of the rail, visually separating them from the tab buttons above. */ .rail-action { margin-top: auto; } .rail-btn:hover { background: var(--panel-2); } /* Highlight for the currently-open tab. */ .rail-btn[aria-pressed="true"] { background: var(--panel-2); } .rail-label { font-size: 0.82rem; letter-spacing: 0.02em; } /* ---- 8. Panel content ---------------------------------------------------- */ .panel-list { list-style: none; margin: 0; padding: 4px 6px 8px; overflow-y: auto; min-height: 0; } .panel-item { padding: 2px 3px; border: 1px solid transparent; border-radius: 0; cursor: pointer; } .panel-item:hover, .panel-item:focus { background: var(--panel); outline: none; } .item-title { color: var(--accent); font-size: 0.95rem; } .item-description { color: var(--muted); font-size: 0.8rem; margin-top: 2px; } /* Grouped panel pages (Variables, Functions): one scroll area holding several titled sections. */ .panel-groups { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .panel-groups .panel-list { overflow: visible; } .panel-section-title { padding: 10px 18px 4px; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; } .panel-empty { padding: 6px 18px 10px; color: var(--muted); font-size: 0.82rem; } /* User-defined rows pair a clickable main area with a delete button. */ .item-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .item-user .item-main { flex: 1 1 auto; min-width: 0; } .item-delete { flex: 0 0 auto; border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-size: 1rem; line-height: 1; padding: 2px 7px; cursor: pointer; } .item-delete:hover { color: var(--text); border-color: var(--accent); } .constant-label { font-size: 0.95rem; } .constant-name { color: var(--accent); } /* Reveal the constant's value in place of its name while hovering/focusing. */ .constant-value { display: none; color: var(--muted); } .panel-item:hover .constant-name, .panel-item:focus .constant-name { display: none; } .panel-item:hover .constant-value, .panel-item:focus .constant-value { display: inline; } .option-group { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; overflow-y: auto; } .option-item { text-align: left; border: 1px solid var(--line); border-radius: 0; padding: 12px 14px; background: transparent; color: var(--text); font: inherit; cursor: pointer; } .option-item:hover { background: var(--panel); } .option-item.selected { border-color: var(--accent); background: var(--panel); } .option-label { font-size: 0.95rem; } .option-item.selected .option-label { color: var(--accent); } .option-description { color: var(--muted); font-size: 0.8rem; margin-top: 3px; } .digits-field { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 14px; } .digits-input { border: 1px solid var(--line); border-radius: 0; padding: 10px 12px; background: transparent; color: var(--text); font: inherit; } .digits-input:focus { outline: none; border-color: var(--accent); } /* Inline code snippets. */ code { color: var(--ok); } /* ---- 9. Input card (preview, text input, syntax colors) ------------------- */ .input-card { padding: 8px 10px 10px; background: var(--panel-2); } /* Positioning context so the highlight overlay can sit on top of the input. */ .input-wrap { position: relative; } /* Shared sizing for the real and the colored highlight overlay. They must match exactly so the highlighted text lines up with what you type. */ #expression-input, .input-highlight { width: 100%; border: 1px solid var(--line); border-radius: 0; padding: 10px; font: inherit; font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.4; letter-spacing: 0; white-space: pre; overflow-x: hidden; } /* The colored, syntax-highlighted copy of the text, drawn behind the caret. */ .input-highlight { position: absolute; inset: 0; border-color: transparent; background: var(--input-fill); color: var(--text); pointer-events: none; user-select: none; } /* The actual input: its own text is transparent so only the highlight overlay (and the caret) is visible. */ #expression-input { position: relative; outline: none; background: transparent; color: transparent; caret-color: var(--text); -webkit-text-fill-color: transparent; } #expression-input::placeholder { color: var(--muted); -webkit-text-fill-color: var(--muted); } /* Syntax-highlight token colors (applied to spans in the highlight overlay and in history rows). Edit the matching --syn-* variables in section 1. */ .t-num { color: var(--syn-number); } .t-unit { color: var(--syn-unit); } .t-op { color: var(--syn-op); } .t-bracket { color: var(--syn-bracket); } .preview { min-height: 1.4rem; margin-bottom: 10px; color: var(--text); font-size: 0.95rem; } .preview.placeholder { color: var(--muted); } .preview.error { color: var(--danger); } /* ---- 10. Responsive / mobile ---------------------------------------------- */ /* On narrow screens: stack the top bar, collapse history rows to one column, and float the side panel as an overlay instead of shrinking the main column. (The 90px right offset must match the rail width above.) */ @media (max-width: 720px) { body { padding: 12px; } .calculator-shell { height: calc(100vh - 56px); border-radius: 0; } .topbar { align-items: flex-start; flex-direction: column; gap: 12px; } .entry { grid-template-columns: 1fr; gap: 4px; } .entry .equals { display: none; } .side-panel { position: absolute; inset: 0 90px 0 auto; width: min(300px, 70%); z-index: 5; } }