Wikia.css

Version du 22 août 2020 à 14:50

/**** Cette page concerne le CSS principal du Disney Wiki francophone ****/

/**** Importations ****/
/* Infobox */
@import "/load.php?articles=MediaWiki:Wikia.css/Infobox.css&only=styles&mode=articles";

/* Accueil */
@import "/load.php?articles=MediaWiki:Wikia.css/Accueil.css&only=styles&mode=articles";

/* Utilisateurs */ 
@import "/load.php?articles=MediaWiki:Wikia.css/Utilisateurs.css&only=styles&mode=articles";

/* Drapeaux */
@import url("/load.php?mode=articles&articles=u:dev:MediaWiki:InterlanguageFlags.css&only=styles");

/* Navboxes */
@import "/load.php?articles=MediaWiki:Wikia.css/Navbox.css&only=styles&mode=articles";

/* Typographie */
/** Lobster + Luckiest Guy + Oswald + Raleway + Righteous + Roboto **/
@import url('https://fonts.googleapis.com/css?family=Creepster|Lobster|Luckiest+Guy|Oswald:300,400,700|Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Righteous|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
/** Waltograph **/
@font-face {
    font-family: 'Waltograph';
    src: url('https://vignette.wikia.nocookie.net/disney/images/8/84/Waltograph.ttf') format('truetype');
}

/* Pointeurs */
/** Pointeur classique **/
body {
  cursor:url('https://images.wikia.nocookie.net/disney/images/5/5c/Mouse.png'), auto;
}

/** Indicateur de lien **/
a, input {
  cursor: url('https://images.wikia.nocookie.net/disney/images/b/b4/Mousehover.png'), auto;
}

/* Couleurs */
:root{
    --background: #E3F1FF;
    
    --disneylandParis1: #253b56;
    --disneylandParis2: #44d6ff;
    
    --film: #332E24;
    
    --year1: #23446B;
    --year2: #9D99D1;
    --year3: #2E249E;
}

/* Sommaire des articles */
#toc {
    border-radius: 0.4em 0.4em 0.4em 0.4em;
    position: relative;
    color: black;
    border: 3px solid #D18679;
}

#toc::after {
    background: #ffffff url(https://images.wikia.nocookie.net/lemondededisney/fr/images/a/a8/Bête-artwork.gif) no-repeat right bottom;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    content: "";
}

#toc a{color: black;}
#toc a:hover{text-decoration: none;}

#toc ol a {
    color: black;
    transition: 0.2s;
}

#toc ol a:hover,
#toc ol a:hover::before {
    background: #D18679;
    color: white;
}

#toctitle {
    background: #D18679;
    color: white;
}

#toctitle a {
    color: white;
}

#toctitle h2 {
    font-weight: 700;
}

.nav.toc li:before {
    content: counters(item,".") ". ";
}

/* Tabber */
.tabberlive {
    border-bottom: 1px solid #AAAAFF;
}
.tabbertab {
    border: none !important;
    padding: 0 !important;
}
.tabbernav {
    background: #AAAAFF;
    border: 1px solid #eee !important;
    padding: 0 !important;
    text-align: center;
    font-family: Roboto !important;
    border-radius: 4px;
    font-size: 15px !important;
    line-height: 15px !important;
    justify-content: space-around;
    display: flex;
}
.tabbernav li {
    font-size: 15px !important;
    line-height: 15px !important;
}
.tabbernav li a {
    border: none !important;
    margin: 0 !important;
    padding: 10px 5px !important;
    background: transparent !important;
    color: black !important;
    transition-duration: 0.15s;
    cursor: default;
    font-weight: normal !important;
    font-size: 15px !important;
    line-height: 15px !important;
    display: inline-block;
}
.tabbernav .tabberactive a, .tabbernav li a:hover {
    color: white !important;
}
.tabbernav .tabberactive a, .tabbernav .tabberactive a:hover {
    background: #0000FF !important;
}
.tabbernav li a:hover {
    background: #5555FF !important;
}

/* Introductions */
.introduction {
    margin: 0 0 2em 0;
}

/* Correctif cadre image */
div.tright, div.tleft {border: 1px solid #40C0C0;}
 
div.thumbinner {
   background: inherit;
   border: none;
   color: inherit;
}
#article div.thumb {
   color:inherit;
}

.picture-attribution {display: none !important;}

/* Images en pleine largeur */
.image-large img { width: 100%; height: auto; }

