quentin
/
libreqr
forked from miraty/libreqr
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

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

master
Miraty 1 year ago
parent
38f2edd4fb
commit
405e073d9f
10 changed files with 96 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      config.inc.php
  2. 11
      config.yaml.php
  3. 2
      help.svg.php
  4. 16
      inc.php
  5. 66
      index.php
  6. 6
      locales/en.php
  7. 6
      locales/fr.php
  8. 9
      locales/template.php
  9. 41
      style.less
  10. 2
      style.min.css

11
config.inc.php
View File

@ -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>.";

11
config.yaml.php
View File

@ -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" ?>

2
help.svg.php
View File

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

16
inc.php
View File

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

66
index.php
View File

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

6
locales/en.php
View File

@ -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",

6
locales/fr.php
View File

@ -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",

9
locales/template.php
View File

@ -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",
);

41
style.less
View File

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

2
style.min.css
View File

@ -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;}}
Write Preview
Loading…
Cancel
Save