// 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 { 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; } & p { margin-top: 0px; margin-bottom: 8px; &:last-child { margin-bottom: 0px; } } } #sideParams { text-align: center; margin-left: 12px; } summary { margin-left: 20px; #sideParams & { text-align: center; } } #firstWrapper { display: flex; flex-direction: row; } #qrCode { max-width: 480px; @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; } main { display: flex; flex-direction: column; margin-left: auto; margin-right: auto; width: 814px; height: 100%; } 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: 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; } #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: auto; text-align: left; } #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%; } } a[download]::before { content: "💾 "; filter: drop-shadow(1px 1px white) drop-shadow(-1px -1px white) drop-shadow(-1px 1px white) drop-shadow(1px -1px white); }