From 4cb94fd40e5f947673e233dc08c4b81cae07126c Mon Sep 17 00:00:00 2001 From: Yarmo Mackenbach Date: Fri, 15 Sep 2023 14:24:54 +0200 Subject: [PATCH] feat: rewrite styles --- static-src/index.js | 4 +- static-src/kx-claim.js | 19 +- static-src/kx-styles.css | 264 ------------ static-src/kx-styles.scss | 269 ++++++++++++ static-src/styles.css | 656 ------------------------------ static-src/styles.scss | 100 +++++ static-src/styles/forms.scss | 152 +++++++ static-src/styles/layout.scss | 193 +++++++++ static-src/styles/typography.scss | 146 +++++++ static-src/styles/vars.scss | 158 +++++++ 10 files changed, 1033 insertions(+), 928 deletions(-) delete mode 100644 static-src/kx-styles.css create mode 100644 static-src/kx-styles.scss delete mode 100644 static-src/styles.css create mode 100644 static-src/styles.scss create mode 100644 static-src/styles/forms.scss create mode 100644 static-src/styles/layout.scss create mode 100644 static-src/styles/typography.scss create mode 100644 static-src/styles/vars.scss diff --git a/static-src/index.js b/static-src/index.js index 10d9bbe..9e35a14 100644 --- a/static-src/index.js +++ b/static-src/index.js @@ -35,8 +35,8 @@ import * as ui from './ui.js' import * as utils from './utils.js' // Import CSS files -import './styles.css' -import './kx-styles.css' +import './styles.scss' +import './kx-styles.scss' // Add functions to window window.showQR = utils.showQR diff --git a/static-src/kx-claim.js b/static-src/kx-claim.js index 29165c3..b7b16f3 100644 --- a/static-src/kx-claim.js +++ b/static-src/kx-claim.js @@ -58,19 +58,26 @@ export class Claim extends HTMLElement { updateContent(value) { const root = this; - const claim = doipjs.Claim.fromJson(JSON.parse(value)); + const claimJson = JSON.parse(value); + const claim = doipjs.Claim.fromJson(claimJson); - root.querySelector('.info .subtitle').innerText = claim.matches[0].about.name; - root.querySelector('.info .title').innerText = claim.matches[0].profile.display; + console.log(claimJson); + + root.querySelector('.info .title').innerText = claimJson.display.name; + root.querySelector('.info .subtitle').innerText = claimJson.display.serviceProviderName ?? + (claim.status < 300 ? '???' : '---'); try { if (claim.status >= 200) { - root.querySelector('.icons .verificationStatus').setAttribute('data-value', claim.status < 300 ? 'success' : 'failed'); + root.setAttribute('data-status', claim.status < 300 ? 'success' : 'failed'); + // root.querySelector('.icons .verificationStatus').setAttribute('data-value', claim.status < 300 ? 'success' : 'failed'); } else { - root.querySelector('.icons .verificationStatus').setAttribute('data-value', 'running'); + root.setAttribute('data-status', 'running'); + // root.querySelector('.icons .verificationStatus').setAttribute('data-value', 'running'); } } catch (error) { - root.querySelector('.icons .verificationStatus').setAttribute('data-value', 'failed'); + root.setAttribute('data-status', 'failed'); + // root.querySelector('.icons .verificationStatus').setAttribute('data-value', 'failed'); } const elContent = root.querySelector('.content'); diff --git a/static-src/kx-styles.css b/static-src/kx-styles.css deleted file mode 100644 index c8fb7f3..0000000 --- a/static-src/kx-styles.css +++ /dev/null @@ -1,264 +0,0 @@ -/* -Copyright (C) 2021 Yarmo Mackenbach - -This program 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. - -This program 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 . - -Also add information on how to contact you by electronic and paper mail. - -If your software can interact with users remotely through a computer network, -you should also make sure that it provides a way for users to get its source. -For example, if your program is a web application, its interface could display -a "Source" link that leads users to an archive of the code. There are many -ways you could offer source, and different solutions will be better for different -programs; see section 13 for the specific requirements. - -You should also get your employer (if you work as a programmer) or school, -if any, to sign a "copyright disclaimer" for the program, if necessary. For -more information on this, and how to apply and follow the GNU AGPL, see . -*/ -kx-claim { - display: block; - margin: 12px 0; -} - -/* KX-ITEM */ -.kx-item details { - width: 100%; - border-radius: 8px; -} -.kx-item details p { - margin: 0; - word-break: break-word; - font-size: 1rem; -} -.kx-item details a { - color: var(--link-color); -} -.kx-item details hr { - border: none; - border-top: 2px solid var(--claim-background-color); -} -.kx-item details .content { - padding: 12px; - border: solid 3px var(--claim-background-color); - border-top: 0px; - border-radius: 0px 0px 8px 8px; -} -.kx-item details summary { - display: flex; - align-items: center; - padding: 8px 12px; - background-color: var(--claim-background-color); - border: solid 3px var(--claim-background-color); - border-radius: 8px; - list-style: none; - cursor: pointer; -} -.kx-item details summary::-webkit-details-marker { - display: none; -} -.kx-item details summary:hover, summary:focus { - border-color: var(--claim-border-accent-color); -} -details[open] summary { - border-radius: 8px 8px 0px 0px; -} -.kx-item details summary .info { - flex: 1; -} -.kx-item details summary .info .title { - font-size: 1.1em; -} -.kx-item details summary .claim__description p { - font-size: 1.4rem; - line-height: 2rem; -} -.kx-item details summary .claim__links p, p.subtle-links { - display: flex; - align-items: center; - flex-wrap: wrap; - font-size: 1rem; - color: var(--link-subtle-color); -} -.kx-item details summary .claim__links a, summary .claim__links span, p.subtle-links a { - font-size: 1rem; - margin: 0 10px 0 0; - color: var(--link-subtle-color); -} -.kx-item details summary .subtitle { - color: var(--claim-title-text-color); -} -.kx-item details summary .verificationStatus { - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: 48px; - height: 48px; - border-radius: 100%; - color: #fff; - font-size: 2rem; - user-select: none; -} -.kx-item details summary .verificationStatus::after { - position: absolute; - display: flex; - top: 0; - left: 0; - right: 0; - bottom: 0; - align-items: center; - justify-content: center; -} -.kx-item details summary .verificationStatus .inProgress { - opacity: 0; - transition: opacity 0.4s ease; - pointer-events: none; -} -.kx-item details summary .verificationStatus[data-value="success"] { - content: "v"; - background-color: var(--success-color); -} -.kx-item details summary .verificationStatus[data-value="success"]::after { - content: "✔"; -} -.kx-item details summary .verificationStatus[data-value="failed"] { - background-color: var(--failure-color); -} -.kx-item details summary .verificationStatus[data-value="failed"]::after { - content: "✕"; -} -.kx-item details summary .verificationStatus[data-value="running"] .inProgress { - opacity: 1; -} - -.kx-item details .subsection { - display: flex; - align-items: center; - gap: 16px; -} -.kx-item details .subsection > img { - width: 24px; - height: 24px; - opacity: 0.4; -} -@media (prefers-color-scheme: dark) { - .kx-item details .subsection > img { - filter: invert(1); - } -} - -.kx-item details .inProgress { - font-size: 10px; - margin: 50px auto; - text-indent: -9999em; - width: 48px; - height: 48px; - border-radius: 50%; - background: var(--loader-color); - background: -moz-linear-gradient(left, var(--loader-color) 10%, rgba(255, 255, 255, 0) 42%); - background: -webkit-linear-gradient(left, var(--loader-color) 10%, rgba(255, 255, 255, 0) 42%); - background: -o-linear-gradient(left, var(--loader-color) 10%, rgba(255, 255, 255, 0) 42%); - background: -ms-linear-gradient(left, var(--loader-color) 10%, rgba(255, 255, 255, 0) 42%); - background: linear-gradient(to right, var(--loader-color) 10%, rgba(255, 255, 255, 0) 42%); - position: relative; - -webkit-animation: load3 1.4s infinite linear; - animation: load3 1.4s infinite linear; - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); -} -.kx-item details .inProgress:before { - width: 50%; - height: 50%; - background: var(--loader-color); - border-radius: 100% 0 0 0; - position: absolute; - top: 0; - left: 0; - content: ''; -} -.kx-item details .inProgress:after { - background: var(--claim-background-color); - width: 65%; - height: 65%; - border-radius: 50%; - content: ''; - margin: auto; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} -.kx-item details button { - padding: 0.4rem 0.8rem; - margin-right: 8px; - text-decoration: none; - text-transform: uppercase; - color: var(--button-text-color); - background-color: var(--button-background-color); - border: solid 2px var(--button-border-color); - border-radius: 4px; - cursor: pointer; -} -.kx-item details button:hover { - background-color: var(--button-hover-background-color); - border-color: var(--button-hover-border-color); - color: var(--button-hover-text-color); -} - -@media screen and (max-width: 640px) { - .kx-item details summary .claim__description p { - font-size: 1.2rem; - } - .kx-item details summary .claim__links a, p.subtle-links a { - font-size: 0.9rem; - } -} -@media screen and (max-width: 480px) { - summary .claim__description p { - font-size: 1rem; - } - .kx-item details summary .verificationStatus { - width: 36px; - height: 36px; - font-size: 1.6rem; - } - .kx-item details .inProgress { - width: 36px; - height: 36px; - } -} - -@-webkit-keyframes load3 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes load3 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} diff --git a/static-src/kx-styles.scss b/static-src/kx-styles.scss new file mode 100644 index 0000000..52db260 --- /dev/null +++ b/static-src/kx-styles.scss @@ -0,0 +1,269 @@ +/* +Copyright (C) 2021 Yarmo Mackenbach + +This program 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. + +This program 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 . + +Also add information on how to contact you by electronic and paper mail. + +If your software can interact with users remotely through a computer network, +you should also make sure that it provides a way for users to get its source. +For example, if your program is a web application, its interface could display +a "Source" link that leads users to an archive of the code. There are many +ways you could offer source, and different solutions will be better for different +programs; see section 13 for the specific requirements. + +You should also get your employer (if you work as a programmer) or school, +if any, to sign a "copyright disclaimer" for the program, if necessary. For +more information on this, and how to apply and follow the GNU AGPL, see . +*/ +kx-claim { + padding: 2px 0; +} + +.kx-item { + display: block; + font-size: 0.9rem; + margin-left: -4px; + + details { + position: relative; + width: 100%; + border-radius: 4px; + z-index: 0; + + &[open] { + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); + z-index: 100; + } + + p { + margin: 0; + word-break: break-word; + font-size: 1em; + } + + a { + color: var(--link-color); + } + + hr { + border: none; + border-top: 2px solid var(--background-color); + } + + .content { + font-size: 0.9em; + padding: 12px; + background-color: var(--background-color); + border-top: 0px; + border-radius: 0px 0px 4px 4px; + } + + &[open] summary { + border-radius: 4px 4px 0px 0px; + background-color: var(--header-background-color) !important; + } + + summary { + display: flex; + align-items: center; + padding: 2px 4px; + border-radius: 4px; + list-style: none; + cursor: pointer; + + &::-webkit-details-marker { + display: none; + } + + &:hover, + &:focus { + background-color: var(--header-background-color); + } + + .info { + flex: 1; + } + + .info .title { + color: var(--text-color); + } + + .claim__links { + + p { + display: flex; + align-items: center; + flex-wrap: wrap; + font-size: 1em; + color: var(--link-color-subtle); + } + + .a, + span { + font-size: 1em; + margin: 0 10px 0 0; + color: var(--link-color-subtle); + } + } + + .subtitle-wrapper { + color: var(--text-color-subtle); + } + } + + .subsection { + display: flex; + align-items: center; + gap: 8px; + } + + .subsection>img { + width: 20px; + height: 20px; + opacity: 0.4; + } + + @media (prefers-color-scheme: dark) { + .subsection>img { + filter: invert(1); + } + } + } + + .verificationStatus { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + border-radius: 100%; + color: #fff; + font-size: 1.4em; + user-select: none; + + &::after { + position: absolute; + display: flex; + top: 0; + left: 0; + right: 0; + bottom: 0; + align-items: center; + justify-content: center; + } + + .inProgress, + .success, + .failure { + position: absolute; + top: 0; + left: 0; + opacity: 0; + pointer-events: none; + } + + .inProgress { + color: var(--loader-color); + + svg { + animation: 1s linear 0s infinite rot360; + } + } + + .success { + color: var(--success-color); + } + + .failure { + color: var(--failure-color); + } + } + + button { + padding: 0.4rem 0.8em; + margin-right: 8px; + text-decoration: none; + text-transform: uppercase; + color: var(--button-text-color); + background-color: var(--button-background-color); + border: solid 2px var(--button-border-color); + border-radius: 4px; + cursor: pointer; + } + + button:hover { + background-color: var(--button-hover-background-color); + border-color: var(--button-hover-border-color); + color: var(--button-hover-text-color); + } + + &[data-status="running"] { + .title { + color: var(--text-color-subtle) !important; + } + .inProgress { + opacity: 1 !important; + } + } + + &[data-status="success"] { + .title { + color: var(--primary-color) !important; + font-weight: bold; + } + .success { + opacity: 1 !important; + } + } + + &[data-status="failed"] { + .title { + color: var(--text-color-subtle) !important; + } + .failure { + opacity: 1 !important; + } + } + + &[data-status="success"] .verificationStatus>div, + &[data-status="failed"] .verificationStatus>div { + transition: opacity 0.4s ease !important; + } + + @-webkit-keyframes rot360 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + @keyframes rot360 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } +} \ No newline at end of file diff --git a/static-src/styles.css b/static-src/styles.css deleted file mode 100644 index 5e9b3cd..0000000 --- a/static-src/styles.css +++ /dev/null @@ -1,656 +0,0 @@ -/* -Copyright (C) 2021 Yarmo Mackenbach - -This program 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. - -This program 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 . - -Also add information on how to contact you by electronic and paper mail. - -If your software can interact with users remotely through a computer network, -you should also make sure that it provides a way for users to get its source. -For example, if your program is a web application, its interface could display -a "Source" link that leads users to an archive of the code. There are many -ways you could offer source, and different solutions will be better for different -programs; see section 13 for the specific requirements. - -You should also get your employer (if you work as a programmer) or school, -if any, to sign a "copyright disclaimer" for the program, if necessary. For -more information on this, and how to apply and follow the GNU AGPL, see . -*/ -@import '../node_modules/fork-awesome/css/fork-awesome.css'; -@import '../node_modules/dialog-polyfill/dist/dialog-polyfill.css'; - -:root { - --white: hsl(0, 0%, 100%); - --black: hsl(0, 0%, 0%); - --grey-100: hsl(0, 0%, 90%); - --grey-200: hsl(0, 0%, 80%); - --grey-300: hsl(0, 0%, 70%); - --grey-400: hsl(0, 0%, 60%); - --grey-500: hsl(0, 0%, 50%); - --grey-600: hsl(0, 0%, 40%); - --grey-700: hsl(0, 0%, 30%); - --grey-900: hsl(0, 0%, 10%); - --green-300: hsl(110, 45%, 70%); - --green-400: hsl(110, 45%, 60%); - --green-600: hsl(110, 45%, 40%); - --red-400: hsl(10, 60%, 60%); - --blue-500: rgb(67, 176, 234); - --blue-700: hsl(201, 90%, 30%); - --purple-50: rgb(249, 248, 251); - --purple-100: rgb(238, 236, 248); - --purple-200: hsl(250, 48%, 90%); - --purple-300: hsl(250, 48%, 85%); - --purple-400: hsl(250, 48%, 70%); - --purple-500: hsl(250, 48%, 65%); - --purple-600: hsl(250, 48%, 60%); - --purple-700: hsl(250, 48%, 55%); - --purple-900: hsl(250, 38%, 45%); - --yellow-100: hsl(56, 100%, 95%); - --yellow-200: hsl(56, 100%, 90%); - --yellow-500: hsl(56, 100%, 65%); - - --loader-color: var(--purple-400); - --success-color: var(--green-600); - --failure-color: var(--red-400); - - --text-color: var(--grey-900); - --h1-color: var(--purple-700); - --h2-color: var(--purple-700); - --h2-small-color: var(--purple-600); - --h3-color: var(--grey-700); - --h3-small-color: var(--purple-400); - --h4-color: var(--grey-600); - --h4-small-color: var(--purple-400); - --link-color: var(--blue-700); - --link-subtle-color: var(--grey-700); - --nav-link-color: var(--purple-700); - - --button-text-color: var(--text-color); - --button-border-color: var(--purple-500); - --button-background-color: var(--white); - --button-hover-text-color: var(--white); - --button-hover-border-color: var(--purple-500); - --button-hover-background-color: var(--purple-500); - - --body-background-color: var(--white); - --footer-background-color: var(--purple-900); - --footer-text-color: var(--purple-200); - --card-background-color: var(--purple-50); - --card-border-color: var(--purple-200); - --claim-background-color: var(--purple-100); - --claim-border-accent-color: var(--purple-400); - --claim-title-text-color: var(--purple-700); - --input-focus-background-color: azure; - --focus-outline-color: lightskyblue; -} - -@media (prefers-color-scheme: dark) { - :root { - --text-color: var(--grey-100); - --h1-color: var(--purple-700); - --h2-color: var(--purple-300); - --h2-small-color: var(--purple-600); - --h3-color: var(--grey-300); - --h3-small-color: var(--purple-400); - --h4-color: var(--grey-300); - --h4-small-color: var(--purple-6400); - --link-color: var(--blue-500); - --link-subtle-color: var(--grey-700); - --nav-link-color: var(--purple-100); - - --loader-color: var(--purple-600); - --success-color: var(--green-600); - --failure-color: var(--red-400); - - --button-text-color: var(--white); - --button-border-color: var(--purple-700); - --button-background-color: var(--purple-900); - --button-hover-text-color: var(--white); - --button-hover-border-color: var(--purple-700); - --button-hover-background-color: var(--purple-700); - - --body-background-color: #121212; - --footer-background-color: #191720; - --footer-text-color: var(--purple-200); - --card-background-color: #191720; - --card-border-color: #26203a; - --claim-background-color: #26203a; - --claim-border-accent-color: var(--purple-400); - --claim-title-text-color: var(--purple-300); - --input-focus-background-color: azure; - --focus-outline-color: lightskyblue; - } -} - -* { - box-sizing: border-box; -} -:focus { - outline: none; - box-shadow: 0 0 0 3px var(--focus-outline-color); -} -input:focus, textarea:focus { - background: var(--input-focus-background-color); -} -input[type="radio"]:focus + label { - box-shadow: 0 0 0 3px var(--focus-outline-color); - background: var(--input-focus-background-color) !important; - color: var(--text-color) !important; -} -body { - display: flex; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 1.6rem 0 0; - line-height: 1.4rem; - font-family: sans-serif; - color: var(--text-color); - background-color: var(--body-background-color); -} - -/* HELPERS */ -.spacer { - flex: 1; -} -.no-margin { - margin: 0 !important; -} -.full-width { - display: block; - width: 100% !important; -} -.half-width { - display: block; - width: 50% !important; -} -.select-all { - user-select: all; -} - -/* LAYOUT */ -header { - margin: 0 1.6rem 1.6rem; -} -header nav { - flex: 1; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - gap: 8px; -} -header nav a.logo { - width: 64px; - height: 64px; - font-size: 1.6rem; - text-transform: uppercase; - text-decoration: none; - color: var(--nav-link-color); -} -header nav a.logo img { - width: 100%; -} -nav a.text { - /* font-size: 0.9em; */ - margin: 0; - padding: 0.5em 1em; - text-transform: uppercase; - text-decoration: none; - color: var(--nav-link-color); - border-radius: 4px; -} -nav a.text:hover, nav a.text:active { - color: #fff; - background-color: var(--purple-500); -} -main { - flex: 1; - margin: 0 1.6rem; -} -footer { - margin: 4.8rem 0 0; - padding: 0 1.6rem 1.6rem; - background-color: var(--footer-background-color); - color: var(--footer-text-color); -} - -.container { - width: 100%; - max-width: 720px; - margin: 0 auto; -} -section.profile p, .demo p { - font-size: 1.2rem; -} -.demo { - margin: 4.8rem auto; -} - -.card { - margin: 0 0 1.6rem; - padding: 0 1.2rem; - background-color: #fff; - background-color: var(--card-background-color); - border: 2px solid var(--card-border-color); - border-radius: 4px; -} -.card.card--transparent { - padding-left: 0; - padding-right: 0; - background-color: transparent; - border: 0; -} -.card--profileHeader { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; - gap: 24px; -} -.card--profileHeader p, .card--profileHeader small { - margin: 0; -} -.card--small-profile { - display: flex; - flex-direction: column; - text-align: center; -} -.card--small-profile-dummy { - opacity: 0.5; - border: 0; -} -.card--small-profile .name { - font-size: 1.4em; -} -.card--small-profile p { - margin-top: 0; -} -.card--small-profile p span.fingerprint { - display: inline-block; - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 0.8rem; -} -#profileName { - font-size: 1.6rem; - color: var(--text-color); -} -#profileURLFingerprint { - font-size: 1rem; - margin: 0 0 1.2rem; -} - -.hcards { - display: grid; - grid-gap: 1.2rem; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - margin-bottom: 1.6rem; -} -.hcards .card { - margin: 0; -} -.hcards.hcards--max-2 { - grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); -} -.hcards--col-1-2, .hcards--col-2-1 { - grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); -} -.hcards--col-1-2 .card, .hcards--col-2-1 .card { - grid-column: 1 / 2; -} -@media screen and (min-width: 1024px) { - .hcards--max-3 { - grid-template-columns: 1fr 1fr 1fr; - } - .hcards--max-2 { - grid-template-columns: 1fr 1fr; - } - .hcards--col-1-2, .hcards--col-2-1 { - grid-template-columns: repeat(3, 1fr); - } -} -@media screen and (min-width: 720px) { - .hcards--col-2-1 .card:nth-of-type(1) { - grid-column: 1 / -2; - } - .hcards--col-2-1 .card:nth-of-type(2) { - grid-column: -2 / -1; - } - .hcards--col-1-2 .card:nth-of-type(1) { - grid-column: 1 / 2; - } - .hcards--col-1-2 .card:nth-of-type(2) { - grid-column: 2 / -1; - } -} - -.warning { - padding: calc(0.8rem - 2px) 0.8rem; - background-color: var(--yellow-200); - border: solid 2px var(--yellow-500); -} -.warning p:first-of-type { - margin-top: 0; -} -.warning p:last-of-type { - margin-bottom: 0; -} - -#profileAvatar { - display: inline-block; - min-width: 96px; - max-width: 128px; - line-height: 0; - text-align: center; - border-radius: 50%; -} - -/* TYPOGRAPHY */ -h1 { - font-size: 1.6em; - margin: 3.2rem 0 1.6rem; - font-weight: normal; - color: var(--h1-color); - cursor: default; -} -h2 { - font-size: 1.4em; - margin: 3.2rem 0 1.6rem; - font-weight: normal; - color: var(--h2-color); - cursor: default; -} -h2 small { - margin-left: 0.8rem; - padding: 3px 6px; - background-color: var(--h2-small-color); - color: #fff; - border-radius: 4px; -} -h3 { - margin: 1.6rem 0; - font-size: 1.3em; - line-height: 1.6rem; - color: var(--h3-color); - font-weight: normal; - /* text-align: center; */ - cursor: default; -} -h3 small { - margin-left: 0.8rem; - padding: 3px 6px; - background-color: var(--h3-small-color); - color: #fff; - border-radius: 4px; -} -h4 { - margin: 1.6rem 0; - font-size: 1em; - line-height: 1.6rem; - color: var(--h4-color); - /* color: var(--purple-700); */ - font-weight: bold; - cursor: default; -} -h4 small { - margin-left: 0.8rem; - padding: 3px 6px; - background-color: var(--h4-small-color); - color: #fff; - border-radius: 4px; -} -p { - margin: 1.6rem 0; -} -p.warning { - padding: 8px; - background-color: #fffadc; - border: solid 1px #ffeea8; -} -a { - color: var(--link-color); -} -ul { - padding-left: 1em; - list-style: '- '; -} -main h1:first-of-type { - margin-top: 1.6rem; -} -footer h1 { - margin-bottom: 0.8rem; - color: var(--purple-200); - font-size: 1.2rem; - font-weight: bold; -} -footer a { - display: inline-block; - color: var(--purple-100); - height: 32px; -} - -code { - padding: 2px 4px; - background-color: var(--purple-100); - border: 1px solid var(--purple-500); -} -pre { - padding: 8px 12px; - background-color: var(--purple-100); - border: 1px solid var(--purple-500); - overflow-x: auto; - line-height: 1.2rem; - font-size: 1rem; -} -pre code { - padding: 0; - background-color: 0px; - border: 0px; -} - -#search { - margin-top: 96px; - margin-bottom: 128px; -} -#qr { - display: block; - width: 100% !important; - max-width: 256px !important; - height: auto !important; - margin: 0 auto 16px; -} - -/* FORM ELEMENTS */ -.form-wrapper { - align-items: center; - padding-top: 1.4rem; - padding-bottom: 1.6rem; - margin-bottom: 48px; -} -.form-wrapper *:last-child { - margin-bottom: 0; -} -.form-wrapper form { - display: flex; - flex-direction: column; - margin: 0; -} -.form-wrapper h2 { - margin-top: 0; -} -form input[type="text"], form input[type="search"] { - margin: 8px 0; - padding: 4px; - border: 1px solid #999; - border-radius: 3px; - font-size: 0.9rem; -} -form textarea { - width: 100%; - height: 128px; - margin: 8px 0; - resize: vertical; - font-size: 0.9rem; - border: 1px solid #999; -} -.button-wrapper { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin: 8px 0; -} -.radio-wrapper { - display: flex; - flex-wrap: wrap; - margin: 8px 0; -} -.radio-wrapper input[type="radio"] { - position: absolute; - opacity: 0; - z-index: -1; -} -.radio-wrapper input[type="radio"] + label { - margin: 0; - padding: 2px 8px; - background-color: #fff; - border: solid var(--purple-400); - border-width: 2px 1px; - cursor: pointer; -} -.radio-wrapper input[type="radio"]:first-of-type + label { - border-radius: 4px 0 0 4px; - border-left-width: 2px; -} -.radio-wrapper input[type="radio"]:last-of-type + label { - border-radius: 0 4px 4px 0; - border-right-width: 2px; -} -.radio-wrapper input[type="radio"]:focus + label { - z-index: 1; -} -.radio-wrapper input[type="radio"] + label:hover { - background-color: var(--purple-100); - border-color: var(--purple-500); -} -.radio-wrapper input[type="radio"]:checked + label { - color: #fff; - background-color: var(--purple-600); - border-color: var(--purple-600); -} - -input[type="button"], input[type="submit"], button, a.button { - display: inline-block; - min-height: 36px; - margin: 8px 0; - padding: 4px 8px; - font-family: sans-serif; - font-size: 0.9rem; - text-decoration: none; - text-transform: uppercase; - color: var(--button-text-color); - background-color: var(--button-background-color); - border: solid 2px var(--button-border-color); - border-radius: 4px; - cursor: pointer; -} -input[type="button"]:focus, input[type="submit"]:focus, button:focus, a.button:focus { - background-color: var(--input-focus-background-color); -} -input[type="button"]:hover, input[type="submit"]:hover, button:hover, a.button:hover { - background-color: var(--button-hover-background-color); - border-color: var(--button-hover-border-color); - color: var(--button-hover-text-color); -} -a.button i { - font-size: 1.4em; -} -a.button--donate { - display: inline-flex; - align-items: center; - gap: 8px; - margin-right: 12px; - padding: 8px 16px; - font-size: 0.95rem; - border: 0; -} -a.button--donate svg { - width: 24px; - height: 24px; - fill: var(--text-color); -} -a.button--donate.button--opencollective { - color: #fff; - background-color: #0c2d66; -} -a.button--donate.button--opencollective svg { - fill: #fff; -} -a.button--donate.button--opencollective:hover { - color: #fff; - background-color: #144aa9; -} -a.button--donate.button--liberapay { - color: #333; - background-color: #ffee16; -} -a.button--donate.button--liberapay svg { - fill: #333; -} -a.button--donate.button--liberapay:hover { - color: #333; - background-color: #fff463; -} -a.button--donate.button--kofi { - color: #333; - background-color: #1ac0ff; -} -a.button--donate.button--kofi svg { - fill: #333; -} -a.button--donate.button--kofi:hover { - color: #333; - background-color: #66d4ff; -} -button.inline { - min-height: auto; - margin: 0; - padding: 2px 8px; -} - -/* DIALOGS */ -dialog { - width: 100% !important; - max-width: 800px !important; - padding: 0 !important; - word-wrap: anywhere; -} -dialog > div { - padding: 1em; -} -dialog form[method="Dialog"] { - margin: 1em 0 0 !important; -} -dialog form[method="Dialog"] input { - width: auto; -} -dialog p { - font-size: 1rem !important; - margin: 1rem 0; -} -dialog p:first-of-type { - margin-top: 0; -} diff --git a/static-src/styles.scss b/static-src/styles.scss new file mode 100644 index 0000000..c09b638 --- /dev/null +++ b/static-src/styles.scss @@ -0,0 +1,100 @@ +/* +Copyright (C) 2021 Yarmo Mackenbach + +This program 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. + +This program 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 . + +Also add information on how to contact you by electronic and paper mail. + +If your software can interact with users remotely through a computer network, +you should also make sure that it provides a way for users to get its source. +For example, if your program is a web application, its interface could display +a "Source" link that leads users to an archive of the code. There are many +ways you could offer source, and different solutions will be better for different +programs; see section 13 for the specific requirements. + +You should also get your employer (if you work as a programmer) or school, +if any, to sign a "copyright disclaimer" for the program, if necessary. For +more information on this, and how to apply and follow the GNU AGPL, see . +*/ +@use './styles/vars.scss'; +@use './styles/layout.scss'; +@use './styles/typography.scss'; +@use './styles/forms.scss'; + +@import '../node_modules/fork-awesome/css/fork-awesome.css'; +@import '../node_modules/dialog-polyfill/dist/dialog-polyfill.css'; + +* { + box-sizing: border-box; +} + +/* HELPERS */ +.spacer { + flex: 1; +} + +.no-margin { + margin: 0 !important; +} + +.full-width { + display: block; + width: 100% !important; +} + +.half-width { + display: block; + width: 50% !important; +} + +.select-all { + user-select: all; +} + +#qr { + display: block; + width: 100% !important; + max-width: 256px !important; + height: auto !important; + margin: 0 auto 16px; +} + +/* DIALOGS */ +dialog { + width: 100% !important; + max-width: 800px !important; + padding: 0 !important; + word-wrap: anywhere; +} + +dialog>div { + padding: 1em; +} + +dialog form[method="Dialog"] { + margin: 1em 0 0 !important; +} + +dialog form[method="Dialog"] input { + width: auto; +} + +dialog p { + font-size: 1rem !important; + margin: 1rem 0; +} + +dialog p:first-of-type { + margin-top: 0; +} \ No newline at end of file diff --git a/static-src/styles/forms.scss b/static-src/styles/forms.scss new file mode 100644 index 0000000..b083e38 --- /dev/null +++ b/static-src/styles/forms.scss @@ -0,0 +1,152 @@ +/* +Copyright (C) 2023 Yarmo Mackenbach + +This program 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. + +This program 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 . + +Also add information on how to contact you by electronic and paper mail. + +If your software can interact with users remotely through a computer network, +you should also make sure that it provides a way for users to get its source. +For example, if your program is a web application, its interface could display +a "Source" link that leads users to an archive of the code. There are many +ways you could offer source, and different solutions will be better for different +programs; see section 13 for the specific requirements. + +You should also get your employer (if you work as a programmer) or school, +if any, to sign a "copyright disclaimer" for the program, if necessary. For +more information on this, and how to apply and follow the GNU AGPL, see . +*/ +.form-wrapper { + align-items: center; + padding-top: 1.4rem; + padding-bottom: 1.6rem; + margin-bottom: 48px; +} + +.form-wrapper *:last-child { + margin-bottom: 0; +} + +.form-wrapper form { + display: flex; + flex-direction: column; + margin: 0; +} + +.form-wrapper h2 { + margin-top: 0; +} + +form input[type="text"], +form input[type="search"] { + margin: 8px 0; + padding: 4px; + border: 1px solid var(--input-border-color); + border-radius: 3px; + font-size: 0.9rem; +} + +form textarea { + width: 100%; + height: 128px; + margin: 8px 0; + resize: vertical; + font-size: 0.9rem; + border: 1px solid var(--input-border-color); +} + +.button-wrapper { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin: 8px 0; +} + +input { + color: var(--input-text-color); + background-color: var(--input-background-color); + border: solid 1px var(--input-border-color); + border-radius: 4px; + + &:hover { + background-color: var(--input-background-color-hover); + border-color: var(--input-border-color-hover); + color: var(--input-text-color-hover); + } +} + +input[type="button"], +input[type="submit"], +button, +a.button { + display: inline-block; + margin: 8px 0; + padding: 4px 8px; + font-family: sans-serif; + font-size: 0.9rem; + text-decoration: none; + color: var(--button-text-color); + background-color: var(--button-background-color); + border: solid 1px var(--button-border-color); + border-radius: 4px; + cursor: pointer; + + &:hover { + background-color: var(--button-background-color-hover); + border-color: var(--button-border-color-hover); + color: var(--button-text-color-hover); + } +} + +button.inline { + min-height: auto; + margin: 0; + padding: 2px 8px; +} + + +#search { + display: flex; + align-items: center; + justify-content: center; + min-height: 50vh; + background: transparent; + border: 0; + + form { + display: flex; + flex-direction: row; + width: 100%; + max-width: 30em; + + input { + font-size: 1rem; + } + + input[type="search"] { + flex: 1; + min-width: 0; + margin: 0; + padding: 8px; + border-radius: 8px 0 0 8px; + } + + input[type="submit"] { + margin: 0; + padding: 8px 16px; + border-left: 0; + border-radius: 0 8px 8px 0; + } + } +} \ No newline at end of file diff --git a/static-src/styles/layout.scss b/static-src/styles/layout.scss new file mode 100644 index 0000000..95e3715 --- /dev/null +++ b/static-src/styles/layout.scss @@ -0,0 +1,193 @@ +/* +Copyright (C) 2023 Yarmo Mackenbach + +This program 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. + +This program 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 . + +Also add information on how to contact you by electronic and paper mail. + +If your software can interact with users remotely through a computer network, +you should also make sure that it provides a way for users to get its source. +For example, if your program is a web application, its interface could display +a "Source" link that leads users to an archive of the code. There are many +ways you could offer source, and different solutions will be better for different +programs; see section 13 for the specific requirements. + +You should also get your employer (if you work as a programmer) or school, +if any, to sign a "copyright disclaimer" for the program, if necessary. For +more information on this, and how to apply and follow the GNU AGPL, see . +*/ +body { + display: flex; + flex-direction: column; + min-height: 100vh; + margin: 0 8px; + padding: 1.6rem 0 0; + line-height: 1.4rem; + font-family: sans-serif; + color: var(--text-color); + background-color: var(--body-background-color); +} + +header { + margin: 0 0 3rem; + + nav { + flex: 1; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 16px; + + @media screen and (max-width: 400px) { + flex-direction: column; + align-items: start; + } + + a.logo { + flex: 1; + display: flex; + align-items: center; + gap: 16px; + font-size: 1.8rem; + text-decoration: none; + font-weight: bold; + color: var(--primary-color); + + @media screen and (max-width: 480px) { + gap: 8px; + font-size: 1.4rem; + } + + img { + width: 40px; + height: 40px; + + @media screen and (max-width: 480px) { + width: 32px; + height: 32px; + } + } + } + + a.text { + margin: 0; + color: var(--text-color); + + &:hover, &:active { + color: var(--link-color-hover); + } + } + + .links { + display: flex; + gap: 12px; + } + } +} +main { + flex: 1; +} +footer { + margin: 4.8rem 0 0; + background-color: var(--footer-background-color); + color: var(--footer-text-color); + + a { + display: inline-block; + color: var(--footer-text-color); + } +} + +.container { + width: 100%; + max-width: 920px; + margin: 0 auto; +} + +section { + margin: 0 0 32px; + padding: 16px; + background-color: var(--section-background-color); + border-radius: 8px; + + h1:first-child, h2:first-child { + margin-top: 0; + } + + p:last-child { + margin-bottom: 0; + } + + &.transparent { + padding-left: 0; + padding-right: 0; + background-color: transparent; + border: 0; + } +} + +.profile { + display: flex; + gap: 16px; + padding-top: 24px; + + @media screen and (max-width: 600px) { + flex-direction: column; + padding-top: 32px; + } + + .profile__name { + font-size: 1.6rem; + color: var(--text-color); + } + + .profile__header { + flex: 3; + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: center; + gap: 16px; + + & p, & small { + margin: 0; + } + } + + .profile__claims { + flex: 4; + } + + .profile__avatar { + display: inline-block; + min-width: 96px; + max-width: 128px; + line-height: 0; + text-align: center; + border-radius: 16px; + } + + .persona__description { + display: block; + margin: 8px 0 8px; + font-size: 0.9em; + + svg { + width: 16px; + height: 16px; + vertical-align: sub; + } + } +} \ No newline at end of file diff --git a/static-src/styles/typography.scss b/static-src/styles/typography.scss new file mode 100644 index 0000000..e300cfe --- /dev/null +++ b/static-src/styles/typography.scss @@ -0,0 +1,146 @@ +/* +Copyright (C) 2023 Yarmo Mackenbach + +This program 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. + +This program 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 . + +Also add information on how to contact you by electronic and paper mail. + +If your software can interact with users remotely through a computer network, +you should also make sure that it provides a way for users to get its source. +For example, if your program is a web application, its interface could display +a "Source" link that leads users to an archive of the code. There are many +ways you could offer source, and different solutions will be better for different +programs; see section 13 for the specific requirements. + +You should also get your employer (if you work as a programmer) or school, +if any, to sign a "copyright disclaimer" for the program, if necessary. For +more information on this, and how to apply and follow the GNU AGPL, see . +*/ +h1 { + font-size: 1.6em; + margin: 3.2rem 0 1.6rem; + font-weight: normal; + color: var(--h1-color); + cursor: default; +} +h2 { + margin: 2em 0 0.5em; + font-size: 1.2em; + font-weight: bold; + color: var(--h2-color); + cursor: default; + + small { + margin-left: 0.8rem; + padding: 3px 6px; + background-color: var(--h2-small-color); + color: #fff; + border-radius: 4px; + font-size: 0.8em; + } +} +h3 { + margin: 1em 0 0.5em; + font-size: 1.1em; + line-height: 1.6rem; + color: var(--h3-color); + font-weight: normal; + cursor: default; + + small { + margin-left: 0.8rem; + padding: 3px 6px; + background-color: var(--h3-small-color); + color: #fff; + border-radius: 4px; + } +} +h4 { + margin: 1.6rem 0; + font-size: 1em; + line-height: 1.6rem; + color: var(--h4-color); + font-weight: bold; + cursor: default; + + small { + margin-left: 0.8rem; + padding: 3px 6px; + background-color: var(--h4-small-color); + color: #fff; + border-radius: 4px; + } +} +a { + color: var(--link-color); + + &:hover { + color: var(--link-color-hover); + } +} +a.button i { + font-size: 1.4em; +} +a.button.button--donate { + display: inline-flex; + align-items: center; + gap: 8px; + margin-right: 12px; + padding: 8px 16px; + font-size: 0.95rem; + border: 0; +} +a.button.button--donate svg { + width: 24px; + height: 24px; + fill: var(--text-color); +} +a.button.button--donate.button--opencollective { + color: #fff; + background-color: #0c2d66; +} +a.button.button--donate.button--opencollective svg { + fill: #fff; +} +a.button.button--donate.button--opencollective:hover { + color: #fff; + background-color: #144aa9; +} +a.button.button--donate.button--liberapay { + color: #333; + background-color: #ffee16; +} +a.button.button--donate.button--liberapay svg { + fill: #333; +} +a.button.button--donate.button--liberapay:hover { + color: #333; + background-color: #fff463; +} +a.button.button--donate.button--kofi { + color: #333; + background-color: #1ac0ff; +} +a.button.button--donate.button--kofi svg { + fill: #333; +} +a.button.button--donate.button--kofi:hover { + color: #333; + background-color: #66d4ff; +} + +ul { + padding-left: 1em; + list-style: '- '; +} \ No newline at end of file diff --git a/static-src/styles/vars.scss b/static-src/styles/vars.scss new file mode 100644 index 0000000..6d282d2 --- /dev/null +++ b/static-src/styles/vars.scss @@ -0,0 +1,158 @@ +/* +Copyright (C) 2023 Yarmo Mackenbach + +This program 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. + +This program 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 . + +Also add information on how to contact you by electronic and paper mail. + +If your software can interact with users remotely through a computer network, +you should also make sure that it provides a way for users to get its source. +For example, if your program is a web application, its interface could display +a "Source" link that leads users to an archive of the code. There are many +ways you could offer source, and different solutions will be better for different +programs; see section 13 for the specific requirements. + +You should also get your employer (if you work as a programmer) or school, +if any, to sign a "copyright disclaimer" for the program, if necessary. For +more information on this, and how to apply and follow the GNU AGPL, see . +*/ +:root { + --white: hsl(0, 0%, 100%); + --black: hsl(0, 0%, 0%); + --grey-10: hsl(0, 0%, 99%); + --grey-50: hsl(0, 0%, 95%); + --grey-100: hsl(0, 0%, 90%); + --grey-200: hsl(0, 0%, 80%); + --grey-300: hsl(0, 0%, 70%); + --grey-400: hsl(0, 0%, 60%); + --grey-500: hsl(0, 0%, 50%); + --grey-600: hsl(0, 0%, 40%); + --grey-700: hsl(0, 0%, 30%); + --grey-800: hsl(0, 0%, 20%); + --grey-900: hsl(0, 0%, 10%); + --grey-950: hsl(0, 0%, 7%); + --green-300: hsl(110, 45%, 70%); + --green-400: hsl(110, 45%, 60%); + --green-600: hsl(110, 45%, 40%); + --red-300: hsl(10, 60%, 70%); + --red-400: hsl(10, 60%, 60%); + --blue-500: rgb(67, 176, 234); + --blue-700: hsl(201, 90%, 30%); + --purple-50: rgb(249, 248, 251); + --purple-100: rgb(238, 236, 248); + --purple-200: hsl(250, 48%, 90%); + --purple-300: hsl(250, 48%, 80%); + --purple-400: hsl(250, 48%, 70%); + --purple-500: hsl(250, 48%, 65%); + --purple-600: hsl(250, 48%, 60%); + --purple-700: hsl(250, 48%, 55%); + --purple-900: hsl(250, 38%, 45%); + --yellow-100: hsl(56, 100%, 95%); + --yellow-200: hsl(56, 100%, 90%); + --yellow-500: hsl(56, 100%, 65%); +} + +:root { + --primary-color: var(--purple-700); + --primary-color-subtle: var(--purple-400); + + --body-background-color: #fafafa; + --section-background-color: var(--white); + + --text-color: var(--grey-800); + --text-color-subtle: var(--grey-500); + --h1-color: var(--text-color); + --h2-color: var(--text-color); + --h2-small-color: var(--primary-color-subtle); + --h3-color: var(--text-color-subtle); + --h3-small-color: var(--primary-color-subtle); + --h4-color: var(--text-color-subtle); + --h4-small-color: var(--primary-color-subtle); + + --link-color: var(--blue-700); + --link-color-subtle: var(--text-color); + --link-color-hover: var(--purple-700); + + --button-text-color: var(--text-color); + --button-text-color-hover: var(--text-color); + --button-border-color: var(--grey-300); + --button-border-color-hover: var(--grey-300); + --button-background-color: var(--grey-100); + --button-background-color-hover: var(--grey-200); + + --input-text-color: var(--text-color); + --input-text-color-hover: var(--text-color); + --input-border-color: var(--grey-300); + --input-border-color-hover: var(--grey-300); + --input-background-color: var(--white); + --input-background-color-hover: var(--white); + + --footer-text-color: var(--text-color-subtle); + + @media (prefers-color-scheme: dark) { + --primary-color: var(--purple-300); + --primary-color-subtle: var(--purple-500); + + --body-background-color: #0a0a0a; + --section-background-color: var(--grey-900); + + --text-color: var(--grey-50); + --text-color-subtle: var(--grey-300); + --h1-color: var(--text-color); + --h2-color: var(--text-color); + --h2-small-color: var(--primary-color-subtle); + --h3-color: var(--text-color-subtle); + --h3-small-color: var(--primary-color-subtle); + --h4-color: var(--text-color-subtle); + --h4-small-color: var(--primary-color-subtle); + + --link-color: var(--blue-500); + --link-color-subtle: var(--text-color); + --link-color-hover: var(--primary-color); + + --button-text-color: var(--text-color); + --button-text-color-hover: var(--text-color); + --button-border-color: var(--grey-700); + --button-border-color-hover: var(--grey-700); + --button-background-color: var(--grey-700); + --button-background-color-hover: var(--grey-600); + + --input-text-color: var(--text-color); + --input-text-color-hover: var(--text-color); + --input-border-color: var(--grey-700); + --input-border-color-hover: var(--grey-700); + --input-background-color: var(--grey-800); + --input-background-color-hover: var(--grey-800); + + --footer-text-color: var(--text-color-subtle); + } +} + +kx-claim, kx-key { + --loader-color: var(--grey-400); + --success-color: var(--green-600); + --failure-color: var(--red-400); + + --background-color: var(--grey-10); + --header-background-color: var(--grey-50); + + @media (prefers-color-scheme: dark) { + --loader-color: var(--grey-400); + --success-color: var(--green-400); + --failure-color: var(--red-300); + + --background-color: var(--grey-800); + --header-background-color: var(--grey-700); + } +} \ No newline at end of file