Différences entre versions de « MediaWiki:Common.css »

Version du 13 septembre 2024 à 11:10

/* CSS placed here will be applied to all skins */
/* Le CSS placé ici sera appliqué à tous les habillages. */

/* Lien vers le CSS pour le mode sombre, à mettre au début du fichier */
@import url('skins/Vector/skinStyles/custom-dark-mode.css');

ul#SelectCategoryList 
{
height: 300px;
width: 400px;
overflow: auto;
}


////////////////////////////////////////////////////////////////////////////////////
////////////////AJOUTS//////////////////////////
//////////////////////////////////////////////////////////////

/*
#toc { float: right;|width:15%;};
*/

/**/Good one
/*
#toc {float:right;margin:0 0 1em 1em;position:fixed;top:150px;right:10px;width:15%;};
*/

/* TOC float right */ #toc {float:right;border:none;border-left:1.5em white solid;border-bottom:1em white solid;background:#fff3d2;}*/

/*the good one
li.gallerybox div.thumb {
    border: none;
    background-color: none;
}
*/

/*

li.gallerybox div.thumb {
 border: 10px;
    background-color: white;
}
*/
/*
#mw-content li.gallerybox div.thumb {
    background: #3D6998;
    border: solid #eeeeee;
    border-width: 1px 1px 0.2em;
    padding: 1.25em 1.75em;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.02);
    overflow: auto;
    padding: 0;
}
*/
div.vf-vignette {
    position: relative;
    float: left;
    display: block;
    width: 290px;
    height: 200px;
    /*background-color: #3D6999;*/
    background-color: transparent;
    color: #373741;
    overflow: hidden;
    margin: 0.2em;
        margin-top: 0.2em;
        margin-right: 0.2em;
        margin-bottom: 0.2em;
        margin-left: 0.2em;
    background-size: 100% 100%;
    font-family: vagrounded,Arial;
    font-size: 1.1em;
   /* top:50px;*/
    top:-15px;
    padding-top: 1px;

}

div.vf-vignette .vf-vignette-titre {  
/* color: black; */
  /* padding: 5px; */
  /* font-size: 1.3em; */
  /* text-transform: uppercase; */
  color: #ff2727;
  padding: 10px;
  padding-bottom: 5px;
  font-size: 0.8em;
  text-transform: inherit;
  text-align: left;
}

.vf-vignette-description {
    opacity: 0;
    position: absolute;
    transition: opacity 0.5s;
}


/*
div.vf-vignette .vf-vignette-titre {
    color: black;
    width: 240px;
    display: block;
    padding: 5px;
        padding-bottom: 5px;
    padding-bottom: 1em;
    font-weight: bold;
    font-size: 1.3em;
    text-transform: uppercase;
}
*/


div.vf-vignette-informations {
	position: absolute;
	color: black;
	font-weight: bold;
	width: 240px;
	/*top: 0px;*/
        top: -20px;
	left: 0px;
	display: block;
	padding: 5px;
	padding-bottom: 2em;
	font-size: 1em;
	pointer-events: none;
}

div.vf-vignette img {
	position: relative;
	overflow: hidden;
	top: 0px;
        width: 100%;

}

/*
div.vf-vignette, div.vf-vignette:hover {
    text-decoration: none;
}
*/

span.smw-template-furtherresults {
    display: block;
    clear: both;
}

/*
mark {
    background: #FF6B40;
        background-color: rgb(255, 107, 64);
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-attachment: scroll;
        background-image: none;
        background-size: auto;
        background-origin: padding-box;
        background-clip: border-box;
    color: #3D6999;
}
*/

mark {
    background: transparent;
    color: #FF6B40;
}


div.polaroid {
 width: 290px;
/*height:400px;*/
 background-color: white;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 margin-bottom: 25px;
 /*float: inline-start;*/
float:left;
  /*margin-left: 3px;
  margin-right: 3px;*/


}





div.container-polaroid {
  text-align: center;
 /* padding: 10px 20px;*/
 padding-top: 0px;

/* height:400px;*/
  height: 150px;
}

