/* * theme-dne-vercel.css — Thème clair Forgejo « DNE / Vercel-Geist » * ------------------------------------------------------------------ * Design system : Vercel / Geist. * - Fond near-white #fafafa * - Encre (texte) #171717 * - Hairline / bord #ebebeb * - CTA noir #000000 * - Lien bleu Geist #0070f3 * - Rayons 6px / 8px * - Ombres stackées subtiles (multi-couches) * - Typo titres Inter (tracking négatif) * - Typo mono/code JetBrains Mono * * Forgejo lit ce fichier dans $GITEA_CUSTOM/public/assets/css/theme-.css * soit, dans le conteneur du chart forgejo-helm : * /data/gitea/public/assets/css/theme-dne-vercel.css * Le nom du thème (« dne-vercel ») = suffixe du fichier ; il doit figurer dans * [ui].THEMES et être sélectionné via [ui].DEFAULT_THEME (cf. values app.ini). * * On ne surcharge QUE des variables --color-* déjà définies par Forgejo * (référence : theme-forgejo-light.css upstream). Aucune variable inventée. */ /* Métadonnées de thème lues par Forgejo (nom affiché dans le sélecteur). */ gitea-theme-meta-info { --theme-display-name: "DNE — Vercel"; } /* ====================================================================== * 1. Import des fontes (Inter + JetBrains Mono) via Google Fonts. * Si l'environnement est offline / CSP stricte, basculer sur des * @font-face pointant des .woff2 servis depuis public/assets/fonts. * ====================================================================== */ /* Fonts SELF-HOSTED (RGPD : zéro requête vers Google Fonts). Fichiers woff2 * variables (latin) servis par Forgejo depuis $GITEA_CUSTOM/public/assets/fonts/ * (ConfigMap forgejo-theme-fonts, cf. theme/kustomization.yaml + extraVolumes). */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/assets/fonts/jetbrains-mono-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ====================================================================== * 2. Palette Vercel / Geist — variables de travail (non-Forgejo). * Centralisées ici pour mapper ensuite sur les --color-* de Forgejo. * ====================================================================== */ :root { /* Échelle de gris Geist (du plus clair au plus sombre). */ --dne-bg: #fafafa; /* fond near-white */ --dne-bg-elevated: #ffffff; /* cartes / box / surfaces remontées */ --dne-gray-50: #fafafa; --dne-gray-100: #f5f5f5; --dne-gray-150: #ebebeb; /* hairline / bordures */ --dne-gray-200: #e5e5e5; --dne-gray-300: #d4d4d4; --dne-gray-400: #a3a3a3; --dne-gray-500: #737373; /* texte secondaire */ --dne-gray-600: #525252; --dne-gray-700: #404040; --dne-gray-800: #262626; --dne-ink: #171717; /* encre — texte principal */ --dne-black: #000000; /* CTA noir */ /* Accent bleu Geist (liens / focus / primaire). */ --dne-blue: #0070f3; --dne-blue-hover: #0761d1; --dne-blue-active: #0852a8; /* Sémantique d'état (tons Geist). */ --dne-success: #0070f3; /* on garde le bleu comme accent succès sobre */ --dne-green: #00a854; --dne-amber: #f5a623; --dne-red: #e5484d; /* Rayons & ombres Geist (multi-couches subtiles). */ --dne-radius-sm: 6px; --dne-radius-md: 8px; --dne-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03); --dne-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03); } /* ====================================================================== * 3. Surcharge des variables Forgejo (--color-*) vers la palette Vercel. * Le sélecteur :root[data-theme=dne-vercel] est la convention Forgejo * pour scoper un thème (data-theme = nom du fichier sans le préfixe). * ====================================================================== */ :root[data-theme="dne-vercel"], .theme-dne-vercel { --is-dark-theme: false; --theme-display-name: "DNE — Vercel"; --theme-color-scheme: light; /* ---- Primaire (CTA / boutons primaires) : NOIR Geist --------------- */ --color-primary: var(--dne-black); --color-primary-contrast: #ffffff; --color-primary-dark-1: #000000; --color-primary-dark-2: #000000; --color-primary-dark-3: #000000; --color-primary-dark-4: #000000; --color-primary-dark-5: #000000; --color-primary-dark-6: #000000; --color-primary-dark-7: #000000; --color-primary-light-1: #1a1a1a; --color-primary-light-2: #333333; --color-primary-light-3: #4d4d4d; --color-primary-light-4: #666666; --color-primary-light-5: #808080; --color-primary-light-6: #999999; --color-primary-light-7: #b3b3b3; --color-primary-alpha-10: rgba(0, 0, 0, 0.10); --color-primary-alpha-20: rgba(0, 0, 0, 0.20); --color-primary-alpha-30: rgba(0, 0, 0, 0.30); --color-primary-alpha-40: rgba(0, 0, 0, 0.40); --color-primary-alpha-50: rgba(0, 0, 0, 0.50); --color-primary-alpha-60: rgba(0, 0, 0, 0.60); --color-primary-alpha-70: rgba(0, 0, 0, 0.70); --color-primary-alpha-80: rgba(0, 0, 0, 0.80); --color-primary-alpha-90: rgba(0, 0, 0, 0.90); --color-primary-hover: #1a1a1a; --color-primary-active: #333333; /* ---- Secondaire (boutons neutres / surfaces) ---------------------- */ --color-secondary: var(--dne-gray-150); --color-secondary-dark-1: var(--dne-gray-200); --color-secondary-dark-2: var(--dne-gray-300); --color-secondary-dark-3: var(--dne-gray-300); --color-secondary-dark-4: var(--dne-gray-400); --color-secondary-dark-5: var(--dne-gray-400); --color-secondary-dark-6: var(--dne-gray-500); --color-secondary-dark-7: var(--dne-gray-500); --color-secondary-dark-8: var(--dne-gray-600); --color-secondary-dark-9: var(--dne-gray-600); --color-secondary-dark-10: var(--dne-gray-700); --color-secondary-dark-11: var(--dne-gray-700); --color-secondary-dark-12: var(--dne-gray-800); --color-secondary-dark-13: var(--dne-ink); --color-secondary-light-1: var(--dne-gray-100); --color-secondary-light-2: var(--dne-gray-100); --color-secondary-light-3: var(--dne-gray-50); --color-secondary-light-4: var(--dne-gray-50); --color-secondary-alpha-10: rgba(23, 23, 23, 0.06); --color-secondary-alpha-20: rgba(23, 23, 23, 0.10); --color-secondary-alpha-30: rgba(23, 23, 23, 0.16); --color-secondary-alpha-40: rgba(23, 23, 23, 0.22); --color-secondary-alpha-50: rgba(23, 23, 23, 0.30); --color-secondary-alpha-60: rgba(23, 23, 23, 0.40); --color-secondary-alpha-70: rgba(23, 23, 23, 0.50); --color-secondary-alpha-80: rgba(23, 23, 23, 0.65); --color-secondary-alpha-90: rgba(23, 23, 23, 0.80); --color-secondary-button: var(--dne-gray-500); --color-secondary-hover: var(--dne-gray-100); --color-secondary-active: var(--dne-gray-200); --color-secondary-bg: var(--dne-gray-100); --color-secondary-nav-bg: var(--dne-bg-elevated); /* ---- Surfaces principales ---------------------------------------- */ --color-body: var(--dne-bg); --color-box-header: var(--dne-bg-elevated); --color-box-body: var(--dne-bg-elevated); --color-box-body-highlight: var(--dne-gray-50); --color-footer: var(--dne-bg-elevated); --color-card: var(--dne-bg-elevated); --color-menu: var(--dne-bg-elevated); --color-nav-bg: var(--dne-bg-elevated); --color-nav-hover-bg: var(--dne-gray-100); --color-timeline: var(--dne-gray-150); --color-button: var(--dne-bg-elevated); --color-expand-button: var(--dne-gray-100); --color-project-column-bg: var(--dne-gray-100); /* ---- Texte (échelle d'encre) ------------------------------------- */ --color-text-dark: var(--dne-black); --color-text: var(--dne-ink); --color-text-light: var(--dne-gray-600); --color-text-light-1: var(--dne-gray-500); --color-text-light-2: var(--dne-gray-400); --color-text-light-3: var(--dne-gray-400); --color-placeholder-text: var(--dne-gray-400); /* ---- Bordures, hover, état actif (hairline #ebebeb) -------------- */ --color-light: var(--dne-gray-50); --color-light-border: var(--dne-gray-150); --color-light-mimic-enabled: rgba(0, 0, 0, 0); --color-hover: var(--dne-gray-100); --color-hover-opaque: var(--dne-gray-100); --color-active: var(--dne-gray-150); --color-secondary-bg: var(--dne-gray-100); /* ---- Champs de formulaire ---------------------------------------- */ --color-input-text: var(--dne-ink); --color-input-background: var(--dne-bg-elevated); --color-input-border: var(--dne-gray-200); --color-input-border-hover: var(--dne-gray-400); --color-input-toggle-background: var(--dne-gray-200); /* ---- Liens / accent (bleu Geist #0070f3) ------------------------- */ --color-accent: var(--dne-blue); --color-small-accent: rgba(0, 112, 243, 0.10); --color-highlight-fg: var(--dne-blue); --color-highlight-bg: rgba(0, 112, 243, 0.08); /* ---- Code / markup ----------------------------------------------- */ --color-code-bg: var(--dne-bg-elevated); --color-markup-table-row: var(--dne-gray-50); --color-markup-code-block: var(--dne-gray-100); --color-markup-code-inline: var(--dne-gray-100); /* ---- Ombres (Geist subtiles) ------------------------------------- */ --color-shadow: rgba(0, 0, 0, 0.05); --color-shadow-opaque: var(--dne-gray-150); /* ---- Labels / réactions ------------------------------------------ */ --color-label-text: var(--dne-ink); --color-label-bg: var(--dne-gray-100); --color-label-hover-bg: var(--dne-gray-150); --color-label-active-bg: var(--dne-gray-200); --color-reaction-bg: var(--dne-gray-100); --color-reaction-hover-bg: var(--dne-gray-150); --color-reaction-active-bg: rgba(0, 112, 243, 0.12); /* ---- Tooltips ---------------------------------------------------- */ --color-tooltip-text: #ffffff; --color-tooltip-bg: var(--dne-ink); /* ---- Éditeur ----------------------------------------------------- */ --color-editor-line-highlight: var(--dne-gray-50); --color-editor-selection: rgba(0, 112, 243, 0.18); --color-caret: var(--dne-ink); /* ---- Voile modal / overlay --------------------------------------- */ --color-overlay-backdrop: rgba(0, 0, 0, 0.45); /* ---- Couleurs nommées de base (alignées Geist mais dans la gamme * Forgejo ; on garde des tons proches du défaut light) -------- */ --color-red: var(--dne-red); --color-orange: var(--dne-amber); --color-yellow: #f7c948; --color-green: var(--dne-green); --color-teal: #00b8d9; --color-blue: var(--dne-blue); --color-grey: var(--dne-gray-500); --color-grey-light: var(--dne-gray-300); --color-black: var(--dne-ink); --color-gold: #d4a72c; --color-white: #ffffff; /* ---- États (banners success/info/warning/error) ----------------- */ --color-success-border: rgba(0, 168, 84, 0.40); --color-success-bg: rgba(0, 168, 84, 0.08); --color-success-text: #0a7c45; --color-info-border: rgba(0, 112, 243, 0.40); --color-info-bg: rgba(0, 112, 243, 0.06); --color-info-text: var(--dne-blue-active); --color-warning-border: rgba(245, 166, 35, 0.45); --color-warning-bg: rgba(245, 166, 35, 0.10); --color-warning-text: #9a6700; --color-error-border: rgba(229, 72, 77, 0.45); --color-error-bg: rgba(229, 72, 77, 0.08); --color-error-text: #c0353a; } /* ====================================================================== * 4. Typographie — Inter (UI/titres) + JetBrains Mono (code). * Forgejo n'expose pas la famille de police en variable de thème ; * on cible donc directement les sélecteurs racine et code. * ====================================================================== */ :root[data-theme="dne-vercel"] { font-feature-settings: "cv02", "cv03", "cv04", "cv11"; /* alternants Inter */ } :root[data-theme="dne-vercel"], :root[data-theme="dne-vercel"] body, :root[data-theme="dne-vercel"] .ui { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Mono : code, diff, blocs, champs SHA. */ :root[data-theme="dne-vercel"] code, :root[data-theme="dne-vercel"] pre, :root[data-theme="dne-vercel"] tt, :root[data-theme="dne-vercel"] .mono, :root[data-theme="dne-vercel"] .ui.code, :root[data-theme="dne-vercel"] .file-view, :root[data-theme="dne-vercel"] .CodeMirror, :root[data-theme="dne-vercel"] .lines-code { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-feature-settings: "liga" 0; /* pas de ligatures dans le code */ } /* Tracking négatif sur les titres (signature Geist). */ :root[data-theme="dne-vercel"] h1, :root[data-theme="dne-vercel"] h2, :root[data-theme="dne-vercel"] h3, :root[data-theme="dne-vercel"] .ui.header, :root[data-theme="dne-vercel"] .ui.huge.header, :root[data-theme="dne-vercel"] .ui.large.header, :root[data-theme="dne-vercel"] .repository .header, :root[data-theme="dne-vercel"] .dashboard .header { font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.02em; /* tracking négatif titres */ font-weight: 600; color: var(--color-text-dark); } :root[data-theme="dne-vercel"] h1, :root[data-theme="dne-vercel"] .ui.huge.header { letter-spacing: -0.03em; /* plus serré sur les gros titres */ } /* ====================================================================== * 5. Affinages Geist — rayons, hairlines, ombres stackées. * Surcharges ciblées de composants Semantic-UI/Forgejo (pas de * variable --color-* pour les rayons : on agit sur les sélecteurs). * ====================================================================== */ :root[data-theme="dne-vercel"] .ui.segment, :root[data-theme="dne-vercel"] .ui.card, :root[data-theme="dne-vercel"] .ui.menu, :root[data-theme="dne-vercel"] .repository .ui.segment, :root[data-theme="dne-vercel"] .ui.attached.header { border-radius: var(--dne-radius-md); border-color: var(--color-light-border); box-shadow: var(--dne-shadow-sm); } :root[data-theme="dne-vercel"] .ui.button, :root[data-theme="dne-vercel"] .ui.input > input, :root[data-theme="dne-vercel"] .ui.dropdown, :root[data-theme="dne-vercel"] .ui.selection.dropdown { border-radius: var(--dne-radius-sm); } /* CTA primaire noir Geist + ombre subtile. */ :root[data-theme="dne-vercel"] .ui.primary.button, :root[data-theme="dne-vercel"] .ui.primary.buttons .button { background: var(--dne-black); color: #ffffff; border: 1px solid var(--dne-black); box-shadow: var(--dne-shadow-sm); } :root[data-theme="dne-vercel"] .ui.primary.button:hover { background: #1a1a1a; } /* Liens en bleu Geist (hors boutons). */ :root[data-theme="dne-vercel"] a:not(.ui.button):not(.label):not(.item) { color: var(--dne-blue); } :root[data-theme="dne-vercel"] a:not(.ui.button):not(.label):not(.item):hover { color: var(--dne-blue-hover); } /* Hairline #ebebeb sur les séparateurs et l'en-tête de navigation. */ :root[data-theme="dne-vercel"] .ui.divider, :root[data-theme="dne-vercel"] .ui.dividing.header, :root[data-theme="dne-vercel"] #navbar, :root[data-theme="dne-vercel"] .ui.secondary.menu { border-color: var(--color-light-border); } /* Box / panneaux remontés : ombre stackée medium au survol. */ :root[data-theme="dne-vercel"] .ui.card:hover, :root[data-theme="dne-vercel"] .repository.file.list .ui.segment:hover { box-shadow: var(--dne-shadow-md); }