d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-03-10 08:27:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Refine design language and use theme tokens across most pages.

Browse Source
This commit is contained in:
simosmik
2026-02-16 13:17:47 +00:00
parent 42f13e151c
commit afe1be7fca
21 changed files with 1209 additions and 880 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/index.css
View File

@@ -43,7 +43,19 @@
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
--radius: 0.5rem;
/* Nav design tokens */
--nav-glass-bg: 0 0% 100% / 0.7;
--nav-glass-blur: 20px;
--nav-glass-saturate: 1.8;
--nav-tab-glow: 221.2 83.2% 53.3% / 0.18;
--nav-tab-ring: 221.2 83.2% 53.3% / 0.10;
--nav-float-shadow: 0 0% 0% / 0.06;
--nav-float-ring: 214.3 31.8% 91.4% / 0.5;
--nav-divider-color: 214.3 31.8% 91.4% / 0.5;
--nav-input-bg: 210 40% 96.1% / 0.5;
--nav-input-focus-ring: 221.2 83.2% 53.3% / 0.22;
/* Safe area CSS variables */
--safe-area-inset-top: env(safe-area-inset-top);
--safe-area-inset-right: env(safe-area-inset-right);
@@ -51,9 +63,10 @@
--safe-area-inset-left: env(safe-area-inset-left);
/* Mobile navigation dimensions - Single source of truth */
--mobile-nav-height: 60px;
--mobile-nav-padding: 12px;
--mobile-nav-total: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
/* Floating nav: ~52px bar + 8px bottom margin + 12px px-3 top spacing */
--mobile-nav-height: 52px;
--mobile-nav-padding: 20px;
--mobile-nav-total: calc(var(--mobile-nav-height) + var(--mobile-nav-padding) + env(safe-area-inset-bottom, 0px));
/* Header safe area dimensions */
--header-safe-area-top: env(safe-area-inset-top, 0px);
@@ -91,6 +104,18 @@
--border: 217.2 32.6% 17.5%;
--input: 220 13% 46%;
--ring: 217.2 91.2% 59.8%;
/* Nav design tokens — dark overrides */
--nav-glass-bg: 217.2 91.2% 8% / 0.55;
--nav-glass-blur: 24px;
--nav-glass-saturate: 1.6;
--nav-tab-glow: 217.2 91.2% 59.8% / 0.25;
--nav-tab-ring: 217.2 91.2% 59.8% / 0.15;
--nav-float-shadow: 0 0% 0% / 0.35;
--nav-float-ring: 217.2 32.6% 17.5% / 0.3;
--nav-divider-color: 217.2 32.6% 17.5% / 0.5;
--nav-input-bg: 217.2 32.6% 17.5% / 0.5;
--nav-input-focus-ring: 217.2 91.2% 59.8% / 0.25;
}
}
@@ -240,6 +265,42 @@
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 300ms ease-in-out;
}
/* Nav glass surface — uses theme tokens */
.nav-glass {
background: hsl(var(--nav-glass-bg));
backdrop-filter: blur(var(--nav-glass-blur)) saturate(var(--nav-glass-saturate));
-webkit-backdrop-filter: blur(var(--nav-glass-blur)) saturate(var(--nav-glass-saturate));
}
/* Nav tab active pill glow — uses theme tokens */
.nav-tab-active {
box-shadow: 0 1px 8px hsl(var(--nav-tab-glow)),
0 0 0 1px hsl(var(--nav-tab-ring));
}
/* Floating mobile nav bar — uses theme tokens */
.mobile-nav-float {
box-shadow: 0 -1px 20px hsl(var(--nav-float-shadow)),
0 0 0 1px hsl(var(--nav-float-ring));
}
/* Subtle sidebar divider — uses theme tokens */
.nav-divider {
height: 1px;
background: linear-gradient(90deg, transparent, hsl(var(--nav-divider-color)) 20%, hsl(var(--nav-divider-color)) 80%, transparent);
}
/* Nav search input surface — uses theme tokens */
.nav-search-input {
background: hsl(var(--nav-input-bg));
border: none;
}
.nav-search-input:focus-within {
background: hsl(var(--background));
box-shadow: 0 0 0 2px hsl(var(--nav-input-focus-ring));
}
/* Modal and dropdown transitions */
.modal-transition {