MediaWiki:Chameleon.css
De WikiMontessori
Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
- Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
- Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
/*Modifie la hauteur du bandeau de navigation*/
nav#mw-navigation{
min-height:10vh;
}
/*Supprime la ligne de séparation du titre avec le contenu sur la page d'accueil (titre qui a été retiré par le wikicode)*/
body.rootpage-Accueil #firstHeading{
border: none;
margin:0;
padding:0;
}
/*Affiche l'image de fond*/
body.rootpage-Accueil #ImageAccueil{
background-color: transparent;
background-size: cover;
background-position: 20% bottom;
height: 90vh; /*100vh - 10vh de nav*/
position:relative;/*pour placement du titre en absolute*/
overflow-x:visible;
overflow-y:clip;
}
body.rootpage-Accueil #ImageAccueil::before{
content: " ";
position: absolute;
width: 100vw;
height: 100%;
z-index: -1;
left: calc(0px - (100vw - 100%)/2);
background-image: url(https://wikimontessori.org/images/4/4e/Vue_d%27ensemble.jpg);
background-position:0% center;
background-size:cover;
}
/* Évite la scrollbar liée à l'image de fond de la page d'accueil*/
body.rootpage-Accueil{
overflow-x:hidden;
}
/*Titre principal*/
body.rootpage-Accueil #ImageAccueilContent{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body.rootpage-Accueil #ImageAccueilContent h1{
font-size:3rem;
margin-top:0;
padding-top:0;
color:white;
text-shadow: 0.04em 0.04em 0.04em rgba(0,0,0,1);
border-bottom: 0.03rem solid white;
padding-bottom: 20px;
}
body.rootpage-Accueil #ImageAccueilContent p{
margin-top: 30px;
font-size:1.5rem;
color:white;
text-shadow: 0.04em 0.04em 0.04em rgba(0,0,0,1);
}
@media (min-width: 768px){
body.rootpage-Accueil #ImageAccueilContent h1{
font-size:4rem;
}
body.rootpage-Accueil #ImageAccueilContent p{
font-size:2rem;
}
}
@media (min-width: 992px){
body.rootpage-Accueil #ImageAccueilContent h1{
font-size:5rem;
}
body.rootpage-Accueil #ImageAccueilContent p{
font-size:3rem;
}
}
/*CARTES*/
/*Dimensions des img dans les cards*/
.card .card-img-top {
width: 100%;
object-fit: cover;
}
/*Définit la hauteur de l'image en fonction du type de carte : s, m, l*/
.card-s .card-img-top {
height: 25vh;
}
.card-m .card-img-top {
height: 40vh;
}
.card-l .card-img-top {
height: 50vh;
}
.card-body{
padding:.75rem;
}
h3.card-title{
margin:0;
padding:0;
}
/*Suppression des effets de la balise <p> insérée par MW*/
.card p{
margin:0;
}
/*Suppression des effets de la balise <pre> insérée par MW*/
.card pre{
padding:0;
border:none;
margin:0;
font-size:0;
}
/*Espacement des cartes*/
.card{
margin-top:1rem;
margin-bottom:1rem;
}
/*Image principale d'une page de matériel - Float à partir d'une certaine largeur d'écran*/
div.featuredImage .thumbimage{
max-height: 20rem;
width: auto;
}
@media (min-width: 768px){
div.featuredImage{
float:right;
max-width:30vw;
max-height:60vw;
clear:right;
}
}
div.featuredImage .thumbcaption{
text-align:center;
}
/*Chargement des polices de caractère*/
@font-face {
font-family: Abel;
src: url("resources/assets/Abel-Regular.ttf") format("truetype");
}
@font-face {
font-family: ArchitectsDaughter;
src: url("resources/assets/ArchitectsDaughter-Regular.ttf") format("truetype");
}
body.cat-Fiche_de_préparation h1 {
background-color:orange;
border-radius:10px;
border:none;
text-align:center;
vertical-align: middle;
padding:20px;
}
body.cat-Fiche_de_préparation div.nobreak {
background-color:orange;
border-radius:10px;
border:none;
padding:20px;
margin-bottom:20px;
}
body.cat-Fiche_de_préparation div.nobreak h2{
padding:20px 0;
margin:0;
}
/* -------------------------------------------------------------*/
/* Menu supérieur */
/* -------------------------------------------------------------*/
/* Augmentation de la taille de la barre de recherche (en flex) */
@media (min-width: 1105px)
{
/* Supprime la règle étrange de marge à gauche pour pousser les éléments à droite */
/* Utilise la règle flex-end, faite pour cela */
.p-navbar .navbar-nav.right {
/*margin-left: 0 !important;*/
justify-content: flex-end !important;
flex-grow: 1;
}
/* La barre prend 50% de l'espace restant disponible */
#p-search {
flex-grow: 0.5;
}
}
/* Suppression des icones */
a.n-mainpage-description::before
{
display:none ;
}
/* Texte des menus plus grand */
#mw-navigation .nav-link
{
font-size: large;
}
/* Menus soulignés au survol */
#mw-navigation .nav-link:hover
{
text-decoration: underline;
}
/* La zone de clic des résultats de recherche est plus haute */
.mw-searchSuggest-link > .suggestions-result
{
padding: 0.75em 0.25em;
}
/* -------------------------------------------------------------*/
/* Gestion des commentaires */
/* -------------------------------------------------------------*/
/* Les commentaires prennent l'espace de leur conteneur */
.comments-body .full, .comments-body .reply, .comments-body #comment
{
width: auto;
}
.comments-body #comment
{
width: 100%;
}
/* -------------------------------------------------------------*/
/* Gestion du pied de page */
/* -------------------------------------------------------------*/
.msd-block
{
display: flex;
align-items: end;
color: black;
margin-top: 10px;
}
.msd-block .p-navbar
{
border-radius: 5px 5px 0 0;
}
.msd-block .footer-info
{
justify-content: flex-end;
flex-grow: 1;
font-style: italic;
}
.msd-block .footer-info > div
{
margin:0 5px;
}
@media (max-width: 1000px)
{
.msd-block
{
align-items: flex-start;
flex-direction: column-reverse;
}
.msd-block .footer-info
{
justify-content: center;
margin: 10px 0;
text-align:center;
}
}
.msd-footer
{
display: flex;
color: white ;
align-items: center;
background-color: #252c62;
padding: 15px;
}
.msd-footer a
{
color: inherit ;
}
.msd-footer .footer-icons
{
flex-grow: 1;
}
.footer-info
{
margin: 0;
text-align: justify;
}
/* -------------------------------------------------------------*/
/* Fiches */
/* -------------------------------------------------------------*/
.fiche
{
padding: 25px;
border: 1px solid grey;
box-shadow: 0 0 11px 5px grey;
margin: 10px 3px;
background-color: cornsilk;
}
.fiche p, .fiche ul, .fiche p, .fiche li
{
margin: 0;
text-align: justify;
}
.fiche ul
{
list-style-position:inside;
}
.fiche table, .fiche td
{
border: 1px solid #CCC;
border-collapse:collapse;
margin: 20px 0;
}
.fiche td, .fiche th
{
border: 1px solid #CCC;
padding: 10px;
}
.fiche #themes_education_nationale ul
{
list-style-type: none;
list-style-image: none;
}
.fiche #themes_education_nationale li
{
float:right;
margin-left: 10px;
border: 1px solid #CCC;
padding: 0px 10px;
}
.fiche .fiche_titre
{
font-size: 2.2rem;
padding: 20px 0;
text-decoration: underline;
border:0;
}
.fiche #encart_1 p
{
text-align:center;
}
