77 lines
1.7 KiB
CSS
77 lines
1.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--bg: #0c1117;
|
|
--bg-elevated: #151b24;
|
|
--bg-panel: #1a222e;
|
|
--border: #2a3544;
|
|
--text: #e8eef6;
|
|
--text-muted: #8b9bb0;
|
|
--accent: #3d8bfd;
|
|
--accent-soft: rgba(61, 139, 253, 0.15);
|
|
--danger: #f07178;
|
|
--success: #7fd992;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#__nuxt {
|
|
min-height: 100%;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', 'Malgun Gothic', system-ui, sans-serif;
|
|
background-image:
|
|
radial-gradient(ellipse 80% 50% at 20% -10%, rgba(61, 139, 253, 0.18), transparent),
|
|
radial-gradient(ellipse 60% 40% at 90% 0%, rgba(127, 217, 146, 0.08), transparent),
|
|
linear-gradient(180deg, #0c1117 0%, #0a0e14 100%);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
@layer components {
|
|
.btn {
|
|
@apply inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition;
|
|
}
|
|
|
|
.panel {
|
|
@apply rounded-lg border backdrop-blur;
|
|
border-color: var(--border);
|
|
background-color: color-mix(in srgb, var(--bg-panel) 90%, transparent);
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply btn text-white hover:brightness-110 disabled:opacity-50;
|
|
background-color: var(--accent);
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply btn bg-transparent hover:brightness-125;
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply btn text-white hover:brightness-110;
|
|
background-color: color-mix(in srgb, var(--danger) 90%, transparent);
|
|
}
|
|
|
|
.input {
|
|
@apply w-full rounded-md px-3 py-2 text-sm outline-none;
|
|
border: 1px solid var(--border);
|
|
background-color: var(--bg-elevated);
|
|
color: var(--text);
|
|
}
|
|
|
|
.input:focus {
|
|
box-shadow: 0 0 0 2px var(--accent);
|
|
}
|
|
|
|
.input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
}
|