klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Restore toolbar background to bg-nebula; add toolbar backdrop blur

Browse Source
This commit is contained in:
Gregor Klevže
2026-02-15 09:24:43 +01:00
parent 79192345e3
commit 9dbe848412
28 changed files with 736 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
resources/scss/nova.scss
View File

@@ -3,14 +3,14 @@
* The Nova layout is styled primarily via Tailwind utilities from resources/css/app.css.
*/
/* Hero radial background moved from inline styles to a class to respect Nebula rules */
/* Hero radial background moved from inline styles to a class to respect Nova rules */
.nb-hero-radial {
background-image: radial-gradient(circle at 20% 10%, rgba(77,163,255,.25), transparent 35%),
radial-gradient(circle at 70% 30%, rgba(255,196,77,.18), transparent 40%),
radial-gradient(circle at 30% 80%, rgba(180,77,255,.16), transparent 45%);
}
/* Nebula design tokens and helper classes copied from nova.html preview
/* Nova design tokens and helper classes copied from nova.html preview
These provide the same color tokens and small utilities used by the preview
so `blank` renders consistently until Tailwind config is consolidated. */
:root {
@@ -23,16 +23,16 @@
--sb-muted: #a6a6b0;
--sb-blue: #4da3ff;
/* Primary UI color tokens (Nebula palette) */
--nebula-blue: #09101acc;
/* Primary UI color tokens (Nova palette) */
--nova-blue: #09101acc;
--deep-space: #0F1724;
--panel-dark: #151E2E;
--soft-blue: #7A8CA5;
--accent-orange: #E07A21;
/* Toolbar color (Skinbase Nebula) */
/* Toolbar color (Skinbase Nova) */
--toolbar-bg: #0F1724;
/* RGB variants for subtle overlays */
--nebula-blue-rgb: 100,111,131;
--nova-blue-rgb: 100,111,131;
--deep-space-rgb: 15,23,36;
--panel-dark-rgb: 21,30,46;
--toolbar-bg-rgb: 15,23,36;
@@ -58,7 +58,7 @@
/* Ensure header and dropdowns are not clipped and render above page content */
header {
overflow: visible;
/* Use the official toolbar background token from the Nebula spec */
/* Use the official toolbar background token from the Nova spec */
background-color: var(--toolbar-bg);
/* subtle divider to separate toolbar from content */
border-bottom: 1px solid rgba(255,255,255,0.02);
@@ -72,8 +72,8 @@ header {
border: 1px solid rgba(255,255,255,0.03);
}
/* Convenience helpers for the new nebula tokens */
.bg-nebula { background-color: var(--nebula-blue) !important; }
/* Convenience helpers for the new nova tokens */
.bg-nova { background-color: var(--nova-blue) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(2px); }
.bg-deep { background-color: var(--deep-space) !important; }
.bg-panel-dark { background-color: var(--panel-dark) !important; }
.text-soft { color: var(--soft-blue) !important; }