/* 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-background-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--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--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.button--liberapay { padding: 8px 16px; font-size: 0.95rem; color: #333; background-color: #ffee16; border: 0; } a.button.button--liberapay:hover { background-color: #fff463; } 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; }