Spaces:
Running
Running
| /* ============================================================ | |
| Puck — desktop familiar. Theme tokens + macOS chrome + sprite. | |
| Three themes switch via data-theme on <html>. | |
| Accent is overridable live via --accent (Tweaks). | |
| ============================================================ */ | |
| @import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500;1,6..72,600&family=JetBrains+Mono:wght@400;500;600&family=Caveat:wght@500;600&display=swap"); | |
| :root { | |
| /* set by Tweaks; theme provides a fallback */ | |
| --accent: #e7b85c; | |
| --accent-ink: #2a2010; | |
| --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; | |
| --voice: "Newsreader", Georgia, serif; | |
| --mono: "JetBrains Mono", ui-monospace, monospace; | |
| --hand: "Caveat", cursive; | |
| --r: 12px; | |
| } | |
| /* ---------- Terrarium Night (default) ---------- */ | |
| :root[data-theme="terrarium"] { | |
| --wall: radial-gradient(120% 90% at 70% -10%, #16241a 0%, #0c130e 45%, #060a07 100%); | |
| --wall-spores: rgba(231, 184, 92, 0.05); | |
| --ink: #f0e7d0; | |
| --ink-soft: rgba(240, 231, 208, 0.62); | |
| --ink-faint: rgba(240, 231, 208, 0.34); | |
| --panel: rgba(20, 30, 23, 0.74); | |
| --panel-2: rgba(28, 40, 31, 0.82); | |
| --panel-solid: #131c16; | |
| --border: rgba(231, 200, 150, 0.16); | |
| --border-strong: rgba(231, 200, 150, 0.32); | |
| --menubar: rgba(10, 16, 12, 0.55); | |
| --win-bg: rgba(18, 26, 21, 0.92); | |
| --win-head: rgba(30, 42, 33, 0.9); | |
| --win-border: rgba(231, 200, 150, 0.14); | |
| --shadow: 0 24px 70px rgba(0, 0, 0, 0.5); | |
| --glow: rgba(231, 184, 92, 0.16); | |
| --dot: rgba(231, 200, 150, 0.5); | |
| color-scheme: dark; | |
| } | |
| /* ---------- Candlelight (cozy light) ---------- */ | |
| :root[data-theme="candlelight"] { | |
| --wall: radial-gradient(120% 100% at 60% -10%, #f3ead7 0%, #e9dcc2 50%, #ddcba9 100%); | |
| --wall-spores: rgba(120, 80, 30, 0.045); | |
| --ink: #33291a; | |
| --ink-soft: rgba(51, 41, 26, 0.66); | |
| --ink-faint: rgba(51, 41, 26, 0.4); | |
| --panel: rgba(255, 250, 240, 0.86); | |
| --panel-2: rgba(252, 245, 232, 0.95); | |
| --panel-solid: #fbf5ea; | |
| --border: rgba(80, 60, 30, 0.16); | |
| --border-strong: rgba(80, 60, 30, 0.3); | |
| --menubar: rgba(255, 250, 240, 0.6); | |
| --win-bg: rgba(255, 252, 246, 0.96); | |
| --win-head: rgba(245, 237, 223, 0.95); | |
| --win-border: rgba(80, 60, 30, 0.14); | |
| --shadow: 0 24px 60px rgba(80, 55, 20, 0.22); | |
| --glow: rgba(214, 142, 60, 0.2); | |
| --dot: rgba(120, 90, 40, 0.45); | |
| color-scheme: light; | |
| } | |
| /* ---------- Glass Nocturne (cool frosted dark) ---------- */ | |
| :root[data-theme="nocturne"] { | |
| --wall: radial-gradient(120% 90% at 65% -10%, #1a2230 0%, #0e131c 50%, #080b11 100%); | |
| --wall-spores: rgba(150, 190, 240, 0.05); | |
| --ink: #e9eef6; | |
| --ink-soft: rgba(233, 238, 246, 0.62); | |
| --ink-faint: rgba(233, 238, 246, 0.34); | |
| --panel: rgba(20, 27, 38, 0.66); | |
| --panel-2: rgba(28, 37, 51, 0.78); | |
| --panel-solid: #131a26; | |
| --border: rgba(180, 205, 240, 0.16); | |
| --border-strong: rgba(180, 205, 240, 0.32); | |
| --menubar: rgba(12, 17, 25, 0.5); | |
| --win-bg: rgba(18, 25, 36, 0.86); | |
| --win-head: rgba(28, 38, 53, 0.86); | |
| --win-border: rgba(180, 205, 240, 0.14); | |
| --shadow: 0 24px 70px rgba(0, 0, 0, 0.55); | |
| --glow: rgba(120, 170, 240, 0.16); | |
| --dot: rgba(180, 205, 240, 0.5); | |
| color-scheme: dark; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| margin: 0; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| body { | |
| font-family: var(--ui); | |
| color: var(--ink); | |
| background: var(--wall); | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| user-select: none; | |
| } | |
| #root { | |
| height: 100vh; | |
| width: 100vw; | |
| } | |
| /* faint drifting spore texture over the wallpaper */ | |
| .wall-spores { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 0; | |
| background-image: radial-gradient(circle, var(--wall-spores) 1px, transparent 1.4px); | |
| background-size: 46px 46px; | |
| opacity: 0.8; | |
| animation: drift 60s linear infinite; | |
| } | |
| @keyframes drift { | |
| to { | |
| background-position: 460px 230px; | |
| } | |
| } | |
| .vignette { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 1; | |
| box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.35); | |
| } | |
| :root[data-theme="candlelight"] .vignette { | |
| box-shadow: inset 0 0 220px rgba(90, 60, 20, 0.18); | |
| } | |
| /* ============================================================ | |
| macOS menu bar | |
| ============================================================ */ | |
| .menubar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 26px; | |
| z-index: 50; | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| padding: 0 12px; | |
| background: var(--menubar); | |
| backdrop-filter: blur(22px) saturate(150%); | |
| -webkit-backdrop-filter: blur(22px) saturate(150%); | |
| border-bottom: 0.5px solid var(--border); | |
| font-size: 13px; | |
| } | |
| .menubar .mb-apple { | |
| font-size: 14px; | |
| opacity: 0.85; | |
| } | |
| .menubar .mb-app { | |
| font-weight: 600; | |
| } | |
| .menubar .mb-menu { | |
| opacity: 0.8; | |
| font-weight: 400; | |
| } | |
| .menubar .mb-right { | |
| margin-left: auto; | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .menubar .mb-ico { | |
| opacity: 0.78; | |
| font-size: 12px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .menubar .mb-clock { | |
| font-variant-numeric: tabular-nums; | |
| font-size: 12.5px; | |
| opacity: 0.9; | |
| } | |
| /* the Puck menu-bar status item */ | |
| .mb-puck { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| cursor: default; | |
| padding: 2px 7px; | |
| border-radius: 7px; | |
| position: relative; | |
| transition: background 0.15s; | |
| } | |
| .mb-puck:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .mb-puck.active { | |
| background: rgba(255, 255, 255, 0.14); | |
| } | |
| .mb-puck .mb-puck-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| box-shadow: 0 0 8px var(--accent); | |
| } | |
| .mb-puck .mb-puck-mood { | |
| font-size: 11.5px; | |
| opacity: 0.75; | |
| letter-spacing: 0.01em; | |
| } | |
| .mb-puck .badge { | |
| position: absolute; | |
| top: -2px; | |
| right: -2px; | |
| min-width: 15px; | |
| height: 15px; | |
| border-radius: 8px; | |
| background: #ff5b54; | |
| color: #fff; | |
| font-size: 10px; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0 4px; | |
| box-shadow: 0 0 0 1.5px var(--menubar); | |
| } | |
| /* ============================================================ | |
| App windows on the desktop | |
| ============================================================ */ | |
| .win { | |
| position: absolute; | |
| z-index: 10; | |
| background: var(--win-bg); | |
| border: 0.5px solid var(--win-border); | |
| border-radius: 11px; | |
| box-shadow: var(--shadow); | |
| backdrop-filter: blur(30px) saturate(140%); | |
| -webkit-backdrop-filter: blur(30px) saturate(140%); | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| transition: | |
| box-shadow 0.2s, | |
| transform 0.2s; | |
| } | |
| .win.dimmed { | |
| filter: saturate(0.7) brightness(0.82); | |
| } | |
| .win.attn { | |
| box-shadow: | |
| var(--shadow), | |
| 0 0 0 1.5px var(--accent), | |
| 0 0 38px var(--glow); | |
| } | |
| .win-head { | |
| height: 36px; | |
| flex: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 0 12px; | |
| background: var(--win-head); | |
| border-bottom: 0.5px solid var(--win-border); | |
| cursor: grab; | |
| } | |
| .win-head:active { | |
| cursor: grabbing; | |
| } | |
| .traffic { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .traffic i { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| display: block; | |
| } | |
| .traffic .r { | |
| background: #ff5f57; | |
| } | |
| .traffic .y { | |
| background: #febc2e; | |
| } | |
| .traffic .g { | |
| background: #28c840; | |
| } | |
| .win-title { | |
| font-size: 12.5px; | |
| font-weight: 600; | |
| opacity: 0.85; | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| } | |
| .win-title .wt-ico { | |
| font-size: 13px; | |
| } | |
| .win-sub { | |
| margin-left: auto; | |
| font-size: 11px; | |
| opacity: 0.5; | |
| font-family: var(--mono); | |
| } | |
| .win-body { | |
| flex: 1; | |
| min-height: 0; | |
| overflow: hidden; | |
| padding: 14px 16px; | |
| } | |
| /* — Claude Code window — */ | |
| .cc-line { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| line-height: 1.7; | |
| color: var(--ink-soft); | |
| } | |
| .cc-line .tok-fn { | |
| color: var(--accent); | |
| } | |
| .cc-line .tok-dim { | |
| opacity: 0.5; | |
| } | |
| .cc-task { | |
| margin-top: 10px; | |
| padding: 9px 11px; | |
| border-radius: 9px; | |
| background: var(--panel); | |
| border: 0.5px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| gap: 9px; | |
| font-size: 12px; | |
| } | |
| .cc-task .spin { | |
| width: 13px; | |
| height: 13px; | |
| border-radius: 50%; | |
| border: 2px solid var(--border-strong); | |
| border-top-color: var(--accent); | |
| animation: spin 0.8s linear infinite; | |
| } | |
| .cc-task.done .spin { | |
| border: none; | |
| animation: none; | |
| color: #46c96a; | |
| font-size: 14px; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .cc-task .pct { | |
| margin-left: auto; | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| opacity: 0.6; | |
| } | |
| /* — Terminal / build window — */ | |
| .term { | |
| font-family: var(--mono); | |
| font-size: 11.5px; | |
| line-height: 1.65; | |
| color: var(--ink-soft); | |
| } | |
| .term .ok { | |
| color: #46c96a; | |
| } | |
| .term .err { | |
| color: #ff6b6b; | |
| } | |
| .term .warn { | |
| color: #f2c14e; | |
| } | |
| .term .prompt { | |
| color: var(--accent); | |
| } | |
| .bar { | |
| height: 6px; | |
| border-radius: 4px; | |
| background: var(--border); | |
| overflow: hidden; | |
| margin-top: 8px; | |
| } | |
| .bar i { | |
| display: block; | |
| height: 100%; | |
| background: var(--accent); | |
| transition: width 0.4s; | |
| } | |
| /* — Mail / Discord list windows — */ | |
| .list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| margin: -6px -6px 0; | |
| } | |
| .list-row { | |
| display: flex; | |
| gap: 10px; | |
| padding: 8px 8px; | |
| border-radius: 8px; | |
| align-items: flex-start; | |
| } | |
| .list-row.unread { | |
| background: var(--panel); | |
| } | |
| .list-row .avatar { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| flex: none; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| font-weight: 700; | |
| color: var(--accent-ink); | |
| background: var(--accent); | |
| } | |
| .list-row .avatar.muted { | |
| background: var(--border-strong); | |
| color: var(--ink-soft); | |
| } | |
| .list-row .lr-main { | |
| min-width: 0; | |
| flex: 1; | |
| } | |
| .list-row .lr-top { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 8px; | |
| } | |
| .list-row .lr-from { | |
| font-size: 12.5px; | |
| font-weight: 600; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .list-row .lr-time { | |
| font-size: 10.5px; | |
| opacity: 0.45; | |
| white-space: nowrap; | |
| font-family: var(--mono); | |
| } | |
| .list-row .lr-sub { | |
| font-size: 11.5px; | |
| opacity: 0.62; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .list-row .lr-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| margin-top: 6px; | |
| flex: none; | |
| } | |
| .list-row .lr-dot.hidden { | |
| visibility: hidden; | |
| } | |
| /* — Calendar window — */ | |
| .cal-day { | |
| font-size: 11px; | |
| opacity: 0.5; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| .cal-ev { | |
| margin-top: 7px; | |
| padding: 8px 10px; | |
| border-radius: 8px; | |
| border-left: 3px solid var(--accent); | |
| background: var(--panel); | |
| font-size: 12px; | |
| } | |
| .cal-ev .ce-t { | |
| font-weight: 600; | |
| } | |
| .cal-ev .ce-time { | |
| opacity: 0.55; | |
| font-size: 11px; | |
| font-family: var(--mono); | |
| } | |
| /* ============================================================ | |
| Dock | |
| ============================================================ */ | |
| .dock { | |
| position: fixed; | |
| left: 50%; | |
| bottom: 8px; | |
| transform: translateX(-50%); | |
| z-index: 45; | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 10px; | |
| padding: 8px 12px; | |
| border-radius: 18px; | |
| background: var(--panel); | |
| border: 0.5px solid var(--border); | |
| backdrop-filter: blur(26px) saturate(150%); | |
| -webkit-backdrop-filter: blur(26px) saturate(150%); | |
| box-shadow: var(--shadow); | |
| } | |
| .dock-ico { | |
| width: 42px; | |
| height: 42px; | |
| border-radius: 11px; | |
| cursor: default; | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 22px; | |
| background: var(--panel-2); | |
| border: 0.5px solid var(--border); | |
| transition: transform 0.18s cubic-bezier(0.3, 0.8, 0.3, 1.4); | |
| } | |
| .dock-ico:hover { | |
| transform: translateY(-9px) scale(1.12); | |
| } | |
| .dock-ico.run::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 4px; | |
| height: 4px; | |
| border-radius: 50%; | |
| background: var(--ink-soft); | |
| } | |
| .dock-ico .dk-badge { | |
| position: absolute; | |
| top: -3px; | |
| right: -3px; | |
| min-width: 16px; | |
| height: 16px; | |
| border-radius: 8px; | |
| background: #ff5b54; | |
| color: #fff; | |
| font-size: 10px; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0 4px; | |
| } | |
| /* ============================================================ | |
| Generic floating panel (companion, dropdown) | |
| ============================================================ */ | |
| .panel { | |
| background: var(--panel-2); | |
| border: 0.5px solid var(--border); | |
| border-radius: var(--r); | |
| backdrop-filter: blur(30px) saturate(150%); | |
| -webkit-backdrop-filter: blur(30px) saturate(150%); | |
| box-shadow: var(--shadow); | |
| } | |
| .sect-label { | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 0.09em; | |
| text-transform: uppercase; | |
| color: var(--ink-faint); | |
| } | |
| /* scrollbars inside panels */ | |
| .scroll { | |
| overflow-y: auto; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border-strong) transparent; | |
| } | |
| .scroll::-webkit-scrollbar { | |
| width: 9px; | |
| } | |
| .scroll::-webkit-scrollbar-thumb { | |
| background: var(--border-strong); | |
| border-radius: 5px; | |
| border: 3px solid transparent; | |
| background-clip: content-box; | |
| } | |