/* ===================================================================== HELIOS OS — core shell Theming via [data-theme] on ; accent set by CSS vars. ===================================================================== */ :root { --bg: #05060c; --bg-2: #0a0d18; --panel: rgba(14, 19, 34, 0.72); --panel-solid: #0d1322; --panel-2: #131b30; --line: rgba(130, 165, 225, 0.14); --line-2: rgba(130, 165, 225, 0.28); --text: #e8edf8; --muted: #93a0bd; --faint: #56617e; /* accent palette (overridden per-theme) */ --accent: #2ee6ff; --accent-2: #a855f7; --accent-3: #ffd25a; --glow: rgba(46, 230, 255, 0.5); --sans: "Space Grotesk", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --ease: cubic-bezier(0.22, 1, 0.36, 1); --topbar-h: 36px; --dock-h: 66px; } [data-theme="magma"] { --accent:#ff7a3c; --accent-2:#ffd25a; --accent-3:#ff3c6e; --glow:rgba(255,122,60,.5); } [data-theme="matrix"] { --accent:#36f9b3; --accent-2:#1f9e74; --accent-3:#aaffdd; --glow:rgba(54,249,179,.5); } [data-theme="vapor"] { --accent:#ff7ac6; --accent-2:#a855f7; --accent-3:#2ee6ff; --glow:rgba(255,122,198,.5); } [data-theme="amber"] { --accent:#ffd25a; --accent-2:#ff7a3c; --accent-3:#fff1c2; --glow:rgba(255,210,90,.5); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } body { background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; user-select: none; -webkit-user-select: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); color: #fff; } canvas { display: block; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- BOOT ---------- */ .boot { position: fixed; inset: 0; z-index: 9000; background: var(--bg); display: grid; place-items: center; transition: opacity .6s var(--ease), visibility .6s var(--ease); } .boot.is-done { opacity: 0; visibility: hidden; } .boot__inner { width: min(560px, 88vw); } .boot__logo { display: grid; place-items: center; margin-bottom: 22px; } .boot__logo svg { width: 72px; height: 72px; } .boot__sun { fill: var(--accent-3); filter: drop-shadow(0 0 16px var(--accent-3)); animation: pulse 2s var(--ease) infinite; } .boot__rays line { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; transform-origin: 32px 32px; animation: spin 14s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: .55; } } .boot__log { font-family: var(--mono); font-size: 12.5px; line-height: 1.75; color: var(--muted); background: var(--panel-solid); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; min-height: 168px; white-space: pre-wrap; overflow: hidden; } .boot__log b { color: var(--accent); } .boot__log .ok { color: var(--accent-3); } .boot__cursor { display: inline-block; width: 8px; height: 14px; background: var(--accent); margin-left: 1px; animation: blink 1s steps(1) infinite; vertical-align: -2px; } @keyframes blink { 50% { opacity: 0; } } .boot__enter { display: none; margin: 22px auto 0; font-family: var(--mono); font-weight: 700; letter-spacing: 2px; color: var(--bg); background: var(--accent); padding: 14px 34px; border-radius: 8px; box-shadow: 0 0 28px var(--glow); animation: pp 1.3s var(--ease) infinite; } .boot__enter.show { display: block; } @keyframes pp { 50% { box-shadow: 0 0 46px var(--glow); transform: scale(1.03); } } /* ---------- DESKTOP ---------- */ .desktop { position: fixed; inset: 0; overflow: hidden; } .wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .desktop::before { /* fallback gradient wallpaper */ content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 60% at 20% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), radial-gradient(ellipse 70% 60% at 100% 100%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 55%), var(--bg); } .wall-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 100% 100% at 50% 40%, #000 30%, transparent 90%); -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 40%, #000 30%, transparent 90%); } /* ---------- TOP BAR ---------- */ .topbar { position: absolute; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 500; display: flex; align-items: center; gap: 16px; padding: 0 14px; background: rgba(5, 6, 12, 0.6); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); font-size: 13px; } .topbar__brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; letter-spacing: 1px; color: var(--accent); } .topbar__menu { color: var(--muted); font-size: 12.5px; font-family: var(--mono); } .topbar__spacer { flex: 1; } .topbar__chip { font-size: 12px; color: var(--accent-3); font-family: var(--mono); padding: 3px 9px; border: 1px solid var(--line); border-radius: 100px; } .topbar__chip:hover { border-color: var(--line-2); } .topbar__clock { font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; } /* ---------- DESKTOP ICONS ---------- */ .icons { position: absolute; top: calc(var(--topbar-h) + 16px); left: 14px; z-index: 50; list-style: none; display: flex; flex-direction: column; gap: 6px; } .icon { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 10px; padding: 8px; width: 150px; border-radius: 12px; transition: background .2s var(--ease); } .icon:hover { background: var(--panel); } .icon__glyph { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); font-size: 22px; } .icon__label { font-size: 12.5px; color: var(--text); text-shadow: 0 1px 4px #000; } /* ---------- WINDOWS ---------- */ .windows { position: absolute; inset: var(--topbar-h) 0 0 0; z-index: 100; pointer-events: none; } .win { position: absolute; pointer-events: auto; min-width: 260px; min-height: 160px; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--panel); backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--line-2); box-shadow: 0 30px 80px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4); opacity: 0; transform: scale(.96); transition: opacity .18s var(--ease), transform .18s var(--ease); } .win.is-open { opacity: 1; transform: none; } .win.is-min { opacity: 0; transform: scale(.9) translateY(40px); pointer-events: none; } .win.is-max { border-radius: 0; } .win.is-focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); box-shadow: 0 30px 90px -20px rgba(0,0,0,.9), 0 0 40px -18px var(--glow); } .win__bar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; flex: 0 0 auto; background: linear-gradient(var(--panel-2), color-mix(in srgb, var(--panel-2) 70%, transparent)); border-bottom: 1px solid var(--line); cursor: grab; } .win__bar:active { cursor: grabbing; } .win__dots { display: flex; gap: 7px; } .win__dot { width: 12px; height: 12px; border-radius: 50%; border: none; } .win__dot--close { background: #ff5f57; } .win__dot--min { background: #febc2e; } .win__dot--max { background: #28c840; } .win__dots:hover .win__dot { filter: brightness(1.15); } .win__title { font-size: 13px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 8px; } .win__title .dot { color: var(--accent); } .win__spacer { flex: 1; } .win__body { flex: 1; min-height: 0; position: relative; overflow: hidden; background: var(--panel-solid); } .win__resize { position: absolute; width: 16px; height: 16px; right: 0; bottom: 0; cursor: nwse-resize; z-index: 5; } .win__resize::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); } /* ---------- DOCK ---------- */ .dock { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 600; display: flex; align-items: center; gap: 8px; padding: 8px 12px; height: var(--dock-h); background: var(--panel); backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 18px 50px -18px rgba(0,0,0,.8); } .dock__item { position: relative; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--panel-2); border: 1px solid var(--line); transition: transform .18s var(--ease), border-color .2s var(--ease); } .dock__item:hover { transform: translateY(-8px) scale(1.08); border-color: var(--line-2); } .dock__item[data-running="true"]::after { content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } .dock__item .tip { position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%) translateY(6px); background: var(--panel-solid); border: 1px solid var(--line-2); color: var(--text); font-size: 11px; padding: 4px 9px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease); font-family: var(--mono); } .dock__item:hover .tip { opacity: 1; transform: translateX(-50%) translateY(0); } .dock__sep { width: 1px; height: 36px; background: var(--line); margin: 0 2px; } /* ---------- TOAST ---------- */ .toast { position: absolute; bottom: calc(var(--dock-h) + 26px); left: 50%; transform: translateX(-50%) translateY(16px); z-index: 700; background: var(--panel-solid); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); color: var(--text); font-size: 13px; padding: 12px 18px; border-radius: 10px; max-width: 360px; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); box-shadow: 0 14px 40px -14px rgba(0,0,0,.7); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast b { color: var(--accent-3); } /* ---------- CONTEXT MENU ---------- */ .ctx { position: absolute; z-index: 800; min-width: 184px; list-style: none; padding: 6px; background: var(--panel-solid); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 18px 50px -16px rgba(0,0,0,.8); font-size: 13px; display: none; } .ctx.show { display: block; } .ctx li { padding: 8px 12px; border-radius: 7px; color: var(--text); display: flex; align-items: center; gap: 10px; } .ctx li:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); } .ctx li.sep { padding: 0; margin: 5px 6px; height: 1px; background: var(--line); pointer-events: none; } .ctx li .k { margin-left: auto; color: var(--faint); font-family: var(--mono); font-size: 11px; } /* generic small UI bits reused by apps */ .btn { font-family: var(--mono); font-size: 12px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--text); transition: all .2s var(--ease); } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn--accent { background: var(--accent); color: #04121a; border-color: var(--accent); font-weight: 700; } .btn--accent:hover { color: #04121a; box-shadow: 0 0 20px var(--glow); } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .scroll { overflow: auto; } .scroll::-webkit-scrollbar { width: 9px; height: 9px; } .scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; } @media (max-width: 720px) { .icons { display: none; } .dock { gap: 5px; padding: 7px 9px; } .dock__item { width: 40px; height: 40px; font-size: 19px; } }