div.container-polaroid-title-only {
  text-align: center;
 /* padding: 10px 20px;*/
 padding-top: 0px;

/* height:400px;*/
  height: 50px;
}



div.polaroid img {
  width: 100%;
 /*height:auto;*/
  height:200px;
}

div.polaroid-title {
/*font-weight: bold;*/
}


div.polaroid > p{
  margin-top: 0px;
/*
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 0px;
*/
}


/*
div.polaroid:hover {
  border: 1px solid #777;
}
*/

/*
div.gallery-polaroid {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery-polaroid:hover {
  border: 1px solid #777;
}

div.gallery-polaroid img {
  width: 100%;
  height: auto;
}

div.desc-polaroid {
  padding: 15px;
  text-align: center;
}
*/


/*Enlever les onglets talkpages*/
/*#ca-talk { display:none!important; }*/


/* CSS infobox */
/* Infobox V2 (voir : [[Projet:Infobox/V2]]) */
.infobox_v2 {
	background: #f9f9f9;
	color: #000;
	font-size: 90%;
	line-height: 1.2em;
	float: right;
	clear: right;
	margin: 0 0 0.5em 1em;
	width: 294px;
	border: 1px solid #aaa;
	border-spacing: 5px;
}
.infobox_v2 th {
	vertical-align: super;
	text-align: left;
}
.infobox_v2 .entete {
	height: 43px;
	vertical-align: middle;
	text-align: center;
	font-size: 140%;
	font-weight: bolder;
	line-height: 1.1em;
	color: #000;
}
/* Padding si pictogramme d'infobox, e.g. ".entete.foobar"
   Pas de pictogramme donc pas de padding sur ".entete.defaut" et ".entete"
   Possibilité de désactiver ce padding en ajoutant une classe "large" */
.infobox_v2 .entete:not(.defaut):not([class="entete"]):not(.large) {
	padding: 1px 48px;
}
/* Pour [[Modèle:Image et son]], etc. */
.infobox_v2 .media {
	height: 35px;
	vertical-align: middle;
	text-align: center;
	font-weight: bolder;
	color: #000;
}

/* Graphiques transparents d'en-têtes des Infobox */
.entete {
	background-position: right center;
	background-repeat: no-repeat;
}



.media.audio {
	background: url("//upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Gnome-speakernotes.png/35px-Gnome-speakernotes.png") no-repeat left top;
}
.media.video {
	background: url("//upload.wikimedia.org/wikipedia/commons/thumb/2/20/Tango-video-x-generic.png/35px-Tango-video-x-generic.png") no-repeat left top;
}


/*added by delph*/
@media screen {
p {
/*margin: 1em 0;*/
margin: 0;
}
}

//added by delph
/*
.entete > p:nth-child(1) {
 margin-top: 0.2em;
}
*/



/* load.php | https://wiki.myhumankit.org/load.php?lang=fr&modules=ext.MobileDetect.nomobile%7Cmediawiki.skinning.content.externallinks%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.indicators%7Cskins.timeless&only=styles&skin=timeless */

/*
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
  /* background-color: .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button \{; */
  /* background-color: #36c; */
  /* border-color: #36c; */
  background-color: #72777D;
  border-color: #72777D;
}
*/


/* load.php | https://wikiup.myhumankit.org/load.php?lang=fr&modules=site.styles&only=styles&skin=timeless */

div.polaroid {
  margin-right: 10px;
}

div.container-polaroid {
  margin-right: 10px;
  margin-left: 10px;
}



/* Ajout pour ajuster taille de police en complément du code ajouté dans https://wikiup.myhumankit.org/index.php?title=MediaWiki:Common.js */
/*
#increaseFont, #decreaseFont {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    margin-right: 5px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
}

#increaseFont:hover, #decreaseFont:hover {
    background-color: #0056b3;
}
*/


*/Code pour ajuster la taille de la police avec un seul bouton*/

#fontSizeButton {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    margin-bottom: 10px;
}

#fontSizeButton:hover {
    background-color: #0056b3;
}

#fontSizeMenu li {
    padding: 5px;
}

#fontSizeMenu li:hover {
    background-color: #f0f0f0;
}


