/* AntX 98 — desktop shell on top of 98.css */ /* UI font: Fusion Pixel 12px (SIL OFL 1.1, © TakWolf), replaces 98.css's bundled font of unclear origin */ @font-face { font-family: "AntX UI"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fusion-pixel/fusion-pixel-12px-latin.woff2") format("woff2"), url("../vendor/fusion-pixel/fusion-pixel-12px-latin.woff") format("woff"); } :root { --teal: #008080; --silver: #c0c0c0; --navy: #000080; --dark: #808080; --taskbar-h: 30px; --ui-font: "AntX UI", Tahoma, Arial, sans-serif; --mono: "Courier New", "Lucida Console", ui-monospace, monospace; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--teal); color: #000; font-family: var(--ui-font); font-size: 12px; -webkit-font-smoothing: none; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; } /* ---------- language toggle ---------- */ html[data-lang="en"] body [lang="de"], html[data-lang="de"] body [lang="en"] { display: none !important; } a { color: #0000ee; } a:visited { color: #551a8b; } /* ---------- desktop ---------- */ #desktop { position: fixed; inset: 0 0 var(--taskbar-h) 0; overflow: hidden; } #desktop.wall-teal { background: var(--teal); } #desktop.wall-clouds { background: radial-gradient(ellipse 14% 7% at 18% 22%, #fff 60%, transparent 62%), radial-gradient(ellipse 10% 6% at 24% 20%, #fff 60%, transparent 62%), radial-gradient(ellipse 18% 8% at 70% 30%, #fff 60%, transparent 62%), radial-gradient(ellipse 11% 6% at 64% 27%, #fff 60%, transparent 62%), radial-gradient(ellipse 16% 7% at 40% 70%, #f4f8ff 60%, transparent 62%), radial-gradient(ellipse 9% 5% at 47% 67%, #f4f8ff 60%, transparent 62%), radial-gradient(ellipse 12% 6% at 88% 80%, #fff 60%, transparent 62%), linear-gradient(#3a78d8, #8fc0f4); } #desktop.wall-night { background: radial-gradient(1px 1px at 12% 18%, #fff 99%, transparent), radial-gradient(1px 1px at 32% 8%, #fff 99%, transparent), radial-gradient(1px 1px at 52% 22%, #fff 99%, transparent), radial-gradient(1px 1px at 72% 12%, #fff 99%, transparent), radial-gradient(1px 1px at 88% 28%, #fff 99%, transparent), radial-gradient(1px 1px at 22% 38%, #fff 99%, transparent), radial-gradient(1px 1px at 64% 40%, #fff 99%, transparent), linear-gradient(#050818 0%, #12204a 60%, #243a74 100%); } #desktop.wall-banana { background-color: #ffe98a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M14 14 C16 28 24 34 36 31 L35 28 C26 29 20 23 18 13Z' fill='%23f2c21b' stroke='%23846300'/%3E%3Cpath d='M46 40 C48 54 56 60 68 57 L67 54 C58 55 52 49 50 39Z' fill='%23f2c21b' stroke='%23846300'/%3E%3C/svg%3E"); } #desktop.wall-black { background: #000; } .desk-icons { position: absolute; inset: 6px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 78px); grid-auto-columns: 106px; gap: 2px 4px; align-content: start; pointer-events: none; } .icon-item { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 104px; padding: 4px 2px; text-decoration: none; color: #fff; cursor: default; outline: none; -webkit-tap-highlight-color: transparent; } .icon-item svg { flex: none; } .icon-item .label { font-size: 12px; line-height: 13px; text-align: center; padding: 1px 2px; overflow-wrap: anywhere; word-break: normal; } #desktop .icon-item .label { text-shadow: 1px 1px 0 #000; } #desktop.wall-clouds .icon-item .label, #desktop.wall-banana .icon-item .label { text-shadow: 1px 1px 0 #000, 0 0 2px #000; } .icon-item.selected .label { background: var(--navy); color: #fff; text-shadow: none; outline: 1px dotted #ffff00; } .icon-item.selected svg { filter: brightness(.6) sepia(1) hue-rotate(190deg) saturate(4); } .icon-item:focus-visible .label { outline: 1px dotted #fff; } /* in-window explorer view */ .explorer { background: #fff; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; padding: 8px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-height: 160px; } .explorer .icon-item { color: #000; width: 86px; } .explorer .icon-item.selected .label { color: #fff; } /* ---------- windows ---------- */ .app-window { position: absolute; display: flex; flex-direction: column; min-width: 220px; min-height: 120px; max-width: 100vw; } .app-window .title-bar { cursor: default; touch-action: none; flex: none; } .app-window .title-bar-text { display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .app-window .title-bar-text svg { width: 16px; height: 16px; flex: none; } .app-window:not(.active) .title-bar { background: linear-gradient(90deg, #6a6a6a, #8e8e8e); } .app-window:not(.active) .title-bar-text { color: #fff; } .app-window .window-body { flex: 1; margin: 3px; overflow: auto; min-height: 0; display: flex; flex-direction: column; user-select: text; -webkit-user-select: text; } .app-window .window-body > section { flex: 1; display: flex; flex-direction: column; min-height: 0; } .app-window.maximized { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; } .app-window.minimized { display: none; } .app-window .resize-handle { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, #808080 50%, #808080 57%, #fff 57%, #fff 64%, transparent 64%, transparent 71%, #808080 71%, #808080 78%, #fff 78%, #fff 85%, transparent 85%); } .app-window.maximized .resize-handle { display: none; } .app-window.opening { animation: win-open .14s steps(4) both; } @keyframes win-open { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } } .menubar { display: flex; gap: 0; padding: 1px 0 3px; border-bottom: 1px solid #808080; box-shadow: 0 1px #fff; margin-bottom: 3px; flex: none; } .menubar span { padding: 1px 6px; } .menubar span::first-letter { text-decoration: underline; } .menubar span:hover { background: var(--navy); color: #fff; } .toolbar { display: flex; gap: 4px; align-items: center; padding: 2px 0 4px; flex: none; flex-wrap: wrap; } .toolbar button { min-width: 0; padding: 0 8px; } .addressbar { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex: none; } .addressbar .field { flex: 1; background: #fff; padding: 3px 4px; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; font-family: var(--ui-font); } .status-bar { flex: none; margin-top: 3px; } /* sunken white document panes */ .doc { background: #fff; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; padding: 14px 18px; overflow: auto; flex: 1; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; -webkit-font-smoothing: auto; min-height: 0; } .doc h1 { font-size: 22px; margin: 0 0 2px; font-family: "Times New Roman", Georgia, serif; } .doc h2 { font-size: 15px; margin: 18px 0 6px; padding-bottom: 2px; border-bottom: 2px solid #000080; color: #000080; font-family: Arial, sans-serif; } .doc h3 { font-size: 13px; margin: 12px 0 2px; } .doc p { margin: 6px 0; } .doc ul { margin: 4px 0; padding-left: 20px; } .doc li { margin: 2px 0; } .doc .muted { color: #555; } .doc .row { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; } .doc .when { color: #555; white-space: nowrap; } .doc blockquote { margin: 10px 0; padding: 6px 12px; border-left: 4px solid #008080; background: #f0f8f8; font-style: italic; } .doc code { font-family: var(--mono); font-size: 12px; background: #eee; padding: 0 3px; } .notepad-text { font-family: var(--mono); font-size: 13px; line-height: 1.45; white-space: pre-wrap; padding: 6px 8px; } .chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; } .chip { font-family: var(--ui-font); font-size: 12px; background: var(--silver); padding: 2px 6px; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; } /* ---------- system properties / about ---------- */ .sysprops { display: flex; gap: 14px; padding: 12px 10px; flex-wrap: wrap; } .sysprops .portrait { width: 132px; height: 170px; flex: none; object-fit: cover; object-position: 50% 20%; border: 2px solid; border-color: #808080 #fff #fff #808080; image-rendering: auto; } .sysprops .facts { flex: 1; min-width: 200px; line-height: 1.55; font-size: 12px; } .sysprops .facts b { display: block; margin-top: 8px; } .sysprops .facts .big { font-size: 20px; font-weight: bold; font-family: "Times New Roman", serif; -webkit-font-smoothing: auto; margin: 0 0 4px; display: block; } .tabs-body { background: var(--silver); padding: 6px; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; flex: 1; overflow: auto; min-height: 0; } [role="tabpanel"][hidden] { display: none; } .dialog-buttons { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 2px 2px; flex: none; } /* ---------- control panel ---------- */ .cp-grid { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; } .cp-grid .icon-item { width: 96px; } .cp-detail { display: flex; flex-direction: column; flex: 1; min-height: 0; } .cp-detail[hidden] { display: none; } .cp-head { display: flex; align-items: center; gap: 10px; padding: 6px 4px 8px; } .cp-head h3 { margin: 0; font-size: 13px; } .meter { display: grid; grid-template-columns: 150px 1fr 60px; gap: 6px 8px; align-items: center; font-size: 12px; margin: 6px 0; } .meter .bar { height: 14px; background: #fff; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; padding: 2px; } .meter .bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--navy) 0 8px, transparent 8px 10px); } .perf { background: #000; color: #0f0; font-family: var(--mono); padding: 8px; font-size: 12px; line-height: 1.3; } .perf .graph { display: flex; align-items: flex-end; gap: 2px; height: 90px; border: 1px solid #0a0; padding: 2px; background-image: linear-gradient(#063 1px, transparent 1px), linear-gradient(90deg, #063 1px, transparent 1px); background-size: 100% 12px, 12px 100%; } .perf .graph i { flex: 1; background: #0f0; min-height: 1px; } .perf .axis { position: relative; height: 14px; color: #0a0; font-size: 10px; margin-top: 2px; } .perf .axis span { position: absolute; top: 0; } /* ---------- taskbar ---------- */ #taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--taskbar-h); background: var(--silver); box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff; display: flex; align-items: center; gap: 3px; padding: 2px 2px 0; z-index: 100000; } #start-btn { font-weight: bold; min-width: 0; padding: 0 6px 0 4px; display: flex; align-items: center; gap: 4px; height: 23px; color: #000; text-shadow: none; } #start-btn.pressed { box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey; } .tb-sep { width: 2px; height: 22px; border-left: 1px solid #808080; border-right: 1px solid #fff; margin: 0 2px; flex: none; } #tasks { flex: 1; display: flex; gap: 3px; min-width: 0; overflow: hidden; } #tasks button { flex: 0 1 160px; min-width: 32px; height: 23px; padding: 0 6px; display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; justify-content: flex-start; color: #000; text-shadow: none; } #tasks button svg { width: 16px; height: 16px; flex: none; } #tasks button .t { overflow: hidden; text-overflow: ellipsis; } #tasks button.active { box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey; font-weight: bold; background: repeating-conic-gradient(#fff 0% 25%, var(--silver) 0% 50%) 0 0 / 2px 2px; } #tray { display: flex; align-items: center; gap: 6px; height: 23px; padding: 0 8px; box-shadow: inset -1px -1px #fff, inset 1px 1px grey; flex: none; } #tray button { min-width: 0; min-height: 0; height: 18px; padding: 0 4px; box-shadow: none; background: none; color: #000; text-shadow: none; font-weight: bold; } #tray button:focus-visible { outline: 1px dotted #000; } #tray .clock { min-width: 38px; text-align: right; } /* ---------- start menu ---------- */ #start-menu { position: fixed; left: 2px; bottom: calc(var(--taskbar-h) - 2px); z-index: 100001; background: var(--silver); display: flex; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; padding: 3px; } #start-menu[hidden] { display: none; } .sm-banner { width: 22px; background: linear-gradient(0deg, #000080, #1084d0); color: #fff; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 17px; font-weight: bold; font-family: Arial, sans-serif; padding: 6px 0; letter-spacing: 1px; -webkit-font-smoothing: auto; } .sm-banner .thin { font-weight: normal; color: #c0c0c0; } .menu { list-style: none; margin: 0; padding: 0; min-width: 190px; } .menu li { position: relative; } .menu li > a, .menu li > button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 3px 18px 3px 4px; min-height: 0; height: auto; background: none; box-shadow: none; text-align: left; color: #000; text-shadow: none; text-decoration: none; font-size: 12px; cursor: default; } #start-menu > .menu > li > a, #start-menu > .menu > li > button { padding: 6px 22px 6px 6px; } .menu li > a:hover, .menu li > button:hover, .menu li > a:focus-visible, .menu li > button:focus-visible, .menu li.open > button { background: var(--navy); color: #fff; outline: none; } .menu .sub-arrow { margin-left: auto; font-size: 8px; position: absolute; right: 6px; } .menu hr { border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #fff; margin: 3px 2px; } .menu .submenu { position: absolute; left: 100%; top: -3px; display: none; background: var(--silver); padding: 3px; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; min-width: 180px; z-index: 2; } .menu li.open > .submenu { display: block; } .menu li.flip-x > .submenu { left: auto; right: 100%; } /* phones: no room for cascading menus, so the Start menu's submenus unfold inline (accordion) and the menu scrolls */ @media (max-width: 700px) { #start-menu { max-height: calc(100dvh - var(--taskbar-h) - 4px); overflow-y: auto; overscroll-behavior: contain; } #start-menu .menu { min-width: 0; } #start-menu .submenu { position: static; box-shadow: none; padding: 0 0 2px 14px; min-width: 0; background: none; } #start-menu li.open > button .sub-arrow { transform: rotate(90deg); } } .menu li > a svg, .menu li > button svg { width: 24px; height: 24px; flex: none; } .menu .submenu svg { width: 16px !important; height: 16px !important; } /* context menu */ #ctx { position: fixed; z-index: 100002; background: var(--silver); padding: 3px; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; } #ctx[hidden] { display: none; } #ctx .menu { min-width: 150px; } /* ---------- assistant ---------- */ #assistant { position: fixed; right: 14px; bottom: calc(var(--taskbar-h) + 14px); z-index: 99990; display: flex; align-items: flex-end; gap: 6px; } #assistant[hidden] { display: none; } #assistant .bubble { background: #ffffe1; border: 1px solid #000; padding: 8px 10px; max-width: 250px; font-size: 12px; line-height: 1.4; position: relative; box-shadow: 2px 2px 0 rgba(0,0,0,.35); } #assistant .bubble::after { content: ""; position: absolute; right: -9px; bottom: 12px; border: 5px solid transparent; border-left: 8px solid #000; } #assistant .bubble .actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } #assistant .bubble .actions button { min-width: 0; padding: 0 8px; } #assistant .ant svg { width: 48px; height: 48px; animation: bob 1.4s steps(2) infinite; } @keyframes bob { 50% { transform: translateY(-3px); } } /* ---------- boot + shutdown screens ---------- */ #boot, #shutdown { position: fixed; inset: 0; z-index: 200000; background: #000; color: #c0c0c0; font-family: var(--mono); font-size: 15px; cursor: default; } #boot[hidden], #shutdown[hidden] { display: none; } /* set by the first line of index.html when this visit will boot: black from the first paint, no desktop flash */ body.booting { background: #000; } body.booting > :not(#boot) { visibility: hidden; } body.booting #boot[hidden] { display: block; } #boot .bios { padding: 18px 22px; white-space: pre-wrap; line-height: 1.35; } #boot .bios .hl { color: #fff; } #boot .bios .ok { color: #55ff55; } #boot .skip { position: absolute; bottom: 14px; left: 22px; color: #808080; font-size: 13px; } #boot .splash { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #3f7fe0 0%, #1a4ab0 45%, #061a5a 100%); color: #fff; font-family: Arial, sans-serif; } #boot.splashing .splash { display: flex; } #boot .splash .logo { display: flex; align-items: center; gap: 18px; } #boot .splash .logo svg { width: 96px; height: 96px; } #boot .splash h1 { font-size: 64px; margin: 0; font-weight: bold; font-style: italic; letter-spacing: -2px; text-shadow: 3px 3px 0 rgba(0,0,0,.35); } #boot .splash h1 sup { font-size: 30px; font-style: normal; color: #ffd83b; } #boot .splash p { margin: 6px 0 0; font-size: 16px; opacity: .9; } #boot .splash .loadbar { position: absolute; bottom: 0; left: 0; right: 0; height: 14px; background: repeating-linear-gradient(90deg, #d02020 0 40px, #ffd83b 40px 80px, #008080 80px 120px, #000080 120px 160px); background-size: 320px 100%; animation: loadbar 1s linear infinite; } @keyframes loadbar { to { background-position: 320px 0; } } #shutdown { display: flex; align-items: center; justify-content: center; text-align: center; color: #ff9f1a; font-family: Arial, sans-serif; font-size: 26px; line-height: 1.5; padding: 20px; } #shutdown[hidden] { display: none; } #shutdown small { display: block; font-size: 13px; color: #806020; margin-top: 18px; } /* ---------- welcome ---------- */ .welcome { display: flex; flex: 1; min-height: 0; } .welcome .side { width: 150px; flex: none; background: linear-gradient(#000080, #1084d0); color: #fff; padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; } .welcome .side button { text-align: left; justify-content: flex-start; width: 100%; } .welcome .main { flex: 1; background: #fff; padding: 16px 18px; font-family: Arial, sans-serif; font-size: 13px; line-height: 1.5; -webkit-font-smoothing: auto; overflow: auto; } .welcome .main h2 { font-family: "Times New Roman", serif; font-size: 26px; margin: 0 0 6px; font-weight: normal; } .welcome .main h2 b { color: #000080; } .welcome .main .motto { color: #000080; font-style: italic; margin: 10px 0; } /* ---------- DOS prompt ---------- */ .dos { background: #000; color: #c0c0c0; font-family: var(--mono); font-size: 14px; line-height: 1.3; padding: 6px 8px; flex: 1; overflow: auto; white-space: pre-wrap; word-break: break-word; cursor: text; min-height: 0; } .dos .line { display: flex; } .dos input { flex: 1; background: transparent; border: 0; color: #c0c0c0; font: inherit; padding: 0; outline: none; box-shadow: none; min-width: 20px; caret-color: #c0c0c0; height: auto; } .dos .w { color: #fff; } .dos .y { color: #ffff55; } .dos .g { color: #55ff55; } .dos .c { color: #55ffff; } .dos .r { color: #ff5555; } /* ---------- minesweeper ---------- */ .ms-wrap { display: flex; flex-direction: column; align-items: center; padding: 4px; } .ms { background: var(--silver); padding: 6px; box-shadow: inset -2px -2px #808080, inset 2px 2px #fff; } .ms-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px; margin-bottom: 6px; box-shadow: inset 2px 2px #808080, inset -2px -2px #fff; } .ms-lcd { background: #000; color: #f00; font-family: var(--mono); font-weight: bold; font-size: 22px; line-height: 24px; padding: 0 3px; letter-spacing: 1px; min-width: 46px; text-align: right; } .ms-face { min-width: 0; width: 30px; height: 30px; padding: 0; font-size: 18px; color: #000; text-shadow: none; line-height: 1; } .ms-grid { display: grid; box-shadow: inset 3px 3px #808080, inset -3px -3px #fff; padding: 3px; } .ms-cell { width: 24px; height: 24px; min-width: 0; min-height: 0; padding: 0; font-family: Arial, sans-serif; font-weight: bold; font-size: 13px; line-height: 20px; text-align: center; background: var(--silver); box-shadow: inset -2px -2px #808080, inset 2px 2px #fff; color: #000; text-shadow: none; border-radius: 0; } .ms-cell.open { box-shadow: none; border-left: 1px solid #808080; border-top: 1px solid #808080; line-height: 19px; } .ms-cell.boom { background: #f00; } .ms-cell[data-n="1"] { color: #0000ff; } .ms-cell[data-n="2"] { color: #008000; } .ms-cell[data-n="3"] { color: #ff0000; } .ms-cell[data-n="4"] { color: #000080; } .ms-cell[data-n="5"] { color: #800000; } .ms-cell[data-n="6"] { color: #008080; } .ms-cell[data-n="7"] { color: #000; } .ms-cell[data-n="8"] { color: #808080; } .ms-cell:focus-visible { outline: 1px dotted #000; outline-offset: -3px; } /* ---------- banana drop ---------- */ .bd { display: flex; flex-direction: column; flex: 1; min-height: 0; } .bd-stage { position: relative; flex: 1; min-height: 240px; background: #000; color: #c0c0c0; overflow: hidden; outline: none; touch-action: manipulation; } .bd-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .bd-stage .overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; gap: 10px; font-family: Arial, sans-serif; font-size: 13px; line-height: 1.5; -webkit-font-smoothing: auto; } .bd-stage .overlay h3 { margin: 0; font-size: 22px; color: #ffd83b; font-family: "Times New Roman", serif; } .bd-stage .overlay .hint { color: #808080; font-size: 12px; } .bd-stage .overlay button { color: #000; } .bd-stage .hud { position: absolute; top: 6px; left: 8px; right: 8px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 14px; color: #ffd83b; pointer-events: none; } .bd-stage .zones { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); } .bd-stage .zones button { background: transparent; box-shadow: none; min-width: 0; height: 100%; border-right: 1px dashed #151515; } .bd-bar { display: flex; align-items: center; gap: 10px; padding: 4px 2px 0; flex-wrap: wrap; flex: none; } .bd-bar .field-row { margin: 0; } .bd-practice { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; } .bd-practice button { min-width: 0; padding: 0 8px; } /* ---------- misc ---------- */ .msgbox { display: flex; gap: 14px; padding: 14px 12px 4px; align-items: flex-start; font-size: 12px; line-height: 1.5; } .msgbox svg { flex: none; } .center-row { display: flex; justify-content: center; gap: 6px; padding: 8px; } .phone-reveal { display: inline-flex; align-items: center; gap: 6px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pubs { list-style: none; padding: 0; margin: 0; } .pubs li { padding: 6px 0; border-bottom: 1px dotted #aaa; } .pubs .venue { font-family: var(--ui-font); font-size: 12px; background: #000080; color: #fff; padding: 1px 4px; margin-right: 6px; white-space: nowrap; } .pic-grid { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px; background: #fff; flex: 1; align-content: flex-start; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; } .pic-grid figure { margin: 0; text-align: center; font-size: 12px; } .pic-grid img { width: 150px; height: 150px; object-fit: cover; border: 1px solid #000; display: block; margin-bottom: 4px; } .pic-grid figcaption { max-width: 150px; } .display-props .preview { width: 190px; height: 140px; margin: 6px auto 10px; border: 10px solid var(--silver); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #808080; } .display-props select { width: 100%; } /* ---------- mobile ---------- */ @media (max-width: 700px) { .desk-icons { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); grid-template-rows: none; grid-auto-rows: 84px; inset: 10px 8px; justify-items: center; } .app-window { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; } .app-window .resize-handle, .app-window .title-bar-controls button[aria-label="Maximize"], .app-window .title-bar-controls button[aria-label="Restore"] { display: none; } .app-window .title-bar { padding: 4px 4px 4px 6px; } .app-window .title-bar-controls button { min-width: 22px; min-height: 20px; } #tasks button { flex-basis: 40px; } #tasks button .t { display: none; } #tasks button.active .t { display: inline; } .welcome .side { display: none; } .sysprops .portrait { width: 100px; height: 130px; } .meter { grid-template-columns: 110px 1fr 44px; } #assistant { right: 8px; left: 8px; justify-content: flex-end; } #boot .splash h1 { font-size: 40px; } #boot .splash .logo svg { width: 60px; height: 60px; } #boot .bios { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .app-window.opening, #assistant .ant svg, #boot .splash .loadbar { animation: none; } } /* ---------- Safe Mode (also the no-JS / crawler view) ---------- */ body.safe { overflow: auto; background: #fff; user-select: text; -webkit-user-select: text; } body.safe #desktop, body.safe #taskbar, body.safe #start-menu, body.safe #boot, body.safe #assistant { display: none !important; } #content { display: none; } body.safe #content { display: block; max-width: 820px; margin: 0 auto; padding: 24px 16px 60px; } body.safe .safe-banner { display: flex; } .safe-banner { display: none; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #000; color: #fff; font-family: var(--mono); font-size: 13px; padding: 6px 10px; margin: -24px -16px 20px; } .safe-banner a { color: #ffd83b; } body.safe #content > section { margin: 0 0 28px; display: block; } .safe-h { display: none; } body.safe .safe-h { display: block; font-family: var(--mono); font-size: 14px; font-weight: bold; color: #fff; background: #000080; padding: 3px 8px; margin: 0 0 8px; } body.safe .safe-footer { display: block; border-top: 1px solid #ccc; padding-top: 12px; font-size: 14px; } body.safe .window-only, body.safe section[data-window-only] { display: none !important; } body.safe .doc { box-shadow: none; padding: 0; font-size: 15px; overflow: visible; } body.safe .explorer, body.safe .pic-grid { box-shadow: none; padding: 0; } body.safe .explorer .icon-item { color: #000; } body.safe .tabs-body { box-shadow: none; background: none; padding: 0; } body.safe [role="tabpanel"][hidden] { display: block; } body.safe menu[role="tablist"] { display: none; } body.safe .cp-detail[hidden] { display: flex; } body.safe .cp-grid { display: none; } body.safe .sysprops { padding: 0; } /* headings that only make sense on the plain page */ .app-window .safe-only-h { display: none; } .cp-head .i svg, .welcome .i svg { width: 32px; height: 32px; } .menu .i { display: inline-flex; } #boot .boot-mark svg { width: 96px; height: 96px; } @media (max-width: 700px) { #boot .boot-mark svg { width: 60px; height: 60px; } } .bd-stage .overlay[hidden] { display: none; } .app-window .icon-item { color: #000; } .app-window .icon-item .label { text-shadow: none !important; } .app-window .icon-item.selected .label { color: #fff; } @media (max-width: 700px) { #tasks button.active { flex-basis: 150px; } } /* ---------- device manager ---------- */ .devmgr { display: grid; grid-template-columns: minmax(210px, 1fr) minmax(220px, 1.25fr); gap: 10px; align-items: start; } .dev-tree { font-size: 12px; max-height: 330px; overflow: auto; margin: 0; } .dev-tree .i svg { width: 16px; height: 16px; vertical-align: -3px; } .dev-tree a { color: #000; text-decoration: none; padding: 0 3px; } .dev-tree a:hover { text-decoration: underline; } .dev-tree a.sel { background: var(--navy); color: #fff; } .dev-tree .warn, .dev-name .warn { display: inline-block; width: 12px; height: 12px; line-height: 12px; text-align: center; background: #ffd83b; color: #000; font-weight: bold; border: 1px solid #806000; border-radius: 50%; font-size: 9px; } .dev-props { font-family: var(--ui-font); font-size: 12px; margin: 0; } .dev-props .dev-name { font-weight: bold; font-size: 12px; margin-bottom: 6px; } .dev-props h4 { margin: 0 0 6px; font-size: 12px; font-weight: normal; color: #444; } .dev-props p { font-family: Arial, sans-serif; font-size: 13px; line-height: 1.5; -webkit-font-smoothing: auto; } .dev-status { background: #fff; padding: 6px 8px; margin-bottom: 6px; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; } .dev-status::before { content: "✔ "; color: #008000; font-weight: bold; } .dev-status.bad::before { content: "⚠ "; color: #b08000; } .dev-pane[hidden] { display: none; } body.safe .dev-pane[hidden] { display: block; } body.safe .devmgr { display: block; } body.safe .dev-props { border: 0; padding: 0; } body.safe .dev-props h4 { font-size: 14px; font-weight: bold; color: #000; margin-top: 12px; } body.safe .dev-status { box-shadow: none; padding: 0; background: none; } @media (max-width: 700px) { .devmgr { grid-template-columns: 1fr; } .dev-tree { max-height: 220px; } } /* ---------- working menu bars ---------- */ .menubar .mb-label { min-width: 0; min-height: 24px; height: auto; padding: 1px 6px; display: inline-flex; align-items: center; background: none; box-shadow: none; color: #000; text-shadow: none; font-size: 12px; } .menubar .mb-label [lang]::first-letter { text-decoration: underline; } .menubar .mb-label:hover { box-shadow: inset -1px -1px grey, inset 1px 1px #fff; } .menubar .mb-label.open { box-shadow: inset 1px 1px grey, inset -1px -1px #fff; } .mb-drop { position: fixed; z-index: 100003; background: var(--silver); padding: 3px; min-width: 170px; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; } .mb-drop li > button { padding: 3px 10px 3px 2px !important; } .mb-drop .mb-check { width: 14px; text-align: center; flex: none; } .mb-drop .mb-key { margin-left: auto; padding-left: 18px; color: inherit; opacity: .8; } .mb-drop button:disabled { color: grey; text-shadow: 1px 1px #fff; } /* ---------- blue screen ---------- */ #bsod { position: fixed; inset: 0; z-index: 300000; background: #0000aa; color: #fff; display: flex; align-items: center; justify-content: center; font-family: "Perfect DOS VGA 437", "Lucida Console", "Courier New", monospace; font-size: 18px; line-height: 1.4; padding: 20px; cursor: none; outline: none; } #bsod[hidden] { display: none; } #bsod .bsod-box { max-width: 760px; } #bsod .bsod-title { width: fit-content; margin: 0 auto 24px; background: #aaaaaa; color: #0000aa; } #bsod .bsod-center { text-align: center; margin-top: 28px; } #bsod .blink { animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } @media (max-width: 700px) { #bsod { font-size: 14px; } } /* ---------- screensaver ---------- */ #screensaver { position: fixed; inset: 0; z-index: 250000; background: #000; cursor: none; } #screensaver[hidden] { display: none; } #screensaver canvas { width: 100%; height: 100%; display: block; } /* ---------- internet explorer ---------- */ .ie-frame { flex: 1; width: 100%; border: 0; background: #fff; min-height: 0; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; padding: 2px; } /* ---------- paint ---------- */ .paint { display: flex; flex: 1; min-height: 0; gap: 4px; } .paint-tools { width: 58px; flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-content: start; } .paint-tools button { min-width: 0; width: 26px; height: 26px; padding: 0; font-size: 14px; color: #000; text-shadow: none; line-height: 1; } .paint-tools button.on, .paint-sizes button.on { box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey; background: #e0e0e0; } .paint-sizes { grid-column: span 2; display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 3px; box-shadow: inset 1px 1px grey, inset -1px -1px #fff; } .paint-sizes button { width: 100%; height: 24px; min-height: 0; padding: 0 4px; display: flex; align-items: center; } .paint-sizes i { display: block; width: 100%; background: #000; } .paint-area { flex: 1; overflow: auto; background: #808080; padding: 4px; min-width: 0; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; } .paint-canvas { display: block; background: #fff; cursor: crosshair; touch-action: none; image-rendering: pixelated; max-width: none; } .paint-bottom { display: flex; align-items: center; gap: 8px; padding-top: 4px; flex: none; flex-wrap: wrap; } .paint-palette { display: flex; gap: 4px; align-items: center; } .paint-current { position: relative; width: 30px; height: 30px; box-shadow: inset 1px 1px grey, inset -1px -1px #fff; background: #e0e0e0; } .paint-current i { position: absolute; width: 14px; height: 14px; border: 1px solid #000; box-shadow: 1px 1px #fff; } .paint-current .c1 { left: 4px; top: 4px; z-index: 1; } .paint-current .c2 { right: 4px; bottom: 4px; } .paint-swatches { display: grid; grid-template-columns: repeat(14, 15px); grid-template-rows: 15px 15px; gap: 1px; } .paint-swatches button { min-width: 0; min-height: 0; width: 15px; height: 15px; padding: 0; box-shadow: inset 1px 1px grey, inset -1px -1px #fff; border: 1px solid #000; } @media (max-width: 700px) { .paint-swatches { grid-template-columns: repeat(14, 12px); grid-template-rows: 12px 12px; } .paint-swatches button { width: 12px; height: 12px; } } /* ---------- passgen ---------- */ .pg-screen { padding: 8px 10px; font-size: 12px; line-height: 1.5; overflow: auto; } .pg-screen[hidden] { display: none; } .pg-banner { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-size: 18px; font-weight: bold; padding: 8px 10px; font-family: Arial, sans-serif; -webkit-font-smoothing: auto; } .pg-banner small { font-size: 12px; font-weight: normal; opacity: .8; } .pg-screen input[type="text"] { width: 100%; } #pg-out { font-family: var(--mono); font-size: 16px; height: 30px; } .pg-alert { font-size: 44px; text-align: center; color: #c00000; line-height: 1; } .pg-gotcha h3 { text-align: center; margin: 4px 0 8px; font-size: 20px; font-family: "Times New Roman", serif; color: #c00000; } .pg-gotcha p { font-family: Arial, sans-serif; font-size: 13px; -webkit-font-smoothing: auto; } .pg-meter { height: 8px; margin: 6px 0 2px; background: #fff; box-shadow: inset 1px 1px grey, inset -1px -1px #fff; } .pg-meter i { display: block; height: 100%; } .pg-gen fieldset { margin: 8px 0; } .pg-gen .field-row { flex-wrap: wrap; } #pg-len { flex: 1; } /* ---------- misc ---------- */ .ms-wrap { overflow: auto; } body.print-only #content > section:not(:target) { display: none !important; } #tray #sound-btn { font-weight: normal; } #pg-out { background: #fff; color: #000; } .pg-gen .field-row { gap: 4px 10px; } .pg-gen .field-row[hidden] { display: none; } #tray #sound-btn { position: relative; padding: 0 2px; } #tray #sound-btn svg { width: 16px; height: 16px; display: block; } #tray #sound-btn.off::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; background: #c00000; transform: rotate(-35deg); } /* =================== accessibility =================== */ .safe-footer { display: none; } .skip-link { position: fixed; left: 8px; top: -60px; z-index: 400000; background: #ffffe1; color: #000; border: 2px solid #000; padding: 8px 12px; font-family: var(--ui-font); font-size: 14px; text-decoration: none; } .skip-link:focus { top: 8px; } body.safe .skip-link { display: none; } /* window menu button = the little icon in the title bar */ .title-bar-text .sysmenu-btn { min-width: 0; min-height: 0; width: 18px; height: 18px; padding: 0; background: none; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; } .title-bar-text .sysmenu-btn svg { width: 16px; height: 16px; } .title-bar-text .sysmenu-btn:focus-visible { outline: 1px dotted #fff; } .app-window.kb-moving { outline: 3px dashed #000080; outline-offset: 2px; } /* target sizes (WCAG 2.5.8): 20×18 buttons with 4px gaps keep 24px spacing */ .app-window .title-bar-controls { display: flex; gap: 4px; } .app-window .title-bar-controls button { min-width: 20px; min-height: 18px; margin-left: 0 !important; background-position: center; } .mb-drop li > button, #start-menu .submenu li > a, #start-menu .submenu li > button, #ctx .menu li > button { min-height: 24px; } #tasks button, #start-btn { height: 24px; } .dev-tree a { display: inline-block; min-height: 22px; line-height: 22px; } #tray button { min-width: 24px; height: 24px; } /* visible focus everywhere */ a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px dotted #000; outline-offset: 1px; } #desktop .icon-item:focus-visible .label { outline: 2px dotted #fff; } .dos input:focus-visible, .bd-stage:focus-visible { outline: none; } @media (prefers-reduced-motion: reduce) { #bsod .blink { animation: none; } } /* ---------- Large Fonts ---------- */ html.fonts-large body, html.fonts-large .title-bar, html.fonts-large .window, html.fonts-large button, html.fonts-large input, html.fonts-large label, html.fonts-large legend, html.fonts-large li[role=tab], html.fonts-large option, html.fonts-large select, html.fonts-large table, html.fonts-large textarea, html.fonts-large ul.tree-view, html.fonts-large .icon-item .label, html.fonts-large .menu, html.fonts-large .menubar .mb-label, html.fonts-large .chip, html.fonts-large .status-bar-field, html.fonts-large #tray { font-family: Tahoma, Verdana, "Segoe UI", Arial, sans-serif !important; font-size: 15px !important; -webkit-font-smoothing: auto; } html.fonts-large .doc, html.fonts-large .welcome .main, html.fonts-large .dev-props p, html.fonts-large .pg-gotcha p { font-size: 17px !important; } html.fonts-large .notepad-text, html.fonts-large .dos { font-size: 17px !important; } html.fonts-large .app-window .title-bar { min-height: 28px; } html.fonts-large .app-window .title-bar-controls button { min-width: 24px; min-height: 22px; } html.fonts-large .desk-icons { grid-template-rows: repeat(auto-fill, 92px); grid-auto-columns: 120px; } html.fonts-large .icon-item { width: 118px; } html.fonts-large #taskbar { --taskbar-h: 36px; height: 36px; } html.fonts-large #desktop { bottom: 36px; } html.fonts-large #tasks button, html.fonts-large #start-btn { height: 30px; } /* ---------- High Contrast schemes (like Win98's) ---------- */ html.hc-black { --hc-bg: #000; --hc-fg: #fff; --hc-title: #800080; --hc-link: #ffff00; --hc-sel: #00ffff; --hc-selfg: #000; } html.hc-white { --hc-bg: #fff; --hc-fg: #000; --hc-title: #000; --hc-link: #0000cc; --hc-sel: #000080; --hc-selfg: #fff; } html.hc body, html.hc #desktop, html.hc .window, html.hc .window-body, html.hc button, html.hc input, html.hc select, html.hc textarea, html.hc .doc, html.hc .explorer, html.hc .tabs-body, html.hc .menu, html.hc #start-menu, html.hc .mb-drop, html.hc #ctx, html.hc #taskbar, html.hc .status-bar-field, html.hc .chip, html.hc .welcome .main, html.hc .welcome .side, html.hc .pic-grid, html.hc .dev-status, html.hc ul.tree-view, html.hc .addressbar .field, html.hc fieldset, html.hc .meter .bar, html.hc .ms, html.hc .ms-top, html.hc .ms-cell, html.hc .paint-tools button, html.hc .pg-banner, html.hc .sm-banner, html.hc [role="tab"], html.hc .bd-bar, html.hc .dialog-buttons, html.hc .menubar { background-color: var(--hc-bg) !important; color: var(--hc-fg) !important; text-shadow: none !important; box-shadow: none !important; } html.hc #desktop, html.hc .welcome .side, html.hc .pg-banner, html.hc .sm-banner, html.hc .meter .bar { background-image: none !important; } html.hc .window, html.hc button, html.hc input, html.hc select, html.hc textarea, html.hc .doc, html.hc .explorer, html.hc .tabs-body, html.hc #start-menu, html.hc .mb-drop, html.hc #ctx, html.hc .status-bar-field, html.hc .chip, html.hc ul.tree-view, html.hc fieldset, html.hc .meter .bar, html.hc [role="tab"], html.hc .dev-status, html.hc .addressbar .field, html.hc .ms-cell { border: 1px solid var(--hc-fg) !important; } html.hc #taskbar { border-top: 2px solid var(--hc-fg); } html.hc .title-bar, html.hc .app-window:not(.active) .title-bar { background: var(--hc-bg) !important; border-bottom: 1px solid var(--hc-fg); } html.hc .app-window.active .title-bar { background: var(--hc-title) !important; } html.hc .title-bar-text, html.hc .app-window:not(.active) .title-bar-text { color: #fff !important; } html.hc-white .app-window:not(.active) .title-bar-text { color: #000 !important; } html.hc a, html.hc a:visited { color: var(--hc-link) !important; } html.hc .icon-item .label { color: var(--hc-fg) !important; text-shadow: none !important; } html.hc .icon-item.selected .label, html.hc .menu li > a:hover, html.hc .menu li > button:hover, html.hc .menu li > a:focus-visible, html.hc .menu li > button:focus-visible, html.hc .dev-tree a.sel, html.hc #tasks button.active { background: var(--hc-sel) !important; color: var(--hc-selfg) !important; } html.hc .icon-item svg, html.hc .icon-item.selected svg { filter: none; } html.hc .muted, html.hc .doc .muted, html.hc .doc .when { color: var(--hc-fg) !important; } html.hc .doc h2 { color: var(--hc-fg) !important; border-color: var(--hc-fg) !important; } html.hc .meter .bar i { background: var(--hc-fg) !important; } html.hc .title-bar-controls button { background-color: #fff !important; border-color: #fff !important; } html.hc .icon-item svg { filter: drop-shadow(0 0 1px var(--hc-fg)) drop-shadow(0 0 1px var(--hc-fg)); } html.hc :focus-visible { outline: 3px solid var(--hc-sel) !important; outline-offset: 1px; } /* Windows High Contrast / forced colors: bevels are box-shadows and vanish, so draw real borders */ @media (forced-colors: active) { .window, button, input, select, textarea, .doc, .explorer, .tabs-body, #start-menu, .mb-drop, #ctx, .status-bar-field, ul.tree-view, fieldset, .meter .bar, [role="tab"], .ms-cell, .chip { border: 1px solid CanvasText !important; } #taskbar { border-top: 2px solid CanvasText; } .icon-item .label { forced-color-adjust: auto; } } .ms-cell { line-height: 24px; font-size: 14px; } .ms-cell.open { line-height: 23px; } [role="tab"]:focus-visible { outline: 2px dotted #000; outline-offset: -3px; } #mail-to { color: #000; background: #fff; } #app-contact label { color: #000; text-shadow: none; } .doc button, .dialog-buttons button, .center-row button, .toolbar button, .tool button { min-height: 24px; } .paint-swatches { grid-template-columns: repeat(14, 22px); grid-template-rows: 22px 22px; gap: 2px; } .paint-swatches button { width: 22px !important; height: 22px !important; } @media (max-width: 700px) { .paint-swatches { grid-template-columns: repeat(10, 22px); grid-template-rows: none; } } /* ---------- Toolbox ---------- */ .toolbox-intro { margin: 2px 2px 8px; font-size: 12px; line-height: 1.5; } body.safe .toolbox-intro { font-size: 15px; font-family: Arial, sans-serif; } .tool { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow: auto; padding: 2px; } .tool-desc { margin: 0 0 2px; color: #333; } .tool-bar { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; } .tool-bar button { min-width: 0; padding: 0 10px; } .tool-inline { display: inline-flex; align-items: center; gap: 4px; } .tool-lbl { font-weight: bold; margin-top: 4px; } .tool-ta, .tool-input { font-family: var(--mono) !important; font-size: 13px !important; width: 100%; resize: vertical; } .tool-ta { min-height: 80px; flex: 1; } .tool-input { height: 26px; } .tool-out-wrap { display: flex; flex: 1; min-height: 120px; } .tool-out-wrap > * { flex: 1; } .tool-tree { overflow: auto; font-family: var(--mono); font-size: 13px; margin: 0; } .tool-tree .j-string { color: #008000; } .tool-tree .j-number { color: #000080; } .tool-tree .j-boolean { color: #800080; } .tool-tree .j-null { color: #808080; } .tool-result { background: #fff; padding: 6px 8px; overflow: auto; min-height: 60px; flex: 1; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; font-size: 13px; } .tool-result pre { margin: 0; font-family: var(--mono); font-size: 13px; white-space: pre-wrap; word-break: break-all; } .tool-table { border-collapse: collapse; margin: 4px 0; width: 100%; font-size: 13px; } .tool-table th, .tool-table td { text-align: left; padding: 3px 8px 3px 0; vertical-align: top; border-bottom: 1px dotted #aaa; } .tool-table th { white-space: nowrap; width: 1%; } .tool-table caption { text-align: left; font-weight: bold; padding: 6px 0 2px; } .tool-hash { word-break: break-all; font-size: 12px; } .tool-note { margin: 0; padding: 4px 6px; background: #ffffe1; border: 1px solid #000; } .tool-row { display: flex; gap: 6px; align-items: center; } .tool-row .tool-lbl { margin: 0; } .re-slash { font-family: var(--mono); font-size: 16px; } .re-flags { width: 60px !important; flex: none; } .re-hl mark { background: #ffd83b; outline: 1px solid #806000; } .tool-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .diff-out .dadd { background: #d8f5d8; color: #004000; display: inline-block; width: 100%; } .diff-out .ddel { background: #fbdada; color: #600000; display: inline-block; width: 100%; } .cron-say { font-size: 15px; font-weight: bold; margin: 2px 0 8px; } .col-preview { padding: 14px; font-size: 18px; text-align: center; border: 1px solid #000; font-family: Arial, sans-serif; } .col-ratio { font-size: 26px; margin: 0; } .tool-status.bad { color: #a00000; } input[type="color"] { width: 36px; height: 26px; padding: 0; border: 0; background: none; } @media (max-width: 700px) { .tool-2col { grid-template-columns: 1fr; } } html.hc .tool-result, html.hc .tool-note, html.hc .col-preview { background: var(--hc-bg) !important; color: var(--hc-fg) !important; border: 1px solid var(--hc-fg); } html.hc .re-hl mark { background: var(--hc-sel); color: var(--hc-selfg); } /* ---------- MLNG Messenger ---------- */ .mlng { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #fff; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; } .mlng-banner { display: flex; gap: 8px; align-items: center; padding: 8px 10px; color: #fff; background: linear-gradient(90deg, #5a3a1e, #b07a45); font-family: Arial, sans-serif; font-size: 16px; -webkit-font-smoothing: auto; } .mlng-banner small { font-size: 11px; opacity: .85; } .mlng-banner .i svg { width: 32px; height: 32px; } .mlng-me { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid #c0c0c0; } .mlng-me img { width: 36px; height: 36px; object-fit: cover; border: 1px solid #808080; } .mlng-me select { display: block; margin-top: 2px; } .mlng-list { list-style: none; margin: 0; padding: 4px 0; overflow: auto; flex: 1; } .mlng-group { font-weight: bold; padding: 6px 10px 2px; color: #000080; } .mlng-buddy { display: grid !important; grid-template-columns: 14px 1fr; column-gap: 6px; width: 100%; text-align: left; background: none !important; box-shadow: none !important; padding: 4px 10px !important; min-height: 24px; color: #000; text-shadow: none; } .mlng-buddy:hover, .mlng-buddy:focus-visible { background: #e6ecff !important; } .mlng-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000; margin-top: 2px; grid-row: span 3; } .mlng-dot.online { background: #35b24a; } .mlng-dot.away { background: #ffb000; } .mlng-dot.offline { background: #c0c0c0; } .mlng-name { font-weight: bold; } .mlng-sub { color: #444; font-size: 11px; } .mlng-pm { color: #5a3a1e; font-style: italic; font-size: 11px; } .mlng-foot { margin: 0; padding: 6px 10px; font-size: 11px; color: #444; border-top: 1px solid #c0c0c0; } .mlng-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 4px; } .mlng-to { padding: 4px 6px; background: #fff; box-shadow: inset 1px 1px grey, inset -1px -1px #fff; } .mlng-to-status { color: #444; } .mlng-log { flex: 1; min-height: 120px; overflow: auto; background: #fff; padding: 6px 8px; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; font-family: Arial, sans-serif; font-size: 13px; line-height: 1.45; -webkit-font-smoothing: auto; } .mlng-line { margin: 0 0 8px; } .mlng-who { color: #666; font-size: 11px; } .mlng-line.me .mlng-text { color: #000080; } .mlng-line.them .mlng-text { color: #3b2a1a; } .mlng-sys { color: #808080; font-style: italic; } .mlng-typing { min-height: 16px; color: #222; font-style: italic; font-size: 11px; } .mlng-opts { display: flex; flex-wrap: wrap; gap: 4px; } .mlng-opts button { min-width: 0; padding: 0 8px; } .mlng-tools { display: flex; gap: 4px; } .mlng-tools button { min-width: 0; padding: 0 8px; } .mlng-compose { display: flex; gap: 4px; } .mlng-compose input { flex: 1; height: 24px; } .mlng-note { margin: 0; font-size: 11px; color: #444; } #mlng-tray svg { width: 16px; height: 16px; display: block; } #tray #mlng-tray { padding: 0 2px; } #mlng-toast { position: fixed; right: 8px; bottom: calc(var(--taskbar-h) + 8px); z-index: 99995; width: 250px; background: #fff; border: 1px solid #5a3a1e; box-shadow: 2px 2px 0 rgba(0,0,0,.35); font-size: 12px; cursor: pointer; animation: toast-in .25s ease-out; } #mlng-toast[hidden] { display: none; } .mlng-toast-head { display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: linear-gradient(90deg, #5a3a1e, #b07a45); color: #fff; font-weight: bold; } .mlng-toast-head .i svg { width: 16px; height: 16px; } .mlng-toast-close { margin-left: auto; min-width: 0 !important; min-height: 0 !important; width: 20px; height: 18px; padding: 0; line-height: 1; } .mlng-toast-text { padding: 8px 10px; line-height: 1.45; } @keyframes toast-in { from { transform: translateY(20px); opacity: 0; } } .mlng-shake { animation: shake .6s steps(12); } @keyframes shake { 0%,100% { translate: 0 0; } 10% { translate: -6px 2px; } 20% { translate: 6px -2px; } 30% { translate: -5px -3px; } 40% { translate: 5px 3px; } 50% { translate: -4px 1px; } 60% { translate: 4px -1px; } 70% { translate: -3px 2px; } 80% { translate: 3px -2px; } 90% { translate: -1px 1px; } } .mlng-wink { position: fixed; inset: 0; z-index: 99996; pointer-events: none; overflow: hidden; } .mlng-wink span { position: absolute; top: -50px; animation: fall 2s linear forwards; } .mlng-wink .mlng-cup { top: 40%; left: 50%; font-size: 120px; transform: translate(-50%, -50%); animation: cup 3s ease-out forwards; } @keyframes fall { to { top: 110%; transform: rotate(360deg); } } @keyframes cup { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.5); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1.1); } } @media (prefers-reduced-motion: reduce) { #mlng-toast { animation: none; } } html.hc .mlng, html.hc .mlng-log, html.hc .mlng-to, html.hc #mlng-toast, html.hc .mlng-buddy { background: var(--hc-bg) !important; color: var(--hc-fg) !important; } html.hc .mlng-sub, html.hc .mlng-pm, html.hc .mlng-who, html.hc .mlng-line .mlng-text, html.hc .mlng-foot, html.hc .mlng-note, html.hc .mlng-group, html.hc .mlng-typing, html.hc .mlng-sys { color: var(--hc-fg) !important; } html.hc .mlng-banner, html.hc .mlng-toast-head { background: var(--hc-title) !important; } .mlng-avatar svg { width: 36px; height: 36px; border: 1px solid #808080; background: #e6ecff; } .explorer-group { flex-basis: 100%; margin: 6px 2px 0; font-size: 12px; color: #000080; border-bottom: 1px solid #c0c0c0; padding-bottom: 2px; } .explorer-group:first-child { margin-top: 0; } html.hc .explorer-group { color: var(--hc-fg); } /* 98.css positions title-bar glyphs for 16×14 buttons; ours are bigger, so centre them */ .app-window .title-bar-controls button[aria-label] { background-position: center !important; } .app-window .title-bar-controls button[aria-label="Minimize"] { background-position: center bottom 4px !important; } .app-window .title-bar-controls button[aria-label]:active { background-position: calc(50% + 1px) calc(50% + 1px) !important; } .app-window .title-bar-controls button[aria-label="Minimize"]:active { background-position: calc(50% + 1px) bottom 3px !important; } /* Button labels: centre the text box itself, independent of the pixel font's ascent/descent metrics */ button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; line-height: 1; } .menu li > a, .menu li > button, #tasks button, .welcome .side button { justify-content: flex-start; } .title-bar-controls button { display: block; } .mlng-buddy { display: grid !important; align-items: start; line-height: 1.35; } .ms-cell { display: block; line-height: 24px; } .ms-cell.open { line-height: 23px; } /* Icons are links for crawlers and keyboards, but must never look like visited links */ .icon-item:link, .icon-item:visited { color: #fff; } .app-window .icon-item:link, .app-window .icon-item:visited, body.safe .icon-item:visited { color: #000; } .app-window .icon-item.selected .label, #desktop .icon-item.selected .label { color: #fff; } .menu li > a:visited { color: #000; } .menu li > a:hover, .menu li > a:focus-visible { color: #fff; } .tool-tree[hidden], .tool-ta[hidden] { display: none !important; } /* Fusion Pixel's text box (ascent 14 + descent 4) is taller than 98.css's 21px fields expect; rebalance so text sits centred */ html:not(.fonts-large) select, html:not(.fonts-large) input[type="text"], html:not(.fonts-large) input[type="email"], html:not(.fonts-large) input[type="search"], html:not(.fonts-large) input:not([type]) { padding-top: 0; padding-bottom: 3px; line-height: 1; } html:not(.fonts-large) input.tool-input { height: 26px; padding: 3px 6px 2px; line-height: normal; } /* ---------- address bars ---------- */ .addressbar { display: flex; align-items: center; gap: 6px; } .addressbar .addr-label { flex: none; } .addressbar .addr-input { flex: 1; min-width: 60px; font-family: var(--ui-font); } .addressbar .addr-go { min-width: 0; padding: 0 10px; } @media (max-width: 700px) { .addressbar .addr-go { display: none; } } /* ---------- AntX 98 Plus! (Konami code) ---------- */ .plus-only { display: none; } html.plus .plus-only { display: block; } #desktop.wall-plus { background: radial-gradient(1px 1px at 15% 12%, #fff 99%, transparent), radial-gradient(1px 1px at 38% 6%, #fff 99%, transparent), radial-gradient(1px 1px at 61% 16%, #fff 99%, transparent), radial-gradient(1px 1px at 82% 9%, #fff 99%, transparent), radial-gradient(1.5px 1.5px at 72% 22%, #ffe 99%, transparent), radial-gradient(circle at 50% 108%, #ffe14d 0 12%, #ff8a3d 13% 18%, transparent 19%), repeating-linear-gradient(0deg, transparent 0 22px, rgba(255, 60, 170, .35) 22px 24px) bottom / 100% 32% no-repeat, linear-gradient(#12063a 0%, #4a1a6b 45%, #d2447a 75%, #ff9a4d 100%); } html.plus:not(.hc) #start-btn { background: linear-gradient(#ffe98a, #d4a017); color: #3b2a00; box-shadow: inset -1px -1px #6b4f00, inset 1px 1px #fff6c0, inset -2px -2px #a07800, inset 2px 2px #ffe98a; } html.plus:not(.hc) .app-window.active .title-bar { background: linear-gradient(90deg, #4a1a6b, #d4a017); } #plus-splash { position: fixed; inset: 0; z-index: 260000; display: flex; align-items: center; justify-content: center; pointer-events: none; background: radial-gradient(circle, rgba(18, 6, 58, .85), rgba(18, 6, 58, .6)); animation: plus-in 2.3s ease-out forwards; } #plus-splash[hidden] { display: none; } #plus-splash div { font-family: Arial, sans-serif; font-weight: bold; font-style: italic; color: #fff; text-shadow: 3px 3px 0 #4a1a6b; -webkit-font-smoothing: auto; } .plus-logo { font-size: 60px; letter-spacing: -2px; } .plus-plus { font-size: 72px; color: #ffd83b; margin-left: 12px; display: inline-block; animation: plus-pop 2.3s ease-out; } @keyframes plus-in { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } @keyframes plus-pop { 0% { transform: scale(0) rotate(-20deg); } 30% { transform: scale(1.3) rotate(5deg); } 45% { transform: scale(1) rotate(0); } } @media (max-width: 700px) { .plus-logo { font-size: 34px; } .plus-plus { font-size: 42px; } } /* ---------- Calculator ---------- */ .calc { display: flex; flex-direction: column; gap: 6px; } .calc-display { display: block; background: #fff; text-align: right; font-family: var(--mono); font-size: 22px; padding: 6px 8px; min-height: 38px; overflow-x: auto; white-space: nowrap; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; } .calc-conv { font-family: var(--mono); font-size: 12px; line-height: 1.5; background: #fff; padding: 4px 8px; box-shadow: inset 1px 1px grey, inset -1px -1px #fff; overflow-x: auto; white-space: nowrap; } .calc-conv[hidden], .calc-bases[hidden] { display: none; } .calc-keys { display: grid; gap: 4px; } .calc-keys.std { grid-template-columns: repeat(5, 1fr); } .calc-keys.prog { grid-template-columns: repeat(5, 1fr); } .calc-keys button { min-width: 0; min-height: 30px; padding: 0; font-size: 13px; } .calc-keys button.num { color: #000080; text-shadow: 0 0 #000080; } .calc-keys button.op { color: #800000; text-shadow: 0 0 #800000; } .calc-keys button.eq { color: #000; font-weight: bold; } html.hc .calc-display, html.hc .calc-conv { background: var(--hc-bg) !important; color: var(--hc-fg) !important; border: 1px solid var(--hc-fg); } /* ---------- Time zones ---------- */ .tz-table { border-collapse: collapse; font-family: var(--mono); font-size: 11px; } .tz-table th, .tz-table td { padding: 2px 3px; text-align: center; border: 1px solid #ddd; } .tz-table th[scope=row] { text-align: left; white-space: nowrap; font-family: var(--ui-font); background: #f4f4f4; } .tz-table td.work { background: #c8f0c8; } .tz-table td.edge { background: #fff4c0; } .tz-table td.night { background: #d8d8e8; color: #333; } .tz-table td.on, .tz-table .tz-h.on { outline: 2px solid #000080; outline-offset: -2px; font-weight: bold; } .tz-h { min-width: 0 !important; min-height: 22px !important; width: 26px; padding: 0 !important; font-family: var(--mono) !important; font-size: 11px !important; } .tz-del { min-width: 0 !important; min-height: 0 !important; width: 18px; height: 18px; padding: 0 !important; margin-left: 4px; } .tz-pick { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; } html.hc .tz-table td.work, html.hc .tz-table td.edge, html.hc .tz-table td.night, html.hc .tz-table th[scope=row] { background: var(--hc-bg) !important; color: var(--hc-fg) !important; } html.hc .tz-table td.work { text-decoration: underline; } /* ---------- QR ---------- */ .qr-box { display: flex; justify-content: center; align-items: center; background: #fff; padding: 8px; box-shadow: inset 1px 1px grey, inset -1px -1px #fff; min-height: 200px; flex: 1; } .qr-canvas { width: min(256px, 100%); height: auto; image-rendering: pixelated; } .qr-wifi[hidden], .qr-text[hidden] { display: none; } .qr-wifi { display: flex; flex-direction: column; gap: 2px; } /* ---------- Markdown ---------- */ .md-out { font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: auto; } .md-out h1 { font-size: 22px; margin: 4px 0 8px; } .md-out h2 { font-size: 18px; margin: 12px 0 6px; } .md-out h3 { font-size: 15px; } .md-out pre { background: #f0f0f0; padding: 6px 8px; overflow: auto; } .md-out code { font-family: var(--mono); background: #f0f0f0; padding: 0 3px; } .md-out blockquote { margin: 8px 0; padding: 4px 10px; border-left: 4px solid #008080; background: #f0f8f8; } .md-out table { border-collapse: collapse; } .md-out th, .md-out td { border: 1px solid #aaa; padding: 3px 8px; } .md-2col > div { display: flex; flex-direction: column; min-height: 0; } /* ---------- WhatsApp formatter ---------- */ .wa-phone { background: #e5ddd5; padding: 14px 10px; min-height: 200px; flex: 1; overflow: auto; box-shadow: inset 1px 1px grey, inset -1px -1px #fff; } .wa-bubble { background: #dcf8c6; max-width: 90%; margin-left: auto; padding: 6px 8px 4px; border-radius: 6px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0,0,0,.15); -webkit-font-smoothing: auto; overflow-wrap: anywhere; } .wa-bubble code { font-family: var(--mono); font-size: 13px; } .wa-quote { display: block; border-left: 3px solid #25a244; padding-left: 6px; color: #444; } .wa-time { display: block; text-align: right; font-size: 11px; color: #555; margin-top: 2px; } html.hc .wa-phone, html.hc .wa-bubble { background: var(--hc-bg) !important; color: var(--hc-fg) !important; border: 1px solid var(--hc-fg); } /* ---------- your own files and shortcuts ---------- */ .icon-item.shortcut { position: relative; } .icon-item.shortcut::after { content: ""; position: absolute; left: calc(50% - 16px); top: 22px; width: 11px; height: 11px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M2 9 V6 Q2 3 6 3 H7 V1 L10 4 L7 7 V5 H6 Q4 5 4 7 V9 Z' fill='%23000'/%3E%3C/svg%3E") center/9px no-repeat; border: 1px solid #000; } #app-textedit { display: flex; flex-direction: column; flex: 1; min-height: 0; } .textedit-area { flex: 1; min-height: 120px; resize: none; font-family: var(--mono) !important; font-size: 13px !important; line-height: 1.45; padding: 6px 8px; } .uf-list { max-height: 220px; overflow: auto; margin: 6px 0 0; } .uf-pick { width: 100%; justify-content: flex-start !important; background: none !important; box-shadow: none !important; padding: 2px 4px !important; } .uf-pick:hover, .uf-pick:focus-visible { background: var(--navy) !important; color: #fff; } /* Explorer windows: the icon area scrolls inside the window instead of spilling out of it */ .app-window .explorer { flex: 1 1 auto; overflow: auto; min-height: 0; align-content: flex-start; } .app-window .window-body > section > .toolbox-intro, .app-window .window-body > section > .addressbar, .app-window .window-body > section > .status-bar { flex: none; } /* ---------- movable desktop icons ---------- */ .desk-icons.free { display: block; } .desk-icons.free .icon-item { position: absolute; } .desk-icons .icon-item.dragging { opacity: .75; z-index: 5; cursor: grabbing; } .desk-icons .icon-item.drop-target .label { background: var(--navy); color: #fff; outline: 1px dotted #ff0; } /* ---------- printing (same tab, only the document) ---------- */ #print-area { display: none; } @media print { html, body { height: auto !important; overflow: visible !important; background: #fff !important; } body.printing > *:not(#print-area) { display: none !important; } body.printing #print-area { display: block !important; font-family: Arial, Helvetica, sans-serif; color: #000; } #print-area .print-head { font-size: 10px; color: #555; margin: 0 0 8px; border-bottom: 1px solid #ccc; padding-bottom: 4px; } #print-area .doc { box-shadow: none !important; padding: 0 !important; overflow: visible !important; font-size: 12pt; } #print-area .chip { box-shadow: none !important; border: 1px solid #999; background: #fff !important; } #print-area a { color: #000; } #print-area h2 { break-after: avoid; } #print-area .row, #print-area li { break-inside: avoid; } body.safe .safe-banner, body.safe .safe-footer, .skip-link { display: none !important; } body.safe { background: #fff !important; } } /* crisp labels: laid out on whole pixels by js/crisplabels.js */ .icon-item .label.crisp { display: block; width: 100%; padding: 1px 0; text-align: left; background: none !important; outline: none !important; } .icon-item .label.crisp .ln { display: block; width: fit-content; padding: 0 1px; white-space: nowrap; } .icon-item.selected .label.crisp .ln { background: var(--navy); color: #fff; text-shadow: none; } .icon-item.selected .label.crisp .ln:first-child { outline: 1px dotted #ffff00; } .icon-item:focus-visible .label.crisp .ln:first-child { outline: 2px dotted #fff; } .app-window .icon-item:focus-visible .label.crisp .ln:first-child { outline-color: #000; } html.hc .icon-item.selected .label.crisp .ln { background: var(--hc-sel) !important; color: var(--hc-selfg) !important; } #ctx.flip .submenu { left: auto; right: 100%; } #ctx .menu li > button svg { width: 16px !important; height: 16px !important; } #ctx .menu li > button { padding-right: 22px !important; } /* Create Shortcut: a Win98 list box (native