Basculer la recherche
Basculer le menu
60
1,9 k
12
5,4 k
Nefald
Changer de menu des préférences
Basculer le menu personnel
Non connecté(e)
Votre adresse IP sera visible au public si vous faites des modifications.

« Aide:Charte graphique » : différence entre les versions

De Nefald
Autres actions
Navigation interactive dans l’historique
← Modification précédente
VisuelWikicode
Hiob (discussion | contributions)
owner
3 814 modifications
Hiob (discussion | contributions)
owner
3 814 modifications
Aucun résumé des modifications
 
Ligne 7 : Ligne 7 :


La couleur de marque est définie via le système OKLCH du skin Citizen.
La couleur de marque est définie via le système OKLCH du skin Citizen.
La teinte (hue) actuelle est '''230''' (bleu-acier).
La teinte actuelle est '''230''' (bleu-acier).


Pour modifier la teinte globale, éditer [[MediaWiki:Citizen.css]] et changer
Pour modifier la teinte globale, éditer [[MediaWiki:Citizen.css]] et changer
Ligne 24 : Ligne 24 :
== Palette sémantique ==
== Palette sémantique ==


Ces classes s'appliquent sur les cellules de tableaux (<code><td></code>).
La palette sémantique Nefald est définie dans [[MediaWiki:Citizen.css]] via des
Elles s'adaptent automatiquement au mode clair, sombre et automatique.
variables <code>--nefald-*</code>. Elle s'adapte automatiquement aux modes
clair, sombre et automatique — aucune couleur n'est codée en dur dans les modèles.


=== Aperçu ===
=== Variables par token ===
 
Chaque couleur sémantique expose trois variables :
 
{| class="wikitable"
! Token !! Fond !! Texte !! Bordure
|-
| <code>success</code>
| <code>--nefald-success-bg</code>
| <code>--nefald-success-text</code>
| <code>--nefald-success-border</code>
|-
| <code>danger</code>
| <code>--nefald-danger-bg</code>
| <code>--nefald-danger-text</code>
| <code>--nefald-danger-border</code>
|-
| <code>warning</code>
| <code>--nefald-warning-bg</code>
| <code>--nefald-warning-text</code>
| <code>--nefald-warning-border</code>
|-
| <code>info</code>
| <code>--nefald-info-bg</code>
| <code>--nefald-info-text</code>
| <code>--nefald-info-border</code>
|-
| <code>secondary</code>
| <code>--nefald-neutral-bg</code>
| <code>--nefald-neutral-text</code>
| <code>--nefald-neutral-border</code>
|}
 
=== Classes de cellules ===
 
Ces classes s'appliquent directement sur les cellules <code><td></code> et
consomment les variables ci-dessus.


{| class="wikitable" style="width:100%"
{| class="wikitable" style="width:100%"
Ligne 53 : Ligne 90 :
|}
|}


=== Exemple d'utilisation ===
=== Modèle {{Couleur}} ===
 
Le modèle [[Modèle:Couleur|{{Couleur}}]] est la méthode recommandée pour
utiliser la palette sémantique en wikicode. Il gère automatiquement le
contexte (cellule ou badge inline).


<syntaxhighlight lang="mediawiki">
<syntaxhighlight lang="mediawiki">
{| class="wikitable"
| {{Couleur|success|En ligne}}      <!-- cellule colorée -->
! Composant !! État
{{Couleur|warning|Dégradé}}          <!-- badge inline dans du texte -->
|-
| Serveur principal || <td class="table-color-success">En ligne</td>
|-
| Backup || <td class="table-color-warning">Dégradé</td>
|-
| Ancien serveur || <td class="table-color-danger">Hors ligne</td>
|}
</syntaxhighlight>
</syntaxhighlight>


== Variables disponibles ==
Aliases acceptés : <code>vert</code>, <code>rouge</code>, <code>jaune</code>,
<code>bleu</code>, <code>gris</code>, <code>neutre</code>.


