/* Khelghar 98 · the look (98/kit/k98.css) * * An ORIGINAL late-90s desktop look, drawn from scratch for Khelghar: teal desktop, * grey bevelled windows, a blue title bar, sunken fields, LED counters, a Start menu * and a taskbar with a clock. No borrowed artwork, fonts or logos — the chrome font is * DotGothic16, with Tiny5 for chunky numbers (both SIL Open Font License, fonts/OFL.txt — * chosen because B and G, the notes, can never be mistaken for each other); the Start button carries * the Khelghar mark. * * Put class="k98" on (or any wrapper). Pieces: * .k98-desktop the teal desktop (fills the screen) * .k98-window > .k98-titlebar (.k98-title + .k98-tbtns > .k98-tb[data-k98=min|max|close]) * > .k98-menubar > .k98-menu (+ .k98-pop list of .k98-mi / .k98-sep) * > .k98-body > .k98-status > .k98-cell * .k98-btn (.default, :disabled, [aria-pressed=true]) bevelled push button * .k98-raised / .k98-sunken / .k98-well bevel panels * .k98-field, .k98-check, .k98-radio, .k98-group(+legend) form bits * .k98-veil > .k98-window.k98-dialog a modal dialog box * .k98-led LED counter (k98.mjs led()) * .k98-taskbar > .k98-start + .k98-tasks > .k98-task + .k98-tray > .k98-clock * .k98-startmenu (.k98-banner + ul of .k98-mi) the Start menu * .k98-icon (img/svg + span) a desktop icon * Phones: text is 16px or more and every control is at least 44px tall; the smaller * crisp chrome is kept for mouse screens only (pointer:fine and wide). */ @font-face{font-family:"DotGothic16";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/dotgothic16.woff2") format("woff2")} @font-face{font-family:"Tiny5";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/tiny5.woff2") format("woff2")} .k98{ --k98-desk:#0e7c7b; --k98-desk-2:#0a6665; --k98-face:#c3c3c3; --k98-hi:#ffffff; --k98-lite:#e2e2e2; --k98-shade:#838383; --k98-dark:#0b0b0b; --k98-ink:#0b0b0b; --k98-dim:#6f6f6f; --k98-paper:#ffffff; --k98-title-a:#0b1f78; --k98-title-b:#2b83cf; --k98-title-off-a:#7d7d7d; --k98-title-off-b:#b7b7b7; --k98-sel:#0b1f78; --k98-sel-ink:#ffffff; --k98-led:#ff2a1a; --k98-led-off:#3a0906; --k98-font:"DotGothic16",system-ui,sans-serif; --k98-digits:"Tiny5","DotGothic16",monospace; --k98-fs:16px; --k98-ctl:44px; --k98-title-h:36px; font-family:var(--k98-font);font-size:var(--k98-fs);color:var(--k98-ink);line-height:1.3; -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent; } /* a mouse on a wide screen gets the crisper, smaller chrome of the day */ @media (pointer:fine) and (min-width:900px){ .k98{--k98-fs:15px;--k98-ctl:30px;--k98-title-h:28px} } .k98 *,.k98 *::before,.k98 *::after{box-sizing:border-box} .k98 :focus-visible{outline:1px dotted var(--k98-ink);outline-offset:-4px} /* ---------- bevels ---------- */ .k98-raised,.k98-window,.k98-btn,.k98-taskbar,.k98-startmenu,.k98-pop{ background:var(--k98-face); box-shadow:inset -1px -1px var(--k98-dark),inset 1px 1px var(--k98-lite),inset -2px -2px var(--k98-shade),inset 2px 2px var(--k98-hi)} .k98-sunken,.k98-field,.k98-well{ box-shadow:inset -1px -1px var(--k98-hi),inset 1px 1px var(--k98-shade),inset -2px -2px var(--k98-lite),inset 2px 2px var(--k98-dark)} .k98-well{background:var(--k98-face)} .k98-etched{border:0;border-top:1px solid var(--k98-shade);border-bottom:1px solid var(--k98-hi);margin:8px 0} /* ---------- the desktop ---------- */ .k98-desktop{position:fixed;inset:0;overflow:hidden; background:var(--k98-desk) radial-gradient(120% 90% at 50% 40%,var(--k98-desk),var(--k98-desk-2)); padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))} /* ---------- windows ---------- */ .k98-window{display:flex;flex-direction:column;padding:3px;min-width:0;max-width:100%} .k98-titlebar{display:flex;align-items:center;gap:6px;min-height:var(--k98-title-h);padding:2px 3px 2px 6px;color:#fff; background:linear-gradient(90deg,var(--k98-title-a),var(--k98-title-b));user-select:none;-webkit-user-select:none} .k98-window.inactive .k98-titlebar{background:linear-gradient(90deg,var(--k98-title-off-a),var(--k98-title-off-b));color:#d8d8d8} .k98-title{flex:1;min-width:0;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px} .k98-title img,.k98-title svg{width:18px;height:18px;flex:none} .k98-tbtns{display:flex;gap:2px;flex:none} .k98-tb{width:calc(var(--k98-title-h) - 4px);height:calc(var(--k98-title-h) - 8px);min-width:0;padding:0;border:0;display:grid;place-items:center;cursor:pointer;color:var(--k98-ink); background:var(--k98-face);box-shadow:inset -1px -1px var(--k98-dark),inset 1px 1px var(--k98-hi),inset -2px -2px var(--k98-shade),inset 2px 2px var(--k98-lite)} .k98-tb:active{box-shadow:inset -1px -1px var(--k98-hi),inset 1px 1px var(--k98-dark),inset -2px -2px var(--k98-lite),inset 2px 2px var(--k98-shade)} .k98-tb svg{width:12px;height:12px;display:block} .k98-tb.close{margin-left:2px} /* phones: the × must be a real 44px target even though it looks small */ @media (pointer:coarse){.k98-tb{position:relative}.k98-tb::after{content:"";position:absolute;inset:-8px -4px}} .k98-body{padding:6px;min-height:0} /* ---------- menu bar + pop-up menus ---------- */ .k98-menubar{display:flex;flex-wrap:wrap;gap:0;padding:1px 0;user-select:none;-webkit-user-select:none;position:relative} .k98-menu{font:inherit;color:inherit;background:none;border:0;padding:0 10px;min-height:var(--k98-ctl);cursor:pointer} .k98-menu:hover,.k98-menu[aria-expanded=true]{background:var(--k98-sel);color:var(--k98-sel-ink)} .k98-menu u,.k98-mi u{text-decoration:underline;text-underline-offset:2px} .k98-pop{position:absolute;z-index:40;min-width:220px;padding:3px;list-style:none;margin:0;display:none} .k98-pop.open{display:block} .k98-mi{display:flex;align-items:center;gap:10px;width:100%;font:inherit;color:inherit;background:none;border:0;text-align:left;cursor:pointer; min-height:var(--k98-ctl);padding:2px 22px 2px 26px;position:relative;white-space:nowrap;text-decoration:none} .k98-mi:hover,.k98-mi:focus-visible,.k98-mi.hot{background:var(--k98-sel);color:var(--k98-sel-ink);outline:0} .k98-mi[aria-checked=true]::before{content:"";position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-4px;background:currentColor;border-radius:50%} .k98-mi[role=menuitemcheckbox][aria-checked=true]::before{border-radius:0;width:9px;height:5px;background:none;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-top:-5px} .k98-mi:disabled,.k98-mi[aria-disabled=true]{color:var(--k98-shade);text-shadow:1px 1px var(--k98-hi);cursor:default;background:none} .k98-mi .k98-key{margin-left:auto;padding-left:24px;opacity:.9} .k98-mi img,.k98-mi svg{width:24px;height:24px;flex:none} .k98-sep{height:0;margin:3px 2px;border-top:1px solid var(--k98-shade);border-bottom:1px solid var(--k98-hi);list-style:none} /* ---------- buttons + form bits ---------- */ .k98-btn{font:inherit;color:var(--k98-ink);border:0;min-height:var(--k98-ctl);min-width:88px;padding:4px 14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;white-space:nowrap} .k98-btn:active,.k98-btn[aria-pressed=true]{box-shadow:inset -1px -1px var(--k98-hi),inset 1px 1px var(--k98-dark),inset -2px -2px var(--k98-lite),inset 2px 2px var(--k98-shade);padding:5px 13px 3px 15px} .k98-btn[aria-pressed=true]{background:repeating-conic-gradient(var(--k98-face) 0 25%,var(--k98-hi) 0 50%) 0 0/2px 2px} .k98-btn.default{outline:1px solid var(--k98-dark);outline-offset:-1px} .k98-btn:focus-visible{outline:1px dotted var(--k98-ink);outline-offset:-5px} .k98-btn.default:focus-visible{outline:1px solid var(--k98-dark);box-shadow:inset -1px -1px var(--k98-dark),inset 1px 1px var(--k98-lite),inset -2px -2px var(--k98-shade),inset 2px 2px var(--k98-hi),inset 0 0 0 4px var(--k98-face),inset 0 0 0 5px var(--k98-ink)} .k98-btn:disabled{color:var(--k98-shade);text-shadow:1px 1px var(--k98-hi);cursor:default} .k98-btn svg,.k98-btn img{width:20px;height:20px;flex:none} .k98-field{font:inherit;color:var(--k98-ink);background:var(--k98-paper);border:0;padding:6px 8px;min-height:var(--k98-ctl);min-width:0;border-radius:0;-webkit-appearance:none;appearance:none} .k98-group{border:0;margin:10px 0 6px;padding:14px 10px 10px;position:relative; box-shadow:inset -1px -1px var(--k98-hi),inset 1px 1px var(--k98-shade),inset -2px -2px var(--k98-shade),inset 2px 2px var(--k98-hi)} .k98-group>legend{position:absolute;top:-.7em;left:8px;padding:0 4px;background:var(--k98-face)} .k98-check,.k98-radio{display:flex;align-items:center;gap:10px;min-height:var(--k98-ctl);cursor:pointer;user-select:none;-webkit-user-select:none;position:relative} .k98-check input,.k98-radio input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .k98-check i,.k98-radio i{flex:none;width:18px;height:18px;background:var(--k98-paper);position:relative; box-shadow:inset -1px -1px var(--k98-hi),inset 1px 1px var(--k98-shade),inset -2px -2px var(--k98-lite),inset 2px 2px var(--k98-dark)} .k98-radio i{border-radius:50%} .k98-radio input:checked+i::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--k98-ink)} .k98-check input:checked+i::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid var(--k98-ink);border-width:0 3px 3px 0;transform:rotate(40deg)} .k98-check input:focus-visible~span,.k98-radio input:focus-visible~span{outline:1px dotted var(--k98-ink);outline-offset:1px} .k98-check small,.k98-radio small{display:block;color:var(--k98-dim);font-size:.86em} .k98-check input:disabled~*,.k98-radio input:disabled~*{color:var(--k98-shade)} /* ---------- status bar ---------- */ .k98-status{display:flex;gap:2px;margin-top:2px} .k98-cell{flex:1;min-width:0;padding:3px 6px;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; box-shadow:inset -1px -1px var(--k98-hi),inset 1px 1px var(--k98-shade)} .k98-cell.fit{flex:none} /* ---------- dialogs ---------- */ .k98-veil{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:rgba(0,0,0,.08)} .k98-veil.open{display:flex} /* dialogs float above the page but leave the shared Khelghar dock (Support · Share) reachable */ .k98-veil{z-index:65;pointer-events:none} .k98-veil>*{pointer-events:auto} @media (max-width:699px){.k98-veil{padding-bottom:calc(var(--k98-bar) + 62px + env(safe-area-inset-bottom))}} /* a phone on its side has no room for both: the dock waits while a dialog is up */ @media (max-height:500px){body.k98-dialog-open .nsm-dock{display:none}} .k98-dialog{width:min(460px,100%);max-height:100%;box-shadow:inset -1px -1px var(--k98-dark),inset 1px 1px var(--k98-lite),inset -2px -2px var(--k98-shade),inset 2px 2px var(--k98-hi),4px 6px 0 rgba(0,0,0,.25)} .k98-dialog .k98-body{overflow:auto;padding:12px 12px 10px;-webkit-overflow-scrolling:touch} .k98-dialog .k98-msg{display:flex;gap:14px;align-items:flex-start} .k98-dialog .k98-msg>svg{width:36px;height:36px;flex:none} .k98-dialog p{margin:0 0 .7em} .k98-row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px} .k98-row.center{justify-content:center} /* ---------- LED counter ---------- */ .k98-led{display:inline-flex;gap:2px;padding:3px;background:#000;line-height:0; box-shadow:inset -1px -1px var(--k98-hi),inset 1px 1px var(--k98-shade)} .k98-led svg{width:15px;height:26px;display:block} .k98-led .on{fill:var(--k98-led)}.k98-led .off{fill:var(--k98-led-off)} /* ---------- taskbar + Start ---------- */ .k98-taskbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:4px; padding:4px max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left)); box-shadow:inset 0 1px var(--k98-lite),inset 0 2px var(--k98-hi)} .k98-start{font-weight:700;min-width:0;padding:2px 10px 2px 6px;gap:6px} .k98-start img{width:22px;height:22px} .k98-tasks{flex:1;min-width:0;display:flex;gap:4px;overflow:hidden} .k98-task{justify-content:flex-start;min-width:0;max-width:200px;flex:1 1 0;overflow:hidden;text-overflow:ellipsis} .k98-task span{overflow:hidden;text-overflow:ellipsis} .k98-tray{display:flex;align-items:center;gap:4px;padding:0 8px;min-height:var(--k98-ctl);flex:none; box-shadow:inset -1px -1px var(--k98-hi),inset 1px 1px var(--k98-shade)} .k98-tray button{background:none;border:0;padding:0;width:var(--k98-ctl);height:var(--k98-ctl);display:grid;place-items:center;cursor:pointer} .k98-tray svg{width:18px;height:18px} .k98-clock{font-variant-numeric:tabular-nums;white-space:nowrap} .k98-startmenu{position:fixed;left:max(2px,env(safe-area-inset-left));z-index:66;display:none;padding:3px 3px 3px 0;min-width:min(290px,calc(100vw - 8px));max-height:calc(100dvh - 70px);overflow:auto} .k98-startmenu.open{display:flex} .k98-banner{width:30px;flex:none;margin:0 3px;background:linear-gradient(0deg,#6d1b0d,#b23a20 60%,#e9b95a);color:#fff3d6;position:relative;overflow:hidden} .k98-banner span{position:absolute;left:50%;bottom:10px;transform-origin:0 0;transform:rotate(-90deg) translateY(-50%);white-space:nowrap;font-weight:700;font-size:20px;letter-spacing:.06em} .k98-banner b{color:#ffe29a} .k98-startmenu ul{list-style:none;margin:0;padding:0;flex:1;min-width:0} .k98-startmenu .k98-mi{padding-left:10px;min-height:48px} .k98-startmenu .k98-mi svg,.k98-startmenu .k98-mi img{width:32px;height:32px} /* ---------- desktop icons ---------- */ .k98-icon{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:6px 2px;text-decoration:none;color:#fff;font:inherit;background:none;border:0;cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none} .k98-icon .img{width:48px;height:48px;display:block;image-rendering:pixelated} .k98-icon .img svg,.k98-icon .img img{width:100%;height:100%;display:block} .k98-icon .lbl{padding:1px 3px;line-height:1.2;text-shadow:1px 1px 0 rgba(0,0,0,.55);max-width:100%;overflow-wrap:anywhere} .k98-icon .lbl small{display:block;opacity:.92} .k98-icon.sel .lbl,.k98-icon:focus-visible .lbl{background:var(--k98-sel);text-shadow:none;outline:1px dotted #ffef9e} .k98-icon.sel .img{filter:brightness(.7) sepia(1) hue-rotate(185deg) saturate(3)} .k98-icon:focus-visible{outline:0} .k98-icon.soon{cursor:default} .k98-icon.soon .img{opacity:.55;filter:grayscale(.85)} .k98-icon.soon .lbl{color:#d9ecec} /* the hourglass: a program is opening */ .k98-busy,.k98-busy *{cursor:progress !important} /* ---------- small shared bits ---------- */ .k98 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .k98{--k98-bar:calc(var(--k98-ctl) + 8px)} /* the shared Khelghar dock sits above the taskbar */ .k98 .nsm-dock{bottom:calc(var(--k98-bar) + max(8px,env(safe-area-inset-bottom)))} .k98-startmenu details{margin:0} .k98-startmenu summary{list-style:none} .k98-startmenu summary::-webkit-details-marker{display:none} .k98-startmenu summary::after{content:"";margin-left:auto;border:5px solid transparent;border-left:6px solid currentColor;border-right:0} .k98-startmenu details[open] summary::after{transform:rotate(90deg)} .k98-startmenu details ul{padding-left:16px} .k98-startmenu details .k98-mi{min-height:44px} .k98-startmenu small{opacity:.8} .k98-heart{width:32px;text-align:center;font-size:26px;line-height:1;color:#b23a20} .k98-mi:hover .k98-heart,.k98-mi:focus-visible .k98-heart{color:#ffd9a0} .k98-power{width:32px;height:32px;flex:none;position:relative} .k98-power::before{content:"";position:absolute;inset:7px;border:3px solid #b23a20;border-top-color:transparent;border-radius:50%} .k98-power::after{content:"";position:absolute;left:14px;top:4px;width:4px;height:13px;background:#b23a20} body.k98-off::after{content:"";position:fixed;inset:0;z-index:200;background:#000;animation:k98-off 1.3s ease-in forwards} @keyframes k98-off{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){.k98 *{transition:none !important;animation:none !important}}