« MediaWiki:Common.css » : différence entre les versions

Version du 7 septembre 2025 à 15:43

 /* Le CSS placé ici sera appliqué à tous les habillages. */

.mw-widget-dateInputWidget-calendar {position: inherit!important;}

.selflink {color: #468847;}

.keyboard-key, .kbd {color:#0a7cc8; text-decoration: none;}

.coord {
    font-size: 12px;
    font-family: Consolas,"Liberation Mono",Courier,monospace;
    margin: 0 2px;
    padding: 3px 5px;
    white-space: nowrap;
    border: 1px solid #EAEAEA;
    background-color:#D7EFEE!important;
   color:#468781!important;
}


code .red {
    color: #c7254e!important;
    background-color: #f9f2f4!important;
}


.coord a {
    background-color:#D7EFEE!important;
   color:#468781!important;
}

/* Modèles
----------------------------------- */


#ouvrage {
width:70%;
font-style: italic;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #31708F;
text-align:justify; 
text-justify: auto;
}

#ouvrage p {
font-size:1.1em;
}

#ouvrage h2 {
border-bottom: none!important;
color:#1B3E57;
margin-bottom:0.3em!important;
}

 #ouvrage cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
 #ouvrage cite:before {
content: "\2014 \2009";
}

#citation {
width:70%;
font-style: italic;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #31708F;
text-align:justify; 
text-justify: auto;
}

#citation p {
font-size:1.1em;
}

#citation h2 {
border-bottom: none!important;
color:#1B3E57;
margin-bottom:0.3em!important;
}

 #citation cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
 
 #citation cite:before {
content: "\2014 \2009";
}


#purge {
float:right;
}

table.right {
float: right !important;
clear: right !important;
width: 300px !important;
}
 
/* Infobox
--------------------- */
 
.infobox {
background: #EEE; /* couleur correspondant aux titres / colonne de gauche, th */
color: #000;
float: right;
clear: right;
font-size: 95%;
border-collapse: collapse;
margin: 0 0 .5em 1em;
width: 250px;
}
 
/* monobookocentré debut*/
 
.infobox caption {
background: #C0C0C0;
border-left: 1px solid #AAA;
border-top: 1px solid #AAA;
border-right: 1px solid #AAA;
padding: .2em;
margin-left: .57em;
font-weight: bolder;
text-align: center;
color: #FFF;
font-size: 160%;
}
 
.infobox th,
.infobox td {
vertical-align: middle;
border: 1px solid #AAA;
padding: .2em .2em .2em .5em;
}
 
.infobox td {
text-align: center;
background: #F9F9F9;
}
 
.infobox th {
font-weight: normal;
text-align: left;
}
 
.infobox .infoboximage {
/* emplacement pour les photos et une description */
background: #FFF;
padding: 0;
margin-top: 0;
color: #000;
text-align: center;
}
 
.infobox .infoboxsoustitre {
/* sous-titre */
color: #000;
font-weight: bold;
font-size: 115%;
line-height: 2;
text-align: center;
}
 
.infobox dl {
clear: both
}
 
.infobox dt {
float: left;
clear: left;
width: 35%;
}
 
.infobox dd {
margin-left: 40%
}
 
/* Infobox v2
--------------------- */
 
.infobox_v2 {
/* monobookocentré debut */
background: #f9f9f9;
color: #000;
font-size: 90%;
line-height: 1.1em;
float: right!important;
clear: right!important;

/* haut droite bas gauche */
margin: 0 0 .5em 1em!important;
width: 300px!important;
 -webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
border-radius: 0.3em;
border: 1px solid #CCC;
box-shadow: 0 0.3em 0.6em rgba(0, 0, 0, 0.1);
padding: 0.1em!important;
}
 
.infobox_v2 th {
vertical-align: super;
text-align: left;
}
 
.infobox_v2 .entete {
height: 45px;
vertical-align: middle;
text-align: center;
font-size: 150%;
font-weight: bolder;
line-height: 1.2em;
color: #000;
}
 
.infobox_v2 .media {
/* css V2 pour [[Modèle: Son]], etc. */;
height: 35px;
vertical-align: middle;
text-align: center;
font-weight: bolder;
color: #000;
}
 
 
/* ENTETES INFOBOXES
--------------------------------------------*/
 
.entete.construction {
background: #03576C url('//nefald.fr/wiki/images/e/ea/entete_construction.png') no-repeat top right;
width:100%;
height:60px;
}
 
 
.entete.plugin {
background: #FDB600 url('//nefald.fr/wiki/images/6/67/entete_plugin.png') no-repeat top right;
width:100%;
height:60px;
}
 
