MediaWiki:Common.css
De gahan
Révision datée du 14 mai 2024 à 21:31 par Helyss (discussion | contributions)
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).
- Internet Explorer / Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
- Opera : appuyez sur Ctrl + F5.
/*====================*/
/* VARIABLES GLOBALES */
/* ET */
/* BASES */
/*====================*/
* {
--color_main: #661810; /*Couleur général des titres, bullet, box, etc.
}
/*====================*/
/* BODY et BASE */
/*====================*/
body {
font-family: Calibri, Verdana, sans-serif;
/*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";*/
font-size: 78%;
background-image: none;
background-color: #DEDEDE; /*Fond du wiki
}
/*====================*/
/* HEADER */
/*====================*/
/* h1, h2, h3, h4, h5, h6 { font-family: 'Linux Libertine', 'Georgia', 'Times', serif;} */
h1, h2, h3 {
color: var(--color_main);
}
h1 {
font-size: 230%;
font-weight: bold;
font-variant-caps: small-caps;
}
h1::before {
/* content: '⛊ ';*/
content: '🜋 ';
font-size: 90%;
}
h2 {
font-size: 190%;
font-weight: bold;
font-variant-caps: small-caps;
}
h2::before {
/* content: '☗ ';*/
content: '🜊 ';
font-size: 90%;
}
h3 {
font-size: 160%;
font-weight: bold;
font-variant-caps: small-caps;
}
h4 {
font-size: 140%;
font-weight: bold;
font-variant-caps: small-caps;
}
h5 {
font-size: 125%;
font-weight: bold;
}
h6 {
font-size: 110%;
font-weight: bold;
}
/*====================*/
/* SOMMAIRE (TOC) */
/*====================*/
#toc {
font-size: 90%;
border: none; /* Supprime le bord */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
position: fixed;
top: 10%; /* Position à 10% de la hauteur de la fenêtre */
right: -1px;
max-height: calc(90vh - 150px); /* Ajustez cette valeur selon vos besoins */
overflow-y: auto;
background-color: #E5E5E5;
width: 250px; /* Largeur fixe du TOC */
}
/*====================*/
/* Main du site ? */
/*====================*/
#mw-content-text { /* Fond du bloc général de texte */
margin-right: 280px;
}
.mw-content-padding {
padding: 20px;
}
/*====================*/
/* HORIZONTAL LIST */
/*====================*/
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
margin: 0;
display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
display: inline;
}
.hlist dd:after,
.hlist li:after {
content: " • ";
color: bold;
}
/*====================*/
/* INFOBOX */
/*====================*/
.infobox {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
float: right;
background-color :#EEEEEE;
margin-left: 10px;
font-size: 80%;
float: right;
line-height: 1.7;
}
.infoboxtitle {
text-align: center;
font-weight: bold;
background-color: var(--color_main);
color: white;
font-size: 115%;
}
/*====================*/
/* LIEN HYPERTEXTE */
/*====================*/
a:visited {
color: #0645AD !important; /* Couleur bleue classique des liens */
}
/*====================*/
/* QUOTE */
/*====================*/
q {
font-style: italic;
}
p {
margin: 0;
line-height: 1.4;
}
/*====================*/
/* PUCES */
/*====================*/
ul {
list-style-type: none;
list-style-image: none;
list-style-type: "\002B27";
list-style-position: outside;
}
ul ul {
list-style-type: none;
list-style-image: none;
list-style-type: "\002B28";
}
ul ul ul {
list-style-type: none;
list-style-image: none;
list-style-type: "\002B2A";
}
li::marker {
/* color: #5F5F5F;*/
color: var(--color_main);
}
li {
padding-left: 0.2em
}
/*====================*/
/* mw-collapsible */
/*====================*/
.mw-collapsible span.mw-collapsible-toggle {
float:left;
margin-left:0;
margin-right:1em;
background-color: #FAFAFA;
}
/*.mw-collapsible-content img {*/
/* display: none;*/
/*}*/
.mw-collapsible-content {
padding-left: 10px;
padding-top: 1.5em;
}
/*====================*/
/* BLOCS */
/*====================*/
.section-title {
box-shadow: rgba(0, 0, 0, 0.25) 0px 12px 14px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
padding: 0.2em 1em;
font-size: 150%;
font-weight: bold;
font-variant-caps: small-caps;
color: #FFFFFF;
background-color: var(--color_main);
border-style: solid;
border-width: 1px;
border-color: #D9D9D9;
}
.section-content {
box-shadow: rgba(0, 0, 0, 0.25) 0px 12px 14px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
padding: 1em;
background-color: #F5F5F5;
border-style: solid;
border-width: 0 1px 1px 1px;
border-color: #D9D9D9;
}
.section-100 {width: 99%; padding: 10px 0.5%;}
.section-90 {float: left; width: 89%; padding: 10px 0.5%;}
.section-80 {float: left; width: 79%; padding: 10px 0.5%;}
.section-70 {float: left; width: 69%; padding: 10px 0.5%;}
.section-60 {float: left; width: 59%; padding: 10px 0.5%;}
.section-50 {float: left; width: 49%; padding: 10px 0.5%;}
.section-40 {float: left; width: 39%; padding: 10px 0.5%;}
.section-30 {float: left; width: 29%; padding: 10px 0.5%;}
.section-20 {float: left; width: 19%; padding: 10px 0.5%;}
.section-10 {float: left; width: 9%; padding: 10px 0.5%;}
pre,.mw-code {
font-size: 11px !important;
}
/*====================*/
/* IMG DYNAMIC SIZE */
/*====================*/
.image-10w, .image-20w, .image-30w, .image-40w, .image-50w, .image-60w, .image-70w, .image-80w, .image-90w, .image-100w {
height: auto;
float: left;
}
.image-10w {width: 10%;}
.image-20w {width: 20%;}
.image-30w {width: 30%;}
.image-40w {width: 40%;}
.image-50w {width: 50%;}
.image-60w {width: 60%;}
.image-70w {width: 70%;}
.image-80w {width: 80%;}
.image-90w {width: 90%;}
.image-100w {width: 100%;}
/*====================*/
/* ZOOM DE CARTE */
/*====================*/
.structure {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1024px;
height: 768px;
display: grid;
grid-template: repeat(6, 1fr)/repeat(6, 1fr);
}
.cell {
/* border: 1px solid gray; */
background-color: transparent;
z-index: 1;
}
.cell:nth-child(n):hover ~ .mapcontent {--zoom: 1.75;}
.cell:nth-child(1):hover ~ .mapcontent {--posX: 0%; --posY: 0%;}
.cell:nth-child(2):hover ~ .mapcontent {--posX: 20%; --posY: 0%;}
.cell:nth-child(3):hover ~ .mapcontent {--posX: 40%; --posY: 0%;}
.cell:nth-child(4):hover ~ .mapcontent {--posX: 60%; --posY: 0%;}
.cell:nth-child(5):hover ~ .mapcontent {--posX: 80%; --posY: 0%;}
.cell:nth-child(6):hover ~ .mapcontent {--posX: 100%; --posY: 0%;}
.cell:nth-child(7):hover ~ .mapcontent {--posX: 0%; --posY: 20%;}
.cell:nth-child(8):hover ~ .mapcontent {--posX: 20%; --posY: 20%;}
.cell:nth-child(9):hover ~ .mapcontent {--posX: 40%; --posY: 20%;}
.cell:nth-child(10):hover ~ .mapcontent {--posX: 60%; --posY: 20%;}
.cell:nth-child(11):hover ~ .mapcontent {--posX: 80%; --posY: 20%;}
.cell:nth-child(12):hover ~ .mapcontent {--posX: 100%; --posY: 20%;}
.cell:nth-child(13):hover ~ .mapcontent {--posX: 0%; --posY: 40%;}
.cell:nth-child(14):hover ~ .mapcontent {--posX: 20%; --posY: 40%;}
.cell:nth-child(15):hover ~ .mapcontent {--posX: 40%; --posY: 40%;}
.cell:nth-child(16):hover ~ .mapcontent {--posX: 60%; --posY: 40%;}
.cell:nth-child(17):hover ~ .mapcontent {--posX: 80%; --posY: 40%;}
.cell:nth-child(18):hover ~ .mapcontent {--posX: 100%; --posY: 40%;}
.cell:nth-child(19):hover ~ .mapcontent {--posX: 0%; --posY: 60%;}
.cell:nth-child(20):hover ~ .mapcontent {--posX: 20%; --posY: 60%;}
.cell:nth-child(21):hover ~ .mapcontent {--posX: 40%; --posY: 60%;}
.cell:nth-child(22):hover ~ .mapcontent {--posX: 60%; --posY: 60%;}
.cell:nth-child(23):hover ~ .mapcontent {--posX: 80%; --posY: 60%;}
.cell:nth-child(24):hover ~ .mapcontent {--posX: 100%; --posY: 60%;}
.cell:nth-child(25):hover ~ .mapcontent {--posX: 0%; --posY: 80%;}
.cell:nth-child(26):hover ~ .mapcontent {--posX: 20%; --posY: 80%;}
.cell:nth-child(27):hover ~ .mapcontent {--posX: 40%; --posY: 80%;}
.cell:nth-child(28):hover ~ .mapcontent {--posX: 60%; --posY: 80%;}
.cell:nth-child(29):hover ~ .mapcontent {--posX: 80%; --posY: 80%;}
.cell:nth-child(30):hover ~ .mapcontent {--posX: 100%; --posY: 80%;}
.cell:nth-child(31):hover ~ .mapcontent {--posX: 0%; --posY: 100%;}
.cell:nth-child(32):hover ~ .mapcontent {--posX: 20%; --posY: 100%;}
.cell:nth-child(33):hover ~ .mapcontent {--posX: 40%; --posY: 100%;}
.cell:nth-child(34):hover ~ .mapcontent {--posX: 60%; --posY: 100%;}
.cell:nth-child(35):hover ~ .mapcontent {--posX: 80%; --posY: 100%;}
.cell:nth-child(36):hover ~ .mapcontent {--posX: 100%; --posY: 100%;}
.mapcontent {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
--zoom: 0;
--posX: 0%;
--posY: 0%;
overflow: hidden;
}
.mapzoom img {
transform: scale(calc(var(--zoom) * 1 + 1));
transform-origin: var(--posX) var(--posY);
transition: all 1.5s;
}
.map {
width: 50%;
}
/*====================*/
/* TIMELINE */
/*====================*/
.timeline {
width: 100%;
height: 50px;
background-color: #EEEEEE;
}
.period {
float: left;
height: 50px;
color: white;
font-size: 90%;
text-align: center;
vertical-align:middle;
line-height: 50px;
background-color: var(--color_main);
border: solid;
border-color: #EEEEEE;
border-left-width: 2px;
border-right-width: 0px;
border-top-width: 2px;
border-bottom-width: 2px;
box-sizing: border-box;
}
/*====================*/
/* TEST */
/*====================*/
.parallax {
height: auto;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.parallax1 {
background-image: url("http://www.jammerjun.net/gahan/images/b/b4/Lande_1.jpg");
}
/*background-image: url("http://www.jammerjun.net/gahan/Lande_1.jpg");*/
