mirror of
https://github.com/setube/ogame-vue-ts.git
synced 2026-05-11 23:45:11 +08:00
90 lines
2.3 KiB
CSS
90 lines
2.3 KiB
CSS
@custom-variant dark (&:is(.dark *));
|
|
|
|
:root {
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.141 0.005 285.823);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.141 0.005 285.823);
|
|
--primary: oklch(0.21 0.006 285.885);
|
|
--primary-foreground: oklch(0.985 0 0);
|
|
--secondary: oklch(0.967 0.001 286.375);
|
|
--secondary-foreground: oklch(0.21 0.006 285.885);
|
|
--muted: oklch(0.967 0.001 286.375);
|
|
--muted-foreground: oklch(0.552 0.016 285.938);
|
|
--accent: oklch(0.967 0.001 286.375);
|
|
--accent-foreground: oklch(0.21 0.006 285.885);
|
|
--destructive: oklch(0.577 0.245 27.325);
|
|
--destructive-foreground: oklch(0.577 0.245 27.325);
|
|
--border: oklch(0.92 0.004 286.32);
|
|
--input: oklch(0.92 0.004 286.32);
|
|
--ring: oklch(0.705 0.015 286.067);
|
|
--radius: 0.625rem;
|
|
--background: oklch(1 0 0);
|
|
--foreground: oklch(0.141 0.005 285.823);
|
|
}
|
|
|
|
.dark {
|
|
--background: oklch(0.141 0.005 285.823);
|
|
--foreground: oklch(0.985 0 0);
|
|
--card: oklch(0.141 0.005 285.823);
|
|
--card-foreground: oklch(0.985 0 0);
|
|
--popover: oklch(0.141 0.005 285.823);
|
|
--popover-foreground: oklch(0.985 0 0);
|
|
--primary: oklch(0.985 0 0);
|
|
--primary-foreground: oklch(0.21 0.006 285.885);
|
|
--secondary: oklch(0.274 0.006 286.033);
|
|
--secondary-foreground: oklch(0.985 0 0);
|
|
--muted: oklch(0.274 0.006 286.033);
|
|
--muted-foreground: oklch(0.705 0.015 286.067);
|
|
--accent: oklch(0.274 0.006 286.033);
|
|
--accent-foreground: oklch(0.985 0 0);
|
|
--destructive: oklch(0.396 0.141 25.723);
|
|
--destructive-foreground: oklch(0.637 0.237 25.331);
|
|
--border: oklch(0.274 0.006 286.033);
|
|
--input: oklch(0.274 0.006 286.033);
|
|
--ring: oklch(0.442 0.017 285.786);
|
|
}
|
|
|
|
/* Theme variables are defined in style.css */
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
html {
|
|
color-scheme: light dark;
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html.light {
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* 队列添加动画 - 脉冲效果 */
|
|
@keyframes queue-pulse-animation {
|
|
0% {
|
|
transform: scale3d(1, 1, 1);
|
|
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
|
|
}
|
|
50% {
|
|
transform: scale3d(1.1, 1.1, 1);
|
|
box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
|
|
}
|
|
100% {
|
|
transform: scale3d(1, 1, 1);
|
|
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
|
|
}
|
|
}
|
|
|
|
.queue-pulse {
|
|
animation: queue-pulse-animation 0.3s ease-out;
|
|
} |