819 lines
8.8 KiB
Plaintext
Executable File
819 lines
8.8 KiB
Plaintext
Executable File
@import "bibli/fontello/css/fontello.css"; // Icones
|
|
@import "bibli/normalize.css"; // Réinitialisation
|
|
|
|
@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;
|
|
}
|
|
|
|
input[type=text],[type=password] {
|
|
background-color: @fond-footer;
|
|
border: 2px @texte-principal solid;
|
|
border-radius: 10px;
|
|
height: 50px;
|
|
|
|
&:hover {
|
|
background-color: @fond;
|
|
transition: all 0.2s;
|
|
border: 2px fadein(@couleur-principale, 70%) solid;
|
|
|
|
}
|
|
|
|
&:focus {
|
|
background-color: @fond;
|
|
border: 2px fadein(@couleur-principale, 30%) solid;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
// BOUTONS
|
|
|
|
.button {
|
|
border: 2px solid grey;
|
|
padding: 10px;
|
|
margin: 5px;
|
|
display: inline-block;
|
|
border-radius: 10px;
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: red;
|
|
color: darkred;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.conteneurLigne {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.elementLigne {
|
|
width: (100% / 5);
|
|
display: inline-block;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html {
|
|
font-size: 20px;
|
|
}
|
|
|
|
@media all and (max-width: 700px) {
|
|
|
|
html {
|
|
font-size: 13px;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
#editeur {
|
|
width: 500px;
|
|
height: 200px;
|
|
border: 1px solid white;
|
|
padding: 5px;
|
|
overflow: auto;
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
color: @couleur-lien;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
color: @couleur-principale;
|
|
transition: all 0.5s ease-out;
|
|
}
|
|
|
|
}
|
|
|
|
a:visited {
|
|
text-decoration: underline;
|
|
color: @couleur-lien;
|
|
transition: all 0.5s ease-out;
|
|
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
color: @couleur-principale;
|
|
transition: all 0.5s ease-out;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
nav a:link {
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
.button:link {
|
|
text-decoration: none;
|
|
color: @couleur-lien;
|
|
}
|
|
|
|
|
|
|
|
.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");
|
|
|
|
}
|
|
|
|
#bouttonmenu {
|
|
|
|
height: 50px;
|
|
width: 50px;
|
|
color: white;
|
|
|
|
background-color: @fond;
|
|
|
|
border: white 2px solid;
|
|
|
|
}
|
|
|
|
.descriptionCategorie {
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.bouttonModifier {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.vert {
|
|
color: limegreen;
|
|
}
|
|
|
|
.rouge {
|
|
color: red;
|
|
}
|
|
|
|
.optionhaute {
|
|
border-top: 0px white solid;
|
|
|
|
}
|
|
.boite {
|
|
border: 3px white solid;
|
|
border-radius: 10px;
|
|
margin: 10px;
|
|
padding: 10px;
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
.logo {
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
.inline {
|
|
display: inline;
|
|
|
|
}
|
|
|
|
.titreArticle {
|
|
font-size: 2em;
|
|
|
|
}
|
|
|
|
.articlePseudo {
|
|
border: 2px white solid;
|
|
border-radius: 10px;
|
|
margin: 30px 20px 30px 0px;
|
|
padding: 20px;
|
|
|
|
}
|
|
|
|
|
|
.formArticle {
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.formCommentaire {
|
|
width: 30%;
|
|
|
|
}
|
|
|
|
.petitChamp {
|
|
width: 400px;
|
|
font-size: 1em;
|
|
|
|
}
|
|
|
|
.champMoyen {
|
|
width: 800px;
|
|
|
|
}
|
|
|
|
.champLarge {
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.number {
|
|
margin: 10px;
|
|
display: inline-flex;
|
|
width: 180px;
|
|
|
|
}
|
|
|
|
.img404 {
|
|
|
|
text-align: center;
|
|
padding-top: 10px;
|
|
padding-bottom: 30px;
|
|
|
|
}
|
|
|
|
.img {
|
|
display: block;
|
|
margin: 20px;
|
|
border: 3px white solid;
|
|
border-radius: 5px;
|
|
max-width: 45em;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.module {
|
|
border-left: 4px white solid;
|
|
padding-left: 20px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
strong {
|
|
font-weight: 400;
|
|
|
|
}
|
|
|
|
body, code {
|
|
font-family: ubuntu, "ubuntu-dl";
|
|
padding: 0px;
|
|
margin: 0px;
|
|
background-color: @fond;
|
|
color: @texte-principal;
|
|
font-size: 25px;
|
|
line-height: 35px;
|
|
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: "ubuntu-fin-dl";
|
|
}
|
|
|
|
|
|
.milieu {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
.main {
|
|
display: flex;
|
|
margin: 0px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.texte {
|
|
margin-top: 20px;
|
|
margin-left: 30px;
|
|
margin-bottom: 50px;
|
|
|
|
margin-right: 50px;
|
|
|
|
}
|
|
|
|
.hautoto {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
.centre {
|
|
text-align: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.droite {
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
.pres {
|
|
padding-bottom: 20px;
|
|
|
|
}
|
|
|
|
.pgauche {
|
|
text-align: left;
|
|
padding-left: 20px;
|
|
border-left: 5px white solid;
|
|
|
|
|
|
}
|
|
|
|
.pdroite {
|
|
text-align: right;
|
|
padding-right: 20px;
|
|
margin-right: -30px;
|
|
border-right: 5px white solid;
|
|
|
|
}
|
|
|
|
.mdpincorrect {
|
|
color: red;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.avertissement {
|
|
border: 2px yellow solid;
|
|
border-radius: 12px;
|
|
padding: 10px;
|
|
margin: 5px;
|
|
background-color: lemonchiffon;
|
|
|
|
}
|
|
|
|
.descriptionNavigateur {
|
|
margin: 12px;
|
|
padding: 12px;
|
|
overflow: auto;
|
|
border: 1px white solid;
|
|
|
|
}
|
|
|
|
.monAvis {
|
|
margin: 12px;
|
|
padding: 12px;
|
|
overflow: auto;
|
|
border-left: 3px white solid;
|
|
|
|
}
|
|
|
|
.gras-css {
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.souligne {
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
.nomNavigateur {
|
|
font-size: 3em;
|
|
|
|
}
|
|
|
|
// FOOTER
|
|
|
|
.textefooter {
|
|
margin: 10px;
|
|
line-height: 1.5em;
|
|
width: 60%;
|
|
|
|
}
|
|
|
|
.logofooter {
|
|
padding-left: 6%;
|
|
margin-top: 20px;
|
|
|
|
}
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
background-color: @fond-footer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.logogris {
|
|
background-color: @fond-footer;
|
|
background-image: url(img/antpetitgris.png);
|
|
width: 264px;
|
|
height: 80px;
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
.logogris: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%;
|
|
|
|
}
|
|
}
|
|
|
|
/* ----------------------- MENU ------------------------ */
|
|
|
|
.menugauche {
|
|
margin: 0px;
|
|
overflow: auto;
|
|
margin-top: 20px;
|
|
width: 16em;
|
|
border-bottom: 3px white solid;
|
|
border-right: 3px white solid;
|
|
border-top: 3px white solid;
|
|
border-radius: 0px 12px 12px 0px;
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
.option {
|
|
padding: 30px;
|
|
display: block;
|
|
border-top: 2px white solid;
|
|
// transition: all 0.2s ease-in;
|
|
|
|
}
|
|
|
|
.option:active {
|
|
box-shadow: 2px 2px 3px white inset;
|
|
|
|
}
|
|
|
|
.option:hover {
|
|
background-color: @fond-option-hover;
|
|
transition: all 0.2s ease-in-out;
|
|
color: @couleur-lien !important;
|
|
|
|
}
|
|
|
|
.optionhaute {
|
|
border-top: 0px white solid;
|
|
|
|
}
|
|
|
|
.premieroptiondossier {
|
|
border-radius: 12px 0px 0px 0px;
|
|
|
|
}
|
|
|
|
.optiondossier {
|
|
margin-left: 20px;
|
|
border-left: 2px white solid;
|
|
|
|
}
|
|
|
|
.petiteoption {
|
|
padding: 24px;
|
|
|
|
}
|
|
|
|
.nomdossier {
|
|
display: block;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
border-top: 2px white solid;
|
|
|
|
}
|
|
|
|
|
|
/* ----------------------- ESPACE COMMENTAIRE ------------------------ */
|
|
|
|
|
|
.commentairePseudo {
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
.pseudo {
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.commentaire {
|
|
margin: 10px;
|
|
padding: 10px;
|
|
border-left: 4px white solid;
|
|
|
|
}
|
|
|
|
|
|
|
|
// HEADERS
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-style: ubuntu, ubuntu-dl;
|
|
|
|
}
|
|
|
|
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%;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Définition de la police Ubuntu */
|
|
|
|
@font-face {
|
|
font-family: "ubuntu-dl";
|
|
src: url("bibli/ubuntu/Ubuntu-R.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "ubuntu-fin-dl";
|
|
src: url("bibli/ubuntu/Ubuntu-L.ttf");
|
|
}
|
|
|
|
/* ----------------------- TAILLES DE TEXTE ------------------------ */
|
|
|
|
|
|
.t03 {
|
|
font-size: 0.3em;
|
|
}
|
|
|
|
.t04 {
|
|
font-size: 0.4em;
|
|
}
|
|
|
|
.t05 {
|
|
font-size: 0.5em;
|
|
}
|
|
|
|
.t06 {
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
.t07 {
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
.t08 {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.t09 {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.t10 {
|
|
font-size: 1.0em;
|
|
}
|
|
|
|
.t11 {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.t12 {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.t13 {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.t14 {
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.t15 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.t16 {
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
.t17 {
|
|
font-size: 1.7em;
|
|
}
|
|
|
|
.t18 {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.t19 {
|
|
font-size: 1.9em;
|
|
}
|
|
|
|
.t20 {
|
|
font-size: 2.0em;
|
|
}
|
|
|
|
.t21 {
|
|
font-size: 2.1em;
|
|
}
|
|
|
|
.t22 {
|
|
font-size: 2.2em;
|
|
}
|
|
|
|
.t23 {
|
|
font-size: 2.3em;
|
|
}
|
|
|
|
.t24 {
|
|
font-size: 2.4em;
|
|
}
|
|
|
|
.t25 {
|
|
font-size: 2.5em;
|
|
}
|
|
|
|
.t26 {
|
|
font-size: 2.6em;
|
|
}
|
|
|
|
.t27 {
|
|
font-size: 2.7em;
|
|
}
|
|
|
|
.t28 {
|
|
font-size: 2.8em;
|
|
}
|
|
|
|
.t29 {
|
|
font-size: 2.9em;
|
|
}
|
|
|
|
.t30 {
|
|
font-size: 3.0em;
|
|
}
|
|
|
|
.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;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
.pgauche > h1 {
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
.pdroite > h1 {
|
|
|
|
text-align: right;
|
|
|
|
}
|