mirror of
https://github.com/YspCoder/clawgo.git
synced 2026-05-02 11:37:34 +08:00
feat(webui): refresh brand theme and add day-night mode
This commit is contained in:
lpf
@@ -1,12 +1,66 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-sans: "Manrope", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
||||
--color-zinc-50: #472018;
|
||||
--color-zinc-100: #51261a;
|
||||
--color-zinc-200: #653424;
|
||||
--color-zinc-300: #7e4734;
|
||||
--color-zinc-400: #99563f;
|
||||
--color-zinc-500: #b16b51;
|
||||
--color-zinc-600: #d08b6a;
|
||||
--color-zinc-700: #eeb79d;
|
||||
--color-zinc-800: #f7d5c2;
|
||||
--color-zinc-900: #ffeadc;
|
||||
--color-zinc-950: #fff3e9;
|
||||
--color-indigo-300: #ffb36b;
|
||||
--color-indigo-400: #ff8552;
|
||||
--color-indigo-500: #f05a28;
|
||||
--color-indigo-600: #d9481c;
|
||||
--color-indigo-700: #a43a18;
|
||||
--color-indigo-800: #7a2915;
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--color-zinc-950);
|
||||
}
|
||||
|
||||
html.theme-dark {
|
||||
--color-zinc-50: #fff4ee;
|
||||
--color-zinc-100: #ffe6d8;
|
||||
--color-zinc-200: #ffc9a7;
|
||||
--color-zinc-300: #ffb36b;
|
||||
--color-zinc-400: #ff9a66;
|
||||
--color-zinc-500: #ff8552;
|
||||
--color-zinc-600: #d56a42;
|
||||
--color-zinc-700: #8b472f;
|
||||
--color-zinc-800: #5d2a1d;
|
||||
--color-zinc-900: #341711;
|
||||
--color-zinc-950: #1c0c08;
|
||||
--color-indigo-300: #ffd1ad;
|
||||
--color-indigo-400: #ffb36b;
|
||||
--color-indigo-500: #ff8552;
|
||||
--color-indigo-600: #f05a28;
|
||||
--color-indigo-700: #d9481c;
|
||||
--color-indigo-800: #a43a18;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-zinc-950 text-zinc-50 antialiased selection:bg-indigo-500/30;
|
||||
background-image:
|
||||
radial-gradient(circle at top left, rgb(255 179 107 / 0.18), transparent 26%),
|
||||
radial-gradient(circle at 85% 18%, rgb(240 90 40 / 0.12), transparent 24%),
|
||||
linear-gradient(180deg, rgb(255 243 233 / 0.96), rgb(255 234 220 / 0.88));
|
||||
min-height: 100vh;
|
||||
transition: background-color 180ms ease, color 180ms ease;
|
||||
}
|
||||
|
||||
html.theme-dark body {
|
||||
background-image:
|
||||
radial-gradient(circle at top left, rgb(255 133 82 / 0.18), transparent 28%),
|
||||
radial-gradient(circle at 82% 16%, rgb(255 179 107 / 0.08), transparent 24%),
|
||||
linear-gradient(180deg, rgb(28 12 8 / 0.98), rgb(38 16 11 / 0.96));
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@@ -22,3 +76,123 @@ body {
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-zinc-700;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
background:
|
||||
radial-gradient(circle at top, rgb(255 179 107 / 0.22), transparent 22%),
|
||||
radial-gradient(circle at bottom right, rgb(217 72 28 / 0.12), transparent 24%);
|
||||
}
|
||||
|
||||
.app-main-surface {
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 243 233 / 0.16), transparent 22%),
|
||||
linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04));
|
||||
}
|
||||
|
||||
html.theme-dark .app-main-surface {
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 133 82 / 0.06), transparent 24%),
|
||||
linear-gradient(180deg, rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.12));
|
||||
}
|
||||
|
||||
.app-header {
|
||||
background:
|
||||
linear-gradient(90deg, rgb(255 243 233 / 0.84), rgb(255 234 220 / 0.62)),
|
||||
linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.06));
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
html.theme-dark .app-header {
|
||||
background:
|
||||
linear-gradient(90deg, rgb(52 23 17 / 0.86), rgb(28 12 8 / 0.72)),
|
||||
linear-gradient(180deg, rgb(255 133 82 / 0.05), rgb(0 0 0 / 0.08));
|
||||
}
|
||||
|
||||
.brand-badge {
|
||||
background: linear-gradient(135deg, #ffb36b 0%, #ff8552 48%, #d9481c 100%);
|
||||
box-shadow: 0 18px 40px rgb(217 72 28 / 0.24);
|
||||
}
|
||||
|
||||
.sidebar-shell {
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 250 245 / 0.88), rgb(255 234 220 / 0.78)),
|
||||
linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.04));
|
||||
box-shadow: inset -1px 0 0 rgb(247 176 138 / 0.26);
|
||||
}
|
||||
|
||||
html.theme-dark .sidebar-shell {
|
||||
background:
|
||||
linear-gradient(180deg, rgb(52 23 17 / 0.92), rgb(28 12 8 / 0.84)),
|
||||
linear-gradient(180deg, rgb(255 133 82 / 0.04), rgb(0 0 0 / 0.08));
|
||||
box-shadow: inset -1px 0 0 rgb(255 133 82 / 0.12);
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 255 255 / 0.34), rgb(255 243 233 / 0.2));
|
||||
}
|
||||
|
||||
html.theme-dark .sidebar-section {
|
||||
background:
|
||||
linear-gradient(180deg, rgb(93 42 29 / 0.42), rgb(52 23 17 / 0.2));
|
||||
}
|
||||
|
||||
.nav-item-active {
|
||||
background:
|
||||
linear-gradient(135deg, rgb(255 179 107 / 0.28), rgb(240 90 40 / 0.18));
|
||||
box-shadow: 0 10px 24px rgb(240 90 40 / 0.14);
|
||||
}
|
||||
|
||||
html.theme-dark .nav-item-active {
|
||||
background:
|
||||
linear-gradient(135deg, rgb(255 179 107 / 0.18), rgb(240 90 40 / 0.22));
|
||||
box-shadow: 0 12px 30px rgb(0 0 0 / 0.24);
|
||||
}
|
||||
|
||||
.brand-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 255 255 / 0.34), rgb(255 243 233 / 0.14));
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.26),
|
||||
0 20px 48px rgb(169 82 48 / 0.08);
|
||||
}
|
||||
|
||||
.brand-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -30% auto auto -15%;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 9999px;
|
||||
background: radial-gradient(circle, rgb(255 179 107 / 0.22), transparent 72%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
html.theme-dark .brand-card {
|
||||
background:
|
||||
linear-gradient(180deg, rgb(93 42 29 / 0.36), rgb(28 12 8 / 0.3));
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgb(255 179 107 / 0.06),
|
||||
0 22px 54px rgb(0 0 0 / 0.2);
|
||||
}
|
||||
|
||||
.brand-card-subtle {
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 243 233 / 0.12));
|
||||
}
|
||||
|
||||
html.theme-dark .brand-card-subtle {
|
||||
background:
|
||||
linear-gradient(180deg, rgb(93 42 29 / 0.22), rgb(28 12 8 / 0.14));
|
||||
}
|
||||
|
||||
.brand-button {
|
||||
background: linear-gradient(135deg, #ffb36b 0%, #ff8552 40%, #d9481c 100%);
|
||||
box-shadow: 0 14px 32px rgb(217 72 28 / 0.2);
|
||||
}
|
||||
|
||||
html.theme-dark .brand-button {
|
||||
box-shadow: 0 16px 36px rgb(0 0 0 / 0.26);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user