.entete.joueur {
background: #0072B1 url('//nefald.fr/wiki/images/5/56/entete_joueur.png') no-repeat top right;
width:100%;
height:60px;
}
 
.entete.personnage {
background: #0072B1 url('//nefald.fr/wiki/images/f/f4/entete_personnage.png') no-repeat top right;
width:100%;
height:60px;
}
 
.entete.grade {
background: #FF3400 url('//nefald.fr/wiki/images/2/2b/entete_grade.png') no-repeat top right;
width:100%;
height:60px;
}
 
.entete.guilde {
background: #FF2D07 url('//nefald.fr/wiki/images/2/2f/entete_guilde.png') no-repeat top right;
width:100%;
height:60px;
}
 
.entete.ville {
background: #026B84 url('//nefald.fr/wiki/images/3/3e/entete_ville.png') no-repeat top right;
width:100%;
height:60px;
}
 
 
.entete.monde {
background:#82C300 url('//nefald.fr/wiki/images/7/71/entete_monde.png') no-repeat top right;
width:100%;
height:60px;
}
 
.entete.logiciel {
background: #963DC7 url('//nefald.fr/wiki/images/e/e2/entete_logiciel.png') no-repeat top right;
width:100%;
height:60px;
}
 
.entete.mod {
background: #FFD644 url('//nefald.fr/wiki/images/0/0d/entete_mod.png') no-repeat top right;
width:100%;
height:60px;
}
 
.entete.territoire {
background: #578103 url('//nefald.fr/wiki/images/6/60/entete_territoire.png') no-repeat top right;
width:100%;
height:60px;
}
 
.entete.application.mobile {
background: #A4C639 url('//nefald.fr/wiki/images/1/16/entete_application_mobile.png') no-repeat top right;
width:100%;
height:60px;
}
 
.entete.schematic {
background: #596DDB url('//nefald.fr/wiki/images/f/f5/entete_schematic.png') no-repeat top right;
width:100%;
height:60px;
}
 
.entete.roleplay {
background: #1E5C97 url('//nefald.fr/wiki/images/f/fe/entete_roleplay.png') no-repeat top right;
width:100%;
height:60px;
}
 
 
.entete.tutoriel {
background: #488BDD url('//nefald.fr/wiki/images/e/e5/entete_tutoriel.png') no-repeat top right;
width:100%;
height:60px;
}
 
.entete.metier {
background: #7BAFFF url('//nefald.fr/wiki/images/e/e4/entete_metier.png') no-repeat top right;
width:100%;
height:60px;
}
 
.entete.divinite {
background: #012946 url('//nefald.fr/wiki/images/4/45/entete_divinite.png') no-repeat top right;
width:100%;
height:60px;
}

.entete.ordre {
background: #012946 url('//nefald.fr/wiki/images/f/f9/entete_ordre.png') no-repeat top right;
width:100%;
height:60px;
}

.entete.script {
background: #FFAC1A url('//nefald.fr/wiki/images/f/f0/entete_script.png') no-repeat top right;
width:100%;
height:60px;
}
 
h2 {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 1.8em;
font-weight: bold;
margin: 1.6em 0 1em 0;
padding: 0 0 0.2em 0;
border-bottom: 1px solid #ccc;
color: #555;
}
h3 {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 1.4em;
margin: 1.1em 0 0.4em 0;
}
 
 
/* * BOÎTES ET MESSAGES * */
 
div.boite-a-droite {
display: table;
clear: right;
float: right;
margin: 1em 0 1em 1em;
width: 20em;
position: relative;/* pour les images manuelles */
 
border-style: solid;
border-width: 1px;
padding: 4px;
text-align: left;
 -webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
border-radius: 0.3em;
border: 1px solid #CCC;
box-shadow: 0 0.3em 0.3em rgba(0, 0, 0, 0.1);
padding: 0.1em;
}
.boite-sans-fond {
border-color: #aaa;/* comme boite-grise */
}
.boite-grise {
border-color: #aaa;
background-color: #F9F9F9;
}
 
.boite-jaune { 
border-color: #aaa;
background-color: #FFE998;
}
 
.boite-bleu {
border-color: #aaa;
background-color: #EFF6FA;
}
 
