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

Version actuelle datée du 12 juin 2024 à 13:21

/* Ce CSS doit s'appliquer à tous les MédiaWikis de la Farm */

/* CSS personnalisée par Marion Delacroix, 2022 */

/* MAJ 01/02/2024 ajout shadow */

/* MAJ 13/09/2023 (spécification .mw-parser-output > table) */

/* On règle le problème des 80%-100% en version web/imprimée */

.mw-parser-output > table > tbody > tr:first-child > td:first-child {
  width: 80%;
  padding-right: 0px;
}

table.wikitable tr:first-child td:first-child {
  width: fit-content;
  padding-right: 0px;
}

table.barre_menu tr:first-child td:first-child {
  width: 100%;
  padding-right: 1px;
}

/* On supprime les titres de pages automatiques */

.firstHeading {
  display : none;
}

/* On supprime l'apparition du footer à l'impression */

.printfooter {
  display: none;
}

/* CSS des classes personnalisées InSitu */

@media (min-width:1880px) {
  /*div.one_page {
    max-height: 903px;
    aspect-ratio: 210/297;
    width: 100%;
  }*/
}

div.one_page .col-w-10 {
  column-width: 10rem;
}

.shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.big {
  font-size: 115%;
}

.important {
  font-size: 150%;
  font-weight: bold;
  color: rgb(243,146,0);
  margin: 1em 0px;
}

h1.title_page {
  color: rgb(234,86,13);
  font-size: 180%;
  font-family: sans-serif;
  padding: 1em 0;
  margin-top: 0;
  text-align: center;
  border-bottom: 0;
  font-weight: bold;
}


h1.title_page.bg-blue {
  color: white;
  background-color: #428bca;
}

h1.title_page.bg-green {
  color: white;
  background-color: #5cb85c;
}

.w-full {
  width:100%;
}

.w-half {
  width:50%;
}

.sup {
  font-variant-position: super;
}

.txt-is {
  color: rgb(243,146,0);
}

.txt-gris {
  color: #5b5b5d;
}

.flex {
  display: flex !important;
}

.inline-flex {
  display: inline-flex;
}

.wrap {
  flex-wrap: wrap;
}

.col {
  flex-direction: column;
}

.x_evenly {
  justify-content: space-evenly;
}

.x_center {
  justify-content: center;
}

.y_center {
  align-items: center;
}

.txt-center {
  text-align: center;
}

.txt-right {
  text-align: right;
}

.mt-20 {
  margin-top: 20px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.ml-20 {
  margin-left: 20px !important;
}

.mr-20 {
  margin-right: 20px !important;
}

.m-20 {
  margin: 20px !important;
}

.img-full img {
  width: 100%;
  height: auto;
}

.info {
  font-family: Georgia, serif;
  font-style: italic;
}

.chiffre {
  display: inline-block;
  veritcal-align: middle;
  text-align: center;
  color: white;
  font-weight: 700;
  border-radius: 50%;
  background-color: rgb(243,146,0);
  width: 1.5em;
  height: 1.5em;
  margin-right: .2em;
}

.encadre {
  font-weight: 500;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 2px 5px 8px rgb(234,86,13);
}

.encadre_alt {
  font-weight: 700;
  border-radius: 10px;
  border-top-left-radius:0px;
  padding: 10px;
  border: rgb(234,86,13) solid 2px;
  margin-top: 0px;
}

.encadre_alt_title {
  background-color: rgb(234,86,13);
  padding: 5px 10px 0px 10px;
  color: white;
  margin-bottom: 0px !important;
  border-radius: 10px 10px 0px 0px;
  display: block;
  font-weight: 700;
  text-align: center;
  width : fit-content;
}

.bold {
  font-weight: bold;
}

.bold .bold {
  font-weight: 900;
}

/* CSS cohérente avec l'impression */

.replace_gif {
  display: none;
}

.print_only {
  display: none;
}

/* Sommaire auto ne s'affiche pas */
.toc {
  display: none;
}

.docModif .toc {
  display: inline-block;
}

/*Liens de la toolbox dans la Sidebar ne s'affichent pas*/
#t-whatlinkshere, #t-recentchangeslinked, #t-upload, #t-specialpages, #t-info, #t-permalink {
  display: none;
}

