= $loc['label_size'] ?>
- " alt="Aide">
+ " alt="Aide">
= $loc['help_size'] ?>
@@ -270,27 +259,26 @@ if (badQuery()) {
}
?>
+
+
+
+ = $loc['metaText_qr'] ?>
+
+
+
+
+
-
-
-
- = $loc['metaText_qr'] ?>
-
-
-
-
-
-
diff --git a/style.less b/style.less
index 95524c9..5b23384 100755
--- a/style.less
+++ b/style.less
@@ -61,17 +61,17 @@ p {
}
form {
- display: block;
+ flex-grow: 1;
margin-bottom: 30px;
}
main {
display: flex;
flex-direction: column;
- justify-content: center;
margin-left: auto;
margin-right: auto;
width: 814px;
+ height: 99%;
}
body {
@@ -80,16 +80,11 @@ body {
color: @text;
font-weight: normal;
font-size: 20px;
-
- & h1 {
- color: @text;
- text-decoration: none;
- }
-
+ height: 99%;
}
-label {
- font-size: 20px;
+html {
+ height: 97%;
}
header {
@@ -180,8 +175,6 @@ label[for=txt] {
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);
@@ -195,10 +188,18 @@ label[for=txt] {
}
+#metaTexts {
+ padding-top: 50px;
+}
+
+header, #metaTexts {
+ flex-shrink: 0;
+}
+
footer {
font-size: 14px;
- bottom: 20px;
- left: 20px;
+ padding-top: 20px;
+
}
#info {
@@ -275,9 +276,9 @@ input[type=color] {
border: 2px @border solid;
}
-/* Infobulle */
+/* Help message */
-#helpImg {
+.helpImg {
width: 20px;
height: 20px;
margin-bottom: -3px;
@@ -323,25 +324,8 @@ input[type=color] {
/* 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;
- }
-
#info {
color: @text;
margin-bottom: 20px;
@@ -356,14 +340,6 @@ input[type=color] {
@media (max-width: 850px) {
- #metaTexts {
- flex-direction: column;
- width: 480px;
- justify-content: center;
- margin-left: auto;
- margin-right: auto;
- }
-
main {
width: auto;
}
@@ -382,11 +358,7 @@ input[type=color] {
}
-@media (max-width: 500px) { // Version mobile
-
- #metaTexts {
- width: auto;
- }
+@media (max-width: 500px) { // Mobile version
#colors {
flex-direction: column;
diff --git a/style.min.css b/style.min.css
index 75856e6..949919f 100644
--- a/style.min.css
+++ b/style.min.css
@@ -1 +1 @@
-*{font-family:"Ubuntu", sans-serif;scrollbar-color:white #2a2a2a;scrollbar-width:auto;}a{color:white;text-decoration:underline;}a:hover{text-decoration:none;}p{margin:0px;}#firstWrapper{display:flex;flex-direction:row;}#menusDeroulants{text-align:center;margin-left:20px;}#qrCode{max-width:480px;}.centered{text-align:center;}.bouton{padding:3px 10px 3px 10px;text-decoration:none;}form{display:block;margin-bottom:30px;}main{display:flex;flex-direction:column;justify-content:center;margin-left:auto;margin-right:auto;width:814px;}body{margin:18px;background-color:#2a2a2a;color:white;font-weight:normal;font-size:20px;}body h1{color:white;text-decoration:none;}label{font-size:20px;}header{text-align:center;padding:0px;margin:0px;height:64px;}#logo{width:64px;height:64px;}#titres{margin-left:20px;}h1,h2,h3,h4,h5,h6{margin:0px;font-weight:normal;}h1{font-size:33px;}h2{font-size:22px;}#lienTitres{text-align:left;justify-content:center;text-decoration:none;display:flex;flex-direction:row;}#showOnlyQR{margin-top:30px;}#titre{text-align:center;justify-content:center;}.param{padding:10px;padding-left:0px;margin-left:0px;padding-right:0px;margin-right:0px;}.conteneurInputColor{display:flex;flex-direction:row;justify-content:center;}::selection{color:#2a2a2a;background-color:white;}label[for=txt]{padding-left:22px;}#colors{display:flex;flex-direction:row;justify-content:space-between;text-align:center;}#colors .param{text-align:center;display:flex;justify-content:center;flex-direction:column;width:100%;}.metaText{color:#868686;text-align:left;transition:color 0.12s cubic-bezier(0.42,0.0,1.0,1.0);position:fixed;width:400px;}.metaText a:link{transition:color 0.12s cubic-bezier(0.42,0.0,1.0,1.0);color:#868686;text-decoration:underline;}.metaText:hover,.metaText:hover a:link{color:white;}footer{font-size:14px;bottom:20px;left:20px;}#info{font-size:16px;bottom:20px;right:20px;margin:0px;}#info h3{font-size:20px;font-weight:normal;padding-bottom:10px;}#redondancy,#margin,#txt,#size,input[type=color],input[type=submit],.bouton{border:2px #5f5f5f solid;border-radius:10px;font-size:20px;padding-left:10px;font-weight:normal;color:white;transition:border 0.1s linear;background-color:#31363b;margin-top:8px;}#redondancy:hover,#margin:hover,#txt:hover,#size:hover,input[type=color]:hover,input[type=submit]:hover,.bouton:hover{border:2px #808080 solid;}#redondancy:focus,#margin:focus,#txt:focus,#size:focus,input[type=color]:focus,input[type=submit]:focus,.bouton:focus{border:2px white solid;outline:none;}#redondancy,#size,#margin{background-color:#31363b;width:250px;height:40px;}#txt{background-color:#232629;color:white;padding:10px;margin:10px;width:500px;scrollbar-color:white #232629;scrollbar-width:auto;}input[type=submit]{font-size:28px;padding:10px;padding-left:14px;padding-right:14px;}#txt::placeholder{color:#868686;opacity:1;font-family:"Ubuntu", sans-serif;font-weight:normal;font-size:1em;}input[type=color]{height:60px;width:84px;padding:5px;border:2px #5f5f5f solid;}#helpImg{width:20px;height:20px;margin-bottom:-3px;margin-left:5px;}.boutonAide{height:0px;width:0px;color:#868686;cursor:help;font-size:0.8em;}.conteneurAide .contenuAide{position:absolute;transform:scale(0) rotate(-12deg);color:white;background:#151616;padding:15px;border-radius:10px;box-shadow:0 0 10px rgba(0,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){.conteneurAide .contenuAide{position:fixed;margin:5px;left:0px;top:0px;}}.conteneurAide:hover .contenuAide,.conteneurAide:focus-within .contenuAide{transform:scale(1) rotate(0);opacity:1;}@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;}#info{color:white;margin-bottom:20px;padding-top:30px;font-size:20px;}#info a:link{color:white;}}@media (max-width: 850px){#metaTexts{flex-direction:column;width:480px;justify-content:center;margin-left:auto;margin-right:auto;}main{width:auto;}#firstWrapper{flex-direction:column;}body{margin:10px;}#txt{width:92%;}}@media (max-width: 500px){#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;}}
\ No newline at end of file
+*{font-family:"Ubuntu", sans-serif;scrollbar-color:white #2a2a2a;scrollbar-width:auto;}a{color:white;text-decoration:underline;}a:hover{text-decoration:none;}p{margin:0px;}#firstWrapper{display:flex;flex-direction:row;}#menusDeroulants{text-align:center;margin-left:20px;}#qrCode{max-width:480px;}.centered{text-align:center;}.bouton{padding:3px 10px 3px 10px;text-decoration:none;}form{flex-grow:1;margin-bottom:30px;}main{display:flex;flex-direction:column;margin-left:auto;margin-right:auto;width:814px;height:99%;}body{margin:18px;background-color:#2a2a2a;color:white;font-weight:normal;font-size:20px;height:99%;}html{height:97%;}header{text-align:center;padding:0px;margin:0px;height:64px;}#logo{width:64px;height:64px;}#titres{margin-left:20px;}h1,h2,h3,h4,h5,h6{margin:0px;font-weight:normal;}h1{font-size:33px;}h2{font-size:22px;}#lienTitres{text-align:left;justify-content:center;text-decoration:none;display:flex;flex-direction:row;}#showOnlyQR{margin-top:30px;}#titre{text-align:center;justify-content:center;}.param{padding:10px;padding-left:0px;margin-left:0px;padding-right:0px;margin-right:0px;}.conteneurInputColor{display:flex;flex-direction:row;justify-content:center;}::selection{color:#2a2a2a;background-color:white;}label[for=txt]{padding-left:22px;}#colors{display:flex;flex-direction:row;justify-content:space-between;text-align:center;}#colors .param{text-align:center;display:flex;justify-content:center;flex-direction:column;width:100%;}.metaText{color:#bababa;text-align:left;transition:color 0.12s cubic-bezier(0.42,0.0,1.0,1.0);}.metaText a:link{transition:color 0.12s cubic-bezier(0.42,0.0,1.0,1.0);color:#bababa;text-decoration:underline;}.metaText:hover,.metaText:hover a:link{color:white;}#metaTexts{padding-top:50px;}header,#metaTexts{flex-shrink:0;}footer{font-size:14px;padding-top:20px;}#info{font-size:16px;bottom:20px;right:20px;margin:0px;}#info h3{font-size:20px;font-weight:normal;padding-bottom:10px;}#redondancy,#margin,#txt,#size,input[type=color],input[type=submit],.bouton{border:2px #5f5f5f solid;border-radius:10px;font-size:20px;padding-left:10px;font-weight:normal;color:white;transition:border 0.1s linear;background-color:#31363b;margin-top:8px;}#redondancy:hover,#margin:hover,#txt:hover,#size:hover,input[type=color]:hover,input[type=submit]:hover,.bouton:hover{border:2px #808080 solid;}#redondancy:focus,#margin:focus,#txt:focus,#size:focus,input[type=color]:focus,input[type=submit]:focus,.bouton:focus{border:2px white solid;outline:none;}#redondancy,#size,#margin{background-color:#31363b;width:250px;height:40px;}#txt{background-color:#232629;color:white;padding:10px;margin:10px;width:500px;scrollbar-color:white #232629;scrollbar-width:auto;}input[type=submit]{font-size:28px;padding:10px;padding-left:14px;padding-right:14px;}#txt::placeholder{color:#bababa;opacity:1;font-family:"Ubuntu", sans-serif;font-weight:normal;font-size:1em;}input[type=color]{height:60px;width:84px;padding:5px;border:2px #5f5f5f solid;}.helpImg{width:20px;height:20px;margin-bottom:-3px;margin-left:5px;}.boutonAide{height:0px;width:0px;color:#bababa;cursor:help;font-size:0.8em;}.conteneurAide .contenuAide{position:absolute;transform:scale(0) rotate(-12deg);color:white;background:#151616;padding:15px;border-radius:10px;box-shadow:0 0 10px rgba(0,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){.conteneurAide .contenuAide{position:fixed;margin:5px;left:0px;top:0px;}}.conteneurAide:hover .contenuAide,.conteneurAide:focus-within .contenuAide{transform:scale(1) rotate(0);opacity:1;}@media (max-width: 1050px){#info{color:white;margin-bottom:20px;padding-top:30px;font-size:20px;}#info a:link{color:white;}}@media (max-width: 850px){main{width:auto;}#firstWrapper{flex-direction:column;}body{margin:10px;}#txt{width:92%;}}@media (max-width: 500px){#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;}}
\ No newline at end of file