291 lines
8.9 KiB
CSS
291 lines
8.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ─── Des polices un peu stylées si vous voulez mon avis ─── */
|
|
@theme {
|
|
--font-sans: 'Zen Kaku Gothic New', 'Yu Gothic', 'Hiragino Sans', system-ui, sans-serif;
|
|
--font-display: 'Shippori Mincho', 'Yu Mincho', Georgia, serif;
|
|
|
|
--color-accent: var(--accent);
|
|
--color-accent-hover: var(--accent-hover);
|
|
--color-accent-muted: var(--accent-muted);
|
|
--color-on-accent: var(--on-accent);
|
|
|
|
--color-sidebar: var(--bg-sidebar);
|
|
--color-main: var(--bg-main);
|
|
--color-card: var(--bg-card);
|
|
--color-hover: var(--bg-hover);
|
|
|
|
--color-border: var(--border);
|
|
--color-border-light: var(--border-light);
|
|
|
|
--color-primary: var(--text-primary);
|
|
--color-secondary: var(--text-secondary);
|
|
--color-muted: var(--text-muted);
|
|
|
|
--color-ok: var(--ok);
|
|
--color-err: var(--err);
|
|
|
|
--radius-card: 14px;
|
|
--radius-field: 10px;
|
|
--radius-poster: 6px;
|
|
|
|
--text-body: 13.5px;
|
|
--text-body--line-height: 1.5;
|
|
--text-meta: 12.5px;
|
|
--text-meta--line-height: 1.45;
|
|
}
|
|
|
|
/* ─── Palette ─── */
|
|
:root {
|
|
--bg-sidebar: #0e0a08;
|
|
--bg-main: #13100c;
|
|
--bg-card: #1d1814;
|
|
--bg-hover: #27221d;
|
|
|
|
--border: #352f2a;
|
|
--border-light: #27221d;
|
|
|
|
--text-primary: #efe9dd;
|
|
--text-secondary: #b8b0a3;
|
|
--text-muted: #948b80;
|
|
|
|
--gold: #f2c44a;
|
|
--ok: #89d298;
|
|
--err: #ea8470;
|
|
--on-accent: #0e0a08;
|
|
|
|
--accent: #f2c44a;
|
|
--accent-hover: color-mix(in srgb, var(--accent) 80%, white);
|
|
--accent-muted: color-mix(in srgb, var(--accent) 14%, transparent);
|
|
}
|
|
|
|
/* ─── Thèmes ─── */
|
|
[data-theme="vermillon"] { --accent: #e8734f; }
|
|
[data-theme="jade"] { --accent: #6fc79a; }
|
|
|
|
/* ─── Base globale ─── */
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
html {
|
|
color-scheme: dark;
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
html, body, #app {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg-main);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
:where(a, button, [role="switch"], summary):focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
|
|
|
|
/* ─── Composants réutilisables ─── */
|
|
@layer components {
|
|
/* Typo */
|
|
.page-title {
|
|
@apply font-display text-[28px] leading-tight font-bold text-primary;
|
|
}
|
|
.section-title {
|
|
@apply font-display text-[21px] leading-snug font-bold text-primary;
|
|
}
|
|
.card-title {
|
|
@apply text-[15px] font-bold text-primary;
|
|
}
|
|
.tag-label {
|
|
@apply text-[10.5px] font-bold uppercase tracking-[0.14em] text-muted;
|
|
}
|
|
|
|
/* Boutons */
|
|
.btn-primary,
|
|
.btn-secondary,
|
|
.btn-ghost,
|
|
.btn-danger {
|
|
@apply inline-flex items-center justify-center gap-2 h-10 px-[18px] rounded-full text-body whitespace-nowrap
|
|
transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
.btn-primary {
|
|
@apply px-5 bg-accent text-on-accent font-bold hover:bg-accent-hover;
|
|
}
|
|
.btn-secondary {
|
|
@apply border border-border text-primary font-semibold hover:bg-hover;
|
|
}
|
|
.btn-ghost {
|
|
@apply border border-border-light text-secondary font-medium hover:bg-hover hover:text-primary;
|
|
}
|
|
.btn-danger {
|
|
@apply border border-err/30 text-err font-semibold hover:bg-err/10;
|
|
}
|
|
.btn-icon {
|
|
@apply inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-full border border-border-light text-secondary
|
|
transition-colors cursor-pointer hover:bg-hover hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
.btn-sm {
|
|
@apply h-8 px-3.5 text-meta;
|
|
}
|
|
.btn-icon.btn-sm {
|
|
@apply w-8 px-0;
|
|
}
|
|
|
|
/* Cartes et champs */
|
|
.card {
|
|
@apply bg-card rounded-card px-5 py-4;
|
|
}
|
|
|
|
.field-label {
|
|
@apply block text-meta text-secondary;
|
|
}
|
|
|
|
.field {
|
|
@apply w-full bg-main border border-border-light text-primary text-body px-3.5 py-2.5 rounded-field
|
|
placeholder:text-muted outline-none focus:border-accent transition-colors;
|
|
}
|
|
|
|
/* Pastilles d'état */
|
|
.pill {
|
|
@apply inline-flex items-center gap-[7px] h-6 px-[11px] rounded-full border border-transparent
|
|
text-[11.5px] font-bold whitespace-nowrap;
|
|
}
|
|
.pill-ok { @apply border-ok/30 text-ok; }
|
|
.pill-active { @apply bg-accent-muted text-accent; }
|
|
.pill-wait { @apply border-accent/35 text-accent; }
|
|
.pill-neutral { @apply border-border text-secondary; }
|
|
.pill-err { @apply border-err/35 text-err; }
|
|
.pill-muted { @apply border-border-light text-muted; }
|
|
|
|
/* Filtres et onglets compteurs */
|
|
.chip {
|
|
@apply inline-flex items-center gap-2 h-[34px] px-3.5 rounded-full border border-border-light text-[13px] font-medium
|
|
text-secondary whitespace-nowrap transition-colors cursor-pointer hover:text-primary hover:bg-hover;
|
|
}
|
|
.chip-count {
|
|
@apply text-muted;
|
|
}
|
|
.chip.is-active {
|
|
@apply border-primary bg-primary text-on-accent font-bold hover:bg-primary;
|
|
}
|
|
.chip.is-active .chip-count {
|
|
@apply text-on-accent/55 font-medium;
|
|
}
|
|
.chip-row {
|
|
@apply flex items-center gap-1.5 flex-wrap;
|
|
}
|
|
.chip-row > * {
|
|
@apply shrink-0;
|
|
}
|
|
/* Sur mobile, les filtres défilent sur une ligne jusqu'aux bords de l'écran */
|
|
@media (width < 48rem) {
|
|
.chip-row {
|
|
@apply flex-nowrap overflow-x-auto -mx-4 px-4 -my-1 py-1;
|
|
scrollbar-width: none;
|
|
}
|
|
}
|
|
|
|
/* Bascule */
|
|
.switch {
|
|
@apply relative inline-flex shrink-0 w-[46px] h-[26px] p-[3px] rounded-full bg-hover transition-colors cursor-pointer
|
|
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
.switch-knob {
|
|
@apply block w-5 h-5 rounded-full bg-muted transition-transform duration-200;
|
|
}
|
|
.switch[aria-checked="true"] {
|
|
@apply bg-accent;
|
|
}
|
|
.switch[aria-checked="true"] .switch-knob {
|
|
@apply translate-x-5 bg-on-accent;
|
|
}
|
|
|
|
/* Sélecteur */
|
|
.segmented {
|
|
@apply inline-flex items-center gap-0.5 h-[34px] p-[3px] rounded-full border border-border-light;
|
|
}
|
|
.segmented-item {
|
|
@apply inline-flex items-center h-[26px] px-3.5 rounded-full text-meta text-secondary whitespace-nowrap
|
|
transition-colors cursor-pointer hover:text-primary;
|
|
}
|
|
.segmented-item.is-active {
|
|
@apply bg-accent text-on-accent font-bold hover:text-on-accent;
|
|
}
|
|
.segmented-lg {
|
|
@apply h-[38px];
|
|
}
|
|
.segmented-lg .segmented-item {
|
|
@apply h-[30px] px-4 text-[13px];
|
|
}
|
|
|
|
/* Barres de progression */
|
|
.progress {
|
|
@apply h-[3px] rounded-[2px] bg-hover overflow-hidden;
|
|
}
|
|
.progress-bar {
|
|
@apply h-full rounded-[2px] bg-accent transition-[width] duration-500;
|
|
}
|
|
|
|
/* Menus déroulants et pop */
|
|
.menu {
|
|
@apply bg-card border border-border rounded-card p-1.5 shadow-[0_16px_40px_rgb(0_0_0/0.5)] flex flex-col gap-0.5;
|
|
}
|
|
.menu-item {
|
|
@apply flex items-center gap-2.5 w-full min-h-9 px-3 py-2 rounded-lg text-left text-body text-secondary
|
|
transition-colors cursor-pointer hover:bg-hover hover:text-primary disabled:opacity-40 disabled:cursor-not-allowed;
|
|
}
|
|
.modal-backdrop {
|
|
@apply fixed inset-0 z-50 flex items-center justify-center px-4 bg-sidebar/75;
|
|
}
|
|
.modal {
|
|
@apply w-full bg-card border border-border rounded-card p-6 flex flex-col gap-5 shadow-[0_24px_60px_rgb(0_0_0/0.55)];
|
|
}
|
|
|
|
|
|
.stamp-new {
|
|
@apply inline-block px-2 pt-[3px] pb-[2px] border-2 border-accent bg-sidebar/85 text-accent
|
|
font-display text-[11px] font-bold leading-none tracking-[0.12em] -rotate-6;
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
.btn-primary,
|
|
.btn-secondary,
|
|
.btn-ghost,
|
|
.btn-danger {
|
|
@apply h-11;
|
|
}
|
|
.btn-icon {
|
|
@apply w-11 h-11;
|
|
}
|
|
.btn-sm {
|
|
@apply h-10;
|
|
}
|
|
.btn-icon.btn-sm {
|
|
@apply w-10;
|
|
}
|
|
.chip {
|
|
@apply h-10;
|
|
}
|
|
.menu-item {
|
|
@apply min-h-11;
|
|
}
|
|
}
|
|
|
|
.dot-grid {
|
|
@apply absolute inset-0 pointer-events-none;
|
|
background-image: radial-gradient(color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1.5px);
|
|
background-size: 7px 7px;
|
|
mask-image: linear-gradient(var(--dot-grid-angle, 90deg), #000 0%, transparent var(--dot-grid-fade, 55%));
|
|
}
|
|
}
|