/* Shared look for every Relay page: colours, header, buttons, dialogs, forms. */ :root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); } /* ---------- themes ---------- The picker in the header sets data-theme on . No attribute means "System": light or dark, following the device. Every theme sets the same colour tokens, so all pages pick them up automatically. */ :root, :root[data-theme="light"]{ color-scheme:light; --bg:#EEF0F6; --surface:#FFFFFF; --surface-2:#E4E7F1; --line:#D3D8E6; --text:#191C2C; --muted:#5A6079; --accent:#F4782E; --accent-ink:#FFFFFF; --link:#3450C8; --live:#E5354B; --good:#1F9D6B; --player:#0E1020; --tip-bg:#FFF1E6; } @media (prefers-color-scheme:dark){ :root:not([data-theme]){ color-scheme:dark; --bg:#131626; --surface:#1B1F32; --surface-2:#252A42; --line:#2D3350; --text:#E9EBF5; --muted:#949BB8; --accent:#FF8F47; --accent-ink:#1A1206; --link:#8FA5FF; --live:#FF4D63; --good:#3CCB91; --player:#0A0C18; --tip-bg:#2E2433; } } :root[data-theme="dark"]{ color-scheme:dark; --bg:#131626; --surface:#1B1F32; --surface-2:#252A42; --line:#2D3350; --text:#E9EBF5; --muted:#949BB8; --accent:#FF8F47; --accent-ink:#1A1206; --link:#8FA5FF; --live:#FF4D63; --good:#3CCB91; --player:#0A0C18; --tip-bg:#2E2433; } /* OLED: true black, so OLED screens switch those pixels off. */ :root[data-theme="oled"]{ --offline-glow:#000000; color-scheme:dark; --bg:#000000; --surface:#000000; --surface-2:#141414; --line:#222222; --text:#EDEDED; --muted:#8C8C8C; --accent:#FF8F47; --accent-ink:#140A02; --link:#8FA5FF; --live:#FF4D63; --good:#3CCB91; --player:#000000; --tip-bg:#1C1410; } /* Milkshake: strawberry milkshake pink. */ :root[data-theme="milkshake"]{ --offline-glow:#5C2A42; color-scheme:light; --bg:#FFEFF5; --surface:#FFFAFC; --surface-2:#FFE0EC; --line:#F7C6D9; --text:#3B1D2A; --muted:#8C5A70; --accent:#F25C9A; --accent-ink:#FFFFFF; --link:#B8246A; --live:#E0304F; --good:#1F9D6B; --player:#2B1420; --tip-bg:#FFE3EE; } /* Rainbow: a dark base with an accent that slowly travels round the colour wheel. */ @property --hue{ syntax:""; inherits:true; initial-value:0; } :root[data-theme="rainbow"]{ --offline-glow:#2E2352; color-scheme:dark; --bg:#15121F; --surface:#1E1A2C; --surface-2:#2A2540; --line:#3A3356; --text:#F2EEFF; --muted:#A79FC4; --accent:hsl(var(--hue) 92% 64%); --accent-ink:#140F20; --link:hsl(calc(var(--hue) + 180) 90% 75%); --live:#FF4D63; --good:#3CCB91; --player:#0D0B16; --tip-bg:#2B2140; --rainbow:linear-gradient(90deg,#FF5E7E,#FF9F43,#FFD84A,#4ADE80,#38BDF8,#818CF8,#E879F9,#FF5E7E); animation:relay-hue 24s linear infinite; } @keyframes relay-hue{ to{ --hue:360; } } :root[data-theme="rainbow"] .top{ border-bottom:3px solid transparent; border-image:var(--rainbow) 1; } :root[data-theme="rainbow"] .brand{ background:var(--rainbow); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:relay-slide 8s linear infinite; } @keyframes relay-slide{ to{ background-position:200% 0; } } @media (prefers-reduced-motion:reduce){ :root[data-theme="rainbow"], :root[data-theme="rainbow"] .brand{ animation:none; } :root[data-theme="rainbow"]{ --hue:300; } } /* ---------- theme picker ---------- */ .theme-menu{position:fixed;z-index:30;min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:12px; padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.28)} .theme-menu[hidden]{display:none} .theme-menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:8px 10px;border-radius:8px; font-weight:600;color:var(--text);text-align:left} .theme-menu button:hover,.theme-menu button:focus-visible{background:var(--surface-2)} .theme-menu .sw{width:22px;height:22px;border-radius:50%;flex:none;border:1px solid rgba(128,128,128,.35)} .theme-menu .tick{margin-left:auto;color:var(--accent);visibility:hidden} .theme-menu button[aria-checked="true"] .tick{visibility:visible} html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%} *,*::before,*::after{box-sizing:inherit} body{margin:0;height:100%;background:var(--bg);color:var(--text); font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.45} button,input{font:inherit;color:inherit} button{cursor:pointer} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} img{max-width:100%} .app{display:grid;grid-template-rows:auto 1fr;height:100%} /* ---------- header ---------- */ .top{display:flex;align-items:center;gap:22px;padding:0 20px;height:58px; background:var(--surface);border-bottom:1px solid var(--line)} .brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text); font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:800;font-size:25px;letter-spacing:-.02em} .brand-mark{width:26px;height:26px;position:relative} .brand-mark span{position:absolute;inset:0;border-radius:50%;border:3px solid var(--accent)} .brand-mark span:nth-child(2){inset:7px;background:var(--accent);border:none} .nav{display:flex;gap:4px} .nav a{color:var(--muted);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px} .nav a:hover,.nav a[aria-current]{color:var(--text);background:var(--surface-2)} .top-right{margin-left:auto;display:flex;align-items:center;gap:10px} .search{display:flex;align-items:center;background:var(--surface-2);border-radius:10px;padding:0 12px;height:38px;width:240px} .search input{border:0;background:transparent;outline:0;width:100%;color:var(--text)} .btn{border:0;border-radius:10px;padding:9px 16px;font-weight:700;background:var(--surface-2)} .btn-accent{background:var(--accent);color:var(--accent-ink)} .icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:0;background:transparent;color:var(--muted)} .icon-btn:hover{background:var(--surface-2);color:var(--text)} /* ---------- dialog & toast ---------- */ dialog{border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);padding:22px;width:min(360px,90vw)} dialog::backdrop{background:rgba(5,7,15,.6)} dialog h2{margin:0 0 6px;font-family:"Bricolage Grotesque",sans-serif} dialog p{margin:0 0 14px;color:var(--muted)} dialog input{width:100%;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);padding:0 12px} .dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px} .toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0; background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;transition:.25s;pointer-events:none} .toast.show{opacity:1;transform:translate(-50%,0)} /* ---------- shared page layout for settings & admin ---------- */ body.page-body{height:auto;min-height:100%} .page-body .top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10} .wrap{max-width:1000px;margin:0 auto;padding:28px 20px 60px;display:grid;grid-template-columns:190px minmax(0,1fr);gap:32px} .side{position:sticky;top:calc(80px + env(safe-area-inset-top,0px));align-self:start;display:flex;flex-direction:column;gap:2px} .side a{color:var(--muted);text-decoration:none;font-weight:600;padding:9px 12px;border-radius:9px} .side a:hover{background:var(--surface-2);color:var(--text)} .side a.here{background:var(--surface);color:var(--text);box-shadow:inset 3px 0 0 var(--accent)} h1.page{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:30px;margin:0 0 4px;letter-spacing:-.01em} .lede{color:var(--muted);margin:0 0 24px} section.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:22px;scroll-margin-top:84px} section.card h2{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-size:20px;margin:0 0 4px} section.card > p.sub{color:var(--muted);margin:0 0 18px;max-width:62ch} .field{margin-bottom:16px} .field label,.field .label{display:block;font-weight:700;font-size:14px;margin-bottom:6px} .field .hint{color:var(--muted);font-size:13px;margin-top:5px;display:flex;justify-content:space-between;gap:10px} .inp,textarea.inp,select.inp{width:100%;min-height:42px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2); padding:9px 12px;color:var(--text);font:inherit} textarea.inp{min-height:110px;resize:vertical;line-height:1.5} .inp:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent} .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .ratings{display:flex;gap:8px;flex-wrap:wrap} .ratings label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-weight:600;cursor:pointer;margin:0} .ratings input{accent-color:var(--accent)} .ratings label:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)} .sched-row{display:grid;grid-template-columns:150px 1fr 40px;gap:8px;margin-bottom:8px} .sched-row .icon-btn{width:40px;height:42px} .link-add{border:0;background:none;color:var(--link);font-weight:700;padding:4px 0} .actions{display:flex;align-items:center;gap:12px;margin-top:6px;flex-wrap:wrap} .status{font-size:14px;font-weight:600} .status.ok{color:var(--good)} .status.bad{color:var(--live)} .btn:disabled{opacity:.55;cursor:default} .btn-danger{background:transparent;border:1px solid var(--live);color:var(--live)} .people{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .people li{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:999px;padding:4px 6px 4px 4px;font-weight:600;font-size:14px} .people .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800} .people button{border:0;background:var(--surface);border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:700;color:var(--link)} .people li.plain{padding-right:12px} .empty{color:var(--muted);font-size:14px} .inline{display:flex;gap:8px;max-width:420px} .inline .inp{flex:1} .sub-h{font-weight:700;margin:18px 0 8px;display:flex;align-items:baseline;gap:8px} .sub-h .count{color:var(--muted);font-weight:600;font-size:14px} .divider{border:0;border-top:1px solid var(--line);margin:22px 0} .gate{text-align:center;padding:40px 22px} .gate .actions{justify-content:center} .pill{display:inline-block;font-size:12px;font-weight:800;border-radius:6px;padding:2px 8px;background:var(--surface-2);color:var(--muted);vertical-align:3px;margin-left:6px} .pill.on{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)} .danger-zone{border-color:color-mix(in srgb,var(--live) 45%,var(--line))} [hidden]{display:none!important} @media (max-width:760px){ .wrap{grid-template-columns:1fr;gap:16px;padding-top:18px} .side{position:static;flex-direction:row;overflow-x:auto} .side a.here{box-shadow:inset 0 -3px 0 var(--accent)} .row2{grid-template-columns:1fr} .sched-row{grid-template-columns:1fr 1fr 40px} .nav{display:none} } /* ---------- small shared bits ---------- */ .link-btn{border:0;background:none;padding:0;color:var(--link);font-weight:700;text-decoration:underline;text-underline-offset:2px} .live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);margin-right:6px;vertical-align:1px} code,kbd{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.92em;background:var(--surface-2);padding:1px 5px;border-radius:5px} @media (max-width:860px){ .nav{display:none} } @media (max-width:520px){ .top{gap:10px;padding:0 12px} .search{display:none} }