MediaWiki:Common.css
Page de l’interface de MediaWiki
Autres actions
Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
- Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
- Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
/* ===========================================
Thème La Boulangerie - Nouvelle DA
Palette : Purple Navy, Lavande, accents Mango/Orange
=========================================== */
/* Polices personnalisées */
@import url('https://fonts.cdnfonts.com/css/minecraft-4');
@font-face {
font-family: 'Alagard';
src: url('https://static.wfonts.com/data/2014/06/10/alagard/alagard.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.minecraft-font {
font-family: 'Minecraft', sans-serif;
}
.alagard-font {
font-family: 'Alagard', sans-serif;
}
:root {
/* Couleur progressive (accent/liens) - Purple Navy */
--color-progressive-oklch__h: 235;
--color-progressive-hsl__h: 230;
--color-progressive-hsl__s: 45%;
--color-progressive-hsl__l: 52%;
/* Bordures */
--border-color-base: #9CAAE8;
--border-color-subtle: rgba(156, 170, 232, 0.5);
}
/* ========== FOND DU SITE ========== */
body {
background: var(--color-surface-0) !important;
}
/* ========== THÈME CLAIR (par défaut) ========== */
html.skin-citizen-light,
html.skin-citizen-theme-light {
/* Surfaces - Lavande (nouvelle DA) */
--color-surface-0: #EFE9FF;
--color-surface-1: #E4D9FF;
--color-surface-2: #D8CCFF;
--color-surface-3: #CEC0F5;
--color-surface-4: #C4B6EB;
/* États hover/active */
--color-surface-1--hover: #EFE9FF;
--color-surface-1--active: #D8CCFF;
--color-surface-2--hover: #E4D9FF;
--color-surface-2--active: #CEC0F5;
/* Texte - Purple Navy */
--color-emphasized: #4E598C;
--color-base: #4B5586;
--color-subtle: #5668BC;
--color-placeholder: #9CAAE8;
--color-disabled: #C4B6EB;
/* Liens - Bleu violet */
--color-progressive: #5668BC;
--color-progressive--hover: #FCAF58;
--color-progressive--active: #FF8C42;
--color-link: #5668BC;
--color-link--hover: #FCAF58;
--color-link--active: #FF8C42;
/* Bordures - Lavande */
--border-color-base: #9CAAE8;
--border-color-subtle: rgba(156, 170, 232, 0.4);
--border-color-interactive: #FF8C42;
/* Icônes */
--background-color-icon: rgba(78, 89, 140, 0.75);
--background-color-icon--hover: rgba(78, 89, 140, 0.9);
--background-color-icon--active: rgba(78, 89, 140, 1);
/* Ombres douces */
--shadow-color-hsl__l: 70%;
--shadow-opacity: 0.15;
}
/* ========== THÈME SOMBRE DÉSACTIVÉ - Forcer le mode clair ========== */
html.skin-citizen-dark,
html.skin-citizen-theme-dark {
/* Surfaces - Lavande (identique au mode clair) */
--color-surface-0: #EFE9FF;
--color-surface-1: #E4D9FF;
--color-surface-2: #D8CCFF;
--color-surface-3: #CEC0F5;
--color-surface-4: #C4B6EB;
/* États hover/active */
--color-surface-1--hover: #EFE9FF;
--color-surface-1--active: #D8CCFF;
--color-surface-2--hover: #E4D9FF;
--color-surface-2--active: #CEC0F5;
/* Texte - Purple Navy */
--color-emphasized: #4E598C;
--color-base: #4B5586;
--color-subtle: #5668BC;
--color-placeholder: #9CAAE8;
--color-disabled: #C4B6EB;
/* Liens - Bleu violet */
--color-progressive: #5668BC;
--color-progressive--hover: #FCAF58;
--color-progressive--active: #FF8C42;
--color-link: #5668BC;
--color-link--hover: #FCAF58;
--color-link--active: #FF8C42;
/* Bordures - Lavande */
--border-color-base: #9CAAE8;
--border-color-subtle: rgba(156, 170, 232, 0.4);
--border-color-interactive: #FF8C42;
/* Icônes */
--background-color-icon: rgba(78, 89, 140, 0.75);
--background-color-icon--hover: rgba(78, 89, 140, 0.9);
--background-color-icon--active: rgba(78, 89, 140, 1);
/* Ombres douces */
--shadow-color-hsl__l: 70%;
--shadow-opacity: 0.15;
}
/* ========== COMPOSANTS SPÉCIFIQUES ========== */
/* ===== TITRES - Orange abricot ===== */
/* Titre de page principal - Orange */
.mw-page-title-main,
.firstHeading {
color: #FF8C42 !important;
}
/* Page d'accueil - Retirer la card autour du contenu */
.page-Accueil .mw-body-content,
.page-Accueil .mw-parser-output {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Titres de sections h2 */
.mw-heading2 h2,
.mw-parser-output h2 {
color: #4E598C !important;
border-bottom-color: rgba(78, 89, 140, 0.3) !important;
}
/* Titres h3 */
.mw-heading3 h3,
.mw-parser-output h3 {
color: #4B5586 !important;
}
/* Titres h4 et plus petits */
.mw-heading4 h4,
.mw-heading5 h5,
.mw-heading6 h6,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
color: #5668BC !important;
}
/* Header/Navigation */
.citizen-header {
background-color: var(--color-surface-1);
}
/* ===== BOUTONS - Orange abricot ===== */
/* Boutons primaires/progressifs */
.cdx-button--action-progressive,
.mw-ui-progressive,
.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
background-color: #FF8C42 !important;
border-color: #FF8C42 !important;
color: #FFF !important;
}
.cdx-button--action-progressive:hover,
.mw-ui-progressive:hover,
.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color: #FCAF58 !important;
border-color: #FCAF58 !important;
}
.cdx-button--action-progressive:active,
.mw-ui-progressive:active,
.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
background-color: #FFA66C !important;
border-color: #FFA66C !important;
}
/* Bouton de soumission de formulaire */
input[type="submit"],
button[type="submit"] {
background-color: #FF8C42;
border-color: #FF8C42;
color: #FFF;
}
input[type="submit"]:hover,
button[type="submit"]:hover {
background-color: #FCAF58;
border-color: #FCAF58;
}
/* Icône d'édition/crayon */
.mw-editsection a {
color: #FF8C42;
}
.mw-editsection a:hover {
color: #FCAF58;
}
/* Boutons secondaires - Purple Navy */
.cdx-button--action-default {
border-color: #9CAAE8;
color: #4E598C;
}
.cdx-button--action-default:hover {
background-color: rgba(78, 89, 140, 0.1);
border-color: #5668BC;
}
/* Barre de recherche */
.citizen-search {
--color-progressive: #5668BC;
}
/* Liens pages existantes - Orange souligné (uniquement dans le contenu) */
.mw-parser-output a:not(.mw-file-description) {
color: #FF8C42 !important;
text-decoration: underline !important;
}
.mw-parser-output a:not(.mw-file-description):visited {
color: #FF8C42 !important;
}
.mw-parser-output a:not(.mw-file-description):hover {
color: #FCAF58 !important;
}
/* Liens pages non existantes (uniquement dans le contenu) */
.mw-parser-output a.new,
.mw-parser-output a.new:visited {
color: #244270 !important;
}
/* Sélection de texte aux couleurs du thème */
::selection {
background-color: rgba(78, 89, 140, 0.3);
color: inherit;
}
/* Message boxes */
.mw-message-box-warning {
background-color: rgba(252, 175, 88, 0.15);
border-color: #FCAF58;
}
.mw-message-box-success {
background-color: rgba(104, 196, 136, 0.15);
border-color: #68C488;
}
/* Table des matières - Accent violet */
.citizen-toc {
border-color: var(--border-color-base);
}
.citizen-toc a {
color: var(--color-link);
}
/* Catégories */
#catlinks {
background-color: var(--color-surface-0) !important;
border-color: var(--border-color-base);
}
/* Infobox - Bordure lavande */
.infobox {
border-color: #9CAAE8;
background-color: var(--color-surface-1);
}
.infobox th {
background-color: rgba(78, 89, 140, 0.15);
}
/* Tableaux */
.wikitable {
border-color: #9CAAE8;
}
.wikitable th {
background-color: rgba(78, 89, 140, 0.12);
}
.wikitable td,
.wikitable th {
border-color: #9CAAE8;
}
/* Highlight/surbrillance - Gold Crayola */
.highlight,
mark {
background-color: rgba(249, 199, 132, 0.4);
}
/* ===== FOOTER PERSONNALISÉ ===== */
/* Masquer les liens du footer (politique, etc.) */
#footer-places {
display: none !important;
}
/* Description du footer */
.citizen-footer__desc {
color: var(--color-subtle);
font-size: 0.9rem;
max-width: 400px;
line-height: 1.5;
}
/* Container des liens avec logos */
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: center;
align-items: flex-start;
}
/* Chaque item (logo + texte) */
.footer-link-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
text-decoration: none;
color: var(--color-emphasized);
padding: 0.5rem;
border-radius: 8px;
transition: background-color 0.2s;
}
.footer-link-item:hover {
background-color: rgba(255, 140, 66, 0.15);
text-decoration: none;
}
/* Icônes SVG via CSS */
.footer-icon {
display: block;
width: 32px;
height: 32px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Icône Discord */
.discord-link .footer-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234E598C'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.947 2.418-2.157 2.418z'/%3E%3C/svg%3E");
}
/* Icône Globe/Site web */
.web-link .footer-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234E598C'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
}
.footer-link-item span {
font-size: 0.8rem;
color: var(--color-subtle);
}
/* IP du serveur */
.footer-ip {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
padding: 0.5rem;
}
.footer-ip code {
background-color: rgba(78, 89, 140, 0.2);
padding: 0.3rem 0.6rem;
border-radius: 4px;
font-family: monospace;
font-size: 0.9rem;
color: var(--color-emphasized);
}
.footer-ip span {
font-size: 0.8rem;
color: var(--color-subtle);
}
/* Tagline container */
#footer-tagline {
text-align: center;
padding: 1rem 0;
}
/* ===== FOOTER V3 - Colonnes ===== */
.footer-cols {
display: flex;
gap: 2rem;
justify-content: center;
}
.footer-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
}
/* ===== PAGE ACTIONS STICKY À DROITE ===== */
/* Boutons d'actions de page - sticky à droite sur desktop */
@media (min-width: 1000px) {
.citizen-page-actions {
position: fixed !important;
right: 10px;
top: 30%;
z-index: 100;
background: transparent;
border: none;
padding: 0;
box-shadow: none;
flex-direction: column !important;
gap: 4px !important;
margin: 0 !important;
align-items: flex-end !important;
}
/* Masquer les titres de sections */
.citizen-page-actions .citizen-menu__heading {
display: none !important;
}
/* Listes de liens en colonne par défaut */
.citizen-page-actions .mw-portlet ul {
display: flex !important;
flex-wrap: wrap !important;
gap: 4px !important;
justify-content: flex-end !important;
align-items: flex-end !important;
}
/* Lire et Historique sur leur propre ligne */
.citizen-page-actions #p-views #ca-view,
.citizen-page-actions #p-views #ca-history {
flex-basis: 100% !important;
display: flex !important;
justify-content: flex-end !important;
}
/* Modifier et Modifier wikicode restent ensemble */
.citizen-page-actions #p-views #ca-ve-edit,
.citizen-page-actions #p-views #ca-edit {
flex-basis: auto !important;
}
/* Style des boutons */
.citizen-page-actions .mw-portlet li > a,
.citizen-page-actions > button,
.citizen-page-actions .citizen-dropdown-summary {
padding: 8px !important;
border-radius: 8px;
background: var(--color-surface-1);
}
.citizen-page-actions .mw-portlet li > a:hover,
.citizen-page-actions > button:hover,
.citizen-page-actions .citizen-dropdown-summary:hover {
background: var(--color-surface-2);
}
/* Menu déroulant "Plus" */
.citizen-page-actions .citizen-menu__card {
right: 100% !important;
left: auto !important;
top: 0 !important;
bottom: auto !important;
margin-right: 8px;
transform-origin: right center !important;
}
}
/* ===== IMAGES NON CLIQUABLES ===== */
/* Désactiver le clic sur les images (lien téléverser) */
.mw-parser-output a.image,
.mw-parser-output a.mw-file-description {
pointer-events: none;
cursor: default;
}
/* ===== BOUTON CRÉER UNE PAGE (header) ===== */
#citizen-newpage-button {
display: flex;
align-items: center;
justify-content: center;
border: none;
color: var(--color-emphasized);
}
#citizen-newpage-button svg {
transition: transform 0.3s ease;
}
#citizen-newpage-button:hover {
color: var(--color-progressive);
}
#citizen-newpage-button:hover svg {
transform: rotate(360deg);
}