web/style.less

814 lines
16 KiB
Plaintext
Executable File

@import "bibli/fontello/css/fontello.css"; // Icones Fontelo
@import "bibli/ubuntu/ubuntu.min.css"; // Polices Ubuntu
@import "bibli/animate.min.css"; // Animations CSS
@import "bibli/fork-awesome/css/fork-awesome.min.css"; // Animations CSS
@fond: #2D2F34;
@fond-footer: darken(@fond, 3%);
@fond-option-hover: lighten(@fond, 10%);
@texte-secondaire: #9DA3B0;
@texte-principal: white;
@couleur-lien: white;
@couleur-principale: red;
.texte-secondaire {
color: @texte-secondaire;
}
::selection {
color: @fond;
background-color: @texte-principal;
}
.boutton {
border: 2px solid grey;
padding: 10px;
margin: 5px;
display: inline-block;
border-radius: 10px;
color: @texte-principal;
text-decoration: none;
&:hover {
color: @couleur-principale;
border: 2px solid @couleur-principale;
}
}
html {
font-size: 20px;
}
@media all and (max-width: 640px) {
html {
font-size: 13px;
}
}
a {
text-decoration: underline;
color: @couleur-lien;
transition: all 0.1s linear;
&:hover {
text-decoration: none;
color: @couleur-principale;
}
}
.pub-carree-bloc {
display: flex;
text-align: center;
justify-content: center;
}
.pub-carree {
display: flex;
border: white 3px solid;
text-align: center;
justify-content: center;
max-width: 300px;
line-height : 0pt;
border-radius: 10px;
margin: 20px;
padding: 2px;
}
.pub-horizontale-bloc {
display: flex;
text-align: center;
justify-content: center;
}
.pub-horizontale {
border: #808080 2px solid;
border-radius: 10px;
margin: 30px;
padding: 2px;
width: 729px;
min-height: 90px;
/* Affiche "Vous avez bloqué cette publicité" quand on a un bloqueur de pub ou quand on clic sur la croix */
background-image: url("img/non-pub-horizontale.png");
}
.optionhaute {
border-top: none;
}
.logo {
margin-bottom: 10px;
}
.img404 {
text-align: center;
padding-top: 10px;
padding-bottom: 30px;
}
body, code {
font-family: "Ubuntu";
padding: 0px;
margin: 0px;
background-color: @fond;
color: @texte-principal;
font-size: 25px;
line-height: 35px;
}
.grille-services {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 30px;
padding-top: 30px;
@media (max-width: 1500px) {
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1000px) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) {
grid-template-columns: 1fr;
}
}
.service {
padding: 20px;
border: 2px #2D2F34 solid;
border-radius: 16px;
transition: border 0.2s linear;
color: white;
text-decoration: none;
&:hover {
border: 2px white solid;
}
&:link {
color: white;
}
}
.themeService {
text-align: center;
font-size: 0.8em;
}
.titreService {
font-size: 1.3em;
text-align: center;
}
.urlService {
margin-top: -6px;
font-size: 0.8em;
color: grey;
text-align: center;
}
.logoService {
text-align: center;
}
.elLogoServ {
max-width: 150px;
max-height: 100px;
color: white;
}
.descService {
padding-top: 5px;
padding-bottom: 10px;
text-align: left;
}
main {
margin: 0px;
margin-top: 20px;
margin-left: 30px;
margin-bottom: 50px;
margin-right: 50px;
}
.centre {
text-align: center;
justify-content: center;
}
// FOOTER
.textefooter {
margin: 10px;
line-height: 1.5em;
width: 60%;
}
.logofooter {
padding-left: 6%;
margin-top: 20px;
}
.ant {
}
.interlude {
display: flex;
justify-content: center;
}
.traitinterlude {
border-top: 2px gray dashed;
width: 800px;
}
.basfooter {
display: flex;
justify-content: space-around;
margin-top: 30px;
margin-bottom: 20px;
}
.corps {
text-align: center;
}
footer {
text-align: center;
background-color: @fond-footer;
display: flex;
flex-direction: column;
}
.logogris {
}
.ant {
background-color: @fond-footer;
background-image: url(img/antpetitgris.png);
width: 264px;
height: 80px;
display: inline-block;
text-decoration: none;
}
.ant:hover {
background-image: url(img/antpetit.png);
}
.liensfooter {
display: flex;
flex-direction: row;
padding: 20px;
}
.lienfooter {
margin: 10px;
}
@media (max-width: 500px) {
.textefooter {
padding-left: 10%;
padding-right: 10%;
}
}
/* ----------------------- HEADER ------------------------ */
#header {
margin: 0px;
width: 50%;
border: 3px white solid;
border-top: none;
border-radius: 0px 0px 12px 12px;
text-align: center;
font-size: 2em;
display: flex;
justify-content: center;
padding: 30px;
}
#pres {
display: flex;
justify-content: center;
text-align: center;
}
header {
display: flex;
justify-content: center;
}
#header:active {
box-shadow: 2px 2px 3px white inset;
}
#header:hover {
background-color: @fond-option-hover;
transition: all 0.2s ease-in-out;
color: @couleur-lien !important;
}
// ----- TITRES -----
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
}
h1 {
font-size: 250%;
text-align: center;
}
h2 {
font-size: 200%;
}
h3 {
font-size: 160%;
}
h4 {
font-size: 140%;
}
h5 {
font-size: 125%;
}
h6 {
font-size: 110%;
}
.in92pack {
color: @fond !important;
text-decoration: none !important;
}
.li192pack {
color: @fond !important;
text-decoration: none !important;
}
.li192pack:hover {
color: #de00ff;
text-decoration: none;
transition: color 10s ease-in-out;
}
.gomeza {
display: none; // Sera changé le moment voulu en JS
position: fixed;
bottom: 0px;
right: 30px;
z-index: 100;
}
.gomez-items-wrap {
display: flex;
flex: 70;
width: 100%;
justify-content: space-around;
}
.gomez-item-wrap {
width: 142px;
height: 192px;
display: flex;
align-items: center;
justify-content: center;
}
.gomez {
width: 10px;
height: 10px;
display: block;
transform: translate(-500%, -500%); /* OMG, it's magic */
background: transparent;
}
.gomez.yeah {
box-shadow:
/*
Conjuntos de sombras, da esquerda para direita, de cima para baixo (exceção do chapéu)
*/
/* linha 1 */
10px 0 0 #a3a085,
19px 0 0 #e1ced2,
29px 0 0 #fff,
39px 0 0 #fff,
49px 0 0 #fff,
59px 0 0 #fff,
69px 0 0 #fff,
79px 0 0 #fff,
89px 0 0 #fff,
99px 0 0 #fff,
106px 0 0 #fff,
/* linha 2 */
0 10px 0 #a3a085,
10px 10px 0 #e1ced2,
19px 10px 0 #e1ced2,
29px 10px 0 #fff,
39px 10px 0 #fff,
49px 10px 0 #fff,
59px 10px 0 #fff,
69px 10px 0 #fff,
79px 10px 0 #fff,
89px 10px 0 #fff,
99px 10px 0 #fff,
109px 10px 0 #fff,
116px 10px 0 #fff,
/* linha 3 */
0 20px 0 #a3a085,
10px 20px 0 #e1ced2,
19px 20px 0 #fff,
29px 20px 0 #000, /* olho */
39px 20px 0 #fff,
49px 20px 0 #fff,
59px 20px 0 #fff,
69px 20px 0 #fff,
79px 20px 0 #fff,
89px 20px 0 #fff,
96px 20px 0 #fff,
106px 20px 0 #000, /* olho */
116px 20px 0 #fff,
/* linha 4 */
0 30px 0 #a3a085,
10px 30px 0 #e1ced2,
19px 30px 0 #fff,
29px 30px 0 #fff,
39px 30px 0 #fff,
49px 30px 0 #fff,
59px 30px 0 #000,
69px 30px 0 #000,
79px 30px 0 #000,
87px 30px 0 #000,
97px 30px 0 #fff,
107px 30px 0 #fff,
116px 30px 0 #fff,
/* linha 5 */
0 40px 0 #a3a085,
10px 40px 0 #e1ced2,
19px 40px 0 #fff,
29px 40px 0 #fff,
39px 40px 0 #fff,
49px 40px 0 #fff,
59px 40px 0 #c9326e,
68px 40px 0 #c9326e,
78px 40px 0 #000,
87px 40px 0 #000,
97px 40px 0 #fff,
107px 40px 0 #fff,
116px 40px 0 #fff,
/* linha 6 */
0 50px 0 #a3a085,
10px 50px 0 #e1ced2,
19px 50px 0 #fff,
29px 50px 0 #fff,
39px 50px 0 #fff,
49px 50px 0 #fff,
59px 50px 0 #fff,
68px 50px 0 #c9326e,
78px 50px 0 #000,
87px 50px 0 #fff,
97px 50px 0 #fff,
107px 50px 0 #fff,
116px 50px 0 #fff,
/* linha 7 abaixo da boca */
29px 60px 0 #e1ced2,
20px 60px 0 #a3a085,
29px 60px 0 #e1ced2,
39px 60px 0 #fff,
49px 60px 0 #fff,
59px 60px 0 #fff,
69px 60px 0 #fff,
79px 60px 0 #fff,
87px 60px 0 #fff,
97px 60px 0 #fff,
107px 60px 0 #fff,
/* linha 8 pescoço */
39px 70px 0 #a3a085,
49px 70px 0 #a3a085,
59px 70px 0 #e1ced2,
68px 70px 0 #fff,
/* linha 9 braços */
10px 80px 0 #a3a085,
19px 80px 0 #fff,
29px 80px 0 #fff,
39px 80px 0 #e1ced2,
49px 80px 0 #fff,
59px 80px 0 #fff,
68px 80px 0 #fff,
78px 80px 0 #fff,
88px 80px 0 #a3a085,
97px 80px 0 #a3a085,
/* linha 10 */
29px 90px 0 #fff,
20px 90px 0 #a3a085,
29px 90px 0 #fff,
39px 90px 0 #fff,
49px 90px 0 #fff,
59px 90px 0 #fff,
69px 90px 0 #fff,
78px 90px 0 #fff,
88px 90px 0 #a3a085,
/* linha 11 */
29px 100px 0 #a3a085,
39px 100px 0 #fff,
49px 100px 0 #fff,
59px 100px 0 #fff,
69px 100px 0 #fff,
78px 100px 0 #fff,
/* linha 12 */
29px 110px 0 #a3a085,
39px 110px 0 #e1ced2,
49px 110px 0 #fff,
59px 110px 0 #fff,
69px 110px 0 #fff,
78px 110px 0 #fff,
/* linha 13 */
29px 120px 0 #a3a085,
39px 120px 0 #e1ced2,
49px 120px 0 #fff,
59px 120px 0 #fff,
69px 120px 0 #fff,
78px 120px 0 #fff,
/* linha 14 */
29px 130px 0 #a3a085,
39px 130px 0 #e1ced2,
49px 130px 0 #a3a085,
59px 130px 0 #a3a085,
69px 130px 0 #e1ced2,
78px 130px 0 #a3a085,
/* linha 15 pés */
19px 140px 0 #a3a085,
29px 140px 0 #e1ced2,
69px 140px 0 #a3a085,
/* chapéu linha 1 */
30px -40px 0 #e89a2e,
40px -40px 0 #c0060b,
50px -40px 0 #c0060b,
/* chapéu linha 2 */
20px -30px 0 #e89a2e,
30px -30px 0 #91000f,
40px -30px 0 #c0060b,
50px -30px 0 #c0060b,
/* chapéu linha 3 */
30px -20px 0 #91000f,
40px -20px 0 #c0060b,
50px -20px 0 #c0060b;
}
.gomez.umm {
box-shadow:
/*
Conjuntos de sombras, da esquerda para direita, de cima para baixo (exceção do chapéu)
*/
/* linha 1 */
10px 0 0 #a3a085,
19px 0 0 #e1ced2,
29px 0 0 #fff,
39px 0 0 #fff,
49px 0 0 #fff,
59px 0 0 #fff,
69px 0 0 #fff,
79px 0 0 #fff,
89px 0 0 #fff,
99px 0 0 #fff,
106px 0 0 #fff,
/* linha 2 */
0 10px 0 #a3a085,
10px 10px 0 #e1ced2,
19px 10px 0 #fff,
29px 10px 0 #fff,
39px 10px 0 #fff,
49px 10px 0 #fff,
59px 10px 0 #fff,
69px 10px 0 #fff,
79px 10px 0 #fff,
89px 10px 0 #fff,
99px 10px 0 #fff,
109px 10px 0 #fff,
116px 10px 0 #fff,
/* linha 3 */
0 20px 0 #a3a085,
10px 20px 0 #e1ced2,
19px 20px 0 #fff,
29px 20px 0 #fff,
39px 20px 0 #fff,
49px 20px 0 #fff,
59px 20px 0 #fff,
69px 20px 0 #fff,
79px 20px 0 #fff,
89px 20px 0 #fff,
96px 20px 0 #fff,
106px 20px 0 #fff, /* olho */
116px 20px 0 #fff,
/* linha 4 */
0 30px 0 #a3a085,
10px 30px 0 #e1ced2,
19px 30px 0 #fff,
29px 30px 0 #000, /* olho */
39px 30px 0 #fff,
49px 30px 0 #fff,
59px 30px 0 #fff,
69px 30px 0 #fff,
79px 30px 0 #fff,
87px 30px 0 #fff,
97px 30px 0 #fff,
107px 30px 0 #000, /* olho */
116px 30px 0 #fff,
/* linha 5 */
0 40px 0 #a3a085,
10px 40px 0 #e1ced2,
19px 40px 0 #fff,
29px 40px 0 #fff,
39px 40px 0 #fff,
49px 40px 0 #fff,
59px 40px 0 #fff,
68px 40px 0 #fff,
78px 40px 0 #fff,
87px 40px 0 #fff,
97px 40px 0 #fff,
107px 40px 0 #fff,
116px 40px 0 #fff,
/* linha 6 */
0 50px 0 #a3a085,
10px 50px 0 #e1ced2,
19px 50px 0 #fff,
29px 50px 0 #fff,
39px 50px 0 #fff,
49px 50px 0 #fff,
59px 50px 0 #fff,
68px 50px 0 #fff,
78px 50px 0 #000, /* boca */
87px 50px 0 #fff,
97px 50px 0 #fff,
107px 50px 0 #fff,
116px 50px 0 #fff,
/* linha 7 */
29px 60px 0 #e1ced2,
20px 60px 0 #a3a085,
29px 60px 0 #e1ced2,
39px 60px 0 #fff,
49px 60px 0 #fff,
59px 60px 0 #fff,
69px 60px 0 #fff,
79px 60px 0 #fff,
87px 60px 0 #fff,
97px 60px 0 #fff,
107px 60px 0 #fff,
/* linha 8 pescoço */
39px 70px 0 #a3a085,
49px 70px 0 #a3a085,
59px 70px 0 #e1ced2,
68px 70px 0 #fff,
/* linha 9 */
29px 80px 0 #a3a085,
39px 80px 0 #e1ced2,
49px 80px 0 #fff,
59px 80px 0 #fff,
68px 80px 0 #fff,
78px 80px 0 #fff,
/* linha 10 */
19px 90px 0 #a3a085,
29px 90px 0 #fff,
39px 90px 0 #fff,
49px 90px 0 #fff,
59px 90px 0 #fff,
68px 90px 0 #fff,
78px 90px 0 #fff,
/* linha 11 */
10px 100px 0 #a3a085,
19px 100px 0 #fff,
29px 100px 0 #a3a085,
39px 100px 0 #fff,
49px 100px 0 #fff,
59px 100px 0 #fff,
68px 100px 0 #fff,
78px 100px 0 #fff,
88px 100px 0 #e1ced2,
/* linha 12 */
29px 110px 0 #a3a085,
39px 110px 0 #e1ced2,
49px 110px 0 #fff,
59px 110px 0 #fff,
69px 110px 0 #fff,
78px 110px 0 #fff,
/* linha 13 */
29px 120px 0 #a3a085,
39px 120px 0 #e1ced2,
49px 120px 0 #e1ced2,
59px 120px 0 #e1ced2,
69px 120px 0 #fff,
78px 120px 0 #fff,
/* linha 14 */
29px 130px 0 #a3a085,
39px 130px 0 #e1ced2,
69px 130px 0 #a3a085,
78px 130px 0 #e1ced2,
/* linha 15 */
29px 140px 0 #a3a085,
78px 140px 0 #a3a085,
/* chapéu linha 1 */
30px -30px 0 #e89a2e,
40px -30px 0 #c0060b,
50px -30px 0 #c0060b,
/* chapéu linha 2 */
20px -20px 0 #e89a2e,
30px -20px 0 #91000f,
40px -20px 0 #c0060b,
50px -20px 0 #c0060b,
/* chapéu linha 3 */
30px -10px 0 #91000f,
40px -10px 0 #c0060b,
50px -10px 0 #c0060b;
}