/* ============================================================ xp.css — Windows XP "Luna" skin (Blue / Olive / Silver). Activated when . Layered AFTER styles.css so it overrides the glass/dark look. ============================================================ */ /* ---- shared Luna tokens (window beige, selection, fonts) ---- */ :root[data-theme^="xp-"] { --xp-font: Tahoma, Verdana, "Segoe UI", Geneva, sans-serif; --xp-face: #ece9d8; /* Luna window/control face */ --xp-face-2: #f1efe2; --xp-shadow: #aca899; /* 3D dark edge */ --xp-light: #ffffff; /* 3D light edge */ --xp-frame: #0831d9; /* window outer frame (blue) */ --xp-start-a: #3aa03a; /* green Start button */ --xp-start-b: #56c156; --xp-start-c: #2e8b2e; /* remap the app's own variables so existing components read as XP */ --bg: #5a7edc; --bg-2: #5a7edc; --panel: #ece9d8; --panel-solid: #ece9d8; --panel-head: #ffffff; --border: #aca899; --border-strong: #808080; --text: #000000; --muted: #404040; --faint: #6a6a6a; --accent: #1f5bd0; --accent-dim: #cdd7f2; --good: #2f8f2f; --warn: #c07000; --bad: #c62828; --sans: var(--xp-font); --radius: 3px; --tb-h: 0px; /* no top bar in XP */ color-scheme: light; } :root[data-theme="xp-blue"] { --xp-title-a:#0058e6; --xp-title-b:#2f8bff; --xp-title-c:#0a3fc0; --xp-taskbar-a:#245edb; --xp-taskbar-b:#3f8cf3; --xp-taskbar-lo:#1941a5; --xp-frame:#0831d9; --accent:#1f5bd0; } :root[data-theme="xp-olive"] { --xp-title-a:#6d7b46; --xp-title-b:#93a05b; --xp-title-c:#586436; --xp-taskbar-a:#7a8b4e; --xp-taskbar-b:#97a86a; --xp-taskbar-lo:#55632f; --xp-frame:#58642f; --accent:#5a6b2e; --accent-dim:#e0e4cf; } :root[data-theme="xp-silver"] { --xp-title-a:#7e7fa6; --xp-title-b:#b0b2c9; --xp-title-c:#63647f; --xp-taskbar-a:#a3a3bd; --xp-taskbar-b:#cfcfe0; --xp-taskbar-lo:#7d7d97; --xp-frame:#7a7a99; --accent:#54547a; --accent-dim:#dcdce8; } :root[data-theme^="xp-"] body { font-family: var(--xp-font); font-size: 11px; background: #5a7edc; } /* ---- Bliss wallpaper (SVG recreation) ---- */ :root[data-theme^="xp-"] #bg { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' preserveAspectRatio='xMidYMid slice' viewBox='0 0 1600 1000'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232f6fd6'/%3E%3Cstop offset='0.45' stop-color='%235a9bec'/%3E%3Cstop offset='0.75' stop-color='%23a9d0f5'/%3E%3Cstop offset='1' stop-color='%23e6f2fb'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237cb342'/%3E%3Cstop offset='1' stop-color='%233f8b1e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='1000' fill='url(%23s)'/%3E%3Cpath d='M0 720 C 350 600 700 690 1000 660 C 1250 636 1450 700 1600 670 L1600 1000 L0 1000 Z' fill='url(%23g)'/%3E%3Cpath d='M0 780 C 300 700 750 760 1100 730 C 1350 710 1500 760 1600 745 L1600 1000 L0 1000 Z' fill='%234c9a2a' opacity='0.85'/%3E%3Cellipse cx='300' cy='230' rx='140' ry='42' fill='%23ffffff' opacity='0.85'/%3E%3Cellipse cx='430' cy='250' rx='110' ry='34' fill='%23ffffff' opacity='0.8'/%3E%3Cellipse cx='1180' cy='170' rx='170' ry='46' fill='%23ffffff' opacity='0.8'/%3E%3C/svg%3E") center/cover no-repeat fixed; opacity: 1; } /* ---- Per-scheme wallpapers: Olive gets a warm "autumn" Bliss, Silver a cool grey one. Same specificity as the base rule above, so later source order wins for these two. ---- */ :root[data-theme="xp-olive"] #bg { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' preserveAspectRatio='xMidYMid slice' viewBox='0 0 1600 1000'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23c9822f'/%3E%3Cstop offset='0.45' stop-color='%23e0a94b'/%3E%3Cstop offset='0.75' stop-color='%23f0d38a'/%3E%3Cstop offset='1' stop-color='%23f8eecb'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23859a2e'/%3E%3Cstop offset='1' stop-color='%23556016'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='1000' fill='url(%23s)'/%3E%3Cpath d='M0 720 C 350 600 700 690 1000 660 C 1250 636 1450 700 1600 670 L1600 1000 L0 1000 Z' fill='url(%23g)'/%3E%3Cpath d='M0 780 C 300 700 750 760 1100 730 C 1350 710 1500 760 1600 745 L1600 1000 L0 1000 Z' fill='%236f7d24' opacity='0.85'/%3E%3Cellipse cx='300' cy='230' rx='140' ry='42' fill='%23fff6e6' opacity='0.85'/%3E%3Cellipse cx='430' cy='250' rx='110' ry='34' fill='%23fff6e6' opacity='0.8'/%3E%3Cellipse cx='1180' cy='170' rx='170' ry='46' fill='%23fff6e6' opacity='0.8'/%3E%3C/svg%3E") center/cover no-repeat fixed; } :root[data-theme="xp-silver"] #bg { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' preserveAspectRatio='xMidYMid slice' viewBox='0 0 1600 1000'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23768498'/%3E%3Cstop offset='0.45' stop-color='%239aabbf'/%3E%3Cstop offset='0.75' stop-color='%23c2ccd8'/%3E%3Cstop offset='1' stop-color='%23e9eef3'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236f8a66'/%3E%3Cstop offset='1' stop-color='%23415c3f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='1000' fill='url(%23s)'/%3E%3Cpath d='M0 720 C 350 600 700 690 1000 660 C 1250 636 1450 700 1600 670 L1600 1000 L0 1000 Z' fill='url(%23g)'/%3E%3Cpath d='M0 780 C 300 700 750 760 1100 730 C 1350 710 1500 760 1600 745 L1600 1000 L0 1000 Z' fill='%23577a4e' opacity='0.85'/%3E%3Cellipse cx='300' cy='230' rx='140' ry='42' fill='%23ffffff' opacity='0.8'/%3E%3Cellipse cx='430' cy='250' rx='110' ry='34' fill='%23ffffff' opacity='0.75'/%3E%3Cellipse cx='1180' cy='170' rx='170' ry='46' fill='%23ffffff' opacity='0.75'/%3E%3C/svg%3E") center/cover no-repeat fixed; } :root[data-theme^="xp-"] #scrim { display: none; } :root[data-theme^="xp-"] .desk-wallpaper { background: transparent; } /* ---- no top bar / status footer in XP; the desktop fills the screen down to the taskbar ---- */ :root[data-theme^="xp-"] #topbar { display: none; } :root[data-theme^="xp-"] #statusline { display: none; } /* version + changelog live in the Start menu now */ :root[data-theme^="xp-"] #main { top: 0; padding: 0; } /* The desktop never scrolls (XP-style): widgets are clipped to what fits — curate via Edit layout. */ :root[data-theme^="xp-"] .desk-wallpaper { overflow: hidden; padding: 10px 10px 40px; } /* ================= Windows ================= */ :root[data-theme^="xp-"] .win { background: var(--xp-face); border: 3px solid var(--xp-frame); border-top: none; border-radius: 8px 8px 0 0; box-shadow: 3px 3px 12px rgba(0,0,0,.5); } :root[data-theme^="xp-"] .win.active { border-color: var(--xp-frame); } :root[data-theme^="xp-"] .win-titlebar { height: 29px; padding: 0 4px 0 6px; background: linear-gradient(180deg, var(--xp-title-b) 0%, var(--xp-title-a) 8%, var(--xp-title-a) 40%, var(--xp-title-c) 100%); border-radius: 7px 7px 0 0; border-top: 1px solid #fff3; color: #fff; } :root[data-theme^="xp-"] .win:not(.active) .win-titlebar { filter: saturate(.5) brightness(.9); opacity: .92; } :root[data-theme^="xp-"] .win-title { font-weight: 700; font-size: 12px; text-shadow: 1px 1px 1px rgba(0,0,0,.45); letter-spacing: .2px; } :root[data-theme^="xp-"] .win-title .win-ico { filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); } :root[data-theme^="xp-"] .win-controls { gap: 2px; } :root[data-theme^="xp-"] .win-btn { width: 22px; height: 22px; border-radius: 3px; color: #fff; padding: 0; line-height: 0; border: 1px solid #ffffff88; background: linear-gradient(180deg, #ffffff55, #ffffff10); display: inline-flex; align-items: center; justify-content: center; } :root[data-theme^="xp-"] .win-btn svg { width: 13px; height: 13px; display: block; } :root[data-theme^="xp-"] .win-btn:hover { background: linear-gradient(180deg, #ffffff88, #ffffff33); } :root[data-theme^="xp-"] .win-btn.close { background: linear-gradient(180deg, #f7a99b, #d94a34 55%, #b5230f); border-color: #e77; } :root[data-theme^="xp-"] .win-btn.close:hover { background: linear-gradient(180deg, #ffb9ab, #ee5a44 55%, #cc2f14); } :root[data-theme^="xp-"] .win-body { background: var(--xp-face); color: #000; } /* window inner toolbars/sections read as XP */ :root[data-theme^="xp-"] .win-toolbar { background: var(--xp-face-2); border-bottom: 1px solid var(--xp-shadow); } /* ================= Buttons (3D beveled) ================= */ :root[data-theme^="xp-"] .btn { background: linear-gradient(180deg, #fdfdfd, #ece9d8 55%, #dcd9c8); border: 1px solid #7b7b6e; border-radius: 3px; color: #000; font-family: var(--xp-font); box-shadow: inset 0 0 0 1px #fff8; padding: 3px 12px; min-height: 23px; } :root[data-theme^="xp-"] .btn:hover { border-color: var(--xp-frame); background: linear-gradient(180deg, #ffffff, #f2f0e6 55%, #e6e3d4); } :root[data-theme^="xp-"] .btn:active { background: linear-gradient(180deg, #dcd9c8, #ece9d8); box-shadow: inset 1px 1px 2px #0003; } :root[data-theme^="xp-"] .btn.primary { background: linear-gradient(180deg, #eaf3ff, #cfe0fb 55%, #b6d0f6); border-color: var(--xp-frame); } :root[data-theme^="xp-"] .btn.icon, :root[data-theme^="xp-"] .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; } :root[data-theme^="xp-"] .btn.icon:hover, :root[data-theme^="xp-"] .btn.ghost:hover { background: var(--accent-dim); border-color: #9db8e0; } /* ================= Form controls ================= */ /* Text-like fields only — checkbox/radio/color/file/range are styled separately below. */ :root[data-theme^="xp-"] input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]), :root[data-theme^="xp-"] textarea, :root[data-theme^="xp-"] select, :root[data-theme^="xp-"] .nt-input, :root[data-theme^="xp-"] .chat-ta, :root[data-theme^="xp-"] .chat-search { background: #fff; color: #000; border: 1px solid #7b9ebd; border-radius: 2px; box-shadow: inset 1px 1px 2px #0000001a; font-family: var(--xp-font); } :root[data-theme^="xp-"] input:focus, :root[data-theme^="xp-"] textarea:focus, :root[data-theme^="xp-"] select:focus { outline: 1px dotted #333; border-color: var(--xp-frame); } /* Authentic XP checkboxes + radios (white box, inset border, green tick). */ :root[data-theme^="xp-"] input[type=checkbox], :root[data-theme^="xp-"] input[type=radio] { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; min-width: 13px; flex: none; margin: 0 5px 0 0; padding: 0; vertical-align: middle; position: relative; cursor: pointer; background: #fff; border: 1px solid #7f9db9; border-radius: 2px; box-shadow: inset 1px 1px 1px rgba(0,0,0,.15); } :root[data-theme^="xp-"] input[type=radio] { border-radius: 50%; } :root[data-theme^="xp-"] input[type=checkbox]:hover, :root[data-theme^="xp-"] input[type=radio]:hover { border-color: var(--xp-frame); } /* Kill the modern toggle-switch knob (styles.css `.switch input::after`) so UNCHECKED boxes stay empty. Without this, .switch checkboxes show a stray 18px white circle when unchecked. */ :root[data-theme^="xp-"] input[type=checkbox]::after, :root[data-theme^="xp-"] input[type=radio]::after { content: none; } :root[data-theme^="xp-"] input[type=checkbox]:checked::after { content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; box-sizing: content-box; border: solid #1a7a1a; border-width: 0 2px 2px 0; transform: rotate(45deg); } :root[data-theme^="xp-"] input[type=radio]:checked::after { content: ''; position: absolute; left: 3px; top: 3px; width: 5px; height: 5px; border-radius: 50%; background: #1a7a1a; } /* ================= Panels / widgets on the desktop ================= */ :root[data-theme^="xp-"] .panel, :root[data-theme^="xp-"] .widget, :root[data-theme^="xp-"] .modal { background: var(--xp-face); border: 1px solid var(--xp-shadow); border-radius: 4px; color: #000; box-shadow: 2px 2px 8px rgba(0,0,0,.35); } :root[data-theme^="xp-"] .modal-head { background: linear-gradient(180deg, var(--xp-title-b), var(--xp-title-a) 40%, var(--xp-title-c)); color: #fff; border-radius: 4px 4px 0 0; } :root[data-theme^="xp-"] .modal-head h2 { color: #fff; text-shadow: 1px 1px 1px #0006; } /* ================= Kill leftover Aero glass (XP is opaque) ================= */ :root[data-theme^="xp-"] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ================= Toasts + modal dim ================= */ :root[data-theme^="xp-"] .toast { background: #ece9d8; color: #000; border: 1px solid #7f9db9; border-radius: 4px; box-shadow: 2px 2px 10px rgba(0,0,0,.4); font-family: var(--xp-font); border-left-width: 4px; border-left-color: #7f9db9; } :root[data-theme^="xp-"] .toast.ok { border-left-color: #2f8f2f; } :root[data-theme^="xp-"] .toast.err { border-left-color: #c62828; } :root[data-theme^="xp-"] .modal-backdrop { background: rgba(0, 0, 0, .32); } /* ================= Right-click context menu ================= */ .xp-ctxmenu { position: absolute; z-index: 5000; min-width: 158px; background: #fff; border: 1px solid #979797; padding: 2px; box-shadow: 2px 2px 4px rgba(0, 0, 0, .35); font-family: var(--xp-font, Tahoma, "Segoe UI", sans-serif); font-size: 12px; color: #000; opacity: 0; transform: scale(.97); transform-origin: top left; transition: opacity .06s ease, transform .06s ease; pointer-events: none; } .xp-ctxmenu.open { opacity: 1; transform: none; pointer-events: auto; } .xp-ctx-item { display: flex; align-items: center; gap: 9px; padding: 4px 24px 4px 7px; color: #000; cursor: default; border-radius: 2px; white-space: nowrap; line-height: 1.3; } .xp-ctx-item:hover { background: #2c62c9; color: #fff; } .xp-ctx-item.bold .xp-ctx-label { font-weight: 700; } .xp-ctx-item.disabled { color: #9a9a9a; pointer-events: none; } .xp-ctx-ico { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; flex: 0 0 16px; } .xp-ctx-ico svg { width: 15px; height: 15px; } .xp-ctx-sep { height: 0; margin: 3px 3px; border-top: 1px solid #d4d0c8; border-bottom: 1px solid #fff; } /* ================= Scrollbars ================= */ :root[data-theme^="xp-"] ::-webkit-scrollbar { width: 17px; height: 17px; } :root[data-theme^="xp-"] ::-webkit-scrollbar-track { background: #d4d0c8; } :root[data-theme^="xp-"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #eef1f7, #b7c4dd); border: 1px solid #8a97b0; border-radius: 2px; } :root[data-theme^="xp-"] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f7faff, #a9bad9); } /* ================= Taskbar ================= */ :root[data-theme^="xp-"] .desk-dock { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; height: 30px; transform: none; border-radius: 0; padding: 0; gap: 0; background: linear-gradient(180deg, var(--xp-taskbar-b) 0%, var(--xp-taskbar-a) 9%, var(--xp-taskbar-a) 55%, var(--xp-taskbar-lo) 100%); border-top: 1px solid #ffffff55; box-shadow: 0 -1px 3px rgba(0,0,0,.4); backdrop-filter: none; display: flex; align-items: stretch; z-index: 100000; } /* the existing dock-apps launcher list becomes the running-window task strip */ :root[data-theme^="xp-"] .dock-apps { display: flex; align-items: center; gap: 3px; padding: 2px 4px; flex: 1; overflow-x: auto; } :root[data-theme^="xp-"] .dock-item { height: 24px; min-width: 150px; max-width: 160px; padding: 0 8px; border-radius: 3px; display: flex; align-items: center; gap: 6px; justify-content: flex-start; color: #fff; font-size: 11px; background: linear-gradient(180deg, #ffffff30, #ffffff08); border: 1px solid #ffffff33; box-shadow: none; } :root[data-theme^="xp-"] .dock-item:hover { background: linear-gradient(180deg, #ffffff55, #ffffff20); } :root[data-theme^="xp-"] .dock-item.active { background: linear-gradient(180deg, #00000030, #00000010); box-shadow: inset 1px 1px 3px #00000055; } :root[data-theme^="xp-"] .dock-item:not(.running) { display: none; } /* taskbar only shows OPEN apps */ :root[data-theme^="xp-"] .dock-item svg { width: 16px; height: 16px; } :root[data-theme^="xp-"] .dock-dot { display: none; } :root[data-theme^="xp-"] .dock-badge { position: static; margin-left: auto; } /* Taskbar labels: hidden everywhere by default (dark-mode dock is icon-only), shown in XP. */ .dock-label { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root[data-theme^="xp-"] .dock-label { display: inline; } /* Desktop icons: the phone home screen. Hidden on desktop; shown by the mobile block below. */ .desk-icons { display: none; } /* ================= Mobile / touch layout (phones) ================= */ @media (max-width: 760px) { /* Apps go full-screen: no window chrome frills, no resize handles, bigger touch title bar. */ .win, :root[data-theme^="xp-"] .win { border-radius: 0; border-width: 0 0 0 0; box-shadow: none; } .win-resize { display: none !important; } :root[data-theme^="xp-"] .win-titlebar { height: 40px; border-radius: 0; } :root[data-theme^="xp-"] .win-btn { width: 32px; height: 32px; } .win-btn.max { display: none; } /* apps are already full-screen; minimize = home, close = exit */ /* Home = desktop icons over Bliss; hide the widget wallpaper (widgets are desktop-only for now). */ .desk-wallpaper { display: none !important; } .desk-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 2px; padding: 16px 6px 10px; align-content: start; overflow-y: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 46px; z-index: 1; } .desk-icon { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: none; color: #fff; padding: 6px 2px; cursor: pointer; } .desk-icon-img { width: 46px; height: 46px; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 9px; box-shadow: 0 1px 3px rgba(0,0,0,.35); } .desk-icon-img svg { width: 26px; height: 26px; color: #fff; } .desk-icon-label { font-size: 11px; line-height: 1.1; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.7); } /* Taskbar taller, task buttons icon-only. */ :root[data-theme^="xp-"] .desk-dock { height: 46px; } :root[data-theme^="xp-"] .dock-apps { gap: 4px; } :root[data-theme^="xp-"] .dock-item { min-width: 46px; max-width: 46px; padding: 0; justify-content: center; } :root[data-theme^="xp-"] .dock-item svg { width: 22px; height: 22px; } :root[data-theme^="xp-"] .dock-label { display: none; } .xp-start { font-size: 16px; padding: 0 16px 3px 12px; border-radius: 0 14px 14px 0; } .xp-start .xp-flag { width: 24px; height: 24px; } .xp-clock { font-size: 12px; } .xp-tray-ico svg { width: 20px; height: 20px; } /* Start menu = full-screen sheet with big tap targets. */ .xp-startmenu { left: 0; right: 0; width: 100%; max-height: calc(100vh - 46px); bottom: 46px; border-radius: 0; } .xp-sm-head { height: 64px; } .xp-sm-right { width: 132px; } .xp-sm-item { padding: 11px 12px; font-size: 14px; } .xp-sm-item svg { width: 26px; height: 26px; } /* Modals fill more of the screen. */ .modal { width: 96vw !important; max-width: 96vw !important; } } /* Start button (injected by desktop.js as .xp-start) */ .xp-start { display: none; align-items: center; gap: 6px; height: 100%; padding: 0 22px 3px 12px; font-family: var(--xp-font); font-weight: 700; font-style: italic; font-size: 15px; color: #fff; text-shadow: 1px 1px 2px #0007; border: none; cursor: pointer; background: radial-gradient(120% 90% at 30% 0%, var(--xp-start-b), var(--xp-start-a) 55%, var(--xp-start-c)); border-radius: 0 12px 12px 0; box-shadow: inset 0 1px 0 #ffffff66, 2px 0 4px #00000040; } .xp-start:hover { background: radial-gradient(120% 90% at 30% 0%, #6ad06a, var(--xp-start-b) 55%, var(--xp-start-a)); } .xp-start .xp-flag { width: 20px; height: 20px; } :root[data-theme^="xp-"] .xp-start { display: inline-flex; } /* system tray + clock (injected as .xp-tray) */ .xp-tray { display: none; align-items: center; gap: 8px; padding: 0 10px 0 12px; margin-left: auto; background: linear-gradient(180deg, #1e51c9aa, #1740a6aa); border-left: 1px solid #ffffff44; color: #fff; } :root[data-theme="xp-olive"] .xp-tray { background: linear-gradient(180deg, #5f6f36aa, #4c5a2caa); } :root[data-theme="xp-silver"] .xp-tray { background: linear-gradient(180deg, #8888a6aa, #6f6f8caa); } :root[data-theme^="xp-"] .xp-tray { display: flex; } .xp-tray-ico { display: inline-flex; opacity: .95; cursor: pointer; } .xp-tray-ico svg { width: 15px; height: 15px; } .xp-clock { font-size: 11px; color: #fff; text-shadow: 1px 1px 1px #0006; min-width: 52px; text-align: center; } .xp-tray-badge { min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #e33; color: #fff; font-size: 9px; display: none; place-items: center; } .xp-tray-ico.muted { opacity: .4; } .xp-clock { cursor: pointer; } /* Quick Launch: Show Desktop (injected as .xp-showdesk, next to Start) */ .xp-showdesk { display: none; align-items: center; justify-content: center; height: 100%; padding: 0 9px; background: none; border: none; border-right: 1px solid #ffffff33; cursor: pointer; color: #fff; } :root[data-theme^="xp-"] .xp-showdesk { display: inline-flex; } .xp-showdesk svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px #0006); } .xp-showdesk:hover { background: #ffffff22; } /* Tray clock → calendar flyout */ .xp-clock-flyout { position: fixed; right: 4px; bottom: 34px; z-index: 6000; width: 200px; background: var(--xp-face, #ece9d8); border: 1px solid #0a3a86; border-radius: 6px 6px 4px 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); padding: 9px; font-family: var(--xp-font, Tahoma, sans-serif); color: #000; } .xp-sound-flyout { position: fixed; right: 4px; bottom: 34px; z-index: 6000; width: 210px; background: var(--xp-face, #ece9d8); border: 1px solid #0a3a86; border-radius: 6px 6px 4px 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); padding: 10px; font-family: var(--xp-font, Tahoma, sans-serif); color: #000; font-size: 12px; } .xp-sound-title { font-weight: 700; color: #0a3a86; margin-bottom: 6px; } :root:not([data-theme^="xp-"]) .xp-sound-flyout { background: var(--panel-solid, #0f1830); border-color: var(--border, #2a3550); color: var(--text, #e6eefc); } :root:not([data-theme^="xp-"]) .xp-sound-title { color: var(--accent, #22d3ee); } .xp-cal-time { text-align: center; font-size: 15px; font-weight: 700; color: #0a3a86; } .xp-cal-month { text-align: center; font-size: 12px; margin: 2px 0 7px; } .xp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } .xp-cal-dow { font-size: 10px; font-weight: 700; text-align: center; color: #0a3a86; padding-bottom: 3px; } .xp-cal-cell { font-size: 11px; text-align: center; padding: 2px 0; border-radius: 3px; } .xp-cal-cell.today { background: #316ac5; color: #fff; font-weight: 700; } .xp-cal-cell.empty { visibility: hidden; } /* ================= Start menu ================= */ .xp-startmenu { position: fixed; left: 0; bottom: 30px; width: 400px; max-height: calc(100vh - 34px); z-index: 100001; font-family: var(--xp-font); border-radius: 8px 8px 0 0; overflow: hidden; box-shadow: 3px 0 16px rgba(0,0,0,.5); border: 1px solid #0b3fb5; display: none; flex-direction: column; } .xp-startmenu.open { display: flex; } .xp-startmenu .xp-sm-cols { flex: 1; min-height: 0; } /* the left pane scrolls internally so an expanded folder can never overflow / clip the menu */ .xp-startmenu .xp-sm-left { overflow-y: auto; overflow-x: hidden; } .xp-startmenu .xp-sm-head, .xp-startmenu .xp-sm-foot { flex: none; } .xp-sm-head { height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 14px; color: #fff; background: linear-gradient(180deg, var(--xp-title-b), var(--xp-title-a) 45%, var(--xp-title-c)); border-bottom: 2px solid #ffffff55; } .xp-sm-avatar { width: 38px; height: 38px; border-radius: 5px; background: #fff3; display: grid; place-items: center; border: 2px solid #ffffff88; font-weight: 700; font-size: 18px; } .xp-sm-user { font-weight: 700; font-size: 14px; text-shadow: 1px 1px 1px #0006; } .xp-sm-cols { display: flex; } .xp-sm-left { flex: 1; background: #fff; padding: 6px; } .xp-sm-right { width: 150px; background: linear-gradient(180deg, #d3e5fa, #b6cef2); padding: 6px; } :root[data-theme="xp-olive"] .xp-sm-right { background: linear-gradient(180deg, #dfe6c8, #c7d2a5); } :root[data-theme="xp-silver"] .xp-sm-right { background: linear-gradient(180deg, #e2e2ee, #ccccdc); } .xp-sm-item { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 3px; cursor: pointer; color: #000; font-size: 12px; } .xp-sm-item:hover { background: var(--accent); color: #fff; } .xp-sm-item:hover svg { color: #fff; } .xp-sm-item svg { width: 22px; height: 22px; color: var(--accent); flex: none; } .xp-sm-right .xp-sm-item { font-weight: 700; } .xp-sm-sep { height: 1px; background: #d7d3c7; margin: 4px 6px; } .xp-sm-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 6px 12px; color: #fff; background: linear-gradient(180deg, var(--xp-title-a), var(--xp-title-c)); border-top: 2px solid #ffffff55; } .xp-sm-foot .xp-sm-item { color: #fff; font-weight: 700; } .xp-sm-foot .xp-sm-item:hover { background: #ffffff33; } /* XP power/log-off glyphs: red-ish tint like the real footer icons */ .xp-sm-foot .xp-sm-item svg { color: #ffd; } .xp-sm-foot .xp-sm-item:first-child svg { color: #ffca63; } /* Start-menu category headers (organized "All Programs"). */ .xp-sm-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--accent); padding: 7px 8px 2px; border-bottom: 1px solid #e4e0d2; margin: 3px 4px 2px; } .xp-sm-left > .xp-sm-cat:first-child { padding-top: 2px; margin-top: 0; } /* ---- Start-menu program folders (XP All Programs flyouts) ---- */ .xp-sm-folder { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 3px; cursor: pointer; color: #000; font-size: 12px; font-weight: 700; } .xp-sm-folder > svg { width: 22px; height: 22px; color: #e6a71e; flex: none; } .xp-sm-folder:hover { background: var(--accent); color: #fff; } .xp-sm-folder:hover > svg { color: #fff; } .xp-sm-flabel { flex: 1; } .xp-sm-arrow { color: #9a9a9a; font-size: 11px; transition: transform .12s ease; } .xp-sm-folder:hover .xp-sm-arrow { color: #fff; } .xp-sm-folder.open .xp-sm-arrow { transform: rotate(90deg); color: var(--accent); } .xp-sm-folder.open:hover .xp-sm-arrow { color: #fff; } /* Inline (accordion) submenu: flows inside the scrollable left pane, so it can never be clipped. */ .xp-sm-flyout { display: none; margin: 1px 0 3px 20px; padding-left: 8px; border-left: 1px solid #d7d3c7; } .xp-sm-flyout.open { display: block; } .xp-sm-flyout .xp-sm-item { font-weight: 400; } /* modern (non-XP) themes: neutral folder colour + border that fits the dark shell */ :root:not([data-theme^="xp-"]) .xp-sm-folder > svg { color: var(--accent, #22d3ee); } :root:not([data-theme^="xp-"]) .xp-sm-flyout { border-left-color: var(--border, #2a3550); } /* ================= Settings as an XP Control Panel ================= */ :root[data-theme^="xp-"] .set-nav { background: linear-gradient(180deg, #f0f4fb 0%, #dce7f8 100%); border-right: 1px solid #a7c0e6; padding: 6px 6px 40px; } :root[data-theme^="xp-"] .set-nav button { border-radius: 3px; color: #0a3a86; font-size: 12px; border: 1px solid transparent; background: none; } :root[data-theme^="xp-"] .set-nav button:hover { background: #ffffffcc; border-color: #b9cef0; } :root[data-theme^="xp-"] .set-nav button.active { background: #fff; border-color: #6f97d6; color: #000; font-weight: 700; box-shadow: inset 0 0 0 1px #cfe0fb; } :root[data-theme^="xp-"] .set-nav button svg { color: var(--accent); } .set-search { width: 100%; box-sizing: border-box; margin: 2px 0 6px; padding: 4px 8px; font-size: 12px; } .set-nav-group { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #2b57a8; padding: 11px 8px 3px; } .set-nav-group:first-child { padding-top: 4px; } :root[data-theme^="xp-"] .set-pane h3 { color: #0a3a86; border-bottom: 1px solid #cfd8e6; padding-bottom: 3px; margin-top: 16px; } :root[data-theme^="xp-"] .set-pane h3:first-child { margin-top: 2px; } :root[data-theme^="xp-"] .pane-sub { color: #55627a; } :root[data-theme^="xp-"] .set-nav-home { font-weight: 700; color: #0a3a86; border-bottom: 1px solid #cbd8ee !important; border-radius: 3px; margin-bottom: 3px; padding-bottom: 6px; } /* ---- Control Panel category landing (works in any theme) ---- */ .cp-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin-top: 12px; } .cp-cat { display: flex; gap: 12px; align-items: flex-start; } .cp-cat-icon { flex: 0 0 34px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--accent, #2c62c9); } .cp-cat-icon svg { width: 30px; height: 30px; } .cp-cat-main { min-width: 0; } .cp-cat-title { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--accent, #1c5fbf); cursor: pointer; text-align: left; } .cp-cat-title:hover { text-decoration: underline; } .cp-cat-desc { font-size: 12px; color: var(--muted, #5a6478); margin: 3px 0 6px; line-height: 1.35; } .cp-cat-links { display: flex; flex-wrap: wrap; gap: 3px 16px; } .cp-cat-link { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--accent, #1c5fbf); cursor: pointer; text-align: left; } .cp-cat-link:hover { text-decoration: underline; } @media (max-width: 760px) { .cp-cat-grid { grid-template-columns: 1fr; } } /* ================= My Computer window ================= */ /* Layout (theme-agnostic) */ .mypc-wrap { display: flex; height: 100%; min-height: 0; } .mypc-side { flex: 0 0 176px; padding: 10px 8px; overflow-y: auto; } .mypc-side-group { border-radius: 6px; padding: 7px 8px; margin-bottom: 10px; } .mypc-side-head { font-size: 12px; font-weight: 700; border-bottom: 1px solid #cdd9ef; padding-bottom: 3px; margin-bottom: 5px; } .mypc-side-link { display: flex; align-items: center; gap: 7px; width: 100%; background: none; border: 0; padding: 3px 2px; font-size: 12px; cursor: pointer; text-align: left; color: inherit; } .mypc-side-link svg { width: 15px; height: 15px; flex: none; } .mypc-side-link:hover { text-decoration: underline; } .mypc-side-strong { font-weight: 700; font-size: 12px; } .mypc-side-dim { font-size: 11px; opacity: .7; } .mypc-main { flex: 1; min-width: 0; padding: 12px 14px; overflow-y: auto; } .mypc-grouphead { font-size: 12px; font-weight: 700; padding: 3px 6px; margin: 6px 0 10px; } .mypc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 12px; margin-bottom: 14px; } .mypc-tile { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid transparent; border-radius: 3px; cursor: pointer; } .mypc-tile-ico svg { width: 34px; height: 34px; } .mypc-tile-label { font-size: 12px; } .mypc-tile-sub { font-size: 11px; opacity: .7; } /* XP skin */ :root[data-theme^="xp-"] .mypc-wrap { background: #fff; color: #000; } :root[data-theme^="xp-"] .mypc-side { background: linear-gradient(180deg, #6d9ae4 0%, #5385d8 100%); } :root[data-theme^="xp-"] .mypc-side-group { background: rgba(255, 255, 255, .93); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); } :root[data-theme^="xp-"] .mypc-side-head { color: #1c3f8f; } :root[data-theme^="xp-"] .mypc-side-link { color: #14387d; } :root[data-theme^="xp-"] .mypc-side-link:hover { color: #c1580b; } :root[data-theme^="xp-"] .mypc-side-link svg { color: #2f6fd6; } :root[data-theme^="xp-"] .mypc-side-strong { color: #222; } :root[data-theme^="xp-"] .mypc-side-dim { color: #666; } :root[data-theme^="xp-"] .mypc-main { background: #fff; } :root[data-theme^="xp-"] .mypc-grouphead { color: #14387d; background: linear-gradient(180deg, #f6f8fc, #e6edf8); border-bottom: 1px solid #b9c7de; } :root[data-theme^="xp-"] .mypc-tile:hover, :root[data-theme^="xp-"] .mypc-tile:focus { background: #d8e6fb; border-color: #a7c0e6; outline: none; } :root[data-theme^="xp-"] .mypc-tile-ico svg { color: #2f6fd6; } :root[data-theme^="xp-"] .mypc-tile-label { color: #111; } :root[data-theme^="xp-"] .mypc-tile-sub { color: #777; } @media (max-width: 760px) { .mypc-wrap { flex-direction: column; } .mypc-side { flex: none; } } /* ================= Draggable desktop shortcuts ================= */ /* Layer sits over the wallpaper; only the icons capture clicks (widgets stay usable). */ .desk-shortcuts { position: absolute; inset: 0; pointer-events: none; z-index: 5; display: none; } :root[data-theme^="xp-"] .desk-shortcuts { display: block; } .desk-sc { position: absolute; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 3px; background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer; pointer-events: auto; touch-action: none; user-select: none; } .desk-sc-img { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .desk-sc-img svg { width: 34px; height: 34px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); } .desk-sc-label { font-size: 11px; color: #fff; text-align: center; line-height: 1.15; max-width: 72px; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .8); } .desk-sc:hover { background: rgba(60, 110, 200, .32); border-color: rgba(130, 170, 235, .55); } .desk-sc:focus { outline: none; } .desk-sc.dragging { opacity: .8; } .desk-sc.selected { background: rgba(49, 106, 197, .5); border-color: rgba(150, 190, 240, .85); } .desk-sc.selected .desk-sc-label { background: #2c62c9; border-radius: 2px; } /* Rubber-band selection rectangle */ .rubber { position: absolute; z-index: 6; border: 1px solid rgba(140, 175, 235, .95); background: rgba(90, 140, 220, .22); pointer-events: none; } @media (max-width: 760px) { :root[data-theme^="xp-"] .desk-shortcuts { display: none; } } /* ================= Display Properties theme picker (works in any theme) ================= */ .disp-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 4px; } .disp-swatch { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px; border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer; } .disp-swatch:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .disp-swatch.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); } .disp-mini { width: 92px; height: 68px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(0,0,0,.35); box-shadow: 0 1px 3px rgba(0,0,0,.3); display: flex; flex-direction: column; } .disp-mini-win { position: absolute; } .disp-mini { position: relative; } .disp-mini-win { top: 12px; left: 14px; width: 64px; height: 40px; border-radius: 3px 3px 0 0; overflow: hidden; border: 1px solid rgba(0,0,0,.3); box-shadow: 0 1px 2px rgba(0,0,0,.3); } .disp-mini-bar { height: 11px; } .disp-mini-body { height: 29px; } .disp-mini-task { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; } .disp-name { font-size: 11.5px; color: var(--text); } .disp-swatch.on .disp-name { font-weight: 700; } /* ================= XP logo mark ================= */ .xp-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--xp-font); } .xp-logo-flag svg { width: 34px; height: 28px; filter: drop-shadow(1px 1px 1px #0006); } .xp-logo.big .xp-logo-flag svg { width: 54px; height: 44px; } .xp-logo-word { line-height: .95; display: inline-flex; flex-direction: column; } .xp-logo-word i { font-style: normal; font-size: 13px; color: #cfe0ff; } .xp-logo.big .xp-logo-word i { font-size: 20px; } .xp-logo-word b { font-size: 26px; font-weight: 700; color: #fff; letter-spacing: -.5px; } .xp-logo.big .xp-logo-word b { font-size: 42px; } .xp-logo-word s { text-decoration: none; font-style: italic; font-weight: 700; color: #ff8c1a; font-size: 15px; align-self: flex-end; margin-top: -6px; } .xp-logo.big .xp-logo-word s { font-size: 24px; } /* ================= Boot splash ================= */ .xp-boot { position: fixed; inset: 0; z-index: 200000; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; transition: opacity .5s; } .xp-boot.fade { opacity: 0; } .xp-boot-bar { width: 190px; height: 15px; border: 2px solid #6a6a6a; border-radius: 9px; overflow: hidden; background: #0a0a0a; } .xp-boot-marq { width: 60px; height: 100%; border-radius: 6px; background: linear-gradient(90deg, transparent, #2a5bd7 20%, #6fa8ff 50%, #2a5bd7 80%, transparent); animation: xpmarq 1.6s linear infinite; } @keyframes xpmarq { 0% { transform: translateX(-70px); } 100% { transform: translateX(190px); } } .xp-boot-foot { position: absolute; bottom: 26px; right: 34px; color: #9fb6e0; font: italic 700 13px var(--xp-font); } /* ================= Welcome / login ================= */ .xp-welcome { position: fixed; inset: 0; z-index: 190000; font-family: var(--xp-font); color: #fff; background: linear-gradient(180deg, #5a7fd6 0%, #3f66c9 45%, #2b50b8 100%); display: flex; flex-direction: column; } .xp-wel-top { height: 22%; border-bottom: 2px solid #ffffff66; box-shadow: 0 3px 0 #6f93e0; } .xp-wel-bottom { height: 16%; border-top: 2px solid #ffffff66; box-shadow: 0 -3px 0 #6f93e0; display: flex; align-items: center; padding: 0 8%; color: #dfe9ff; font-size: 13px; } .xp-wel-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0; } .xp-wel-left { flex: 1; max-width: 42%; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; padding-right: 34px; text-align: right; } .xp-wel-hint { font-size: 15px; color: #eaf1ff; max-width: 320px; } .xp-wel-divider { width: 1px; align-self: stretch; margin: 8% 0; background: linear-gradient(180deg, transparent, #ffffff88, transparent); } .xp-wel-right { flex: 1; max-width: 42%; padding-left: 40px; } .xp-wel-tile { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 6px; cursor: default; } .xp-wel-tile:hover { background: #ffffff14; } .xp-wel-avatar { width: 64px; height: 64px; border-radius: 6px; border: 2px solid #ffffffaa; background: linear-gradient(160deg, #ff9d3c, #e0631b); display: grid; place-items: center; flex: none; box-shadow: 1px 1px 3px #0004; } .xp-wel-av-inner svg { width: 40px; height: 40px; } .xp-wel-fields { display: flex; flex-direction: column; gap: 7px; min-width: 220px; } .xp-wel-name { font-size: 17px; font-weight: 700; text-shadow: 1px 1px 1px #0005; } .xp-wel-row { display: flex; align-items: center; gap: 8px; } .xp-wel-input { flex: 1; padding: 4px 8px; border: 1px solid #274a9c; border-radius: 3px; background: #fff; color: #000; font-family: var(--xp-font); font-size: 13px; } .xp-wel-go { width: 30px; height: 30px; border: none; background: none; cursor: pointer; padding: 0; flex: none; } .xp-wel-go svg { width: 30px; height: 30px; } .xp-wel-go.busy { opacity: .5; } .xp-wel-err { font-size: 12px; color: #ffd7d7; background: #b5230f88; border-radius: 3px; padding: 2px 6px; } @media (max-width: 720px) { .xp-wel-mid { flex-direction: column; gap: 20px; } .xp-wel-left, .xp-wel-right { max-width: 90%; align-items: center; text-align: center; padding: 0; } .xp-wel-divider { width: 60%; height: 1px; margin: 0; background: linear-gradient(90deg, transparent, #ffffff88, transparent); } } /* ================= Recycle Bin ================= */ .rb-wrap { padding: 10px 12px; } .rb-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .rb-list { display: flex; flex-direction: column; gap: 2px; } .rb-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 3px; } .rb-row:hover { background: rgba(49, 106, 197, .12); } :root[data-theme^="xp-"] .rb-row:nth-child(even) { background: rgba(0, 0, 0, .03); } .rb-ico svg { width: 22px; height: 22px; } :root[data-theme^="xp-"] .rb-ico svg { color: #2f6fd6; } .rb-main { flex: 1; min-width: 0; } .rb-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rb-sub { font-size: 11px; opacity: .65; } .rb-actions { display: flex; gap: 4px; align-items: center; } /* ================= Widget-backed apps ================= */ .widget-app { display: flex; flex-direction: column; height: 100%; min-height: 0; } .wa-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; flex: 0 0 auto; } .wa-ico { width: 18px; height: 18px; } .wa-title { font-weight: 700; font-size: 13px; } .wa-meta { font-size: 11px; opacity: .7; margin-left: 2px; } .wa-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; } .wa-body .map { height: 100%; min-height: 320px; border-radius: 4px; overflow: hidden; } :root[data-theme^="xp-"] .wa-bar { background: linear-gradient(180deg, #f6f8fc, #e6edf8); border-bottom: 1px solid #b9c7de; color: #14387d; } :root[data-theme^="xp-"] .wa-ico { color: #2f6fd6; } :root[data-theme^="xp-"] .wa-body { background: #fff; color: #000; } /* ================= *arr management apps ================= */ .arr-app { display: flex; flex-direction: column; height: 100%; min-height: 0; } :root[data-theme^="xp-"] .arr-app { background: #fff; color: #000; } .arr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; flex: 0 0 auto; } .arr-head-l { display: flex; align-items: center; gap: 10px; } .arr-head-ico { width: 26px; height: 26px; } :root[data-theme^="xp-"] .arr-head-ico { color: #2f6fd6; } .arr-head-title { font-weight: 700; font-size: 15px; } .arr-head-sub { font-size: 11px; opacity: .7; } .arr-head-r { display: flex; align-items: center; gap: 6px; } .arr-chip { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: rgba(0, 0, 0, .08); } .arr-chip.warn { background: #f6c342; color: #5a4200; } .arr-tabs { display: flex; gap: 2px; padding: 0 10px; flex: 0 0 auto; border-bottom: 1px solid #c9d3e0; overflow-x: auto; } .arr-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 12px; font-size: 13px; cursor: pointer; color: inherit; white-space: nowrap; } .arr-tab.on { border-bottom-color: var(--accent, #2c62c9); font-weight: 700; } .arr-pane { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; } .arr-loading { padding: 20px; opacity: .6; } .arr-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .arr-filter { flex: 1; min-width: 180px; } .arr-count { font-size: 12px; opacity: .7; } .arr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .arr-card { position: relative; border: 1px solid #cbd5e3; border-radius: 6px; overflow: hidden; background: #fff; display: flex; flex-direction: column; } .arr-card.unmon { opacity: .55; } .arr-poster { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: #222a3a; display: block; } .arr-poster.ph { display: flex; align-items: center; justify-content: center; color: #8b9bb5; } .arr-poster.ph svg { width: 40px; height: 40px; } .arr-card-body { padding: 6px 8px; } .arr-card-title { font-size: 12px; font-weight: 600; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .arr-card-meta { font-size: 11px; opacity: .65; margin-top: 2px; } .arr-card-actions { display: flex; gap: 4px; padding: 0 8px 8px; } .arr-card-actions.wide { padding-top: 4px; } .arr-mini { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 26px; border: 1px solid #cbd5e3; border-radius: 4px; background: #eef2f8; cursor: pointer; color: #223; } .arr-mini svg { width: 15px; height: 15px; } .arr-mini:hover { background: #dfe8f6; } .arr-mini.danger:hover { background: #f8d7da; border-color: #e4868f; } .arr-add-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; border: 0; border-radius: 4px; background: var(--accent, #2c62c9); color: #fff; cursor: pointer; font-size: 12px; } .arr-list { display: flex; flex-direction: column; gap: 2px; } .arr-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 4px; } .arr-row:hover { background: rgba(49, 106, 197, .08); } .arr-row.done { opacity: .6; } .arr-row-main { flex: 1; min-width: 0; } .arr-row-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .arr-row-sub { font-size: 11px; opacity: .65; } .arr-row-right { font-size: 11px; opacity: .7; white-space: nowrap; } .arr-led { width: 9px; height: 9px; border-radius: 50%; background: #c1543a; flex: none; } .arr-led.ok { background: #2f8f2f; } .arr-qbar { height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .1); margin: 5px 0; overflow: hidden; } .arr-qbar i { display: block; height: 100%; background: var(--accent, #2c62c9); } .arr-stat-row { display: flex; gap: 10px; margin: 6px 0 12px; } .arr-stat { flex: 1; text-align: center; border: 1px solid #cbd5e3; border-radius: 6px; padding: 8px; } .arr-stat-n { font-size: 20px; font-weight: 700; color: var(--accent, #2c62c9); } .arr-stat-l { font-size: 11px; opacity: .7; } .arr-sub-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; opacity: .6; margin: 12px 0 5px; } .arr-add-modal { width: 420px; max-width: 92vw; } /* Fleet agent-version chip */ .fleet-ver { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: rgba(0, 0, 0, .1); color: #566; white-space: nowrap; align-self: center; flex: none; } .fleet-ver.stale { background: #f6c342; color: #5a4200; font-weight: 700; } /* Plex now-playing thumbnail */ .plex-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 4px; flex: none; background: #222a3a; } /* UniFi DHCP leases table */ .udhcp-table { display: flex; flex-direction: column; } .udhcp-row { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr 1fr .8fr; gap: 8px; align-items: center; padding: 6px 8px; border-bottom: 1px solid rgba(0, 0, 0, .06); font-size: 12px; } .udhcp-row:hover { background: rgba(49, 106, 197, .06); } .udhcp-head { font-weight: 700; opacity: .6; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; } .udhcp-head:hover { background: none; } .udhcp-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .udhcp-row .mono { font-family: ui-monospace, "Consolas", monospace; font-size: 11px; } @media (max-width: 760px) { .udhcp-row { grid-template-columns: 1.4fr 1fr .7fr; } .udhcp-row > span:nth-child(3), .udhcp-row > span:nth-child(4) { display: none; } } /* ================= AD Users & Computers ================= */ .aduc-split { display: flex; height: calc(100% - 40px); min-height: 0; } .aduc-tree { flex: 0 0 220px; border-right: 1px solid #c9d3e0; overflow-y: auto; padding: 4px 0; } .aduc-list { flex: 0 0 300px; border-right: 1px solid #c9d3e0; overflow-y: auto; } .aduc-detail { flex: 1; min-width: 0; overflow-y: auto; padding: 10px 12px; } .aduc-ou { display: flex; align-items: center; gap: 6px; padding: 4px 6px; cursor: pointer; font-size: 13px; white-space: nowrap; } .aduc-ou:hover { background: rgba(49, 106, 197, .1); } .aduc-ou.active { background: #316ac5; color: #fff; } .aduc-ou.active svg { color: #fff; } .aduc-ou svg { width: 15px; height: 15px; flex: none; } .aduc-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; cursor: pointer; border-bottom: 1px solid rgba(0, 0, 0, .04); } .aduc-item:hover { background: rgba(49, 106, 197, .08); } .aduc-item.active { background: #d8e6fb; } .aduc-item svg { width: 18px; height: 18px; flex: none; } .aduc-grp { display: flex; align-items: center; gap: 8px; padding: 3px 2px; font-size: 12px; } .aduc-grp svg { width: 14px; height: 14px; flex: none; } /* ================= Big Picture (Windows Media Center wall display) ================= */ .bp-root { position: relative; width: 100%; height: 100%; min-height: 420px; overflow: hidden; color: #eaf4ff; font-family: "Segoe UI", "Segoe UI Light", system-ui, sans-serif; font-weight: 300; background: radial-gradient(120% 85% at 50% -12%, #2f7bbf 0%, #17517f 26%, #0b2138 55%, #060d18 82%, #04070e 100%); } .bp-root::after { /* WMC "green energy" glow along the bottom */ content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none; background: radial-gradient(60% 100% at 50% 130%, rgba(120, 230, 170, .28), transparent 70%); } .bp-root:fullscreen { width: 100vw; height: 100vh; } .bp-stage { position: absolute; inset: 0; } .bp-panel { position: absolute; inset: 0; opacity: 0; transform: scale(1.015); transition: opacity .9s ease, transform .9s ease; } .bp-panel.in { opacity: 1; transform: none; } .bp-pad { position: absolute; inset: 4% 6%; display: flex; flex-direction: column; } .bp-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1vh; } .bp-title { font-size: 3.2vw; font-weight: 300; letter-spacing: 2px; color: #bfe6ff; text-shadow: 0 0 24px rgba(90, 190, 255, .5); margin-bottom: 2vh; } .bp-dim { font-size: 2.4vw; color: #9fc4e0; opacity: .7; } /* Clock */ .bp-clock { font-size: 15vw; line-height: .95; font-weight: 300; letter-spacing: -2px; color: #f4f9ff; text-shadow: 0 0 30px rgba(120, 200, 255, .7), 0 2px 8px rgba(0, 0, 0, .5); } .bp-clockdate { font-size: 3.4vw; font-weight: 300; color: #eaf4ff; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); } .bp-clocksub { font-size: 2.2vw; color: #bfe0f5; margin-top: 1vh; } /* Tiles (sensors / locations) */ /* Big Picture camera wall (10-foot UI) */ .bp-cams { display: grid; grid-template-columns: repeat(auto-fit, minmax(28vw, 1fr)); gap: 1.4vw; flex: 1; align-content: start; } .bp-cam { background: rgba(0,0,0,.45); border: 1px solid rgba(150,210,255,.18); border-radius: 12px; padding: .6vw; text-align: center; } .bp-cam img, .bp-cam iframe { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #000; border: 0; } .bp-cam.offline img { opacity: .35; filter: grayscale(1); } .bp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); gap: 1.6vw; align-content: center; flex: 1; } .bp-tile { background: rgba(255, 255, 255, .06); border: 1px solid rgba(150, 210, 255, .18); border-radius: 14px; padding: 2.2vh 1.4vw; text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); } .bp-tile-val { font-size: 4vw; font-weight: 200; text-shadow: 0 0 20px rgba(120, 200, 255, .4); } .bp-tile-lbl { font-size: 1.5vw; color: #a9cfe8; margin-top: .5vh; } /* News */ .bp-news { display: flex; flex-direction: column; gap: 1.4vh; flex: 1; justify-content: center; } .bp-news-item { border-left: 4px solid #4fc3f7; padding-left: 1.4vw; } .bp-news-title { font-size: 2.6vw; font-weight: 300; line-height: 1.15; } .bp-news-src { font-size: 1.3vw; color: #9fc4e0; } /* Flights */ .bp-flights, .bp-agenda { display: flex; flex-direction: column; gap: 1.2vh; flex: 1; justify-content: center; } .bp-flight { display: grid; grid-template-columns: 1.2fr 2fr 1fr; align-items: baseline; gap: 1vw; border-bottom: 1px solid rgba(150, 210, 255, .12); padding-bottom: 1vh; } .bp-flight-call { font-size: 2.6vw; font-weight: 300; } .bp-flight-rte { font-size: 1.9vw; color: #cfe8ff; } .bp-flight-alt { font-size: 1.9vw; color: #9fc4e0; text-align: right; } .bp-agenda-item { border-left: 4px solid #78e6aa; padding-left: 1.2vw; } .bp-agenda-when { font-size: 1.4vw; color: #9fe0c0; } .bp-agenda-title { font-size: 2.4vw; font-weight: 300; } /* Webcam / media */ .bp-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } .bp-caption { position: absolute; left: 4%; bottom: 8%; font-size: 2.4vw; text-shadow: 0 2px 12px #000; } /* Now Playing */ .bp-np { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3vw; padding: 0 6%; } .bp-np-poster { height: 62vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); } .bp-np-title { font-size: 3.6vw; font-weight: 300; } .bp-np-sub { font-size: 1.9vw; color: #a9cfe8; margin-top: 1vh; } /* Weather (reuses widget markup at TV scale) */ .bp-weather { flex: 1; display: flex; flex-direction: column; justify-content: center; } .bp-weather .wx-now { display: flex; align-items: center; gap: 2vw; } .bp-weather .wx-ico-lg { width: 12vw; height: 12vw; } .bp-weather .big { font-size: 9vw; font-weight: 200; } .bp-weather .wx-desc { font-size: 2.6vw; } .bp-weather .wx-sub { font-size: 1.5vw; color: #a9cfe8; } .bp-weather .wx-days { display: flex; gap: 1.4vw; margin-top: 3vh; } .bp-weather .wx-day { display: flex; flex-direction: column; align-items: center; gap: .6vh; font-size: 1.4vw; } .bp-weather .wx-day .i { width: 3.4vw; height: 3.4vw; } .bp-weather .wx-hours { display: none; } /* progress dots + now bar */ .bp-dots { position: absolute; left: 0; right: 0; bottom: 3.5vh; display: flex; justify-content: center; gap: 12px; z-index: 5; } .bp-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(200, 230, 255, .25); transition: .3s; } .bp-dot.on { background: #7fdfff; box-shadow: 0 0 12px #7fdfff; transform: scale(1.25); } .bp-nowbar { position: absolute; top: 3vh; right: 4%; font-size: 1.6vw; color: #cfe8ff; opacity: .85; z-index: 5; text-shadow: 0 2px 10px #000; } /* controls (auto-hide) */ .bp-controls { position: absolute; left: 50%; bottom: 6vh; transform: translateX(-50%); display: flex; gap: 10px; z-index: 8; opacity: 0; pointer-events: none; transition: opacity .3s; } .bp-root.show-ui .bp-controls { opacity: 1; pointer-events: auto; } .bp-btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(20, 60, 100, .6); border: 1px solid rgba(150, 210, 255, .4); color: #eaf4ff; cursor: pointer; } .bp-btn.wide { width: auto; border-radius: 22px; padding: 0 18px; } .bp-btn svg { width: 20px; height: 20px; } .bp-btn:hover { background: rgba(40, 110, 170, .8); } /* settings overlay */ .bp-settings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4, 8, 16, .7); z-index: 10; } .bp-set-card { width: min(520px, 90%); max-height: 86%; overflow-y: auto; background: rgba(12, 34, 58, .96); border: 1px solid rgba(150, 210, 255, .3); border-radius: 16px; padding: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } .bp-set-h { font-size: 22px; font-weight: 300; margin-bottom: 4px; } .bp-set-sub { font-size: 13px; color: #a9cfe8; margin-bottom: 14px; } .bp-set-list { display: flex; flex-direction: column; gap: 8px; } .bp-set-row { display: flex; align-items: center; gap: 10px; font-size: 15px; } .bp-set-row input[type=number] { width: 70px; margin-left: auto; } .bp-set-foot { margin-top: 16px; display: flex; justify-content: flex-end; } @media (max-width: 760px) { .bp-title { font-size: 6vw; } .bp-clock { font-size: 26vw; } .bp-tile-val { font-size: 8vw; } .bp-news-title { font-size: 5vw; } .bp-nowbar, .bp-dim { font-size: 4vw; } } /* ================= Mobile optimization pass ================= */ @media (max-width: 760px) { /* Master/detail + multi-pane apps: stack vertically instead of overflowing sideways. */ .aduc-split, .gpo-split, .fleet-split { flex-direction: column; height: auto; min-height: 0; } .aduc-tree { flex: none; max-height: 26vh; border-right: 0; border-bottom: 1px solid #c9d3e0; } .aduc-list { flex: none; max-height: 32vh; border-right: 0; border-bottom: 1px solid #c9d3e0; } .aduc-detail { flex: none; } .gpo-left, .fleet-left { flex: none; max-height: 42vh; border-right: 0 !important; border-bottom: 1px solid #c9d3e0; } .gpo-right, .fleet-right { flex: none; } .gpo-split .gpo-left, .gpo-split .gpo-right { width: auto; } /* Toolbars + headers wrap instead of clipping. */ .win-toolbar { flex-wrap: wrap; height: auto; min-height: 0; padding: 4px 8px; gap: 6px; } .win-toolbar .row-inline { flex-wrap: wrap; } .arr-head { flex-wrap: wrap; gap: 6px; } .arr-bar { flex-wrap: wrap; } .arr-tabs { gap: 0; } .arr-tab { padding: 8px 10px; } /* bigger tap targets */ /* Poster grids: more columns of smaller posters on a phone. */ .arr-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; } .cp-cat-grid { grid-template-columns: 1fr; } /* Bigger tap targets for icon buttons + rows across apps. */ .btn { min-height: 34px; } .btn.icon, .arr-mini, .win-btn { min-width: 34px; } .aduc-item, .fleet-item, .gpo-item, .arr-row, .rb-row { padding-top: 9px; padding-bottom: 9px; } /* Settings Control Panel: nav becomes a horizontal scroll strip above the pane. */ .set-win .set-body, .modal-body { flex-direction: column; } .set-nav { flex: none; max-height: 40vh; overflow-y: auto; } /* Modals never wider than the screen. */ .modal, .arr-add-modal, .bp-set-card { width: 94vw !important; max-width: 94vw; } } /* Mobile optimization pass 2 — dense grids/tables that were still overflowing. */ @media (max-width: 760px) { /* Global safety net: never let the whole page scroll sideways on a phone. */ html, body, #app, #main, .desktop, .desk-wallpaper { max-width: 100vw; overflow-x: hidden; } /* Full-screen app windows must never exceed the viewport width. */ .win, .win.maximized { max-width: 100vw; } .win-body, .win-scroll, .panel-body, .set-pane, .arr-pane, .wa-body, .aduc-detail, .fleet-detail, .gpo-right { max-width: 100%; overflow-x: hidden; } } @media (max-width: 640px) { /* Any 2+ column form/data grid collapses to one column. */ .set-grid, .perm-tri-grid, .perm-matrix, .access-grid, .prof-row, .cp-cat-grid { grid-template-columns: 1fr !important; } .unifi-cards { grid-template-columns: repeat(auto-fit, minmax(45%, 1fr)); } .stat-grid { grid-template-columns: repeat(3, 1fr); } /* UniFi client rows: keep name + IP, drop the noisy middle columns. */ .uclient { grid-template-columns: 14px 1.6fr 1fr; } .uclient > *:nth-child(4), .uclient > *:nth-child(5) { display: none; } /* Files browser: name + size only. */ .fb-row { grid-template-columns: 20px 1fr auto; } /* Chat: bubbles and image grids fit the phone. */ .chat-msg { max-width: 90%; } .cmsg-imgs { max-width: 76vw; } .cmsg-preview { max-width: 76vw; } /* Home Assistant + weather rows tighter. */ .ha-grid, .ha-cams { grid-template-columns: 1fr; } .wx-day { grid-template-columns: 40px 22px 1fr auto; } /* Trim window padding so content isn't squeezed, and let long tokens wrap. */ .win-scroll, .panel-body, .set-pane, .wa-body, .arr-pane, .aduc-detail { padding-left: 8px; padding-right: 8px; } .dir-sub, .r-sub, .arr-row-sub, .bk-name, .test-result, .dir-v, .mono { overflow-wrap: anywhere; word-break: break-word; } /* Tabs (HA / Infra / Docker / arr) become a horizontal scroll strip. */ .ha-tabs, .arr-tabs, .dk-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .ha-tab, .arr-tab, .dk-tab { white-space: nowrap; flex: none; } } /* ================= Mobile Widgets gadget ================= */ .mobile-wg-back { display: none; } @media (max-width: 760px) { :root[data-theme^="xp-"] .desktop.show-widgets .mobile-wg-back { display: flex; align-items: center; gap: 10px; position: absolute; top: 0; left: 0; right: 0; height: 40px; z-index: 9; padding: 0 10px; color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); background: linear-gradient(180deg, #3d95f0, #1a63d8); } .mobile-wg-back .mwb-btn { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .4); color: #fff; border-radius: 4px; padding: 4px 10px; font-size: 13px; cursor: pointer; } .mobile-wg-back .mwb-btn svg { width: 15px; height: 15px; } .mobile-wg-back .mwb-title { font-weight: 700; font-size: 14px; } :root[data-theme^="xp-"] .desktop.show-widgets .desk-icons { display: none !important; } :root[data-theme^="xp-"] .desktop.show-widgets .desk-wallpaper { display: block !important; position: absolute !important; top: 40px; left: 0; right: 0; bottom: 46px; overflow-y: auto; padding: 8px; } :root[data-theme^="xp-"] .desktop.show-widgets .grid-stack { display: block !important; height: auto !important; width: auto !important; } :root[data-theme^="xp-"] .desktop.show-widgets .grid-stack-item { position: relative !important; inset: auto !important; left: 0 !important; top: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; transform: none !important; margin: 0 0 8px !important; } :root[data-theme^="xp-"] .desktop.show-widgets .grid-stack-item-content { position: relative !important; inset: auto !important; height: auto !important; } :root[data-theme^="xp-"] .desktop.show-widgets .grid-stack-item .panel { height: auto !important; } } /* ================= Sticky Notes ================= */ /* The layer fills the desktop and sits behind app windows; only the notes catch clicks. */ .sticky-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .sticky { position: absolute; pointer-events: auto; display: flex; flex-direction: column; min-width: 150px; min-height: 120px; overflow: hidden; resize: both; background: var(--sticky-bg, #fff8b0); box-shadow: 0 6px 16px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .5) inset; border: 1px solid rgba(0, 0, 0, .12); border-radius: 2px; font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive; } .sticky.dragging { box-shadow: 0 14px 30px rgba(0, 0, 0, .4); } .sticky-head { height: 22px; flex: none; display: flex; align-items: center; gap: 2px; padding: 0 3px; background: var(--sticky-head, #ffe86b); cursor: move; touch-action: none; } .sticky-grip { flex: 1; height: 100%; cursor: move; background-image: radial-gradient(rgba(0, 0, 0, .22) 1px, transparent 1px); background-size: 5px 5px; background-position: 0 8px; opacity: .7; } .sticky-color, .sticky-x { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; border-radius: 3px; padding: 0; color: rgba(0, 0, 0, .55); } .sticky-color { background: conic-gradient(#ffd23f, #ff8ba7, #b892ff, #7fd1ae, #6db3f2, #ffd23f); border: 1px solid rgba(0, 0, 0, .25); } .sticky-color:hover, .sticky-x:hover { background-color: rgba(0, 0, 0, .12); } .sticky-x svg { width: 12px; height: 12px; } .sticky-text { flex: 1; width: 100%; border: 0; outline: none; resize: none; padding: 6px 8px; background: transparent; color: #33320a; font: inherit; font-size: 14px; line-height: 1.35; } .sticky-palette { position: absolute; top: 22px; left: 3px; z-index: 3; display: flex; gap: 4px; padding: 5px; background: #fff; border: 1px solid #b9c4d4; border-radius: 5px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); } .sticky-sw { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .3); cursor: pointer; padding: 0; background: var(--sticky-bg); } .sticky-sw.on { outline: 2px solid #1a63d8; outline-offset: 1px; } .sticky.flash { animation: sticky-flash .9s ease 2; } @keyframes sticky-flash { 0%, 100% { box-shadow: 0 6px 16px rgba(0, 0, 0, .28); } 50% { box-shadow: 0 0 0 4px #ffd23f, 0 8px 22px rgba(0, 0, 0, .4); } } /* Palette per colour (drives both note bg/head and the swatch fill). */ .note-yellow { --sticky-bg: #fff8b0; --sticky-head: #ffe86b; } .note-blue { --sticky-bg: #cfe8ff; --sticky-head: #a9d4ff; } .note-green { --sticky-bg: #d4f5d4; --sticky-head: #a9e6a9; } .note-pink { --sticky-bg: #ffd7e6; --sticky-head: #ffb3ce; } .note-purple { --sticky-bg: #e6ddff; --sticky-head: #cbb9ff; } .note-gray { --sticky-bg: #e6e9ee; --sticky-head: #cfd5df; } /* Manager window */ .sticky-mgr { display: flex; flex-direction: column; height: 100%; } .sticky-mgr-bar { display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid #cdd6e3; } .sticky-mgr-count { color: #566; font-size: 12px; margin-left: auto; } .sticky-mgr-list { flex: 1; overflow-y: auto; padding: 6px 8px; } .sticky-mgr-empty { color: #778; font-size: 13px; padding: 18px 8px; text-align: center; } .sticky-mgr-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #eef1f6; } .sticky-mgr-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .sticky-dot, .sticky-mgr-row .sticky-dot { width: 14px; height: 14px; flex: none; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .25); background: var(--sticky-bg, #fff8b0); } .sticky-mgr-row .link { background: transparent; border: 0; cursor: pointer; color: #567; padding: 3px; border-radius: 3px; } .sticky-mgr-row .link:hover { background: #eef1f6; } .sticky-mgr-row .link.danger:hover { background: #fde8e8; color: #c0392b; } .sticky-mgr-row .link svg { width: 15px; height: 15px; } /* On phones the free-floating notes would overflow — hide the layer; the manager app still works. */ @media (max-width: 760px) { .sticky-layer { display: none; } } /* ================= Weather app ================= */ .wx-app { display: flex; flex-direction: column; height: 100%; } .wx-tabs { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid #cdd6e3; overflow-x: auto; flex-wrap: nowrap; } .wx-tab { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid #b9c4d4; background: #f2f6fb; border-radius: 14px; cursor: pointer; font-size: 12px; white-space: nowrap; flex: none; } .wx-tab.active { background: linear-gradient(180deg, #3d95f0, #1a63d8); color: #fff; border-color: #1a63d8; } .wx-tab-ico { width: 13px; height: 13px; } .wx-tab-x { margin-left: 2px; opacity: .7; font-weight: 700; } .wx-tab-x:hover { opacity: 1; color: #c0392b; } .wx-add { padding: 4px 8px; } .wx-add svg { width: 14px; height: 14px; } .wx-units { margin-left: auto; flex: none; padding: 4px 10px; border: 1px solid #b9c4d4; background: #fff; border-radius: 14px; cursor: pointer; font-size: 12px; font-weight: 700; } .wx-body { flex: 1; overflow-y: auto; padding: 12px 14px; } .wx-loading, .wx-empty { color: #667; padding: 20px 4px; text-align: center; } .wx-current { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 10px; } .wx-cur-main { display: flex; align-items: center; gap: 12px; } .wx-cur-icon { width: 64px; height: 64px; color: #1a63d8; } .wx-cur-temp { display: flex; flex-direction: column; } .wx-cur-temp > span:first-child { font-size: 44px; font-weight: 300; line-height: 1; } .wx-cur-cond { font-size: 14px; color: #556; } .wx-cur-meta { display: flex; flex-direction: column; gap: 3px; min-width: 150px; } .wx-meta-row { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; } .wx-meta-k { color: #778; } .wx-meta-v { font-weight: 600; } .wx-sec-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #889; margin: 12px 0 6px; } .wx-hours { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; } .wx-hour { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; background: #f4f8fc; border: 1px solid #e2e9f2; border-radius: 6px; } .wx-h-time { font-size: 11px; color: #667; } .wx-h-icon { width: 22px; height: 22px; color: #1a63d8; } .wx-h-temp { font-weight: 700; font-size: 14px; } .wx-h-pop { font-size: 10px; color: #2a7; min-height: 12px; } .wx-days { display: flex; flex-direction: column; } .wx-day { display: grid; grid-template-columns: 60px 26px 44px 1fr; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #eef2f7; } .wx-d-name { font-size: 13px; font-weight: 600; } .wx-d-icon { width: 22px; height: 22px; color: #1a63d8; } .wx-d-pop { font-size: 11px; color: #2a7; } .wx-d-range { justify-self: end; display: flex; gap: 10px; } .wx-d-hi { font-weight: 700; } .wx-d-lo { color: #99a; } .wx-updated { font-size: 11px; color: #99a; margin-top: 10px; text-align: right; } .wx-search { padding: 4px; } .wx-search-bar { display: flex; gap: 6px; margin-bottom: 8px; } .wx-search-in { flex: 1; padding: 7px 10px; border: 1px solid #b9c4d4; border-radius: 5px; } .wx-res-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-bottom: 1px solid #eef2f7; background: transparent; cursor: pointer; font-size: 13px; } .wx-res-row:hover { background: #eef4fb; } .wx-res-row svg { width: 15px; height: 15px; color: #1a63d8; } /* ================= Downloads (qBittorrent) app ================= */ .dl-app { display: flex; flex-direction: column; height: 100%; } .dl-bar { display: flex; align-items: center; gap: 12px; padding: 8px; border-bottom: 1px solid #cdd6e3; flex-wrap: wrap; } .dl-speeds { display: flex; gap: 12px; font-size: 12px; } .dl-speeds span { display: inline-flex; align-items: center; gap: 4px; } .dl-speeds svg { width: 14px; height: 14px; } .dl-dl { color: #1a8a3a; } .dl-ul { color: #1a63d8; } .dl-add { display: flex; gap: 6px; flex: 1; min-width: 200px; } .dl-add-in { flex: 1; padding: 6px 10px; border: 1px solid #b9c4d4; border-radius: 5px; font-size: 12px; } .dl-allbtns { display: flex; gap: 4px; } .dl-allbtns svg { width: 15px; height: 15px; } .dl-list { flex: 1; overflow-y: auto; padding: 6px 8px; } .dl-empty { color: #667; padding: 24px 8px; text-align: center; } .dl-row { padding: 8px 6px; border-bottom: 1px solid #eef2f7; } .dl-row-top { display: flex; align-items: center; gap: 8px; } .dl-name { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dl-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; padding: 2px 7px; border-radius: 10px; background: #e6e9ee; color: #556; flex: none; } .dl-st-dl { background: #dcefff; color: #1461c2; } .dl-st-seed { background: #dff5e2; color: #1a8a3a; } .dl-st-done { background: #eceff3; color: #667; } .dl-st-pause { background: #f2ede0; color: #997a2a; } .dl-st-err { background: #fde3e3; color: #c0392b; } .dl-progwrap { display: flex; align-items: center; gap: 8px; margin: 5px 0 4px; } .dl-prog { flex: 1; height: 8px; background: #e5eaf1; border-radius: 5px; overflow: hidden; } .dl-prog-fill { height: 100%; background: linear-gradient(180deg, #4aa3f5, #1a63d8); border-radius: 5px; transition: width .4s; } .dl-prog-fill.dl-st-seed { background: linear-gradient(180deg, #57cf7a, #1a8a3a); } .dl-prog-fill.dl-st-done { background: #9aa6b3; } .dl-prog-fill.dl-st-pause { background: #c9b877; } .dl-prog-fill.dl-st-err { background: #e07a6a; } .dl-pct { font-size: 11px; color: #667; min-width: 42px; text-align: right; } .dl-row-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: #778; } .dl-dspeed { color: #1a8a3a; } .dl-uspeed { color: #1a63d8; } .dl-actions { display: flex; gap: 5px; margin-top: 6px; } .dl-mini { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; border: 1px solid #b9c4d4; background: #f4f8fc; border-radius: 4px; cursor: pointer; color: #456; } .dl-mini:hover { background: #e6eff9; } .dl-mini.danger:hover { background: #fde8e8; color: #c0392b; border-color: #eeb4b4; } .dl-mini svg { width: 15px; height: 15px; } /* ================= Security / two-step verification ================= */ .tfa-app { padding: 14px 16px; overflow-y: auto; height: 100%; } .tfa-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .tfa-head-ico { width: 30px; height: 30px; color: #1a63d8; flex: none; } .tfa-title { font-size: 16px; font-weight: 700; } .tfa-sub { font-size: 12px; color: #667; margin-top: 2px; } .tfa-card { border: 1px solid #cdd6e3; border-radius: 8px; padding: 16px; background: #fbfdff; max-width: 560px; } .tfa-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 12px; } .tfa-status svg { width: 15px; height: 15px; } .tfa-status.on { background: #dff5e2; color: #1a8a3a; } .tfa-status.off { background: #eceff3; color: #778; } .tfa-p { font-size: 13px; color: #556; margin: 12px 0; line-height: 1.5; } .tfa-steps { font-size: 13px; color: #445; line-height: 1.6; padding-left: 20px; margin: 0 0 12px; } .tfa-keyrow { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; } .tfa-key-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #889; min-width: 78px; } .tfa-key-val { flex: 1; min-width: 180px; font-family: monospace; font-size: 12px; background: #eef2f7; border: 1px solid #dbe2ec; border-radius: 4px; padding: 6px 8px; word-break: break-all; } .tfa-key-copy { border: 1px solid #b9c4d4; background: #fff; border-radius: 4px; cursor: pointer; padding: 5px; color: #456; } .tfa-key-copy svg { width: 14px; height: 14px; } .tfa-confirm { display: flex; gap: 8px; margin: 6px 0; } .tfa-code-in { width: 130px; padding: 8px 10px; border: 1px solid #b9c4d4; border-radius: 5px; font-size: 18px; letter-spacing: 4px; text-align: center; font-family: monospace; } .tfa-backup { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; } .tfa-bcode { font-family: monospace; font-size: 14px; background: #eef2f7; border: 1px dashed #b9c4d4; border-radius: 4px; padding: 8px; text-align: center; letter-spacing: 1px; } .tfa-brow { display: flex; gap: 8px; flex-wrap: wrap; } .tfa-manage { margin-top: 12px; } .tfa-manage-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .tfa-manage-lbl { font-size: 12px; color: #667; } .tfa-err, .tfa-load { padding: 20px; color: #667; text-align: center; } @media (max-width: 640px) { .wx-current { flex-direction: column; align-items: flex-start; } .tfa-backup { grid-template-columns: 1fr; } .dl-add { min-width: 100%; } } /* ================= Desktop App settings pane ================= */ .dsk-tokrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .dsk-token { flex: 1; min-width: 220px; font-family: monospace; font-size: 12px; background: #eef2f7; border: 1px solid #dbe2ec; border-radius: 4px; padding: 7px 9px; word-break: break-all; } .dsk-dev { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #eef2f7; } .dsk-dev-u { font-weight: 600; font-size: 13px; } .dsk-dev-m { font-size: 11px; color: #778; } /* ================= UniFi full-management ================= */ .ucfg-list { display: flex; flex-direction: column; } .ucfg-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #eef2f7; } .ucfg-main { flex: 1; min-width: 0; } .ucfg-name { font-weight: 600; font-size: 13px; } .ucfg-sub { font-size: 11px; color: #778; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ucfg-actions { display: flex; align-items: center; gap: 6px; flex: none; } .ucfg-toggle { display: inline-flex; align-items: center; cursor: pointer; } .ucfg-toggle input { width: 16px; height: 16px; } .ucfg-actions .btn.danger, .btn.ghost.danger { color: #c0392b; } .btn.ghost.danger:hover { background: #fde8e8; } .uevents { display: flex; flex-direction: column; border: 1px solid #e2e9f2; border-radius: 6px; overflow: hidden; } .uevent { display: flex; gap: 10px; padding: 6px 10px; border-bottom: 1px solid #eef2f7; font-size: 12px; } .uevent:last-child { border-bottom: 0; } .ue-time { flex: 0 0 150px; color: #99a; } .ue-msg { flex: 1; color: #445; } @media (max-width: 640px) { .ue-time { flex-basis: 104px; } .ucfg-sub { white-space: normal; } } /* Fleet: attention badge + warning rows + group headers + script library bar */ .fleet-att { font-size: 10px; color: #c0392b; margin-left: 6px; font-weight: 600; white-space: nowrap; } .dir-kv.fleet-warn .dir-v { color: #c0392b; font-weight: 600; } .fleet-group { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #667; background: #eef2f7; padding: 4px 8px; margin: 4px 0 2px; border-radius: 4px; position: sticky; top: 0; } .fleet-lib { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .fleet-lib .hint { color: #667; } .fleet-ov-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid #eef2f7; cursor: pointer; } .fleet-ov-row:hover { background: #eef4fb; } .fleet-ov-row .dir-name { flex: 1; } .fleet-bulk { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #eef4fb; border-bottom: 1px solid #cdd6e3; flex-wrap: wrap; position: sticky; top: 0; z-index: 2; } .fleet-bulk-n { font-weight: 600; font-size: 12px; margin-right: 4px; } .fleet-cb { margin: 0 2px 0 0; flex: none; width: 15px; height: 15px; } /* 5.1 Big Picture refresh */ .bp-home { grid-template-columns: repeat(auto-fit, minmax(17vw, 1fr)); gap: 1.2vw; } .bp-home .bp-tile-val { font-size: 3.6vw; } .bp-home .bp-tile-lbl { font-size: 1.25vw; } .bp-tile.good { border-color: rgba(61,220,132,.5); } .bp-tile.bad { border-color: rgba(224,36,94,.6); box-shadow: inset 0 0 0 1px rgba(224,36,94,.25); } .bp-tile.good .bp-tile-val { color: #7ef0b0; } .bp-tile.bad .bp-tile-val { color: #ff8fb0; } .bp-tl { display: grid; grid-template-columns: 8vw 3vw 1fr; align-items: center; gap: 1vw; font-size: 1.9vw; padding: .7vh 1vw; } .bp-tl-time { font-family: var(--mono); color: #9fc4e0; font-size: 1.5vw; } .bp-tl-ico svg { width: 2vw; height: 2vw; color: #bfe6ff; } .bp-tl.error .bp-tl-title { color: #ff8fb0; } .bp-tl.good .bp-tl-title { color: #7ef0b0; } .bp-person { display: flex; flex-direction: column; align-items: center; gap: .8vh; } .bp-avatar { width: 6vw; height: 6vw; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.1); display: grid; place-items: center; font-size: 2.6vw; font-weight: 300; } .bp-cams { grid-template-columns: repeat(auto-fit, minmax(30vw, 1fr)); } .bp-cam .r-s { font-size: 1.4vw; }