backend en anglais + vérification améliorée des params
This commit is contained in:
Miraty
parent
ced67dcceb
commit
47da216738
88 changed files with 1840 additions and 1972 deletions
411
style.less
411
style.less
|
|
@ -1,56 +1,84 @@
|
|||
/*
|
||||
|
||||
Ce fichier fait partie de LibreQR.
|
||||
|
||||
LibreQR est un logiciel libre ; vous pouvez le redistribuer ou le modifier
|
||||
suivant les termes de la GNU Affero General Public License
|
||||
telle que publiée par la Free Software Foundation ; soit la version 3
|
||||
de la licence, soit (à votre gré) toute version ultérieure.
|
||||
|
||||
LibreQR est distribué dans l'espoir qu'il sera utile,
|
||||
mais SANS AUCUNE GARANTIE ; sans même la garantie tacite de
|
||||
QUALITÉ MARCHANDE ou d'ADÉQUATION à UN BUT PARTICULIER.
|
||||
Consultez la GNU Affero General Public License pour plus de détails.
|
||||
|
||||
Vous devez avoir reçu une copie de la GNU Affero General Public License
|
||||
en même temps que LibreQR ; si ce n'est pas le cas,
|
||||
consultez <https://www.gnu.org/licenses/>.
|
||||
|
||||
*/
|
||||
|
||||
* {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
scrollbar-color: @text @bg;
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
a {
|
||||
color: @text;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
#firstWrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#menusDeroulants {
|
||||
text-align: center;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
#codeQR {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
#lienCodeQR {
|
||||
text-align: center;
|
||||
#qrCode {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.centrer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.topRight {
|
||||
position: fixed;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.bouton {
|
||||
padding: 3px 10px 3px 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: inline;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
display: block;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 500px;
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: @fond;
|
||||
color: @texte;
|
||||
width: 814px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 18px;
|
||||
background-color: @bg;
|
||||
color: @text;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
font-size: 20px;
|
||||
|
||||
& h1 {
|
||||
color: @texte;
|
||||
color: @text;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -58,36 +86,48 @@ html, body {
|
|||
|
||||
label {
|
||||
font-size: 20px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.topRight {
|
||||
color: @texteLienCodeSource;
|
||||
font-size: 12px;
|
||||
margin-bottom: -20px;
|
||||
text-align: right;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: lighten(@texteLienCodeSource, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
height: 48px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
header > a {
|
||||
#logo {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
#titres {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding: auto;
|
||||
font-size: 33px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#lienTitres {
|
||||
text-align: left;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
h1, #logo {
|
||||
margin: auto;
|
||||
font-size: 35px;
|
||||
#showOnlyQR {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.param {
|
||||
|
|
@ -98,181 +138,272 @@ h1, #logo {
|
|||
margin-right: 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) { // Version mobile
|
||||
|
||||
html {
|
||||
margin: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#texte {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.conteneurInputColor {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: @fond;
|
||||
background-color: @texte;
|
||||
color: @bg;
|
||||
background-color: @text;
|
||||
}
|
||||
|
||||
:link {
|
||||
text-decoration: none;
|
||||
label[for=txt] {
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
#couleurs {
|
||||
#colors {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
|
||||
& .param {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
color: grey;
|
||||
position: absolute;
|
||||
.metaText {
|
||||
color: @secondaryText;
|
||||
text-align: left;
|
||||
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
|
||||
position: fixed;
|
||||
width: 400px;
|
||||
|
||||
& a:link {
|
||||
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
|
||||
color: @secondaryText;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:hover, &:hover a:link {
|
||||
color: @text;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#info {
|
||||
font-size: 16px;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 300px;
|
||||
margin: 0px;
|
||||
|
||||
& a {
|
||||
color: grey;
|
||||
& h3 {
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
&:hover, &:hover a {
|
||||
color: @texte;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Inputs */
|
||||
|
||||
#redondance, #marge, #texte, #taille, input[type=color], input[type=submit], .bouton {
|
||||
border: 2px @bordure solid;
|
||||
#redondancy, #margin, #txt, #size, input[type=color], input[type=submit], .bouton {
|
||||
border: 2px @border solid;
|
||||
border-radius: 10px;
|
||||
font-size: 20px;
|
||||
padding-left: 10px;
|
||||
font-weight: normal;
|
||||
color: @texteForm;
|
||||
color: @text;
|
||||
transition: border 0.1s linear;
|
||||
background-color: @fondChamp;
|
||||
background-color: @bgField;
|
||||
margin-top: 8px;
|
||||
|
||||
&:hover {
|
||||
border: 2px @bordureHover solid;
|
||||
border: 2px @borderHover solid;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 2px @bordureFocus solid;
|
||||
border: 2px @borderFocus solid;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
#redondance, #taille, #marge {
|
||||
background-color: @fondChamp;
|
||||
#redondancy, #size, #margin {
|
||||
background-color: @bgField;
|
||||
width: 250px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#texte {
|
||||
background-color: @fondChampTexte;
|
||||
color: @texteForm;
|
||||
padding-top: 6px;
|
||||
#txt {
|
||||
background-color: @bgTextField;
|
||||
color: @text;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
width: 500px;
|
||||
scrollbar-color: @text @bgTextField;
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
#redondance:hover, #marge:hover, #texte:hover, #taille:hover, input[type=submit]:hover, .bouton:hover {
|
||||
|
||||
input[type=submit] {
|
||||
font-size: 28px;
|
||||
padding: 10px;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
#texte:focus, input[type=submit]:focus, .bouton:focus {
|
||||
|
||||
}
|
||||
|
||||
#texte::placeholder {
|
||||
color: lighten(@fondChampTexte, 40%);
|
||||
#txt::placeholder {
|
||||
color: @secondaryText;
|
||||
opacity: 1;
|
||||
font-family: "Ubuntu";
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
input[type=color] {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 60px;
|
||||
width: 84px;
|
||||
padding: 5px;
|
||||
background-color: @fondChamp;
|
||||
border: 2px @bordure solid;
|
||||
}
|
||||
|
||||
input[type=color]:hover {
|
||||
border: 2px @bordureHover solid;
|
||||
}
|
||||
|
||||
input[type=color]:focus {
|
||||
border: 2px @bordureFocus solid;
|
||||
border: 2px @border solid;
|
||||
}
|
||||
|
||||
/* Infobulle */
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-bottom: -3px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.boutonAide {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
color: @texte;
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
color: @text;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.contenuAide {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.conteneurAide {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.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,1);
|
||||
color: @text;
|
||||
background: @bgHelp;
|
||||
padding: 15px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px rgba(0,0,0,.5);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.5);
|
||||
margin-top: 23px;
|
||||
margin-left: -35px;
|
||||
transition: all .25s;
|
||||
opacity: 0;
|
||||
max-width: 500px;
|
||||
font-size: 20px;
|
||||
text-align: left;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.conteneurAide:hover .contenuAide, .conteneurAide:focus .contenuAide {
|
||||
.conteneurAide:hover .contenuAide, .conteneurAide:focus-within .contenuAide {
|
||||
transform: scale(1) rotate(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.conteneurAide, .conteneurAide:hover {
|
||||
background-color: @fond;
|
||||
text-decoration: none;
|
||||
/* Media queries */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.metaText {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
|
||||
#metaTexts {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.metaText {
|
||||
width: 100%;
|
||||
position: static;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#info {
|
||||
color: @text;
|
||||
margin-bottom: 20px;
|
||||
padding-top: 30px;
|
||||
|
||||
& a:link {
|
||||
color: @text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
|
||||
#metaTexts {
|
||||
flex-direction: column;
|
||||
width: 480px;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#firstWrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#txt {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 500px) { // Version mobile
|
||||
|
||||
#metaTexts {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#colors {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
#txt {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
#qrCode {
|
||||
max-width: 94%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 415px) {
|
||||
|
||||
h1 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue