/* Portainer-Run site theme Light + dark, aligned to the Portainer V3UI baseline (portainer.css). Single source of truth so portainer.ai matches portainer.io, including the light/dark switch. Theme is set via a `theme` attribute on . Page-specific layout tokens (--maxw, --radius) stay in each page. */ :root, [theme='light']{ --blue:#1570ef; --blue-bright:#2e90fa; --ok:#12b76a; --success-text:#027a48; --paper:#ffffff; --mist:#f9fafb; --surface:#ffffff; --surface-2:#f3f4f6; --line:#ecedee; --text:#111827; --muted:#667085; --ink-2:#eef1f5; --hero-bg:#f4f6f9; --band-bg:#f3f4f6; --footer-bg:#f9fafb; --nav-bg:rgba(255,255,255,0.86); --line-dark:rgba(17,24,39,0.10); --code-bg:#111827; --code-text:#e7eef6; --code-inline-bg:#eef1f5; --code-inline-text:#1f2937; --bar:#e6e8ec; --eyebrow-bg:#eaf3ff; --eyebrow-border:#d6e8ff; --eyebrow-text:#1570ef; --wayfind-bg:#eff6ff; --wayfind-text:#374151; --wayfind-link:#1570ef; --wayfind-dot:#d1d5db; } [theme='dark']{ --blue:#2e90fa; --blue-bright:#60a5fa; --ok:#34d399; --success-text:#34d399; --paper:#18181b; --mist:#202024; --surface:#232327; --surface-2:#2a2a2f; --line:#34343a; --text:#fafafa; --muted:#a1a1aa; --ink-2:#232327; --hero-bg:#18181b; --band-bg:#202024; --footer-bg:#18181b; --nav-bg:rgba(24,24,27,0.82); --line-dark:rgba(255,255,255,0.08); --code-bg:#0f0f11; --code-text:#e7eef6; --code-inline-bg:#202024; --code-inline-text:#dbe4f3; --bar:#3a3b42; --eyebrow-bg:rgba(46,144,250,0.14); --eyebrow-border:rgba(46,144,250,0.32); --eyebrow-text:#93c5fd; --wayfind-bg:transparent; --wayfind-text:#e5e7eb; --wayfind-link:#60a5fa; --wayfind-dot:rgba(255,255,255,0.3); } /* smooth theme transition */ body{transition:background .2s ease, color .2s ease;} @media (prefers-reduced-motion:reduce){body{transition:none;}} /* eyebrow pill */ .eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--eyebrow-bg);border:1px solid var(--eyebrow-border);color:var(--eyebrow-text);padding:6px 12px;border-radius:999px;} .eyebrow.on-dark{color:var(--eyebrow-text);} /* theme toggle */ .theme-toggle{width:38px;height:38px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease, border-color .15s ease;padding:0;flex:none;} .theme-toggle:hover{background:var(--surface-2);border-color:var(--blue);} .theme-toggle svg{width:18px;height:18px;display:block;} [theme='dark'] .theme-toggle .i-moon{display:none;} [theme='light'] .theme-toggle .i-sun{display:none;} /* spectrum graphic (index) themes via CSS so it flips */ .spectrum .zone{fill:var(--surface);stroke:var(--line);} .spectrum text{fill:var(--text);} .spectrum .sub{fill:var(--muted);} .spectrum .dot{fill:var(--muted);} .spectrum .accent{fill:var(--blue-bright);} .spectrum .run{fill:var(--blue);} .spectrum .runbox{fill:var(--blue);stroke:var(--blue);} /* wayfinding banner (cross-property), matches portainer.io */ .wayfind{background:var(--wayfind-bg);border-bottom:1px solid var(--line-dark);} .wayfind .wrap{display:flex;gap:10px;align-items:center;justify-content:center;min-height:38px;font-size:13px;color:var(--wayfind-text);flex-wrap:wrap;text-align:center;} .wayfind b{color:var(--text);font-weight:600;} .wayfind a{color:var(--wayfind-link);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;} .wayfind a:hover{border-bottom-color:var(--wayfind-link);} .wayfind .dot{color:var(--wayfind-dot);}