Skip to content

fix(ui): align cobalt.css to v3 standard #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cmarko89 merged 2 commits into from
Aug 2, 2026
Merged

fix(ui): align cobalt.css to v3 standard #28

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3666afb
fix(ui): align cobalt.css to v3 standard - token drift + green blob
cmarko89 Aug 2, 2026
a113499
fix(ui): tokenize toast z-index via --z-toast
cmarko89 Aug 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 16 additions & 8 deletions frontend/static/css/cobalt.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,9 @@
/* ---- PRIMARY accent -- Emkraan logo blue ramp (500=#2486B9 peak, 600=#1B6FB8 token) ---- */
--accent-50:#E8F1FB; --accent-100:#C6DEF5; --accent-200:#93C2EC; --accent-300:#5FA4E0;
--accent-400:#4A9FE0; --accent-500:#2486B9; --accent-600:#1B6FB8; --accent-700:#155A95; --accent-800:#114B7C; --accent-900:#0D3A61;
--accent: #1B6FB8; --accent-hover: #2384C2; --accent-press:#155A95; --accent-bright: #4A9FE0;
--accent: var(--accent-600); --accent-hover: #2384C2; --accent-press:#155A95; --accent-bright: var(--accent-400);
--accent-dim: #10223A; --accent-soft: var(--accent-dim); --accent-veil: rgba(27,111,184,0.10);
--accent-border: rgba(36,134,185,0.55); --accent-glow: rgba(36,134,185,0.34);
--accent-border: rgba(36,134,185,0.45); --accent-glow: rgba(36,134,185,0.34);
--accent-grad: linear-gradient(180deg, #2486B9 0%, #1B6FB8 100%);

/* ---- Status -- mapped to logo inks ---- */
Expand Down Expand Up @@ -109,16 +109,24 @@
--ease-in-out: cubic-bezier(0.65,0,0.35,1);
--ease-spring: cubic-bezier(0.34,1.56,0.64,1);
--dur-instant:80ms; --dur-fast:120ms; --dur-base:180ms; --dur-slow:260ms; --dur-slower:300ms;
--t-instant:80ms; --t-fast:120ms; --t:180ms; --t-slow:240ms;
--t-instant:80ms; --t-fast:120ms; --t:180ms; --t-slow:260ms;

/* ---- Spacing scale (4px base) ---- */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:64px;

/* ---- Layout ---- */
--topbar-h:54px; --gutter:24px; --gutter-mobile:16px;

/* ---- Mobile shell: single source for the drawer top-bar height. The fixed
.mobile-topbar height, the .main-content padding-top, and the sticky-table
head offset all read this so they can never drift. ---- */
--mobile-topbar-h:56px;

/* ---- Z-index ladder ---- */
--z-wash:0; --z-base:1; --z-ambient:2; --z-content:3; --z-sticky:10;
--z-topbar:30; --z-drawer-backdrop:40; --z-drawer:50; --z-popover:100;
--z-modal-backdrop:1000; --z-modal:1010; --z-toast:1100; --z-tooltip:1200;

/* ---- Body ambient wash (dark-but-not-black canvas the glow fades into) ---- */
--body-wash: radial-gradient(120% 75% at 50% -10%, rgba(36,134,185,0.10) 0%, rgba(11,18,32,0) 55%),
var(--bg-canvas);
Expand Down Expand Up @@ -231,7 +239,7 @@ body::before{
.bg-blobs .b3{width:52vw;height:52vw;left:6vw;bottom:-24vh;
background:radial-gradient(circle,rgba(27,111,184,.18),rgba(0,0,0,0) 66%);animation:drift3 18s ease-in-out infinite alternate;}
.bg-blobs .b4{width:34vw;height:34vw;right:4vw;bottom:-10vh;
background:radial-gradient(circle,rgba(52,199,89,.11),rgba(0,0,0,0) 66%);animation:drift4 16s ease-in-out infinite alternate;}
background:radial-gradient(circle,rgba(36,134,185,.11),rgba(0,0,0,0) 66%);animation:drift4 16s ease-in-out infinite alternate;}
/* Auth pages (login/setup) have no .app-container; lift their card above the blobs. */
.auth-page .auth-card{position:relative;z-index:1;}
a{color:inherit;text-decoration:none;}
Expand Down Expand Up @@ -584,7 +592,7 @@ body{overflow:hidden;background:var(--bg-primary);}
/* =========================================================================
17. Toast (JS-spawned + server-flash)
========================================================================= */
.toast-root{position:fixed;bottom:24px;right:24px;z-index:2000;display:flex;flex-direction:column;gap:10px;align-items:flex-end;}
.toast-root{position:fixed;bottom:24px;right:24px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:10px;align-items:flex-end;}
.toast{display:flex;align-items:center;gap:9px;max-width:380px;padding:10px 12px 10px 14px;border-radius:var(--radius-lg);
font-size:13px;font-weight:500;box-shadow:var(--shadow-md);animation:slideUp .22s var(--ease-out);
transition:opacity .2s var(--ease),transform .2s var(--ease);
Expand Down Expand Up @@ -762,8 +770,8 @@ body{overflow:hidden;background:var(--bg-primary);}
/* =========================================================================
24. SSO config modal + provider picker (Portainer-style)
========================================================================= */
.sso-modal-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;
background:rgba(6,10,18,.64);backdrop-filter:blur(5px);animation:fadeIn .18s var(--ease-out);}
.sso-modal-backdrop{position:fixed;inset:0;z-index:var(--z-modal-backdrop);display:flex;align-items:center;justify-content:center;padding:24px;
background:var(--scrim);backdrop-filter:blur(5px);animation:fadeIn .18s var(--ease-out);}
.sso-modal{width:100%;max-width:700px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
background:var(--surface-4);border:1px solid var(--border-strong);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);animation:riseIn .26s var(--ease-out);}
.sso-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border-subtle);flex-shrink:0;}
Expand Down
Loading