/* ========================================================== RefractTrack — design tokens Signature: swim lanes rendered like a level-select blueprint, task codes set in mono like console output. ========================================================== */ :root { --bg: #14171F; --bg-grid: #171B26; --panel: #1B1F2C; --panel-raised: #212739; --border: #2A3040; --border-soft: #232838; --text: #EDEFF5; --text-muted: #8B93A8; --text-faint: #5C6478; --accent: #5B8CFF; --accent-soft: rgba(91, 140, 255, 0.14); --accent-border: rgba(91, 140, 255, 0.4); --accent-hover: #6f9aff; --normal: #34C1A0; --normal-soft: rgba(52, 193, 160, 0.14); --bug: #E85C41; --bug-soft: rgba(232, 92, 65, 0.16); --p-low: #6B7280; --p-medium: #E8B84B; --p-high: #E8874B; --p-critical: #E8455C; --done: #34C1A0; --danger: #E8455C; --font-display: 'Rajdhani', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', monospace; --radius: 8px; --radius-sm: 5px; } /* Alternate dark themes - same darkness family and semantic task colors (normal/bug/priority/done never change with theme), just a different accent hue and background tint. Selected during install (or later by editing THEME in config.php) and applied via . */ [data-theme="slate"] { --bg: #16181D; --bg-grid: #1A1D24; --panel: #1E212A; --panel-raised: #262A35; --border: #313640; --border-soft: #262B34; --accent: #4FB5C9; --accent-soft: rgba(79, 181, 201, 0.14); --accent-border: rgba(79, 181, 201, 0.4); --accent-hover: #5FBCCE; } [data-theme="ember"] { --bg: #1A1613; --bg-grid: #1E1916; --panel: #24201B; --panel-raised: #2C2721; --border: #3A332A; --border-soft: #2E2822; --accent: #E8A14B; --accent-soft: rgba(232, 161, 75, 0.14); --accent-border: rgba(232, 161, 75, 0.4); --accent-hover: #EAAA5D; } /* Additional themes - available from Manage > Application Config only (not offered during install, which keeps its original 3 to avoid decision paralysis on first setup). Same pattern as the three above: a background tint that leans toward the accent's hue, plus the accent/soft/border/hover set. Semantic status colors (normal, bug, priority, danger) intentionally never change with theme. */ [data-theme="violet"] { --bg: #1A1826; --bg-grid: #1E1B2A; --panel: #221F30; --panel-raised: #2A2740; --border: #363047; --border-soft: #2C2838; --accent: #8B7CF0; --accent-soft: rgba(139, 124, 240, 0.14); --accent-border: rgba(139, 124, 240, 0.4); --accent-hover: #9C8FF5; } [data-theme="rose"] { --bg: #1E161B; --bg-grid: #221A1F; --panel: #2A1F26; --panel-raised: #332530; --border: #402E3C; --border-soft: #332730; --accent: #E36BB0; --accent-soft: rgba(227, 107, 176, 0.14); --accent-border: rgba(227, 107, 176, 0.4); --accent-hover: #E87FBC; } [data-theme="moss"] { --bg: #151A16; --bg-grid: #191F1A; --panel: #1E251F; --panel-raised: #253027; --border: #313D33; --border-soft: #283229; --accent: #5FBF5A; --accent-soft: rgba(95, 191, 90, 0.14); --accent-border: rgba(95, 191, 90, 0.4); --accent-hover: #6FCB6A; } [data-theme="indigo"] { --bg: #14151F; --bg-grid: #181A26; --panel: #1E2030; --panel-raised: #262940; --border: #33374F; --border-soft: #2A2D40; --accent: #6E74E8; --accent-soft: rgba(110, 116, 232, 0.14); --accent-border: rgba(110, 116, 232, 0.4); --accent-hover: #7E84ED; } [data-theme="plum"] { --bg: #1B1420; --bg-grid: #201826; --panel: #271D2E; --panel-raised: #302438; --border: #3E2E48; --border-soft: #322639; --accent: #B565D8; --accent-soft: rgba(181, 101, 216, 0.14); --accent-border: rgba(181, 101, 216, 0.4); --accent-hover: #C078E0; } [data-theme="sky"] { --bg: #131A1F; --bg-grid: #171F25; --panel: #1D272E; --panel-raised: #253039; --border: #324049; --border-soft: #29333B; --accent: #5AC8E8; --accent-soft: rgba(90, 200, 232, 0.14); --accent-border: rgba(90, 200, 232, 0.4); --accent-hover: #6ED1EC; } [data-theme="lime"] { --bg: #171A13; --bg-grid: #1B1F17; --panel: #21261C; --panel-raised: #2A3122; --border: #38402C; --border-soft: #2D3324; --accent: #9ED65C; --accent-soft: rgba(158, 214, 92, 0.14); --accent-border: rgba(158, 214, 92, 0.4); --accent-hover: #ABDD70; } [data-theme="frost"] { --bg: #15181D; --bg-grid: #191D23; --panel: #1F242B; --panel-raised: #272E36; --border: #343C46; --border-soft: #2B3138; --accent: #A8C5E8; --accent-soft: rgba(168, 197, 232, 0.14); --accent-border: rgba(168, 197, 232, 0.4); --accent-hover: #B7D0EC; } [data-theme="mono"] { --bg: #121212; --bg-grid: #161616; --panel: #1C1C1C; --panel-raised: #242424; --border: #363636; --border-soft: #2A2A2A; --accent: #E8E8E8; --accent-soft: rgba(232, 232, 232, 0.14); --accent-border: rgba(232, 232, 232, 0.4); --accent-hover: #FFFFFF; } [data-theme="crimson"] { --bg: #1D1414; --bg-grid: #211717; --panel: #291B1B; --panel-raised: #332121; --border: #402B2B; --border-soft: #332424; --accent: #E14B4B; --accent-soft: rgba(225, 75, 75, 0.14); --accent-border: rgba(225, 75, 75, 0.4); --accent-hover: #E85F5F; } [data-theme="sun"] { --bg: #191710; --bg-grid: #1D1B13; --panel: #242018; --panel-raised: #2E291D; --border: #3D3625; --border-soft: #302B1E; --accent: #E8D94B; --accent-soft: rgba(232, 217, 75, 0.14); --accent-border: rgba(232, 217, 75, 0.4); --accent-hover: #EDDE5F; } /* Rainbow: only the accent isn't a fixed color - --rainbow-hue continuously animates from 0 to 360, and --accent/--accent-soft/ --accent-border/--accent-hover are all derived from it via hsl(), so they update live as it animates without needing their own keyframes. This only works because @property registers --rainbow-hue as an animatable - without that registration browsers can't smoothly tween a custom property. Background uses the same static palette as Monochrome - an earlier version also cycled the background tint, but that turned out to be distracting rather than ambient, so it's fixed now and only the accent moves. */ @property --rainbow-hue { syntax: ''; inherits: true; initial-value: 0; } [data-theme="rainbow"] { --rainbow-hue: 0; --bg: #121212; --bg-grid: #161616; --panel: #1C1C1C; --panel-raised: #242424; --border: #363636; --border-soft: #2A2A2A; --accent: hsl(var(--rainbow-hue) 85% 65%); --accent-soft: hsl(var(--rainbow-hue) 85% 65% / 0.14); --accent-border: hsl(var(--rainbow-hue) 85% 65% / 0.4); --accent-hover: hsl(var(--rainbow-hue) 90% 75%); animation: rainbow-cycle 30s linear infinite; } @keyframes rainbow-cycle { from { --rainbow-hue: 0; } to { --rainbow-hue: 360; } } /* Browsers/users that don't want continuous motion still get a real (just non-moving) themed color rather than a frozen mid-animation glitch. */ @media (prefers-reduced-motion: reduce) { [data-theme="rainbow"] { animation: none; --rainbow-hue: 260; } } * { box-sizing: border-box; } /* Several components (.form-grid, .form-row, .tab-panel, etc.) set their own `display` value, which is equal CSS specificity to the browser's default `[hidden] { display: none }` rule - and author styles win specificity ties, so those components would otherwise stay visible even with the `hidden` attribute/property set. This makes `hidden` authoritative everywhere, app-wide, once and for all. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.5; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: var(--font-mono); background: var(--panel-raised); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; } .task-code-link { font-family: var(--font-mono); background: var(--accent-soft); color: var(--accent); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; font-weight: 600; text-decoration: none; } .task-code-link:hover { text-decoration: underline; } .muted { color: var(--text-muted); } /* Faint blueprint grid behind the whole app */ .app-shell { min-height: 100vh; background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px); background-size: 40px 40px; background-position: -1px -1px; } /* ---------------- Topbar ---------------- */ .topbar { display: flex; align-items: center; gap: 24px; padding: 12px 28px; background: rgba(27, 31, 44, 0.92); border-bottom: 1px solid var(--border); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 20; } .topbar__brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .brand-mark { color: var(--accent); font-size: 20px; line-height: 1; } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: 0.02em; } .project-switcher select { background: var(--panel-raised); border: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); font-size: 13px; padding: 6px 10px; border-radius: var(--radius-sm); } .topbar__nav { display: flex; align-items: center; gap: 4px; flex: 1; } .topbar__nav a { color: var(--text-muted); font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: var(--radius-sm); text-decoration: none; } .topbar__nav a:hover { color: var(--text); background: var(--panel-raised); } .topbar__nav a.is-active { color: var(--text); background: var(--panel-raised); } .topbar__nav a.nav-cta { background: var(--accent); color: #0C0E14; font-weight: 600; } .topbar__nav a.nav-cta:hover { background: var(--accent-hover); } .nav-approvals__count { display: inline-block; font-size: 12px; font-weight: 600; background: rgba(232,184,75,0.22); border: 1px solid rgba(232,184,75,0.45); color: var(--p-medium); padding: 1px 9px; border-radius: 999px; margin-left: 6px; line-height: 1.6; } .nav-approvals__count--zero { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: var(--text-faint); } .topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .topbar__actions a.btn--ghost.is-active { color: var(--text); border-color: var(--text-faint); } .topbar__user { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .user-chip { font-size: 13px; color: var(--text-muted); } .logout-link { background: none; border: none; padding: 0; font: inherit; cursor: pointer; font-size: 13px; color: var(--text-faint); text-decoration: none; } .logout-link:hover { color: var(--text-muted); } /* ---------------- Layout ---------------- */ .app-main { padding: 28px; max-width: 1400px; margin: 0 auto; } .page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .page-title { font-family: var(--font-display); font-weight: 700; font-size: 28px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; } .breadcrumb-link { display: inline-block; font-size: 12.5px; color: var(--text-faint); margin-bottom: 6px; } .breadcrumb-link:hover { color: var(--accent); text-decoration: none; } .page-subtitle { margin: 0; color: var(--text-muted); font-size: 14px; } .page-head__actions { display: flex; gap: 8px; } .project-tag { font-family: var(--font-mono); font-size: 14px; background: var(--accent-soft); color: var(--accent); padding: 3px 9px; border-radius: var(--radius-sm); vertical-align: middle; } .filter-bar { display: flex; gap: 8px; flex-wrap: wrap; } .filter-bar select { background: var(--panel-raised); border: 1px solid var(--border); color: var(--text); font-size: 13px; padding: 7px 10px; border-radius: var(--radius-sm); } /* ---------------- Buttons ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; } .btn--primary { background: var(--accent); color: #0C0E14; } .btn--primary:hover { background: var(--accent-hover); text-decoration: none; } .btn--secondary { background: var(--normal-soft); color: var(--normal); border-color: rgba(52,193,160,0.3); } .btn--secondary:hover { background: rgba(52,193,160,0.24); border-color: rgba(52,193,160,0.5); text-decoration: none; } .btn--ghost { background: transparent; color: var(--text-muted); border-color: var(--border); } .btn--ghost:hover { color: var(--text); border-color: var(--text-faint); text-decoration: none; } .btn--danger { background: transparent; color: var(--danger); border-color: rgba(232,69,92,0.35); } .btn--danger:hover { background: rgba(232,69,92,0.12); text-decoration: none; } .btn--block { width: 100%; } .btn--small { padding: 6px 12px; font-size: 13px; } .link-btn { background: none; border: none; padding: 0; color: var(--text-faint); font-size: 13px; cursor: pointer; text-decoration: underline; } .link-btn:hover { color: var(--danger); } .link-btn--danger { color: var(--danger); } .link-btn:disabled { opacity: 0.3; cursor: not-allowed; } .link-btn:disabled:hover { color: var(--text-faint); } .stage-order-cell { display: flex; gap: 6px; } .stage-order-cell .link-btn { text-decoration: none; font-size: 11px; } /* ---------------- Badges / tags ---------------- */ .badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--panel-raised); color: var(--text-muted); } .badge--normal { background: var(--normal-soft); color: var(--normal); } .badge--bug { background: var(--bug-soft); color: var(--bug); } .badge--done { background: var(--normal-soft); color: var(--normal); } .badge--pending { background: rgba(232,184,75,0.16); color: var(--p-medium); } .badge--wont_do { background: var(--panel-raised); color: var(--text-faint); } .badge--priority-low { background: rgba(107,114,128,0.18); color: var(--p-low); } .badge--priority-medium { background: rgba(232,184,75,0.16); color: var(--p-medium); } .badge--priority-high { background: rgba(232,135,75,0.16); color: var(--p-high); } .badge--priority-critical { background: rgba(232,69,92,0.18); color: var(--p-critical); } .tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--tag-color, var(--border)); color: var(--tag-color, var(--text-muted)); margin: 0 4px 4px 0; } /* ---------------- Board / Kanban ---------------- */ .board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; align-items: stretch; } .lane { flex: 1 1 260px; min-width: 220px; max-width: 340px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 200px; } .lane__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); } .lane__name { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); } .lane__count { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); background: var(--panel-raised); border-radius: 999px; padding: 1px 8px; } .lane__cards { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 80px; transition: background 0.15s ease; } .lane__cards.is-drop-target { background: var(--accent-soft); border-radius: var(--radius-sm); } .card { background: var(--panel-raised); border: 1px solid var(--border); border-left: 3px solid var(--normal); border-radius: var(--radius-sm); padding: 10px 12px; cursor: grab; } .card.type-bug { border-left-color: var(--bug); } .card.is-dragging { opacity: 0.4; } .card__top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; } .card__code { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); margin-right: auto; } .card__title { margin: 0 0 6px; font-size: 14px; font-weight: 600; line-height: 1.35; } .card__groups { margin-bottom: 6px; } .task-description + .card__groups { margin-top: 14px; margin-bottom: 0; } .card__foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-muted); } .card__due { font-family: var(--font-mono); } /* ---------------- Modal ---------------- */ .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(10,12,18,0.7); align-items: center; justify-content: center; z-index: 50; } .modal-backdrop:not([hidden]) { display: flex; } .modal { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; width: 320px; } .modal h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 19px; } .modal p { margin: 0 0 14px; color: var(--text-muted); font-size: 13px; } .modal select { width: 100%; background: var(--panel-raised); border: 1px solid var(--border); color: var(--text); padding: 9px 10px; border-radius: var(--radius-sm); font-size: 14px; } .modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } /* ---------------- Forms ---------------- */ .form-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; max-width: 720px; } .form-card--flush { padding: 0; border: none; background: none; max-width: none; } /* Two-column layout: form on the left, live markdown preview panels on the right, using space that's otherwise unused since .form-card caps out at 720px while .app-main allows up to 1400px. */ .form-with-preview { display: flex; gap: 24px; align-items: flex-start; } .form-with-preview > .form-card { flex: 0 1 720px; } .md-preview-col { flex: 1 1 360px; min-width: 280px; max-width: 480px; position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; } .md-preview-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .md-preview-panel__title { font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-faint); margin: 0 0 10px; } .md-preview { font-size: 14px; white-space: pre-wrap; color: var(--text-muted); } .md-hint { font-size: 11.5px; color: var(--text-faint); margin: -2px 0 0; } /* Small circular "?" popup-opener button - shared by the markdown reference popup (markdown_hint.php) and the upload types popup (upload_hint.php), so both get one consistent look. */ .help-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; border: 1px solid var(--text-faint); background: transparent; color: var(--text-faint); font-size: 10px; line-height: 1; cursor: pointer; vertical-align: middle; } .help-btn:hover { color: var(--text); border-color: var(--text-muted); } .modal--wide { width: 480px; max-width: calc(100vw - 40px); max-height: 80vh; overflow-y: auto; } .md-help-list { margin: 0; } .md-help-list dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin-top: 14px; } .md-help-list dt:first-child { margin-top: 0; } .md-help-list dd { margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted); } .md-help-list code { font-size: 12.5px; } .md-help-lang-list { margin: 4px 0 0; padding: 0; list-style: none; } .md-help-lang-list li { margin: 2px 0; } .md-help-example { margin: 6px 0 0; padding: 8px 10px; background: var(--panel-raised); border: 1px solid var(--border); border-radius: 6px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; white-space: pre; overflow-x: auto; color: var(--text-muted); } @media (max-width: 1100px) { .form-with-preview { flex-direction: column; } .md-preview-col { max-width: none; width: 100%; position: static; } } .form-row { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; } .form-row label { font-size: 13px; font-weight: 600; color: var(--text-muted); } .required-flag { color: var(--p-high); font-weight: 500; } input[type=text], input[type=password], input[type=date], input[type=file], textarea, select { background: var(--panel-raised); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14px; } textarea { resize: vertical; font-family: var(--font-body); } /* A read-only field that must not be a real /