/* ========================================================= AKSHAY.SYS — 1990s phosphor terminal rig Plain CSS. Theme is driven by data-* attributes on . ========================================================= */ :root { --fs: 13px; --ff: "Lucida Console", "Consolas", "Courier New", ui-monospace, monospace; --taskbar-h: 28px; /* overridden per phosphor below */ --fg: #33ff66; --fg-hi: #b9ffcd; --fg-md: #1fb84b; --fg-dm: #0f6b28; --bg: #060a06; --panel: #08120a; --line: #1c4726; --warn: #ffcc33; --crit: #ff4d4d; } html[data-phosphor="green"] { --fg: #33ff66; --fg-hi: #c6ffd8; --fg-md: #1fb84b; --fg-dm: #0f6b28; --bg: #050a06; --panel: #071108; --line: #1b4425; } html[data-phosphor="amber"] { --fg: #ffb000; --fg-hi: #ffe0a3; --fg-md: #c07f00; --fg-dm: #7a4f00; --bg: #0b0700; --panel: #130d02; --line: #4a3208; } html[data-phosphor="cyan"] { --fg: #25e5ff; --fg-hi: #b7f4ff; --fg-md: #14a4bb; --fg-dm: #0b6577; --bg: #03080b; --panel: #061116; --line: #124452; } html[data-phosphor="paper"] { --fg: #e6e6e6; --fg-hi: #ffffff; --fg-md: #a0a0a0; --fg-dm: #666666; --bg: #080808; --panel: #101010; --line: #3a3a3a; } html[data-phosphor="magenta"]{ --fg: #ff5fd2; --fg-hi: #ffc4ee; --fg-md: #c02f9c; --fg-dm: #7a1d63; --bg: #0a050a; --panel: #120912; --line: #4a1a40; } html[data-phosphor="blood"] { --fg: #ff4d4d; --fg-hi: #ffbcbc; --fg-md: #c02a2a; --fg-dm: #7a1a1a; --bg: #0a0404; --panel: #140707; --line: #4a1414; } html[data-fontsize="small"] { --fs: 11px; } html[data-fontsize="normal"] { --fs: 13px; } html[data-fontsize="large"] { --fs: 16px; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--ff); font-size: var(--fs); line-height: 1.5; color: var(--fg); background: var(--bg); overflow: hidden; cursor: default; -webkit-tap-highlight-color: transparent; text-rendering: optimizeSpeed; } html[data-glow="on"] body { text-shadow: 0 0 6px currentColor; } button, input { font: inherit; color: inherit; background: none; border: 0; cursor: default; } ul, ol { list-style: none; } a { color: var(--fg-hi); text-decoration: none; } a:hover { text-decoration: underline; } table { border-collapse: collapse; } canvas { display: block; } ::selection { background: var(--fg); color: var(--bg); text-shadow: none; } :focus { outline: none; } :focus-visible { outline: 1px dashed var(--fg); outline-offset: 2px; } b, strong { color: var(--fg-hi); font-weight: 400; } .hl { color: var(--fg-hi); } .ok, .c-ok { color: var(--fg-hi); } .warn { color: var(--warn); } .c-dim { color: var(--fg-dm); } .c-hl { color: var(--fg-hi); } .tight { line-height: 1.6; } p + p { margin-top: .7em; } /* chunky terminal scrollbars */ .scroll, .term, .tabbody { scrollbar-color: var(--fg-md) var(--panel); scrollbar-width: thin; } .scroll::-webkit-scrollbar, .term::-webkit-scrollbar { width: 12px; height: 12px; } .scroll::-webkit-scrollbar-track, .term::-webkit-scrollbar-track { background: var(--panel); background-image: repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 4px); } .scroll::-webkit-scrollbar-thumb, .term::-webkit-scrollbar-thumb { background: var(--fg-md); border: 1px solid var(--line); } /* ========================================================= CRT hardware ========================================================= */ /* kept low — it must never fight the text for legibility */ .rain { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .09; pointer-events: none; } html[data-rain="off"] .rain { display: none; } .crt-scan { position: fixed; inset: 0; z-index: 60; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px ); mix-blend-mode: multiply; } html[data-scanlines="off"] .crt-scan { display: none; } .crt-vig { position: fixed; inset: 0; z-index: 61; pointer-events: none; background: radial-gradient(ellipse 110% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .75) 100%); } .crt-flick { position: fixed; inset: 0; z-index: 62; pointer-events: none; background: var(--fg); opacity: 0; animation: flick 7s steps(1) infinite; } html[data-flicker="off"] .crt-flick { display: none; } @keyframes flick { 0%, 96%, 100% { opacity: 0; } 97% { opacity: .022; } 98% { opacity: 0; } 99% { opacity: .014; } } /* ========================================================= no-JS ========================================================= */ .noscript { max-width: 620px; margin: 12vh auto; padding: 20px 24px; border: 1px solid var(--line); background: var(--panel); line-height: 1.8; } .noscript h1 { font-size: var(--fs); margin-bottom: 12px; color: var(--fg-hi); } .noscript p { margin-bottom: 8px; } /* ========================================================= boot ========================================================= */ .boot { position: fixed; inset: 0; z-index: 900; background: var(--bg); overflow: hidden; } body:not(.booting) .boot { display: none; } .boot__post { padding: 20px 18px; white-space: pre-wrap; line-height: 1.45; } .boot__post .ok { color: var(--fg-hi); } .boot__post .warn { color: var(--warn); } .boot__post .crit { color: var(--crit); } .boot__post .dim { color: var(--fg-dm); } .boot__skip { position: absolute; right: 14px; bottom: 12px; color: var(--fg-dm); font-size: .85em; } /* ========================================================= carrier lost ========================================================= */ .poweroff { position: fixed; inset: 0; z-index: 950; display: grid; place-content: center; justify-items: center; gap: 14px; background: #000; color: var(--fg); text-align: center; padding: 20px; } .poweroff[hidden] { display: none; } .poweroff__art { font-size: clamp(6px, 1.6vw, 12px); line-height: 1.15; color: var(--fg-md); } /* ========================================================= desktop ========================================================= */ .desktop { position: fixed; inset: 0; z-index: 1; padding-bottom: var(--taskbar-h); overflow: auto; } body.booting .desktop { visibility: hidden; } /* ---------- banner: says who this is before anything is opened ---------- */ .banner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 26px; padding: 14px 18px 12px; border-bottom: 1px solid var(--line); background: linear-gradient(to right, color-mix(in srgb, var(--fg) 8%, transparent), transparent 70%), var(--panel); } /* headline numbers, right where a recruiter looks first */ .vitals { order: 2; flex: 0 1 auto; display: grid; grid-template-columns: repeat(2, auto); gap: 6px 10px; align-self: center; } .vitals > div { border: 1px solid var(--line); padding: 4px 10px; background: var(--bg); text-align: center; } .vitals dt { font-size: .68em; letter-spacing: .12em; color: var(--fg-dm); } .vitals dd { font-size: 1.15em; color: var(--fg-hi); line-height: 1.2; } .banner__id { flex: 1 1 320px; min-width: 0; } .banner__name { font-size: 1.55em; font-weight: 400; letter-spacing: .22em; color: var(--fg-hi); line-height: 1.1; } .banner__role { font-size: .95em; color: var(--fg); letter-spacing: .06em; margin-top: 2px; } .banner__pitch { font-size: .86em; color: var(--fg-md); max-width: 62ch; margin-top: 5px; line-height: 1.5; } .banner__cta { margin-top: 8px; font-size: .86em; color: var(--fg-md); border-top: 1px dashed var(--line); padding-top: 7px; } .linkbtn { color: var(--fg-hi); border-bottom: 1px solid var(--fg-md); padding: 0 1px; } .linkbtn:hover { background: var(--fg); color: var(--bg); text-shadow: none; border-color: var(--fg); } .blink { animation: blink 1.1s steps(2) infinite; color: var(--fg-hi); } @keyframes blink { 50% { opacity: 0; } } /* ---------- dock: grouped, captioned launchers ---------- */ .dock { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 26px; padding: 14px 18px 20px; } .dockgrp { flex: 0 1 auto; } .dockgrp__t { font-size: .72em; font-weight: 400; letter-spacing: .2em; color: var(--fg-dm); padding-bottom: 4px; margin-bottom: 7px; border-bottom: 1px solid var(--line); } .icons { display: flex; flex-wrap: wrap; gap: 6px; } .icon { display: grid; justify-items: center; align-content: start; gap: 3px; width: 104px; padding: 7px 4px 6px; border: 1px solid transparent; text-align: center; } .ico { display: grid; place-items: center; width: 38px; height: 32px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: 1.4em; line-height: 1; } .icon__label { font-size: .8em; line-height: 1.2; color: var(--fg); word-break: break-word; } .icon__cap { font-size: .74em; line-height: 1.2; color: var(--fg-dm); letter-spacing: .02em; } .icon:hover { border-color: var(--line); background: var(--panel); } .icon:hover .ico { border-color: var(--fg); } .icon:hover .icon__cap { color: var(--fg-md); } .icon.is-sel { border-color: var(--fg); background: var(--panel); } .icon.is-sel .ico { background: var(--fg); color: var(--bg); text-shadow: none; border-color: var(--fg); } .icon.is-sel .icon__label { color: var(--fg-hi); } /* the recommended starting point */ .icon--go .ico { border-color: var(--fg); color: var(--fg-hi); } .icon--go .icon__cap { color: var(--fg-md); } .icons--folder { padding: 10px 4px; } /* ========================================================= windows ========================================================= */ /* stop above the status bar — .desktop's padding box would otherwise let absolutely-positioned windows run underneath it */ .windows { position: absolute; left: 0; right: 0; top: 0; bottom: var(--taskbar-h); pointer-events: none; } .win { position: absolute; pointer-events: auto; display: flex; flex-direction: column; min-width: 260px; min-height: 150px; background: var(--bg); border: 1px solid var(--fg-md); box-shadow: 0 0 0 1px var(--bg), 0 6px 26px rgba(0, 0, 0, .8); animation: winOpen .12s steps(3) both; } @keyframes winOpen { from { opacity: .3; } to { opacity: 1; } } .win.is-closing { animation: winClose .1s steps(2) both; } @keyframes winClose { from { opacity: 1; } to { opacity: 0; } } .win.is-min { display: none; } .win.is-max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; } .win.is-active { border-color: var(--fg); } .win__bar { display: flex; align-items: center; gap: 8px; flex: none; height: 22px; padding: 0 4px 0 6px; background: var(--panel); border-bottom: 1px solid var(--fg-md); color: var(--fg-md); user-select: none; } .win.is-active .win__bar { background: var(--fg); color: var(--bg); text-shadow: none; border-bottom-color: var(--fg); } .win.is-active .win__bar b { color: var(--bg); } .win__glyph { flex: none; } .win__title { flex: 1 1 auto; min-width: 0; font-size: .88em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .win__btns { display: flex; gap: 2px; flex: none; } .win__btn { padding: 0 3px; font-size: .88em; line-height: 20px; } .win__btn:hover { background: var(--bg); color: var(--fg); } .win.is-active .win__btn:hover { background: var(--bg); color: var(--fg); text-shadow: 0 0 6px currentColor; } /* plain-English explanation of what the window actually is */ .win__sub { flex: none; padding: 4px 8px; border-bottom: 1px solid var(--line); background: var(--panel); font-size: .8em; color: var(--fg-md); letter-spacing: .02em; } .win__sub::before { content: "// "; color: var(--fg-dm); } .win__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 6px; gap: 6px; } .pane--pad { padding: 10px 12px; } .scroll { overflow: auto; flex: 1 1 auto; min-height: 0; } .win__resize { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; color: var(--fg-md); background: linear-gradient(135deg, transparent 0 50%, currentColor 50% 58%, transparent 58% 70%, currentColor 70% 78%, transparent 78%); } .win.is-max .win__resize { display: none; } /* ========================================================= widgets ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; border: 1px solid var(--fg-md); color: var(--fg); background: var(--panel); white-space: nowrap; font-size: .9em; } .btn:hover { border-color: var(--fg); background: var(--fg); color: var(--bg); text-shadow: none; } .btn:active { transform: translate(1px, 1px); } .btn--go { border-color: var(--fg); color: var(--fg-hi); } .btn--sm { padding: 1px 6px; font-size: .82em; } .row-end { display: flex; gap: 6px; justify-content: flex-end; flex: none; padding-top: 2px; flex-wrap: wrap; } .input { padding: 4px 8px; border: 1px solid var(--fg-md); background: var(--panel); color: var(--fg-hi); letter-spacing: .3em; width: 8em; } .input:focus { border-color: var(--fg); } .group { border: 1px solid var(--line); padding: 10px 12px 12px; margin-bottom: 14px; } .group > legend { padding: 1px 7px; margin-left: -2px; background: var(--fg); color: var(--bg); text-shadow: none; font-size: .74em; letter-spacing: .16em; } .group:last-child { margin-bottom: 0; } .bullets li { position: relative; padding-left: 16px; margin-bottom: 6px; line-height: 1.55; } .bullets li::before { content: ">"; position: absolute; left: 0; color: var(--fg-dm); } /* the one-line headline inside a window */ .hl { display: block; color: var(--fg-hi); letter-spacing: .06em; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--line); } .apphead { display: flex; flex-wrap: wrap; gap: 4px 18px; flex: none; padding: 3px 6px; border: 1px solid var(--line); background: var(--panel); font-size: .84em; color: var(--fg-md); } .apphead b { color: var(--fg-hi); } .statusbar { flex: none; padding: 3px 6px; border: 1px solid var(--line); font-size: .82em; color: var(--fg-dm); } .term { background: var(--panel); border: 1px solid var(--line); padding: 8px 10px; white-space: pre-wrap; word-break: break-word; line-height: 1.5; } .term--log pre { white-space: pre; } .term pre { white-space: inherit; } .ascii { color: var(--fg-hi); line-height: 1.05; margin-bottom: 10px; font-size: .9em; overflow-x: auto; } .meter { position: relative; flex: none; height: 16px; border: 1px solid var(--line); background: var(--panel); } .meter > span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--fg) 0 6px, transparent 6px 8px); transition: width .12s linear; } .meter > i { position: absolute; inset: 0; display: grid; place-items: center; font-size: .78em; font-style: normal; color: var(--fg-hi); } /* ---------- tables ---------- */ .grid { width: 100%; font-size: .9em; } .grid th, .grid td { padding: 3px 8px; border: 1px solid var(--line); text-align: left; vertical-align: top; } .grid th { color: var(--fg-md); white-space: nowrap; font-weight: 400; letter-spacing: .06em; } .grid .num { color: var(--fg-hi); white-space: nowrap; } /* ---------- records ---------- */ .rec { margin-bottom: 12px; } .rec__bar { padding: 3px 8px; margin-bottom: 4px; border: 1px solid currentColor; font-size: .86em; letter-spacing: .08em; } .rec__bar--crit { color: var(--crit); } .rec__bar--high { color: var(--warn); } /* ---------- keyring ---------- */ .keys li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); } .keys li:last-child { border-bottom: 0; } .key__g { flex: none; color: var(--fg-hi); } .key__b { flex: 1 1 auto; min-width: 0; display: grid; } .key__b i { font-style: normal; color: var(--fg-dm); font-size: .85em; } .tag { flex: none; padding: 1px 7px; border: 1px solid var(--fg-md); font-size: .78em; color: var(--fg-md); } .tag--ok { color: var(--fg-hi); border-color: var(--fg); } .tag--wip { color: var(--warn); border-color: var(--warn); } /* ---------- files ---------- */ .files li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 4px; border-bottom: 1px solid var(--line); } .files li:last-child { border-bottom: 0; } .files__n { flex: 1 1 220px; min-width: 0; color: var(--fg-hi); } .files__m { color: var(--fg-dm); font-size: .85em; } /* ---------- channels ---------- */ .chan li { display: flex; gap: 12px; align-items: baseline; padding: 4px 0; } .chan__k { flex: none; width: 62px; color: var(--fg-dm); font-size: .82em; letter-spacing: .1em; } .chan__v { flex: 1 1 auto; min-width: 0; color: var(--fg-hi); overflow-wrap: anywhere; } /* ---------- settings ---------- */ .swatches { display: flex; flex-wrap: wrap; gap: 6px; } .sw { display: flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line); font-size: .84em; color: var(--fg-md); } .sw::before { content: ""; width: 11px; height: 11px; flex: none; background: var(--c, var(--fg)); border: 1px solid rgba(0, 0, 0, .5); } .sw--plain::before { display: none; } .sw:hover { border-color: var(--fg); color: var(--fg); } .sw.is-on { border-color: var(--fg); color: var(--fg-hi); background: var(--panel); } .sw.is-on::after { content: " <"; color: var(--fg); } .toggles li { margin-bottom: 3px; } .tog { display: flex; align-items: center; gap: 8px; width: 100%; padding: 3px 4px; font-size: .88em; color: var(--fg-md); } .tog i { width: 24px; flex: none; border: 1px solid var(--fg-md); text-align: center; font-style: normal; font-size: .8em; } .tog i::before { content: "OFF"; } .tog[aria-pressed="true"] { color: var(--fg-hi); } .tog[aria-pressed="true"] i { border-color: var(--fg); background: var(--fg); color: var(--bg); text-shadow: none; } .tog[aria-pressed="true"] i::before { content: "ON"; } .tog:hover { color: var(--fg); } /* ---------- games ---------- */ .game { width: 100%; max-width: 320px; margin: 0 auto; flex: none; aspect-ratio: 1 / 1; height: auto; border: 1px solid var(--fg-md); background: var(--panel); image-rendering: pixelated; } .game__hint { flex: none; font-size: .82em; color: var(--fg-dm); text-align: center; } .dpad { display: grid; justify-items: center; gap: 3px; flex: none; } .dpad > div { display: flex; gap: 3px; } .dpad .btn { min-width: 38px; } .mines { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; flex: none; width: 100%; max-width: 330px; margin: 0 auto; } .cell { aspect-ratio: 1 / 1; display: grid; place-items: center; border: 1px solid var(--line); background: var(--panel); font-size: .9em; line-height: 1; } .cell:hover { border-color: var(--fg); } .cell.is-open { background: var(--bg); border-color: var(--line); color: var(--fg-hi); } .cell.is-flag { color: var(--warn); border-color: var(--warn); } .cell.is-mine { color: var(--crit); border-color: var(--crit); } .cell[data-n="1"] { color: var(--fg-md); } .cell[data-n="2"] { color: var(--fg); } .cell[data-n="3"] { color: var(--warn); } .cell[data-n="4"], .cell[data-n="5"], .cell[data-n="6"], .cell[data-n="7"], .cell[data-n="8"] { color: var(--crit); } .crackrow { display: flex; gap: 6px; flex-wrap: wrap; flex: none; align-items: center; } /* ========================================================= status bar ========================================================= */ .taskbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; height: var(--taskbar-h); display: flex; align-items: stretch; gap: 3px; padding: 2px 3px; background: var(--panel); border-top: 1px solid var(--fg-md); } .startbtn { display: flex; align-items: center; gap: 6px; flex: none; padding: 0 10px; border: 1px solid var(--fg-md); font-size: .88em; letter-spacing: .1em; } .startbtn:hover, .startbtn[aria-expanded="true"] { background: var(--fg); color: var(--bg); text-shadow: none; border-color: var(--fg); } .startbtn__glyph { font-size: 1.1em; } .tasks { flex: 1 1 auto; min-width: 0; display: flex; gap: 3px; overflow: hidden; } .task { display: flex; align-items: center; gap: 6px; width: 168px; min-width: 0; padding: 0 8px; border: 1px solid var(--line); color: var(--fg-md); font-size: .84em; } .task span { flex: 1 1 auto; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .task:hover { border-color: var(--fg); color: var(--fg); } .task.is-on { border-color: var(--fg); color: var(--bg); background: var(--fg); text-shadow: none; } .tray { display: flex; align-items: center; gap: 10px; flex: none; padding: 0 8px; border: 1px solid var(--line); font-size: .82em; color: var(--fg-md); } .tray b { color: var(--fg-hi); } .tray__btn:hover { color: var(--fg); } .tray__clock { min-width: 62px; text-align: right; color: var(--fg-hi); } /* ========================================================= main menu ========================================================= */ .startmenu { position: fixed; left: 3px; bottom: var(--taskbar-h); z-index: 600; width: 268px; max-height: calc(100vh - var(--taskbar-h) - 10px); display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--fg); box-shadow: 0 -4px 26px rgba(0, 0, 0, .8); } .startmenu[hidden] { display: none; } .startmenu__head { flex: none; padding: 4px 8px; background: var(--fg); color: var(--bg); text-shadow: none; font-size: .84em; letter-spacing: .12em; text-align: center; } .startmenu__list { overflow: auto; padding: 4px 0; } .sm-group { padding: 6px 8px 2px; font-size: .74em; letter-spacing: .18em; color: var(--fg-dm); border-bottom: 1px solid var(--line); margin-bottom: 3px; } .sm-item { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 3px 10px; text-align: left; font-size: .88em; white-space: nowrap; } .sm-item b { flex: none; width: 1.1em; text-align: center; color: var(--fg-md); } .sm-item i { margin-left: auto; font-style: normal; font-size: .82em; color: var(--fg-dm); } .sm-item:hover, .sm-item:focus-visible { background: var(--fg); color: var(--bg); text-shadow: none; } .sm-item:hover b, .sm-item:hover i { color: var(--bg); } /* ========================================================= responsive ========================================================= */ @media (max-width: 860px) { .icons { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fill, 92px); grid-auto-rows: 74px; } .task { width: auto; max-width: 140px; } } @media (max-width: 620px) { :root { --taskbar-h: 32px; } .win { left: 0 !important; top: 0 !important; width: 100% !important; height: calc(100% - var(--taskbar-h)) !important; } .win__resize { display: none; } .startmenu { left: 0; width: 100%; } .sm-item { padding: 7px 10px; } .task { max-width: 44px; } .task span { display: none; } .tray__stat { display: none; } .ascii { font-size: .62em; } .term--log pre { white-space: pre-wrap; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .crt-flick { display: none; } }