/* Thème Forgejo « mlcrvn » — palette de la charte du 2026-10-13. * * Remplace le thème « marque » (#38). Dérivé de forgejo-auto, qu'il importe : * clair ou sombre selon prefers-color-scheme. CSS seul, sans gabarit, écrit * pour Forgejo 16.0.5. * * La palette seule : Forgejo garde ses polices, ses formes et ses rayons. * Noir sur blanc. Le bleu Klein agit — liens, boutons, interrupteurs — et * rien d'autre n'est bleu : la barre de navigation n'est plus un aplat. Le * magenta signe la page une fois : le trait sous l'onglet actif de la * navigation secondaire, jamais du texte. * * Les jetons du bloc « Copie » sont recopiés de marque/tokens/tokens.css, qui * fait foi : on corrige ici, jamais là-bas. Contrôle de la copie dans * forgejo/README.md § Thème. * * LA RÈGLE : le bleu clair vit sur l'encre, le bleu foncé vit sur le papier. */ @import "./theme-forgejo-auto.css"; /* --- Copie de marque/tokens/tokens.css (palette) ------------------------ */ :root { --outremer: #002fa7; --outremer-nuit: #84a9f7; --sur-outremer: #f1f2f6; --magenta: #df006f; --magenta-nuit: #fc5c95; --papier: #fbfcfd; --encre: #0d0f15; --texte-attenue: #55585f; --filet: #dcdddf; --nuit: #090b10; --encre-nuit: #e6e8ec; --texte-attenue-nuit: #a2a4ab; --filet-nuit: #2a2c31; } /* --- Fin de la copie ----------------------------------------------------- */ /* --- Apparence claire (défaut de forgejo-auto) -------------------------- * Il n'y a plus de surface distincte du fond : boîtes, menus, cartes et * code se posent sur le papier et se distinguent par un filet. Seuls les * états (survol, actif, sélection d'une rangée) teintent le papier d'encre. */ :root { --mlcrvn-signe: var(--magenta); --color-primary: var(--outremer); --color-primary-contrast: var(--sur-outremer); --color-primary-dark-1: color-mix(in srgb, var(--outremer) 88%, black); --color-primary-dark-2: color-mix(in srgb, var(--outremer) 76%, black); --color-primary-dark-3: color-mix(in srgb, var(--outremer) 64%, black); --color-primary-dark-4: color-mix(in srgb, var(--outremer) 52%, black); --color-primary-dark-5: color-mix(in srgb, var(--outremer) 40%, black); --color-primary-dark-6: color-mix(in srgb, var(--outremer) 28%, black); --color-primary-dark-7: color-mix(in srgb, var(--outremer) 16%, black); --color-primary-light-1: color-mix(in srgb, var(--outremer) 85%, var(--papier)); --color-primary-light-2: color-mix(in srgb, var(--outremer) 70%, var(--papier)); --color-primary-light-3: color-mix(in srgb, var(--outremer) 55%, var(--papier)); --color-primary-light-4: color-mix(in srgb, var(--outremer) 40%, var(--papier)); --color-primary-light-5: color-mix(in srgb, var(--outremer) 25%, var(--papier)); --color-primary-light-6: color-mix(in srgb, var(--outremer) 15%, var(--papier)); --color-primary-light-7: color-mix(in srgb, var(--outremer) 8%, var(--papier)); --color-primary-alpha-10: color-mix(in srgb, var(--outremer) 10%, transparent); --color-primary-alpha-20: color-mix(in srgb, var(--outremer) 20%, transparent); --color-primary-alpha-30: color-mix(in srgb, var(--outremer) 30%, transparent); --color-primary-alpha-40: color-mix(in srgb, var(--outremer) 40%, transparent); --color-primary-alpha-50: color-mix(in srgb, var(--outremer) 50%, transparent); --color-primary-alpha-60: color-mix(in srgb, var(--outremer) 60%, transparent); --color-primary-alpha-70: color-mix(in srgb, var(--outremer) 70%, transparent); --color-primary-alpha-80: color-mix(in srgb, var(--outremer) 80%, transparent); --color-primary-alpha-90: color-mix(in srgb, var(--outremer) 90%, transparent); --color-primary-hover: var(--color-primary-dark-2); --color-primary-active: var(--color-primary-dark-4); --color-accent: var(--outremer); --color-small-accent: var(--color-primary-light-6); /* Gris : l'encre fondue dans le papier, teinte 272 comme la charte. Le * premier palier est le filet ; « dark » fonce, « light » éclaircit. */ --color-secondary: var(--filet); --color-secondary-dark-1: var(--filet); --color-secondary-dark-2: color-mix(in srgb, var(--encre) 20%, var(--papier)); --color-secondary-dark-3: color-mix(in srgb, var(--encre) 28%, var(--papier)); --color-secondary-dark-4: color-mix(in srgb, var(--encre) 36%, var(--papier)); --color-secondary-dark-5: color-mix(in srgb, var(--encre) 44%, var(--papier)); --color-secondary-dark-6: color-mix(in srgb, var(--encre) 52%, var(--papier)); --color-secondary-dark-7: color-mix(in srgb, var(--encre) 60%, var(--papier)); --color-secondary-dark-8: color-mix(in srgb, var(--encre) 66%, var(--papier)); --color-secondary-dark-9: color-mix(in srgb, var(--encre) 72%, var(--papier)); --color-secondary-dark-10: color-mix(in srgb, var(--encre) 78%, var(--papier)); --color-secondary-dark-11: color-mix(in srgb, var(--encre) 84%, var(--papier)); --color-secondary-dark-12: color-mix(in srgb, var(--encre) 90%, var(--papier)); --color-secondary-dark-13: color-mix(in srgb, var(--encre) 95%, var(--papier)); --color-secondary-light-1: color-mix(in srgb, var(--encre) 10%, var(--papier)); --color-secondary-light-2: color-mix(in srgb, var(--encre) 6%, var(--papier)); --color-secondary-light-3: color-mix(in srgb, var(--encre) 4%, var(--papier)); --color-secondary-light-4: color-mix(in srgb, var(--encre) 2%, var(--papier)); --color-body: var(--papier); --color-secondary-nav-bg: var(--papier); --color-header-wrapper: var(--papier); --color-box-header: var(--papier); --color-box-body: var(--papier); --color-box-body-highlight: var(--color-secondary-light-2); --color-card: var(--papier); --fancy-card-bg: var(--papier); --fancy-card-border: var(--filet); --color-menu: var(--papier); --color-footer: var(--papier); --color-secondary-bg: var(--color-secondary-light-2); --color-button: var(--papier); --color-input-background: var(--papier); --color-input-toggle-background: var(--papier); --color-input-border: var(--filet); --color-input-border-hover: var(--color-secondary-dark-3); --color-input-text: var(--encre); --color-light-border: color-mix(in srgb, var(--encre) 13%, transparent); --color-timeline: var(--filet); --color-hover: color-mix(in srgb, var(--encre) 6%, transparent); --color-active: color-mix(in srgb, var(--encre) 10%, transparent); --color-editor-line-highlight: var(--color-secondary-light-2); --color-markup-code-block: var(--papier); --color-markup-code-inline: color-mix(in srgb, var(--encre) 7%, transparent); --color-code-bg: var(--papier); --color-text-dark: var(--encre); --color-text: var(--encre); --color-text-light: var(--encre); --color-text-light-1: var(--texte-attenue); --color-text-light-2: var(--texte-attenue); --color-text-light-3: var(--texte-attenue); --color-caret: var(--encre); /* La barre de navigation est du papier : son filet bas vient de Forgejo. */ --color-nav-bg: var(--papier); --color-nav-hover-bg: var(--color-hover); /* Sélection : noir sur blanc renversé, pas du bleu — elle ne se clique pas. */ --color-selection-bg: var(--encre); --color-selection-fg: var(--papier); /* Piste des barres de progression, ~2:1 sur le fond : au filet, les * jalons à 0 % n'auraient plus de barre visible. */ --mlcrvn-piste: color-mix(in srgb, var(--encre) 35%, var(--papier)); } /* --- Apparence sombre ---------------------------------------------------- * Pas une inversion : ses propres valeurs, mesurées séparément. Le bleu y * est le bleu Klein de nuit, aplat des boutons compris, sous l'encre de la * nuit (8,43:1). Les paliers suivent la convention de forgejo-dark : « dark » * éclaircit, « light » assombrit. */ @media (prefers-color-scheme: dark) { :root { --mlcrvn-signe: var(--magenta-nuit); --color-primary: var(--outremer-nuit); --color-primary-contrast: var(--nuit); --color-primary-dark-1: color-mix(in srgb, var(--outremer-nuit) 85%, white); --color-primary-dark-2: color-mix(in srgb, var(--outremer-nuit) 70%, white); --color-primary-dark-3: color-mix(in srgb, var(--outremer-nuit) 55%, white); --color-primary-dark-4: color-mix(in srgb, var(--outremer-nuit) 40%, white); --color-primary-dark-5: color-mix(in srgb, var(--outremer-nuit) 25%, white); --color-primary-dark-6: color-mix(in srgb, var(--outremer-nuit) 15%, white); --color-primary-dark-7: color-mix(in srgb, var(--outremer-nuit) 8%, white); --color-primary-light-1: color-mix(in srgb, var(--outremer-nuit) 85%, var(--nuit)); --color-primary-light-2: color-mix(in srgb, var(--outremer-nuit) 70%, var(--nuit)); --color-primary-light-3: color-mix(in srgb, var(--outremer-nuit) 55%, var(--nuit)); --color-primary-light-4: color-mix(in srgb, var(--outremer-nuit) 40%, var(--nuit)); --color-primary-light-5: color-mix(in srgb, var(--outremer-nuit) 25%, var(--nuit)); --color-primary-light-6: color-mix(in srgb, var(--outremer-nuit) 15%, var(--nuit)); --color-primary-light-7: color-mix(in srgb, var(--outremer-nuit) 8%, var(--nuit)); --color-primary-alpha-10: color-mix(in srgb, var(--outremer-nuit) 10%, transparent); --color-primary-alpha-20: color-mix(in srgb, var(--outremer-nuit) 20%, transparent); --color-primary-alpha-30: color-mix(in srgb, var(--outremer-nuit) 30%, transparent); --color-primary-alpha-40: color-mix(in srgb, var(--outremer-nuit) 40%, transparent); --color-primary-alpha-50: color-mix(in srgb, var(--outremer-nuit) 50%, transparent); --color-primary-alpha-60: color-mix(in srgb, var(--outremer-nuit) 60%, transparent); --color-primary-alpha-70: color-mix(in srgb, var(--outremer-nuit) 70%, transparent); --color-primary-alpha-80: color-mix(in srgb, var(--outremer-nuit) 80%, transparent); --color-primary-alpha-90: color-mix(in srgb, var(--outremer-nuit) 90%, transparent); --color-primary-hover: var(--color-primary-dark-1); --color-primary-active: var(--color-primary-dark-2); --color-accent: var(--outremer-nuit); --color-small-accent: var(--color-primary-light-5); --color-secondary: var(--filet-nuit); --color-secondary-dark-1: var(--filet-nuit); --color-secondary-dark-2: color-mix(in srgb, var(--encre-nuit) 22%, var(--nuit)); --color-secondary-dark-3: color-mix(in srgb, var(--encre-nuit) 30%, var(--nuit)); --color-secondary-dark-4: color-mix(in srgb, var(--encre-nuit) 38%, var(--nuit)); --color-secondary-dark-5: color-mix(in srgb, var(--encre-nuit) 46%, var(--nuit)); --color-secondary-dark-6: color-mix(in srgb, var(--encre-nuit) 54%, var(--nuit)); --color-secondary-dark-7: color-mix(in srgb, var(--encre-nuit) 62%, var(--nuit)); --color-secondary-dark-8: color-mix(in srgb, var(--encre-nuit) 68%, var(--nuit)); --color-secondary-dark-9: color-mix(in srgb, var(--encre-nuit) 74%, var(--nuit)); --color-secondary-dark-10: color-mix(in srgb, var(--encre-nuit) 80%, var(--nuit)); --color-secondary-dark-11: color-mix(in srgb, var(--encre-nuit) 86%, var(--nuit)); --color-secondary-dark-12: color-mix(in srgb, var(--encre-nuit) 91%, var(--nuit)); --color-secondary-dark-13: color-mix(in srgb, var(--encre-nuit) 95%, var(--nuit)); --color-secondary-light-1: color-mix(in srgb, var(--encre-nuit) 11%, var(--nuit)); --color-secondary-light-2: color-mix(in srgb, var(--encre-nuit) 7%, var(--nuit)); --color-secondary-light-3: color-mix(in srgb, var(--encre-nuit) 4%, var(--nuit)); --color-secondary-light-4: color-mix(in srgb, var(--encre-nuit) 2%, var(--nuit)); --color-body: var(--nuit); --color-secondary-nav-bg: var(--nuit); --color-header-wrapper: var(--nuit); --color-box-header: var(--nuit); --color-box-body: var(--nuit); --color-box-body-highlight: var(--color-secondary-light-2); --color-card: var(--nuit); --fancy-card-bg: var(--nuit); --fancy-card-border: var(--filet-nuit); --color-menu: var(--nuit); --color-footer: var(--nuit); --color-secondary-bg: var(--color-secondary-light-2); --color-button: var(--nuit); --color-input-background: var(--nuit); --color-input-toggle-background: var(--nuit); --color-input-border: var(--filet-nuit); --color-input-border-hover: var(--color-secondary-dark-3); --color-input-text: var(--encre-nuit); --color-light-border: color-mix(in srgb, var(--encre-nuit) 15%, transparent); --color-timeline: var(--filet-nuit); --color-hover: color-mix(in srgb, var(--encre-nuit) 8%, transparent); --color-active: color-mix(in srgb, var(--encre-nuit) 12%, transparent); --color-editor-line-highlight: var(--color-secondary-light-2); --color-markup-code-block: var(--nuit); --color-markup-code-inline: color-mix(in srgb, var(--encre-nuit) 10%, transparent); --color-code-bg: var(--nuit); --color-text-dark: var(--encre-nuit); --color-text: var(--encre-nuit); --color-text-light: var(--encre-nuit); --color-text-light-1: var(--texte-attenue-nuit); --color-text-light-2: var(--texte-attenue-nuit); --color-text-light-3: var(--texte-attenue-nuit); --color-caret: var(--encre-nuit); --color-nav-bg: var(--nuit); --color-nav-hover-bg: var(--color-hover); --color-selection-bg: var(--encre-nuit); --color-selection-fg: var(--nuit); --mlcrvn-piste: color-mix(in srgb, var(--encre-nuit) 25%, var(--nuit)); } } /* --- Les rares sélecteurs ------------------------------------------------ * Tout le reste passe par les variables. Un renommage côté Forgejo fait * retomber l'élément sur forgejo-auto, sans casser la page. */ /* Le signe : un trait magenta sous l'onglet actif de la navigation * secondaire (dépôt, organisation, explore), qui n'existe qu'une fois par * page. Un trait, pas un texte : l'onglet garde l'encre. */ .secondary-nav .ui.secondary.pointing.menu .active.item:not(.dropdown), .ui.secondary.pointing.menu.secondary-nav .active.item:not(.dropdown) { box-shadow: inset 0 -2px 0 var(--mlcrvn-signe); } /* Un bloc de code se pose sur le papier et se distingue par un filet. */ .markup pre { border: 1px solid var(--color-secondary); } /* Barres de progression : piste lisible, remplissage à l'accent, y compris * les cases à cocher de la liste des tickets que Forgejo laisse en gris. */ progress, progress::-webkit-progress-bar { background: var(--mlcrvn-piste) !important; } #issue-list .issue-meta .checklist progress::-webkit-progress-value { background-color: var(--color-accent); } #issue-list .issue-meta .checklist progress::-moz-progress-bar { background-color: var(--color-accent); }