From 2ed60ba3ed5925811ed0553a37fb6f2c107d889b Mon Sep 17 00:00:00 2001 From: Miraty Date: Mon, 12 Oct 2020 18:55:36 +0200 Subject: [PATCH] Meta texts at the bottom of the page --- index.php | 70 +++++++++++++++++++++------------------------------ style.less | 64 +++++++++++++--------------------------------- style.min.css | 2 +- 3 files changed, 48 insertions(+), 88 deletions(-) diff --git a/index.php b/index.php index 3835de6..c93c8af 100755 --- a/index.php +++ b/index.php @@ -5,29 +5,19 @@ | | | | '_ \| '__/ _ | | | | |_) | | |___| | |_) | | | __| |_| | _ < |_____|_|_.__/|_| \___|\__\_|_| \_\ +A PHP Web interface for generating QR codes -LibreQR version 1.2.0 -Créé par Miraty et diffusé sous AGPLv3+ -Code source : https://code.antopie.org/miraty/libreqr +Source code : https://code.antopie.org/miraty/libreqr -Ce fichier fait partie de LibreQR. +This file is part of 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 is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. - 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. + LibreQR is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. - 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 . + You should have received a copy of the GNU Affero General Public License along with this program. If not, see . --> - - @@ -149,7 +138,7 @@ if (badQuery()) {
- " alt="Aide"> + " alt="Aide"> @@ -169,7 +158,7 @@ if (badQuery()) {
- " alt="Aide"> + " alt="Aide">
@@ -184,7 +173,7 @@ if (badQuery()) {
- " alt="Aide"> + " alt="Aide">
@@ -203,7 +192,7 @@ if (badQuery()) {
- " alt="Aide"> + " alt="Aide">
@@ -270,27 +259,26 @@ if (badQuery()) { } ?> +
+ +
+ +
+ +
+

+ +

+ +
+

+ +

+ +
+ +
-
- -
- -
- - - -
- 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