admin/TaskPool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: fix oklch style

Browse Source
This commit is contained in:
engigu
2026-04-01 12:04:03 +08:00
parent 639cf4a35c
commit 1297457cd6
2 changed files with 75 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/assets/index.css
+65 -54
View File
@@ -70,117 +70,128 @@
:root {
--background: #ffffff;
--background: oklch(1 0 0);
--foreground: #252525;
--foreground: oklch(0.145 0 0);
--card: #ffffff;
--card: oklch(1 0 0);
--card-foreground: #252525;
--card-foreground: oklch(0.145 0 0);
--popover: #ffffff;
--popover: oklch(1 0 0);
--popover-foreground: #252525;
--popover-foreground: oklch(0.145 0 0);
--primary: #333333;
--primary: oklch(0.205 0 0);
--primary-foreground: #ffffff;
--primary-foreground: oklch(0.985 0 0);
--secondary: #f3f4f6;
--secondary: oklch(0.97 0 0);
--secondary-foreground: #333333;
--secondary-foreground: oklch(0.205 0 0);
--muted: #f3f4f6;
--muted: oklch(0.97 0 0);
--muted-foreground: #6b7280;
--muted-foreground: oklch(0.556 0 0);
--accent: #f3f4f6;
--accent: oklch(0.97 0 0);
--accent-foreground: #333333;
--accent-foreground: oklch(0.205 0 0);
--destructive: #ef4444;
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: #ffffff;
--destructive-foreground: oklch(0.985 0 0);
--border: #e5e7eb;
--border: oklch(0.922 0 0);
--input: #e5e7eb;
--input: oklch(0.922 0 0);
--ring: #9ca3af;
--ring: oklch(0.708 0 0);
--radius: 0.625rem;
--sidebar: #f9fafb;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: #252525;
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: #333333;
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: #ffffff;
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: #f3f4f6;
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: #333333;
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: #e5e7eb;
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: #9ca3af;
--sidebar-ring: oklch(0.708 0 0);
}
/* OKLCH support targeting modern browsers */
@supports (color: oklch(1 0 0)) {
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
}
.dark {
--background: #1a1a1a;
--background: oklch(0.22 0 0);
--foreground: #f9fafb;
--foreground: oklch(0.985 0 0);
--card: #242424;
--card: oklch(0.26 0 0);
--card-foreground: #f9fafb;
--card-foreground: oklch(0.985 0 0);
--popover: #242424;
--popover: oklch(0.26 0 0);
--popover-foreground: #f9fafb;
--popover-foreground: oklch(0.985 0 0);
--primary: #f3f4f6;
--primary: oklch(0.922 0 0);
--primary-foreground: #252525;
--primary-foreground: oklch(0.205 0 0);
--secondary: #2d2d2d;
--secondary: oklch(0.32 0 0);
--secondary-foreground: #f9fafb;
--secondary-foreground: oklch(0.985 0 0);
--muted: #2d2d2d;
--muted: oklch(0.32 0 0);
--muted-foreground: #9ca3af;
--muted-foreground: oklch(0.708 0 0);
--accent: #2d2d2d;
--accent: oklch(0.32 0 0);
--accent-foreground: #f9fafb;
--accent-foreground: oklch(0.985 0 0);
--destructive: #dc2626;
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: #f9fafb;
--destructive-foreground: oklch(0.985 0 0);
--border: rgba(255, 255, 255, 0.12);
--border: oklch(1 0 0 / 12%);
--input: rgba(255, 255, 255, 0.15);
--input: oklch(1 0 0 / 15%);
--ring: #6b7280;
--ring: oklch(0.556 0 0);
--sidebar: #1a1a1a;
--sidebar: oklch(0.26 0 0);
--sidebar-foreground: #f9fafb;
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: #60a5fa;
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: #f9fafb;
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: #2d2d2d;
--sidebar-accent: oklch(0.32 0 0);
--sidebar-accent-foreground: #f9fafb;
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: rgba(255, 255, 255, 0.12);
--sidebar-border: oklch(1 0 0 / 12%);
--sidebar-ring: #6b7280;
--sidebar-ring: oklch(0.556 0 0);
}
@supports (color: oklch(1 0 0)) {
.dark {
--background: oklch(0.22 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.26 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.26 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.32 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.32 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.32 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(1 0 0 / 12%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--sidebar: oklch(0.26 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.32 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 12%);
--sidebar-ring: oklch(0.556 0 0);
}
}
@layer base {
web/src/layouts/MainLayout.vue
+10 -10
View File
@@ -110,7 +110,7 @@ onMounted(() => {
<!-- Application Card: The main floating surface -->
<div :style="mobileMenuOpen ? 'transform: scale(0.98); opacity: 0.9;' : ''"
class="flex h-full w-full bg-background relative transition-all duration-500 overflow-hidden
class="flex h-full w-full bg-white dark:bg-slate-950 relative transition-all duration-500 overflow-hidden
2xl:max-w-[1800px] 2xl:max-h-[92vh] 2xl:rounded-[2.5rem] 2xl:shadow-[0_40px_100px_-20px_rgba(0,0,0,0.12)] 2xl:border 2xl:border-slate-200/60 dark:2xl:border-slate-800/40
3xl:max-w-[2200px] 3xl:max-h-[90vh]">
@@ -119,26 +119,26 @@ onMounted(() => {
<!-- Sidebar -->
<aside :class="[
'fixed lg:static inset-y-0 z-50 w-44 2xl:w-52 border-r bg-background flex flex-col transition-all duration-300 ease-in-out',
'fixed lg:static inset-y-0 z-50 w-44 2xl:w-52 border-r bg-white dark:bg-slate-900 flex flex-col transition-all duration-300 ease-in-out',
mobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
]">
<div class="h-14 flex items-center justify-center px-4 font-bold text-lg border-b relative">
<div class="h-14 flex items-center justify-center px-4 font-bold text-lg border-b relative bg-white dark:bg-slate-900">
<span>{{ siteSettings.title }}</span>
<Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden absolute right-2" @click="mobileMenuOpen = false">
<X class="h-4 w-4" />
</Button>
</div>
<nav class="flex-1 px-3 py-6 space-y-1 flex flex-col items-center overflow-y-auto custom-scrollbar">
<nav class="flex-1 px-3 py-6 space-y-1 flex flex-col items-center overflow-y-auto custom-scrollbar bg-white dark:bg-slate-900">
<RouterLink v-for="item in navItems" :key="item.to" :to="item.to" custom v-slot="{ navigate }">
<Button variant="ghost"
:class="['justify-start gap-3 h-9 px-3 w-full', isItemActive(item) && 'bg-primary/5 text-primary font-semibold shadow-sm']"
:class="['justify-start gap-3 h-9 px-3 w-full', isItemActive(item) && 'bg-slate-100 dark:bg-slate-800 text-primary font-semibold shadow-sm']"
@click="handleNavClick(navigate)">
<component :is="item.icon" class="h-3.5 w-3.5" />
<span class="text-[13px]">{{ item.label }}</span>
</Button>
</RouterLink>
</nav>
<div class="px-3 py-4 border-t flex justify-center">
<div class="px-3 py-4 border-t flex justify-center bg-white dark:bg-slate-900">
<Button variant="ghost" class="justify-start gap-3 h-9 px-3 w-full text-muted-foreground hover:text-destructive hover:bg-destructive/5 transition-colors"
@click="logout">
<LogOut class="h-3.5 w-3.5" />
@@ -148,14 +148,14 @@ onMounted(() => {
</aside>
<!-- Main Content Area -->
<main class="flex-1 flex flex-col min-w-0 relative bg-white/5 dark:bg-slate-900/10">
<main class="flex-1 flex flex-col min-w-0 relative bg-slate-50/30 dark:bg-slate-950/20">
<!-- Top Navigation Bar -->
<header class="h-14 border-b bg-background/80 backdrop-blur-md flex items-center justify-between px-4 lg:px-6 shrink-0 sticky top-0 z-30">
<header class="h-14 border-b bg-white dark:bg-slate-900 flex items-center justify-between px-4 lg:px-6 shrink-0 sticky top-0 z-30 shadow-sm">
<div class="flex items-center gap-3 flex-1 min-w-0">
<Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden shrink-0 border bg-muted/20" @click="mobileMenuOpen = true">
<Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden shrink-0 border bg-slate-50 dark:bg-slate-800" @click="mobileMenuOpen = true">
<Menu class="h-4 w-4" />
</Button>
<span class="text-xs text-muted-foreground truncate italic opacity-80" :title="sentence">
<span class="text-xs text-muted-foreground truncate italic opacity-80" :title="sentence" style="color: #6b7280;">
<span class="hidden sm:inline">{{ sentence }}</span>
<span class="sm:hidden">{{ sentenceContent }}</span>
</span>