142 lines
3.3 KiB
CSS
142 lines
3.3 KiB
CSS
@import './tokens.css';
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html, body, #root {
|
|
@apply h-full;
|
|
}
|
|
body {
|
|
@apply antialiased;
|
|
background-color: rgb(var(--bg));
|
|
color: white;
|
|
font-family: 'Segoe UI', 'Inter', sans-serif;
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
body {
|
|
color: black;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.container {
|
|
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
|
|
}
|
|
.card {
|
|
@apply rounded-2xl backdrop-blur-md border p-6;
|
|
background-color: rgb(var(--surface));
|
|
border-color: rgb(var(--border));
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.btn {
|
|
@apply inline-flex items-center justify-center rounded-xl px-4 py-2 font-semibold transition focus:outline-none focus:ring-2;
|
|
}
|
|
.btn-primary {
|
|
background-color: rgb(var(--accent));
|
|
color: rgb(var(--accent-contrast));
|
|
@apply focus:ring-[color:rgb(var(--ring)/0.6)];
|
|
}
|
|
.btn-ghost {
|
|
@apply bg-transparent text-white hover:bg-white/10 focus:ring-[color:rgb(var(--ring)/0.6)];
|
|
}
|
|
input, select, textarea {
|
|
@apply w-full rounded-lg px-3 py-2 bg-transparent focus:outline-none focus:ring-2;
|
|
background-color: rgb(var(--surface));
|
|
border: 1px solid rgb(var(--border));
|
|
color: white;
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
input, select, textarea {
|
|
color: black;
|
|
}
|
|
}
|
|
label {
|
|
@apply block text-sm font-medium mb-1;
|
|
color: rgb(var(--muted));
|
|
}
|
|
.subtle {
|
|
color: rgb(var(--muted));
|
|
}
|
|
.header {
|
|
@apply sticky top-0 z-10 backdrop-blur-md border-b shadow-sm;
|
|
background-color: rgb(var(--surface));
|
|
border-color: rgb(var(--border));
|
|
}
|
|
.header-inner {
|
|
@apply container flex items-center justify-between py-3;
|
|
}
|
|
.header-title {
|
|
@apply text-sm font-semibold;
|
|
}
|
|
.flag-selector {
|
|
@apply flex justify-center items-center gap-4 mb-4;
|
|
}
|
|
.flag-option {
|
|
@apply flex flex-col items-center gap-2 rounded-md px-2 py-1 text-xs font-medium text-white/80 transition;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
.flag-option img {
|
|
@apply w-20 rounded-md transition-transform shadow;
|
|
}
|
|
.flag-option:hover img {
|
|
@apply scale-105;
|
|
}
|
|
.flag-option.selected {
|
|
@apply ring-2 ring-accent text-white;
|
|
}
|
|
.dashboard {
|
|
@apply grid gap-6 mt-6 grid-cols-1;
|
|
}
|
|
.side-cards {
|
|
@apply grid gap-6 md:grid-cols-3;
|
|
}
|
|
.preview-card {
|
|
@apply bg-white/60 dark:bg-neutral-800/60 backdrop-blur-md rounded-2xl p-8 text-center;
|
|
}
|
|
.toast {
|
|
@apply fixed bottom-6 right-6 bg-neutral-900 text-white px-4 py-3 rounded-lg shadow-lg;
|
|
}
|
|
.stat-card {
|
|
@apply text-center;
|
|
}
|
|
.stat-value {
|
|
@apply text-3xl font-bold text-accent;
|
|
}
|
|
.stat-label {
|
|
@apply mt-1 text-sm text-gray-500 dark:text-gray-400;
|
|
}
|
|
.button-row {
|
|
@apply flex gap-2 flex-wrap mt-4;
|
|
}
|
|
.plate-block {
|
|
@apply mb-6 pb-6 border-b border-gray-200 last:border-b-0 flex flex-col gap-4 md:flex-row md:gap-8;
|
|
}
|
|
.mt {
|
|
@apply mt-4;
|
|
}
|
|
.mb {
|
|
@apply mb-2;
|
|
}
|
|
.mb-lg {
|
|
@apply mb-6;
|
|
}
|
|
.ml {
|
|
@apply ml-2;
|
|
}
|
|
.form-row {
|
|
@apply flex flex-col gap-2 mb-2;
|
|
}
|
|
.form-row.checkbox {
|
|
@apply flex-row items-center;
|
|
}
|
|
.start-container {
|
|
@apply flex items-center justify-center h-[calc(100vh-4rem)];
|
|
}
|
|
.start-card {
|
|
@apply flex flex-col gap-4 w-full max-w-xs;
|
|
}
|
|
}
|