298 lines
7.8 KiB
CSS
298 lines
7.8 KiB
CSS
@import "tailwindcss";
|
||
@import "@fontsource-variable/space-grotesk";
|
||
@import "@fontsource-variable/jetbrains-mono";
|
||
|
||
@custom-variant dark (&:is(.dark *));
|
||
|
||
/* ===== shadcn/ui tokens · Acid（克制版） ===== */
|
||
:root {
|
||
--radius: 0.5rem;
|
||
|
||
--background: 56 42% 96%;
|
||
--foreground: 248 20% 9%;
|
||
|
||
--card: 0 0% 100%;
|
||
--card-foreground: 248 20% 9%;
|
||
--popover: 0 0% 100%;
|
||
--popover-foreground: 248 20% 9%;
|
||
|
||
--primary: 108 60% 30%;
|
||
--primary-foreground: 60 40% 98%;
|
||
--secondary: 55 30% 91%;
|
||
--secondary-foreground: 248 18% 13%;
|
||
--muted: 54 26% 91%;
|
||
--muted-foreground: 248 9% 42%;
|
||
--accent: 188 44% 90%;
|
||
--accent-foreground: 201 50% 16%;
|
||
|
||
--destructive: 2 70% 46%;
|
||
--destructive-foreground: 0 0% 100%;
|
||
--success: 143 58% 34%;
|
||
--warning: 34 88% 38%;
|
||
|
||
--border: 55 16% 84%;
|
||
--input: 55 16% 79%;
|
||
--ring: 108 60% 36%;
|
||
|
||
--acid-lime: 105 72% 42%;
|
||
--acid-cyan: 187 90% 38%;
|
||
--acid-magenta: 322 82% 44%;
|
||
--acid-violet: 258 76% 48%;
|
||
|
||
color-scheme: light;
|
||
}
|
||
|
||
.dark {
|
||
--background: 248 22% 5%;
|
||
--foreground: 56 26% 92%;
|
||
|
||
--card: 247 18% 7%;
|
||
--card-foreground: 56 26% 92%;
|
||
--popover: 247 18% 7%;
|
||
--popover-foreground: 56 26% 92%;
|
||
|
||
--primary: 91 58% 44%;
|
||
--primary-foreground: 240 30% 7%;
|
||
--secondary: 247 16% 12%;
|
||
--secondary-foreground: 55 20% 88%;
|
||
--muted: 247 16% 12%;
|
||
--muted-foreground: 246 10% 62%;
|
||
--accent: 251 22% 14%;
|
||
--accent-foreground: 190 72% 70%;
|
||
|
||
--destructive: 3 68% 52%;
|
||
--destructive-foreground: 0 0% 98%;
|
||
--success: 143 62% 55%;
|
||
--warning: 38 92% 55%;
|
||
|
||
--border: 248 14% 18%;
|
||
--input: 248 13% 24%;
|
||
--ring: 91 58% 50%;
|
||
|
||
--acid-lime: 90 66% 54%;
|
||
--acid-cyan: 188 82% 58%;
|
||
--acid-magenta: 325 80% 62%;
|
||
--acid-violet: 262 86% 68%;
|
||
|
||
color-scheme: dark;
|
||
}
|
||
|
||
@theme inline {
|
||
--color-background: hsl(var(--background));
|
||
--color-foreground: hsl(var(--foreground));
|
||
--color-card: hsl(var(--card));
|
||
--color-card-foreground: hsl(var(--card-foreground));
|
||
--color-popover: hsl(var(--popover));
|
||
--color-popover-foreground: hsl(var(--popover-foreground));
|
||
--color-primary: hsl(var(--primary));
|
||
--color-primary-foreground: hsl(var(--primary-foreground));
|
||
--color-secondary: hsl(var(--secondary));
|
||
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
||
--color-muted: hsl(var(--muted));
|
||
--color-muted-foreground: hsl(var(--muted-foreground));
|
||
--color-accent: hsl(var(--accent));
|
||
--color-accent-foreground: hsl(var(--accent-foreground));
|
||
--color-destructive: hsl(var(--destructive));
|
||
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
||
--color-success: hsl(var(--success));
|
||
--color-warning: hsl(var(--warning));
|
||
--color-border: hsl(var(--border));
|
||
--color-input: hsl(var(--input));
|
||
--color-ring: hsl(var(--ring));
|
||
|
||
--color-acid-lime: hsl(var(--acid-lime));
|
||
--color-acid-cyan: hsl(var(--acid-cyan));
|
||
--color-acid-magenta: hsl(var(--acid-magenta));
|
||
--color-acid-violet: hsl(var(--acid-violet));
|
||
|
||
--radius-sm: calc(var(--radius) - 4px);
|
||
--radius-md: calc(var(--radius) - 2px);
|
||
--radius-lg: var(--radius);
|
||
--radius-xl: calc(var(--radius) + 4px);
|
||
|
||
--font-sans: "Space Grotesk Variable", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
|
||
--font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
}
|
||
|
||
@layer base {
|
||
* {
|
||
@apply border-border;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
-webkit-font-smoothing: antialiased;
|
||
text-rendering: optimizeLegibility;
|
||
}
|
||
|
||
body {
|
||
@apply min-h-screen bg-background font-sans text-foreground;
|
||
}
|
||
|
||
#root {
|
||
@apply min-h-screen;
|
||
}
|
||
|
||
::selection {
|
||
background: hsl(var(--acid-lime) / 0.28);
|
||
color: hsl(var(--foreground));
|
||
}
|
||
|
||
body::before {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: -1;
|
||
pointer-events: none;
|
||
background:
|
||
linear-gradient(115deg, hsl(var(--acid-lime) / 0.1), transparent 34%),
|
||
linear-gradient(238deg, hsl(var(--acid-cyan) / 0.09), transparent 44%),
|
||
linear-gradient(325deg, hsl(var(--acid-magenta) / 0.07), transparent 42%);
|
||
}
|
||
|
||
body::after {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: -1;
|
||
pointer-events: none;
|
||
background-image:
|
||
linear-gradient(to right, hsl(var(--foreground) / 0.035) 1px, transparent 1px),
|
||
linear-gradient(to bottom, hsl(var(--foreground) / 0.035) 1px, transparent 1px);
|
||
background-size: 56px 56px;
|
||
mask-image: linear-gradient(to bottom, black, transparent 76%);
|
||
}
|
||
}
|
||
|
||
@layer components {
|
||
.card {
|
||
@apply rounded-lg border bg-card text-card-foreground shadow-sm;
|
||
}
|
||
|
||
.btn {
|
||
@apply inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-md px-4 text-sm font-medium whitespace-nowrap transition-colors select-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50;
|
||
}
|
||
.btn-primary {
|
||
@apply bg-primary text-primary-foreground shadow-sm hover:bg-primary/90;
|
||
}
|
||
.btn-secondary {
|
||
@apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80;
|
||
}
|
||
.btn-outline {
|
||
@apply border bg-card shadow-sm hover:bg-accent hover:text-accent-foreground;
|
||
}
|
||
.btn-ghost {
|
||
@apply text-foreground/70 hover:bg-accent hover:text-accent-foreground;
|
||
}
|
||
.btn-destructive {
|
||
@apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90;
|
||
}
|
||
.btn-sm {
|
||
@apply h-8 px-3 text-xs;
|
||
}
|
||
.btn-lg {
|
||
@apply h-10 px-6 text-[0.95rem];
|
||
}
|
||
.btn-icon {
|
||
@apply size-9 p-0;
|
||
}
|
||
|
||
.field {
|
||
@apply flex h-9 w-full rounded-md border border-input bg-background/60 px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50;
|
||
}
|
||
|
||
.label {
|
||
@apply text-sm leading-none font-medium;
|
||
}
|
||
|
||
.badge {
|
||
@apply inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-semibold whitespace-nowrap transition-colors;
|
||
}
|
||
|
||
.acid-text {
|
||
background: linear-gradient(
|
||
100deg,
|
||
hsl(var(--acid-lime)),
|
||
hsl(var(--acid-cyan)) 42%,
|
||
hsl(var(--acid-violet)) 74%,
|
||
hsl(var(--acid-magenta))
|
||
);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.panel {
|
||
@apply rounded-lg border bg-background/70;
|
||
}
|
||
|
||
.focus-ring {
|
||
@apply focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none;
|
||
}
|
||
|
||
.acid-frame {
|
||
position: relative;
|
||
}
|
||
.acid-frame::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
border-radius: inherit;
|
||
padding: 1px;
|
||
background: linear-gradient(
|
||
135deg,
|
||
hsl(var(--acid-lime) / 0.75),
|
||
hsl(var(--acid-cyan) / 0.45) 38%,
|
||
hsl(var(--acid-violet) / 0.18) 68%,
|
||
hsl(var(--acid-magenta) / 0.5)
|
||
);
|
||
-webkit-mask:
|
||
linear-gradient(#000 0 0) content-box,
|
||
linear-gradient(#000 0 0);
|
||
-webkit-mask-composite: xor;
|
||
mask:
|
||
linear-gradient(#000 0 0) content-box,
|
||
linear-gradient(#000 0 0);
|
||
mask-composite: exclude;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.header-line::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
opacity: 0.55;
|
||
pointer-events: none;
|
||
background: linear-gradient(
|
||
90deg,
|
||
hsl(var(--acid-lime)),
|
||
hsl(var(--acid-cyan)) 40%,
|
||
hsl(var(--acid-violet)) 72%,
|
||
hsl(var(--acid-magenta))
|
||
);
|
||
}
|
||
}
|
||
|
||
/* ===== 弹幕 ===== */
|
||
.danmaku-item {
|
||
position: absolute;
|
||
left: 100%;
|
||
white-space: nowrap;
|
||
font-weight: 600;
|
||
font-size: 1rem;
|
||
letter-spacing: 0;
|
||
text-shadow: 0 1px 2px rgb(0 0 0 / 0.9), 0 0 14px rgb(0 0 0 / 0.5);
|
||
animation-name: danmaku-move;
|
||
animation-timing-function: linear;
|
||
animation-fill-mode: forwards;
|
||
will-change: left;
|
||
}
|
||
@keyframes danmaku-move {
|
||
from { left: 100%; }
|
||
to { left: -100%; }
|
||
}
|