/* ========= THEME CORE (custom properties) Switch themes by changing [data-theme] on or . ========= */ :root { --win-font: "MS Sans Serif", "Tahoma", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } /* Classic 3.1 look */ html[data-theme="classic"] { /* Greys + blues */ --bg: #008080; /* wallpaper fallback (teal) */ --desk-bg: #008080; --win-bg: #c0c0c0; --win-text: #000; --titlebar: #000080; --titlebar-text: #fff; --titlebar-inactive: #808080; --titlebar-text-inactive: #e6e6e6; --border-light: #ffffff; --border-dark: #808080; --border-shadow: #404040; --accent: #000080; --menu-bg: #c0c0c0; --menu-hover: #000080; --menu-hover-text: #fff; --taskbar-bg: #c0c0c0; --taskbar-border-top: #ffffff; --taskbar-border-bottom: #404040; } /* ========= BASE ========= */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--win-font); background: var(--desk-bg) center/cover no-repeat fixed; color: var(--win-text); } /* Provide wallpaper via background-image set in JS; fallback teal */ .desktop { position: relative; height: calc(100% - 34px); /* leave room for taskbar */ overflow: hidden; } /* ========= 3D UI helpers ========= */ .three-d { border-top: 2px solid var(--border-light); border-left: 2px solid var(--border-light); border-right: 2px solid var(--border-shadow); border-bottom: 2px solid var(--border-shadow); background: var(--win-bg); } .three-d-inset { border-top: 2px solid var(--border-dark); border-left: 2px solid var(--border-dark); border-right: 2px solid var(--border-light); border-bottom: 2px solid var(--border-light); background: var(--win-bg); } /* ========= START MENU ========= */ .start-menu { position: absolute; left: 6px; bottom: 40px; min-width: 220px; background: var(--menu-bg); z-index: 10000; padding: 4px; box-shadow: 2px 2px 0 var(--border-shadow); } .start-menu ul { list-style: none; margin: 0; padding: 0; } .start-menu li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: default; white-space: nowrap; user-select: none; border-radius: 2px; } .start-menu li:hover, .start-menu li:focus { background: var(--menu-hover); color: var(--menu-hover-text); outline: none; } .start-menu .mi-icon { width: 18px; height: 18px; display: inline-block; } /* ========= DESKTOP ICONS ========= */ .icon { width: 84px; height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background: transparent; /* transparent by default */ cursor: default; user-select: none; text-align: center; color: #fff; text-shadow: 1px 1px 0 #000; border: none; } .icon img { width: 40px; height: 40px; image-rendering: pixelated; margin-top: 4px; } /* === Disable native drag & show correct cursors === */ .desktop-icons .icon, .desktop-icons .icon img { -webkit-user-drag: none; /* prevents ghost image */ user-drag: none; user-select: none; /* no text/image selection during drag */ } /* Normal and dragging cursors */ .icon { cursor: default; } .icon.dragging { cursor: grabbing; } /* === Icon label === */ .icon .label { font-size: 12px; margin-top: 6px; line-height: 1.1; padding: 2px 4px; border-radius: 1px; background: transparent; /* no background until selected */ color: #fff; text-shadow: 1px 1px 0 #000; } /* === Selected icon label highlight === */ .icon.selected .label { background: #000080; /* classic Win3.1 navy */ color: #fff; text-shadow: none; outline: 1px dotted #fff; outline-offset: -2px; } /* === Desktop container === */ .desktop-icons { position: absolute; /* stays over the wallpaper */ inset: 8px; /* same padding as before */ pointer-events: auto; } /* every icon is absolutely positioned so left/top works */ .desktop-icons .icon { position: absolute; } /* Optional: show a tiny lift while dragging */ .icon.dragging { opacity: 0.9; filter: brightness(1.05); } /* ========= WINDOWS ========= */ .windows-layer { position: absolute; inset: 0; } .window { position: absolute; min-width: 280px; min-height: 160px; max-width: 90vw; max-height: 80vh; overflow: hidden; box-shadow: 2px 2px 0 var(--border-shadow); } .titlebar { height: 24px; background: var(--titlebar); color: var(--titlebar-text); display: flex; align-items: center; justify-content: space-between; padding: 0 4px; cursor: move; user-select: none; } .titlebar.inactive { background: var(--titlebar-inactive); color: var(--titlebar-text-inactive); } .titlebar .title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .win-buttons { display: flex; gap: 2px; } /* === Window Control Buttons === */ .win-btn { width: 18px; height: 18px; display: grid; place-items: center; font-size: 12px; line-height: 1; cursor: pointer; user-select: none; background: var(--win-bg); border-top: 2px solid var(--border-light); border-left: 2px solid var(--border-light); border-right: 2px solid var(--border-dark); border-bottom: 2px solid var(--border-dark); box-shadow: 1px 1px 0 var(--border-shadow) inset; } /* Pressed (sunken) look when clicked */ .win-btn:active { border-top: 2px solid var(--border-dark); border-left: 2px solid var(--border-dark); border-right: 2px solid var(--border-light); border-bottom: 2px solid var(--border-light); box-shadow: none; background: #b8b8b8; } /* Optional: subtle hover feedback */ .win-btn:hover { background: #d8d8d8; } /* Window control buttons: raised by default */ .win-btn { width: 18px; height: 18px; display: flex; /* perfect centering */ align-items: center; justify-content: center; font-family: "Webdings", "Wingdings", "Segoe UI Symbol", system-ui, sans-serif; font-size: 16px; /* tuned for these glyphs */ line-height: 1; /* no baseline drift */ letter-spacing: 0; padding: 0; /* no extra offsets */ background: var(--win-bg); border-top: 2px solid var(--border-light); border-left: 2px solid var(--border-light); border-right: 2px solid var(--border-dark); border-bottom: 2px solid var(--border-dark); box-shadow: 1px 1px 0 var(--border-shadow) inset; cursor: pointer; user-select: none; } /* Pressed (sunken) state */ .win-btn:active { border-top: 2px solid var(--border-dark); border-left: 2px solid var(--border-dark); border-right: 2px solid var(--border-light); border-bottom: 2px solid var(--border-light); box-shadow: none; background: #b8b8b8; } /* Tiny per-glyph nudge for pixel-perfect centering (optional) */ .win-btn.win-min { transform: translateY(-0.5px); } /* Webdings '0' sits a hair low */ .win-btn.win-max { transform: translateX(-0.3px); } /* '1' can look a touch right-shifted */ .win-btn.win-close { font-size: 15px; } /* 'R' is a bit large on some systems */ .content { padding: 8px; height: calc(100% - 24px); overflow: auto; background: var(--win-bg); } /* Let empty areas of the windows layer pass clicks through to the desktop */ .windows-layer { pointer-events: none; z-index: 20; /* windows still sit above icons */ } /* But allow actual window elements to receive mouse events */ .window { pointer-events: auto; } .desktop-icons { z-index: 10; } /* ===== Window active/inactive ===== */ .window.inactive .titlebar { background: var(--titlebar-inactive); color: var(--titlebar-text-inactive); } .window.inactive { opacity: 0.98; /* subtle, optional */ } /* ===== Resize handles ===== */ .window { position: absolute; } .win-resize { position: absolute; pointer-events: auto; } /* sides */ .win-resize.e { right: -3px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; } .win-resize.w { left: -3px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; } .win-resize.n { top: -3px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; } .win-resize.s { bottom: -3px;left: 8px; right: 8px; height: 6px; cursor: ns-resize; } /* corners */ .win-resize.ne { top: -4px; right: -4px; width: 10px; height: 10px; cursor: nesw-resize; } .win-resize.nw { top: -4px; left: -4px; width: 10px; height: 10px; cursor: nwse-resize; } .win-resize.se { bottom: -4px;right: -4px; width: 10px; height: 10px; cursor: nwse-resize; } .win-resize.sw { bottom: -4px;left: -4px; width: 10px; height: 10px; cursor: nesw-resize; } /* visual resize grip like classic Win */ .win-grip { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; pointer-events: none; /* visuals only; handles do the resizing */ background: linear-gradient(135deg, transparent 50%, #808080 50%) 0 0/7px 7px no-repeat, linear-gradient(135deg, transparent 50%, #c0c0c0 50%) 7px 7px/7px 7px no-repeat; opacity: 0.9; } /* ===== My Computer: static icon grid (no dragging) ===== */ .mc-icons { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; } .mc-icon { width: 90px; display: flex; flex-direction: column; align-items: center; border: none; background: transparent; cursor: default; /* static: not draggable */ user-select: none; padding: 6px 4px; } .mc-icon img { width: 40px; height: 40px; image-rendering: pixelated; -webkit-user-drag: none; } .mc-icon .label { margin-top: 6px; font-size: 12px; color: #fff; text-shadow: 1px 1px 0 #000; text-align: center; } /* Optional: selection highlight inside window (matches desktop look) */ .mc-icon:focus, .mc-icon.selected .label, .mc-icon:active .label { outline: none; } .mc-icon:focus .label, .mc-icon:active .label { background: #000080; color: #fff; text-shadow: none; padding: 1px 3px; outline: 1px dotted #fff; outline-offset: -2px; } /* App windows show images at a consistent size */ /* App view fills the window content area */ /* App window layout: header + flexible rotator */ /* Layout: header + flexible content */ .app-view { display: flex; flex-direction: column; width: 100%; height: 100%; gap: 8px; } .app-header { padding: 6px 8px; background: var(--win-bg); border-top: 2px solid var(--border-light); border-left: 2px solid var(--border-light); border-right: 2px solid var(--border-dark); border-bottom: 2px solid var(--border-dark); box-shadow: 1px 1px 0 var(--border-shadow) inset; } .app-header p { margin: 0; font-size: 13px; line-height: 1.25; color: #000; } .app-rotator { position: relative; flex: 1 1 auto; min-height: 0; } /* Rotator supports any number of images */ .fade-rotator { position: absolute; inset: 0; background: #000; overflow: hidden; } .fade-rotator picture { position: absolute; inset: 0; opacity: 0; background: #000; animation: fadeRotate var(--dur, 12s) linear infinite; } .fade-rotator img { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; } /* Delay each layer based on index and total count */ .fade-rotator picture:nth-child(n) { animation-delay: calc(var(--i) * (var(--dur) / var(--count))); } /* Adjust crossfade timing for smoother overlap */ @keyframes fadeRotate { 0% { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } } /* Single-image (no animation) */ .app-single { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; } /* === MS-DOS Prompt style (fixed top alignment) === */ .window.dos .content { background: #000; color: #00ff00; font-family: "Courier New", monospace; font-size: 14px; line-height: 1.3; padding: 8px; white-space: pre-wrap; text-shadow: none; display: flex; flex-direction: column; justify-content: flex-start; /* 🧠 ensures text starts at top */ align-items: flex-start; overflow-y: auto; /* allows vertical scrolling if content exceeds height */ } /* === Blinking cursor for DOS prompt === */ .window.dos .cursor { display: inline-block; width: 8px; animation: blink 1s steps(2, start) infinite; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* === Responsive video inside windows === */ .window .content video { width: 100%; height: 100%; object-fit: contain; background: #000; } /* ========================= */ /* ===== README layout ===== */ /* ========================= */ .readme-wrap { width: 100%; height: 100%; overflow: auto; /* scroll if needed on small windows */ padding: 8px; } .readme-grid { display: grid; gap: 16px; /* 4 columns on wide, 2–3 on smaller, 1 on very narrow */ grid-template-columns: repeat(4, minmax(160px, 1fr)); } @media (max-width: 1100px) { .readme-grid { grid-template-columns: repeat(3, minmax(160px, 1fr)); } } @media (max-width: 800px) { .readme-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); } } @media (max-width: 520px) { .readme-grid { grid-template-columns: 1fr; } } .feature-tile { /* Win3.1-ish raised panel */ background: var(--win-bg); border-top: 2px solid var(--border-light); border-left: 2px solid var(--border-light); border-right: 2px solid var(--border-dark); border-bottom: 2px solid var(--border-dark); box-shadow: 1px 1px 0 var(--border-shadow) inset; padding: 10px; color: #000; } .feature-icon { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .feature-icon img { width: 28px; height: 28px; object-fit: contain; image-rendering: auto; /* or pixelated if your art is low-res */ } .feature-tile h4 { margin: 6px 0 8px; font-size: 14px; color: #000; } .feature-tile p { margin: 0; font-size: 13px; line-height: 1.35; color: #000; } /* ========= TASKBAR ========= */ .taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: 34px; display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: var(--taskbar-bg); border-top: 2px solid var(--taskbar-border-top); box-shadow: 0 -2px 0 var(--taskbar-border-bottom) inset; } .btn { font-family: var(--win-font); font-size: 13px; padding: 4px 8px; cursor: pointer; } /* Start Button: raised 3D look with fixed height */ .btn-start { display: inline-flex; align-items: center; gap: 6px; height: 26px; /* <= stays within 34px taskbar */ padding: 2px 10px; /* vertical padding fits 26px total */ line-height: 1; color: #000; background: var(--taskbar-bg); border: 2px solid var(--border-dark); border-top-color: var(--border-light); border-left-color: var(--border-light); border-right-color: var(--border-shadow); border-bottom-color: var(--border-shadow); box-shadow: 1px 1px 0 var(--border-shadow) inset; cursor: pointer; user-select: none; overflow: hidden; /* prevents tall images from pushing height */ } /* Pressed (sunken) state */ .btn-start:active, .btn-start.active { border-top-color: var(--border-shadow); border-left-color: var(--border-shadow); border-right-color: var(--border-light); border-bottom-color: var(--border-light); box-shadow: none; background: #b8b8b8; } .taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: 34px; /* hard cap */ display: flex; align-items: center; gap: 6px; padding: 3px 6px; /* keep small inner padding */ background: var(--taskbar-bg); border-top: 2px solid var(--taskbar-border-top); box-shadow: 0 -2px 0 var(--taskbar-border-bottom) inset; } .task-buttons { display: flex; gap: 4px; flex: 1; overflow: hidden; } .task-btn { max-width: 180px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tray { min-width: 80px; text-align: right; font-size: 12px; } /* Start Button Icon (auto-scale, no squish) */ .start-icon { max-height: 18px; /* fits within 26px button height */ width: auto; /* preserve aspect ratio */ object-fit: contain; /* no distortion */ image-rendering: pixelated; /* crisp */ display: block; /* no inline descender weirdness */ } /* ====== Dialog layout ====== */ .dialog { min-width: 260px; max-width: 420px; } .dialog-body { display: flex; gap: 10px; align-items: flex-start; } .dialog-icon { width: 18px; height: 18px; image-rendering: pixelated; margin-top: 2px; } .dialog-buttons { margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end; } /* ====== Dialog buttons (raised, proper size) ====== */ .dlg-btn { font-family: var(--win-font); font-size: 13px; line-height: 1; padding: 4px 12px; background: var(--win-bg); cursor: pointer; user-select: none; /* raised bevel */ border-top: 2px solid var(--border-light); border-left: 2px solid var(--border-light); border-right: 2px solid var(--border-dark); border-bottom: 2px solid var(--border-dark); box-shadow: 1px 1px 0 var(--border-shadow) inset; } .dlg-btn:active { /* sunken on press */ border-top: 2px solid var(--border-dark); border-left: 2px solid var(--border-dark); border-right: 2px solid var(--border-light); border-bottom: 2px solid var(--border-light); box-shadow: none; background: #b8b8b8; } /* ========= ACCESSIBILITY FOCUS ========= */ :focus-visible { outline: 2px dashed #000; outline-offset: 2px; } /* ========= UTILITIES ========= */ [hidden] { display: none !important; } /* ============================ Hire Howard cinematic window ============================ */ .hh-stage{ width:100%; height:100%; display:flex; flex-direction:column; } .hh-screen{ flex:1 1 auto; min-height:0; padding:12px; overflow:auto; opacity:1; transition: none; } .hh-text{ opacity: 0; transition: opacity 350ms linear; white-space: pre-line; } .hh-text.show{ opacity: 1; } .hh-center{ height:100%; display:flex; align-items:center; justify-content:center; text-align:center; white-space:pre-line; } .hh-controls{ flex:0 0 auto; padding:10px 12px; display:flex; justify-content:flex-end; gap:10px; border-top: 2px solid var(--border-dark); background: var(--win-bg); } .hh-play{ font-family: var(--win-font); font-size:13px; line-height:1; padding:6px 14px; cursor:pointer; user-select:none; border-top: 2px solid var(--border-light); border-left: 2px solid var(--border-light); border-right: 2px solid var(--border-dark); border-bottom: 2px solid var(--border-dark); box-shadow: 1px 1px 0 var(--border-shadow) inset; } .hh-play:disabled{ opacity:.55; cursor:default; } /* === Modern Play Now button (in-cinematic) === */ .hh-play-modern { display:inline-block; margin-top:32px; padding:14px 28px; border-radius:999px; background:#d8ff00; color:#010101; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size:16px; font-weight:600; letter-spacing:0.02em; cursor:pointer; user-select:none; opacity:0; transform: translateY(8px); transition: opacity 400ms ease, transform 400ms ease, box-shadow 200ms ease; } .hh-play-modern.show { opacity:1; transform: translateY(0); } .hh-play-modern:hover { box-shadow: 0 8px 24px rgba(216,255,0,0.35); } .hh-play-modern:active { transform: translateY(1px); }