/* The `hidden` HTML attribute must beat display:flex/grid overrides. */
[hidden] { display: none !important; }
/* ---------- Global UI scale ----------
The chrome was designed at ~1024×768 era density; on modern high-DPI
monitors everything looks too small. We scale the whole UI uniformly
so the desktop "feels" like the resolution of an early-2000s display.
Adjustable at runtime via `setUIScale(n)` on window. */
:root { --ui-scale: 1.35; }
body { zoom: var(--ui-scale); }
/* In-app menubar buttons (File, Edit, View, Insert, etc.).
98.css adds raised 3D button chrome to every , but menu items
should be flat text with hover-highlight only — same fix as quicklaunch. */
.np-menu-btn, .aim-menu-btn, .im-menu-btn, .ns-menu-btn, .ex-menu-btn {
background: none !important;
background-color: transparent !important;
border: 1px solid transparent !important;
box-shadow: none !important;
outline: none;
min-width: 0 !important;
min-height: 0 !important;
margin: 0;
padding: 1px 6px !important;
font-family: Tahoma, sans-serif !important;
font-size: 11px !important;
cursor: default;
color: #000;
}
.np-menu-btn:hover, .np-menu-btn.open,
.aim-menu-btn:hover,
.im-menu-btn:hover,
.ns-menu-btn:hover,
.ex-menu-btn:hover {
background: #0a246a !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: none !important;
}
/* ---------- Notification toasts (bottom-right) ---------- */
.notif {
width: 240px;
box-shadow: 3px 3px 0 rgba(0,0,0,0.35);
transform: translateX(120%);
transition: transform .25s ease-out, opacity .2s linear;
opacity: 0;
}
.notif.entering { transform: translateX(0); opacity: 1; }
.notif.leaving { transform: translateX(120%); opacity: 0; }
.notif .notif-body {
display: flex; gap: 8px; align-items: flex-start;
padding: 10px; cursor: pointer;
font-family: Tahoma, sans-serif; font-size: 12px; color: #000;
background: #fff;
border: 1px inset #808080;
margin: 4px;
}
.notif .notif-icon {
width: 28px; height: 28px; image-rendering: pixelated; flex-shrink: 0;
}
.notif .notif-text {
flex: 1;
white-space: pre-wrap;
word-break: break-word;
}
/* ---------- Context menu ---------- */
.context-menu {
position: fixed;
background: #c0c0c0;
border: 2px solid;
border-color: #fff #808080 #808080 #fff;
box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
padding: 2px;
min-width: 160px;
z-index: 10000;
font-size: 11px;
font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
user-select: none;
}
.context-menu hr {
border: none;
border-top: 1px solid #808080;
border-bottom: 1px solid #fff;
margin: 2px 0;
}
.context-menu-item {
display: grid;
grid-template-columns: 20px 1fr 16px;
align-items: center;
gap: 6px;
padding: 4px 8px;
cursor: default;
}
.context-menu-item.disabled { color: #808080; cursor: not-allowed; }
.context-menu-item.hover:not(.disabled) {
background: #0a246a; /* same deep navy */
color: #fff;
}
.context-menu-item .cm-icon img {
width: 16px; height: 16px; image-rendering: pixelated;
}
.context-menu-item .cm-arrow { font-size: 9px; color: #404040; text-align: right; }
.context-menu-item.hover .cm-arrow { color: #fff; }
/* ---------- CRT overlay (toggleable) ---------- */
/* Off by default — adding `crt` to turns it on. */
.crt-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 99998;
display: none;
}
body.crt .crt-overlay { display: block; }
/* Horizontal scanlines */
.crt-scanlines {
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.18) 0px,
rgba(0, 0, 0, 0.18) 1px,
transparent 1px,
transparent 3px
);
mix-blend-mode: multiply;
}
/* Slight color-aberration mask on top of scanlines */
.crt-mask {
position: absolute;
inset: 0;
background: repeating-linear-gradient(
90deg,
rgba(255, 0, 0, 0.04) 0px,
rgba(0, 255, 0, 0.02) 1px,
rgba(0, 0, 255, 0.04) 2px
);
}
/* Vignette + screen curvature suggestion */
.crt-vignette {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at center,
transparent 50%,
rgba(0, 0, 0, 0.35) 100%
);
}
/* Subtle flicker */
@keyframes crt-flicker {
0%, 100% { opacity: 0.96; }
50% { opacity: 1; }
}
body.crt .desktop { animation: crt-flicker 0.12s infinite; }
/* ---------- Login screen ---------- */
.login-screen {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
}
.login-bg {
position: absolute;
inset: 0;
background: #6ea1d8 url("../assets/wallpaper/clouds.webp") center/cover no-repeat;
}
.login-dialog {
position: relative;
width: 380px;
box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
z-index: 1;
}
.login-body { padding: 12px; font-family: Tahoma, sans-serif; font-size: 12px; }
.login-hero { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.login-hero img { width: 40px; height: 40px; image-rendering: pixelated; }
.login-msg { font-size: 11px; }
.login-fields { display: flex; flex-direction: column; gap: 6px; }
.login-fields label {
display: grid;
grid-template-columns: 80px 1fr;
align-items: center;
gap: 8px;
}
.login-fields input,
.login-fields select {
border: 1px inset #808080;
background: #fff;
padding: 2px 4px;
font-size: 12px;
font-family: Tahoma, sans-serif;
}
.login-buttons {
display: flex;
gap: 6px;
justify-content: flex-end;
margin-top: 12px;
padding-top: 8px;
border-top: 1px solid #808080;
box-shadow: 0 -1px 0 #fff;
}
.login-buttons button { min-width: 78px; padding: 4px 8px; }
/* ---------- Boot screen ---------- */
.boot-screen {
position: fixed;
inset: 0;
background: #6ea1d8 url("../assets/wallpaper/clouds.webp") center/cover no-repeat;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
font-family: Tahoma, sans-serif;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.boot-text { font-size: 32px; text-align: center; line-height: 1.1; }
.boot-text span { color: #f5d020; font-weight: bold; }
.boot-text sup { font-size: 14px; color: #f0f0f0; }
.boot-bar {
width: 240px; height: 14px;
border: 1px solid #fff; margin-top: 32px;
overflow: hidden;
}
.boot-bar-fill {
height: 100%;
background: repeating-linear-gradient(
90deg, #0a8cff 0 16px, transparent 16px 22px
);
animation: boot-march 1.2s linear infinite;
}
@keyframes boot-march {
from { background-position: 0 0; }
to { background-position: 22px 0; }
}
.boot-screen.hide { opacity: 0; transition: opacity .6s ease; pointer-events: none; }
/* ---------- Desktop ---------- */
.desktop {
position: fixed;
inset: 0;
background: var(--me-desktop) url("../assets/wallpaper/me-wallpaper.webp") center/cover no-repeat;
}
.desktop-icons {
position: absolute;
inset: 0 0 32px 0;
padding: 8px;
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(auto-fill, 80px);
grid-auto-columns: 80px;
gap: 4px;
}
.desktop-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 4px;
padding: 4px;
cursor: pointer;
color: white;
text-align: center;
font-size: 11px;
text-shadow: 1px 1px 0 #000;
border: 1px dotted transparent;
}
.desktop-icon:hover { background: rgba(10, 36, 106, 0.2); }
.desktop-icon.selected {
background: rgba(10, 36, 106, 0.5);
border-color: #fff;
}
.desktop-icon img { width: 32px; height: 32px; image-rendering: pixelated; }
.desktop-icon .label {
padding: 1px 3px;
max-width: 72px;
word-wrap: break-word;
}
/* ---------- Windows layer ---------- */
.windows-layer {
position: absolute;
inset: 0 0 32px 0;
pointer-events: none;
}
.windows-layer .window {
position: absolute;
pointer-events: auto;
min-width: 240px;
min-height: 120px;
display: flex;
flex-direction: column;
}
.windows-layer .window .window-body {
flex: 1;
overflow: auto;
margin: 0;
padding: 8px;
}
.windows-layer .window .title-bar { cursor: grab; touch-action: none; }
.windows-layer .window.dragging .title-bar { cursor: grabbing; }
.window.minimized { display: none; }
.resize-handle {
position: absolute;
right: 0; bottom: 0;
width: 15px; height: 15px;
cursor: nwse-resize;
touch-action: none;
background:
repeating-linear-gradient(135deg, transparent 0 2px, #fff 2px 3px, #808080 3px 4px, transparent 4px 6px);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
/* ---------- Mobile ----------
On phones a free-floating, draggable desktop is unusable: windows open
off-screen and there's no room to arrange them. So every window fills the
whole windows-layer (above the taskbar). `!important` beats the inline
left/top/width/height the window manager writes for desktop positioning.
Touch drag/resize still work in the JS, they're just no-ops at this size.
Navigation happens through the taskbar — tap an item to bring it forward. */
@media (max-width: 768px) {
.windows-layer .window {
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
}
.resize-handle { display: none; }
}
.taskbar {
position: fixed;
left: 0; right: 0; bottom: 0;
height: 32px;
background: var(--me-taskbar);
border-top: 2px solid #fff;
display: flex;
align-items: center;
padding: 2px 4px;
gap: 4px;
box-shadow: inset 0 1px 0 #dfdfdf;
z-index: 1000;
}
.start-button {
display: flex;
align-items: center;
gap: 4px;
font-weight: bold;
height: 26px;
padding: 0 8px;
}
.start-button img { width: 18px; height: 18px; }
.taskbar-divider {
width: 0;
height: 22px;
border-left: 1px solid #808080;
border-right: 1px solid #fff;
}
/* Quick Launch — flat 16x16 status icons. NOT buttons.
No chrome at rest. Only the hover/press 3D edge, drawn via box-shadow
so it never expands layout. */
.quicklaunch {
display: flex;
align-items: center;
gap: 2px;
padding: 0 2px;
}
.ql-icon {
/* 98.css applies button chrome (box-shadow + min-width) to all s.
Reset everything explicitly so this stays a flat icon at rest. */
background: none !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none;
padding: 0 !important;
margin: 0;
min-width: 0 !important;
min-height: 0 !important;
width: 16px; height: 16px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
}
.ql-icon img { width: 16px; height: 16px; image-rendering: pixelated; display: block; }
.ql-icon:hover {
box-shadow:
inset 1px 1px 0 #fff,
inset -1px -1px 0 #808080 !important;
}
.ql-icon:active {
box-shadow:
inset 1px 1px 0 #808080,
inset -1px -1px 0 #fff !important;
}
.taskbar-items {
flex: 1;
display: flex;
gap: 3px;
overflow: hidden;
}
/* Taskbar items follow real Win 9x behavior:
- inactive (minimized OR another window has focus): raised button (outset)
- active (window has focus): sunken/pressed (inset), darker tile fill */
.taskbar-item {
min-width: 120px;
max-width: 180px;
height: 24px;
text-align: left;
padding: 0 6px;
display: flex;
align-items: center;
gap: 4px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: #c0c0c0;
border: 1px solid;
border-color: #fff #808080 #808080 #fff;
box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #404040;
font-size: 11px;
cursor: pointer;
}
.taskbar-item img { width: 16px; height: 16px; flex-shrink: 0; image-rendering: pixelated; }
.taskbar-item:hover { background: #c8c8c8; }
.taskbar-item.active {
background: var(--me-title-active-start); /* deep navy — same as title bar */
color: #fff;
border-color: #808080 #fff #fff #808080;
box-shadow: inset 1px 1px 0 #000040, inset -1px -1px 0 #6080d0;
padding: 1px 5px 0 7px;
font-weight: bold;
}
.taskbar-item.active:hover { background: #102b80; }
/* Classic Win 2000 FlashWindow attention behavior — hard blink, with ON held
noticeably longer than OFF so it reads as "pulse" instead of strobe. */
@keyframes taskbar-flash {
0%, 70% {
background: #ff8c00;
color: #000;
border-color: #ffd699 #b06000 #b06000 #ffd699;
box-shadow: inset 1px 1px 0 #ffe0b3, inset -1px -1px 0 #804000;
}
70.01%, 100% {
background: #c0c0c0;
color: #000;
border-color: #fff #808080 #808080 #fff;
box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #404040;
}
}
.taskbar-item.flashing,
.taskbar-item.flashing.active {
animation: taskbar-flash 0.85s steps(1, end) infinite;
}
/* Title bar pulse mirrors the taskbar — same 70/30 ON/OFF rhythm. */
@keyframes titlebar-flash {
0%, 70% {
background: linear-gradient(90deg, #ff8c00 0%, #ffc080 100%);
}
70.01%, 100% {
background: linear-gradient(90deg, #0A246A 0%, #A6CAF0 100%);
}
}
.window.flashing .title-bar {
animation: titlebar-flash 0.85s steps(1, end) infinite;
}
/* System tray — sunken well of flat 16x16 status icons + the clock.
Same rule as Quick Launch: no chrome at rest, hover-only inset 3D. */
.tray {
border: 1px inset #808080;
height: 22px;
padding: 0 6px;
display: flex;
align-items: center;
gap: 4px;
}
.tray-icon {
background: none !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none;
padding: 0 !important;
margin: 0;
min-width: 0 !important;
min-height: 0 !important;
width: 16px; height: 16px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
}
.tray-icon img { width: 16px; height: 16px; image-rendering: pixelated; display: block; }
.tray-icon:hover {
box-shadow:
inset 1px 1px 0 #fff,
inset -1px -1px 0 #808080 !important;
}
.tray-icon:active {
box-shadow:
inset 1px 1px 0 #808080,
inset -1px -1px 0 #fff !important;
}
.clock { font-size: 11px; padding-left: 6px; white-space: nowrap; }
/* hovered start menu item: classic blue highlight */
.start-menu-items li.hover {
background: var(--me-title-active-start);
color: #fff;
}
.start-menu-items li.hover img { filter: brightness(1.05); }
/* start button pressed-look when menu open */
.start-button.active {
border-color: #808080 #fff #fff #808080;
background: #b8b8b8;
}
/* ---------- Start menu ---------- */
.start-menu {
position: fixed;
left: 2px;
bottom: 34px;
width: 220px;
background: #c0c0c0;
border: 2px solid;
border-color: #fff #808080 #808080 #fff;
display: flex;
z-index: 1001;
box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}
.start-menu-banner {
width: 28px;
background: var(--me-start-banner);
color: #fff;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-weight: bold;
font-size: 18px;
text-align: right;
padding: 8px 4px;
font-family: Tahoma, sans-serif;
}
.start-menu-banner sup { font-size: 9px; }
.start-menu-items {
list-style: none;
margin: 0;
padding: 2px;
flex: 1;
}
.start-menu-items li {
padding: 6px 10px;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 12px;
}
.start-menu-items li img { width: 24px; height: 24px; }
.start-menu-items li:hover { background: var(--me-title-active-start); color: #fff; }
.start-menu-items hr {
border: none;
border-top: 1px solid #808080;
border-bottom: 1px solid #fff;
margin: 2px 0;
}