/* Color tokens. Two-tier: Radix gray primitives + semantic aliases. Dark mode (future) swaps the --gray-* values; semantic tokens follow. */ :root { /* Tell the UA this site supports both modes; affects scrollbars and default form-control styling so they don't look out of place. */ color-scheme: light dark; /* Radix gray (light) */ --gray-1: #fcfcfc; --gray-2: #f9f9f9; --gray-3: #f0f0f0; --gray-4: #e8e8e8; --gray-5: #e0e0e0; --gray-6: #d9d9d9; --gray-7: #cecece; --gray-8: #bbbbbb; --gray-9: #8d8d8d; --gray-10: #838383; --gray-11: #646464; --gray-12: #202020; /* Surfaces */ --color-bg-primary: #fff; --color-bg-secondary: var(--gray-2); /* table header, calendar tooltip th */ --color-bg-hover: var(--gray-3); /* button / menu hover */ --color-bg-stripe: var(--gray-2); /* table row alternation */ --color-bg-empty-cell: var(--gray-3); /* empty calendar cell */ /* Text */ --color-text-primary: var(--gray-12); --color-text-secondary: var(--gray-11); /* labels, captions, bar chart labels */ --color-text-tertiary: var(--gray-10); /* empty-state, separator */ --color-text-chart: var(--gray-9); /* D3 chart annotations */ --color-text-light: #fff; /* text on dark/colored bg (absolute) */ --color-text-dark: #000; /* text on bright/colored bg (absolute) */ --color-text-emphasis: #000; /* one shade past primary; flips with mode */ --color-text-error: #E63946; /* Borders */ --color-border-subtle: var(--gray-3); /* faint dividers */ --color-border-standard: var(--gray-5); /* most borders */ --color-border-strong: var(--gray-7); /* section dividers, button group outlines */ --color-border-month-divider: var(--color-bg-primary); /* calendar month separator */ /* Accent / actions */ --color-accent: #4CAF50; --color-accent-hover: #45a049; --color-accent-selected: #2e7d32; --color-accent-focus-ring: rgba(76, 175, 80, 0.2); --color-destructive: #c0392b; --color-highlight: #ffcc00; /* play-square hover */ /* Part colors (instruments) */ --color-part-v1: #1ceaf9; --color-part-v2: #01c472; --color-part-va: #007961; --color-part-fallback: var(--gray-9); --color-part-v1-text: var(--color-text-dark); /* dark text on bright cyan */ --color-part-v2-text: var(--color-text-light); --color-part-va-text: var(--color-text-light); /* Shadows */ --color-shadow-subtle: rgba(0, 0, 0, 0.12); --color-shadow-light: rgba(0, 0, 0, 0.1); } /* Dark mode. Swap the Radix gray scale to grayDark; semantic tokens flow through automatically (e.g. --color-text-primary still resolves to var(--gray-12), which now points at near-white #eee instead of #202020). Only tokens whose mapping doesn't naturally invert get an explicit override. Applied via two parallel paths: - `@media (prefers-color-scheme: dark) :root:not([data-theme])` — system dark mode, when the user hasn't manually overridden. - `:root[data-theme="dark"]` — explicit user choice (light is the base :root, so it needs no override block). The blocks duplicate; CSS has no syntactic way to share a block between an @media-scoped selector and an attribute-scoped selector. Keep them in sync. The theme manager (src/themeManager.js) sets/removes data-theme on ; components that bake colors at render (calendarComponent) re-render via subscribe(); see CLAUDE.md for the contract. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { /* Radix grayDark */ --gray-1: #111111; --gray-2: #191919; --gray-3: #222222; --gray-4: #2a2a2a; --gray-5: #313131; --gray-6: #3a3a3a; --gray-7: #484848; --gray-8: #606060; --gray-9: #6e6e6e; --gray-10: #7b7b7b; --gray-11: #b4b4b4; --gray-12: #eeeeee; color-scheme: dark; --color-bg-primary: var(--gray-1); --color-text-emphasis: #fff; --color-shadow-subtle: rgba(0, 0, 0, 0.5); --color-shadow-light: rgba(0, 0, 0, 0.4); } :root:not([data-theme]) #tabs button { background-color: transparent; } } :root[data-theme="dark"] { --gray-1: #111111; --gray-2: #191919; --gray-3: #222222; --gray-4: #2a2a2a; --gray-5: #313131; --gray-6: #3a3a3a; --gray-7: #484848; --gray-8: #606060; --gray-9: #6e6e6e; --gray-10: #7b7b7b; --gray-11: #b4b4b4; --gray-12: #eeeeee; color-scheme: dark; --color-bg-primary: var(--gray-1); --color-text-emphasis: #fff; --color-shadow-subtle: rgba(0, 0, 0, 0.5); --color-shadow-light: rgba(0, 0, 0, 0.4); } :root[data-theme="dark"] #tabs button { background-color: transparent; } body, html { margin: 0; padding: 0; height: 100%; width: 100%; font-size: 16px; /* Adjust base font-size if needed */ color: var(--color-text-primary); background-color: var(--color-bg-primary); } h1 { margin-top: 5px; } /* Container for the hamburger menu */ #menu { position: absolute; padding: 10px; z-index: 1000; } /* Big tap target around the icon (~44×44) without enlarging the icon. Filled rounded backdrop scopes the icon as an obvious button — important on mobile where the icon sits in the same left column as the "All" date-range button and could otherwise be mistaken for inline UI. */ .hamburger-menu { cursor: pointer; padding: 8px; margin: -8px -8px 2px -8px; -webkit-tap-highlight-color: transparent; background-color: var(--color-bg-hover); border-radius: 8px; transition: background-color 0.15s; } .hamburger-menu:active { background-color: var(--gray-5); } @media (hover: hover) { .hamburger-menu:hover { background-color: var(--gray-5); } } .bar { display: block; width: 28px; height: 3px; margin: 5px 0; background-color: var(--color-text-primary); border-radius: 1px; } .menu-items { display: none; background-color: var(--color-bg-primary); padding: 4px 0; border: 1px solid var(--color-border-standard); border-radius: 8px; box-shadow: 0 4px 12px var(--color-shadow-subtle); min-width: 220px; } .menu-item { display: flex; align-items: center; gap: 10px; color: var(--color-text-primary); text-decoration: none; padding: 12px 16px; margin: 0; font-size: 15px; border-top: 1px solid var(--color-border-subtle); -webkit-tap-highlight-color: transparent; } .menu-item:first-child { border-top: none; } .menu-item:active { background-color: var(--color-bg-hover); } /* Inline SVG icons inherit the menu-item's text color. Disable pointer events so clicks always register on the , never on the . */ .menu-icon { flex-shrink: 0; pointer-events: none; } /* Stronger divider above the first action item, separating it visually from the navigation items above. Only matches the first action-classed item because subsequent action items follow another action item. */ .menu-item:not(.menu-item--action) + .menu-item.menu-item--action { border-top: 1px solid var(--color-border-strong); margin-top: 4px; } .menu-item--destructive { color: var(--color-destructive); } @media (hover: hover) { .menu-item:hover { background-color: var(--color-bg-hover); } } @media only screen and (max-width: 600px) { .bar { width: 32px; height: 4px; margin: 6px 0; } .menu-items { min-width: 240px; } .menu-item { padding: 14px 18px; font-size: 16px; } /* The hamburger is position: absolute, so layout treats it as zero-height. On mobile its visible backdrop extends to ~y=54 and overlaps the filter row directly below the page h1. Push the bottom margin of the h1 out so whatever follows it (date filter, calendar grid, dashboard filter) clears the hamburger zone via margin collapse — while letting the centered h1 itself stay in the header band, sharing the page-top zone with the corner hamburger. */ h1 { margin-bottom: 30px; } } #dateSlider, #tabs { display: flex; justify-content: space-around; align-items: center; margin: 5px 0; } /* Row 2 of the header: Part filter (left) + Player dropdown pushed right for visual separation. */ #radioButtons { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 10px; margin: 5px 0; padding: 0 5px; box-sizing: border-box; } .player-filter { display: inline-flex; align-items: center; gap: 5px; /* Take remaining horizontal space on the row, pushing the dropdown to the right edge. If the row wraps on a very narrow viewport, the Player widget lands on its own line at the right. */ margin-left: auto; } .player-filter-label { color: var(--color-text-secondary); font-size: 13px; } /* Date range filter (segmented button group + custom date picker) */ .date-filter-container { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; overflow-x: auto; padding: 0 5px; box-sizing: border-box; -webkit-overflow-scrolling: touch; } .date-range-buttons { display: inline-flex; flex-shrink: 0; border: 1px solid var(--color-border-strong); border-radius: 6px; overflow: hidden; background: var(--color-bg-primary); } .date-range-btn { padding: 6px 14px; background: var(--color-bg-primary); border: none; border-right: 1px solid var(--color-border-strong); cursor: pointer; font: inherit; color: var(--color-text-primary); transition: background-color 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent; white-space: nowrap; } .date-range-btn:last-child { border-right: none; } .date-range-btn:hover { background: var(--color-bg-hover); } .date-range-btn.active { background: var(--color-accent); color: var(--color-text-light); } .custom-date-range { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; flex-shrink: 0; } .custom-date-sep { color: var(--color-text-tertiary); font-size: 14px; } .custom-date-input { padding: 4px 6px; /* 16px prevents iOS from zooming on focus */ font-size: 16px; border: 1px solid var(--color-border-strong); border-radius: 4px; background: var(--color-bg-primary); color: var(--color-text-primary); -webkit-appearance: none; appearance: none; box-sizing: border-box; /* Just enough room for YYYY-MM-DD on all platforms */ min-width: 130px; } /* Part filter (V1 / V2 / VA / ANY) — same segmented-button look as the date range. Active state uses each part's color so the filter doubles as a colour legend for the part palette used throughout the app. */ .part-buttons { display: inline-flex; flex-shrink: 0; border: 1px solid var(--color-border-strong); border-radius: 6px; overflow: hidden; background: var(--color-bg-primary); } .part-btn { padding: 6px 14px; background: var(--color-bg-primary); border: none; border-right: 1px solid var(--color-border-strong); cursor: pointer; font: inherit; color: var(--color-text-primary); transition: background-color 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent; white-space: nowrap; } .part-btn:last-child { border-right: none; } .part-btn:hover { background: var(--color-bg-hover); } .part-btn.active { color: var(--color-text-light); } /* Active backgrounds — part colors. JS reads these same tokens via getComputedStyle so the SPA + CSS stay in sync. */ .part-btn.active[data-part="V1"] { background: var(--color-part-v1); color: var(--color-part-v1-text); } .part-btn.active[data-part="V2"] { background: var(--color-part-v2); color: var(--color-part-v2-text); } .part-btn.active[data-part="VA"] { background: var(--color-part-va); color: var(--color-part-va-text); } .part-btn.active[data-part="ANY"] { background: var(--color-accent); } @media only screen and (max-width: 800px) { .date-filter-container { gap: 6px; } .date-range-btn, .part-btn { padding: 7px 10px; } .custom-date-input { padding: 3px 4px; min-width: 120px; } } #tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */ justify-content: flex-start; /* Aligns tabs to the start */ max-width: 100%; /* Adjust as necessary */ } #tabs button { display: inline-block; /* Inline-block for horizontal layout */ background-color: var(--color-bg-hover); color: var(--color-text-primary); /* explicit — browser default doesn't inherit body color */ border: 1px solid var(--color-border-strong); border-bottom: none; padding: 5px 10px; margin-right: 2px; cursor: pointer; transition: background-color 0.3s; flex-shrink: 0; } #tabs button:hover { background-color: var(--gray-5); } #tabs button.active-tab-button { background-color: var(--color-bg-primary); border-top: 2px solid var(--color-accent); /* Highlight color for active tab */ } .tab { border: 1px solid var(--color-border-strong); padding: 10px; } /* Per-composer data table (rendered by tableComponent.js). */ .data-table th { border: 1px solid var(--color-border-standard); background-color: var(--color-bg-secondary); } .data-table tr { border: 1px solid var(--color-border-standard); } .data-table tbody tr:nth-child(even) { background-color: var(--color-bg-stripe); } .data-table td { border: 1px solid var(--color-border-standard); } .tab, .tooltip { display: none; } .active-tab { display: block; } .random-button-container { margin: 10px 0; display: flex; align-items: center; } .random-button { padding: 5px 10px; cursor: pointer; } .random-work-display { margin-left: 10px; color: var(--color-text-tertiary); } .tooltip { position: absolute; background: var(--color-bg-primary); border: 1px solid var(--color-text-emphasis); padding: 5px; border-radius: 5px; } .tooltip h4 { margin: 0; } .tooltip p { margin: 5px 0 0 0; } .calendar-tooltip-table { margin-top: 10px; border-collapse: collapse; font-size: 12px; width: 100%; } .calendar-tooltip-table th { background: var(--color-bg-secondary); padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--color-border-strong); font-weight: bold; } .calendar-tooltip-table td { padding: 4px 6px; border-bottom: 1px solid var(--color-border-subtle); } .calendar-tooltip-table tbody tr:last-child td { border-bottom: none; } .tooltip-close { position: absolute; top: 2px; right: 5px; font-size: 20px; font-weight: bold; color: var(--color-text-chart); cursor: pointer; line-height: 1; user-select: none; } .tooltip-close:hover { color: var(--color-text-emphasis); } .calendar-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; max-width: 1000px; margin: 0 auto 6px; } /* Center the calendar grid SVG under the "Quartet Days" title. `> svg` is intentional — the legend SVG lives inside .calendar-top and shouldn't be re-centered here. */ #calendar > svg { display: block; margin: 0 auto; } /* Calendar SVG text defaults. The d3-created text elements (year labels, day-of-week, per-year stats, month labels, legend ticks) don't set an explicit fill, so they'd render black-on-bg. Default them to primary text, and set `color` so any `currentColor` references (legend title) resolve the same way. Text elements with explicit fill (chart annotations using --color-text-chart) keep their attribute. */ #calendar svg { color: var(--color-text-primary); } #calendar svg text:not([fill]) { fill: var(--color-text-primary); } /* Legend SVG sized + positioned to track the calendar's first 10 day cells. The calendar SVG has natural width 1000 (viewBox) and max-width: 100%, so its 10 cells render at min(container * 17%, 170px) and start at min(container * 4.05%, 40.5px). Mirror that here. */ .calendar-top > svg { width: min(170px, 17%); margin-left: min(40.5px, 4.05%); height: auto; flex-shrink: 0; } .recent-stats { font: 10px sans-serif; flex: 1; min-width: 0; } .recent-stats h4 { /* +3px nudges the heading baseline to match the legend title's baseline. */ margin: 3px 0 4px 0; font-size: 11px; font-weight: bold; } .recent-stats-row { display: flex; flex-wrap: wrap; gap: 16px; } .recent-stat { display: inline-flex; gap: 4px; } .recent-stat-label { color: var(--color-text-secondary); } .recent-stat-value { font-weight: bold; } /* ALL tab: aggregate stats over the current Date/Part/Player filter. */ .all-stats { font: 12px sans-serif; margin: 8px 0; } .all-stats-row { display: flex; flex-wrap: wrap; gap: 18px; } .all-stat { display: inline-flex; gap: 4px; } .all-stat-label { color: var(--color-text-secondary); } .all-stat-value { font-weight: bold; } /* ---------- Dashboard view ---------- */ #dashboard { max-width: 1000px; margin: 0 auto; padding: 0 10px; box-sizing: border-box; } #dashboardDateFilter { margin: 10px 0; } .dashboard-charts { display: flex; flex-direction: column; gap: 18px; margin-top: 10px; } .dashboard-section { width: 100%; } .dashboard-chart-title { font: bold 13px sans-serif; color: var(--color-text-primary); margin: 0 0 6px 0; } .dashboard-empty { font: 12px sans-serif; color: var(--color-text-tertiary); margin: 6px 0; } /* SVGs inside the dashboard share the same font as the rest of the app */ #dashboardPartBar svg, #dashboardComposerChart svg { font-family: sans-serif; } .work-row { display: grid; grid-template-columns: auto 1fr; align-items: center; /* margin-bottom: 5px; gap: 10px; */ } /* MISC tab needs wider first column for composer-prefixed titles */ #MISC .work-row { grid-template-columns: 130px 1fr; } .work-label-container { margin-left: 10px; min-width: 50px; white-space: nowrap; } .squares-container { display: flex; align-items: center; overflow-x: auto; /* In case of many squares */ } .play-square { width: 10px; height: 10px; margin-right: 2px; } @media only screen and (max-width: 800px) { /* iPhone screen size (2x pixels)*/ /* Adjust styles for smaller screens */ body { font-size: 12px; } .tab { font-size: 12px; } } /* Player multiselect dropdown */ .player-multiselect { position: relative; display: inline-block; } .player-select-trigger { padding: 4px 8px; border: 1px solid var(--color-border-strong); background: var(--color-bg-primary); cursor: pointer; min-width: 100px; user-select: none; } .player-select-trigger:hover { background: var(--color-bg-stripe); } .player-dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--color-bg-primary); border: 1px solid var(--color-border-strong); max-height: 300px; overflow-y: auto; z-index: 100; min-width: 150px; box-shadow: 0 2px 4px var(--color-shadow-light); } .player-dropdown.open { display: block; } .player-option { padding: 4px 8px; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .player-option:hover { background: var(--color-bg-hover); } .player-option label { cursor: pointer; flex: 1; } .player-clear { padding: 4px 8px; border-bottom: 1px solid var(--color-border-strong); color: var(--color-text-secondary); cursor: pointer; font-size: 0.9em; } .player-clear:hover { background: var(--color-bg-hover); } /* Setup view styles */ #setupView { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; box-sizing: border-box; } .setup-container { max-width: 600px; width: 100%; text-align: center; } .setup-container h1 { margin-bottom: 10px; } .setup-container p { color: var(--color-text-secondary); margin-bottom: 20px; } #setupForm { display: flex; flex-direction: column; gap: 15px; } #dataUrlInput { width: 100%; padding: 12px; font-size: 14px; border: 1px solid var(--color-border-strong); border-radius: 4px; box-sizing: border-box; } #dataUrlInput:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-focus-ring); } #setupForm button { padding: 12px 24px; font-size: 16px; background-color: var(--color-accent); color: var(--color-text-light); border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; } #setupForm button:hover { background-color: var(--color-accent-hover); } /* Secondary action inside the setup form — outlined, lower visual weight than the primary "Load Data" CTA. Used by the Copy-mobile-setup-link button. */ #setupForm button.setup-secondary { background-color: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); } #setupForm button.setup-secondary:hover { background-color: var(--color-bg-hover); } .setup-error { color: var(--color-text-error); font-size: 14px; text-align: left; display: none; } .setup-help { margin-top: 20px; font-size: 14px; } .setup-help a { color: var(--color-accent); text-decoration: none; } .setup-help a:hover { text-decoration: underline; }