Add config.yaml.php and translate some strings of code in english

config.inc.php

@@ -5,9 +5,9 @@
 
 // EN: Time in seconds after which the QR code will be deleted when a page loads.
 // Default: 60 * 60 * 24 * 7 (one week)
-// FR : Temps en secondes après lequel le code QR sera supprimé lors du chargement d'un page.
+// FR : Temps en secondes après lequel le code QR sera supprimé lors du chargement d'une page.
 // Par défaut : 60 * 60 * 24 * 7 (une semaine)
-deleteOldQR(60 * 60 * 24 * 7);
+$timeBeforeDeletion = 60 * 60 * 24 * 7;
 
 // EN: Theme's name (must be in the themes directory)
 // FR : Nom du thème (doit être dans le dossier themes)
@@ -15,7 +15,7 @@ $theme = "dark";
 
 // EN: Language used if those requested by the user are not available
 // FR : Langue utilisée si celles demandées par l'utilisateurice ne sont pas disponibles
-$locale = "en"; // en || fr
+$locale = "en";
 
 // EN: Should the locales requested by the user be ignored?
 // FR : Faut-il ignorer les langues demandées par l'utilisateurice ?
@@ -25,4 +25,7 @@ $forceLocale = false;
 // FR : Longueur du nom du fichier du code QR
 $fileNameLenght = 32;
 
-//$customText = "This LibreQR instance is hosted by <a href='https://foo.bar'>foo</a>.";
+// EN: Will be printed at the bottom of the interface
+// FR : Sera affiché en bas de l'interface
+$customTextEnabled = false;
+$customText = "This LibreQR instance is hosted by <a href='https://foo.bar'>foo</a>.";

config.yaml.php

@@ -0,0 +1,11 @@
+<?php
+require "inc.php";
+// EN: This file is used to inform users of the settings of your LibreQR instance. If you want to edit these settings, edit config.inc.php.
+// FR : Ce fichier est utilisé pour informer les utilisateurices des paramètres de votre instance LibreQR. Si vous voulez modifier ces paramètres, modifiez config.inc.php.
+?>
+libreqrVersion: "<?= $libreqrVersion ?>"
+timeBeforeDeletion: <?= $timeBeforeDeletion . "\n" ?>
+theme: "<?= $theme ?>"
+locale: "<?= $locale ?>"
+forceLocale: "<?= $forceLocale ? 'true' : 'false' ?>"
+fileNameLenght: <?= $fileNameLenght . "\n" ?>

help.svg.php

@@ -3,7 +3,7 @@
   <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
     <g transform="translate(-400.000000, -247.000000)">
       <g id="69" transform="translate(400.000000, 247.000000)">
-        <circle id="Oval-7" stroke="<?= $_GET['clr'] ?>" stroke-width="2" cx="12" cy="12" r="10"></circle>
+        <circle id="Oval-7" stroke="<?= htmlspecialchars($_GET['clr']) ?>" stroke-width="2" cx="12" cy="12" r="10"></circle>
         <path d="M12.016,14.544 C12.384,14.544 12.64,14.256 12.704,13.904 L12.768,13.168 C14.544,12.864 16,11.952 16,9.936 L16,9.904 C16,7.904 14.48,6.656 12.24,6.656 C10.768,6.656 9.696,7.184 8.848,7.984 C8.624,8.176 8.528,8.432 8.528,8.672 C8.528,9.152 8.928,9.552 9.424,9.552 C9.648,9.552 9.856,9.456 10.016,9.328 C10.656,8.752 11.344,8.448 12.192,8.448 C13.344,8.448 14.032,9.072 14.032,9.968 L14.032,10 C14.032,11.008 13.2,11.584 11.696,11.728 C11.264,11.776 11.008,12.096 11.072,12.528 L11.232,13.904 C11.28,14.272 11.552,14.544 11.92,14.544 L12.016,14.544 Z M10.784,16.816 L10.784,16.976 C10.784,17.6 11.264,18.08 11.92,18.08 C12.576,18.08 13.056,17.6 13.056,16.976 L13.056,16.816 C13.056,16.192 12.576,15.712 11.92,15.712 C11.264,15.712 10.784,16.192 10.784,16.816 Z" id="?" fill="<?= $_GET['clr'] ?>"></path>
       </g>
     </g>

