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

Version du 18 décembre 2023 à 10:26

/* Le CSS placé ici sera appliqué à tous les habillages. */

/* Les règles CSS pour la version mobile se trouvent dans le fichier MediaWiki:Mobile.css */

*{box-sizing:border-box;}
#pfForm .ui-widget input,#pfForm .ui-widget{font-size:1em;}


html {
  scrollbar-color: rgba(67, 146, 195, 1) #fff;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 8px;
  background-color: #fff;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(67, 146, 195, 1);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}


/* MENU ICONS RIGHT */

.menu-icons-right p {
  position: absolute;
  right: -120px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.menu-icons-right p a {
  padding: 10px 0;
}

.menu-icons-right p a img {
  transition: all .5s ease-in-out;
}

.menu-icons-right p a img:hover {
  transform: scale(1.15);
}


/* BURGER MENU */

#mw-sidebar-checkbox:not(:checked) ~ .mw-header #mw-sidebar-button::before, #mw-sidebar-button::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E menu %3C/title%3E %3Cpath d=%22M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z%22/%3E %3C/svg%3E");
}

.mw-ui-icon-element:not(.disabled):hover {
  background-color: unset;
}

/* BACK TO TOP BUTTON */

.back-to-top-wrapper {
  position: absolute;
  top: 100vh;
  right: 1.25rem;
  bottom: 0;
  width: 3em;
  pointer-events: none;
  margin-top: 10em;
  z-index: 5;
}

a.back-to-top-link {
  position: fixed;
  position: sticky;
  color: rgba(67, 146, 195, 1);
  pointer-events: all;
  top: calc(100vh - 12rem);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24pt;
  line-height: 3rem;
  text-align: center;
  width: 2.5rem;
  text-decoration: none;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #fff;
  transition: transform .5s ease-in-out, color .5s ease-in-out, background .5s ease-in-out
}

.back-to-top-link:hover {
  color: #fff;
  background: rgba(67, 146, 195, 1);
  transform: scale(1.2);
}

/* PAGES H3 */

.page-sommaire h3 {
  padding-top: 0;
  padding-left: 3%;
  background-image: linear-gradient(90deg,rgb(67,146,195) 1%,rgb(255,255,255) 1%,rgb(255,255,255) 100%);
  margin-top: 0;
  font-size: 1.4rem;
  font-weight: normal;
}

.page-structure h2,
.page-structure h3, .page-annuaire-institut h3 {
  border-bottom: none;
  padding-top: 0;
  padding-left: 3%;
  background-image: linear-gradient(90deg,rgb(67,146,195) 1%,rgb(255,255,255) 1%,rgb(255,255,255) 100%);
  /* background-image: linear-gradient(90deg,rgb(67,146,195) 1%,rgb(255,255,255) 1%,rgb(255,255,255) 50%,rgba(67,146,195,.5)); */
  margin-top: 0;
  font-size: 1.4rem;
  font-weight: normal;
}

.page-accueil h3, .page-service h3, .page-annuaire-cnrs h3 {
  padding-top: 0;
  padding-left: 3%;
  background-image: linear-gradient(90deg,rgb(255,207,15) 1%,rgb(255,255,255) 1%,rgb(255,255,255) 100%);
  margin-top: 0;
  font-size: 1.4rem;
  font-weight: normal;
}

/* LOGO ON THE RIGHT */

main.mw-body {background-image: unset; background-position: unset;}

/* SEARCHBAR */

#p-search.vector-search-box-vue {background: unset;}
#searchform #simpleSearch {width: unset;}
.cdx-thumbnail__image {background-size: contain;}

/* FOOTER ICONS */

#footer-icons {display: none;}

/* LEFT NAV SIDEBAR */

nav.mw-sidebar {background-color: #fff;}

#p-Contribuer.vector-menu {
background-color: #fff; 
background-repeat: no-repeat; 
background-image: url(/images/f/fd/Losangejaune9.png),url(/images/6/67/Losangebleu9.png);
background-position: left 4% top 40%,left 4% top 75%;
}

#p-Contribuer.vector-menu ul li a {padding-left: 20px;}

@media (max-width: 999px) {
#p-Contribuer.vector-menu{background-position: left top 60%,left top 90%;}
}

/* NAV TOOLBAR */

div #right-navigation {transform: unset;}

/* ALL PAGES */

@media screen and (min-width: 1200px) {
  .mw-sidebar, .sidebar-toc, .sidebar-toc::after {
     margin-left: 0;
  }
}

div.mw-page-container {max-width: unset;}

@media screen and (min-width: 1000px) {
  #mw-sidebar-checkbox:not(:checked) ~ .vector-sidebar-container-no-toc ~ .mw-content-container {
    padding-left: 0;
  }
}

