25ed11aada
Le Less n'est plus compilé par le naigateur en JS, le serveur s'en occupe en PHP. Le JS n'est donc plus nécessaire au fonctionnement du générateur. Les favions sont également thémés, et dans les dimensions suivantes : 16², 32², 48², 64², 96², 128², 192², 256², 384² et 512².
188 lines
2.8 KiB
Text
Executable file
188 lines
2.8 KiB
Text
Executable file
|
|
@font-face {
|
|
font-family: "ubuntu-dl";
|
|
src: url('ubuntu-dl.ttf');
|
|
}
|
|
|
|
#redondance, #marge, #texte, #taille {
|
|
appearance: none;
|
|
border: 2px @bordure solid;
|
|
border-radius: 7px;
|
|
font-size: 20px;
|
|
padding-left: 10px;
|
|
font-weight: normal;
|
|
color: @texteForm;
|
|
margin-top: 8px;
|
|
transition: border 0.2s linear;
|
|
}
|
|
|
|
#redondance, #taille, #marge {
|
|
background-color: @fondChamp;
|
|
width: 250px;
|
|
height: 40px;
|
|
}
|
|
|
|
#texte {
|
|
background-color: @fondChampTexte;
|
|
color: @texteForm;
|
|
padding-top: 6px;
|
|
width: 500px;
|
|
}
|
|
|
|
#menusDeroulants {
|
|
text-align: center;
|
|
}
|
|
|
|
#codeQR {
|
|
max-width: 500px;
|
|
}
|
|
|
|
#lienCodeQR {
|
|
text-align: center;
|
|
}
|
|
|
|
.centrer {
|
|
text-align: center;
|
|
}
|
|
|
|
footer {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
}
|
|
|
|
input[type=submit], .bouton {
|
|
background-color: @fondChamp;
|
|
border: 2px @bordure solid;
|
|
color: @texteForm;
|
|
padding: 3px 10px 3px 10px;
|
|
border-radius: 3px;
|
|
font-size: 1.2em;
|
|
text-decoration: none;
|
|
display: inline;
|
|
transition: border 0.2s linear;
|
|
}
|
|
|
|
#redondance:hover, #marge:hover, #texte:hover, #taille:hover, input[type=submit]:hover, .bouton:hover {
|
|
border: 2px @bordureHover solid;
|
|
}
|
|
|
|
#texte:focus, input[type=submit]:focus, .bouton:focus {
|
|
border: 2px @bordureFocus solid;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
display: inline;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
html {
|
|
width: 500px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
background-color: @fond;
|
|
color: @texte;
|
|
font-family: "ubuntu", "ubuntu-dl";
|
|
font-weight: normal;
|
|
font-size: 1em;
|
|
|
|
& a {
|
|
color: @texte;
|
|
text-decoration: none;
|
|
}
|
|
|
|
}
|
|
|
|
label {
|
|
font-size: 20px;
|
|
margin-bottom: 100px;
|
|
}
|
|
|
|
|
|
.lienCodeSource {
|
|
color: @texteLienCodeSource;
|
|
font-size: 12px;
|
|
margin-bottom: -20px;
|
|
text-align: right;
|
|
}
|
|
|
|
h1 {
|
|
text-align: left;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
font-size: 35px;
|
|
}
|
|
|
|
|
|
.param {
|
|
padding: 10px;
|
|
padding-left: 0px;
|
|
margin-left: 0px;
|
|
padding-right: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
@media (max-width: 640px) { // Version mobile
|
|
|
|
html {
|
|
margin: 10px;
|
|
width: 400px;
|
|
}
|
|
|
|
#texte {
|
|
width: 400px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 25px;
|
|
}
|
|
|
|
}
|
|
|
|
#logo {
|
|
width: 60px;
|
|
display: @afficherLogoParinux;
|
|
}
|
|
|
|
::placeholder {
|
|
color: @texte;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Infobulle */
|
|
|
|
.conteneurAide {
|
|
color: #ccc;
|
|
text-shadow: 0 -1px 0 black;
|
|
}
|
|
|
|
.conteneurAide:hover, .conteneurAide:focus {
|
|
background: rgba(0,0,0,.4);
|
|
}
|
|
|
|
.conteneurAide .contenuAide {
|
|
position: absolute;
|
|
transform: scale(0) rotate(-12deg);
|
|
color: #FFFFFF;
|
|
background: rgba(0,0,0,.9);
|
|
padding: 15px;
|
|
border-radius: 3px;
|
|
box-shadow: 0 0 2px rgba(0,0,0,.5);
|
|
margin-top: 23px;
|
|
margin-left: -35px;
|
|
transition: all .25s;
|
|
opacity: 0;
|
|
}
|
|
|
|
.conteneurAide:hover .contenuAide, .conteneurAide:focus .contenuAide {
|
|
transform: scale(1) rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.conteneurAide, .conteneurAide:hover {
|
|
background-color: @fond;
|
|
text-decoration: none;
|
|
}
|