lisone/ds2api
1
0
Fork 0
mirror of https://github.com/CJackHwang/ds2api.git synced 2026-05-11 19:57:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement a modern flat theme with updated UI components and styling.

Browse Source
This commit is contained in:
CJACK
2026-02-01 06:14:49 +08:00
parent 842a942a55
commit ef11d9cf13
8 changed files with 386 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
webui/src/styles.css
View File

@@ -2,34 +2,40 @@
@tailwind components;
@tailwind utilities;
/* Custom CSS Variables for Design Tokens */
/* Modern Flat Theme (Big Tech Style) - Zinc & Amber */
:root {
--color-border: hsl(217.2 32.6% 17.5%);
--color-input: hsl(217.2 32.6% 17.5%);
--color-ring: hsl(212.7 26.8% 83.9%);
--color-background: hsl(222.2 84% 4.9%);
--color-foreground: hsl(210 40% 98%);
/* Base - Deep Matte Zinc */
--color-background: hsl(240 10% 3.9%);
--color-foreground: hsl(0 0% 98%);
--color-primary: hsl(210 40% 98%);
--color-primary-foreground: hsl(222.2 47.4% 11.2%);
/* Surface */
--color-card: hsl(240 10% 6.5%);
--color-card-foreground: hsl(0 0% 98%);
--color-secondary: hsl(217.2 32.6% 17.5%);
--color-secondary-foreground: hsl(210 40% 98%);
--color-popover: hsl(240 10% 3.9%);
--color-popover-foreground: hsl(0 0% 98%);
--color-destructive: hsl(0 62.8% 30.6%);
--color-destructive-foreground: hsl(210 40% 98%);
/* Primary Accent - Warm Amber/Gold */
--color-primary: hsl(45 93% 47%);
--color-primary-foreground: hsl(240 10% 3.9%);
--color-muted: hsl(217.2 32.6% 17.5%);
--color-muted-foreground: hsl(215 20.2% 65.1%);
/* Secondary */
--color-secondary: hsl(240 5.9% 10%);
--color-secondary-foreground: hsl(0 0% 98%);
--color-accent: hsl(217.2 32.6% 17.5%);
--color-accent-foreground: hsl(210 40% 98%);
/* UI Elements */
--color-muted: hsl(240 3.7% 15.9%);
--color-muted-foreground: hsl(240 5% 64.9%);
--color-popover: hsl(222.2 84% 4.9%);
--color-popover-foreground: hsl(210 40% 98%);
--color-accent: hsl(240 3.7% 15.9%);
--color-accent-foreground: hsl(0 0% 98%);
--color-card: hsl(222.2 84% 4.9%);
--color-card-foreground: hsl(210 40% 98%);
--color-destructive: hsl(0 84.2% 60.2%);
--color-destructive-foreground: hsl(0 0% 98%);
--color-border: hsl(240 3.7% 15.9%);
--color-input: hsl(240 3.7% 15.9%);
--color-ring: hsl(45 93% 47%);
--radius: 0.5rem;
}
@@ -47,10 +53,10 @@ body {
font-feature-settings: "rlig" 1, "calt" 1;
}
/* Custom scrollbar */
/* Custom scrollbar - Slim & Modern */
::-webkit-scrollbar {
width: 8px;
height: 8px;
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
@@ -58,12 +64,12 @@ body {
}
::-webkit-scrollbar-thumb {
background: var(--color-muted);
border-radius: 4px;
background: hsla(215, 27.9%, 26.9%, 0.6);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-muted-foreground);
background: hsla(215, 27.9%, 40%, 0.8);
}
/* Custom scrollbar utility */
@@ -141,7 +147,8 @@ body {
width: 100%;
border-radius: 0.5rem;
border: 1px solid var(--color-input);
background-color: rgba(30, 41, 59, 0.3);
background-color: #09090b;
color: hsl(var(--color-foreground));
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
transition: all 0.15s;