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².
189 lines
2.8 KiB
Plaintext
Executable File
189 lines
2.8 KiB
Plaintext
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;
|
|
}
|