main#content {width: inherit;}

div.vector-sidebar-container {
  z-index: 10;
  position: absolute;
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  top: 70px; 
  border-radius: 5px;
}

#mw-panel, #mw-navigation {border-radius: inherit;}


div.vector-sticky-toc-container.mw-sticky-header-element #mw-panel-toc {left: 15%; top: 45px; scrollbar-width: thin;}

.leservice {justify-content: center;}

/* Hiding back to former skin button */
nav#mw-panel div.mw-sidebar-action {
  display: none;
}

/* HEADER */

header.vector-sticky-header {max-width: unset;}

#p-lang-btn-sticky-header {align-items: center;}

/*MENU*/

div#mw-panel #p-Contribuer{
  background-color: #fff;
  background-repeat:no-repeat;
  background-image: url("/images/f/fd/Losangejaune9.png"),url("/images/6/67/Losangebleu9.png");
  background-position:left top 40%, left top 75%
}

/*TOP*/

#right-navigation{margin-top:0;-webkit-transform:translateY(2.5em);-ms-transform:translateY(2.5em);transform:translateY(2.5em);}
div#simpleSearch{width:16em;height:2.2em;margin-top:-0.1em}
#p-search{padding-top:19px;margin-top:-19px;background:transparent url("/images/5/52/Bggris.png") no-repeat top center}
.mw-body{background-color:#fff;background-image:url("/images/c/cc/Bgsearch1.png"),url("/images/5/52/Bggris.png");background-position:top -10px right 7.5em,top -58px right 2em;background-repeat:no-repeat}
div#simpleSearch #searchInput{height:100%;}

/*ACCUEIL*/

.container-grid-2-tiny-1,.leservice,.lastructure{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
[class*="container"]{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;}
[class*="grid-2"]> *{-ms-flex-preferred-size:48%;flex-basis:48%}
/*
[class*="container"] h3{padding-top:0;padding-left:3%;background-image: linear-gradient(90deg, rgb(255,207,15) 1%, rgb(255, 255, 255) 1%, rgb(255, 255, 255) 50%, rgba(255,207,15,.5));margin-top:0;font-size:1.4rem;font-weight:normal}
*/
.cycle{background:transparent url("/images/a/ae/CycleVieCatOpidorB.png")no-repeat;position:relative;margin-top:2em}
.grandcycle{min-height:28em;}
.catopidor-mainpage > .grandcycle{width:28em;margin:1em auto;}

.rond{border: 1px solid rgb(255, 207, 15);border-radius: 50%;display: -webkit-flex;display: -ms-flexbox;display: flex;height: 6em;width: 6em;line-height: 1.3em;background-color: rgba(255, 207, 15,.1);}
.rond {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);transition:1s;}
.rond:hover,.rond:focus{background-color: rgba(255, 207, 15,.5);border: 1px solid rgb(255, 207, 15);-webkit-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3)}
.Planification{position: absolute;left: 10.9em;top: 0.1em;}
.Collecte{position:absolute;top:3.4em;left:18.1em}
.Analyse{position:absolute;top:10.6em;left:21em}
.Documentation{position:absolute;top:18.1em;left:18.1em;font-stretch: condensed;}
.Stockage{position:absolute;top:21.2em;left:10.6em}
.Conservation{position:absolute;top:18em;left:3.1em;font-stretch: condensed;}
.Exposition{position:absolute;top:10.5em;left:0.2em}
.Réutilisation{position:absolute;top:3.1em;left:3.4em}
.rond  > a{-webkit-flex:0 1 6em;-ms-flex:0 1 6em;flex:0 1 6em;text-align: center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
.mw-collapsible{display:inline}
.catopidor-mainpage > ul{list-style:none;width:60%;margin:1em auto;}
.catopidor-mainpage>ul>li{padding:0.4em;border-bottom:1px solid rgba(210, 210, 210,.5);font-size:1rem;}
.catopidor-mainpage>ul>li>a{font-variant:small-caps;}
.one ul a,.two ul a{display:block}
.catopidor-mainpage>ul>li:hover,.catopidor-mainpage>ul>li:focus{border-bottom:1px solid rgb(255,207,15);background-color:rgba(255,207,15,0.1);}
.catopidor-mainpage .maps-map{margin:2em auto;}

 /*INFOBOX*/

.infobox{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}
.identiteservice{padding:.5em;border:1px solid rgba(255,207,15,.5);width:33em}
.identitestructure{padding:.5em;border:1px solid rgba(67,146,195,.5);width:33em}
.identiteservice tr,.identitestructure tr{text-align:left;vertical-align:top}
.identiteservice > caption{background-image: linear-gradient(90deg, rgb(255, 207, 15) 5%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, rgb(255, 207, 15));color: #333;font-weight:bold;border-radius:5px 5px 0 0;padding:.5em;}
.identitestructure > caption{background-image: linear-gradient(90deg, rgb(67, 146, 195) 5%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 80%, rgb(67, 146, 195));color: #333;font-weight:bold;border-radius:5px 5px 0 0;padding:.5em;}
.identiteservice th,.identitestructure th{font-weight:normal;color:grey;}
.infobox .titre{font-variant:small-caps;text-align:center;font-weight:bold}
.petitcycle{width:20.5em;height:20.5em;background-size:contain;margin:0 auto}
.petitcycle .rond{font-size:75%}
.infobox > .maps-leaflet{margin:0 auto;}

/*DETAIL*/

.detail{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:1em;}
.construc{font-style:italic;font-size: 90%;}
.description{margin-bottom:2em;padding-left:4em;padding-top:2em;min-height:84px}
.service{background:transparent url("/images/f/f0/Bg_description_service.png")no-repeat left top;}
.structure{background:transparent url("/images/d/d0/Bg_description_structure.png")no-repeat left top;}
div.description p,p.construc{margin-left:0}
.detail>.cycle{margin-left:4em;}
/*.leservice .detail p, .detail>.cycle{margin-left:4em;}*/
/*div.description p,p.construc{margin-left:0}*/
.libelle{display:block;color:grey;}
p>.libelle{margin-left:-2em;}
.section{border-top:1px dashed #ffcf0f}
.thematique{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;}
.thematique>li{margin:.5em;background:rgba(128,128,128,.2) url("/images/a/a1/Bgthematique.png")no-repeat top right;padding:0 1.5em 0 .5em;}
pre{overflow-wrap:break-word;white-space: pre-wrap;}
.graphe{margin-right:3em}
.graphe img{max-width:100%}
.pagerelation{border:1px dashed #808080;border-radius: 10px;}
.pagerelation li{list-style-image:none;list-style-type:none;}

/*TABLES*/

table.wikitable{border:none;background-color:transparent;border-collapse: collapse;text-align:left;width:100%}
table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
 border: 0; padding: 0.22em 1em; min-width:12em}
table.wikitable > tr,table.wikitable > * > tr,.infoboxservice tr{border-bottom: 1px solid rgba(210, 210, 210, 0.5);}

/*RESULT */

.headerSort{font-variant:small-caps}

/*CONTRIBUER*/

.contribuer-service > h2{padding-left:20px;background:no-repeat top left url("/images/1/18/Losangejaune1.png");}
.contribuer-service form .oo-ui-widget{margin-bottom: 0}
.contribuer-service form{margin:1.5em 0;padding:.5em;background-color:rgb(255,207,15);max-width:max-content;width:max-content;display:flex;}
.contribuer-service form .oo-ui-fieldsetLayout-group .oo-ui-layout {display: flex; align-items: center; gap: 12px;}

@media screen and (max-width: 575px) {
  .contribuer-service form{margin:1.5em 0;padding:1em;background-color:rgb(255,207,15);max-width:max-content;width:max-content;display:flex;}
  .contribuer-service form .oo-ui-fieldsetLayout-group .oo-ui-layout {display: flex; flex-flow: column; align-items: center; gap: 12px;}
}

.contribuer-structure > h2{padding-left:20px;background:no-repeat top left url("/images/e/ef/Losangebleu1.png");}
.contribuer-structure form .oo-ui-widget{margin-bottom: 0}
.contribuer-structure form{margin:1.5em 0;padding:.5em;background-color:rgb(67,146,195);max-width:max-content;width:max-content;display:flex;}
.contribuer-structure form .oo-ui-fieldsetLayout-group .oo-ui-layout {display: flex; align-items: center; gap: 12px;}

@media screen and (max-width: 575px) {
  .contribuer-structure form{margin:1.5em 0;padding:1em;background-color:rgb(67,146,195);max-width:max-content;width:max-content;display:flex;}
  .contribuer-structure form .oo-ui-fieldsetLayout-group .oo-ui-layout {display: flex; flex-flow: column; align-items: center; gap: 12px;}
}

.contribuer-service>form>p,.contribuer-structure>form>p{text-align:center;}
.contribuer-service input[type="submit"],.contribuer-structure input[type="submit"]{border:1px solid rgba(170,170,170,.1);padding-top:2px;padding-bottom:2px}

/*VOIR*/

.voirservices:before{content:'» ';font-size:2em;color:#ffcf0f;}

/*FORMULAIRES*/

.checkboxLabel > .mandatoryFieldSpan,#pfForm .mandatoryField{border: 1px solid rgb(215, 98, 80);}
span[class*="checkboxesSpan mandatoryFieldSpan"]{border: 1px solid rgb(215, 98, 80);border-radius:3px;padding:2px}
table.formtable th{min-width:20%}
.mw-body .aide{margin-left:1em;margin-top:1em;width:50%}
.mw-body #Usages .aide{width:20%}
.bgfield,.flexhz{background-color:white;margin-bottom:1em;padding-left:1em;}
.bgfield>.flexhz{padding-left:0;}
.flexhz{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;}
.input{width:50%}
#Usages .input{width:80%}
.label{display:block;font-weight:bold}
textarea:focus,input:focus,select:focus{outline:1px solid grey}
.bgfield .pfTreeInput{height:auto !important;width:auto !important}
.wikiEditor-ui-toolbar .section{border:0}
.ssdiscip{padding-left:1em;margin-left:1em;border:1px dotted grey}
.ssdiscip label{display:block}
.seule{width:calc(50% - 1.5em);}
.padd{padding:1em 1.4em;}
#pfForm .createboxInput,#pfForm .mandatoryField{width:100%}
#pfForm .logo .createboxInput{width:80%}


/* FILTERS */

.filtered-filter {
    background-color: white;
}
.filtered-filter:hover {
    background-color: #eaecf0;;
}

/* Annuaires*/

.container2-grid-2-tiny-1,.leservice,.lastructure{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
[class*="container2"]{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;}
[class*="grid-2"]> *{-ms-flex-preferred-size:48%;flex-basis:48%}
[class*="container2"] h3{padding-top:0;padding-left:3%;background-image: linear-gradient(90deg, rgb(67, 146, 195) 1%, rgb(255, 255, 255) 1%, rgb(255, 255, 255) 50%, rgba(67,146,195,.5));margin-top:0;font-size:1.4rem;font-weight:normal}
.mw-collapsible{display:inline}
.catopidor-mainpage-annuaire > ul{list-style:none;width:60%;margin:1em auto;}
.catopidor-mainpage-annuaire>ul>li{padding:0.4em;border-bottom:1px solid rgba(210, 210, 210,.5);font-size:1rem;}
.catopidor-mainpage-annuaire>ul>li>a{font-variant:small-caps;}
.one ul a,.two ul a{display:block}
.catopidor-mainpage-annuaire>ul>li:hover,.catopidor-mainpage>ul>li:focus{border-bottom:1px solid rgb(67, 146, 195);background-color:rgba(67, 146, 195,0.1);}


@media screen and (max-width: 65em){
[class*="grid-2"] > * {-ms-flex-preferred-size:100%;flex-basis:100%}
.leservice,.lastructure{flex-direction:column}
.infobox {-moz-box-ordinal-group: -2;order: -1;margin-top:1em;}
.identiteservice,.identitestructure{width:100%}
table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
min-width:100%}
.flexhz{-ms-flex-wrap:wrap;flex-wrap:wrap;}
textarea[cols],.input,#pfForm .createboxInput,#pfForm .mandatoryField,.seule,#Usages .input,.mw-body .aide,.mw-body #Usages .aide {width:100% !important;max-width:100%}
.ssdiscip{margin-left:0}
}