h1:focus { outline: none; } /* Champs numeriques de filtre (montant min/max) : pas de fleches de spinner natives, juste un champ simple ou l'on tape un montant. */ input[type="number"] { appearance: textfield; -moz-appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Cache la scrollbar d'un conteneur tout en gardant le scroll fonctionnel (ex: la liste de transactions, qui a deja son propre bloc visuel - pas besoin d'une barre en plus). */ .hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .hide-scrollbar::-webkit-scrollbar { display: none; } /* ===== Base commune a toutes les surfaces "glass" ===== Selecteur par attribut (contains "theme-") pour ne pas avoir a re-lister chaque couleur a chaque ajout : ces deux regles servent aussi bien aux .theme-{couleur} ci-dessous qu'a .theme-brand (voir brand.css). Le pseudo-element ::before porte le reflet. */ [class*="theme-"] { position: relative; isolation: isolate; } [class*="theme-"]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } /* ===== Couleurs de categorie switchables (metal <-> aurora) ===== .theme-{couleur} (rouge/vert/cyan/violet/orange/rose) est la classe a utiliser dans le markup - elle suit le meme reglage global que .theme-brand (voir brand.css) : change data-theme-style sur dans index.html ("metal" ou "aurora") et TOUTES les surfaces de l'appli basculent ensemble (cartes Depenses/Revenus, KPI du dashboard, icones Features/Securite, navbar...). Ajouter une couleur = ajouter ses variables --{couleur}-bg-{technique} dans :root, les mapper dans les 2 blocs html[data-theme-style], et ajouter sa ligne .theme-{couleur}. */ :root { --metal-border: 1px solid rgb(255 255 255 / 18%); --metal-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), inset 0 -30px 40px -25px rgb(0 0 0 / 60%), 0 25px 45px -20px rgb(0 0 0 / 60%); --metal-sheen: linear-gradient(100deg, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 0%) 20%, rgb(255 255 255 / 0%) 80%, rgb(255 255 255 / 8%) 100%); --metal-backdrop: none; --aurora-border: 1px solid rgb(255 255 255 / 30%); --aurora-inset-top: inset 0 1px 0 rgb(255 255 255 / 35%); --aurora-backdrop: blur(18px) saturate(180%); --aurora-sheen: none; --red-bg-metal: linear-gradient(160deg, #450a0a 0%, #991b1b 45%, #2a0505 100%); --red-bg-aurora: radial-gradient(120% 100% at 0% 0%, rgb(248 113 113 / 75%), transparent 55%), radial-gradient(120% 100% at 100% 0%, rgb(251 146 60 / 55%), transparent 55%), radial-gradient(120% 120% at 50% 100%, rgb(236 72 153 / 55%), transparent 60%), linear-gradient(160deg, rgb(153 27 27 / 50%), rgb(69 10 10 / 55%)); --red-shadow-aurora-tail: 0 20px 40px -18px rgb(153 27 27 / 55%); --green-bg-metal: linear-gradient(160deg, #032b16 0%, #0f6a34 45%, #021f10 100%); --green-bg-aurora: radial-gradient(120% 100% at 0% 0%, rgb(52 211 153 / 75%), transparent 55%), radial-gradient(120% 100% at 100% 0%, rgb(45 212 191 / 55%), transparent 55%), radial-gradient(120% 120% at 50% 100%, rgb(132 204 22 / 45%), transparent 60%), linear-gradient(160deg, rgb(6 95 70 / 50%), rgb(6 60 45 / 55%)); --green-shadow-aurora-tail: 0 20px 40px -18px rgb(6 95 70 / 55%); --cyan-bg-metal: linear-gradient(160deg, #083344 0%, #155e75 45%, #041d28 100%); --cyan-bg-aurora: radial-gradient(120% 100% at 0% 0%, rgb(34 211 238 / 75%), transparent 55%), radial-gradient(120% 100% at 100% 0%, rgb(45 212 191 / 55%), transparent 55%), radial-gradient(120% 120% at 50% 100%, rgb(14 165 233 / 55%), transparent 60%), linear-gradient(160deg, rgb(8 145 178 / 50%), rgb(8 51 68 / 55%)); --cyan-shadow-aurora-tail: 0 20px 40px -18px rgb(8 145 178 / 55%); --violet-bg-metal: linear-gradient(160deg, #2e1065 0%, #5b21b6 45%, #1a0640 100%); --violet-bg-aurora: radial-gradient(120% 100% at 0% 0%, rgb(167 139 250 / 75%), transparent 55%), radial-gradient(120% 100% at 100% 0%, rgb(232 121 249 / 55%), transparent 55%), radial-gradient(120% 120% at 50% 100%, rgb(99 102 241 / 55%), transparent 60%), linear-gradient(160deg, rgb(91 33 182 / 50%), rgb(46 16 101 / 55%)); --violet-shadow-aurora-tail: 0 20px 40px -18px rgb(91 33 182 / 55%); --orange-bg-metal: linear-gradient(160deg, #431407 0%, #9a3412 45%, #2a0c04 100%); --orange-bg-aurora: radial-gradient(120% 100% at 0% 0%, rgb(251 146 60 / 75%), transparent 55%), radial-gradient(120% 100% at 100% 0%, rgb(251 191 36 / 55%), transparent 55%), radial-gradient(120% 120% at 50% 100%, rgb(239 68 68 / 55%), transparent 60%), linear-gradient(160deg, rgb(154 52 18 / 50%), rgb(67 20 7 / 55%)); --orange-shadow-aurora-tail: 0 20px 40px -18px rgb(154 52 18 / 55%); --pink-bg-metal: linear-gradient(160deg, #500724 0%, #9d174d 45%, #33041a 100%); --pink-bg-aurora: radial-gradient(120% 100% at 0% 0%, rgb(244 114 182 / 75%), transparent 55%), radial-gradient(120% 100% at 100% 0%, rgb(232 121 249 / 55%), transparent 55%), radial-gradient(120% 120% at 50% 100%, rgb(244 63 94 / 55%), transparent 60%), linear-gradient(160deg, rgb(157 23 77 / 50%), rgb(80 7 36 / 55%)); --pink-shadow-aurora-tail: 0 20px 40px -18px rgb(157 23 77 / 55%); } html[data-theme-style="metal"], html:not([data-theme-style]) { --theme-border: var(--metal-border); --theme-sheen: var(--metal-sheen); --theme-backdrop: var(--metal-backdrop); --red-bg: var(--red-bg-metal); --red-shadow: var(--metal-shadow); --green-bg: var(--green-bg-metal); --green-shadow: var(--metal-shadow); --cyan-bg: var(--cyan-bg-metal); --cyan-shadow: var(--metal-shadow); --violet-bg: var(--violet-bg-metal); --violet-shadow: var(--metal-shadow); --orange-bg: var(--orange-bg-metal); --orange-shadow: var(--metal-shadow); --pink-bg: var(--pink-bg-metal); --pink-shadow: var(--metal-shadow); } html[data-theme-style="aurora"] { --theme-border: var(--aurora-border); --theme-sheen: var(--aurora-sheen); --theme-backdrop: var(--aurora-backdrop); --red-bg: var(--red-bg-aurora); --red-shadow: var(--aurora-inset-top), var(--red-shadow-aurora-tail); --green-bg: var(--green-bg-aurora); --green-shadow: var(--aurora-inset-top), var(--green-shadow-aurora-tail); --cyan-bg: var(--cyan-bg-aurora); --cyan-shadow: var(--aurora-inset-top), var(--cyan-shadow-aurora-tail); --violet-bg: var(--violet-bg-aurora); --violet-shadow: var(--aurora-inset-top), var(--violet-shadow-aurora-tail); --orange-bg: var(--orange-bg-aurora); --orange-shadow: var(--aurora-inset-top), var(--orange-shadow-aurora-tail); --pink-bg: var(--pink-bg-aurora); --pink-shadow: var(--aurora-inset-top), var(--pink-shadow-aurora-tail); } .theme-red, .theme-green, .theme-cyan, .theme-violet, .theme-orange, .theme-pink { border: var(--theme-border); backdrop-filter: var(--theme-backdrop); -webkit-backdrop-filter: var(--theme-backdrop); } .theme-red::before, .theme-green::before, .theme-cyan::before, .theme-violet::before, .theme-orange::before, .theme-pink::before { background: var(--theme-sheen); } .theme-red { background: var(--red-bg); box-shadow: var(--red-shadow); } .theme-green { background: var(--green-bg); box-shadow: var(--green-shadow); } .theme-cyan { background: var(--cyan-bg); box-shadow: var(--cyan-shadow); } .theme-violet { background: var(--violet-bg); box-shadow: var(--violet-shadow); } .theme-orange { background: var(--orange-bg); box-shadow: var(--orange-shadow); } .theme-pink { background: var(--pink-bg); box-shadow: var(--pink-shadow); }