#t-print {
  display: inline;
}

/* personnalisation de la page Search */

.searchButton {
  color: white;
  background-color: #ea560d;
}

.vector-search-box-input {
  border-color: #ea560d;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
  background-color: #ea560d;
  border-color: #ea560d;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
  background-color: #5a5959;
  border-color: #5a5959;
}

.mw-search-createlink {
  display: none;
}

.mw-search-result-heading {
  font-size: 1.2em;
}

.mw-search-result-heading a {
  color: #ea560d;
}

.mw-search-result-data {
  display: none;
}

/* Correction de certaines choses */

/* CSS personnalisée par Thomas Varlet que je copie-colle pour le bon fonctionnement */

/* CSS de la page d'accueil, par Thomas Varlet légèrement adaptée par Marion Delacroix, 2014-2022 */

/*! Propriétés du body */

* {
  box-sizing: border-box;
}

/* Ne fonctionne pas. Hautement expérimental. Géré en js
!#firstheading + #bodyContent:has(div:has(div:has(div:has(.body_mp))) {
  display: none;
}
*/

.body_mp {
	
    box-sizing: border-box;
	background-color: #fff;
	font-family: 'Open Sans'; /*sans-serif;*/
	font-size: 16px;
	min-height: 100%;
	padding-top: 20px;
	width: 100%;
	color:#5a5959;
}

.body_mp .container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .body_mp .container {
    width: 90%;
  }
}

.body_mp ul {
  list-style-type: none;
  list-style-image: none;
  margin: 0;
  padding: 0 10px
}

/*! ================================================================ */

/*! Liens */

.body_mp a {
  color: #ea560d;
  text-decoration: none;
}

.body_mp a:hover,
.body_mp a:focus {
  color: #5a5959;
  text-decoration: underline;
}


.body_mp .wiki  a
{
  color: #5a5959;
  font-size: 14px;
}

.body_mp .btn-orange  a:hover
{
  color: #5a5959;
 
}

/*! ================================================================ */

/*! Mise en forme des textes et titres */

.body_mp .en-tete {
  margin-bottom: 50px;
}

.body_mp .soustitre {
  font-size: 18px;
}


.body_mp h1 {
  font-family: inherit;
  color: #ea560d;
  font-size: 30px;
  padding-top: 40px;
  text-align: center;
  font-weight: 300;
  border-bottom: 0px;
}

.body_mp h3 {
  font-family: inherit;
  color: #5a5959;
  font-weight: 600;
}

.body_mp h4
{
	font-size: 35px;
	font-weight: 300;
	color: #ea560d;
	text-align: left;
	
}

.body_mp .wiki {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  text-align: center;
  -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
  width: 100%;
}

@media (min-width: 768px) {
  .body_mp .wiki {
    width:45%;
  }
}

@media (min-width: 1200px) {
  .body_mp .wiki {
    width:22%;
  }
}

/*! ================================================================ */

/*! Mise en forme des textes et titres pour écrans */
 @media (min-width: 768px)
    {	   	
			.body_mp h1 {
              font-family: inherit;
			  color: #ea560d;
			  font-size: 50px;		
			  padding-top: 0px;
			  text-align: center;
			  font-weight: 300;
              border-bottom: 0px;
			} 
	}
	
/*! Espacements */
	
.body_mp .spacer3 {
			  padding-top: 20px;
			  padding-bottom: 20px;
			}

/*! ================================================================ */

/*! Espacements pour écrans */

@media (min-width: 768px)
	
	  {
	
		.body_mp .spacer3 {
			  padding-top: 20px;
			  padding-bottom: 20px;
			}
	
	}
	