Ces variables CSS sont utilisables dans les modèles via <code>style="..."</code>
{{#invoke:TableColors|list}}
ou dans [[MediaWiki:Citizen.css]].


=== Surfaces (arrière-plans) ===
== Surfaces Citizen ==


{| class="wikitable"
Ces variables sont fournies par le skin Citizen et couvrent tous les arrière-plans.
! Variable !! Description
 
|-
<div class="home-cards-grid-3">
| <code>var(--color-surface-0)</code> || Fond principal du site
{{Card|title=Surface 0|subtitle=<code>--color-surface-0</code>|bgcolor=var(--color-surface-0)|colorheight=80|text=Fond principal}}
|-
{{Card|title=Surface 1|subtitle=<code>--color-surface-1</code>|bgcolor=var(--color-surface-1)|colorheight=80|text=Modals, dropdowns}}
| <code>var(--color-surface-1)</code> || Surfaces secondaires (modals, dropdowns)
{{Card|title=Surface 2|subtitle=<code>--color-surface-2</code>|bgcolor=var(--color-surface-2)|colorheight=80|text=Surfaces tertiaires}}
|-
</div>
| <code>var(--color-surface-2)</code> || Surfaces tertiaires
 
|-
 
| <code>var(--color-surface-3)</code> || Surfaces quaternaires
<div class="home-cards-grid-3">
|-
{{Card|title=Surface 3|subtitle=<code>--color-surface-3</code>|bgcolor=var(--color-surface-3)|colorheight=80|text=Surfaces quaternaires}}
| <code>var(--color-surface-4)</code> || Surfaces quinaires
{{Card|title=Surface 4|subtitle=<code>--color-surface-4</code>|bgcolor=var(--color-surface-4)|colorheight=80|text=Surfaces quinaires}}
|}
{{Card|title=Progressive|subtitle=<code>--color-progressive</code>|bgcolor=var(--color-progressive)|colorheight=80|text=Accent principal}}
</div>


=== Textes ===


{| class="wikitable"
<div class="home-cards-grid-3">
! Variable !! Description
{{Card|title=Emphasized|subtitle=<code>--color-emphasized</code>|bgcolor=var(--color-emphasized)|colorheight=80|text=Titres, headers}}
|-
{{Card|title=Subtle|subtitle=<code>--color-subtle</code>|bgcolor=var(--color-subtle)|colorheight=80|text=Captions}}
| <code>var(--color-base)</code> || Texte courant
{{Card|title=Link|subtitle=<code>--color-link</code>|bgcolor=var(--color-link)|colorheight=80|text=Liens}}
|-
</div>
| <code>var(--color-emphasized)</code> || Titres et éléments mis en avant
|-
| <code>var(--color-subtle)</code> || Légendes, métadonnées, texte secondaire
|-
| <code>var(--color-link)</code> || Couleur des liens
|}


== Typographie ==
== Typographie ==
Le wiki utilise les polices par défaut de Citizen (Roboto).
Les titres utilisent <code>font-weight: medium</code>.


{| class="wikitable"
{| class="wikitable"
Ligne 116 : Ligne 141 :
| <code>--font-family-citizen-monospace</code> || Roboto Mono || Code, éditeur
| <code>--font-family-citizen-monospace</code> || Roboto Mono || Code, éditeur
|}
|}
Les titres (h1–h6) utilisent <code>font-weight: medium</code> via Citizen.css.


== Modes de thème ==
== Modes de thème ==
Le skin Citizen gère trois modes. La palette Nefald s'adapte à chacun.


{| class="wikitable"
{| class="wikitable"
Ligne 130 : Ligne 155 :
| Automatique || <code>.skin-theme-clientpref-os</code> || Suit le système
| Automatique || <code>.skin-theme-clientpref-os</code> || Suit le système
|-
|-
| Noir pur || <code>.citizen-feature-pure-black-clientpref-1</code> || Variante du mode sombre
| Noir pur || <code>.citizen-feature-pure-black-clientpref-1</code> || Variante sombre uniquement
|}
|}


<div class="home-cards-grid-3">
Les variables <code>--nefald-*</code> sont surchargées pour chaque mode dans
{{Card|title=Surface 0|subtitle=<code>--color-surface-0</code>|bgcolor=var(--color-surface-0)|colorheight=80|text=Fond principal}}
[[MediaWiki:Citizen.css]] — aucune intervention manuelle n'est nécessaire dans
{{Card|title=Surface 1|subtitle=<code>--color-surface-1</code>|bgcolor=var(--color-surface-1)|colorheight=80|text=Modals, dropdowns}}
les modèles.
{{Card|title=Surface 2|subtitle=<code>--color-surface-2</code>|bgcolor=var(--color-surface-2)|colorheight=80|text=Surfaces tertiaires}}
</div>
 
 
<div class="home-cards-grid-3">
{{Card|title=Surface 3|subtitle=<code>--color-surface-3</code>|bgcolor=var(--color-surface-3)|colorheight=80|text=Surfaces quaternaires}}
{{Card|title=Surface 4|subtitle=<code>--color-surface-4</code>|bgcolor=var(--color-surface-4)|colorheight=80|text=Surfaces quinaires}}
{{Card|title=Progressive|subtitle=<code>--color-progressive</code>|bgcolor=var(--color-progressive)|colorheight=80|text=Accent principal}}
</div>
 
 
<div class="home-cards-grid-3">
{{Card|title=Emphasized|subtitle=<code>--color-emphasized</code>|bgcolor=var(--color-emphasized)|colorheight=80|text=Titres, headers}}
{{Card|title=Subtle|subtitle=<code>--color-subtle</code>|bgcolor=var(--color-subtle)|colorheight=80|text=Captions}}
{{Card|title=Link|subtitle=<code>--color-link</code>|bgcolor=var(--color-link)|colorheight=80|text=Liens}}
</div>


== Bonnes pratiques ==
== Bonnes pratiques ==


* '''Toujours utiliser les variables CSS''' plutôt que des couleurs hex codées en dur.
* Utiliser [[Modèle:Couleur|{{Couleur}}]] pour tout coloriage sémantique dans les tableaux.
* Tester les modèles en mode clair ''et'' sombre avant publication.
* Utiliser les variables <code>--nefald-*</code> ou <code>--color-*</code> (Citizen) dans les styles inline, jamais de valeurs hex fixes.
* Pour les blocs d'information, préférer les [[Modèle:Note|modèles dédiés]] aux styles inline.
* Tester chaque modèle en mode clair ''et'' sombre avant publication.
* Ne pas utiliser <code>color:</code> ou <code>background-color:</code> inline avec des valeurs fixes.
* Pour les blocs d'avertissement ou d'information, préférer les [[Modèle:Note|modèles dédiés]].


== Voir aussi ==
== Voir aussi ==


* [[MediaWiki:Citizen.css]] — Feuille de style principale
* [[MediaWiki:Citizen.css]] — Palette Nefald et surcharges de thème
* [[Modèle:Couleur]] — Application de la palette en wikicode
* [[Aide:Modèles]] — Bibliothèque des modèles disponibles
Récupérée de "https://wiki.nefald.fr/Aide:Charte_graphique"
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.