86 lines
1.7 KiB
CSS
86 lines
1.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--c-base: 250 250 250;
|
|
--c-surface: 255 255 255;
|
|
--c-raised: 245 245 245;
|
|
--c-edge: 229 229 229;
|
|
--c-ink: 23 23 23;
|
|
--c-muted: 115 115 115;
|
|
--c-accent: 23 23 23;
|
|
--c-accent-strong: 10 10 10;
|
|
--c-danger: 220 38 38;
|
|
--c-ok: 22 163 74;
|
|
}
|
|
|
|
.dark {
|
|
--c-base: 10 10 10;
|
|
--c-surface: 23 23 23;
|
|
--c-raised: 38 38 38;
|
|
--c-edge: 64 64 64;
|
|
--c-ink: 250 250 250;
|
|
--c-muted: 163 163 163;
|
|
--c-accent: 250 250 250;
|
|
--c-accent-strong: 229 229 229;
|
|
--c-danger: 248 113 113;
|
|
--c-ok: 74 222 128;
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
body {
|
|
@apply bg-base text-ink font-sans;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
::selection {
|
|
background: rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.dark ::selection {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
summary {
|
|
list-style: none;
|
|
}
|
|
|
|
summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.card {
|
|
@apply rounded-lg border border-edge bg-surface;
|
|
}
|
|
|
|
.btn {
|
|
@apply inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium
|
|
transition-colors disabled:cursor-not-allowed disabled:opacity-50;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-accent text-surface hover:bg-accent-strong;
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply border border-edge bg-surface text-ink hover:bg-raised;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply border border-edge bg-surface text-danger hover:border-danger/40;
|
|
}
|
|
|
|
.field {
|
|
@apply w-full rounded-md border border-edge bg-surface px-3 py-2.5 text-sm text-ink
|
|
placeholder:text-muted outline-none transition-colors focus:border-ink;
|
|
}
|
|
}
|