/*! ================================================================ */

/*! Button */

.body_mp .btn-large {
color: #ea560d;
background-color: #fff;
border-color: #ea560d;
border-width: 1px;
}

.body_mp .btn-orange {
background-color: #ea560d;
color: #fff;
display: inline;
padding: .6em .6em .6em .6em;
font-size: 90%;
line-height: 1;
border: 0px solid #ea560d;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border-radius: .25em;

}

.body_mp .btn-orange a.external {
  color: #fff;
}

.body_mp .btn-orange a.external:visited {
  color: #000;
}

.body_mp .btn-orange a.external {
  background-image: none;
  padding-right: 0;
}

.body_mp .btn-gen {
  margin: 20px 0;
}

.body_mp .btn-gen a {
  padding: 6px 12px;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
}

/*! ================================================================ */

/*! Images */
.body_mp .cadreimg {
	display: inline-block; max-width: 100%;
  height: auto;
  padding: 10px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
 
}

.body_mp .bg-blue {
  background-color: #438bc5;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.body_mp .bg-green {
  background-color: #5fb25c;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.body_mp .bg-blue img, .body_mp .bg-green img {
  width: 25%;
  height: auto;
}

/*! ================================================================ */

/* CSS générale par Thomas Varlet, 2014 */

/**
 * MediaWiki style sheet for general styles on basic content elements
 *
 * Styles for basic elements: links, lists, etc...
 *
 * This style sheet is used by the Monobook and Vector skins.
 */

/* Links */
a {
	text-decoration: none;
	color: #0645ad;
	background: none;
}
/*a:visited {
	color: #5a5959;
}*/
a:active {
	color: #faa700;
}
a:hover, a:focus {
	text-decoration: underline;
}
a.stub {
	color: #772233;
}
a.new, #p-personal a.new {
	color: #ba0000;
}
a.new:visited, #p-personal a.new:visited {
	color: #a55858;
}

.liendetails > a
{
	text-decoration: none;
	color: #fff;
	background: none;
}

.liendetails > a:hover
{
	text-decoration: none;
	color: #5a5959;
	background: none;
}

.liendetails > a:visited
{
	text-decoration: none;
	color: #fff;
	background: none;
}



.lienparcours > a
{
	text-decoration: none;
	color: #fff;
	background: none;
}

.lienparcours > a:hover
{
	text-decoration: underline;
	color: #31B3CE;
	background: none;
}

.lienparcours > a:visited
{
	text-decoration: underline;
	color: #31B3CE;
	background: none;
}






/* Interwiki Styling */
.mw-body a.extiw,
.mw-body a.extiw:active {
	color: #36b;
}
.mw-body a.extiw:visited {
	color: #636;
}
.mw-body a.extiw:active {
	color: #b63;
}



/* Inline Elements */
img {
	border: none;
	vertical-align: middle;
}
hr {
	height: 1px;
	color: #aaa;
	background-color: #aaa;
	border: 0;
	margin: .2em 0;
}

/* Structural Elements */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: black;
	background: none;
	font-weight: normal;
	margin: 0;
	overflow: hidden;
	padding-top: .5em;
	padding-bottom: .17em;
	border-bottom: 1px solid #aaa;
}
h1 {
	font-size: 188%;
}
h2 {
	font-size: 150%;
}
h3,
h4,
h5,
h6 {
	border-bottom: none;
	font-weight: bold;
}
h3 {
	font-size: 132%;
}
h4 {
	font-size: 116%;
}
h5 {
	font-size: 108%;
}
h6 {
	font-size: 100%;
}

/* Some space under the headers in the content area */
h1,
h2 {
	margin-bottom: .6em;
}
h3,
h4,
h5 {
	margin-bottom: .3em;
}

p {
	margin: .4em 0 .5em 0;
	line-height: 1.5em;
}
p img {
	margin: 0;
}

