From cd5f7c107effcb8b82261e2f0e461d0c365333d9 Mon Sep 17 00:00:00 2001 From: boban Date: Fri, 12 Jun 2026 13:39:57 +0200 Subject: [PATCH] style: align UI to the BASTION reference (atmosphere + depth) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit From clusev-template/reference: void background with a fine dot-grid + orange top vignette, panel elevation (shadow-panel token), tonal scrollbars, a left accent bar + accent icon on the active nav item, status-dot + brandmark glows, and a motion-safe ping. @theme/tokens only — no inline styles. Co-Authored-By: Claude Opus 4.8 (1M context) --- resources/css/app.css | 26 ++++++++++++++++++- resources/views/components/kpi.blade.php | 2 +- resources/views/components/nav-item.blade.php | 4 +-- resources/views/components/panel.blade.php | 2 +- resources/views/components/sidebar.blade.php | 2 +- .../views/components/status-dot.blade.php | 5 ++-- resources/views/layouts/app.blade.php | 4 +-- 7 files changed, 35 insertions(+), 10 deletions(-) diff --git a/resources/css/app.css b/resources/css/app.css index 4e3b462..f8c3c69 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -51,6 +51,10 @@ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; + + /* elevation → shadow-panel / shadow-pop */ + --shadow-panel: inset 0 1px 0 rgb(255 255 255 / 0.03), 0 1px 2px rgb(0 0 0 / 0.4), 0 14px 30px -18px rgb(0 0 0 / 0.85); + --shadow-pop: 0 10px 34px -10px rgb(0 0 0 / 0.75); } /* ── base layer ───────────────────────────────────────────────────────── */ @@ -81,13 +85,33 @@ } body { - background-color: var(--color-base); + background-color: var(--color-void); color: var(--color-ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } + /* atmospheric void: fine dot-grid + orange top vignette + bottom sink */ + body::before { + content: ''; + position: fixed; + inset: 0; + z-index: 0; + pointer-events: none; + background: + radial-gradient(120% 70% at 50% -8%, rgb(255 107 44 / 0.07), transparent 55%), + radial-gradient(100% 60% at 50% 112%, rgb(0 0 0 / 0.55), transparent 50%), + radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.028) 1px, transparent 0); + background-size: auto, auto, 22px 22px; + } + + /* thin dark scrollbars */ + ::-webkit-scrollbar { width: 10px; height: 10px; } + ::-webkit-scrollbar-track { background: transparent; } + ::-webkit-scrollbar-thumb { background: var(--color-raised); border-radius: 9px; border: 2px solid var(--color-base); } + ::-webkit-scrollbar-thumb:hover { background: var(--color-line-strong); } + /* numbers/IPs/paths render mono */ .tabular { font-variant-numeric: tabular-nums; diff --git a/resources/views/components/kpi.blade.php b/resources/views/components/kpi.blade.php index cfc88fb..2e18d53 100644 --- a/resources/views/components/kpi.blade.php +++ b/resources/views/components/kpi.blade.php @@ -9,7 +9,7 @@ 'offline' => 'bg-offline', 'accent' => 'bg-accent', 'cyan' => 'bg-cyan', ][$tone] ?? 'bg-accent'; @endphp -
merge(['class' => 'rounded-lg border border-line bg-surface p-4']) }}> +
merge(['class' => 'rounded-lg border border-line bg-surface p-4 shadow-panel']) }}>

{{ $label }}

@if ($icon) diff --git a/resources/views/components/nav-item.blade.php b/resources/views/components/nav-item.blade.php index 300a079..4f7e6a6 100644 --- a/resources/views/components/nav-item.blade.php +++ b/resources/views/components/nav-item.blade.php @@ -2,10 +2,10 @@ $active, + 'border-accent/25 bg-accent/10 text-ink shadow-[inset_2px_0_0_var(--color-accent)]' => $active, 'border-transparent text-ink-2 hover:bg-raised hover:text-ink' => ! $active, ]) @if ($active) aria-current="page" @endif> - + $active]) /> {{ $slot }} diff --git a/resources/views/components/panel.blade.php b/resources/views/components/panel.blade.php index e7c45b1..5ce53a9 100644 --- a/resources/views/components/panel.blade.php +++ b/resources/views/components/panel.blade.php @@ -1,5 +1,5 @@ @props(['title' => null, 'subtitle' => null, 'padded' => true]) -
merge(['class' => 'overflow-hidden rounded-lg border border-line bg-surface']) }}> +
merge(['class' => 'overflow-hidden rounded-lg border border-line bg-surface shadow-panel']) }}> @if ($title)
diff --git a/resources/views/components/sidebar.blade.php b/resources/views/components/sidebar.blade.php index 572006a..687b960 100644 --- a/resources/views/components/sidebar.blade.php +++ b/resources/views/components/sidebar.blade.php @@ -5,7 +5,7 @@ aria-label="Seitennavigation"> {{-- Brand --}}
- + Clusev diff --git a/resources/views/components/status-dot.blade.php b/resources/views/components/status-dot.blade.php index 3d4c3f0..d4d1119 100644 --- a/resources/views/components/status-dot.blade.php +++ b/resources/views/components/status-dot.blade.php @@ -1,10 +1,11 @@ @props(['status' => 'offline', 'ping' => false]) @php $c = ['online' => 'bg-online', 'warning' => 'bg-warning', 'offline' => 'bg-offline'][$status] ?? 'bg-ink-4'; + $glow = ['online' => 'shadow-[0_0_6px_var(--color-online)]', 'warning' => 'shadow-[0_0_5px_var(--color-warning)]'][$status] ?? ''; @endphp merge(['class' => 'relative inline-flex h-2 w-2 shrink-0']) }}> @if ($ping) - + @endif - + diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 9b3e498..2e70625 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -8,7 +8,7 @@ @vite(['resources/css/app.css', 'resources/js/app.js']) @livewireStyles - +
{{-- mobile/tablet backdrop --}} @@ -18,7 +18,7 @@ -
+
{{ $slot }}