/* Liens */
.liensblancs a {color: white;}
.liensbleus a {color: blue;}
.liensjaunes a {color: yellow;}
.liensnoirs a {color: black;}
.liensrouges a {color: red;}
.liensverts a {color: green;}
.liensbleumarine a {color: navy;}
.liensdores a {color: #ffd700;}

/*
** TITRES
*/

/** Titre principal */
h1 {
    font-size: 200%;
    font-family: Raleway;
}

/** Sous-titre */
.page-header__title span {
    display: block;
    font-size: 10pt;
    font-weight: 900;
    text-transform: uppercase;
    opacity: 87.5%;
    margin-top: 5px;
}

#new-title {
    display: none;
}

/**
** Titres de partie
**/
.mw-headline {
    font-family: Raleway;
}

.WikiaArticle h2 {
    border-bottom: none;
    padding-bottom: none;
}

h2 .mw-headline {
    font-size: 140%;
    font-weight: 900;
    line-height: normal;
    text-transform: uppercase;
}

.pi-theme-personnage ~ h2 .mw-headline {
    color: blue;
}

.pi-theme-personnage ~ ul.tabs li.selected a,
.pi-theme-personnage ~ div.tabBody.selected h2 .mw-headline {
    color: blue !important;
}

.pi-theme-personnage ~ ul.tabs li a {
    color: #0D8CFF !important;
}

.pi-theme-personnage ~ ul.tabs li a:hover {
    color: #0C46E8 !important;
    text-decoration: none !important;
}

.WikiaArticle h3 {
    margin-top: 1em;
    margin-bottom: .5em;
}

h3 .mw-headline, .tabbernav li a {
    text-transform: uppercase;
}

h3 .mw-headline {
    font-size: 130%;
    font-weight: 900;
    line-height: normal;
    padding: 5px;
}

.pi-theme-personnage ~ h3 .mw-headline {
    background-color: #0D8CFF;
    color: white;
}

h4 .mw-headline {
    font-size: 120%;
}

h5 .mw-headline {
    font-size: 110%;
}

h6 .mw-headline {
    font-size: 100%;
}

h4 .mw-headline, h5 .mw-headline, h6 .mw-headline {
    font-weight: 600;
}

.pi-theme-personnage ~ h4 .mw-headline,
.pi-theme-personnage ~ h5 .mw-headline, 
.pi-theme-personnage ~ h6 .mw-headline {
    color: #0C46E8;
}

/** Styles des boîtes déroulantes, voir [[Modèle:Boîte déroulante/Documentation]]. **/
div.NavPic {
 background:#FFF;
 margin:0;
 padding:2px;
 float:left;
}
 
div.NavEnd {
 margin:0;
 padding:0;
 line-height:1px;
 clear:both;
}
 
.NavToggle {
 font-size:90%;
 float:right;
}
 
.navboxToggle {
 font-size:90%;
 font-weight:normal;
 float:right !important;
}
 
/** Modèle de palettes groupées, [[Modèle:Palette]] **/ 
 
div.navbox_group {
border: 1px solid #aaaaaa;
margin-top: 15px;
}
div.navbox_group table.navbox {
border: 0;
margin: 0;
}
 
/* Fin styles de [[Modèle:Méta palette de navigation]] */

/* Boîtes déroulantes */
.collapseButton {
        font-weight: normal;
        float: right;
        textAlign: right;
	width: 6em;
	marginLeft: -100%;
}

/**** Aspects spécifiques ****/

/* Distribution */
.distribution {
    border-collapse: collapse;
    border: 1px solid var(--film);
    width: 100%;
    color: var(--film);
    background: var(--background);
    font-size: 8pt;
    line-height: normal;
}

.distribution a {
    color: var(--film);
}

.distribution img {
    width: 100%;
    height: auto;
}

.distribution td:nth-child(1) {
    padding: 5px 2.5px 5px 5px;
}

.distribution td:nth-child(2), .distribution td:nth-child(3) {
    padding: 5px 2.5px;
}

.distribution td:nth-child(4) {
    padding: 5px 5px 5px 2.5px;
}

.distribution tr:nth-child(n+1) {
    border-bottom: 1px solid var(--film);
}
    
.distribution th {
    background: var(--film);
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: left;
}

.distribution th:nth-child(1) {
    padding-left: 5px;
}

.distribution th:nth-child(n+2) {
    padding-left: 2.5px;
}
    
.distribution th a {
    color: white;
}

/* Modèle:Succession */
.succession {
    width: 100%;
    font-size: 12px;
    background: white;
    text-align: center;
}

.succession th {
    color: white;
}

.succesion th a {
    color: white;
}

.succession #titre{
    background: black;
}

.succession #sous-titre{
    background: #555555;
}

.succesion #cellule {
    background: #AAAAAA;
}

/* Sections Jeux vidéo */
.jeux_video{
    width: 100%;
    background: white;
    font-size: 12px;
}

.jeux_video th{
    color: white;
}

.jeux_video th a{
    color: white;
}

.jeux_video .titre{
    background: blue;
}