/*CSS pour changer de thème sombre ou clair*/
/* Styles pour le thème clair (par défaut) */
body {
    background-color: #ffffff;
    color: #000000;
}

/* Styles pour le thème sombre */
body.dark-theme {
    background-color: #333333;
    color: #ffffff;
}

#themeButton {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    margin-bottom: 10px;
}

#themeButton:hover {
    background-color: #0056b3;
}



/*custom-dark-mode.css*/

/*https://wikiup.myhumankit.org/skins/Vector/skinStyles/custom-dark-mode.css*/
/* Styles pour le mode sombre */
body.dark-theme {
    background-color: #1e1e1e; /* Couleur de fond sombre */
    color: #e0e0e0; /* Couleur du texte claire */
}

body.dark-theme .mw-body {
    color: #e0e0e0; /* Assure que le texte dans les articles est clair */
}

body.dark-theme h1, 
body.dark-theme h2, 
body.dark-theme h3, 
body.dark-theme h4, 
body.dark-theme h5, 
body.dark-theme h6 {
    color: #fff!important; /* Couleur des titres */
}

/*
body.dark-theme a {
    color: green; /* Couleur des liens clairs */
}*/

/*
body.dark-theme a:visited {
    color: yellow; /* Couleur des liens visités */
}
*/


/*
body.dark-theme a {
    color: yellow !important; /* Force la couleur des liens */
}
*/

body.dark-theme a {
    color: #9aafff !important; /* Couleur des liens non visités en mode sombre */
    text-decoration: none;
}




body.dark-theme a:visited {
    color: green !important; /* Force la couleur des liens visités */
}

/* Si nécessaire, ciblez également les liens dans le menu */
body.dark-theme .portal .body li a,
body.dark-theme .vector-menu-portal .body li a {
    color: #9aafff !important;
}

body.dark-theme .portal .body li a:visited,
body.dark-theme .vector-menu-portal .body li a:visited {
    color: #6b8ecf !important;
}


body.dark-theme #mw-panel.collapsible-nav .portal h3 a {
    color: #ffffff !important; /* Couleur blanche pour le mode sombre */
}







/* CSS placed here will be applied to all skins */
/* Le CSS placé ici sera appliqué à tous les habillages. */

/* Lien vers le CSS pour le mode sombre, à mettre au début du fichier */
@import url('skins/Vector/skinStyles/custom-dark-mode.css');

ul#SelectCategoryList 
{
height: 300px;
width: 400px;
overflow: auto;
}


////////////////////////////////////////////////////////////////////////////////////
////////////////AJOUTS//////////////////////////
//////////////////////////////////////////////////////////////

/*
#toc { float: right;|width:15%;};
*/

/**/Good one
/*
#toc {float:right;margin:0 0 1em 1em;position:fixed;top:150px;right:10px;width:15%;};
*/

/* TOC float right */ #toc {float:right;border:none;border-left:1.5em white solid;border-bottom:1em white solid;background:#fff3d2;}*/

/*the good one
li.gallerybox div.thumb {
    border: none;
    background-color: none;
}
*/

/*

li.gallerybox div.thumb {
 border: 10px;
    background-color: white;
}
*/
/*
#mw-content li.gallerybox div.thumb {
    background: #3D6998;
    border: solid #eeeeee;
    border-width: 1px 1px 0.2em;
    padding: 1.25em 1.75em;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.02);
    overflow: auto;
    padding: 0;
}
*/
div.vf-vignette {
    position: relative;
    float: left;
    display: block;
    width: 290px;
    height: 200px;
    /*background-color: #3D6999;*/
    background-color: transparent;
    color: #373741;
    overflow: hidden;
    margin: 0.2em;
        margin-top: 0.2em;
        margin-right: 0.2em;
        margin-bottom: 0.2em;
        margin-left: 0.2em;
    background-size: 100% 100%;
    font-family: vagrounded,Arial;
    font-size: 1.1em;
   /* top:50px;*/
    top:-15px;
    padding-top: 1px;

}

