/* ===================================================================== desktop.css — the desktop, icons, taskbar, start menu, and the styles for the content that lives inside windows. ================================================================== */ /* Interface scale. `zoom` is the one property that scales layout rather than just painting, so the desktop keeps filling the viewport while its internal coordinates shrink — a 2560px window at 1.5 lays out as 1707px of desktop. Applied to each full-screen surface, never to , because .zoom-frame does its maths in viewport pixels and must stay unscaled. See UI.scale() in wm.js. */ .screen, .boot, .shutdown, .bsod, .cli { zoom: var(--ui-scale, 1); } .screen { position: fixed; inset: 0; display: flex; flex-direction: column; /* the bottom inset is paid by the taskbar, so its grey runs to the edge */ padding: var(--safe-top) var(--safe-right) 0 var(--safe-left); } .desktop { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--desktop-bg); } /* Icons are placed by main.js, not by flow, so they can be dragged. touch-action:none here (not on .desktop) lets a finger drag out a selection box without the browser treating it as a page pan or a pull-to-refresh. Windows live in .window-layer, a sibling, so their contents still scroll normally. */ .icon-layer { position: absolute; inset: 0; touch-action: none; -webkit-touch-callout: none; } /* the rubber-band box you drag across the desktop to pick out icons */ .marquee { position: absolute; z-index: 4; border: 1px dotted #fff; background: rgba(255, 255, 255, .12); pointer-events: none; } .window-layer { position: absolute; inset: 0; pointer-events: none; } .window-layer > * { pointer-events: auto; } /* --- icon labels (desktop icons and folder items share these) ----- The label box is a full-width block so the text centres under the icon; the highlight lives on an inner inline span so it hugs the text instead of painting a slab across the whole tile. */ .desktop-icon .icon-label, .folder-item .icon-label { display: block; width: 100%; overflow: hidden; line-height: 1.35; text-align: center; /* Names stay on one line. The tiles below are sized so ordinary two-word names ("This Machine", "Wastebasket") fit comfortably; anything genuinely long gets an ellipsis rather than wrapping. */ white-space: nowrap; text-overflow: ellipsis; } .desktop-icon .icon-label-text, .folder-item .icon-label-text { display: inline; padding: 1px 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* these icons show focus on the label itself, so suppress the generic dotted ring the base button rule would draw */ .desktop-icon:focus-visible, .folder-item:focus-visible { outline: none; } /* --- desktop icons ----------------------------------------------- */ .desktop-icon { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; min-width: 0; padding: 4px 2px; background: none; box-shadow: none; color: #fff; cursor: default; touch-action: none; /* so a finger drags the icon, not the page */ } .desktop-icon.is-dragging { z-index: 5; opacity: .72; } /* the Wastebasket lights up when something is dragged over it */ .desktop-icon.drop-target .icon-art::after { opacity: .55; } .desktop-icon.drop-target .icon-label-text { background: var(--select); outline: 1px dotted #d8d8d8; outline-offset: -1px; text-shadow: none; } .desktop-icon .icon-art { position: relative; line-height: 0; } .desktop-icon .icon-art::after { content: ""; position: absolute; inset: 0; background: #7a7aff; mix-blend-mode: multiply; opacity: 0; } .desktop-icon .icon-label-text { text-shadow: 1px 1px 0 rgba(0, 0, 0, .8); } .desktop-icon.selected .icon-art::after { opacity: .55; } .desktop-icon.selected .icon-label-text, .desktop-icon:focus-visible .icon-label-text { background: var(--select); outline: 1px dotted #d8d8d8; outline-offset: -1px; text-shadow: none; } /* --- resize handles ---------------------------------------------- */ .rs { position: absolute; z-index: 3; } .rs-n { top: -2px; left: 8px; right: 8px; height: 5px; cursor: ns-resize; } .rs-s { bottom: -2px; left: 8px; right: 8px; height: 5px; cursor: ns-resize; } .rs-e { right: -2px; top: 8px; bottom: 8px; width: 5px; cursor: ew-resize; } .rs-w { left: -2px; top: 8px; bottom: 8px; width: 5px; cursor: ew-resize; } .rs-nw { top: -2px; left: -2px; width: 11px; height: 11px; cursor: nwse-resize; } .rs-ne { top: -2px; right: -2px; width: 11px; height: 11px; cursor: nesw-resize; } .rs-sw { bottom: -2px; left: -2px; width: 11px; height: 11px; cursor: nesw-resize; } .rs-se { bottom: -2px; right: -2px; width: 11px; height: 11px; cursor: nwse-resize; } .window.maximized .rs, .window.no-resize .rs { display: none; } body.dragging, body.dragging * { user-select: none; cursor: inherit; } /* --- taskbar ----------------------------------------------------- */ .taskbar { position: relative; z-index: 8000; display: flex; align-items: center; gap: 4px; flex: none; height: calc(var(--taskbar-h) + var(--safe-bottom)); padding: 2px 3px calc(2px + var(--safe-bottom)); background: var(--face); box-shadow: inset 0 1px var(--hilite), inset 0 2px var(--face-light); } .start-button { display: flex; align-items: center; gap: 4px; min-width: 0; height: 22px; padding: 0 6px 0 4px; font-weight: bold; } .start-button[aria-expanded="true"] { box-shadow: var(--in); padding: 1px 5px 0 5px; } .taskbar-divider { width: 0; height: 20px; flex: none; border-left: 1px solid var(--shadow); border-right: 1px solid var(--hilite); } .task-list { display: flex; gap: 3px; flex: 1; min-width: 0; overflow: hidden; } .task-button { display: flex; align-items: center; gap: 4px; flex: 0 1 160px; min-width: 40px; height: 22px; padding: 0 6px; text-align: left; } .task-button span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .task-button.active { box-shadow: var(--in); background-image: linear-gradient(45deg, #d8d8d8 25%, transparent 25%, transparent 75%, #d8d8d8 75%), linear-gradient(45deg, #d8d8d8 25%, transparent 25%, transparent 75%, #d8d8d8 75%); background-size: 2px 2px; background-position: 0 0, 1px 1px; font-weight: bold; } .task-button.active span { padding: 1px 0 0 1px; } .tray { display: flex; align-items: center; gap: 6px; flex: none; height: 22px; padding: 0 6px; box-shadow: var(--in-thin); } .tray-ico { opacity: .85; } button.clock { min-width: 54px; padding: 2px 4px; background: none; box-shadow: none; text-align: center; } button.clock[aria-expanded="true"] { box-shadow: var(--in-thin); } /* --- calendar flyout --------------------------------------------- */ .calendar { position: absolute; right: calc(2px + var(--safe-right)); bottom: calc(var(--taskbar-h) + var(--safe-bottom) - 2px); z-index: 8500; width: 196px; padding: 4px; background: var(--face); box-shadow: var(--out); animation: unfold-up 130ms steps(7, end); } .calendar[hidden] { display: none; } .cal-head { display: flex; align-items: center; gap: 4px; padding: 1px 1px 5px; } .cal-title { flex: 1; min-width: 0; text-align: center; font-weight: bold; } .cal-nav { display: grid; place-items: center; width: 20px; height: 18px; min-width: 0; padding: 0; } .cal-nav:active { padding: 1px 0 0 1px; } .cal-nav.back svg { transform: scaleX(-1); } .cal-grid { width: 100%; border-collapse: collapse; background: #fff; box-shadow: var(--in); } .cal-grid th { padding: 3px 0 2px; font-weight: normal; color: var(--select); border-bottom: 1px solid #d8d8d8; } .cal-grid td { padding: 0; } .cal-day { width: 100%; min-width: 0; padding: 3px 0; background: none; box-shadow: none; text-align: center; } .cal-day:not(:disabled):hover { background: #d8d8d8; } .cal-day.dim { color: #a0a0a0; } /* today is ringed, the day you picked is filled — the way the era's date pickers distinguished the two */ .cal-day.today { box-shadow: inset 0 0 0 1px #c02020; } .cal-day.picked, .cal-day.picked:not(:disabled):hover { background: var(--select); color: var(--select-fg); } .cal-foot { display: flex; align-items: center; gap: 6px; padding: 6px 1px 1px; } .cal-foot span { flex: 1; min-width: 0; line-height: 1.3; } .cal-today { min-width: 0; padding: 3px 8px; } .cal-today:active { padding: 4px 7px 2px 9px; } /* --- start menu -------------------------------------------------- */ .start-menu { position: absolute; left: calc(2px + var(--safe-left)); bottom: calc(var(--taskbar-h) + var(--safe-bottom) - 2px); z-index: 8500; display: flex; width: min(340px, calc(100% - 8px)); max-height: calc(100% - var(--taskbar-h) - var(--safe-bottom) - var(--safe-top) - 8px); padding: 3px; background: var(--face); box-shadow: var(--out); } .start-menu[hidden] { display: none; } .start-banner { flex: none; width: 26px; background: linear-gradient(180deg, #000080, #1084d0); color: #c0c0c0; } .start-banner span { display: block; padding: 8px 0; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 16px; font-weight: bold; letter-spacing: 1px; white-space: nowrap; } .start-banner b { color: #fff; } .start-content { display: flex; flex-direction: column; min-width: 0; min-height: 0; flex: 1; } .start-search { padding: 8px 7px 3px; } .start-search label { display: block; font-weight: bold; margin-bottom: 5px; } .start-search-field { display: flex; gap: 4px; } .start-search-field input { width: 100%; min-width: 0; padding: 7px; } .start-search-field button { flex: none; width: 28px; font-size: 18px; } .start-search-field button[hidden], .start-items[hidden] { display: none; } .start-search-status { margin: 3px 7px 7px; font-size: 11px; line-height: 1.4; height: 4.2em; flex: none; overflow-y: auto; } /* The ordinary menu sets the height; results occupy that same space. */ .start-list { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .start-list > .start-items { overflow-y: auto; min-height: 0; overscroll-behavior: contain; } .start-list > #start-items[hidden] { display: block; visibility: hidden; pointer-events: none; } .start-list > .start-search-results { position: absolute; inset: 0; margin: 0; } .start-search-results li > button { padding: 8px; } .start-search-results li > button .search-copy { white-space: normal; } .search-copy strong, .search-copy small { display: block; overflow-wrap: anywhere; } .search-copy strong { font-weight: normal; } .search-copy small { margin-top: 3px; font-size: 10px; opacity: .8; } .start-items { flex: 1; min-width: 0; padding: 2px 0 2px 3px; } .start-items li > button { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 5px 8px; background: none; box-shadow: none; text-align: left; } .start-items li > button:not(:disabled):hover, .start-items li > button:not(:disabled):focus-visible { background: var(--select); color: var(--select-fg); outline: none; } .start-items li > button span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* --- context menu ------------------------------------------------ */ .context-menu { position: absolute; z-index: 8600; min-width: 150px; padding: 2px; background: var(--face); box-shadow: var(--out); } .context-menu[hidden] { display: none; } .context-menu li { position: relative; } /* the New ‣ submenu */ .context-menu .has-sub .sub-arrow { margin-left: auto; } .context-menu .has-sub:hover .sub-arrow { color: var(--select-fg); } .sub-menu { left: 100%; top: -3px; min-width: 150px; } .sub-menu.flip { left: auto; right: 100%; } /* --- Jotter ----------------------------------------------------- */ .window-body.notepad-body { display: flex; overflow: hidden; } textarea.notepad { flex: 1; min-width: 0; padding: 4px 5px; border: none; background: #fff; box-shadow: none; font-family: "Lucida Console", "Courier New", monospace; font-size: 12px; line-height: 1.45; resize: none; outline: none; } textarea.notepad:focus { outline: none; } /* --- small dialogs ------------------------------------------------ */ .contact-honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } #contact-status { line-height: 1.5; overflow-wrap: anywhere; } .dialog-message { margin-bottom: 10px; line-height: 1.5; } .dialog-input { width: 100%; } /* --- boot + shutdown --------------------------------------------- */ .boot { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; background: #000; transition: opacity .35s linear; } .boot.gone { opacity: 0; pointer-events: none; } .boot[hidden] { display: none; } .boot-inner { text-align: center; color: #fff; } .boot-logo { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 34px; font-weight: bold; letter-spacing: -1px; } .boot-logo b { color: #ffc72d; } .boot-logo .ico32 { width: 40px; height: 40px; } .boot-bar { width: 240px; height: 14px; margin: 22px auto 10px; padding: 2px; background: #000; box-shadow: var(--in); } .boot-bar i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #1084d0 0 8px, #000 8px 10px); animation: boot-fill 1.5s steps(12, end) forwards; } @keyframes boot-fill { to { width: 100%; } } .boot-note { color: #b8b8b8; } .shutdown { position: fixed; inset: 0; z-index: 9600; display: grid; place-items: center; align-content: center; gap: 26px; background: #000; color: #ffb000; text-align: center; } .shutdown[hidden] { display: none; } .shutdown-text { font-size: 26px; line-height: 1.5; } .link-button { min-width: 0; padding: 0; background: none; box-shadow: none; color: #7a7a7a; text-decoration: underline; cursor: pointer; } .link-button:hover { color: #b8b8b8; } /* ===================================================================== Content inside windows ================================================================== */ /* a text document: About, Welcome, project write-ups */ .doc { max-width: 62ch; padding: 18px 22px; line-height: 1.55; } .doc h1 { margin-bottom: 4px; font-size: 20px; letter-spacing: -.3px; } .doc h2 { margin: 20px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: #000080; } .doc p { margin-bottom: 10px; } .doc .meta { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #c0c0c0; color: #6a6a6a; } .doc ul { margin: 0 0 10px; padding-left: 4px; } .doc ul li { position: relative; padding-left: 16px; margin-bottom: 4px; } .doc ul li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 5px; height: 5px; background: #000080; } .doc .sig { margin-top: 18px; color: #6a6a6a; } .doc blockquote { margin: 0 0 12px; padding: 8px 12px; border-left: 4px solid #000080; background: #f0f0f0; } .specs { width: 100%; margin-top: 14px; border-collapse: collapse; } .specs th, .specs td { padding: 5px 8px; border: 1px solid #c0c0c0; text-align: left; vertical-align: top; } .specs th { width: 34%; background: #ececec; font-weight: bold; } /* a dialog-style pane on grey */ .pane { padding: 14px; } .window-body.photo-viewer { display:flex; flex-direction:column; min-height:0; background:#161616; color:#eee; padding:0; overflow:hidden; } .photo-controls { display:flex; gap:8px; padding:8px; background:var(--face); color:#000; } .photo-stage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:auto; } .photo-stage img { display:block; max-width:100%; max-height:100%; object-fit:contain; } .photo-caption { margin:0; padding:8px 12px; overflow-wrap:anywhere; max-height:7em; overflow:auto; } .photo-caption a { color:inherit; } .folder-item .album-thumb { width:64px; height:48px; object-fit:contain; } .desktop-shortcut .icon-art { position:relative; } .desktop-shortcut .icon-art::after { content:'↗'; position:absolute; left:-2px; bottom:-2px; background:white; color:#000080; border:1px solid #333; font:bold 12px/12px sans-serif; width:12px; height:12px; } .pane-intro { margin-bottom: 12px; line-height: 1.5; } .pane-foot { line-height: 1.7; } .about-os-head { display: flex; align-items: center; gap: 12px; line-height: 1.5; } .fine-print { margin-top: 12px; color: #5a5a5a; line-height: 1.45; } .about-os p { margin-bottom: 8px; line-height: 1.5; } /* ===================================================================== Explorer chrome — toolbar, address bar, info pane, view modes ================================================================== */ .explorer-head { flex: none; } /* The toolbar is wider than a narrow window can show. Let it scroll inside its own box rather than painting outside the window frame — flex items will not shrink below their content, so without this they spill straight past the border. */ .toolbar { display: flex; align-items: stretch; gap: 1px; padding: 2px 3px; border-bottom: 1px solid var(--face); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .toolbar::-webkit-scrollbar { height: 0; } .tb-group { display: flex; align-items: stretch; } .tb-sep { width: 0; margin: 2px 4px; flex: none; border-left: 1px solid var(--shadow); border-right: 1px solid var(--hilite); } .tb-item { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 3px 6px 2px; background: none; box-shadow: none; white-space: nowrap; } /* Windows only raises toolbar buttons under the cursor */ .tb-item:not(:disabled):hover, .tb-drop:not(:disabled):hover { box-shadow: var(--out-thin); } .tb-item:not(:disabled):active, .tb-drop:not(:disabled):active { box-shadow: var(--in-thin); padding: 4px 5px 1px 7px; } .tb-item:disabled { color: var(--disabled); text-shadow: 1px 1px 0 var(--hilite); } .tb-item:disabled svg { filter: grayscale(1); opacity: .4; } .tb-drop { display: grid; place-items: center; width: 13px; min-width: 0; padding: 0; background: none; box-shadow: none; } .tb-drop:disabled { opacity: .35; } .ico20 { width: 20px; height: 20px; flex: none; } .ico8 { width: 8px; height: 8px; flex: none; } .address-bar { display: flex; align-items: center; gap: 6px; padding: 2px 4px 4px; } .address-label { flex: none; padding-left: 2px; } .address-field { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; height: 22px; padding: 0 0 0 3px; background: #fff; box-shadow: var(--in); text-align: left; } .address-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .address-arrow { display: grid; place-items: center; width: 17px; height: 18px; flex: none; margin-right: 2px; background: var(--face); box-shadow: var(--out); } /* --- the browser -------------------------------------------------- */ .address-input { flex: 1; min-width: 0; height: 22px; padding: 0 4px; background: #fff; box-shadow: var(--in); } .address-go { flex: none; min-width: 0; height: 22px; padding: 0 10px; } .window-body.browser-body { overflow: hidden; padding: 0; background: #fff; } .browser-frame { display: block; width: 100%; height: 100%; border: none; background: #fff; } .browser-error { padding: 22px 26px; max-width: 60ch; } .browser-error h1 { margin: 0 0 12px; font-size: 19px; letter-spacing: -.3px; } .browser-error p { margin: 0 0 12px; line-height: 1.55; } .browser-error .button-row { justify-content: flex-start; margin: 16px 0; } .browser-hint { color: #6a6a6a; } /* Aperture tabs retain their iframe while inactive, including scroll position. */ .browser-tabs { display:flex; gap:4px; padding:5px 4px 0; background:#c0c0c0; border-bottom:1px solid #808080; } .browser-tab-list { display:flex; flex:1; min-width:0; gap:3px; overflow-x:auto; scrollbar-width:thin; } .browser-tab { display:flex; flex:0 0 175px; min-width:0; align-items:center; background:#b1b1b1; border:1px solid; border-color:#fff #555 #808080 #fff; border-radius:3px 3px 0 0; } .browser-tab.active { background:#dfdfdf; border-bottom-color:#dfdfdf; } .browser-tab-select { flex:1; min-width:0; height:29px; padding:4px 8px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:0; box-shadow:none; background:transparent; } .browser-tab.active .browser-tab-select { font-weight:bold; } .browser-tab-close { flex:none; min-width:0; width:23px; height:23px; padding:0; margin:0 3px; font-size:17px; line-height:1; border:0; box-shadow:none; background:transparent; } .browser-tab-close:hover { background:#c25a50; color:#fff; } .browser-tab-add { flex:none; min-width:0; width:30px; height:28px; padding:0; font-size:20px; margin-bottom:3px; } .browser-tab-panel { width:100%; height:100%; overflow:auto; } .browser-tab-panel[hidden] { display:none!important; } @media(max-width:760px) { .browser-tab { flex-basis:155px; } .browser-tab-select { height:36px; } .browser-tab-close { width:30px; height:30px; } .browser-tab-add { width:36px; height:36px; } } /* content area: info pane on the left, files on the right */ .window-body.explorer-body { overflow: hidden; padding: 0; } .explorer-panes { display: flex; height: 100%; min-height: 0; } .web-pane { flex: none; width: 168px; padding: 14px 12px; border-right: 1px solid #d8d8d8; overflow: auto; } .web-pane > .ico32 { margin-bottom: 6px; } .web-pane h2 { font-size: 17px; font-weight: bold; letter-spacing: -.3px; overflow-wrap: anywhere; } .web-rule { height: 2px; margin: 6px 0 10px; background: linear-gradient(90deg, #000080, rgba(0, 0, 128, 0)); } .web-desc { line-height: 1.5; color: #333; } .web-desc p { margin-top: 6px; } .web-type { margin-top: 3px; color: #6a6a6a; } .web-tags { color: #6a6a6a; } .file-pane { flex: 1; min-width: 0; overflow: auto; } .doc-pane { padding: 0; height: 100%; min-height: 0; overflow: auto; overscroll-behavior: contain; } .desktop-admin-bar { position:absolute; z-index:8900; bottom:calc(var(--taskbar-h) + 8px); left:50%; transform:translateX(-50%); display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:max-content; max-width:95%; padding:8px; background:var(--face); box-shadow:var(--out); } .desktop-admin-bar[hidden] { display:none; } .desktop-admin-bar span { max-width:340px; } .desktop-admin-bar button { padding:6px 10px; } /* small icons and list */ .file-rows { display: flex; padding: 6px; gap: 1px; } .file-rows.small { flex-wrap: wrap; align-content: flex-start; } .file-rows.list { flex-direction: column; flex-wrap: wrap; align-content: flex-start; height: 100%; } .file-row { display: flex; align-items: center; gap: 5px; width: 160px; min-width: 0; padding: 2px 4px; background: none; box-shadow: none; text-align: left; } .file-row:focus-visible { outline: none; } .file-row .icon-label-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 1px 3px; } .file-row.selected .icon-label-text, .file-row:focus-visible .icon-label-text { background: var(--select); color: var(--select-fg); outline: 1px dotted #d8d8d8; outline-offset: -1px; } /* details */ .details-view { width: 100%; border-collapse: collapse; } .details-view th { position: sticky; top: 0; padding: 3px 8px; background: var(--face); box-shadow: var(--out-thin); text-align: left; font-weight: normal; white-space: nowrap; } .details-view td { padding: 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .details-view td:first-child { display: flex; align-items: center; gap: 5px; } .details-view tr.file-row { display: table-row; } .details-view tr:focus-visible { outline: none; } /* folder / icon view — portfolio, projects, my computer */ .folder-view { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; min-height: 100%; padding: 10px; } .folder-view.empty { display: grid; place-items: center; color: #6a6a6a; } .folder-item { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 110px; min-width: 0; padding: 6px 4px; background: none; box-shadow: none; cursor: default; } .folder-item .icon-art { position: relative; line-height: 0; } .folder-item .icon-art::after { content: ""; position: absolute; inset: 0; background: #7a7aff; mix-blend-mode: multiply; opacity: 0; } .folder-item.selected .icon-art::after { opacity: .55; } .folder-item.selected .icon-label-text, .folder-item:focus-visible .icon-label-text { background: var(--select); color: var(--select-fg); outline: 1px dotted #d8d8d8; outline-offset: -1px; } /* project write-up extras */ .doc .tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 14px; } .doc .tags li { padding: 2px 7px; background: #c0c0c0; box-shadow: var(--out-thin); } .doc .tags li::before { display: none; } .doc .tags li { padding-left: 7px; margin-bottom: 0; } .doc .shot { display: grid; place-items: center; height: 150px; margin-bottom: 14px; background: repeating-conic-gradient(#e8e8e8 0% 25%, #d0d0d0 0% 50%) 0 0 / 16px 16px; box-shadow: var(--in); color: #6a6a6a; } /* interface scale slider — the era's "Desktop area" control */ .scale-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; } .scale-value { flex: none; min-width: 44px; text-align: right; } .scale-note { display: flex; align-items: center; gap: 10px; } .scale-note span { flex: 1; min-width: 0; color: #5a5a5a; line-height: 1.35; } .scale-note button { min-width: 0; padding: 4px 12px; } input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 20px; padding: 0; background: none; box-shadow: none; } input[type="range"]:focus { outline: 1px dotted #000; outline-offset: 1px; } input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--face); box-shadow: var(--in-thin); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 20px; margin-top: -8px; background: var(--face); box-shadow: var(--out); } input[type="range"]::-moz-range-track { height: 4px; background: var(--face); box-shadow: var(--in-thin); } input[type="range"]::-moz-range-thumb { width: 9px; height: 18px; border: none; border-radius: 0; background: var(--face); box-shadow: var(--out); } /* wallpaper picker */ .swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; } .swatch { width: 46px; height: 34px; min-width: 0; padding: 0; box-shadow: var(--out-thin); } .swatch.on { box-shadow: var(--out-thin), 0 0 0 2px #000; } .preview-screen { display: grid; place-items: end center; height: 110px; margin: 0 auto 12px; padding: 8px 8px 0; width: 170px; background: var(--face); box-shadow: var(--out); } .preview-glass { width: 100%; height: 100%; box-shadow: var(--in); } /* ===================================================================== Motion — short, mechanical, and stepped rather than smooth, which is how this era actually moved. Nothing here eases, floats, or bounces. ================================================================== */ /* The wireframe that flies between an icon and its window — the XOR rubber band Windows drew when animating minimise and maximise. mix-blend-mode: difference inverts whatever it passes over. */ .zoom-frame { position: fixed; z-index: 9000; border: 2px solid #fff; mix-blend-mode: difference; pointer-events: none; } /* menus unfold downward instead of fading */ .menu-pop, .context-menu:not([hidden]) { animation: unfold 110ms steps(6, end); } @keyframes unfold { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } /* the Start menu rises out of the taskbar */ .start-menu:not([hidden]) { animation: unfold-up 130ms steps(7, end); } @keyframes unfold-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } /* Explorer content settles in when you navigate or switch views */ .explorer-panes, .doc-pane { animation: pane-in 120ms ease-out; } @keyframes pane-in { from { opacity: 0; } to { opacity: 1; } } /* pressing a title bar button should feel like a physical key */ .title-bar-controls button:active svg { transform: translate(1px, 1px); } .shutdown:not([hidden]) { animation: fade-in 600ms linear; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* ===================================================================== The first-visit tour z-order matters here: the dim sits at 7900, under the taskbar (8000), and the icon layer is lifted to 7950 — so the two things worth seeing stay bright while the windows behind them go dark. Callouts sit above everything at 8700. ================================================================== */ /* The wrapper is deliberately `static` and has NO z-index. Giving it either would make it a stacking context, trapping its children at that one level — the icon layer lifted to 7950 then paints straight over the card. Left static, each child competes directly with .desktop and .taskbar, which is what the numbers below assume. */ .tour { position: static; } .tour[hidden] { display: none; } body.tour-on .icon-layer { z-index: 7950; } body.tour-on .icon-layer, body.tour-on .taskbar { pointer-events: none; } body.tour-on .window-layer { opacity: .3; filter: saturate(.35); transition: opacity 160ms linear; } .tour-dim { position: absolute; inset: 0; z-index: 7900; background: rgba(4, 12, 16, .72); } .tour-ring { position: absolute; z-index: 8700; border: 2px solid #fff; box-shadow: 0 0 0 2px #ffb43a, 0 0 14px rgba(255, 180, 58, .55); pointer-events: none; animation: tour-pulse 1.4s steps(2, end) infinite; } @keyframes tour-pulse { 50% { box-shadow: 0 0 0 2px #ffb43a, 0 0 3px rgba(255, 180, 58, .3); } } .tour-note { position: absolute; z-index: 8700; width: 230px; padding: 9px 11px; background: #ffffe1; /* the era's tooltip yellow */ color: #000; border: 1px solid #000; box-shadow: 3px 3px 0 rgba(0, 0, 0, .45); line-height: 1.45; } /* the little arrow, pointing back at whatever the note describes */ .tour-note::after { content: ""; position: absolute; border: 7px solid transparent; } .tour-note-right::after { left: -14px; top: 50%; margin-top: -7px; border-right-color: #000; } .tour-note-left::after { right: -14px; top: 50%; margin-top: -7px; border-left-color: #000; } .tour-note-up::after { bottom: -14px; left: 50%; margin-left: -7px; border-top-color: #000; } .tour-note-down::after { top: -14px; left: 50%; margin-left: -7px; border-bottom-color: #000; } .tour-card { position: absolute; z-index: 8701; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(430px, calc(100% - 32px)); box-sizing: border-box; max-height: calc(100% - 32px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 20px 22px 18px; background: var(--face); box-shadow: var(--out), 0 10px 30px rgba(0, 0, 0, .5); text-align: center; } .tour-card h2 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.3px; } /* moved away from the things a step highlights (see build() in js/tour.js) */ .tour-card.at-top { top: 12px; transform: translateX(-50%); } .tour-card.at-bottom { top: auto; bottom: calc(12px + var(--safe-bottom)); transform: translateX(-50%); } /* clear of the iPhone home bar */ .tour-card ul.tour-sections { margin: 4px 0 16px; } .tour-card .tour-sections li { display: flex; align-items: center; gap: 10px; padding-left: 0; margin: 0 0 10px; } .tour-card .tour-sections li::before { content: none; } .tour-card .tour-sections .ico32 { flex: none; } .tour-card p { margin: 0 0 14px; line-height: 1.6; } .tour-card ul { margin: 0 0 14px; padding: 0; text-align: left; } .tour-card li { position: relative; margin: 0 0 6px; padding-left: 16px; line-height: 1.5; } .tour-card li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 5px; height: 5px; background: #000080; } .tour-card .tour-progress { font-size: 12px; color: #444; margin-bottom: 8px; } .tour-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .tour-actions button, .tour-actions button:active { min-height: 44px; padding: 8px 14px; } .tour-actions button:focus-visible { outline: 2px solid #000080; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .tour-ring { animation: none; } body.tour-on .window-layer { transition: none; } } /* ===================================================================== The crash — for anyone who drags This Machine into the bin ================================================================== */ body.crashing .screen { animation: crash-shake 1.7s steps(2, end); } body.crashing .window { animation: crash-collapse .55s ease-in .35s forwards; } body.crashed .screen { display: none; } @keyframes crash-shake { 0% { transform: translate(0, 0); } 8% { transform: translate(-5px, 3px); } 16% { transform: translate(4px, -4px); filter: invert(1); } 24% { transform: translate(-6px, -2px); } 32% { transform: translate(5px, 4px); filter: invert(1) hue-rotate(90deg); } 40% { transform: translate(-3px, 5px); } 55% { transform: translate(6px, -3px); filter: invert(1); } 70% { transform: translate(-4px, 2px); } 85% { transform: translate(3px, 3px); filter: contrast(3); } 100% { transform: translate(0, 0); } } @keyframes crash-collapse { to { transform: scaleY(.02); opacity: 0; } } .window { transform-origin: top center; } .bsod, .cli { position: fixed; inset: 0; z-index: 10000; overflow: auto; font-family: "Lucida Console", "Courier New", monospace; font-size: 15px; line-height: 1.5; } .bsod { display: grid; place-items: center; background: #0000a8; color: #fff; cursor: pointer; padding: 20px; } .bsod pre { margin: 0; white-space: pre-wrap; } .bsod-head { background: #c0c0c0; color: #0000a8; padding: 0 6px; } .bsod-foot { display: block; text-align: center; } .cli { background: #000; color: #c8c8c8; padding: 14px 16px 40px; white-space: pre-wrap; overflow-wrap: anywhere; } .cli-line { display: flex; align-items: baseline; } .cli-prompt { flex: none; white-space: pre; } .cli-input { flex: 1; min-width: 0; padding: 0; border: none; background: none; box-shadow: none; color: inherit; font: inherit; outline: none; caret-color: #c8c8c8; } .cli-input:focus { outline: none; box-shadow: none; } @media (prefers-reduced-motion: reduce) { body.crashing .screen, body.crashing .window { animation: none; } } /* ===================================================================== Small screens — windows behave like full-screen apps ================================================================== */ @media (max-width: 760px) { :root { --fs: 14px; --taskbar-h: 50px; } .desktop-icon { width: 100px; } /* wide enough for "This Machine" at 14px */ /* Everything you have to hit with a fingertip gets bigger. The 1990s built this for a mouse pointer one pixel wide; phones did not. */ .title-bar { height: 30px; gap: 6px; padding: 0 3px 0 5px; } .title-bar-controls button { width: 28px; height: 24px; } .title-bar-controls svg { width: 10px; height: 10px; } .menu-bar > button { padding: 7px 11px; } .menu-pop li > button, .context-menu li > button { padding: 9px 20px 9px 26px; } .start-button { height: 42px; padding: 0 12px 0 9px; } .task-button { height: 42px; } .tray { height: 42px; } .start-items li > button { padding: 10px 10px; } .tb-item { padding: 7px 10px; } .tb-drop { width: 20px; } .address-field { height: 30px; } .file-row { padding: 7px 4px; } .tour-card { padding: 18px 18px 16px; } .tour-actions button { flex: 1 1 auto; } .calendar { width: 232px; } .cal-day { padding: 7px 0; } .cal-nav { width: 26px; height: 24px; } .button-row button { padding: 8px 16px; } .button-row button:active { padding: 9px 15px 7px 17px; } .field-row > input, .field-row > textarea { padding: 7px 6px; } .task-button { flex-basis: 48px; min-width: 48px; } .task-button span { display: none; } .start-menu { width: min(340px, calc(100% - 8px)); } .doc { padding: 14px 16px; } .folder-item { width: 100px; } /* Explorer has to shed weight on a phone: icon-only toolbar that scrolls sideways, and the info pane folds away entirely. */ .toolbar { overflow-x: auto; scrollbar-width: none; } .toolbar::-webkit-scrollbar { height: 0; } .tb-item span { display: none; } .tb-item { padding: 4px 7px; } .web-pane { display: none; } .address-label { display: none; } .file-rows.list { flex-wrap: nowrap; height: auto; } .file-row { width: 100%; } .details-view td:nth-child(4), .details-view th:nth-child(4) { display: none; } } /* ===================================================================== Phone window chrome On a phone every window is full-screen and stays that way (see toggleMax / startDrag in wm.js), so there is nothing to maximise, restore or drag. What is left — minimise and close — has to be hit by a thumb in the top corner of the screen: 44x36 each, with real gaps so a slightly-off tap cannot land on the neighbour. Keyed off body.wm-small rather than a media query, so it switches at the same layout width where windows start opening full-screen. ================================================================== */ body.wm-small .title-bar { height: 46px; gap: 8px; padding: 0 4px 0 10px; } body.wm-small .title-bar-icon { width: 20px; height: 20px; } body.wm-small .title-bar-controls { gap: 8px; } body.wm-small .title-bar-controls button { width: 44px; height: 36px; } body.wm-small .title-bar-controls button:active { padding: 1px 0 0 1px; } body.wm-small .title-bar-controls svg { width: 12px; height: 12px; } body.wm-small .title-bar-controls .tb-close { margin-left: 4px; } body.wm-small .title-bar-controls [data-act="maximize"] { display: none; } /* iOS zooms the whole page into any text field whose text is under 16px the moment it gets focus — tapping Start search zoomed the desktop in and left it there. 16px on a phone prevents that without disabling pinch zoom (maximum-scale=1 would, and is an accessibility failure). */ body.wm-small input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), body.wm-small textarea, body.wm-small select { font-size: 16px; } body.wm-small .address-field { height: 32px; } /* the taskbar is the other thing a thumb has to hit — including on a phone held sideways, which is wider than the 760px media query */ body.wm-small { --taskbar-h: 50px; } body.wm-small .start-button { height: 42px; padding: 0 12px 0 9px; } body.wm-small .task-button { height: 42px; min-width: 48px; } body.wm-small .tray { height: 42px; } @media (prefers-reduced-motion: reduce) { .boot { transition: none; } .boot-bar i { animation-duration: .01s; } .menu-pop, .context-menu:not([hidden]), .start-menu:not([hidden]), .explorer-panes, .doc-pane, .shutdown:not([hidden]) { animation: none; } }