Mudanças entre as edições de "MediaWiki:Common.css"
De Priston Tale Wiki
| Linha 1: | Linha 1: | ||
| − | /* | + | /* ------------------------------------------------------ */ |
| + | /* --------- Ajouté dans le Common depuis Docs ---------- */ | ||
| + | /* ------------------------------------------------------ */ | ||
| − | + | /* .mw-body */ | |
| − | + | .mw-body { padding-bottom: 2rem !important; } | |
| − | .mw- | + | |
| − | .mw- | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| + | /* ---- Tables ---- */ | ||
| + | .wikitable p{ margin-bottom: 0 !important } | ||
| + | .wikitable.align-left th { text-align: left; } | ||
| + | /* Tables, header fixed */ | ||
| + | .wikitable{ display: inline-block; } | ||
| + | .wikitable thead, | ||
| + | .wikitable > tbody tr:first-of-type { | ||
| + | position: sticky; | ||
| + | top: 0; | ||
| + | z-index: 1; | ||
| + | } | ||
| + | /* Fallback lorsqu’il n’y a pas thead (= Si la classe sortable n’est pas présente) | ||
| + | Le HTML réel est <table class="wikitable sortable"><tbody><tr><th> */ | ||
| + | .wikitable thead + tbody tr:first-of-type { position: inherit; } | ||
| − | /* | + | /* Décalage VisualEditor */ |
| + | .ve-active .wikitable thead, | ||
| + | .ve-active .wikitable:not(.littleTable) > tbody tr:first-of-type { top: 48px; } | ||
| + | @media screen and (max-width:1200px) { | ||
| + | .ve-active .wikitable:not(.littleTable) thead, | ||
| + | .ve-active .wikitable:not(.littleTable) > tbody tr:first-of-type { top: 96px; } | ||
| + | } @media screen and (max-width:541px) { | ||
| + | .ve-active .wikitable:not(.littleTable) thead, | ||
| + | .ve-active .wikitable:not(.littleTable) > tbody tr:first-of-type { top: 144px; } | ||
| + | } | ||
| − | + | /* ---- Mise en forme du code ---- */ | |
| − | + | pre, | |
| + | code { | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
} | } | ||
| − | + | /* ---- Snippet ---- */ | |
| − | /* | + | .snippet { |
| − | + | position: relative; | |
| − | . | + | overflow: visible; |
| − | + | margin: -1.5rem 0 0 0; | |
| − | + | padding: 0; | |
| − | + | color: aqua; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | .snippet .btn { |
| − | + | top: 20px; | |
| + | right: 1px; | ||
| + | -webkit-transition: opacity .3s ease-in-out; | ||
| + | -o-transition: opacity .3s ease-in-out; | ||
| + | transition: opacity .3s ease-in-out; | ||
| + | opacity: 0; | ||
| + | position: absolute; | ||
| + | z-index: 2; | ||
} | } | ||
| − | . | + | .snippet:hover .btn, |
| − | + | .snippet .btn:focus { | |
| + | opacity: 1; | ||
} | } | ||
| − | + | @media screen and (max-width:768px) { | |
| − | . | + | .snippet .btn { opacity: 1; } |
| − | + | ||
} | } | ||
| − | . | + | code.break-all { word-break: break-all; } |
| − | + | ||
| − | . | + | /* ---- Anti-rules ---- |
| − | + | Les anti-rules permettent d'annuler les modifications forcées comme le fixed header des tables */ | |
| − | + | /* noFixedHeader */ | |
| − | + | .noFixedHeader thead, | |
| + | .noFixedHeader > tbody tr:first-of-type { position: static !important; } | ||
| + | |||
| + | /* ---- Add-rules ---- | ||
| + | Les Add-rules permettent d'ajouter une fonctionnalité CSS */ | ||
| + | /* littleTable (Permet le scroll dans les tables) */ | ||
| + | .littleTable { | ||
| + | max-height: 700px !important; | ||
| + | overflow-y: scroll !important; | ||
} | } | ||
| − | + | ||
| − | + | /* noBold (Pour les emojis principalement) */ | |
| − | + | .noBold { | |
| + | font-weight: normal !important; | ||
} | } | ||
| − | + | ||
| − | . | + | /* printonly (Que à l’impression) */ |
| − | + | .printonly { | |
| + | display: none; | ||
} | } | ||
| − | . | + | |
| − | + | /* ------------------------------------------------------ */ | |
| − | + | /* --------------- De base dans le Common --------------- */ | |
| + | /* ------------------------------------------------------ */ | ||
| + | |||
| + | /* Fonts */ | ||
| + | @font-face { font-family: 'Rubik-Medium'; src: url('./resources/assets/webfont/Rubik-Medium.ttf') format('truetype'); } | ||
| + | @font-face { font-family: 'open_sansregular'; src: url('./resources/assets/webfont/OpenSans-Regular-webfont.woff'); } | ||
| + | |||
| + | /* ---- Better display with Lingo ---- */ | ||
| + | .mw-lingo-definition-text, mw-lingo-term { font-size: 1.3em; line-height: 2em; } | ||
| + | |||
| + | /* ---- On account creation : Wiki's stats ---- */ | ||
| + | .mw-createacct-benefits-container { float: right; } | ||
| + | |||
| + | /* ---- Titles ---- */ | ||
| + | h1 { | ||
| + | font-family: 'Rubik-Medium', sans-serif; | ||
| + | font-size: 2.5em; | ||
| + | color: steelblue; | ||
} | } | ||
| − | + | .mw-special-FormEdit h1 { font-size: 2em; } | |
| − | + | h2 { | |
| − | + | font-size: 2em; | |
| − | + | color: darkcyan; | |
| − | + | ||
} | } | ||
| − | + | h3 { | |
| − | . | + | font-size: 1.8em; |
| − | + | color: mediumseagreen; | |
} | } | ||
| − | + | h4 { | |
| − | + | font-size: 1.6em; | |
| − | . | + | color: #00b5b5; |
| − | + | font-family: 'Rubik-Medium', sans-serif; | |
} | } | ||
| − | + | h5 { | |
| − | + | font-size: 1.4em; | |
| − | + | color: #00b5b0; | |
} | } | ||
| − | + | h6 { | |
| − | + | font-size: 1.2em; | |
| + | color: #0fb5b0; | ||
} | } | ||
| − | + | ||
| − | + | /* ---- General ---- */ | |
| + | body { | ||
| + | color: #555e65; | ||
| + | font-family: "open_sansregular", sans-serif; | ||
} | } | ||
| − | + | #toc { float: right; } | |
| − | . | + | .fa-2x { font-size: 1em; } |
| − | + | ||
| − | + | /* ---- Buttons ---- */ | |
| − | . | + | #bodyContent .lienbutton a, #bodyContent .lienbutton a:hover { |
| − | . | + | background: none !important; |
| − | + | padding: 0 !important; | |
| − | + | color: #ffffff !important; | |
| − | + | font-weight: bold; | |
| − | + | text-decoration: none; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | #bodyContent .lienbuttonblanc a, #bodyContent .lienbuttonblanc a:hover { |
| − | + | background: none !important; | |
| − | + | padding: 0 !important; | |
| − | . | + | color: #000000 !important; |
| − | + | font-weight: bold; | |
| − | + | text-decoration:none; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | /* ---- Space on top of themes in article list ---- */ | |
| − | . | + | .page-Accueil #mw-content-text p { margin-top: 1em; } |
| − | + | .page-Liste_des_articles #mw-content-text p { margin-top: 1em; } | |
| − | } | + | |
| − | . | + | /* ---- Hides ---- */ |
| − | + | /* Subcat on page-Catégorie_Topic */ | |
| − | + | .page-Catégorie_Topic h2, .page-Catégorie_Topic h2 p { display:none; } | |
| − | } | + | /* Infobox when editing with Visual Editor */ |
| + | .ve-ui-surface #infoboxArticle { display:none; } | ||
| + | /* Cat on main NS */ | ||
| + | .ns-0 #catlinks, #mw-normal-catlinks { display:none; } | ||
| + | /* Elements from drilldown-categories-wrapper and in special:browsedata .printfooter */ | ||
| + | .page-Accueil #firstHeading, #drilldown-categories-wrapper, .ca-nstab-special {display:none;} | ||
| + | #p-contentnavigation { margin-bottom: 0.1rem; } | ||
| + | #firstHeading { margin-top: 0.1rem; } | ||
| + | /* Subject champ in contact form */ | ||
| + | #mw-input-wpSubject {display:none;} | ||
| + | .page-Spécial_Contact #siteNotice {display:none;} | ||
| − | + | /* ------------------------------------------------------ */ | |
| − | + | /* --------------------- Inclure ? ---------------------- */ | |
| − | + | /* ------------------------------------------------------ */ | |
| − | + | ||
| − | + | /* ---- Couleurs ---- */ | |
| − | + | /** Jaune **/ | |
| − | } | + | .gold{ color: gold; } |
| − | + | /** Rouge**/ | |
| − | . | + | .firebrick{ color: firebrick; } |
| − | . | + | |
| − | + | /** Violet **/ | |
| − | + | .slateblue { color: slateblue; } | |
| − | } | + | .darkslateblue { color: darkslateblue; } |
| − | . | + | |
| − | . | + | /**Orange**/ |
| − | . | + | .orangered{ color: orangered; } |
| − | + | .darkorange { color: darkorange; } | |
| − | + | .coral{ color: coral; } | |
| − | } | + | .tomato{ color: tomato; } |
| + | |||
| + | /**Vert**/ | ||
| + | .forestgreen { color:forestgreen; } | ||
| + | .seagreen { color:seagreen ; } | ||
| + | .mediumaquamarine { color:mediumaquamarine; } | ||
| + | .darkgreen { color: darkgreen; } | ||
| − | /* * | + | /** Cyan **/ |
| + | .teal { color:teal; } | ||
| + | .darkslateblue { color: darkslateblue; } | ||
| + | .darkcyan { color: darkcyan; } | ||
| + | .darkslategray{ color: darkslategray; } | ||
| + | .steelblue{ color: steelblue; } | ||
| + | .cadetblue { color:cadetblue ; } | ||
Edição das 04h35min de 19 de janeiro de 2022
/* ------------------------------------------------------ */
/* --------- Ajouté dans le Common depuis Docs ---------- */
/* ------------------------------------------------------ */
/* .mw-body */
.mw-body { padding-bottom: 2rem !important; }
/* ---- Tables ---- */
.wikitable p{ margin-bottom: 0 !important }
.wikitable.align-left th { text-align: left; }
/* Tables, header fixed */
.wikitable{ display: inline-block; }
.wikitable thead,
.wikitable > tbody tr:first-of-type {
position: sticky;
top: 0;
z-index: 1;
}
/* Fallback lorsqu’il n’y a pas thead (= Si la classe sortable n’est pas présente)
Le HTML réel est <table class="wikitable sortable"><tbody><tr><th> */
.wikitable thead + tbody tr:first-of-type { position: inherit; }
/* Décalage VisualEditor */
.ve-active .wikitable thead,
.ve-active .wikitable:not(.littleTable) > tbody tr:first-of-type { top: 48px; }
@media screen and (max-width:1200px) {
.ve-active .wikitable:not(.littleTable) thead,
.ve-active .wikitable:not(.littleTable) > tbody tr:first-of-type { top: 96px; }
} @media screen and (max-width:541px) {
.ve-active .wikitable:not(.littleTable) thead,
.ve-active .wikitable:not(.littleTable) > tbody tr:first-of-type { top: 144px; }
}
/* ---- Mise en forme du code ---- */
pre,
code {
margin: 0;
padding: 0;
}
/* ---- Snippet ---- */
.snippet {
position: relative;
overflow: visible;
margin: -1.5rem 0 0 0;
padding: 0;
color: aqua;
}
.snippet .btn {
top: 20px;
right: 1px;
-webkit-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
opacity: 0;
position: absolute;
z-index: 2;
}
.snippet:hover .btn,
.snippet .btn:focus {
opacity: 1;
}
@media screen and (max-width:768px) {
.snippet .btn { opacity: 1; }
}
code.break-all { word-break: break-all; }
/* ---- Anti-rules ----
Les anti-rules permettent d'annuler les modifications forcées comme le fixed header des tables */
/* noFixedHeader */
.noFixedHeader thead,
.noFixedHeader > tbody tr:first-of-type { position: static !important; }
/* ---- Add-rules ----
Les Add-rules permettent d'ajouter une fonctionnalité CSS */
/* littleTable (Permet le scroll dans les tables) */
.littleTable {
max-height: 700px !important;
overflow-y: scroll !important;
}
/* noBold (Pour les emojis principalement) */
.noBold {
font-weight: normal !important;
}
/* printonly (Que à l’impression) */
.printonly {
display: none;
}
/* ------------------------------------------------------ */
/* --------------- De base dans le Common --------------- */
/* ------------------------------------------------------ */
/* Fonts */
@font-face { font-family: 'Rubik-Medium'; src: url('./resources/assets/webfont/Rubik-Medium.ttf') format('truetype'); }
@font-face { font-family: 'open_sansregular'; src: url('./resources/assets/webfont/OpenSans-Regular-webfont.woff'); }
/* ---- Better display with Lingo ---- */
.mw-lingo-definition-text, mw-lingo-term { font-size: 1.3em; line-height: 2em; }
/* ---- On account creation : Wiki's stats ---- */
.mw-createacct-benefits-container { float: right; }
/* ---- Titles ---- */
h1 {
font-family: 'Rubik-Medium', sans-serif;
font-size: 2.5em;
color: steelblue;
}
.mw-special-FormEdit h1 { font-size: 2em; }
h2 {
font-size: 2em;
color: darkcyan;
}
h3 {
font-size: 1.8em;
color: mediumseagreen;
}
h4 {
font-size: 1.6em;
color: #00b5b5;
font-family: 'Rubik-Medium', sans-serif;
}
h5 {
font-size: 1.4em;
color: #00b5b0;
}
h6 {
font-size: 1.2em;
color: #0fb5b0;
}
/* ---- General ---- */
body {
color: #555e65;
font-family: "open_sansregular", sans-serif;
}
#toc { float: right; }
.fa-2x { font-size: 1em; }
/* ---- Buttons ---- */
#bodyContent .lienbutton a, #bodyContent .lienbutton a:hover {
background: none !important;
padding: 0 !important;
color: #ffffff !important;
font-weight: bold;
text-decoration: none;
}
#bodyContent .lienbuttonblanc a, #bodyContent .lienbuttonblanc a:hover {
background: none !important;
padding: 0 !important;
color: #000000 !important;
font-weight: bold;
text-decoration:none;
}
/* ---- Space on top of themes in article list ---- */
.page-Accueil #mw-content-text p { margin-top: 1em; }
.page-Liste_des_articles #mw-content-text p { margin-top: 1em; }
/* ---- Hides ---- */
/* Subcat on page-Catégorie_Topic */
.page-Catégorie_Topic h2, .page-Catégorie_Topic h2 p { display:none; }
/* Infobox when editing with Visual Editor */
.ve-ui-surface #infoboxArticle { display:none; }
/* Cat on main NS */
.ns-0 #catlinks, #mw-normal-catlinks { display:none; }
/* Elements from drilldown-categories-wrapper and in special:browsedata .printfooter */
.page-Accueil #firstHeading, #drilldown-categories-wrapper, .ca-nstab-special {display:none;}
#p-contentnavigation { margin-bottom: 0.1rem; }
#firstHeading { margin-top: 0.1rem; }
/* Subject champ in contact form */
#mw-input-wpSubject {display:none;}
.page-Spécial_Contact #siteNotice {display:none;}
/* ------------------------------------------------------ */
/* --------------------- Inclure ? ---------------------- */
/* ------------------------------------------------------ */
/* ---- Couleurs ---- */
/** Jaune **/
.gold{ color: gold; }
/** Rouge**/
.firebrick{ color: firebrick; }
/** Violet **/
.slateblue { color: slateblue; }
.darkslateblue { color: darkslateblue; }
/**Orange**/
.orangered{ color: orangered; }
.darkorange { color: darkorange; }
.coral{ color: coral; }
.tomato{ color: tomato; }
/**Vert**/
.forestgreen { color:forestgreen; }
.seagreen { color:seagreen ; }
.mediumaquamarine { color:mediumaquamarine; }
.darkgreen { color: darkgreen; }
/** Cyan **/
.teal { color:teal; }
.darkslateblue { color: darkslateblue; }
.darkcyan { color: darkcyan; }
.darkslategray{ color: darkslategray; }
.steelblue{ color: steelblue; }
.cadetblue { color:cadetblue ; }