feat(web): adopt cyberspace terminal aesthetic + dithered images
Some checks failed
ci / build-test (push) Has been cancelled
ci / docker-build (push) Has been cancelled
ci / web (push) Has been cancelled
Desktop App / Build Linux (amd64) (push) Has been cancelled
Desktop App / Attach to Release (push) Has been cancelled

Rebrand light/dark themes to the cyberspace.online look: warm cream-on-black
palette (light/dark are exact inverses), self-hosted JetBrains Mono + VT323,
square corners, border-driven surfaces with no soft shadows. Adds a terminal
design-system CSS layer (DOS double-border modals with hatched corner, fg focus,
inversion-on-hover), a theme-aware <RasterImage> (Atkinson-dithered canvas with
img fallback), and unifies desktop icons, taskbar, window controls, pills and
links under one idiom. Pins window titlebars to a fixed height and switches chat
auto-scroll off scrollIntoView to avoid titlebar reflow.

VERSION 0.15.1 -> 0.16.0
This commit is contained in:
2026-08-03 22:03:24 +02:00
parent b27e1bf3ec
commit 757ef2f34b
18 changed files with 554 additions and 139 deletions

View File

@@ -7,6 +7,7 @@
import { fetchWithAuth, setConfig, initConfig, getConfig, clearConfig } from '$lib/config'
import { startLogin, logout as oidcLogout, getUser, isOIDCConfigured } from '$lib/oidc'
import ConfigBackground from '$lib/components/ConfigBackground.svelte'
import RasterImage from '$lib/components/RasterImage.svelte'
import type { WailsGlobal } from '$lib/types'
let { onConnected, onCancel }: { onConnected: () => void; onCancel?: () => void } = $props()
@@ -93,11 +94,12 @@
<div class="relative z-10 flex h-full items-center justify-center p-6">
<div
class="w-full max-w-[26rem] space-y-8 rounded-2xl border border-white/8 bg-card/60 p-8 shadow-2xl shadow-black/40 backdrop-blur-xl"
class="w-full max-w-[26rem] space-y-8 border border-border bg-card p-8 shadow-[3px_3px_0_0_var(--border)]"
>
<!-- Logo + heading -->
<div class="flex flex-col items-center gap-4">
<svg viewBox="0 0 91 100" class="h-16 w-16 fill-white/90" aria-hidden="true">
<RasterImage src="/mascot/egg-idle.png" alt="" width={72} bias={16} />
<svg viewBox="0 0 91 100" class="h-12 w-12 fill-foreground/90" aria-hidden="true">
<path
d="m45.601 1q20.993 0 33.71 15.946 10.799 13.625 10.799 31.287 0 12.414-5.9548 25.131-5.9548 12.717-16.451 19.176-10.395 6.4592-23.213 6.4592-20.892 0-33.205-16.653-10.395-14.029-10.395-31.489 0-12.717 6.2577-25.232 6.3584-12.616 16.653-18.57 10.295-6.0556 21.801-6.0556zm-3.128 6.5605q-5.3492 0-10.799 3.2296-5.3492 3.1287-8.68 11.102-3.3305 7.9735-3.3305 20.488 0 20.185 7.973 34.82 8.0743 14.634 21.195 14.634 9.7896 0 16.149-8.0743 6.3584-8.0743 6.3584-27.755 0-24.627-10.597-38.756-7.1657-9.6888-18.268-9.6888z"
/>
@@ -128,7 +130,7 @@
{#if showOidcContinue}
<!-- OIDC authenticated state -->
<div
class="flex flex-col items-center gap-3 rounded-xl border border-white/5 bg-background/40 p-5"
class="flex flex-col items-center gap-3 border border-border bg-background/40 p-5"
>
<p class="text-sm text-muted-foreground">
Logged in as <span class="font-semibold text-foreground">{oidcUser}</span>