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

Version du 14 mai 2024 à 21:31

/*====================*/
/* 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");*/