forked from miraty/libreqr
461 lines
7.2 KiB
Text
Executable file
461 lines
7.2 KiB
Text
Executable file
// This file is part of LibreQR, which is distributed under the GNU AGPLv3+ license
|
|
|
|
@light: ~"(prefers-color-scheme: light)";
|
|
@dark: ~"(prefers-color-scheme: dark)";
|
|
@import "themes/@{theme}/logo.less";
|
|
|
|
:root {
|
|
@media @light {
|
|
color-scheme: light;
|
|
}
|
|
@media @dark {
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
* {
|
|
font-family: system-ui, sans-serif;
|
|
|
|
scrollbar-width: auto;
|
|
|
|
@media @light {
|
|
scrollbar-color: @text-light @bg-light;
|
|
}
|
|
|
|
@media @dark {
|
|
scrollbar-color: @text-dark @bg-dark;
|
|
}
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
max-width: 812px;
|
|
height: 100%;
|
|
|
|
margin: 0px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
font-weight: normal;
|
|
font-size: 20px;
|
|
|
|
@media @light {
|
|
color: @text-light;
|
|
background-color: @bg-light;
|
|
}
|
|
|
|
@media @dark {
|
|
color: @text-dark;
|
|
background-color: @bg-dark;
|
|
}
|
|
}
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
|
|
@media @light {
|
|
color: @text-light;
|
|
}
|
|
|
|
@media @dark {
|
|
color: @text-dark;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
code {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.helpText {
|
|
margin: 5px 0px 0px 0px;
|
|
padding: 5px;
|
|
border-radius: 10px;
|
|
border-width: 2px;
|
|
border-style: dashed;
|
|
text-align: left;
|
|
|
|
@media @light {
|
|
background-color: @bgHelp-light;
|
|
border-color: @borderHelp-light;
|
|
}
|
|
|
|
@media @dark {
|
|
background-color: @bgHelp-dark;
|
|
border-color: @borderHelp-dark;
|
|
}
|
|
|
|
& p {
|
|
margin-top: 0px;
|
|
margin-bottom: 8px;
|
|
&:last-child {
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#sideParams {
|
|
width: 100%;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
& .param {
|
|
max-width: 270px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
summary {
|
|
margin-left: 20px;
|
|
cursor: help;
|
|
}
|
|
|
|
#qrCode {
|
|
max-width: 94%;
|
|
width: auto;
|
|
height: auto;
|
|
|
|
@width: 2px;
|
|
@lenght: 16px;
|
|
padding: @width;
|
|
|
|
&.needLightContrast {
|
|
@media @light {
|
|
background:
|
|
linear-gradient(to right, @borderQr-light @width, transparent 0px) 0 0,
|
|
linear-gradient(to right, @borderQr-light @width, transparent 0px) 0 100%,
|
|
linear-gradient(to left, @borderQr-light @width, transparent 0px) 100% 0,
|
|
linear-gradient(to left, @borderQr-light @width, transparent 0px) 100% 100%,
|
|
linear-gradient(to bottom, @borderQr-light @width, transparent 0px) 0 0,
|
|
linear-gradient(to bottom, @borderQr-light @width, transparent 0px) 100% 0,
|
|
linear-gradient(to top, @borderQr-light @width, transparent 0px) 0 100%,
|
|
linear-gradient(to top, @borderQr-light @width, transparent 0px) 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: @lenght @lenght;
|
|
}
|
|
}
|
|
|
|
&.needDarkContrast {
|
|
@media @dark {
|
|
background:
|
|
linear-gradient(to right, @borderQr-dark @width, transparent 0px) 0 0,
|
|
linear-gradient(to right, @borderQr-dark @width, transparent 0px) 0 100%,
|
|
linear-gradient(to left, @borderQr-dark @width, transparent 0px) 100% 0,
|
|
linear-gradient(to left, @borderQr-dark @width, transparent 0px) 100% 100%,
|
|
linear-gradient(to bottom, @borderQr-dark @width, transparent 0px) 0 0,
|
|
linear-gradient(to bottom, @borderQr-dark @width, transparent 0px) 100% 0,
|
|
linear-gradient(to top, @borderQr-dark @width, transparent 0px) 0 100%,
|
|
linear-gradient(to top, @borderQr-dark @width, transparent 0px) 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: @lenght @lenght;
|
|
}
|
|
}
|
|
}
|
|
|
|
.centered {
|
|
text-align: center;
|
|
}
|
|
|
|
.button {
|
|
padding: 3px 10px 3px 10px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
padding-top: 12px;
|
|
height: 64px;
|
|
}
|
|
|
|
#linkTitles::before {
|
|
width: 64px;
|
|
height: 64px;
|
|
content: "";
|
|
|
|
background-repeat: no-repeat;
|
|
@media @light {
|
|
background-image: var(--logo-light);
|
|
}
|
|
|
|
@media @dark {
|
|
background-image: var(--logo-dark);
|
|
}
|
|
}
|
|
|
|
#titles {
|
|
margin-left: 2%;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin: 0px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 29px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 22px;
|
|
}
|
|
|
|
#linkTitles {
|
|
text-align: left;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
#downloadQR {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
#showOnlyQR {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.param {
|
|
padding: 4px;
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
::selection {
|
|
|
|
@media @light {
|
|
color: @bg-light;
|
|
background-color: @text-light;
|
|
}
|
|
|
|
@media @dark {
|
|
color: @bg-dark;
|
|
background-color: @text-dark;
|
|
}
|
|
}
|
|
|
|
label[for=txt] summary {
|
|
margin-left: 22px;
|
|
}
|
|
|
|
#colors {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
text-align: center;
|
|
|
|
& .param {
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.metaText {
|
|
padding: 6px;
|
|
@media @light {
|
|
color: @text-light;
|
|
}
|
|
|
|
@media @dark {
|
|
color: @text-dark;
|
|
}
|
|
|
|
& a, a:visited {
|
|
text-decoration: underline;
|
|
@media @light {
|
|
color: @text-light;
|
|
}
|
|
|
|
@media @dark {
|
|
color: @text-dark;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
footer {
|
|
font-size: 16px;
|
|
margin-top: auto;
|
|
padding-top: 10px;
|
|
text-align: left;
|
|
}
|
|
|
|
small {
|
|
font-size: 14px;
|
|
}
|
|
|
|
#info {
|
|
font-size: 16px;
|
|
margin: 0px;
|
|
|
|
& h3 {
|
|
font-size: 20px;
|
|
font-weight: normal;
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
/* Inputs */
|
|
|
|
#redundancy, #margin, #txt, #size, input[type=color], input[type=submit], .button {
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
border-radius: 10px;
|
|
font-size: 20px;
|
|
padding-left: 10px;
|
|
font-weight: normal;
|
|
transition: border-color 0.1s ease;
|
|
margin: 6px;
|
|
|
|
@media @light {
|
|
color: @text-light;
|
|
background-color: @bgField-light;
|
|
border-color: @border-light;
|
|
}
|
|
|
|
@media @dark {
|
|
color: @text-dark;
|
|
background-color: @bgField-dark;
|
|
border-color: @border-dark;
|
|
}
|
|
|
|
&:hover {
|
|
border-width: 3px;
|
|
margin: 5px;
|
|
border-style: solid;
|
|
|
|
@media @light {
|
|
border-color: @borderHover-light;
|
|
}
|
|
|
|
@media @dark {
|
|
border-color: @borderHover-dark;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
border-width: 4px;
|
|
margin: 4px;
|
|
border-style: solid;
|
|
outline: none;
|
|
|
|
@media @light {
|
|
border-color: @borderFocus-light;
|
|
}
|
|
|
|
@media @dark {
|
|
border-color: @borderFocus-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
#redundancy {
|
|
width: 250px;
|
|
height: 44px;
|
|
&:hover {
|
|
width: 252px;
|
|
height: 46px;
|
|
}
|
|
&:focus {
|
|
width: 254px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
|
|
input[type=color] {
|
|
height: 60px;
|
|
width: 84px;
|
|
padding: 5px;
|
|
&:hover {
|
|
height: 62px;
|
|
width: 86px;
|
|
}
|
|
&:focus {
|
|
height: 64px;
|
|
width: 88px;
|
|
}
|
|
}
|
|
|
|
#size, #margin {
|
|
width: 234px;
|
|
height: 38px;
|
|
}
|
|
|
|
#redundancy, #size, #margin {
|
|
|
|
@media @light {
|
|
background-color: @bgField-light;
|
|
}
|
|
|
|
@media @dark {
|
|
background-color: @bgField-dark;
|
|
}
|
|
}
|
|
|
|
#txtParam {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#txt {
|
|
padding: 10px;
|
|
width: auto;
|
|
scrollbar-width: auto;
|
|
|
|
@media @light {
|
|
background-color: @bgTextarea-light;
|
|
color: @textareaText-light;
|
|
scrollbar-color: @textareaText-light @bgTextarea-light;
|
|
}
|
|
|
|
@media @dark {
|
|
background-color: @bgTextarea-dark;
|
|
color: @textareaText-dark;
|
|
scrollbar-color: @textareaText-dark @bgTextarea-dark;
|
|
}
|
|
}
|
|
|
|
input[type=submit] {
|
|
cursor: pointer;
|
|
font-size: 28px;
|
|
padding: 10px;
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
}
|
|
|
|
#txt::placeholder {
|
|
opacity: 1;
|
|
font-family: system-ui, sans-serif;
|
|
font-weight: normal;
|
|
font-size: 1em;
|
|
@media @light {
|
|
color: @textareaPlaceholder-light;
|
|
}
|
|
|
|
@media @dark {
|
|
color: @textareaPlaceholder-dark;
|
|
}
|
|
}
|
|
|
|
a[download]::before {
|
|
content: "💾 ";
|
|
|
|
filter:
|
|
drop-shadow(-1px 1px 1px white)
|
|
drop-shadow(1px -1px 1px white);
|
|
}
|