/* ========================================================================== Pink retro "Windows" skin — overrides styles.css when . Flat pink desktop, pink beveled windows/taskbar, editorial content on white. No gradients on the wallpaper. Rory Grey's real names/content throughout. ========================================================================== */ body.win98 { font-family: Tahoma, "MS Sans Serif", Geneva, Verdana, sans-serif; font-size: 12px; color: #3d2233; background: #e98cc0; /* pink bevel palette (the "silver" of classic 98, recoloured) */ --face: #f6cfe2; --hi: #ffffff; --hi2: #ffe7f3; --lo: #cf8fb2; --lo2: #8f4f77; --title: #d95fa6; /* flat title bar */ --title-ina: #dbb6cd; --pink-ink: #7a3b63; /* content accents go black in the pink theme (oxblood read odd on pink) */ --accent: #0b0b0a; --up: #0b0b0a; /* editorial content sits on white in this theme */ --paper: #ffffff; --paper-2: #fdeef6; --paper-3: #f7e0ee; /* pink pixel-file icon palette (consumed by docIcon SVGs) */ --doc-paper: #ffe6f3; --doc-line: #7a3b63; --doc-line2: #e2a6cb; --doc-accent:#ec4fa0; --doc-fold: #ffb7dc; --doc-tint: #ffd3ea; } /* --- hide the macOS chrome --- */ body.win98 .menubar { display: none; } body.win98 .dock { display: none; } body.win98 .wallmark { display: none; } /* --- desktop: flat pink, taskbar reserves the bottom --- */ body.win98 .desktop { inset: 0 0 30px 0; background: #e98cc0; } body.win98 .desktop::before, body.win98 .desktop::after { display: none; content: none; } /* --- desktop icons: white labels, crisp --- */ body.win98 .icon { width: 88px; gap: 5px; } body.win98 .icon .glyph { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 rgba(122,59,99,.3)); } body.win98 .icon .label { color: #fff; font-weight: 700; letter-spacing: 0; text-transform: none; text-shadow: 1px 1px 1px rgba(90,30,70,.7); border-radius: 0; font-family: inherit; font-size: 11px; } body.win98 .icon .sub { color: #ffe0f1; font-weight: 700; } body.win98 .icon:hover { background: transparent; } body.win98 .icon.selected { background: transparent; border-color: transparent; } body.win98 .icon.selected .label { background: #7a3b63; color: #fff; outline: 1px dotted #ffd3ea; outline-offset: -2px; text-shadow: none; } body.win98 .icon.dragging { background: transparent; border-color: transparent; box-shadow: none; } /* --- windows: pink face, raised bevel --- */ body.win98 .window { background: var(--face); border: 0; border-radius: 0; padding: 3px; box-shadow: inset -1px -1px var(--lo2), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--hi2); } body.win98 .window.inactive { box-shadow: inset -1px -1px var(--lo2), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--hi2); } /* title bar: flat pink, white bold title, little icon on the left */ body.win98 .titlebar { height: auto; min-height: 22px; padding: 3px 3px 3px 4px; gap: 5px; border: 0; background: var(--title); color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } body.win98 .window.inactive .titlebar { background: var(--title-ina); } body.win98 .win-heading { order: 1; flex-direction: row; align-items: center; gap: 5px; } body.win98 .win-heading::before { content: ""; width: 15px; height: 15px; flex: 0 0 auto; background: var(--face); box-shadow: inset -1px -1px var(--lo), inset 1px 1px var(--hi); } body.win98 .win-tag { display: none; } body.win98 .win-title { color: #fff; font-weight: 700; letter-spacing: 0; text-transform: none; font-family: inherit; font-size: 12px; } body.win98 .window.inactive .win-title { color: #fbeaf3; } body.win98 .titlebar .spacer { order: 2; } body.win98 .win-num { display: none; } /* min / max / close as raised square buttons, on the right */ body.win98 .win-controls { order: 3; gap: 2px; } body.win98 .win-dot { width: 17px; height: 15px; border-radius: 0; border: 0; background: var(--face); color: var(--pink-ink); font-size: 0; box-shadow: inset -1px -1px var(--lo2), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--hi2); } body.win98 .win-controls:hover .win-dot { color: var(--pink-ink); } body.win98 .win-dot::after { font-size: 10px; line-height: 1; color: var(--pink-ink); font-weight: 700; } body.win98 .win-dot.min { order: 1; } body.win98 .win-dot.min::after { content: "▁"; position: relative; top: -2px; } body.win98 .win-dot.zoom { order: 2; } body.win98 .win-dot.zoom::after { content: "❐"; font-weight: 400; } body.win98 .win-dot.close { order: 3; margin-left: 2px; } body.win98 .win-dot.close::after { content: "✕"; font-size: 9px; } body.win98 .win-dot:active { box-shadow: inset 1px 1px var(--lo2), inset -1px -1px var(--hi), inset 2px 2px var(--lo), inset -2px -2px var(--hi2); } /* chunky pink scrollbars */ body.win98 .win-body { scrollbar-color: var(--face) #f7dfec; } body.win98 .win-body::-webkit-scrollbar { width: 16px; height: 16px; } body.win98 .win-body::-webkit-scrollbar-track { background: #f7dfec; } body.win98 .win-body::-webkit-scrollbar-thumb { background: var(--face); border: 0; border-radius: 0; box-shadow: inset -1px -1px var(--lo2), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--hi2); } /* form controls themed pink-98 (sunken white fields, raised pink buttons) */ body.win98 .form input, body.win98 .form select, body.win98 .form textarea { border: 0; border-radius: 0; background: #fff; font-family: Tahoma, sans-serif; font-size: 12px; color: #3d2233; box-shadow: inset -1px -1px #fff, inset 1px 1px var(--lo), inset -2px -2px var(--hi2), inset 2px 2px var(--lo2); } body.win98 .form input:focus, body.win98 .form select:focus, body.win98 .form textarea:focus { outline: 1px dotted var(--pink-ink); outline-offset: 1px; } body.win98 .form fieldset { border: 0; box-shadow: inset -1px -1px #fff, inset 1px 1px var(--lo); padding: 12px 16px; } body.win98 .form .submit, body.win98 .editorial-cta { background: var(--face); color: var(--pink-ink); border: 0; border-radius: 0; box-shadow: inset -1px -1px var(--lo2), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--hi2); } body.win98 .form .submit:hover, body.win98 .editorial-cta:hover { background: var(--face); color: var(--pink-ink); } body.win98 .form .submit:active, body.win98 .editorial-cta:active { box-shadow: inset 1px 1px var(--lo2), inset -1px -1px var(--hi), inset 2px 2px var(--lo), inset -2px -2px var(--hi2); } /* ===================== TASKBAR ===================== */ #taskbar { display: none; } body.win98 #taskbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 30px; z-index: 5000; align-items: center; gap: 4px; padding: 2px 3px; background: var(--face); box-shadow: inset 0 1px var(--hi), inset 0 2px var(--hi2); font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 12px; color: #3d2233; } #startBtn { height: 23px; display: flex; align-items: center; gap: 5px; padding: 2px 10px 2px 5px; font-weight: 700; font-size: 12px; color: var(--pink-ink); background: var(--face); box-shadow: inset -1px -1px var(--lo2), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--hi2); } #startBtn .heart { width: 16px; height: 16px; } #startBtn.open { box-shadow: inset 1px 1px var(--lo2), inset -1px -1px var(--hi), inset 2px 2px var(--lo), inset -2px -2px var(--hi2); } .tb-div { width: 0; border-left: 1px solid var(--lo); border-right: 1px solid var(--hi); height: 22px; margin: 0 2px; } .tb-tasks { flex: 1; display: flex; align-items: center; gap: 3px; overflow: hidden; } .tb-task { height: 23px; min-width: 140px; max-width: 170px; display: flex; align-items: center; gap: 5px; padding: 0 7px; font-weight: 400; text-align: left; color: #3d2233; background: var(--face); box-shadow: inset -1px -1px var(--lo2), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--hi2); } .tb-task .ic { width: 15px; height: 15px; flex: 0 0 auto; display: grid; place-items: center; } .tb-task .ic svg { width: 15px; height: 15px; } .tb-task span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-task.active { box-shadow: inset 1px 1px var(--lo2), inset -1px -1px var(--hi), inset 2px 2px var(--lo), inset -2px -2px var(--hi2); font-weight: 700; } .tb-tray { height: 23px; display: flex; align-items: center; gap: 6px; padding: 0 9px; box-shadow: inset 1px 1px var(--lo), inset -1px -1px var(--hi); } .tb-tray .heart { width: 13px; height: 13px; } #trayClock { font-size: 12px; font-variant-numeric: tabular-nums; color: #3d2233; } /* ===================== START MENU ===================== */ #startMenu { display: none; } body.win98 #startMenu.open { display: flex; position: fixed; left: 3px; bottom: 30px; z-index: 5001; width: 226px; background: var(--face); padding: 3px; box-shadow: inset -1px -1px var(--lo2), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--hi2); } #startMenu .sidebar { width: 32px; flex: 0 0 auto; background: var(--title); color: #fff; writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; padding: 12px 7px; font-weight: 700; font-size: 16px; letter-spacing: 2px; } #startMenu .sidebar span { color: #ffcbe6; font-weight: 400; } #startMenu .items { flex: 1; display: flex; flex-direction: column; padding: 2px; } #startMenu .mi { display: flex; align-items: center; gap: 9px; padding: 5px 8px; text-align: left; font-size: 12px; color: #3d2233; } #startMenu .mi .ic { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; } #startMenu .mi .ic svg { width: 22px; height: 22px; } #startMenu .mi:hover { background: var(--pink-ink); color: #fff; } #startMenu .sep { height: 2px; margin: 3px 4px; border-top: 1px solid var(--lo); border-bottom: 1px solid var(--hi); } /* ===================== SHUT DOWN screen ===================== */ #shutdown { position: fixed; inset: 0; z-index: 9999; background: #1a0d16; color: #ffb0d8; cursor: pointer; display: grid; place-items: center; text-align: center; font-family: Tahoma, sans-serif; font-size: clamp(18px, 3vw, 26px); letter-spacing: 1px; line-height: 1.7; } #shutdown small { display: block; margin-top: 26px; color: #8a5a73; font-size: 13px; letter-spacing: .3em; } /* ===================== pixel icons / folders / games in pink theme ===================== */ body.win98 .win-heading::before { display: none; content: none; } body.win98 .win-ico { display: block; width: 15px; height: 15px; image-rendering: pixelated; object-fit: contain; } body.win98 #startMenu .mi .ic img, body.win98 #startMenu .mi .ic svg { width: 22px; height: 22px; image-rendering: pixelated; } body.win98 .tb-task .ic img, body.win98 .tb-task .ic svg { width: 16px; height: 16px; image-rendering: pixelated; } body.win98 .folder-view { box-shadow: inset 1px 1px var(--lo), inset -1px -1px var(--hi); } body.win98 .folder-item:hover { background: var(--pink-ink); color: #fff; } body.win98 .folder-status { color: #6b3b5a; box-shadow: inset 1px 1px var(--lo); } body.win98 .mine { background: var(--face); } body.win98 .mine-head { box-shadow: inset 1px 1px var(--lo), inset -1px -1px var(--hi); } body.win98 .mine-lcd { box-shadow: inset 1px 1px #000; } body.win98 .mine-face { background: var(--face); box-shadow: inset -1px -1px var(--lo2), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--hi2); } body.win98 .mine-face:active { box-shadow: inset 1px 1px var(--lo2), inset -1px -1px var(--hi); } body.win98 .mine-grid { background: var(--face); padding: 3px; margin: 0 auto; box-shadow: inset 1px 1px var(--lo), inset -1px -1px var(--hi); } body.win98 .mcell { background: var(--face); box-shadow: inset -1px -1px var(--lo), inset 1px 1px var(--hi), inset -2px -2px var(--lo2), inset 2px 2px var(--hi2); } body.win98 .mcell.open { box-shadow: none; border: 1px solid var(--lo); } body.win98 .sol-btn { background: var(--face); color: var(--pink-ink); border: 0; box-shadow: inset -1px -1px var(--lo2), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--hi2); } body.win98 .sol-btn:active { box-shadow: inset 1px 1px var(--lo2), inset -1px -1px var(--hi); } /* ===================== MOBILE ===================== */ @media (max-width: 720px) { body.win98 .icon { width: auto; padding: 6px 2px; } body.win98 .icon .glyph { width: 40px; height: 40px; } body.win98 .icon .label { font-size: 10px; } body.win98 #taskbar { height: 34px; gap: 2px; } body.win98 #startBtn { padding: 2px 8px 2px 4px; } body.win98 .tb-tasks { overflow-x: auto; } body.win98 .tb-task { min-width: 0; max-width: 46px; padding: 0 8px; } body.win98 .tb-task span:last-child { display: none; } /* icon-only tasks on phones */ body.win98 .tb-tray { padding: 0 6px; } body.win98 #startMenu.open { width: min(240px, calc(100vw - 12px)); } body.win98 .win-title { max-width: 44vw; } }