/* ============================================================================ Aether OS — design system Themes are driven by [data-theme] on . Surfaces use frosted-glass (backdrop-filter) over the wallpaper. One accent (iris violet) + teal pop. ========================================================================== */ :root { --accent: #8b7cf6; --accent-2: #22d3ee; --accent-soft: rgba(139, 124, 246, .16); --danger: #f87171; --ok: #34d399; --radius: 12px; --radius-sm: 8px; --taskbar-h: 48px; --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; } /* ---- dark theme (default) ---- */ [data-theme="dark"] { --text: #e7eaf3; --text-dim: #9aa3b8; --text-faint: #6b7488; --surface: rgba(22, 28, 42, .72); --surface-solid: #161c2a; --surface-2: #1d2435; --surface-3: #2a3346; --surface-hover: rgba(255, 255, 255, .06); --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .16); --shadow: 0 18px 50px rgba(0, 0, 0, .55); --shadow-sm: 0 6px 18px rgba(0, 0, 0, .4); --scrim: rgba(5, 6, 13, .55); } /* ---- light theme ---- */ [data-theme="light"] { --text: #1a1f2e; --text-dim: #5b6478; --text-faint: #8a93a8; --surface: rgba(255, 255, 255, .78); --surface-solid: #ffffff; --surface-2: #f3f5fb; --surface-3: #e8ebf4; --surface-hover: rgba(20, 30, 60, .06); --border: rgba(15, 20, 40, .1); --border-strong: rgba(15, 20, 40, .18); --shadow: 0 18px 50px rgba(40, 50, 90, .2); --shadow-sm: 0 6px 18px rgba(40, 50, 90, .14); --scrim: rgba(20, 30, 60, .25); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: var(--font); color: var(--text); background: #05060d; overflow: hidden; -webkit-font-smoothing: antialiased; user-select: none; } button { font-family: inherit; color: inherit; cursor: pointer; border: none; background: none; } input, textarea { font-family: inherit; } ::selection { background: var(--accent-soft); } /* ---- desktop + wallpaper ---- */ #desktop { position: fixed; inset: 0; } #wallpaper { position: fixed; inset: 0; z-index: 0; background: var(--wp, linear-gradient(160deg, #0a0e1f, #05060d)); background-size: cover; background-position: center; transition: background .5s ease; } /* Icons stack in a column; when there are too many to fit above the taskbar they wrap into a fresh column to the right (max-height caps the column at the usable desktop height) instead of spilling behind the taskbar and becoming unreachable. */ #desktop-icons { position: fixed; top: 14px; left: 14px; z-index: 1; display: flex; flex-direction: column; flex-wrap: wrap; align-content: start; gap: 6px; max-height: calc(100vh - var(--taskbar-h) - 28px); pointer-events: none; } /* flex-shrink:0 keeps each icon at its natural height so the column can overflow and wrap; without it the icons shrink to fit one column and never wrap. */ /* pointer-events:auto re-enables interaction on the icons themselves; the container stays transparent so empty space between icons is the desktop. */ #desktop-icons > .desktop-icon { flex: 0 0 auto; pointer-events: auto; } #windows { position: fixed; inset: 0 0 var(--taskbar-h) 0; z-index: 5; pointer-events: none; } #windows > * { pointer-events: auto; } #taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--taskbar-h); z-index: 100; } /* ============================================================================ WINDOWS ========================================================================== */ .window { position: absolute; display: flex; flex-direction: column; background: var(--surface); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); min-width: 280px; min-height: 180px; overflow: hidden; opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .16s ease, transform .16s ease, box-shadow .2s; } .window.open { opacity: 1; transform: none; } /* Scoped under `#windows >` so these states outrank the `#windows > *` base rule (an ID beats two classes). Without this, minimised/closing windows kept pointer-events: auto — an invisible window that swallowed clicks. */ #windows > .window.closing { opacity: 0; transform: scale(.97); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } #windows > .window.minimized { opacity: 0; transform: scale(.92) translateY(60px); pointer-events: none; transition: opacity .18s, transform .18s; } .window.dragging { transition: none; box-shadow: 0 28px 70px rgba(0,0,0,.6); } .window.focused { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); box-shadow: 0 22px 60px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); } .window.maximized { border-radius: 0; border-color: transparent; } .win-titlebar { height: 38px; flex: 0 0 38px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; cursor: grab; background: linear-gradient(180deg, var(--surface-hover), transparent); border-bottom: 1px solid var(--border); } .window.dragging .win-titlebar { cursor: grabbing; } .win-icon { display: grid; place-items: center; width: 18px; height: 18px; color: var(--accent); } .win-icon svg { width: 16px; height: 16px; } .win-title { font-size: .82rem; font-weight: 500; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .window.focused .win-title { color: var(--text); } .win-controls { display: flex; align-items: center; gap: 2px; margin-left: auto; } .win-btn { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--text-dim); transition: background .12s, color .12s; } .win-btn:hover { background: var(--surface-hover); color: var(--text); } .win-btn.close:hover { background: rgba(248,113,113,.18); color: var(--danger); } .win-min::after { content: ""; width: 10px; height: 2px; background: currentColor; border-radius: 1px; } .win-max::after { content: ""; width: 10px; height: 9px; border: 1.8px solid currentColor; border-radius: 2px; } .window.maximized .win-max::after { width: 9px; height: 9px; border: none; background: currentColor; clip-path: polygon(0 30%, 30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%); } .win-close::after { content: "✕"; font-size: 11px; font-weight: 600; } .win-body { flex: 1 1 auto; overflow: hidden; position: relative; display: flex; flex-direction: column; min-height: 0; } /* resize handles */ .win-resize { position: absolute; z-index: 2; } .rs-n { top: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; } .rs-s { bottom: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; } .rs-e { right: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; } .rs-w { left: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; } .rs-ne { top: -3px; right: -3px; width: 14px; height: 14px; cursor: nesw-resize; } .rs-nw { top: -3px; left: -3px; width: 14px; height: 14px; cursor: nwse-resize; } .rs-se { bottom: -3px; right: -3px; width: 14px; height: 14px; cursor: nwse-resize; } .rs-sw { bottom: -3px; left: -3px; width: 14px; height: 14px; cursor: nesw-resize; } .window.maximized .win-resize { display: none; } /* snap guide */ .snap-guide { position: fixed; z-index: 4; border-radius: 10px; background: var(--accent-soft); border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); pointer-events: none; transition: opacity .12s; } /* ============================================================================ TASKBAR ========================================================================== */ #taskbar { display: flex; align-items: center; gap: 8px; padding: 0 8px; background: var(--surface); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border-top: 1px solid var(--border); } .start-btn { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 10px; border-radius: 9px; font-weight: 600; font-size: .85rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); transition: background .12s, border-color .12s; } .start-btn:hover, .start-btn.active { background: var(--accent-soft); border-color: var(--border-strong); } .start-logo { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; color: #fff; background: radial-gradient(circle at 35% 30%, #b9a8ff, #6c5ce7 75%); box-shadow: 0 0 12px rgba(124,108,246,.5); } .task-running { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .task-running::-webkit-scrollbar { display: none; } .task-app { display: flex; align-items: center; gap: 7px; height: 34px; max-width: 190px; min-width: 0; padding: 0 10px; border-radius: 8px; background: transparent; border: 1px solid transparent; font-size: .8rem; color: var(--text-dim); transition: background .12s, color .12s; } .task-app:hover { background: var(--surface-hover); color: var(--text); } .task-app.active { background: var(--accent-soft); color: var(--text); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .task-app-ic { display: grid; place-items: center; width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; } .task-app-ic svg { width: 15px; height: 15px; } .task-app-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .task-tray { display: flex; align-items: center; gap: 4px; } .tray-btn { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--text-dim); transition: background .12s, color .12s; } .tray-btn:hover { background: var(--surface-hover); color: var(--text); } .tray-btn svg { width: 17px; height: 17px; } .tray-clock { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--text-dim); padding: 0 8px; height: 34px; display: grid; place-items: center; border-radius: 8px; } .tray-clock:hover { background: var(--surface-hover); color: var(--text); } /* ============================================================================ START MENU ========================================================================== */ .start-menu { position: absolute; left: 8px; bottom: calc(var(--taskbar-h) + 8px); width: 340px; max-height: 460px; display: flex; flex-direction: column; padding: 12px; gap: 10px; background: var(--surface); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow); opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none; transition: opacity .16s, transform .16s; } .start-menu.open { opacity: 1; transform: none; pointer-events: auto; } .start-head { display: flex; } .start-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; } .start-search input { flex: 1; border: none; outline: none; background: transparent; color: var(--text); font-size: .85rem; } .start-search input::placeholder { color: var(--text-faint); } .start-search-ic { display: grid; place-items: center; color: var(--text-faint); } .start-search-ic svg { width: 15px; height: 15px; } .start-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1 1 auto; } .start-item { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 9px; color: var(--text); font-size: .88rem; transition: background .1s; } .start-item:hover { background: var(--surface-hover); } .start-item-ic { display: grid; place-items: center; width: 22px; height: 22px; color: var(--accent); } .start-item-ic svg { width: 19px; height: 19px; } .start-empty { padding: 18px; text-align: center; color: var(--text-faint); font-size: .85rem; } .start-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--border); } .start-user { display: flex; align-items: center; gap: 10px; } .start-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; background: radial-gradient(circle at 35% 30%, #b9a8ff, #6c5ce7 75%); } .start-username { font-size: .82rem; font-weight: 600; } .start-usermeta { font-size: .72rem; color: var(--text-faint); } .start-power { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--text-dim); transition: background .12s, color .12s; } .start-power:hover { background: var(--surface-hover); color: var(--text); } .start-power svg { width: 17px; height: 17px; } /* ============================================================================ DESKTOP ICONS ========================================================================== */ .desktop-icon { width: 84px; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; padding: 8px 4px; transition: background .1s; } .desktop-icon:hover { background: var(--surface-hover); } .desktop-icon:active { background: var(--accent-soft); } .desktop-icon-pic { display: grid; place-items: center; width: 38px; height: 38px; color: var(--text); filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); } .desktop-icon-pic svg { width: 30px; height: 30px; } .desktop-icon-label { font-size: .74rem; color: #fff; text-align: center; line-height: 1.15; text-shadow: 0 1px 4px rgba(0,0,0,.8); max-width: 78px; word-break: break-word; } [data-theme="light"] .desktop-icon-label { color: #fff; } /* ============================================================================ CONTEXT MENU ========================================================================== */ .context-menu { position: fixed; z-index: 9000; min-width: 190px; padding: 6px; background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow); opacity: 0; transform: scale(.96); transform-origin: top left; } .context-menu.open { opacity: 1; transform: none; transition: opacity .1s, transform .1s; } .ctx-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 10px; border-radius: 6px; color: var(--text); font-size: .82rem; text-align: left; } .ctx-item:hover:not(.disabled) { background: var(--accent-soft); } .ctx-item.disabled { color: var(--text-faint); cursor: default; } .ctx-ic { display: grid; place-items: center; color: var(--text-dim); } .ctx-ic svg { width: 15px; height: 15px; } .ctx-sep { height: 1px; background: var(--border); margin: 5px 4px; } /* ============================================================================ SHARED APP CHROME ========================================================================== */ .app { display: flex; flex-direction: column; height: 100%; color: var(--text); } .tb-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 7px; font-size: .78rem; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); transition: background .12s, color .12s, border-color .12s; white-space: nowrap; } .tb-btn svg { width: 14px; height: 14px; } .tb-btn:hover { background: var(--surface-hover); color: var(--text); } .tb-btn.primary { background: var(--accent); border-color: transparent; color: #fff; } .tb-btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); } .files-spacer { flex: 1 1 auto; } /* ---- Calculator app ---- */ .app.calculator { outline: none; } .calc-history { display: flex; flex-direction: column; flex: 0 0 auto; max-height: 40%; border-bottom: 1px solid var(--border); background: var(--surface-2); } .calc-history-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; } .calc-history-title { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); } .calc-history-clear { font-size: .68rem; color: var(--text-dim); padding: 2px 7px; border-radius: 5px; transition: background .12s, color .12s; } .calc-history-clear:hover { background: var(--surface-hover); color: var(--text); } .calc-history-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 1px; } .calc-history-empty { font-size: .72rem; color: var(--text-faint); padding: 4px 4px 6px; } .calc-history-row { display: flex; flex-direction: column; align-items: flex-end; padding: 4px 8px; border-radius: 6px; text-align: right; transition: background .1s; } .calc-history-row:hover { background: var(--surface-hover); } .calc-h-expr { font-size: .72rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } .calc-h-res { font-size: .82rem; color: var(--text-dim); font-variant-numeric: tabular-nums; font-family: var(--mono); } .calc-display { flex: 0 0 auto; padding: 12px 16px 12px; text-align: right; border-bottom: 1px solid var(--border); } .calc-expr { min-height: 1.1em; font-size: .8rem; color: var(--text-faint); font-family: var(--mono); font-variant-numeric: tabular-nums; } .calc-value { font-size: 2.1rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; word-break: break-all; line-height: 1.15; } .calc-value.error { color: var(--danger); } .calc-pad { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 1fr); gap: 7px; padding: 10px; min-height: 0; } .calc-key { display: grid; place-items: center; min-width: 0; border-radius: 9px; font-size: 1.05rem; font-weight: 500; color: var(--text); background: var(--surface-3); border: 1px solid var(--border); transition: background .1s, transform .04s, border-color .1s, color .1s; } .calc-key:hover { background: color-mix(in srgb, var(--surface-3) 60%, var(--surface-hover)); } .calc-key:active { transform: translateY(1px); } .calc-key svg { width: 19px; height: 19px; } .calc-key.fn { color: var(--accent-2); background: var(--surface-2); } .calc-key.fn:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface-hover)); } .calc-key.op { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, transparent); } .calc-key.op.active { background: var(--accent); color: #fff; border-color: transparent; } .calc-key.eq { background: var(--accent); color: #fff; border-color: transparent; } .calc-key.eq:hover { background: color-mix(in srgb, var(--accent) 88%, #000); } /* ---- Image viewer app ---- */ .app.images { display: flex; flex-direction: column; } .images-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .images-path { font-size: .78rem; color: var(--text-dim); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .images-toolbar .tb-btn.icon-only { padding: 0 8px; } .images-toolbar .tb-btn.icon-only svg { width: 18px; height: 18px; display: block; } .images-toolbar .tb-btn:disabled { opacity: .38; cursor: default; pointer-events: none; } .images-toolbar .tb-btn.fit.active { color: var(--accent); } .images-stage { flex: 1 1 auto; min-height: 0; overflow: auto; background-color: var(--surface-3); /* transparency checkerboard — works on light & dark via translucent gray */ background-image: linear-gradient(45deg, rgba(127,127,127,.14) 25%, transparent 25%, transparent 75%, rgba(127,127,127,.14) 75%), linear-gradient(45deg, rgba(127,127,127,.14) 25%, transparent 25%, transparent 75%, rgba(127,127,127,.14) 75%); background-size: 22px 22px; background-position: 0 0, 11px 11px; } .images-stage-inner { min-width: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 14px; } .images-img { display: block; max-width: none; width: 100%; height: auto; object-fit: contain; -webkit-user-drag: none; user-select: none; border-radius: 6px; box-shadow: var(--shadow); } .images-message { color: var(--text-faint); font-size: .85rem; text-align: center; max-width: 340px; line-height: 1.5; } .images-status { flex: 0 0 auto; padding: 5px 12px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: .7rem; color: var(--text-faint); font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ---- Paint app ---- */ .app.paint { outline: none; } .paint-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .paint-toolbar .tb-btn:disabled { opacity: .38; cursor: default; pointer-events: none; } .paint-body { flex: 1 1 auto; display: flex; min-height: 0; } .paint-rail { flex: 0 0 auto; width: 140px; padding: 10px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--border); background: var(--surface-2); overflow-y: auto; } .paint-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); margin-bottom: 7px; } .paint-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .paint-tool { display: grid; place-items: center; height: 38px; border-radius: 8px; color: var(--text-dim); background: var(--surface-3); border: 1px solid var(--border); transition: background .1s, color .1s, border-color .1s, transform .04s; } .paint-tool svg { width: 18px; height: 18px; } .paint-tool:hover { background: var(--surface-hover); color: var(--text); } .paint-tool:active { transform: translateY(1px); } .paint-tool.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .paint-size-row { display: flex; align-items: center; gap: 8px; } .paint-size-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text); flex: 0 0 auto; transition: width .08s, height .08s; } .paint-size-input { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); cursor: pointer; } .paint-size-val { font-size: .72rem; color: var(--text-dim); font-family: var(--mono); min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; } .paint-color-cur { position: relative; height: 40px; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 8px; background-color: var(--surface-3); background-image: linear-gradient(45deg, rgba(127,127,127,.30) 25%, transparent 25%), linear-gradient(-45deg, rgba(127,127,127,.30) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(127,127,127,.30) 75%), linear-gradient(-45deg, transparent 75%, rgba(127,127,127,.30) 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0; } .paint-picker { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; background: none; } .paint-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; } .paint-swatch { width: 100%; aspect-ratio: 1; border-radius: 5px; border: 1px solid var(--border); cursor: pointer; padding: 0; transition: transform .06s, box-shadow .1s; } .paint-swatch:hover { transform: scale(1.14); } .paint-swatch.active { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 3px var(--accent); } .paint-fill-group { display: flex; gap: 4px; } .paint-fill-btn { flex: 1 1 0; height: 28px; border-radius: 7px; font-size: .74rem; color: var(--text-dim); background: var(--surface-3); border: 1px solid var(--border); transition: background .1s, color .1s; } .paint-fill-btn:hover { background: var(--surface-hover); color: var(--text); } .paint-fill-btn.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .paint-stage { flex: 1 1 auto; min-width: 0; display: grid; place-items: center; padding: 16px; overflow: hidden; background: var(--surface); } .paint-stage-inner { max-width: 100%; max-height: 100%; display: flex; } .paint-canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; touch-action: none; user-select: none; border-radius: 6px; cursor: crosshair; background-color: #fff; background-image: linear-gradient(45deg, rgba(127,127,127,.18) 25%, transparent 25%), linear-gradient(-45deg, rgba(127,127,127,.18) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(127,127,127,.18) 75%), linear-gradient(-45deg, transparent 75%, rgba(127,127,127,.18) 75%); background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; box-shadow: var(--shadow-sm); } /* ---- inline modal + toast ---- */ .inline-modal { position: absolute; inset: 0; z-index: 50; background: var(--scrim); display: grid; place-items: center; backdrop-filter: blur(2px); } .inline-modal-card { width: min(320px, 86%); background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: 12px; padding: 16px; box-shadow: var(--shadow); } .inline-modal-msg { font-size: .86rem; margin-bottom: 10px; color: var(--text); } .inline-modal-input { width: 100%; height: 34px; padding: 0 10px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: .85rem; outline: none; } .inline-modal-input:focus { border-color: var(--accent); } .inline-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .inline-toast { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 12px); z-index: 60; padding: 8px 14px; border-radius: 8px; font-size: .78rem; color: #fff; background: rgba(20,25,38,.92); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); opacity: 0; transition: opacity .25s, transform .25s; } .inline-toast.show { opacity: 1; transform: translate(-50%, 0); } /* ============================================================================ FILES APP ========================================================================== */ .files-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .files-toolbar .tb-btn { padding: 0 9px; } .crumb { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; } .crumb-part { padding: 0 6px; height: 26px; border-radius: 6px; font-size: .8rem; color: var(--text-dim); white-space: nowrap; } .crumb-part:hover { background: var(--surface-hover); color: var(--text); } .crumb-sep { color: var(--text-faint); } .files-grid-wrap { flex: 1 1 auto; overflow-y: auto; padding: 12px; } .files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .file-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 6px; border-radius: 10px; border: 1px solid transparent; transition: background .1s, border-color .1s; } .file-tile:hover { background: var(--surface-hover); } .file-tile.selected { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .file-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--accent); } .file-icon svg { width: 34px; height: 34px; } .file-tile.is-dir .file-icon { color: var(--accent-2); } .file-name { font-size: .76rem; text-align: center; line-height: 1.2; word-break: break-word; max-width: 88px; color: var(--text); } .files-empty { grid-column: 1 / -1; text-align: center; color: var(--text-faint); padding: 40px 0; font-size: .85rem; } .files-status { padding: 6px 14px; border-top: 1px solid var(--border); font-size: .72rem; color: var(--text-faint); background: var(--surface-2); } /* ============================================================================ EDITOR APP ========================================================================== */ .editor-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .editor-path { font-size: .76rem; color: var(--text-faint); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .editor-area { flex: 1 1 auto; width: 100%; border: none; outline: none; resize: none; padding: 14px 16px; background: transparent; color: var(--text); font-family: var(--mono); font-size: .85rem; line-height: 1.6; user-select: text; } .editor-area::placeholder { color: var(--text-faint); } /* ============================================================================ MARKDOWN VIEWER APP ========================================================================== */ .markdown { height: 100%; } .md-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .md-path { font-size: .76rem; color: var(--text-faint); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .md-toolbar .tb-btn.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .md-scroll { flex: 1 1 auto; overflow-y: auto; padding: 0; } .md-source { display: none; margin: 0; padding: 16px 20px; font-family: var(--mono); font-size: .82rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; } .markdown.show-source .md-source { display: block; } .markdown.show-source .md-body { display: none; } /* rendered document */ .md-body { max-width: 720px; margin: 0 auto; padding: 22px 28px 48px; color: var(--text); font-size: .92rem; line-height: 1.65; word-break: break-word; } .md-body:first-child { margin-top: 0; } .md-body > *:first-child { margin-top: 0; } .md-body > *:last-child { margin-bottom: 0; } .md-h { color: var(--text); font-weight: 650; line-height: 1.25; margin: 1.4em 0 .5em; letter-spacing: -.01em; } .md-body h1.md-h { font-size: 1.7rem; margin-top: .2em; padding-bottom: .3em; border-bottom: 1px solid var(--border); } .md-body h2.md-h { font-size: 1.35rem; padding-bottom: .25em; border-bottom: 1px solid var(--border); } .md-body h3.md-h { font-size: 1.12rem; } .md-body h4.md-h { font-size: 1rem; } .md-body h5.md-h, .md-body h6.md-h { font-size: .9rem; color: var(--text-dim); } .md-p { margin: 0 0 .85em; } .md-list { margin: 0 0 .9em; padding-left: 1.5em; } .md-list li { margin: .2em 0; } .md-list li::marker { color: var(--accent); } .md-quote { margin: 0 0 .9em; padding: .25em 1em; border-left: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); background: var(--surface-hover); border-radius: 0 8px 8px 0; color: var(--text-dim); } .md-quote .md-p { margin: .35em 0; } .md-hr { border: none; border-top: 1px solid var(--border); margin: 1.4em 0; } .md-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); transition: border-color .12s; } .md-link:hover { border-bottom-color: var(--accent); } .md-code { font-family: var(--mono); font-size: .85em; padding: .12em .4em; border-radius: 5px; background: var(--surface-3); color: var(--accent-2); } .md-pre { margin: 0 0 1em; padding: 14px 16px; background: rgba(8, 10, 18, .55); border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; } [data-theme="light"] .md-pre { background: rgba(20, 24, 38, .05); } .md-code-block { font-family: var(--mono); font-size: .82rem; line-height: 1.55; color: var(--text); white-space: pre; } .md-body strong { color: var(--text); font-weight: 680; } .md-body em { font-style: italic; } .md-body kbd { font-family: var(--mono); font-size: .8em; padding: .1em .45em; border-radius: 5px; background: var(--surface-3); border: 1px solid var(--border-strong); box-shadow: 0 1px 0 var(--border); } /* ============================================================================ TERMINAL APP ========================================================================== */ .terminal { height: 100%; overflow-y: auto; padding: 10px 12px; background: rgba(8, 10, 18, .55); font-family: var(--mono); font-size: .8rem; line-height: 1.5; cursor: text; } [data-theme="light"] .terminal { background: rgba(20, 24, 38, .06); color: #1a1f2e; } .term-line { white-space: pre-wrap; word-break: break-word; color: var(--text); user-select: text; } .term-cmd { color: var(--text-dim); } .term-line.err { color: var(--danger); } .term-prompt { color: var(--ok); } .term-inputline { display: flex; align-items: baseline; gap: 6px; } .term-input { flex: 1; border: none; outline: none; background: transparent; color: var(--text); font-family: var(--mono); font-size: .8rem; } .term-input::caret { color: var(--accent); } /* ============================================================================ SETTINGS APP ========================================================================== */ .settings { overflow-y: auto; padding: 16px 18px; gap: 16px; } .setting-section { display: flex; flex-direction: column; gap: 10px; } .setting-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); } .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .setting-label { font-size: .85rem; color: var(--text); } .pill-group { display: flex; gap: 8px; } .theme-pill { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px; font-size: .82rem; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); transition: background .12s, color .12s, border-color .12s; } .theme-pill svg { width: 15px; height: 15px; } .theme-pill:hover { color: var(--text); } .theme-pill.active { background: var(--accent-soft); color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .wall-cell { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 10px; border: 2px solid transparent; transition: border-color .12s; } .wall-cell:hover { background: var(--surface-hover); } .wall-cell.active { border-color: var(--accent); } .wall-swatch { height: 52px; border-radius: 7px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .wall-name { font-size: .72rem; text-align: center; color: var(--text-dim); } .about-box { text-align: center; padding: 14px 0 4px; } .about-logo { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center; font-size: 24px; color: #fff; background: radial-gradient(circle at 35% 30%, #b9a8ff, #6c5ce7 75%); box-shadow: 0 0 24px rgba(124,108,246,.5); } .about-name { font-size: 1.1rem; font-weight: 700; } .about-v { font-size: .76rem; color: var(--accent); margin-top: 2px; } .about-line { font-size: .78rem; color: var(--text-dim); margin-top: 10px; } .about-line.dim { color: var(--text-faint); font-size: .72rem; } /* ============================================================================ SPOTLIGHT (global search / command palette) ========================================================================== */ .spot-overlay { position: fixed; inset: 0; z-index: 8000; display: grid; justify-items: center; align-content: start; padding-top: 12vh; background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .16s; } .spot-overlay.open { opacity: 1; pointer-events: auto; } .spot { width: min(600px, 92vw); display: flex; flex-direction: column; max-height: 70vh; background: var(--surface); backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; transform: translateY(-12px) scale(.985); transition: transform .18s ease; } .spot-overlay.open .spot { transform: none; } .spot-head { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 16px; border-bottom: 1px solid var(--border); } .spot-search-ic { display: grid; place-items: center; color: var(--text-faint); } .spot-search-ic svg { width: 18px; height: 18px; } .spot-input { flex: 1; border: none; outline: none; background: transparent; color: var(--text); font-size: 1rem; } .spot-input::placeholder { color: var(--text-faint); } .spot-hint { font-size: .66rem; color: var(--text-faint); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; flex: 0 0 auto; } .spot-list { overflow-y: auto; padding: 6px; flex: 1 1 auto; } .spot-group { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); padding: 10px 10px 4px; } .spot-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 9px; text-align: left; color: var(--text); transition: background .1s; } .spot-item:hover { background: var(--surface-hover); } .spot-item.selected { background: var(--accent-soft); } .spot-item-ic { display: grid; place-items: center; width: 22px; height: 22px; color: var(--accent); flex: 0 0 auto; } .spot-item-ic svg { width: 18px; height: 18px; } .spot-item-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; } .spot-item-label { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spot-item-label mark { background: color-mix(in srgb, var(--accent) 38%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; } .spot-item-hint { font-size: .7rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); margin-top: 1px; } .spot-empty { padding: 30px; text-align: center; color: var(--text-faint); font-size: .85rem; } .spot-foot { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 16px; border-top: 1px solid var(--border); font-size: .7rem; color: var(--text-faint); background: var(--surface-2); } .spot-foot kbd { font-family: var(--font); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; margin-right: 3px; color: var(--text-dim); background: var(--surface-solid); } /* ============================================================================ SCROLLBARS ========================================================================== */ .files-grid-wrap::-webkit-scrollbar, .start-list::-webkit-scrollbar, .settings::-webkit-scrollbar, .terminal::-webkit-scrollbar, .task-running::-webkit-scrollbar, .spot-list::-webkit-scrollbar { width: 10px; height: 10px; } .files-grid-wrap::-webkit-scrollbar-thumb, .start-list::-webkit-scrollbar-thumb, .settings::-webkit-scrollbar-thumb, .terminal::-webkit-scrollbar-thumb, .spot-list::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } .files-grid-wrap::-webkit-scrollbar-thumb:hover, .terminal::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; } /* ============================================================================ NOTIFICATIONS ========================================================================== */ .notif-toasts { position: fixed; top: 12px; right: 12px; z-index: 9500; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; max-width: 340px; } .notif-toast { pointer-events: auto; width: 320px; display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--surface); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); box-shadow: var(--shadow); color: var(--text); cursor: pointer; text-align: left; opacity: 0; transform: translateX(26px) scale(.98); transition: opacity .22s, transform .22s; } .notif-toast.show { opacity: 1; transform: none; } .notif-toast-ic { display: grid; place-items: center; width: 22px; height: 22px; color: var(--accent); flex: 0 0 auto; margin-top: 1px; } .notif-toast-ic svg { width: 18px; height: 18px; } .notif-toast-body { flex: 1 1 auto; min-width: 0; } .notif-toast-title { font-size: .82rem; font-weight: 600; } .notif-toast-msg { font-size: .76rem; color: var(--text-dim); margin-top: 2px; word-break: break-word; } .notif-toast-close { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--text-faint); flex: 0 0 auto; transition: background .12s, color .12s; } .notif-toast-close:hover { background: var(--surface-hover); color: var(--text); } .notif-toast-close svg { width: 14px; height: 14px; } /* tray bell + unread badge */ .tray-bell { position: relative; } .tray-bell.has-unread { color: var(--accent); } .tray-badge { position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; line-height: 1; pointer-events: none; box-shadow: 0 0 0 2px var(--surface-solid); } /* centre panel — mirrors the start menu, anchored to the bottom-right */ .notif-center { position: absolute; right: 8px; bottom: calc(var(--taskbar-h) + 8px); width: 340px; max-height: 460px; display: flex; flex-direction: column; padding: 10px; background: var(--surface); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow); opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none; transition: opacity .16s, transform .16s; } .notif-center.open { opacity: 1; transform: none; pointer-events: auto; } .nc-head { display: flex; align-items: center; gap: 6px; padding: 4px 6px 10px; border-bottom: 1px solid var(--border); } .nc-title { font-size: .82rem; font-weight: 700; flex: 1 1 auto; } .nc-dnd, .nc-clear { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--text-dim); transition: background .12s, color .12s; } .nc-dnd:hover, .nc-clear:hover { background: var(--surface-hover); color: var(--text); } .nc-dnd.active { background: var(--accent-soft); color: var(--accent); } .nc-dnd svg, .nc-clear svg { width: 16px; height: 16px; } .nc-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1 1 auto; padding: 6px 2px 0; } .nc-list::-webkit-scrollbar { width: 10px; } .nc-list::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } .nc-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 8px; border-radius: 10px; color: var(--text); transition: background .1s; } .nc-row:hover { background: var(--surface-hover); } .nc-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; margin-top: 7px; background: transparent; } .nc-row.unread .nc-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .nc-ic { display: grid; place-items: center; width: 22px; height: 22px; color: var(--accent); flex: 0 0 auto; margin-top: 1px; } .nc-ic svg { width: 18px; height: 18px; } .nc-row-body { flex: 1 1 auto; min-width: 0; } .nc-row-title { font-size: .82rem; font-weight: 600; } .nc-row:not(.unread) .nc-row-title { color: var(--text-dim); font-weight: 500; } .nc-row-msg { font-size: .74rem; color: var(--text-dim); margin-top: 2px; word-break: break-word; } .nc-row-meta { display: flex; gap: 8px; margin-top: 5px; font-size: .68rem; color: var(--text-faint); } .nc-source { color: var(--accent-2); } .nc-row-close { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--text-faint); flex: 0 0 auto; opacity: 0; transition: opacity .12s, background .12s, color .12s; } .nc-row:hover .nc-row-close { opacity: 1; } .nc-row-close:hover { background: var(--surface-3); color: var(--text); } .nc-row-close svg { width: 13px; height: 13px; } .nc-empty { padding: 34px 16px; text-align: center; color: var(--text-faint); } .nc-empty-ic { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 10px; color: var(--text-faint); opacity: .7; } .nc-empty-ic svg { width: 30px; height: 30px; } .nc-empty-title { font-size: .85rem; font-weight: 600; color: var(--text-dim); } .nc-empty-sub { font-size: .74rem; margin-top: 4px; } /* ---- 2048 app ---- */ .app.g2048 { outline: none; gap: 12px; padding: 14px; } .g2048-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; } .g2048-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .g2048-name { font-size: 1.7rem; font-weight: 700; letter-spacing: .02em; line-height: 1; } .g2048-sub { font-size: .74rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .g2048-scores { display: flex; gap: 8px; flex: 0 0 auto; } .g2048-score { min-width: 62px; padding: 5px 12px; border-radius: 9px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); } .g2048-score-label { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); } .g2048-score-val { font-size: 1.15rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; } .g2048-controls { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .g2048-board { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1; margin: 0 auto; flex: 0 1 auto; padding: var(--gap, 10px); background: var(--surface-3); border: 1px solid var(--border); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 30px rgba(0,0,0,.25); touch-action: none; user-select: none; } .g2048-cells { display: grid; grid-template-columns: repeat(4, var(--cell, 80px)); gap: var(--gap, 10px); } .g2048-cell { width: var(--cell, 80px); height: var(--cell, 80px); border-radius: 8px; background: color-mix(in srgb, var(--surface-solid) 55%, var(--surface-3)); } .g2048-tiles { position: absolute; inset: var(--gap, 10px); pointer-events: none; } .g2048-tile { position: absolute; top: 0; left: 0; width: var(--cell, 80px); height: var(--cell, 80px); font-size: calc(var(--cell, 80px) * 0.45); font-weight: 700; transform: translate(calc(var(--c) * (var(--cell, 80px) + var(--gap, 10px))), calc(var(--r) * (var(--cell, 80px) + var(--gap, 10px)))); transition: transform 120ms ease; will-change: transform; } .g2048-tile.len3 { font-size: calc(var(--cell, 80px) * 0.36); } .g2048-tile.len4 { font-size: calc(var(--cell, 80px) * 0.29); } .g2048-tile.len5 { font-size: calc(var(--cell, 80px) * 0.23); } .g2048-tile-inner { width: 100%; height: 100%; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--tb, #3a4258); color: var(--tf, #fff); box-shadow: 0 2px 8px rgba(0,0,0,.18); } .g2048-tile.appear .g2048-tile-inner { animation: g2048-appear 180ms ease; } .g2048-tile.pop .g2048-tile-inner { animation: g2048-pop 220ms ease 70ms; } @keyframes g2048-appear { from { transform: scale(0); } 65% { transform: scale(1.08); } to { transform: scale(1); } } @keyframes g2048-pop { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } /* tile colours: a cool Aether ramp slate → teal → cyan → blue → violet → magenta, glow from 128 */ .g2048-tile-inner[data-value="2"] { --tb:#3a4258; --tf:#cfd6ea; } .g2048-tile-inner[data-value="4"] { --tb:#46527a; --tf:#e2e8fb; } .g2048-tile-inner[data-value="8"] { --tb:#1f7a86; --tf:#d6fbff; } .g2048-tile-inner[data-value="16"] { --tb:#159aa0; --tf:#04201d; } .g2048-tile-inner[data-value="32"] { --tb:#13b8a6; --tf:#03251f; } .g2048-tile-inner[data-value="64"] { --tb:#06b6d4; --tf:#04262b; } .g2048-tile-inner[data-value="128"] { --tb:#3aa8ff; --tf:#03192e; box-shadow: 0 0 14px rgba(58,168,255,.45); } .g2048-tile-inner[data-value="256"] { --tb:#7c6ff0; --tf:#0c0a24; box-shadow: 0 0 16px rgba(124,111,240,.5); } .g2048-tile-inner[data-value="512"] { --tb:#8b5cf6; --tf:#0e0820; box-shadow: 0 0 16px rgba(139,92,246,.55); } .g2048-tile-inner[data-value="1024"] { --tb:#a855f7; --tf:#0e0820; box-shadow: 0 0 18px rgba(168,85,247,.6); } .g2048-tile-inner[data-value="2048"] { --tb:#ec4899; --tf:#1f0713; box-shadow: 0 0 22px rgba(236,72,153,.7); } .g2048-tile-inner[data-value="4096"] { --tb:#f59e0b; --tf:#1a1206; box-shadow: 0 0 22px rgba(245,158,11,.7); } .g2048-tile-inner[data-value="8192"] { --tb:#f43f5e; --tf:#1c0810; box-shadow: 0 0 22px rgba(244,63,94,.7); } /* win / lose overlay */ .g2048-overlay { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; border-radius: 14px; background: color-mix(in srgb, var(--surface-solid) 70%, transparent); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .g2048-overlay.show { display: flex; animation: g2048-fade 220ms ease; } .g2048-overlay.win .g2048-overlay-msg { color: var(--accent); } .g2048-overlay-msg { font-size: 1.5rem; font-weight: 700; } .g2048-overlay-sub { font-size: .82rem; color: var(--text-dim); margin-bottom: 6px; } .g2048-overlay-actions { display: flex; gap: 8px; } @keyframes g2048-fade { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } } /* ============================================================================ RESPONSIVE ========================================================================== */ @media (max-width: 640px) { .start-label { display: none; } .start-btn { padding: 0 10px; } .task-app-name { display: none; } .task-app { max-width: 44px; padding: 0 10px; justify-content: center; } .start-menu { width: calc(100vw - 16px); } .notif-toast, .notif-center { width: calc(100vw - 24px); max-width: 340px; } #desktop-icons { flex-direction: row; flex-wrap: wrap; max-width: calc(100vw - 28px); } } /* reduced motion */ @media (prefers-reduced-motion: reduce) { .window, .start-menu, .context-menu, .inline-toast, #wallpaper, .spot-overlay, .spot, .notif-toast, .notif-center { transition: none !important; } .g2048-tile { transition: none !important; } .g2048-tile.appear .g2048-tile-inner, .g2048-tile.pop .g2048-tile-inner, .g2048-overlay.show { animation: none !important; } }