/* This file is part of LibreQR. 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 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. You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ @light: ~"(prefers-color-scheme: light)"; @dark: ~"(prefers-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 { margin: 0px; font-weight: normal; font-size: 20px; height: 100%; @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; } } .helpText { margin: 5px 0px 0px 0px; padding: 5px; border-radius: 10px; text-align: left; @media @light { background-color: @bgHelp-light; } @media @dark { background-color: @bgHelp-dark; } } #sideParams { text-align: center; margin-left: 12px; } #sideParams summary { text-align: center; margin-left: 20px; } #firstWrapper { display: flex; flex-direction: row; } #qrCode { max-width: 480px; } .centered { text-align: center; } .button { padding: 3px 10px 3px 10px; text-decoration: none; } main { display: flex; flex-direction: column; margin-left: auto; margin-right: auto; width: 814px; height: 100%; } header { text-align: center; padding-top: 12px; margin: 0px; height: 64px; display: flex; justify-content: center; } #logo { width: 64px; height: 64px; } #titles { margin-left: 20px; } 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; } section#output { flex-grow: 1; } #showOnlyQR, #downloadQR { 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 { @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-between; text-align: center; & .param { text-align: center; display: flex; justify-content: center; flex-direction: column; width: 100%; } } .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: 14px; margin-top: 10px; 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-width: 2px; border-style: solid; border-radius: 10px; font-size: 20px; padding-left: 10px; font-weight: normal; transition: border-color 0.1s ease; margin-top: 8px; @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: 2px; border-style: solid; @media @light { border-color: @borderHover-light; } @media @dark { border-color: @borderHover-dark; } } &:focus { border-width: 2px; border-style: solid; outline: none; @media @light { border-color: @borderFocus-light; } @media @dark { border-color: @borderFocus-dark; } } } #redondancy { width: 250px; height: 44px; } #size, #margin { width: 234px; height: 38px; } #redondancy, #size, #margin { @media @light { background-color: @bgField-light; } @media @dark { background-color: @bgField-dark; } } #txt { padding: 10px; margin: 10px; width: 500px; 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] { 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; } } input[type=color] { height: 60px; width: 84px; padding: 5px; border-width: 2px; border-style: solid; @media @light { border-color: @border-light; } @media @dark { border-color: @border-dark; } } /* Media queries */ @media (max-width: 850px) { main { width: auto; } #firstWrapper { flex-direction: column; } #txt { width: 92%; } } @media (max-width: 500px) { // Mobile version #colors { flex-direction: column; } #txt { width: 85%; } #qrCode { max-width: 94%; } }