|
Balises : Blanchiment Révocation manuelle |
| Ligne 1 : |
Ligne 1 : |
| /*====================*/
| |
| /* VARIABLES GLOBALES */
| |
| /* ET */
| |
| /* BASES */
| |
| /*====================*/
| |
| :root {
| |
| --color_main: #661810; /* Couleur général du site - Bordeaux */
| |
| --color_main2: #923F31; /* Couleur général +clair */
| |
| --color_main3: #CAADA8; /* Couleur général ++clair */
| |
| --color_main_dark: #47100B; /* Variation dark du color-main */
| |
| --color_gradient1: #496D27; /* ok */
| |
| --color_gradient2: #9F4A3B; /* ok */
| |
| --color_gradient3: #448086; /* ok */
| |
| --color_gradient4: #00BA97; /* pas testé */
| |
| --color_gradient5: #00DBF2; /* pas testé */
| |
| --color_home_h2: #4D1712;
| |
|
| |
|
| --a_link_title_icon: "⮊"; /* ▸▸, ⯈⯈, ⭲, ⮩, ⮊, ⤷, ⮑, ⇲*/
| |
| --a_link_title_color: #002C75; /* #0048BD */
| |
|
| |
| --color_main_grey1: #F5F5F5; /* Gris clair+ */
| |
| --color_main_grey2: #EAEAEA; /* Gris clair */
| |
| --color_main_grey3: #E0E0E0; /* Gris moyen */
| |
| --color_main_grey4: #D8D8D8; /* Gris foncé */
| |
| --color_main_grey5: #CACACA; /* Gris foncé+ */
| |
|
| |
| --color_a: #0858D9; /* Couleur des liens hypertexte #0645AD */
| |
| --color_a2: #BAC6FF; /* Couleur des liens hypertexte - Plus clair */
| |
|
| |
| --fs: 12px; /* Taille de police de base */
| |
| --ff: Calibri, sans-serif; /* Famille de police de base */
| |
| --fs_XXS: 85%; --fs_XS: 90%; --fs_S: 95%; --fs_M: 100%; --fs_L: 105%; --fs_XL: 110%; --fs_XXL: 115%; /* Taille de police modifiée */
| |
| --h1_size: 230%; --h2_size: 210%; --h3_size: 170%; --h4_size: 140%; --h5_size: 125%; --h6_size: 110%;
| |
|
| |
| --content_marg_left: 135px;
| |
| --content_marg_right: 195px;
| |
|
| |
| --ibox_size: 285px;
| |
| }
| |
|
| |
|
| |
| /* TEST */
| |
| .test {
| |
| text-shadow:0 0 4px #FF0000,0 0 50px #FF0000,0px 0px 14px #FF0000, 0 0 100px #FF0000, 0 0 150px #FF0000, 0 0 150px #FF0000, 0 0 550px #CA0000, 0 0 250px #CA0000, 0 0 350px #CA0000, 0 0 250px #CA0000;color:#FFD000;
| |
| background-color: var(--color_a);
| |
| }
| |
|
| |
|
| |
| /*====================*/
| |
| /* BODY et BASE */
| |
| /*====================*/
| |
| body {
| |
| background-image: none;
| |
| background-color: var(--color_main_grey3);
| |
| font-family: var(--ff);
| |
| font-size: var(--fs);
| |
| }
| |
|
| |
| #mw-page-base { /* Pour bandeau du haut de Vector */
| |
| background-image: none;
| |
| background-color: var(--color_main_grey3);
| |
| }
| |
|
| |
| .mw-body h1, .mw-body-content h1, .mw-body-content h2 {font-family: var(--ff);}
| |
|
| |
| .vector-body {font-size: 130%;} /* Correction pour Vector (mode déconnecté) */
| |
|
| |
|
| |
| /*====================*/
| |
| /* MAIN DU SITE */
| |
| /*====================*/
| |
| #content {
| |
| margin-left: var(--content_marg_left);
| |
| margin-right: var(--content_marg_right);
| |
| text-align: justify;
| |
| border-right: 1px solid #aaaaaa;
| |
| }
| |
|
| |
| #footer, .mw-footer {text-align: center;}
| |
|
| |
|
| |
| /*====================*/
| |
| /* HEADER */
| |
| /*====================*/
| |
| h1, h2, h3, h4, h5, h6, .mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 {
| |
| font-variant-caps: small-caps;
| |
| font-weight: bold;
| |
| color: var(--color_main);
| |
| padding-top: 0.1em;
| |
| padding-bottom: 0.1em;
| |
| padding-left: 0.2em;
| |
| margin-top: 0.5em;
| |
| line-height: 1em;
| |
| margin-bottom: 0.5em;
| |
| }
| |
|
| |
| h1, .mw-body h1 {
| |
| font-size: var(--h1_size);
| |
| background-color: var(--color_main);
| |
| /* border-radius: 5px 30px 5px 30px / 5px 20px 5px 20px; */
| |
| border-radius: 15px 15px 15px 15px;
| |
| color: white;
| |
| padding-left: 0.5em;
| |
| box-shadow: rgba(0, 0, 0, 0.22) 0px 10px 10px;
| |
| line-height: 1.3em;
| |
| }
| |
|
| |
| h2, .mw-body h2 {
| |
| font-size: var(--h2_size);
| |
| box-shadow: 0px 13px 10px -5px var(--color_main_grey4);
| |
| border-bottom: 3px solid var(--color_main);
| |
| margin-top: 0.7em;
| |
| }
| |
|
| |
| .page-Accueil h2 {
| |
| color: var(--color_home_h2);
| |
| border: 1px solid var(--color_home_h2);
| |
| border-bottom: 3px solid var(--color_home_h2);
| |
| border-right: 3px solid var(--color_home_h2);
| |
| border-radius: 10px;
| |
| box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
| |
| background-color: var(--color_main_grey1);
| |
| line-height: 1.15em;
| |
| /* border-radius: 15px 15px 0px 0px; */
| |
| /* background-color: var(--color_main3); */
| |
| /* border: 1px solid var(--color_main); */
| |
| /* border-bottom: 3px solid var(--color_main); */
| |
| /* padding-left: 0.5em; */
| |
| /* line-height: 1.3em; */
| |
| }
| |
|
| |
| h3, .mw-body h3 {
| |
| font-size: var(--h3_size);
| |
| border-bottom: 2px solid var(--color_main2);
| |
| /* border-image: linear-gradient(to right, var(--color_main), var(--color_main3)) 1; */
| |
| }
| |
|
| |
| h4, .mw-body h4 {
| |
| font-size: var(--h4_size);
| |
| color: black;
| |
| border-bottom: 1px solid var(--color_main2);
| |
| /* border-image: linear-gradient(to right, var(--color_main), white) 1; */
| |
| }
| |
|
| |
| h5, .mw-body h5 {font-size: var(--h5_size); color: black;}
| |
|
| |
| h6, .mw-body h6 {font-size: var(--h6_size); color: black;}
| |
|
| |
| /* Ajouter une icône après les titres contenant des liens, sauf pour les liens "MODIFIER" */
| |
| h1 a:not(.mw-editsection a), h2 a:not(.mw-editsection a), h3 a:not(.mw-editsection a),
| |
| h4 a:not(.mw-editsection a), h5 a:not(.mw-editsection a), h6 a:not(.mw-editsection a),
| |
| .mw-body h1 a:not(.mw-editsection a), .mw-body h2 a:not(.mw-editsection a),
| |
| .mw-body h3 a:not(.mw-editsection a), .mw-body h4 a:not(.mw-editsection a),
| |
| .mw-body h5 a:not(.mw-editsection a), .mw-body h6 a:not(.mw-editsection a) {
| |
| color: inherit; /* Conserver la couleur du titre */
| |
| text-decoration: none; /* Supprimer le soulignement par défaut des liens */
| |
| position: relative; /* Nécessaire pour le pseudo-élément */
| |
| }
| |
|
| |
| h1 a:not(.mw-editsection a)::after, h2 a:not(.mw-editsection a)::after, h3 a:not(.mw-editsection a)::after,
| |
| h4 a:not(.mw-editsection a)::after, h5 a:not(.mw-editsection a)::after, h6 a:not(.mw-editsection a)::after,
| |
| .mw-body h1 a:not(.mw-editsection a)::after, .mw-body h2 a:not(.mw-editsection a)::after,
| |
| .mw-body h3 a:not(.mw-editsection a)::after, .mw-body h4 a:not(.mw-editsection a)::after,
| |
| .mw-body h5 a:not(.mw-editsection a)::after, .mw-body h6 a:not(.mw-editsection a)::after {
| |
| font-family: -apple-system;
| |
| vertical-align: middle;
| |
| content: var(--a_link_title_icon);
| |
| font-size: 1em;
| |
| color: var(--a_link_title_color);
| |
| /* margin-left: 1em; */
| |
| /* border-radius: 15px 15px 15px 15px; */
| |
| /* background-color: var(--color_main_grey1); */
| |
| /* padding-left: 0.4em; padding-right: 0.4em; */
| |
| /* border: solid 1px var(--color_main2); */
| |
| margin-left: 0.4em;
| |
| /* background-color: var(--color_main); */
| |
| }
| |
|
| |
|
| |
| /*====================*/
| |
| /* HEADER non-header */
| |
| /*====================*/
| |
| .nh2, .nh3, .nh4, .nh5, .nh6 {
| |
| font-variant-caps: small-caps;
| |
| font-weight: bold;
| |
| color: var(--color_main);
| |
| padding-top: 0.1em;
| |
| padding-bottom: 0.1em;
| |
| padding-left: 0em;
| |
| margin-top: 0.5em;
| |
| line-height: 1em;
| |
| }
| |
|
| |
| .nh2 {font-size: var(--h2_size);} .nh3 {font-size: var(--h3_size);}
| |
| .nh4 {font-size: var(--h4_size);} .nh5 {font-size: var(--h5_size);}
| |
| .nh6 {font-size: var(--h6_size);}
| |
|
| |
| /*====================*/
| |
| /* SIDEBAR */
| |
| /*====================*/
| |
| #sidebar a, {font-size: var(--fs_S);}
| |
|
| |
| .vector-menu-portal .vector-menu-content li {font-size: var(--fs_M);} /* Taille du menu pour Vector */
| |
| .vector-user-menu-legacy li {font-size: var(--fs_M);} /* Taille du menu pour Vector */
| |
| .vector-menu-tabs li a {font-size: var(--fs_M);} /* Taille du menu pour Vector */
| |
| #left-navigation {margin-left: 13em;} /* Taille du menu pour Vector */
| |
|
| |
| #p-search, #sidebar .portlet {width: calc(var(--content_marg_left) - 5px);}
| |
|
| |
| #p-search h3, #p-NAVIGATION h3, #p-tb h3, #p-OUTILS_SPECIAUX h3 {font-weight: bold; border: none; box-shadow: none;}
| |
|
| |
| #p-search ul, #p-NAVIGATION ul, #p-tb ul, #p-OUTILS_SPECIAUX ul {margin: 0.2em;}
| |
|
| |
| #p-search input[type="search"] {
| |
| font-family: var(--ff);
| |
| width: 9.2em;
| |
| font-size: var(--fs_XS);
| |
| }
| |
|
| |
| #p-search input[type="submit"] { /* Style du bouton de recherche */
| |
| font-family: var(--ff);
| |
| background-color: var(--color_main2);
| |
| color: #fff;
| |
| border: none;
| |
| border-radius: 4px;
| |
| padding: 5px 10px;
| |
| cursor: pointer;
| |
| font-size: var(--fs_XS);
| |
| box-shadow: rgba(0, 0, 0, 0.20) 0px 5px 5px;
| |
| }
| |
|
| |
| #p-search input[type="submit"] {display: none;} /* Supprime les boutons de recherche inutiles */
| |
|
| |
|
| |
| /*====================*/
| |
| /* SOMMAIRE (TOC) */
| |
| /*====================*/
| |
| #toc, #toc * {
| |
| text-align: left;
| |
| }
| |
|
| |
| #toc ul ul {margin-left: 1em; font-size: 95%;}
| |
|
| |
| #toc {
| |
| font-size: var(--fs_S);
| |
| line-height: 1.3em;
| |
| text-align: justify;
| |
| border: none; /* Supprime le bord */
| |
| border-radius: 10px 0px 0px 10px;
| |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
| |
| position: fixed;
| |
| top: 60px;
| |
| right: -1px;
| |
| max-height: calc(90vh - 150px); /* Ajustez cette valeur selon vos besoins */
| |
| overflow-y: auto;
| |
| background-color: #E8E8E8;
| |
| width: calc(var(--content_marg_right) - 12px);
| |
| }
| |
|
| |
| #toc ul {margin: 0.3em 0;}
| |
|
| |
| #toc .toctitle {display: none;} /* Supprime le titre du Sommaire */
| |
|
| |
| #toc .tocnumber { padding-right: 0.3em;}
| |
|
| |
| /*====================*/
| |
| /* HORIZONTAL LIST */
| |
| /*====================*/
| |
| .hlist dd, .hlist dt, .hlist li, .hlist ul {
| |
| margin: 0;
| |
| display: 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:not(:last-child):after, .hlist li:not(:last-child):after { /* Ajout d'un • après chaque élément sauf le dernier */
| |
| content: " • ";
| |
| color: var(--color_main);
| |
| }
| |
|
| |
|
| |
| /*====================*/
| |
| /* FONT SIZE */
| |
| /*====================*/
| |
| .fontsize_XXS {font-size: var(--fs_XXS);}
| |
| .fontsize_XS {font-size: var(--fs_XS);}
| |
| .fontsize_S {font-size: var(--fs_S);}
| |
| .fontsize_M {font-size: var(--fs_M);}
| |
| .fontsize_L {font-size: var(--fs_L);}
| |
| .fontsize_XL {font-size: var(--fs_XL);}
| |
| .fontsize_XXL {font-size: var(--fs_XXL);}
| |
|
| |
| /*====================*/
| |
| /* LIEN HYPERTEXTE */
| |
| /*====================*/
| |
| a {position: relative;}
| |
|
| |
| a:hover {text-decoration: none;}
| |
|
| |
| a::after:not(h2 a, h3 a, h4 a, h5 a, h6 a,
| |
| .mw-body h2 a, .mw-body h3 a, .mw-body h4 a, .mw-body h5 a, .mw-body h6 a) { /* la liste de not permet d'exclure les titres qui sont des liens */
| |
| content: '';
| |
| position: absolute;
| |
| left: 0;
| |
| bottom: 0;
| |
| width: 0;
| |
| height: 1px;
| |
| background-color: var(--color_main);
| |
| transition: width 0.5s ease-in-out;
| |
| }
| |
|
| |
| a:hover::after {width: 100%;}
| |
|
| |
| a, a:visited {color: var(--color_a);}
| |
| a.new, a.new:visited {color: #cc2200;}
| |
|
| |
| a:has(img):hover::after {width: 0;} /* Enlève l'effet de hover pour les liens autour des images */
| |
| #p-logo a:hover::after {width: 0%;} /* Enlève l'effet de hover sur le logo du site */
| |
|
| |
| /*====================*/
| |
| /* FIL D'ARIANE */
| |
| /*====================*/
| |
|
| |
| .breadcrumb {
| |
| display: inline-block;
| |
| /* background: linear-gradient(to right, var(--color_main3), white); */
| |
| /* border-radius: 3px 0px 0px 15px / 3px 0px 0px 10px; */
| |
| border-width: 0px 0px 2px 0px;
| |
| border-style: none none solid none;
| |
| border-image: linear-gradient(to right, var(--color_main), white) 1;
| |
| margin-bottom : 1em;
| |
| }
| |
|
| |
| .breadcrumb a {
| |
| margin-right: 0.5em; /* Ajoute de l'espace après chaque lien */
| |
| margin-left: 0.1em;
| |
| }
| |
|
| |
|
| |
| /*====================*/
| |
| /* INFOBOX */
| |
| /*====================*/
| |
| .infobox {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| width: var(--ibox_size);
| |
| font-family: Calibri;
| |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Ajoute une ombre */
| |
| float: right;
| |
| background-color :#EEEEEE;
| |
| font-size: 80%;
| |
| vertical-align: top;
| |
| text-align: left;
| |
| line-height: 1.7;
| |
| margin: 0px 0px 15px 15px;
| |
| }
| |
|
| |
| .infobox-title {
| |
| width: 100%;
| |
| font-weight: bold;
| |
| background-color: var(--color_main);
| |
| color: white;
| |
| font-size: 115%;
| |
| text-align: center;
| |
| }
| |
|
| |
| .infobox-img {
| |
| width: var(--ibox_size);
| |
| height: auto;
| |
| }
| |
|
| |
| .infobox-30 {width: 28%; padding:0 0 0 2%; font-weight: bold;}
| |
| .infobox-70 {width: 65%; padding:0 0 0 2%;}
| |
|
| |
|
| |
| /*====================*/
| |
| /* QUOTE */
| |
| /*====================*/
| |
| q {font-style: italic;}
| |
|
| |
| p {margin: 0; line-height: 1.4;}
| |
|
| |
|
| |
| /*====================*/
| |
| /* PUCES */
| |
| /*====================*/
| |
| .mw-content-ltr ul {margin: 0.3em 0 0 1.1em;}
| |
|
| |
| ul {
| |
| list-style-type: none;
| |
| list-style-image: none;
| |
| list-style-type: "\002B27";
| |
| list-style-position: outside;
| |
| line-height: 1.3em;
| |
| /* margin: 0.3em; */
| |
| }
| |
|
| |
| 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: var(--color_main); font-size: 90%;}
| |
|
| |
| 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 {
| |
| 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; */
| |
| box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 15px;
| |
| 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; */
| |
| border-radius: 5px 30px 0px 0px;
| |
| }
| |
|
| |
| .section-content {
| |
| /* box-shadow: rgba(0, 0, 0, 0.25) 0px 12px 14px, rgba(0, 0, 0, 0.22) 0px 10px 10px; */
| |
| box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 15px;
| |
| padding: 1em;
| |
| background-color: var(--color_main_grey2);
| |
| /* border-style: solid; border-width: 0 1px 1px 1px; border-color: #D9D9D9; */
| |
| border-radius: 0px 0px 5px 5px;
| |
| }
| |
|
| |
| /* Section par défaut avec 1% d'espace entre elles. Adapté lorsqu'il s'agit de textes uniquement sans box. */
| |
| .section-100 {width: 98%; padding: 10px 1%;}
| |
| .section-90 {float: left; width: 88%; padding: 10px 1%;}
| |
| .section-80 {float: left; width: 78%; padding: 10px 1%;}
| |
| .section-70 {float: left; width: 68%; padding: 10px 1%;}
| |
| .section-60 {float: left; width: 58%; padding: 10px 1%;}
| |
| .section-50 {float: left; width: 48%; padding: 10px 1%;}
| |
| .section-40 {float: left; width: 38%; padding: 10px 1;}
| |
| .section-30 {float: left; width: 28%; padding: 10px 1%;}
| |
| .section-20 {float: left; width: 18%; padding: 10px 1%;}
| |
| .section-10 {float: left; width: 8%; padding: 10px 1%;}
| |
|
| |
| /* Section par défaut avec 0.5% d'espace entre elles. Plus adapté lorsqu'il s'agit de box. */
| |
| .sectionb-100 {width: 99%; padding: 10px 0.5%;}
| |
| .sectionb-90 {float: left; width: 89%; padding: 10px 0.5%;}
| |
| .sectionb-80 {float: left; width: 79%; padding: 10px 0.5%;}
| |
| .sectionb-70 {float: left; width: 69%; padding: 10px 0.5%;}
| |
| .sectionb-60 {float: left; width: 59%; padding: 10px 0.5%;}
| |
| .sectionb-50 {float: left; width: 49%; padding: 10px 0.5%;}
| |
| .sectionb-40 {float: left; width: 39%; padding: 10px 0.5%;}
| |
| .sectionb-30 {float: left; width: 29%; padding: 10px 0.5%;}
| |
| .sectionb-20 {float: left; width: 19%; padding: 10px 0.5%;}
| |
| .sectionb-10 {float: left; width: 9%; padding: 10px 0.5%;}
| |
|
| |
| pre,.mw-code {font-size: 11px !important;}
| |
|
| |
| .italique {font-style: italic;}
| |
|
| |
| .Bl-Shad0 {
| |
| box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 6px;
| |
| hyphens: auto;
| |
| text-align: justify;
| |
| }
| |
|
| |
| .Justify {
| |
| hyphens: auto;
| |
| text-align: justify;
| |
| }
| |
|
| |
| .Coll {
| |
| hyphens: auto;
| |
| text-align: justify;
| |
| column-count: 2;
| |
| }
| |
|
| |
|
| |
| /*====================*/
| |
| /* 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;
| |
| margin: 0 15px 15px 15px;
| |
| }
| |
|
| |
| .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%; margin: 0 0 15 0;}
| |
|
| |
|
| |
| /*====================*/
| |
| /* ZOOM DE CARTE */
| |
| /*====================*/
| |
| .titrecarte {
| |
| text-align: center;
| |
| color: var(--color_main);
| |
| font-size: 120%;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| /* .titrecarte::after { content: " =";} */
| |
| /* .titrecarte::before { content: "= ";} */
| |
|
| |
| .zoominfo {
| |
| font-size: 80%;
| |
| /* width: 1024px; */
| |
| width: 1200px;
| |
| text-align: right;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| }
| |
|
| |
| .structure {
| |
| position: relative;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| /* width: 1024px; */
| |
| /* height: 768px; */
| |
| width: 1200px;
| |
| height: 900px;
| |
| display: grid;
| |
| grid-template: repeat(11, 1fr)/repeat(11, 1fr);
| |
| }
| |
|
| |
| .cell {
| |
| /* border: 1px solid gray; */
| |
| background-color: transparent;
| |
| z-index: 1;
| |
| }
| |
|
| |
| .cell:nth-child(n):hover ~ .mapcontent {--zoom: 1.8;} /* Le zoom réel est de la valeur de --zoom + 1 */
| |
|
| |
| .cell:nth-child(1):hover ~ .mapcontent {--posX: 0%; --posY: 0%;}
| |
| .cell:nth-child(2):hover ~ .mapcontent {--posX: 10%; --posY: 0%;}
| |
| .cell:nth-child(3):hover ~ .mapcontent {--posX: 20%; --posY: 0%;}
| |
| .cell:nth-child(4):hover ~ .mapcontent {--posX: 30%; --posY: 0%;}
| |
| .cell:nth-child(5):hover ~ .mapcontent {--posX: 40%; --posY: 0%;}
| |
| .cell:nth-child(6):hover ~ .mapcontent {--posX: 50%; --posY: 0%;}
| |
| .cell:nth-child(7):hover ~ .mapcontent {--posX: 60%; --posY: 0%;}
| |
| .cell:nth-child(8):hover ~ .mapcontent {--posX: 70%; --posY: 0%;}
| |
| .cell:nth-child(9):hover ~ .mapcontent {--posX: 80%; --posY: 0%;}
| |
| .cell:nth-child(10):hover ~ .mapcontent {--posX: 90%; --posY: 0%;}
| |
| .cell:nth-child(11):hover ~ .mapcontent {--posX: 100%; --posY: 0%;}
| |
| .cell:nth-child(12):hover ~ .mapcontent {--posX: 0%; --posY: 10%;}
| |
| .cell:nth-child(13):hover ~ .mapcontent {--posX: 10%; --posY: 10%;}
| |
| .cell:nth-child(14):hover ~ .mapcontent {--posX: 20%; --posY: 10%;}
| |
| .cell:nth-child(15):hover ~ .mapcontent {--posX: 30%; --posY: 10%;}
| |
| .cell:nth-child(16):hover ~ .mapcontent {--posX: 40%; --posY: 10%;}
| |
| .cell:nth-child(17):hover ~ .mapcontent {--posX: 50%; --posY: 10%;}
| |
| .cell:nth-child(18):hover ~ .mapcontent {--posX: 60%; --posY: 10%;}
| |
| .cell:nth-child(19):hover ~ .mapcontent {--posX: 70%; --posY: 10%;}
| |
| .cell:nth-child(20):hover ~ .mapcontent {--posX: 80%; --posY: 10%;}
| |
| .cell:nth-child(21):hover ~ .mapcontent {--posX: 90%; --posY: 10%;}
| |
| .cell:nth-child(22):hover ~ .mapcontent {--posX: 100%; --posY: 10%;}
| |
| .cell:nth-child(23):hover ~ .mapcontent {--posX: 0%; --posY: 20%;}
| |
| .cell:nth-child(24):hover ~ .mapcontent {--posX: 10%; --posY: 20%;}
| |
| .cell:nth-child(25):hover ~ .mapcontent {--posX: 20%; --posY: 20%;}
| |
| .cell:nth-child(26):hover ~ .mapcontent {--posX: 30%; --posY: 20%;}
| |
| .cell:nth-child(27):hover ~ .mapcontent {--posX: 40%; --posY: 20%;}
| |
| .cell:nth-child(28):hover ~ .mapcontent {--posX: 50%; --posY: 20%;}
| |
| .cell:nth-child(29):hover ~ .mapcontent {--posX: 60%; --posY: 20%;}
| |
| .cell:nth-child(30):hover ~ .mapcontent {--posX: 70%; --posY: 20%;}
| |
| .cell:nth-child(31):hover ~ .mapcontent {--posX: 80%; --posY: 20%;}
| |
| .cell:nth-child(32):hover ~ .mapcontent {--posX: 90%; --posY: 20%;}
| |
| .cell:nth-child(33):hover ~ .mapcontent {--posX: 100%; --posY: 20%;}
| |
| .cell:nth-child(34):hover ~ .mapcontent {--posX: 0%; --posY: 30%;}
| |
| .cell:nth-child(35):hover ~ .mapcontent {--posX: 10%; --posY: 30%;}
| |
| .cell:nth-child(36):hover ~ .mapcontent {--posX: 20%; --posY: 30%;}
| |
| .cell:nth-child(37):hover ~ .mapcontent {--posX: 30%; --posY: 30%;}
| |
| .cell:nth-child(38):hover ~ .mapcontent {--posX: 40%; --posY: 30%;}
| |
| .cell:nth-child(39):hover ~ .mapcontent {--posX: 50%; --posY: 30%;}
| |
| .cell:nth-child(40):hover ~ .mapcontent {--posX: 60%; --posY: 30%;}
| |
| .cell:nth-child(41):hover ~ .mapcontent {--posX: 70%; --posY: 30%;}
| |
| .cell:nth-child(42):hover ~ .mapcontent {--posX: 80%; --posY: 30%;}
| |
| .cell:nth-child(43):hover ~ .mapcontent {--posX: 90%; --posY: 30%;}
| |
| .cell:nth-child(44):hover ~ .mapcontent {--posX: 100%; --posY: 30%;}
| |
| .cell:nth-child(45):hover ~ .mapcontent {--posX: 0%; --posY: 40%;}
| |
| .cell:nth-child(46):hover ~ .mapcontent {--posX: 10%; --posY: 40%;}
| |
| .cell:nth-child(47):hover ~ .mapcontent {--posX: 20%; --posY: 40%;}
| |
| .cell:nth-child(48):hover ~ .mapcontent {--posX: 30%; --posY: 40%;}
| |
| .cell:nth-child(49):hover ~ .mapcontent {--posX: 40%; --posY: 40%;}
| |
| .cell:nth-child(50):hover ~ .mapcontent {--posX: 50%; --posY: 40%;}
| |
| .cell:nth-child(51):hover ~ .mapcontent {--posX: 60%; --posY: 40%;}
| |
| .cell:nth-child(52):hover ~ .mapcontent {--posX: 70%; --posY: 40%;}
| |
| .cell:nth-child(53):hover ~ .mapcontent {--posX: 80%; --posY: 40%;}
| |
| .cell:nth-child(54):hover ~ .mapcontent {--posX: 90%; --posY: 40%;}
| |
| .cell:nth-child(55):hover ~ .mapcontent {--posX: 100%; --posY: 40%;}
| |
| .cell:nth-child(56):hover ~ .mapcontent {--posX: 0%; --posY: 50%;}
| |
| .cell:nth-child(57):hover ~ .mapcontent {--posX: 10%; --posY: 50%;}
| |
| .cell:nth-child(58):hover ~ .mapcontent {--posX: 20%; --posY: 50%;}
| |
| .cell:nth-child(59):hover ~ .mapcontent {--posX: 30%; --posY: 50%;}
| |
| .cell:nth-child(60):hover ~ .mapcontent {--posX: 40%; --posY: 50%;}
| |
| .cell:nth-child(61):hover ~ .mapcontent {--posX: 50%; --posY: 50%;}
| |
| .cell:nth-child(62):hover ~ .mapcontent {--posX: 60%; --posY: 50%;}
| |
| .cell:nth-child(63):hover ~ .mapcontent {--posX: 70%; --posY: 50%;}
| |
| .cell:nth-child(64):hover ~ .mapcontent {--posX: 80%; --posY: 50%;}
| |
| .cell:nth-child(65):hover ~ .mapcontent {--posX: 90%; --posY: 50%;}
| |
| .cell:nth-child(66):hover ~ .mapcontent {--posX: 100%; --posY: 50%;}
| |
| .cell:nth-child(67):hover ~ .mapcontent {--posX: 0%; --posY: 60%;}
| |
| .cell:nth-child(68):hover ~ .mapcontent {--posX: 10%; --posY: 60%;}
| |
| .cell:nth-child(69):hover ~ .mapcontent {--posX: 20%; --posY: 60%;}
| |
| .cell:nth-child(70):hover ~ .mapcontent {--posX: 30%; --posY: 60%;}
| |
| .cell:nth-child(71):hover ~ .mapcontent {--posX: 40%; --posY: 60%;}
| |
| .cell:nth-child(72):hover ~ .mapcontent {--posX: 50%; --posY: 60%;}
| |
| .cell:nth-child(73):hover ~ .mapcontent {--posX: 60%; --posY: 60%;}
| |
| .cell:nth-child(74):hover ~ .mapcontent {--posX: 70%; --posY: 60%;}
| |
| .cell:nth-child(75):hover ~ .mapcontent {--posX: 80%; --posY: 60%;}
| |
| .cell:nth-child(76):hover ~ .mapcontent {--posX: 90%; --posY: 60%;}
| |
| .cell:nth-child(77):hover ~ .mapcontent {--posX: 100%; --posY: 60%;}
| |
| .cell:nth-child(78):hover ~ .mapcontent {--posX: 0%; --posY: 70%;}
| |
| .cell:nth-child(79):hover ~ .mapcontent {--posX: 10%; --posY: 70%;}
| |
| .cell:nth-child(80):hover ~ .mapcontent {--posX: 20%; --posY: 70%;}
| |
| .cell:nth-child(81):hover ~ .mapcontent {--posX: 30%; --posY: 70%;}
| |
| .cell:nth-child(82):hover ~ .mapcontent {--posX: 40%; --posY: 70%;}
| |
| .cell:nth-child(83):hover ~ .mapcontent {--posX: 50%; --posY: 70%;}
| |
| .cell:nth-child(84):hover ~ .mapcontent {--posX: 60%; --posY: 70%;}
| |
| .cell:nth-child(85):hover ~ .mapcontent {--posX: 70%; --posY: 70%;}
| |
| .cell:nth-child(86):hover ~ .mapcontent {--posX: 80%; --posY: 70%;}
| |
| .cell:nth-child(87):hover ~ .mapcontent {--posX: 90%; --posY: 70%;}
| |
| .cell:nth-child(88):hover ~ .mapcontent {--posX: 100%; --posY: 70%;}
| |
| .cell:nth-child(89):hover ~ .mapcontent {--posX: 0%; --posY: 80%;}
| |
| .cell:nth-child(90):hover ~ .mapcontent {--posX: 10%; --posY: 80%;}
| |
| .cell:nth-child(91):hover ~ .mapcontent {--posX: 20%; --posY: 80%;}
| |
| .cell:nth-child(92):hover ~ .mapcontent {--posX: 30%; --posY: 80%;}
| |
| .cell:nth-child(93):hover ~ .mapcontent {--posX: 40%; --posY: 80%;}
| |
| .cell:nth-child(94):hover ~ .mapcontent {--posX: 50%; --posY: 80%;}
| |
| .cell:nth-child(95):hover ~ .mapcontent {--posX: 60%; --posY: 80%;}
| |
| .cell:nth-child(96):hover ~ .mapcontent {--posX: 70%; --posY: 80%;}
| |
| .cell:nth-child(97):hover ~ .mapcontent {--posX: 80%; --posY: 80%;}
| |
| .cell:nth-child(98):hover ~ .mapcontent {--posX: 90%; --posY: 80%;}
| |
| .cell:nth-child(99):hover ~ .mapcontent {--posX: 100%; --posY: 80%;}
| |
| .cell:nth-child(100):hover ~ .mapcontent {--posX: 0%; --posY: 90%;}
| |
| .cell:nth-child(101):hover ~ .mapcontent {--posX: 10%; --posY: 90%;}
| |
| .cell:nth-child(102):hover ~ .mapcontent {--posX: 20%; --posY: 90%;}
| |
| .cell:nth-child(103):hover ~ .mapcontent {--posX: 30%; --posY: 90%;}
| |
| .cell:nth-child(104):hover ~ .mapcontent {--posX: 40%; --posY: 90%;}
| |
| .cell:nth-child(105):hover ~ .mapcontent {--posX: 50%; --posY: 90%;}
| |
| .cell:nth-child(106):hover ~ .mapcontent {--posX: 60%; --posY: 90%;}
| |
| .cell:nth-child(107):hover ~ .mapcontent {--posX: 70%; --posY: 90%;}
| |
| .cell:nth-child(108):hover ~ .mapcontent {--posX: 80%; --posY: 90%;}
| |
| .cell:nth-child(109):hover ~ .mapcontent {--posX: 90%; --posY: 90%;}
| |
| .cell:nth-child(110):hover ~ .mapcontent {--posX: 100%; --posY: 90%;}
| |
| .cell:nth-child(111):hover ~ .mapcontent {--posX: 0%; --posY: 100%;}
| |
| .cell:nth-child(112):hover ~ .mapcontent {--posX: 10%; --posY: 100%;}
| |
| .cell:nth-child(113):hover ~ .mapcontent {--posX: 20%; --posY: 100%;}
| |
| .cell:nth-child(114):hover ~ .mapcontent {--posX: 30%; --posY: 100%;}
| |
| .cell:nth-child(115):hover ~ .mapcontent {--posX: 40%; --posY: 100%;}
| |
| .cell:nth-child(116):hover ~ .mapcontent {--posX: 50%; --posY: 100%;}
| |
| .cell:nth-child(117):hover ~ .mapcontent {--posX: 60%; --posY: 100%;}
| |
| .cell:nth-child(118):hover ~ .mapcontent {--posX: 70%; --posY: 100%;}
| |
| .cell:nth-child(119):hover ~ .mapcontent {--posX: 80%; --posY: 100%;}
| |
| .cell:nth-child(120):hover ~ .mapcontent {--posX: 90%; --posY: 100%;}
| |
| .cell:nth-child(121):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.5 + 1));
| |
| transform-origin: var(--posX) var(--posY);
| |
| transition: all 1s ease-out;
| |
| }
| |
|
| |
| .map {
| |
| width: 50%;
| |
| }
| |
|
| |
| /*====================*/
| |
| /* TIMELINE */
| |
| /*====================*/
| |
| .timeline {
| |
| width: 100%;
| |
| text-align: center;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| .period1, .period2, .period3 {
| |
| float: left;
| |
| height: 4em;
| |
| color: white;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| line-height: 1.2em;
| |
| 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;
| |
| }
| |
|
| |
| .period1 {background-color: var(--color_gradient1);}
| |
| .period2 {background-color: var(--color_gradient2);}
| |
| .period3 {background-color: var(--color_gradient3);}
| |
|
| |
|
| |
| /*====================*/
| |
| /* TEST */
| |
| /*====================*/
| |
|
| |
| .parallax {
| |
| height: 1000px;
| |
| 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");*/
| |