span.annexe {font-weight:bold;color:#0a7cc8;}
.annexe a,
.annexe a:active {color:#0a7cc8;}
.annexe a:hover { color:#CB4627!important;}
 
li.annexe {list-style:none;}
 
.titre-annexe {font-size:14px;font-weight:bold;font-style:italic;margin-left:10px;}


/* Adaptation pour le skin Citizen */
/* Utilisation des variables CSS natives de Citizen */

/* Container principal - utilise les variables de Citizen */
.wiki-accueil {
    background: var(--background-color-base, #ffffff);
    color: var(--color-base, #000000);
    padding: 0;
    margin: 0;
    font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* En mode sombre, Citizen ajoute automatiquement la classe skin-theme-clientpref-night */
.skin-theme-clientpref-night .wiki-accueil {
    background: var(--background-color-base);
    color: var(--color-base);
}

/* Header avec patch info */
.wiki-header-patch {
    background: var(--background-color-interactive-subtle, #f8f9fa);
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color-base, #a2a9b1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    margin-bottom: 10px;
}

.patch-info {
    color: var(--color-subtle, #72777d);
    font-size: 0.9em;
}

.version-info {
    color: var(--color-primary, #0645ad);
    font-weight: bold;
}

/* Bannière principale */
.wiki-banner {
    position: relative;
    height: 200px;
    background: var(--background-color-interactive, #eaecf0);
    border: 1px solid var(--border-color-base, #a2a9b1);
    border-radius: var(--border-radius-base, 2px);
    margin: 20px 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #ffffff;
    padding: 30px;
}

.banner-title {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 10px;
}

.banner-subtitle {
    font-size: 1.1em;
    opacity: 0.9;
}

/* Grille de navigation */
.wiki-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

/* Cartes de navigation - utilise les styles Citizen */
.wiki-nav-card {
    background: var(--background-color-base, #ffffff);
    border: 1px solid var(--border-color-base, #a2a9b1);
    border-radius: var(--border-radius-base, 2px);
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--box-shadow-drop-medium, 0 2px 2px 0 rgba(0,0,0,0.25));
    display: block;
}

.wiki-nav-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-drop-xx-large, 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04));
    border-color: var(--color-primary, #0645ad);
    text-decoration: none;
    color: inherit;
}

/* Mode sombre pour les cartes */
.skin-theme-clientpref-night .wiki-nav-card {
    background: var(--background-color-base);
    border-color: var(--border-color-base);
}

.nav-card-image {
    height: 120px;
    background-size: cover;
    background-position: center;
    background-color: var(--background-color-interactive, #eaecf0);
    position: relative;
    overflow: hidden;
}

.nav-card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
}

.nav-card-content {
    padding: 20px;
}

.nav-card-title {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--color-base, #000000);
    margin-bottom: 8px;
    line-height: 1.3;
}

.nav-card-description {
    color: var(--color-subtle, #72777d);
    font-size: 0.95em;
    line-height: 1.4;
}

/* Section Featured */
.wiki-featured {
    margin: 20px 0;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
}

.featured-main {
    background: var(--background-color-base, #ffffff);
    border: 1px solid var(--border-color-base, #a2a9b1);
    border-radius: var(--border-radius-base, 2px);
    overflow: hidden;
    position: relative;
    height: 300px;
}

.featured-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: var(--background-color-interactive, #eaecf0);
}

.featured-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    color: #ffffff;
    padding: 30px;
}

.featured-title {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 10px;
}

.featured-description {
    font-size: 1em;
    opacity: 0.9;
}

.wiki-sidebar {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sidebar-section {
    background: var(--background-color-base, #ffffff);
    border: 1px solid var(--border-color-base, #a2a9b1);
    border-radius: var(--border-radius-base, 2px);
    padding: 20px;
}

.sidebar-title {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-base, #000000);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color-subtle, #c8ccd1);
}

.sidebar-item {
    display: block;
    color: var(--color-primary, #0645ad);
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color-subtle, #c8ccd1);
    transition: color 0.2s ease;
}

.sidebar-item:hover {
    color: var(--color-primary--hover, #0645ad);
    text-decoration: underline;
}

.sidebar-item:last-child {
    border-bottom: none;
}

.sidebar-stats {
    color: var(--color-subtle, #72777d);
}

.sidebar-stats strong {
    color: var(--color-primary, #0645ad);
}

/* Responsive */
@media (max-width: 1120px) {
    .wiki-featured {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .wiki-nav-grid {
        grid-template-columns: 1fr;
    }
    
    .wiki-header-patch {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        margin: 10px 0;
    }
    
    .banner-title {
        font-size: 1.5em;
    }
    
    .wiki-banner {
        margin: 10px 0;
        height: 150px;
    }
    
    .banner-overlay {
        padding: 20px;
    }
}

/* Intégration avec le contenu de la page */
.mw-parser-output > .wiki-accueil {
    margin: 0;
}

/* Fix pour les liens dans les cartes */
.wiki-nav-card * {
    pointer-events: none;
}

.wiki-nav-card {
    pointer-events: all;
}