/* ============================================================ 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; } :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; border: 1px solid #ffffff88; background: linear-gradient(180deg, #ffffff55, #ffffff10); } :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); } :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; } /* ================= 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%; 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; } /* ================= 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; } .xp-startmenu .xp-sm-left { overflow-y: auto; } .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: 14px; padding: 6px 14px; 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; } .xp-sm-foot .xp-sm-item:hover { background: #ffffff33; } /* 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; } /* ================= 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-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; } /* ================= 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); } }