qrcode.chapril.org-libreqr/style.less
Miraty 25ed11aada Compil Less en PHP côté serveur + favicons thémés en plusieurs définitions
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².
2019-02-22 22:23:02 +01:00

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;
}