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

Version du 18 août 2022 à 10:49

/* Tout CSS placé ici sera chargé avec les pages accédées par les utilisateurs du site mobile */

@import url( 'https://fonts.googleapis.com/css?family=Nunito:wght@300;400;500;800&display=swap');

body{
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
}
.corpsContenu{
    right: 0;
    left: 0;
    margin: auto;
    padding: 0;
    max-width: 944px;
}
 
/* positionnements */
.pr{
    position: relative;
}
.pa{
    position: absolute;
}

/* texte */
h1{
    font-family: 'Nunito', sans-serif !important;
    font-weight: 800;
}
.banniereTitre{
    margin: 0;
    padding: 0;
    bottom: 170px;
    width: 100%;
    text-align: center;
    color: white;
    border-bottom: none;
}
h2{
    position: relative;
    margin: 0;
    text-align: left;
    color: #1c2731;
    font-family: 'Nunito',  sans-serif !important;
    font-weight: 500;
}
.banniereSection h2{
    color: white;
    width: 100%;
    padding: 20px 0px 0px 10%;
    font-size: 25px;
    font-weight: 800;
    border-bottom: none;
}
p{
    position: relative;
    margin: 0;
    color: #1f242a;
    font-weight: 400;
}
.banniereEntete p{
    margin: 0;
    padding: 0;
    bottom: 20px;
    right: 30px;
    width: 100%;
    color: white;
    text-align: right;
    font-weight: 500;
}
.footer p{
    position: absolute;
    padding: 0;
    bottom: 25px;
    right: 140px;
    text-align: right;
    color: #1c2731;
}
.footer p~div{
    position: absolute;
    margin: 0;
    padding: 0;
    bottom: 20px;
    right: 30px;
    width: 100px;
}

/* boites qui séparent les sections */
.configContenu{
    right: 0;
    left: 0;
    margin: auto;
    padding: 0;
    width: 100%;
}
.contenuIndente{
    padding: 10px 10%;
    width: 80%;
}
.banniereEntete{
    height: 300px;
}
.h-100per{
    height: 100%;
}
.banniereSection{
    height: 120px;
}
.motifExagonalOrange{
    background-color: #DC8629;
    background-image: linear-gradient(30deg, #f09432 12%, transparent 12.5%, transparent 87%, #f09432 87.5%, #f09432),
    linear-gradient(150deg, #f09432 12%, transparent 12.5%, transparent 87%, #f09432 87.5%, #f09432),
    linear-gradient(30deg, #f09432 12%, transparent 12.5%, transparent 87%, #f09432 87.5%, #f09432),
    linear-gradient(150deg, #f09432 12%, transparent 12.5%, transparent 87%, #f09432 87.5%, #f09432),
    linear-gradient(60deg, #FA9D39 25%, transparent 25.5%, transparent 75%, #FA9D39 75%, #FA9D39),
    linear-gradient(60deg, #FA9D39 25%, transparent 25.5%, transparent 75%, #FA9D39 75%, #FA9D39);
    background-size:80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}
.degradeOrange{
    background: linear-gradient(45deg, rgba(128, 68, 3, 0.6), rgba(217, 93, 77, 0.6), rgba(222, 138, 46, 0.6));
    top: 0;
}
.motifExagonalBleu{
    background-color: #277FC7;
    background-image: linear-gradient(30deg, #2c85cf 12%, transparent 12.5%, transparent 87%, #2c85cf 87.5%, #2c85cf),
    linear-gradient(150deg, #2c85cf 12%, transparent 12.5%, transparent 87%, #2c85cf 87.5%, #2c85cf),
    linear-gradient(30deg, #2c85cf 12%, transparent 12.5%, transparent 87%, #2c85cf 87.5%, #2c85cf),
    linear-gradient(150deg, #2c85cf 12%, transparent 12.5%, transparent 87%, #2c85cf 87.5%, #2c85cf),
    linear-gradient(60deg, #4297dc 25%, transparent 25.5%, transparent 75%, #4297dc 75%, #4297dc),
    linear-gradient(60deg, #4297dc 25%, transparent 25.5%, transparent 75%, #4297dc 75%, #4297dc);
    background-size:80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}
.degradeBleu{
    background: linear-gradient(45deg, rgba(4, 50, 102, 0.8), rgba(30, 94, 159, 0.7), rgba(44, 133, 207, 0.7));
    top: 0;
    background-blend-mode: multiply, screen, normal;
}
.degradeGrisClair{
    background: linear-gradient(45deg, rgba(235, 235, 235, 0.9), rgba(255, 255, 255, 0.99));
    top: 0;
    background-blend-mode: multiply, screen, normal;
}

/* images */
.banniereEnteteImg{
    padding: 0;
    height: 130px;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 60px;
}
.iconeSousTexte{
    height: 60%;
    position: absolute;
    top: 60px;
}
.relierIconeAuGradient{
    fill:url(#Gradient1);
    opacity: 1;
}
.background1{
    background-image:  url('https://wiki.fabbulle.tech/images/4/4a/Thomas-xavier-min.jpg');
    background-position: center;
    background-size: cover;
}
.background2{
    background-image:  url('https://wiki.fabbulle.tech/images/thumb/6/6c/Realisation-min.jpg/1200px-Realisation-min.jpg');
    background-position: center bottom;
    background-size: cover;
}
.background3{
    background-image:  url('https://wiki.fabbulle.tech/images/thumb/3/35/Surjetteuse-min.jpg/1200px-Surjetteuse-min.jpg');
    background-position: center;
    background-size: cover;
}

/* margin et padding */
.pt-50{
    padding-top: 50px;
}
.mb-100{
    margin-bottom: 100px;
}
.mb-70{
    margin-bottom: 70px;
}
.mb-50{
    margin-bottom: 50px;
}