/* =========================================================================== Nowtilus — couche de design --------------------------------------------------------------------------- Se pose PAR-DESSUS MudBlazor.min.css : on ne remplace pas le design system, on retravaille ses surfaces. Les couleurs de base viennent de NowtilusTheme.cs. Parti pris : PLAT et OPAQUE. Pas de transparence, pas de flou, pas de dégradé, pas d'ombre portée, pas de nappe de couleur en fond. Ce qui sépare deux surfaces, c'est un écart de valeur et un filet ; ce qui attire l'œil, c'est la couleur d'accent, et elle ne sert qu'à porter du sens (statut, sélection) — jamais à décorer. Les angles sont en revanche généreux : 16px sur les surfaces, et des pilules complètes pour les contrôles de filtre et de recherche. Deux thèmes. Tout ce qui change entre clair et sombre passe par une variable définie dans les deux blocs de la § 1 — les règles qui suivent ne connaissent que les variables, jamais une couleur en dur. `data-theme` est posé sur par App.razor (lu depuis le cookie, donc juste au premier rendu) puis mis à jour par browser.js au clic sur l'interrupteur. =========================================================================== */ /* --------------------------------------------------------------------------- 1. Jetons --------------------------------------------------------------------------- */ :root, :root[data-theme="dark"] { --page-bg: #131316; /* La barre s'écarte toujours du fond de page, vers le bas en sombre (12 < 19 < 28 : barre, page, carte) et vers le haut en clair. En clair elle atteint le même blanc que les cartes ; ça reste lisible parce qu'elle est ancrée en haut et porte un filet inférieur — c'est un cadre, pas une surface flottante. */ --appbar-bg: #0C0C0E; --surface: #1C1C20; /* Creux dans la page : champs de saisie, puces inactives, en-têtes de colonne. Toujours plus proche du fond que la carte qui le contient. */ --surface-muted: #232328; --surface-border: rgba(255, 255, 255, 0.07); --control-border: rgba(255, 255, 255, 0.13); --hover-tint: rgba(255, 255, 255, 0.045); --hover-tint-strong: rgba(255, 255, 255, 0.075); --scrollbar-thumb: rgba(255, 255, 255, 0.15); /* L'ambre de marque. Lisible tel quel sur fond sombre. */ --accent: 237, 157, 40; --error-ui-bg: #3A2F14; --error-ui-text: #FDF3D8; } :root[data-theme="light"] { --page-bg: #F4F2ED; --appbar-bg: #FFFFFF; --surface: #FFFFFF; --surface-muted: #EDEBE5; --surface-border: rgba(28, 24, 17, 0.07); --control-border: rgba(28, 24, 17, 0.13); --hover-tint: rgba(28, 24, 17, 0.04); --hover-tint-strong: rgba(28, 24, 17, 0.07); --scrollbar-thumb: rgba(28, 24, 17, 0.18); /* Ambre nettement plus foncé : le #ED9D28 tombe sous 3:1 sur fond crème. Sert aux fonds teintés et aux bordures d'accent — la couleur de texte, elle, vient de --mud-palette-primary (voir NowtilusTheme.cs). */ --accent: 185, 118, 12; --error-ui-bg: #FFF6DC; --error-ui-text: #4A3A0C; } /* Communs. */ :root { --radius-surface: 16px; --radius-control: 12px; --radius-pill: 999px; } /* --------------------------------------------------------------------------- 2. Le fond --------------------------------------------------------------------------- */ /* Aplat, un point c'est tout : ni ::before dégradé, ni grain. */ body { background: var(--page-bg) !important; } /* --------------------------------------------------------------------------- 3. Surfaces --------------------------------------------------------------------------- */ /* Opaques, sans ombre. La carte se détache par sa valeur — plus claire que le fond en thème clair, plus claire aussi en sombre — et par un filet. */ .mud-paper, .mud-card { background: var(--surface) !important; border: 1px solid var(--surface-border); border-radius: var(--radius-surface) !important; box-shadow: none !important; } /* --- Tuiles interactives -------------------------------------------------- */ /* Seul le bord bouge au survol, donc seul le bord est en transition. Lister background-color ici n'était pas juste inutile : au changement de thème Chrome se mettait à interpoler le fond entre les deux palettes et restait bloqué à mi-chemin (tuiles grises en thème sombre). */ .nw-tile { transition: border-color 0.15s linear; } .nw-tile:hover { border-color: rgba(var(--accent), 0.55) !important; } /* --- Surfaces posées au-dessus du contenu -------------------------------- */ /* Seules surfaces à porter une ombre, pour une raison structurelle : elles flottent au-dessus de la page et doivent se lire comme telles. */ .mud-popover, .mud-dialog, .mud-menu-popover, .mud-snackbar { background: var(--surface) !important; border: 1px solid var(--surface-border) !important; border-radius: var(--radius-surface) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important; } /* Réaffirmer un fond n'emporte pas la couleur de texte que MudBlazor avait calculée pour le fond d'origine, et ces deux-là comptaient dessus : une infobulle est blanche sur gris foncé (`.mud-tooltip-default` → `--mud-palette-dark-text`), un snackbar blanc sur aplat de sévérité (`.mud-alert-filled-*` → `--mud-palette-*-text`). Les repeindre en `--surface` laissait donc du blanc sur blanc en thème clair ; en sombre la surface est foncée, le blanc passait par chance et masquait le bug. La couleur de texte suit désormais le fond, comme partout ailleurs. (NOW-29) */ .mud-tooltip.mud-tooltip-default, .mud-snackbar, .mud-snackbar .mud-snackbar-content-message { color: var(--mud-palette-text-primary) !important; } /* Le fond neutralisé, la sévérité n'a plus qu'un porteur : l'icône. Elle prend donc la couleur pleine, là où elle n'était qu'un blanc à 90 % d'opacité. */ .mud-snackbar.mud-alert-filled-info .mud-snackbar-icon, .mud-snackbar.mud-alert-text-info .mud-snackbar-icon, .mud-snackbar.mud-alert-outlined-info .mud-snackbar-icon { color: var(--mud-palette-info) !important; } .mud-snackbar.mud-alert-filled-success .mud-snackbar-icon, .mud-snackbar.mud-alert-text-success .mud-snackbar-icon, .mud-snackbar.mud-alert-outlined-success .mud-snackbar-icon { color: var(--mud-palette-success) !important; } .mud-snackbar.mud-alert-filled-warning .mud-snackbar-icon, .mud-snackbar.mud-alert-text-warning .mud-snackbar-icon, .mud-snackbar.mud-alert-outlined-warning .mud-snackbar-icon { color: var(--mud-palette-warning) !important; } .mud-snackbar.mud-alert-filled-error .mud-snackbar-icon, .mud-snackbar.mud-alert-text-error .mud-snackbar-icon, .mud-snackbar.mud-alert-outlined-error .mud-snackbar-icon { color: var(--mud-palette-error) !important; } /* Opacité d'origine (0.9) annulée : à pleine couleur sur une surface claire, elle délavait l'icône au lieu de l'adoucir. */ .mud-snackbar .mud-snackbar-icon { opacity: 1 !important; } /* Le bouton de fermeture hérite de `color: inherit` (voir `.mud-snackbar-content-action > button`) : il suit donc le texte, pas la sévérité — discret, comme il doit l'être. */ .mud-overlay .mud-overlay-scrim { background: rgba(10, 9, 7, 0.45) !important; } /* --- Barre d'application et navigation ------------------------------------ */ /* Décalée du fond dans la direction opposée aux cartes (voir --appbar-bg) : c'est un cadre, pas du contenu. Le filet inférieur reste, il porte la séparation là où l'écart de valeur est le plus ténu. */ .mud-appbar { background: var(--appbar-bg) !important; border: none !important; border-bottom: 1px solid var(--surface-border) !important; border-radius: 0 !important; box-shadow: none !important; } .mud-drawer { background: var(--surface) !important; border: none !important; border-right: 1px solid var(--surface-border) !important; border-radius: 0 !important; box-shadow: none !important; } /* MudBlazor pose `height: 100%` sur le tiroir temporaire. Un pourcentage ne vaut la hauteur de la fenêtre que tant que le bloc conteneur est bien la fenêtre : il suffit qu'un ancêtre porte transform/filter/contain pour qu'il devienne le bloc conteneur d'un élément `fixed`, et les 100 % se résolvent alors contre `.mud-layout`, dont la hauteur retombe sur celle du contenu faute de hauteur explicite sur html/body. D'où un tiroir tronqué sur grand écran (page plus courte que la fenêtre) et correct sur mobile (contenu qui dépasse). Les unités de fenêtre ne dépendent d'aucun ancêtre ; `dvh` suit en plus les barres d'outils rétractables des navigateurs mobiles, `vh` reste le repli pour ceux qui ignorent `dvh`. `position`/`top` sont réaffirmés pour couvrir aussi le cas où `mud-drawer-fixed` viendrait à manquer. (NOW-28) */ .mud-drawer.mud-drawer-temporary.mud-drawer-pos-left, .mud-drawer.mud-drawer-temporary.mud-drawer-pos-right { position: fixed !important; top: 0 !important; height: 100vh !important; height: 100dvh !important; max-height: none !important; } .mud-nav-link { border-radius: var(--radius-control) !important; margin: 2px 10px; transition: background-color 0.15s linear; } .mud-nav-link:hover { background: var(--hover-tint-strong) !important; } /* Fond teinté + barre franche, comme la puce de filtre active de la maquette. */ .mud-nav-link.active { background: rgba(var(--accent), 0.13) !important; box-shadow: inset 3px 0 0 rgb(var(--accent)); color: var(--mud-palette-primary) !important; } .mud-nav-link.active .mud-nav-link-icon { color: var(--mud-palette-primary) !important; } /* --------------------------------------------------------------------------- 4. Contrôles --------------------------------------------------------------------------- */ .mud-button-root { border-radius: var(--radius-control) !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; font-weight: 600; } /* Creux, pas relief : même traitement que les champs. */ .mud-button-outlined { background: var(--surface-muted) !important; border-color: var(--control-border) !important; } .mud-icon-button { border-radius: var(--radius-control) !important; transition: background-color 0.15s linear; } .mud-icon-button:hover { background: var(--hover-tint-strong) !important; } /* Champs de saisie : creux plein dans la surface, sans bord marqué — c'est le contraste de valeur qui les délimite, comme la barre de recherche de la maquette. */ .mud-input.mud-input-outlined, .mud-input.mud-input-filled { background: var(--surface-muted) !important; border-radius: var(--radius-control) !important; } .mud-input-outlined .mud-input-outlined-border { border-radius: var(--radius-control) !important; border-color: transparent !important; } .mud-input.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--control-border) !important; } .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border { border-color: rgb(var(--accent)) !important; border-width: 1px !important; } .mud-input-control .mud-input-slot { border-radius: var(--radius-control) !important; } /* Pastilles : pilules pleines, comme les filtres de la maquette. */ .mud-chip { border-radius: var(--radius-pill) !important; font-weight: 500; } .mud-chip.mud-chip-outlined { background: var(--surface-muted) !important; border-color: var(--control-border) !important; } .mud-list-item { border-radius: var(--radius-control) !important; margin: 2px 4px; transition: background-color 0.15s linear; } .mud-list-item:hover { background: var(--hover-tint) !important; } .mud-alert { border-radius: var(--radius-surface) !important; } .mud-table { background: transparent !important; } .mud-table-row:hover { background: var(--hover-tint) !important; } /* --------------------------------------------------------------------------- 5. Typographie --------------------------------------------------------------------------- */ .mud-typography-h4, .mud-typography-h5 { letter-spacing: -0.025em; font-weight: 700; } /* Titre de page : la présence vient de la graisse et du crénage serré. */ .nw-page-title { font-size: clamp(1.85rem, 4.5vw, 2.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; color: var(--mud-palette-text-primary); margin: 0; } .nw-wordmark { font-weight: 700; letter-spacing: -0.02em; color: var(--mud-palette-text-primary); } .nw-page-subtitle { color: var(--mud-palette-text-secondary); font-size: 0.95rem; margin-top: 0.35rem; } .mud-divider { border-color: var(--surface-border) !important; } /* --------------------------------------------------------------------------- 6. Page de connexion (rendu statique : pas de composants Mud interactifs, les champs sont des stylés à la main — voir Web/CLAUDE.md) --------------------------------------------------------------------------- */ .plain-input { background: var(--surface-muted) !important; border: 1px solid transparent !important; border-radius: var(--radius-control) !important; color: var(--mud-palette-text-primary) !important; padding: 0.7rem 0.9rem; transition: border-color 0.15s linear; } .plain-input::placeholder { color: var(--mud-palette-text-disabled); } .plain-input:focus { border-color: rgb(var(--accent)) !important; box-shadow: none !important; } /* Chrome peint l'autofill en bleu clair via un fond interne que `background` ne peut pas atteindre — d'où le remplissage d'ombre, seul moyen de garder le champ à sa couleur une fois le mot de passe pré-rempli. */ .plain-input:-webkit-autofill, .plain-input:-webkit-autofill:hover, .plain-input:-webkit-autofill:focus, .mud-input-slot:-webkit-autofill, .mud-input-slot:-webkit-autofill:hover, .mud-input-slot:-webkit-autofill:focus { -webkit-text-fill-color: var(--mud-palette-text-primary) !important; -webkit-box-shadow: 0 0 0 1000px var(--surface-muted) inset !important; box-shadow: 0 0 0 1000px var(--surface-muted) inset !important; caret-color: var(--mud-palette-text-primary); /* Sans ça Chrome ré-anime son fond bleu à chaque focus. */ transition: background-color 100000s ease-in-out 0s; } /* --------------------------------------------------------------------------- 7. Détails --------------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-pill); border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent), 0.55); background-clip: content-box; } ::selection { background: rgba(var(--accent), 0.28); } #blazor-error-ui { background: var(--error-ui-bg) !important; border-top: 1px solid rgb(var(--accent)); color: var(--error-ui-text); } /* Le temps d'un basculement de thème, plus aucune transition : toute propriété animée dont la valeur vient d'une variable de thème serait interpolée entre les deux palettes, et Chrome peut se figer en cours d'interpolation. Posé et retiré par setTheme() dans browser.js. */ :root[data-theme-switching] *, :root[data-theme-switching] *::before, :root[data-theme-switching] *::after { transition: none !important; } @media (prefers-reduced-motion: reduce) { .nw-tile, .mud-nav-link, .mud-icon-button, .mud-list-item, .plain-input { transition: none; } }