div.vf-vignette .vf-vignette-titre {  
/* color: black; */
  /* padding: 5px; */
  /* font-size: 1.3em; */
  /* text-transform: uppercase; */
  color: #ff2727;
  padding: 10px;
  padding-bottom: 5px;
  font-size: 0.8em;
  text-transform: inherit;
  text-align: left;
}

.vf-vignette-description {
    opacity: 0;
    position: absolute;
    transition: opacity 0.5s;
}


/*
div.vf-vignette .vf-vignette-titre {
    color: black;
    width: 240px;
    display: block;
    padding: 5px;
        padding-bottom: 5px;
    padding-bottom: 1em;
    font-weight: bold;
    font-size: 1.3em;
    text-transform: uppercase;
}
*/


div.vf-vignette-informations {
	position: absolute;
	color: black;
	font-weight: bold;
	width: 240px;
	/*top: 0px;*/
        top: -20px;
	left: 0px;
	display: block;
	padding: 5px;
	padding-bottom: 2em;
	font-size: 1em;
	pointer-events: none;
}

div.vf-vignette img {
	position: relative;
	overflow: hidden;
	top: 0px;
        width: 100%;

}

/*
div.vf-vignette, div.vf-vignette:hover {
    text-decoration: none;
}
*/

span.smw-template-furtherresults {
    display: block;
    clear: both;
}

/*
mark {
    background: #FF6B40;
        background-color: rgb(255, 107, 64);
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-attachment: scroll;
        background-image: none;
        background-size: auto;
        background-origin: padding-box;
        background-clip: border-box;
    color: #3D6999;
}
*/

mark {
    background: transparent;
    color: #FF6B40;
}


div.polaroid {
 width: 290px;
/*height:400px;*/
 background-color: white;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 margin-bottom: 25px;
 /*float: inline-start;*/
float:left;
  /*margin-left: 3px;
  margin-right: 3px;*/


}





div.container-polaroid {
  text-align: center;
 /* padding: 10px 20px;*/
 padding-top: 0px;

/* height:400px;*/
  height: 150px;
}

div.container-polaroid-title-only {
  text-align: center;
 /* padding: 10px 20px;*/
 padding-top: 0px;

/* height:400px;*/
  height: 50px;
}



div.polaroid img {
  width: 100%;
 /*height:auto;*/
  height:200px;
}

div.polaroid-title {
/*font-weight: bold;*/
}


div.polaroid > p{
  margin-top: 0px;
/*
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 0px;
*/
}


/*
div.polaroid:hover {
  border: 1px solid #777;
}
*/

/*
div.gallery-polaroid {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery-polaroid:hover {
  border: 1px solid #777;
}

div.gallery-polaroid img {
  width: 100%;
  height: auto;
}

div.desc-polaroid {
  padding: 15px;
  text-align: center;
}
*/


/*Enlever les onglets talkpages*/
/*#ca-talk { display:none!important; }*/


/* CSS infobox */
/* Infobox V2 (voir : [[Projet:Infobox/V2]]) */
.infobox_v2 {
	background: #f9f9f9;
	color: #000;
	font-size: 90%;
	line-height: 1.2em;
	float: right;
	clear: right;
	margin: 0 0 0.5em 1em;
	width: 294px;
	border: 1px solid #aaa;
	border-spacing: 5px;
}
.infobox_v2 th {
	vertical-align: super;
	text-align: left;
}
.infobox_v2 .entete {
	height: 43px;
	vertical-align: middle;
	text-align: center;
	font-size: 140%;
	font-weight: bolder;
	line-height: 1.1em;
	color: #000;
}
/* Padding si pictogramme d'infobox, e.g. ".entete.foobar"
   Pas de pictogramme donc pas de padding sur ".entete.defaut" et ".entete"
   Possibilité de désactiver ce padding en ajoutant une classe "large" */
.infobox_v2 .entete:not(.defaut):not([class="entete"]):not(.large) {
	padding: 1px 48px;
}
/* Pour [[Modèle:Image et son]], etc. */
.infobox_v2 .media {
	height: 35px;
	vertical-align: middle;
	text-align: center;
	font-weight: bolder;
	color: #000;
}

