372 lines
5.4 KiB
Plaintext
Executable File
372 lines
5.4 KiB
Plaintext
Executable File
/*
|
|
|
|
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;
|
|
}
|
|
|
|
a {
|
|
color: @text;
|
|
text-decoration: underline;
|
|
|
|
&: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: 0px;
|
|
background-color: @bg;
|
|
color: @text;
|
|
font-weight: normal;
|
|
font-size: 20px;
|
|
height: 96%;
|
|
}
|
|
|
|
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: @bg;
|
|
background-color: @text;
|
|
}
|
|
|
|
label[for=txt] {
|
|
padding-left: 22px;
|
|
}
|
|
|
|
#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%;
|
|
}
|
|
}
|
|
|
|
.metaText {
|
|
color: @secondaryText;
|
|
transition: color 0.12s cubic-bezier(0.42, 0.0, 1.0, 1.0);
|
|
padding: 6px;
|
|
|
|
& 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 {
|
|
color: @text;
|
|
}
|
|
|
|
}
|
|
|
|
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;
|
|
|
|
& h3 {
|
|
font-size: 20px;
|
|
font-weight: normal;
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
/* Inputs */
|
|
|
|
#redondancy, #margin, #txt, #size, input[type=color], input[type=submit], .button {
|
|
border: 2px @border solid;
|
|
border-radius: 10px;
|
|
font-size: 20px;
|
|
padding-left: 10px;
|
|
font-weight: normal;
|
|
color: @text;
|
|
transition: border 0.1s linear;
|
|
background-color: @bgField;
|
|
margin-top: 8px;
|
|
|
|
&:hover {
|
|
border: 2px @borderHover solid;
|
|
}
|
|
|
|
&:focus {
|
|
border: 2px @borderFocus solid;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
#redondancy, #size, #margin {
|
|
background-color: @bgField;
|
|
width: 250px;
|
|
height: 40px;
|
|
}
|
|
|
|
#txt {
|
|
background-color: @bgTextField;
|
|
color: @fgTextField;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
width: 500px;
|
|
scrollbar-color: @text @bgTextField;
|
|
scrollbar-width: auto;
|
|
}
|
|
|
|
input[type=submit] {
|
|
font-size: 28px;
|
|
padding: 10px;
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
}
|
|
|
|
#txt::placeholder {
|
|
color: @fgDefaultTextField;
|
|
opacity: 1;
|
|
font-family: "Ubuntu", sans-serif;
|
|
font-weight: normal;
|
|
font-size: 1em;
|
|
}
|
|
|
|
input[type=color] {
|
|
height: 60px;
|
|
width: 84px;
|
|
padding: 5px;
|
|
border: 2px @border solid;
|
|
}
|
|
|
|
/* Help message */
|
|
|
|
.helpImg {
|
|
width: 22px;
|
|
height: 22px;
|
|
margin-bottom: -3px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.helpButton {
|
|
height: 22px;
|
|
width: 22px;
|
|
color: @secondaryText;
|
|
cursor: help;
|
|
font-size: 0.8em;
|
|
display: inline-block;
|
|
}
|
|
|
|
.helpContainer {
|
|
display: inline-block;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.helpContent {
|
|
position: absolute;
|
|
transform: scale(0) rotate(-12deg);
|
|
color: @text;
|
|
background: @bgHelp;
|
|
padding: 15px;
|
|
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) {
|
|
position: fixed;
|
|
margin: 5px;
|
|
left: 0px;
|
|
top: 0px;
|
|
}
|
|
}
|
|
|
|
.helpContainer:hover .helpContent, .helpContainer:focus-within .helpContent {
|
|
transform: scale(1) rotate(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Media queries */
|
|
|
|
@media (max-width: 850px) {
|
|
|
|
main {
|
|
width: auto;
|
|
}
|
|
|
|
#firstWrapper {
|
|
flex-direction: column;
|
|
}
|
|
|
|
body {
|
|
margin: 10px;
|
|
}
|
|
|
|
#txt {
|
|
width: 92%;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 500px) { // Mobile version
|
|
|
|
#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;
|
|
}
|
|
|
|
}
|