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

Version du 20 juin 2024 à 13:18

/*====================*/
/* VARIABLES GLOBALES */
/*====================*/
: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;   /* Couleur général +sombre */
    --color_main_grey1: #F5F5F5;  /* Gris clair+ */
    --color_main_grey2: #EAEAEA;  /* Gris clair */
    --color_main_grey3: #E0E0E0;  /* Gris moyen - Fond du site */
    --color_main_grey4: #D8D8D8;  /* Gris foncé */
    --color_main_grey5: #CACACA;  /* Gris foncé+ */
    --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;      /* Couleur Titre niv 2 de l'accueil */
    --color_a: #0752CA;            /* Couleur des liens hypertexte (save #0858D9) */
    --a_link_title_icon: "⮊";      /* Flèches des liens de titre */
    --a_link_title_color: #002C75; /* Couleurs des flèches (save #002C75) */


    --fs: 12.5px;                   /* Police de base - Taille */
    --ff: Calibri, sans-serif;    /* Police de base - Police */
    --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%; /* Taille des titrs */

    --content_marg_left: 140px;  /* Marge du site : à droite */
    --content_marg_right: 200px; /* Marge du site : à gauche */
    --menu_marg_top: 140px;      /* Marge du site : en haut */
    --box_shadow_menu: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; /* Ombre des menus - TOC et menu de gauche */

    --ibox_size: 270px; /* Taille de l'infobox */
}


/*====================*/
/*    BODY et BASE    */
/*====================*/
body {
    background-image: none;
    background-color: var(--color_main_grey3);
    font-family: var(--ff);
    font-size: var(--fs);
}

.mw-body {line-height: 1.4}

.mw-body h1, .mw-body-content h1, .mw-body-content h2 {font-family: var(--ff);}


/*====================*/
/* ADAPTATION VECTOR  */
/*====================*/
.vector-body {font-size: 130%;} /* Ajustement de la taille la police) */

#mw-page-base {background-image: none; background-color: var(--color_main_grey3);} /* Bandeau du haut */

/*====================*/
/*   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 {position: relative; text-align: center; z-index: 0;}


/*====================*/
/*      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;
    margin-bottom: 0.5em;
    line-height: 1em;
}

h1, .mw-body h1 {
    font-size: var(--h1_size);
    background-color: var(--color_main);
    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);
}

.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.2) 1.95px 1.95px 2.6px;
    background-color: var(--color_main_grey1);
    line-height: 1.2em;
    padding-left: 0.5em;
}

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: 0.4em;
}


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

.nh4, .nh5, .nh6 {color: black;}


/*====================*/
/*      SIDEBAR       */
/*====================*/
#sidebar, #mw-panel {
    position: fixed;
    background-color: var(--color_main_grey3);
    top: var(--menu_marg_top);
    left: 0px;
    box-shadow: var(--box_shadow_menu);;
    border-radius: 0px 10px 10px 0px;
    padding: 6px 0px 6px 0px;
    z-index: 1;
}

#sidebar a, {font-size: var(--fs_S);}

body.skin--responsive #sidebar .pBody {
    background-color: transparent;
    border: none;
}

/* Taille du menu pour Vector */
.vector-menu-portal .vector-menu-content li {font-size: var(--fs_M);} 
.vector-user-menu-legacy li {font-size: var(--fs_M);}
.vector-menu-tabs li a {font-size: var(--fs_M);}
.vector-menu-heading {font-size: var(--fs_M);}
.vector-menu-heading-label {font-size: 150%;}
#left-navigation {margin-left: 13em;}

#p-search, #sidebar .portlet {width: calc(var(--content_marg_left) - 5px); margin: 0;}

#p-search h3, #p-NAVIGATION h3, #p-tb h3, #p-OUTILS_SPECIAUX h3, #p-RACCOURCIS h3, #p-REGIONS h3 {font-weight: bold; border: none; box-shadow: none; font-size: var(--fs_XL);}

#p-search ul, #p-NAVIGATION ul, #p-tb ul, #p-OUTILS_SPECIAUX ul, #p-RACCOURCIS ul, #p-REGIONS ul {margin: 0.25em;}

#p-search input[type="search"] {
    font-family: var(--ff);
    width: 9.1em;
    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 */
#p-search-label {display: none;} /* Supprime le titre du bouton Rechercher */

#sidebar ul {list-style-type: "●";}

#sidebar ul li {padding-left: 0.1em;}

#sidebar li::marker {color: #6F6F6F; font-size: 100%;}


/*====================*/
/*   SOMMAIRE (TOC)   */
/*====================*/
#toc, #toc * {text-align: left;}

#toc ul ul {margin-left: 1em; font-size: 95%; font-weight: normal;}

#toc {
    font-size: var(--fs_S);
    line-height: 1.3em;
    border: none;
    border-radius: 10px 0px 0px 10px;
    box-shadow: var(--box_shadow_menu);
    position: fixed;
    top: var(--menu_marg_top);
    right: 0;
    max-height: calc(90vh - 150px);
    overflow-y: auto;
    background-color: var(--color_main_grey3);
    width: calc(var(--content_marg_right) - 20px);
}

#toc ul {margin: 0.3em 0;}

/* #toc > ul {font-weight: bold;} H2 de toc en gras*/

#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);}

.fontsize_XXS, .fontsize_XS, .fontsize_S, .fontsize_M, .fontsize_L, .fontsize_XL, .fontsize_XXL {display: inline-block;}

/*====================*/
/*  LIEN HYPERTEXTE   */
/*====================*/
a:hover {text-decoration: none;}
a, a:visited {color: var(--color_a);}
a.new, a.new:visited {color: #cc2200;}


/*====================*/
/*   FIL D'ARIANE     */
/*====================*/