ul {
	line-height: 1.5em;
	list-style-type: square;
	margin: .3em 0 0 1.6em;
	padding: 0;
}
ol {
	line-height: 1.5em;
	margin: .3em 0 0 3.2em;
	padding: 0;
	list-style-image: none;
}
li {
	margin-bottom: .1em;
}
dt {
	font-weight: bold;
	margin-bottom: .1em;
}
dl {
	margin-top: .2em;
	margin-bottom: .5em;
}
dd {
	line-height: 1.5em;
	margin-left: 1.6em;
	margin-bottom: .1em;
}

/* IE 6 and 7 lack support for quotes aroud the <q> element ('::before' and '::after'
   pseudoelements, 'quotes' property). Let's italicize it instead (using the star hack). */
q {
	*font-style: italic;
}

pre, code, tt, kbd, samp, .mw-code {
	/*
	 * Some browsers will render the monospace text too small, namely Firefox, Chrome and Safari.
	 * Specifying any valid, second value will trigger correct behavior without forcing a different font.
	 */
	font-family: monospace, Courier;
}
code {
	background-color: #f9f9f9;
}
pre, .mw-code {
	padding: 1em;
	border: 1px solid #ddd;
	color: black;
	background-color: #f9f9f9;
}

/* Tables */
table {
	font-size: 100%;
	
}