inc.php

@@ -2,7 +2,9 @@
 
 require "config.inc.php";
 
-// Defines the locale used
+$libreqrVersion = "1.3.0-dev";
+
+// Defines the locale to be used
 if ($forceLocale == false) {
   $clientLocales = $_SERVER['HTTP_ACCEPT_LANGUAGE'];
   $clientLocales = preg_replace("#[A-Z0-9]|q=|;|-|\.#", "", $clientLocales);
@@ -40,12 +42,10 @@ function generateRandomString($length) {
 }
 
 // Deletes images in temp/ older than the specified time in seconds
-function deleteOldQR($deleteAfter) {
-  $files = array_diff(scandir("temp"), array('..', '.', '.gitkeep'));
-  foreach($files as $file) {
-    // If this actual time (in Posix time) less last modification image date is greater than time asked
-    if ((time() - filemtime("temp/" . $file)) > $deleteAfter) {
-      unlink("temp/" . $file); // Deletes this image
-    }
+$files = array_diff(scandir("temp"), array('..', '.', '.gitkeep'));
+foreach($files as $file) {
+  // If the current time (in Posix time) minus the date of last modification of the file is higher than specified time
+  if ((time() - filemtime("temp/" . $file)) > $timeBeforeDeletion) {
+    unlink("temp/" . $file); // Deletes this image
   }
 }

index.php

@@ -122,9 +122,9 @@ if (badQuery()) {
     <main>
 
       <header>
-        <a id="lienTitres" href="./">
-          <img id="logo" src="themes/<?php echo $theme; ?>/icons/128.png">
-          <div id="titres">
+        <a id="linkTitles" href="./">
+          <img alt="" id="logo" src="themes/<?php echo $theme; ?>/icons/128.png">
+          <div id="titles">
             <h1>LibreQR</h1>
             <h2><?= $loc['subtitle'] ?></h2>
           </div>
@@ -137,9 +137,9 @@ if (badQuery()) {
 
           <div class="param">
             <label for="txt"><?= $loc['label_content'] ?></label>
-            <span class="conteneurAide">
-              <span class="boutonAide" tabindex="0"><img class="helpImg" src="help.svg.php?clr=<?= urlencode($variablesTheme["text"]) ?>" alt="Aide"></span>
-              <span class="contenuAide">
+            <span class="helpContainer">
+              <span class="helpButton" tabindex="0"><img class="helpImg" src="help.svg.php?clr=<?= urlencode($variablesTheme["text"]) ?>" alt="<?= $loc['alt_help'] ?>"></span>
+              <span class="helpContent">
                 <?= $loc['help_content'] ?>
               </span>
             </span>
@@ -157,9 +157,9 @@ if (badQuery()) {
 
             <div class="param">
               <label for="redondancy"><?= $loc['label_redondancy'] ?></label>
-              <span class="conteneurAide">
-                <span class="boutonAide" tabindex="0"><img class="helpImg" src="help.svg.php?clr=<?= urlencode($variablesTheme["text"]) ?>" alt="Aide"></span>
-                <span class="contenuAide"><?= $loc['help_redondancy'] ?></span>
+              <span class="helpContainer">
+                <span class="helpButton" tabindex="0"><img class="helpImg" src="help.svg.php?clr=<?= urlencode($variablesTheme["text"]) ?>" alt="<?= $loc['alt_help'] ?>"></span>
+                <span class="helpContent"><?= $loc['help_redondancy'] ?></span>
               </span>
               <br>
               <select id="redondancy" name="redondancy">
@@ -172,9 +172,9 @@ if (badQuery()) {
 
             <div class="param">
               <label for="margin"><?= $loc['label_margin'] ?></label>
-              <span class="conteneurAide">
-                <span class="boutonAide" tabindex="0"><img class="helpImg" src="help.svg.php?clr=<?= urlencode($variablesTheme["text"]) ?>" alt="Aide"></span>
-                <span class="contenuAide"><?= $loc['help_margin'] ?></span>
+              <span class="helpContainer">
+                <span class="helpButton" tabindex="0"><img class="helpImg" src="help.svg.php?clr=<?= urlencode($variablesTheme["text"]) ?>" alt="<?= $loc['alt_help'] ?>"></span>
+                <span class="helpContent"><?= $loc['help_margin'] ?></span>
               </span>
               <br>
               <select id="margin" name="margin">
@@ -191,9 +191,9 @@ if (badQuery()) {
 
             <div class="param">
               <label for="size"><?= $loc['label_size'] ?></label>
-              <span class="conteneurAide">
-                <span class="boutonAide" tabindex="0"><img class="helpImg" src="help.svg.php?clr=<?= urlencode($variablesTheme["text"]) ?>" alt="Aide"></span>
-                <span class="contenuAide"><?= $loc['help_size'] ?></span>
+              <span class="helpContainer">
+                <span class="helpButton" tabindex="0"><img class="helpImg" src="help.svg.php?clr=<?= urlencode($variablesTheme["text"]) ?>" alt="<?= $loc['alt_help'] ?>"></span>
+                <span class="helpContent"><?= $loc['help_size'] ?></span>
               </span>
               <br>
               <select id="size" name="size">
@@ -218,21 +218,21 @@ if (badQuery()) {
 
           <div class="param">
             <label for="bgColor"><?= $loc['label_bgColor'] ?></label>
-            <div class="conteneurInputColor">
+            <div class="inputColorContainer">
                         <input type="color" name="bgColor" id="bgColor" value="<?php if (!empty($_GET['bgColor'])) {echo htmlspecialchars($_GET['bgColor']);} else {echo "#FFFFFF";} ?>">
             </div>
           </div>
 
           <div class="param">
             <label for="mainColor"><?= $loc['label_mainColor'] ?></label>
-            <div class="conteneurInputColor">
+            <div class="inputColorContainer">
               <input type="color" name="mainColor" id="mainColor" value="<?php if (!empty($_GET['mainColor'])) {echo htmlspecialchars($_GET['mainColor']);} else {echo "#000000";} ?>">
             </div>
           </div>
         </div>
 
         <div class="centered">
-          <input class="bouton" type="submit" value="<?= $loc['button_create'] ?>" />
+          <input class="button" type="submit" value="<?= $loc['button_create'] ?>" />
         </div>
 
       </form>
@@ -248,33 +248,33 @@ if (badQuery()) {
         QRcode::png($_GET['txt'], $cheminImage, $_GET['redondancy'], $_GET['size'], $_GET['margin'], false, hexdec($_GET['bgColor']), hexdec($_GET['mainColor']));
         ?>
         <div class="centered">
-          <a href="<?php echo $cheminImage; ?>" class="bouton" download="<?php echo htmlspecialchars($_GET['txt']); ?>.png"><?= $loc['button_download'] ?></a>
+          <a href="<?php echo $cheminImage; ?>" class="button" download="<?php echo htmlspecialchars($_GET['txt']); ?>.png"><?= $loc['button_download'] ?></a>
         </div>
 
         <div class="centered" id="showOnlyQR">
-          <a title="<?= $loc['title_showOnlyQR'] ?>" href="<?php echo $cheminImage; ?>"><img alt='Un code QR contenant "<?php echo htmlspecialchars($_GET['txt']); ?>"' id="qrCode" src="<?php echo $cheminImage; ?>"/></a>
+          <a title="<?= $loc['title_showOnlyQR'] ?>" href="<?php echo $cheminImage; ?>"><img alt='<?= $loc['alt_QR_before'] ?><?php echo htmlspecialchars($_GET['txt']); ?><?= $loc['alt_QR_after'] ?>' id="qrCode" src="<?php echo $cheminImage; ?>"/></a>
         </div>
         <?php
       }
     }
         ?>
 
-      <div id="metaTexts">
+        <footer>
 
-        <section id="info" class="metaText">
-          <?= $loc['metaText_qr'] ?>
-        </section>
+          <section id="info" class="metaText">
+            <?= $loc['metaText_qr'] ?>
+          </section>
 
-        <footer class="metaText">
-          <p>
-            <?= $loc['metaText_legal'] ?>
-          </p>
-          <?php if (isset($customText)) { ?>
-          <br>
-          <p>
-            <?= $customText ?>
-          </p>
+          <?php if ($customTextEnabled) { ?>
+            <section class="metaText">
+              <?= $customText ?>
+            </section>
           <?php } ?>
+
+          <section class="metaText">
+            <?= $loc['metaText_legal'] ?>
+          </section>
+
         </footer>
 
       </div>

locales/en.php

@@ -35,12 +35,16 @@ $loc = array(
 
   'title_showOnlyQR' => "Show this QR code only",
 
+  'alt_help' => "Help",
+  'alt_QR_before' => 'QR code meaning "',
+  'alt_QR_after' => '"',
+
   'metaText_qr' => "
     <h3>What's a QR code?</h3>
     A QR code is a 2 dimensions barcode in which a text is written in binary. It can be decoded with a device equipped with a photo sensor and an adequate software.
     <a href='https://en.wikipedia.org/wiki/QR_code'>QR code on Wikipedia</a>
   ",
-  'metaText_legal' => "LibreQR 1.2.0 is a free software whose <a href='https://code.antopie.org/miraty/libreqr/''>source code</a>  is available under the terms of the <abbr title='GNU Affero General Public License version 3 or any later version'><a href='LICENSE.html'>AGPLv3</a>+</abbr>.",
+  'metaText_legal' => "LibreQR " . $libreqrVersion . " is a free software whose <a href='https://code.antopie.org/miraty/libreqr/'>source code</a> is available under the terms of the <abbr title='GNU Affero General Public License version 3 or any later version'><a href='LICENSE.html'>AGPLv3</a>+</abbr>.",
 
   'opensearch_description' => "Generate QR codes from your search or address bar",
   'opensearch_actionName' => "Generate QR codes from your search or address bar",

locales/fr.php

@@ -35,12 +35,16 @@ $loc = array(
 
   'title_showOnlyQR' => "Afficher uniquement ce code QR",
 
+  'alt_help' => "Aide",
+  'alt_QR_before' => "Code QR signifiant « ",
+  'alt_QR_after' => " »",
+
   'metaText_qr' => "
     <h3>Qu'est-ce qu'un code QR ?</h3>
     Un code QR est un code-barres en 2 dimensions dans lequel du texte est inscrit en binaire. Il peut être décodé avec un appareil muni d'un capteur photo et d'un logiciel adéquat.
     <a href='https://fr.wikipedia.org/wiki/Code_QR'>Code QR sur Wikipédia</a>
   ",
-  'metaText_legal' => "LibreQR 1.2.0 est un logiciel libre dont le <a href='https://code.antopie.org/miraty/libreqr/''>code source</a> est disponible selon les termes de l'<abbr title='GNU Affero General Public License version 3 ou toute version ultérieure'><a href='LICENSE.html'>AGPLv3</a>+</abbr>.",
+  'metaText_legal' => "LibreQR " . $libreqrVersion . " est un logiciel libre dont le <a href='https://code.antopie.org/miraty/libreqr/'>code source</a> est disponible selon les termes de l'<abbr title='GNU Affero General Public License version 3 ou toute version ultérieure'><a href='LICENSE.html'>AGPLv3</a>+</abbr>.",
 
   'opensearch_description' => "Générez des codes QR depuis votre barre de recherche ou d'adresse",
   'opensearch_actionName' => "Générez des codes QR depuis votre barre de recherche ou d'adresse",

locales/template.php

@@ -1,6 +1,8 @@
 <?php
 $loc = array(
   'subtitle' => "subtitle",
+  'description' => "description",
+
   'label_content' => "label_content",
   'label_redondancy' => "label_redondancy",
   'label_margin' => "label_margin",
@@ -22,6 +24,13 @@ $loc = array(
 
   'title_showOnlyQR' => "title_showOnlyQR",
 
+  'alt_help' => "alt_help",
+  'alt_QR_before' => "alt_QR_before",
+  'alt_QR_after' => "alt_QR_after",
+
   'metaText_qr' => "metaText_qr",
   'metaText_legal' => "metaText_legal",
+
+  'opensearch_description' => "opensearch_description",
+  'opensearch_actionName' => "opensearch_actionName",
 );

style.less

@@ -34,7 +34,7 @@ a {
 }
 
 p {
-  margin: 0px;
+  margin: 10px;
 }
 
 #firstWrapper {
@@ -55,7 +55,7 @@ p {
   text-align: center;
 }
 
-.bouton {
+.button {
   padding: 3px 10px 3px 10px;
   text-decoration: none;
 }
@@ -99,7 +99,7 @@ header {
   height: 64px;
 }
 
-#titres {
+#titles {
   margin-left: 20px;
 }
 
@@ -116,7 +116,7 @@ h2 {
   font-size: 22px;
 }
 
-#lienTitres {
+#linkTitles {
   text-align: left;
   justify-content: center;
   text-decoration: none;
@@ -128,11 +128,6 @@ h2 {
   margin-top: 30px;
 }
 
-#titre {
-  text-align: center;
-  justify-content: center;
-}
-
 .param {
   padding: 10px;
   padding-left: 0px;
@@ -141,7 +136,7 @@ h2 {
   margin-right: 0px;
 }
 
-.conteneurInputColor {
+.inputColorContainer {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -173,33 +168,29 @@ label[for=txt] {
 
 .metaText {
   color: @secondaryText;
-  text-align: left;
   transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
+  padding: 6px;
 
-  & a:link {
+  & a, a:visited {
     transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
     color: @secondaryText;
     text-decoration: underline;
   }
 
-  &:hover, &:hover a:link {
+  &:hover, &:hover a {
     color: @text;
   }
 
 }
 
-#metaTexts {
-  padding-top: 50px;
-}
-
-header, #metaTexts {
-  flex-shrink: 0;
-}
-
 footer {
   font-size: 14px;
   padding-top: 20px;
+  text-align: left;
+}
 
+header, footer {
+  flex-shrink: 0;
 }
 
 #info {
@@ -217,7 +208,7 @@ footer {
 
 /* Inputs */
 
-#redondancy, #margin, #txt, #size, input[type=color], input[type=submit], .bouton {
+#redondancy, #margin, #txt, #size, input[type=color], input[type=submit], .button {
   border: 2px @border solid;
   border-radius: 10px;
   font-size: 20px;
@@ -285,7 +276,7 @@ input[type=color] {
   margin-left: 5px;
 }
 
-.boutonAide {
+.helpButton {
   height: 0px;
   width: 0px;
   color: @secondaryText;
@@ -293,7 +284,7 @@ input[type=color] {
   font-size: 0.8em;
 }
 
-.conteneurAide .contenuAide {
+.helpContainer .helpContent {
   position: absolute;
   transform: scale(0) rotate(-12deg);
   color: @text;
@@ -317,7 +308,7 @@ input[type=color] {
   }
 }
 
-.conteneurAide:hover .contenuAide, .conteneurAide:focus-within .contenuAide {
+.helpContainer:hover .helpContent, .helpContainer:focus-within .helpContent {
   transform: scale(1) rotate(0);
   opacity: 1;
 }

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{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;}}
+*{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:10px;}#firstWrapper{display:flex;flex-direction:row;}#menusDeroulants{text-align:center;margin-left:20px;}#qrCode{max-width:480px;}.centered{text-align:center;}.button{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;}#titles{margin-left:20px;}h1,h2,h3,h4,h5,h6{margin:0px;font-weight:normal;}h1{font-size:33px;}h2{font-size:22px;}#linkTitles{text-align:left;justify-content:center;text-decoration:none;display:flex;flex-direction:row;}#showOnlyQR{margin-top:30px;}.param{padding:10px;padding-left:0px;margin-left:0px;padding-right:0px;margin-right:0px;}.inputColorContainer{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;transition:color 0.12s cubic-bezier(0.42,0.0,1.0,1.0);padding:6px;}.metaText a,.metaText a:visited{transition:color 0.12s cubic-bezier(0.42,0.0,1.0,1.0);color:#bababa;text-decoration:underline;}.metaText:hover,.metaText:hover a{color:white;}footer{font-size:14px;padding-top:20px;text-align:left;}header,footer{flex-shrink:0;}#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],.button{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,.button:hover{border:2px #808080 solid;}#redondancy:focus,#margin:focus,#txt:focus,#size:focus,input[type=color]:focus,input[type=submit]:focus,.button: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;}.helpButton{height:0px;width:0px;color:#bababa;cursor:help;font-size:0.8em;}.helpContainer .helpContent{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){.helpContainer .helpContent{position:fixed;margin:5px;left:0px;top:0px;}}.helpContainer:hover .helpContent,.helpContainer:focus-within .helpContent{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;}}