.jeux_video .sous-titre{
    background: #8080ff;
}

/* class pour la page DisneyPlus (inspiré du Centre des communautés) */
.programmedisney { 
  background: transparent url(https://vignette.wikia.nocookie.net/lemondededisney/images/c/cb/DisneyPlus_Mickey.png/revision/20200414154851?path-prefix=fr) center left no-repeat !important; 
  padding-left: 14px !important;
}
.programmepixar {
  background: transparent url(https://vignette.wikia.nocookie.net/lemondededisney/images/c/cb/DisneyPlus_Mickey.png/revision/20200126152748?path-prefix=fr) center left no-repeat !important; 
  padding-left: 14px !important;
}
.programmemarvel {
  background: transparent url(https://vignette.wikia.nocookie.net/lemondededisney/images/c/cb/DisneyPlus_Mickey.png/revision/20200126152548?path-prefix=fr) center left no-repeat !important; 
  padding-left: 14px !important;
}
.programmestarwars { 
  background: transparent url(https://vignette.wikia.nocookie.net/lemondededisney/images/c/cb/DisneyPlus_Mickey.png/revision/latest?cb=20200414154852&path-prefix=fr) center left no-repeat !important; 
  padding-left: 14px !important;
}
.programmenationalgeographic { 
  background: transparent url(https://vignette.wikia.nocookie.net/lemondededisney/images/c/cb/DisneyPlus_Mickey.png/revision/20200126152526?path-prefix=fr) center left no-repeat !important; 
  padding-left: 14px !important;
}
.programmeautre { 
  background: transparent url(https://vignette.wikia.nocookie.net/lemondededisney/images/c/cb/DisneyPlus_Mickey.png/revision/20200126152809?path-prefix=fr) center left no-repeat !important; 
  padding-left: 14px !important;
}

/*
** Année
*/
#annee {
    background-color: var(--background);
}

#annee .tabbernav {
    border: none !important;
    border-radius: 0;
    background: #9d99d1;
}

#annee .tabbernav li a {
    font-family: Raleway;
    font-size: 8pt !important;
    font-weight: 900 !important;
}

#annee .tabbernav li a:hover {
    background-color: #2E249E !important;
}

#annee .tabbernav .tabberactive a {
    background-color: #23446B !important;
}

#annee .tabberlive {
    border: none;
}

#annee .tabbertab > p {
    display: none;
}

.mois {
    border-collapse: collapse;
    font-family: Roboto;
    flex-grow: 1;
    font-size: 10pt;
    line-height: 14pt;
    width: 100%;
}

.mois th {
    font-family: Raleway;
    font-weight: 900;
    padding: 5px 5px 5px 10px;
    border-bottom: 1px solid #9d99d1;
    vertical-align: top;
}

.mois td {
    padding: 5px 10px 5px 5px;
    border-bottom: 1px solid #9d99d1;
}

.mois th:empty, .mois td:empty {
    display: none;
}

#chronologie {
    border: none;
    color: var(--year2);
    background: var(--year1);
    margin: 20px auto 0 auto;
    font-family: Raleway;
    font-size: 12pt;
    font-weight : 700;
}

#chronologie th {
    font-size: 20pt;
    font-weight : 900;
    padding: 5px 20px;
}

#chronologie td {
    padding: 0 10px;
}

#chronologie a {
    color: var(--year2);
}

#chronologie a:hover {
    color: var(--background);
    text-decoration: none;
}

/*
** Articles détaillés
*/
.article-detaille {
    background: var(--background);
    color: blue;
    font-size: 9pt;
    font-family: Roboto;
    padding: 1px 50px 1px 1px;
    line-height: 10pt;
}

.article-detaille tr:first-child td:first-child {
    width: 55px;
}

.article-detaille img {
    width: 50px;
    height: 50px;
    margin-right: 5px;
}

.article-detaille .amorce {
    font-size: 8pt;
    font-weight: 900;
    font-family: Raleway;
    text-transform: uppercase;
    color: grey;
    vertical-align: bottom;
}

.article-detaille tr:nth-child(2) td {
    vertical-align: top;
}

.article-detaille a {
    color: blue;
    font-weight: bold;
    transition: color 0.2s;
}

.article-detaille a:hover {
    color: green;
    text-decoration: none;
}

.article-detaille .source a {
    font-weight: normal;
}

/* Prévisualisation */
.npage-preview {
    background: var(--background) !important;
    font-family: Roboto;
    font-size: 9pt !important;
    width: 400px !important;
    max-height: 200px !important;
    display: flex !important;
    line-height: 14.5pt;
}

.npage-preview img {
    min-width: none !important;
    max-width: 200px !important;
    max-height: 200px !important;
    padding-top: 0 !important;
}