/* Graphiques transparents d'en-têtes des Infobox */
.entete {
	background-position: right center;
	background-repeat: no-repeat;
}



.media.audio {
	background: url("//upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Gnome-speakernotes.png/35px-Gnome-speakernotes.png") no-repeat left top;
}
.media.video {
	background: url("//upload.wikimedia.org/wikipedia/commons/thumb/2/20/Tango-video-x-generic.png/35px-Tango-video-x-generic.png") no-repeat left top;
}


/*added by delph*/
@media screen {
p {
/*margin: 1em 0;*/
margin: 0;
}
}

//added by delph
/*
.entete > p:nth-child(1) {
 margin-top: 0.2em;
}
*/



/* load.php | https://wiki.myhumankit.org/load.php?lang=fr&modules=ext.MobileDetect.nomobile%7Cmediawiki.skinning.content.externallinks%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.indicators%7Cskins.timeless&only=styles&skin=timeless */

/*
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
  /* background-color: .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button \{; */
  /* background-color: #36c; */
  /* border-color: #36c; */
  background-color: #72777D;
  border-color: #72777D;
}
*/


/* load.php | https://wikiup.myhumankit.org/load.php?lang=fr&modules=site.styles&only=styles&skin=timeless */

div.polaroid {
  margin-right: 10px;
}

div.container-polaroid {
  margin-right: 10px;
  margin-left: 10px;
}



/* Ajout pour ajuster taille de police en complément du code ajouté dans https://wikiup.myhumankit.org/index.php?title=MediaWiki:Common.js */
/*
#increaseFont, #decreaseFont {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    margin-right: 5px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
}

#increaseFont:hover, #decreaseFont:hover {
    background-color: #0056b3;
}
*/


*/Code pour ajuster la taille de la police avec un seul bouton*/

#fontSizeButton {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    margin-bottom: 10px;
}

#fontSizeButton:hover {
    background-color: #0056b3;
}

#fontSizeMenu li {
    padding: 5px;
}

#fontSizeMenu li:hover {
    background-color: #f0f0f0;
}


/*CSS pour changer de thème sombre ou clair*/
/* Styles pour le thème clair (par défaut) */
body {
    background-color: #ffffff;
    color: #000000;
}

/* Styles pour le thème sombre */
body.dark-theme {
    background-color: #333333;
    color: #ffffff;
}

#themeButton {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    margin-bottom: 10px;
}

#themeButton:hover {
    background-color: #0056b3;
}



/*custom-dark-mode.css*/

/*https://wikiup.myhumankit.org/skins/Vector/skinStyles/custom-dark-mode.css*/
/* Styles pour le mode sombre */
body.dark-theme {
    background-color: #1e1e1e; /* Couleur de fond sombre */
    color: #e0e0e0; /* Couleur du texte claire */
}

body.dark-theme .mw-body {
    color: #e0e0e0; /* Assure que le texte dans les articles est clair */
}

body.dark-theme h1, 
body.dark-theme h2, 
body.dark-theme h3, 
body.dark-theme h4, 
body.dark-theme h5, 
body.dark-theme h6 {
    color: #fff!important; /* Couleur des titres */
}

/*
body.dark-theme a {
    color: green; /* Couleur des liens clairs */
}*/

/*
body.dark-theme a:visited {
    color: yellow; /* Couleur des liens visités */
}
*/


/*
body.dark-theme a {
    color: yellow !important; /* Force la couleur des liens */
}
*/

body.dark-theme a {
    color: #9aafff !important; /* Couleur des liens non visités en mode sombre */
    text-decoration: none;
}




body.dark-theme a:visited {
    color: green !important; /* Force la couleur des liens visités */
}

/* Si nécessaire, ciblez également les liens dans le menu */
body.dark-theme .portal .body li a,
body.dark-theme .vector-menu-portal .body li a {
    color: #9aafff !important;
}

body.dark-theme .portal .body li a:visited,
body.dark-theme .vector-menu-portal .body li a:visited {
    color: #6b8ecf !important;
}


body.dark-theme #mw-panel.collapsible-nav .portal h3 a {
    color: #ffffff !important; /* Couleur blanche pour le mode sombre */
}