From f73561ce363a1d84b9afc668c87d05ff14c7ec09 Mon Sep 17 00:00:00 2001 From: Hugo A Date: Mon, 15 Aug 2022 12:06:44 +0200 Subject: [PATCH] branche initiale --- style.less | 455 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 455 insertions(+) create mode 100755 style.less diff --git a/style.less b/style.less new file mode 100755 index 0000000..031a9f6 --- /dev/null +++ b/style.less @@ -0,0 +1,455 @@ +// 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; +} + +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: white; + background-color: #67a3f2; + } + + @media @dark { + color: white; + background-color: #67a3f2; + } +} + +a { + text-decoration: underline; + + @media @light { + color: white; + } + + @media @dark { + color: white; + } + + &: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: #2e5281; + border-color: #005184; + } + + @media @dark { + background-color: #2e5281; + border-color: #005184; + } + + & 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: #67a3f2; + background-color: white; + } + + @media @dark { + color: #67a3f2; + background-color: white; + } +} + +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: white; + } + + @media @dark { + color: white; + } + + & a, a:visited { + text-decoration: underline; + @media @light { + color: white; + } + + @media @dark { + color: white; + } + } + +} + +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: white; + background-color: #2e5281; + border-color: #2e5281; + } + + @media @dark { + color: white; + background-color: #2e5281; + border-color: #2e5281; + } + + &:hover { + border-width: 3px; + margin: 5px; + border-style: solid; + + @media @light { + border-color: #67a3f2; + } + + @media @dark { + border-color: #67a3f2; + } + } + + &:focus { + border-width: 4px; + margin: 4px; + border-style: solid; + outline: none; + + @media @light { + border-color: #67a3f2; + } + + @media @dark { + border-color: #67a3f2; + } + } +} + +#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: #2e5281; + } + + @media @dark { + background-color: #2e5281; + } +} + +#txtParam { + display: flex; + flex-direction: column; +} + +#txt { + padding: 10px; + width: auto; + scrollbar-width: auto; + + @media @light { + background-color: white; + color: black; + } + + @media @dark { + background-color: white; + color: black; + } +} + +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); +} +#logo { + width: 64px; + height: 64px; +}