/* Forms */
fieldset {
	border: 1px solid #2f6fab;
	margin: 1em 0 1em 0;
	padding: 0 1em 1em;
	line-height: 1.5em;
}
fieldset.nested {
	margin: 0 0 0.5em 0;
	padding: 0 0.5em 0.5em;
}
legend {
	padding: .5em;
	font-size: 95%;
}
form {
	border: none;
	margin: 0;
}
textarea {
	width: 100%;
	padding: .1em;
	display: block;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
select {
	vertical-align: top;
}

/* Emulate Center */
.center {
	width: 100%;
	text-align: center;
}
*.center * {
	margin-left: auto;
	margin-right: auto;
}
/* Small for tables and similar */
.small {
	font-size: 94%;
}
table.small {
	font-size: 100%;
}

/* Images et videos */
.cadrevideo {
	display: inline-block; max-width: 100%;
  height: auto;
  padding: 10px;
  line-height: 1.42857143;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
 
}

.cadreimg {
	display: inline-block; max-width: 100%;
  height: auto;
  padding: 10px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
 
}

.liendetails {
	width: 120px;
}

.commentaires {
	border: 1px solid #ddd;
	background-color: #f9f9f9;
	font-family: Courier;
	font-size: inherit;
	line-height: 1.3em;
	padding: 1em;
	width: 80%;
}

.commentairesplus {
	border-left: 5px solid #428bca;
	background-color: #eeeeee;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.3em;
	padding: 1em;
	width: 80%;
}

.entetehome1 {
	font-size: 105%; 
	padding: 0.4em; 
	background-color: #428bca; 
	color: #fff;
	text-align: center;
}

.entetehome2 {
	font-size: 105%; 
	padding: 0.4em; 
	background-color: #428bca; 
	color: #fff;
	text-align: center;
}

.entetehome3 {
	font-size: 105%; 
	padding: 0.4em; 
	background-color: #428bca; 
	color: #fff;
	text-align: center;
}

.entetehome4 {
	font-size: 105%; 
	padding: 0.4em; 
	background-color: #428bca; 
	color: #fff;
	text-align: center;
}

.entetehome5 {
	font-size: 105%; 
	padding: 0.4em; 
	background-color: #428bca; 
	color: #fff;
	text-align: center;
}

.entetehome6 {
	font-size: 105%; 
	padding: 0.4em; 
	background-color: #5CB85C; 
	color: #fff;
	text-align: center;
}

.entetehome7 {
	font-size: 105%; 
	padding: 0.4em; 
	background-color: #428bca; 
	color: #fff;
	text-align: center;
}

.titreboussole{
	font-size: 23px; 
	padding-top: 30px; 
	padding-bottom: 20px; 
	color: #f0ad4e;
	text-align: left;
	font-weight: bold;
}

.titrehome {
	font-size: 18px; 
	padding-top: 20px; 
	color: #000;
	text-align: center;
	font-weight: bold;
}

.soustitrehome {
	font-size: 18px; 
	color: #fff;
	text-align: left;
	font-weight: bold;
}

.boussolehome {
	
	border: 1px solid #aaaaaa;
	padding: 0.4em; 
	background-color: #fff; 
	color: #000;
	text-align: center;
}

.etiquettehome {
background-color: #f0ad4e; 
color: #fff; 
display: inline; 
padding: .2em .6em .3em; 
font-size: 90%; 
font-weight: bold; 
line-height: 1; 
border: 0px solid #ea560d; 
text-align: center; 
white-space: nowrap; 
vertical-align: baseline; 
border-radius: 0px;
}

.etiquetteexpert {
background-color: #5cb85c; 
color: #fff; 
display: inline; 
padding: .2em .6em .3em; 
font-size: 70%; 
font-weight: bold; 
line-height: 1; 
border: 0px solid #5cb85c; 
text-align: center; 
white-space: nowrap; 
vertical-align: middle;
border-radius: 0px;
}



.btnhome {
	background-color: #fff; 
	color:#333; 
	display: inline; 
	padding: .6em .6em .6em .6em; 
	font-size: 100%; 
	line-height: 1; 
	border: 1px solid #ccc; 
	text-align: center; 
	white-space: nowrap; 
	vertical-align: middle; 
	border-radius: .25em;
}

.btnhome:hover,
.btnhome:focus,
.btnhome:active,
.btnhome.active {
  color: #333;
  background-color: #ebebeb;
  border-color: #adadad;
}


.btnhome > a
{
	text-decoration: none;
	color: #333;
	background: none;
}

.btnhome > a:hover
{
	text-decoration: none;
	color: #333;
	background: none;
}

.btnhome > a:visited
{
	text-decoration: none;
	color: #333;
	background: none;
}

.btnretour {
	background-color: #ea560d; 
	color:#333; 
	display: inline; 
	padding: .6em .6em .6em .6em; 
	font-size: 100%; 
	line-height: 1; 
	border: 1px solid #ea560d; 
	text-align: center; 
	white-space: nowrap; 
	vertical-align: middle; 
	border-radius: .25em;
}

.btnretour:hover,
.btnretour:focus,
.btnretour:active,
.btnretour.active {
  color: #fff;
  background-color: #5a5959;
  border-color: #5a5959;
}


.btnretour > a
{
	text-decoration: none;
	color: #fff;
	background: none;
}

.btnretour > a:hover
{
	text-decoration: none;
	color: #fff;
	background: none;
}

.btnretour > a:visited
{
	text-decoration: none;
	color: #fff;
	background: none;
}

.chiffres {
	font-family: inherit;
	font-size: 25px;
	color: red;
	font-weight: bold;
	padding: 5px;
}

.chiffresverts {
	font-family: inherit;
	font-size: 25px;
	color: green;
	font-weight: bold;
	padding: 5px;
}

.chiffresbleus {
	font-family: inherit;
	font-size: 25px;
	color: blue;
	font-weight: bold;
	padding: 5px;
}

.chiffresgris {
	font-family: inherit;
	font-size: 25px;
	color: #c0c0c0;
	font-weight: bold;
	padding: 5px;
}





.goog-te-gadget {float: left; margin-left: -30px;}
.goog-te-combo {display: inline-block;}
.goog-te-banner-frame.skiptranslate {display: none;}
 body {top: 0px;}
.goog-tooltip {display: none;}
.goog-tooltip:hover {display: none;}
.goog-text-highlight {
    background-color: transparent;
    border: none; 
    box-shadow: none;
}
.goog-te-gadget {font-size: 0px; }
.goog-te-gadget img {display: none}
.goog-logo-link {display: none;}