curo1305
07c2428609
- Dark mode text-primary: slate-200 → slate-300 (#CBD5E1) - Ghost button: add border + explicit text colour so it is always visible as a button (not just on hover) - Outline button: stronger hover border for more feedback - button:not([class]): global baseline for unstyled <button> elements (Tailwind Preflight strips all native appearance; this restores a visible border, bg-surface fill, and rounded corners so buttons in older pages are always recognisable) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
93 lines
3.6 KiB
CSS
93 lines
3.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ── Design tokens ──────────────────────────────────────────────────────────
|
|
Colors are stored as RGB triplets so Tailwind's opacity modifier syntax
|
|
(e.g. bg-primary/10) works correctly.
|
|
────────────────────────────────────────────────────────────────────────── */
|
|
|
|
:root {
|
|
/* Brand / interactive */
|
|
--color-primary: 37 99 235; /* #2563EB blue-600 */
|
|
--color-primary-hover: 29 78 216; /* #1D4ED8 blue-700 */
|
|
--color-accent: 234 179 8; /* #EAB308 yellow-500 */
|
|
--color-accent-hover: 202 138 4; /* #CA8A04 yellow-600 */
|
|
|
|
/* Layout */
|
|
--color-background: 248 250 252; /* #F8FAFC slate-50 */
|
|
--color-surface: 255 255 255; /* #FFFFFF */
|
|
--color-border: 226 232 240; /* #E2E8F0 slate-200 */
|
|
|
|
/* Text */
|
|
--color-text-primary: 15 23 42; /* #0F172A slate-900 */
|
|
--color-text-muted: 100 116 139; /* #64748B slate-500 */
|
|
|
|
/* Shape */
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
/* Brand / interactive */
|
|
--color-primary: 59 130 246; /* #3B82F6 blue-500 */
|
|
--color-primary-hover: 37 99 235; /* #2563EB blue-600 */
|
|
--color-accent: 250 204 21; /* #FACC15 yellow-400 */
|
|
--color-accent-hover: 234 179 8; /* #EAB308 yellow-500 */
|
|
|
|
/* Layout */
|
|
--color-background: 15 23 42; /* #0F172A slate-900 */
|
|
--color-surface: 30 41 59; /* #1E293B slate-800 */
|
|
--color-border: 51 65 85; /* #334155 slate-700 */
|
|
|
|
/* Text */
|
|
--color-text-primary: 203 213 225; /* #CBD5E1 slate-300 */
|
|
--color-text-muted: 148 163 184; /* #94A3B8 slate-400 */
|
|
}
|
|
|
|
/* ── Base resets ─────────────────────────────────────────────────────────── */
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* ── Unstyled <button> elements ─────────────────────────────────────────────
|
|
Tailwind Preflight strips all native button appearance. Any <button> that
|
|
has no Tailwind className (i.e. the older inline-styled pages) gets a
|
|
visible baseline so it is always recognisable as a button.
|
|
────────────────────────────────────────────────────────────────────────── */
|
|
|
|
button:not([class]) {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid rgb(var(--color-border));
|
|
border-radius: var(--radius);
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
font-weight: 500;
|
|
background-color: rgb(var(--color-surface));
|
|
color: rgb(var(--color-text-primary));
|
|
cursor: pointer;
|
|
transition: background-color 150ms, border-color 150ms;
|
|
}
|
|
|
|
button:not([class]):hover:not(:disabled) {
|
|
background-color: rgb(var(--color-text-muted) / 0.12);
|
|
border-color: rgb(var(--color-text-muted) / 0.5);
|
|
}
|
|
|
|
button:not([class]):disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|