/* ============================================================ KitsArt shared theme system — 5 families x light/dark. Loaded by every KitsArt page; theme.js drives the two buttons. Hand-maintained. Add a family = one dark + one light block, plus an entry in theme.js THEMES (which sets the cycle order). ============================================================ */ :root{ --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; --ez:cubic-bezier(.2,.7,.2,1); } :root, :root[data-theme="ember"][data-mode="dark"]{ --ground:#0B0A09; --s1:#121110; --s2:#181615; --s3:#211E1D; --s4:#2B2726; --stagebg:#0E0D0C; --line:rgba(255,242,232,.09); --line2:rgba(255,242,232,.16); --text:#F6F2ED; --t2:#B7ADA4; --t3:#7E756D; --t4:#5C5550; --ember:#E2622A; --hot:#FFB25C; --cherry:#7A2E12; --iron:#C4623F; --celadon:#7FA88A; --cobalt:#6C8CC4; --ochre:#C9A24B; --mang:#9B7BB8; --ash:#8D949B; --ok:#6FBF8B; --warn:#D9A441; --bad:#E0655F; --hov:rgba(255,255,255,.055); --hov2:rgba(255,255,255,.09); --card1:rgba(255,255,255,.028); --card2:rgba(255,255,255,.012); --popbg:rgba(26,24,23,.96); --scrl:rgba(255,255,255,.14); --scrl2:rgba(255,255,255,.26); --gridln:rgba(255,242,232,.045); --checker:rgba(255,255,255,.03); --bw:1px; --hs:none; --popshadow:0 22px 50px -18px rgba(0,0,0,.85); --btnp-bg:#E2622A; --btnp-fg:#140C07; --btnp-sh:none; } @media (prefers-color-scheme: light){ :root:not([data-mode]){ --ground:#F2EEE8; --s1:#FAF7F2; --s2:#EFEAE3; --s3:#E5DFD6; --s4:#DAD2C8; --stagebg:#E6E1D9; --line:rgba(46,32,20,.12); --line2:rgba(46,32,20,.22); --text:#211A14; --t2:#52463C; --t3:#827466; --t4:#A79A8C; --ember:#C9511C; --hot:#B15A0F; --cherry:#8A2E0E; --iron:#A44A2A; --celadon:#4E7B5E; --cobalt:#3F63A0; --ochre:#94701C; --mang:#6E4E90; --ash:#5D666F; --ok:#2E7D4F; --warn:#9A6B10; --bad:#B03A34; --hov:rgba(20,20,20,.06); --hov2:rgba(20,20,20,.11); --card1:rgba(255,255,255,.75); --card2:rgba(255,255,255,.4); --popbg:rgba(252,250,246,.97); --scrl:rgba(20,20,20,.18); --scrl2:rgba(20,20,20,.32); --gridln:rgba(20,20,20,.055); --checker:rgba(20,20,20,.055); --bw:1px; --hs:none; --popshadow:0 22px 50px -18px rgba(0,0,0,.3); --btnp-bg:#C9511C; --btnp-fg:#FFF6EC; --btnp-sh:none; } } :root[data-theme="ember"][data-mode="light"]{ --ground:#F2EEE8; --s1:#FAF7F2; --s2:#EFEAE3; --s3:#E5DFD6; --s4:#DAD2C8; --stagebg:#E6E1D9; --line:rgba(46,32,20,.12); --line2:rgba(46,32,20,.22); --text:#211A14; --t2:#52463C; --t3:#827466; --t4:#A79A8C; --ember:#C9511C; --hot:#B15A0F; --cherry:#8A2E0E; --iron:#A44A2A; --celadon:#4E7B5E; --cobalt:#3F63A0; --ochre:#94701C; --mang:#6E4E90; --ash:#5D666F; --ok:#2E7D4F; --warn:#9A6B10; --bad:#B03A34; --hov:rgba(20,20,20,.06); --hov2:rgba(20,20,20,.11); --card1:rgba(255,255,255,.75); --card2:rgba(255,255,255,.4); --popbg:rgba(252,250,246,.97); --scrl:rgba(20,20,20,.18); --scrl2:rgba(20,20,20,.32); --gridln:rgba(20,20,20,.055); --checker:rgba(20,20,20,.055); --bw:1px; --hs:none; --popshadow:0 22px 50px -18px rgba(0,0,0,.3); --btnp-bg:#C9511C; --btnp-fg:#FFF6EC; --btnp-sh:none; } :root[data-theme="neo"][data-mode="dark"]{ --ground:#131316; --s1:#1C1C21; --s2:#24242B; --s3:#2E2E36; --s4:#3A3A44; --stagebg:#101013; --line:#F5F5F0; --line2:#F5F5F0; --text:#F5F5F0; --t2:#CFCFC7; --t3:#9A9A93; --t4:#6E6E68; --ember:#F2BE22; --hot:#FFD84D; --cherry:#E4572E; --iron:#E4572E; --celadon:#2FA36B; --cobalt:#3B6FE0; --ochre:#F2BE22; --mang:#8B5CF6; --ash:#6B7280; --ok:#6FBF8B; --warn:#D9A441; --bad:#E0655F; --hov:rgba(255,255,255,.055); --hov2:rgba(255,255,255,.09); --card1:rgba(255,255,255,.028); --card2:rgba(255,255,255,.012); --popbg:#1C1C21; --scrl:rgba(255,255,255,.14); --scrl2:rgba(255,255,255,.26); --gridln:rgba(255,242,232,.045); --checker:rgba(255,255,255,.03); --bw:2px; --hs:2px 2px 0 #F5F5F0; --popshadow:3px 3px 0 #F5F5F0; --btnp-bg:#F2BE22; --btnp-fg:#141414; --btnp-sh:2px 2px 0 #F5F5F0; } :root[data-theme="neo"][data-mode="light"]{ --ground:#F6EFDF; --s1:#FFFDF6; --s2:#F8F0DA; --s3:#F0E4C6; --s4:#E7D8B0; --stagebg:#EFE6D0; --line:#141414; --line2:#141414; --text:#141414; --t2:#3B372F; --t3:#6C6455; --t4:#9A8F7C; --ember:#E88A1A; --hot:#C46A10; --cherry:#C13A1B; --iron:#E4572E; --celadon:#2FA36B; --cobalt:#3B6FE0; --ochre:#F2BE22; --mang:#8B5CF6; --ash:#6B7280; --ok:#2E7D4F; --warn:#9A6B10; --bad:#B03A34; --hov:rgba(20,20,20,.06); --hov2:rgba(20,20,20,.11); --card1:rgba(255,255,255,.75); --card2:rgba(255,255,255,.4); --popbg:#FFFDF6; --scrl:rgba(20,20,20,.18); --scrl2:rgba(20,20,20,.32); --gridln:rgba(20,20,20,.055); --checker:rgba(20,20,20,.055); --bw:2px; --hs:2px 2px 0 #141414; --popshadow:3px 3px 0 #141414; --btnp-bg:#E88A1A; --btnp-fg:#141414; --btnp-sh:2px 2px 0 #141414; } :root[data-theme="retro"][data-mode="dark"]{ --ground:#1C1C1C; --s1:#3A3A3A; --s2:#333333; --s3:#464646; --s4:#565656; --stagebg:#232323; --line:#6E6E6E; --line2:#8A8A8A; --text:#E8E8E8; --t2:#C4C4C4; --t3:#949494; --t4:#6E6E6E; --ember:#3A6EA5; --hot:#79B8F3; --cherry:#204070; --iron:#FF5555; --celadon:#55DD55; --cobalt:#5599FF; --ochre:#DDDD55; --mang:#CC77DD; --ash:#AAAAAA; --ok:#55DD55; --warn:#DDDD55; --bad:#FF6B6B; --hov:rgba(255,255,255,.055); --hov2:rgba(255,255,255,.09); --card1:#3A3A3A; --card2:#333333; --popbg:#3A3A3A; --scrl:rgba(255,255,255,.14); --scrl2:rgba(255,255,255,.26); --gridln:rgba(255,242,232,.045); --checker:rgba(255,255,255,.03); --bw:1px; --hs:none; --popshadow:2px 2px 0 rgba(0,0,0,.45); --btnp-bg:#3A3A3A; --btnp-fg:#E8E8E8; --btnp-sh:inset 1px 1px 0 #6E6E6E,inset -1px -1px 0 #141414; --bev-hi:#6E6E6E; --bev-lo:#141414; --sans:Tahoma,"MS Sans Serif",Geneva,Verdana,system-ui,sans-serif; } :root[data-theme="retro"][data-mode="light"]{ --ground:#008080; --s1:#C0C0C0; --s2:#C9C6BE; --s3:#D4D0C8; --s4:#A8A8A8; --stagebg:#0A6E6E; --line:#808080; --line2:#404040; --text:#000000; --t2:#1E1E1E; --t3:#505050; --t4:#767676; --ember:#000080; --hot:#1084D0; --cherry:#000060; --iron:#800000; --celadon:#008000; --cobalt:#000080; --ochre:#808000; --mang:#800080; --ash:#808080; --ok:#008000; --warn:#808000; --bad:#800000; --hov:rgba(20,20,20,.06); --hov2:rgba(20,20,20,.11); --card1:#C0C0C0; --card2:#C9C6BE; --popbg:#C0C0C0; --scrl:rgba(20,20,20,.18); --scrl2:rgba(20,20,20,.32); --gridln:rgba(20,20,20,.055); --checker:rgba(20,20,20,.055); --bw:1px; --hs:none; --popshadow:2px 2px 0 rgba(0,0,0,.45); --btnp-bg:#C0C0C0; --btnp-fg:#000000; --btnp-sh:inset 1px 1px 0 #FFFFFF,inset -1px -1px 0 #404040; --bev-hi:#FFFFFF; --bev-lo:#404040; --sans:Tahoma,"MS Sans Serif",Geneva,Verdana,system-ui,sans-serif; } /* ---- Neo Pop: chunky outlines ---- */ :root[data-theme="neo"] .btn-p{border:var(--bw) solid var(--line)} /* ---- Retro OS: square corners + beveled 3D chrome ---- */ :root[data-theme="retro"] button, :root[data-theme="retro"] input, :root[data-theme="retro"] select, :root[data-theme="retro"] kbd, :root[data-theme="retro"] .menu-d, :root[data-theme="retro"] .ktb-pop, :root[data-theme="retro"] .fdlg, :root[data-theme="retro"] .ctx, :root[data-theme="retro"] .toast, :root[data-theme="retro"] .card, :root[data-theme="retro"] .dz, :root[data-theme="retro"] .lyr, :root[data-theme="retro"] .th, :root[data-theme="retro"] .obnum, :root[data-theme="retro"] .obsel, :root[data-theme="retro"] .lnum, :root[data-theme="retro"] .tl, :root[data-theme="retro"] .it, :root[data-theme="retro"] .sec, :root[data-theme="retro"] .trow, :root[data-theme="retro"] .hstep, :root[data-theme="retro"] .mi, :root[data-theme="retro"] .ktb-item, :root[data-theme="retro"] .ktb-chip, :root[data-theme="retro"] .btn, :root[data-theme="retro"] .chip, :root[data-theme="retro"] .ktb-btn, :root[data-theme="retro"] .lfb, :root[data-theme="retro"] .obbtn, :root[data-theme="retro"] .ptab, :root[data-theme="retro"] .cat{border-radius:0} :root[data-theme="retro"] .ktb-btn, :root[data-theme="retro"] .btn, :root[data-theme="retro"] .obbtn, :root[data-theme="retro"] .lfb, :root[data-theme="retro"] .tl, :root[data-theme="retro"] .lkb, :root[data-theme="retro"] .lnum, :root[data-theme="retro"] .kbtn{ background:var(--s1);border:1px solid var(--line2); box-shadow:inset 1px 1px 0 var(--bev-hi),inset -1px -1px 0 var(--bev-lo)} :root[data-theme="retro"] .ktb-btn:hover, :root[data-theme="retro"] .obbtn:hover, :root[data-theme="retro"] .tl:hover, :root[data-theme="retro"] .lfb:hover{background:var(--s3)} :root[data-theme="retro"] .tl.sel, :root[data-theme="retro"] .obbtn.on, :root[data-theme="retro"] .lkb.on{ box-shadow:inset 1px 1px 0 var(--bev-lo),inset -1px -1px 0 var(--bev-hi);background:var(--s3)} :root[data-theme="retro"] input, :root[data-theme="retro"] select, :root[data-theme="retro"] .obnum, :root[data-theme="retro"] .txtin{ background:var(--s1);border:1px solid var(--line2); box-shadow:inset 1px 1px 0 var(--bev-lo),inset -1px -1px 0 var(--bev-hi)} :root[data-theme="retro"] .menu-d, :root[data-theme="retro"] .ctx, :root[data-theme="retro"] .fdlg, :root[data-theme="retro"] .toast{ backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--s1); border:1px solid var(--line2); box-shadow:inset 1px 1px 0 var(--bev-hi),inset -1px -1px 0 var(--bev-lo),var(--popshadow)} :root[data-theme="retro"] .fdlg-t, :root[data-theme="retro"] .ptab.on{background:var(--ember);color:#fff} :root[data-theme="retro"] .fdlg-t b{color:#fff} :root[data-theme="retro"] .menubar, :root[data-theme="retro"] .optbar, :root[data-theme="retro"] .sbar, :root[data-theme="retro"] .toolbar, :root[data-theme="retro"] #panels, :root[data-theme="retro"] .chrome{ background:var(--s1);box-shadow:inset 0 1px 0 var(--bev-hi)} :root[data-theme="retro"] .si{box-shadow:inset 1px 1px 0 var(--bev-lo),inset -1px -1px 0 var(--bev-hi)} :root[data-theme="retro"] .mark{box-shadow:none;border:1px solid var(--line2)} /* ============================================================ Collapsible panel sections — the accordion every KitsArt side panel uses. Markup:
add "shut" to start closed,
…
Each app toggles "shut" on click and remembers it; the look lives here so the image editor and the PDF editor cannot drift apart. ============================================================ */ .sec{border-bottom:1px solid var(--line);display:flex;flex-direction:column;min-height:0} .sec.grow{flex:1} .sec.shut{flex:none} .sec-h{width:100%;display:flex;align-items:center;gap:7px;padding:7px 10px;flex:none; font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3); background:none;border:0;cursor:pointer;text-align:left} .sec-h:hover{color:var(--t2);background:var(--hov)} .sec-h .cv{width:9px;height:9px;opacity:.6;flex:none;transition:transform .16s var(--ez)} .sec-h .sec-n{margin-left:auto;color:var(--t4);font-family:var(--mono);font-size:9.5px} .sec.shut .cv{transform:rotate(-90deg)} .sec.shut .sec-b{display:none} .sec-b{padding:2px 8px 10px} .sec.grow>.sec-b{flex:1;min-height:0;overflow-y:auto;padding:8px} /* fold button in a panel's tab strip — collapses the whole group */ .pfold{margin-left:auto;padding:4px 9px;color:var(--t3);display:grid;place-items:center; background:none;border:0;cursor:pointer;flex:none} .pfold:hover{color:var(--text)} .pfold svg{width:10px;height:10px;transition:transform .18s var(--ez)} .pgroup.shut>.ptabs .pfold svg,.pane.shut .pfold svg,.folded .pfold svg{transform:rotate(-90deg)} .pgroup.shut{flex:none!important;height:auto!important} .pgroup.shut>.pbody{display:none} @media(prefers-reduced-motion:reduce){.sec-h .cv,.pfold svg{transition:none}} /* ============================================================ Work-area surround. The area *around* a document, frame or canvas stays the same neutral dark grey in every theme and both modes — the way Photoshop and Premiere keep their canvas surround neutral, so nothing around your work tints how you judge its colour. Equal specificity to the palette blocks, declared after them, so it wins everywhere without !important. ============================================================ */ :root, :root[data-theme][data-mode]{ --stagebg:#2A2A2C;--stagedot:rgba(255,255,255,.07); /* Anything sitting *on* the stage has to be legible against that grey, not against the page — a light theme's own text colour is dark, which on the stage is very nearly invisible. These are the colours for stage-mounted controls, and they do not change with the theme because the stage does not either. */ --stage-fg:#F1F0EE;--stage-fg2:rgba(241,240,238,.74); --stage-hov:rgba(255,255,255,.13);--stage-line:rgba(255,255,255,.14)} /* A fine dot grid over that grey — enough to read as a surface and to show that a page is floating on it, faint enough to ignore while you work. Declared here so every workspace gets the same one; the apps only lay the element out and leave its background alone. */ .stage{ background-color:var(--stagebg); background-image:radial-gradient(var(--stagedot) 1px,transparent 1px); background-size:18px 18px; background-position:-1px -1px; } /* ---- Retro OS: the whole page reads as paper, not just the buttons ---- */ :root[data-theme="retro"] body{ background-image: linear-gradient(var(--retro-rule,rgba(0,0,0,.05)) 1px,transparent 1px), radial-gradient(var(--retro-dot,rgba(0,0,0,.10)) 1px,transparent 1px); background-size:100% 28px,18px 18px; background-position:0 0,0 0; background-attachment:fixed; } :root[data-theme="retro"][data-mode="light"]{--retro-rule:rgba(0,60,60,.07);--retro-dot:rgba(0,50,50,.13)} :root[data-theme="retro"][data-mode="dark"]{--retro-rule:rgba(255,255,255,.045);--retro-dot:rgba(255,255,255,.075)} /* squared corners and hard edges belong to this family */ :root[data-theme="retro"] .wcard, :root[data-theme="retro"] .btn{border-radius:0} /* On the teal desktop, body text must sit on a panel to stay readable — which is also exactly how an operating system of that era looked. */ :root[data-theme="retro"] .hero-in, :root[data-theme="retro"] .wgrid-wrap{ background:var(--s1); border:2px solid var(--line2); box-shadow:inset 1px 1px 0 var(--bev-hi),inset -1px -1px 0 var(--bev-lo),2px 2px 0 rgba(0,0,0,.32); margin:26px auto; max-width:1120px; } :root[data-theme="retro"] .hero{border-bottom:0} :root[data-theme="retro"] .wcard{background:var(--s2);backdrop-filter:none} :root[data-theme="retro"] .foot-in{background:var(--s1);border:2px solid var(--line2); padding-top:12px;padding-bottom:12px;max-width:1120px} /* ---- clock: the reader's own local time ---- */ /* time + region, one pill, sitting next to the light/dark control */ .ktb-now{display:flex;align-items:center;gap:7px;padding:3px 9px;border-radius:7px; border:var(--bw) solid var(--line);background:var(--s2);box-shadow:var(--hs); white-space:nowrap;min-width:0} .ktb-clock{font-family:var(--mono);font-size:11.5px;color:var(--t2);letter-spacing:.02em; font-variant-numeric:tabular-nums} .ktb-zone{font-size:11px;color:var(--t3);max-width:11ch;overflow:hidden;text-overflow:ellipsis; border-left:1px solid var(--line);padding-left:7px} /* the place name holds on down to small phones, then the time carries alone */ @media(max-width:520px){.ktb-now{padding:3px 7px;gap:6px}.ktb-zone{max-width:9ch;padding-left:6px}} @media(max-width:359px){.ktb-zone{display:none}} /* the mode button shows a dot while it is following the clock */ .ktb-btn.ktb-auto{position:relative} .ktb-btn.ktb-auto::after{content:"";position:absolute;right:3px;bottom:3px;width:4px;height:4px; border-radius:50%;background:var(--ember)} /* ---- home button: the way back to the workspace list ---- */ .ktb-home{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--t3); border:var(--bw) solid var(--line);background:var(--s2);box-shadow:var(--hs); text-decoration:none;flex:none;transition:.15s var(--ez);margin-right:4px} .ktb-home:hover{color:var(--ember);border-color:var(--ember);background:var(--hov)} .ktb-home:active{transform:translateY(1px)} .ktb-home svg{width:14px;height:14px} /* ---- theme bar: two buttons on every KitsArt page ---- */ .ktb{display:flex;align-items:center;gap:6px} .ktb-btn{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--t3); border:var(--bw) solid var(--line);background:none;cursor:pointer;transition:.15s var(--ez); box-shadow:var(--hs);padding:0} .ktb-btn:hover{color:var(--text);border-color:var(--line2);background:var(--hov)} .ktb-btn:active{transform:translateY(1px)} .ktb-btn svg{width:15px;height:15px} /* the theme button: a palette, with the current family's colour as the dot in the corner. A plain coloured chip did not say what the button was for. */ .ktb-btn[data-ktb-theme]{position:relative} .ktb-pal{width:16px;height:16px;color:var(--t3)} .ktb-btn:hover .ktb-pal{color:var(--text)} .ktb-pal .d1{fill:currentColor;opacity:.45} .ktb-pal .d2{fill:currentColor;opacity:.65} .ktb-pal .d3{fill:currentColor;opacity:.85} .ktb-chip{position:absolute;right:2px;bottom:2px;width:8px;height:8px;border-radius:50%; border:1.5px solid var(--s1);display:block} :root[data-mode="light"] .ktb-moon{display:none} :root[data-mode="dark"] .ktb-sun{display:none} :root:not([data-mode]) .ktb-sun{display:none} @media (prefers-color-scheme: light){ :root:not([data-mode]) .ktb-moon{display:none} :root:not([data-mode]) .ktb-sun{display:block} } /* ============================================================ Small screens. The workspaces are desktop-class tools and stay that way — this section only makes sure their chrome never strands anything off the side of a phone: the bar scrolls, home/time/theme stay pinned in view, and menus open as a sheet under the bar instead of being clipped by the scroller. ============================================================ */ @media(max-width:760px){ /* the bars span the desktop grid, which is wider than a phone — hold them to the viewport so their right-hand end is never clipped away, and let their own contents swipe instead */ #app .menubar,#app .optbar,#app .ribbon,#app .statusbar{width:100vw;max-width:100vw} #app .menubar{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch} #app .menubar::-webkit-scrollbar{display:none} #app .menubar>*{flex:none} /* the right-hand cluster rides along at the edge instead of scrolling away */ #app .menubar-r{position:sticky;right:0;padding-left:8px;background:var(--s1); box-shadow:-10px 0 10px -6px var(--s1)} /* fixed, so the bar's own overflow cannot clip it */ #app .menu.open>.menu-d{position:fixed;top:calc(var(--menubar-b,34px) + 4px); left:8px;right:8px;min-width:0;max-height:min(68vh,540px);overflow-y:auto} #app .doct{display:none} } @media(max-width:520px){ #app .brand{font-size:0;gap:0;margin-right:6px} /* keep the mark, drop the word */ #app .brand .mark{font-size:13.5px} #app .menu-t{padding:4px 7px} } /* ============================================================ Category accents. KitsArt has three kinds of work, and each kind gets one hue so a workspace is recognisable before you have read its label: visual Photo (cyan), Video (blue), Voice (teal) document PDF (orange), Writer (amber) neutral Translator, Colour, Files — utilities, deliberately quiet Four hues and a grey is the whole system. Anything that needs an accent reads --cat, so icons, labels, hover and active states in a workspace all move together; a page declares which one it is with data-kitsart-cat. The colours are fixed rather than per-theme: PDF being orange everywhere is the point of them. ============================================================ */ :root{ --cat-image:#31A8C4; --cat-video:#5B8FD6; --cat-voice:#2CB5A6; --cat-pdf:#E0762F; --cat-documents:#D3A429; --cat-translate:#96A3B0; --cat-color:#9DA2A8; --cat-file:#8D949B; --cat-code:#8D949B; --cat-storage:#8D949B; --cat-neutral:#8D949B; --cat-3d:#9B7BE0; } :root[data-mode="light"]{ --cat-image:#0E7490; --cat-video:#2F5FA6; --cat-voice:#0F766E; --cat-pdf:#B4530F; --cat-documents:#87640F; --cat-translate:#516272; --cat-color:#5A6169; --cat-file:#5D666F; --cat-code:#5D666F; --cat-storage:#5D666F; --cat-neutral:#5D666F; --cat-3d:#6B46C1; } @media (prefers-color-scheme: light){ :root:not([data-mode]){ --cat-image:#0E7490; --cat-video:#2F5FA6; --cat-voice:#0F766E; --cat-pdf:#B4530F; --cat-documents:#87640F; --cat-translate:#516272; --cat-color:#5A6169; --cat-file:#8D949B; --cat-neutral:#5D666F; --cat-3d:#6B46C1; } } :root[data-kitsart-cat="image"]{--cat:var(--cat-image)} :root[data-kitsart-cat="video"]{--cat:var(--cat-video)} :root[data-kitsart-cat="voice"]{--cat:var(--cat-voice)} :root[data-kitsart-cat="pdf"]{--cat:var(--cat-pdf)} :root[data-kitsart-cat="documents"]{--cat:var(--cat-documents)} :root[data-kitsart-cat="translate"]{--cat:var(--cat-translate)} :root[data-kitsart-cat="color"]{--cat:var(--cat-color)} :root[data-kitsart-cat="file"]{--cat:var(--cat-file)} :root[data-kitsart-cat="code"]{--cat:var(--cat-code)} :root[data-kitsart-cat="storage"]{--cat:var(--cat-storage)} :root[data-kitsart-cat="3d"]{--cat:var(--cat-3d)} /* A workspace's accent is its category, in every theme. Written at the same weight as the theme blocks above and after them, so it is the last word. */ :root[data-kitsart-cat], :root[data-kitsart-cat][data-theme][data-mode]{ --ember:var(--cat); --hot:color-mix(in srgb,var(--cat) 70%,#FFF); --btnp-bg:var(--cat); /* the label has to follow the fill, not the theme: a theme's own label colour was chosen for the theme's own accent, and against a category colour it can land as low as 1.9:1 */ --btnp-fg:#0B0B0C; } :root[data-kitsart-cat][data-mode="light"], :root[data-kitsart-cat][data-theme][data-mode="light"]{ --hot:color-mix(in srgb,var(--cat) 78%,#000); --btnp-fg:#FFFFFF; } /* A dark ground with nothing on it reads as a hole. One very quiet radial at the top corner gives it a light source without becoming a gradient anyone notices. Workspaces paint their own surfaces on top of this. */ :root[data-mode="dark"]:not([data-theme="retro"]) body{ background-image:radial-gradient(120vw 70vh at 12% -10%, color-mix(in srgb,var(--ember) 7%,transparent),transparent 65%); background-attachment:fixed; } /* ============================================================ The mark. A kitsart: a chamber with a fire in it. Drawn rather than approximated with a border-radius and a pseudo-element, so it holds its shape at 18px in a menu bar and at 26px in a header. ============================================================ */ .kmark{display:block;flex:none} .kmark .body{fill:var(--ember)} .kmark .arch{fill:color-mix(in srgb,var(--ground) 82%,transparent)} .kmark .fire{fill:var(--hot)} /* ---------- buy us a coffee, in the chrome ---------- */ .kcoffee{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:8px; font-size:12px;font-weight:560;text-decoration:none;white-space:nowrap;flex:none; color:#3B2412;background:linear-gradient(180deg,#FFD37A,#F5B23C); border:1px solid #E0A02A;box-shadow:0 1px 0 rgba(255,255,255,.4) inset; transition:transform .14s var(--ez),filter .14s var(--ez)} .kcoffee:hover{transform:translateY(-1px);filter:brightness(1.05)} .kcoffee:active{transform:none} .kcoffee svg{width:14px;height:14px} .kcoffee .lbl{display:inline} @media(max-width:900px){.kcoffee .lbl{display:none}.kcoffee{padding:0 8px}}