This repository has been archived on 2024-05-13. You can view files and clone it, but cannot push or open issues or pull requests.
share2fedi/lib/scss/style.scss
2023-09-02 21:56:40 +02:00

135 lines
2.7 KiB
SCSS

/*!
* @source: https://github.com/kytta/share2fedi/blob/main/lib/scss/style.scss
*
* share2fedi - Instance-agnostic share page for the Fediverse.
* Copyright (C) 2020-2023 Nikita Karamov <me@kytta.dev>
*
* 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 <https://www.gnu.org/licenses/>.
*
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--s2f-accent-color: #40665c;
--s2f-accent-color-light: #5d8379;
--s2f-accent-color-contrast: #005e4e;
--s2f-border-color: #ccc;
--s2f-input-bg-color: #fff;
--s2f-input-text-color: #000;
--s2f-button-text-color: #fff;
color-scheme: light dark;
accent-color: var(--s2f-accent-color);
font-family: "Helvetica Neue", Helvetica, FreeSans, "Nimbus Sans L", Inter,
Arial, system-ui, sans-serif;
font-size: 16px;
}
html {
line-height: 1.5;
}
body {
max-width: 40em;
margin: 0 auto;
padding: 0 1rem;
}
header {
padding: 1rem 0 1.5rem;
text-align: center;
}
footer {
margin-top: 2rem;
border-top: 1px solid var(--s2f-border-color);
padding: 1rem 0;
display: flex;
flex-flow: row wrap;
flex-direction: row;
align-items: baseline;
justify-content: center;
gap: 2rem;
}
a {
color: var(--s2f-accent-color-contrast);
}
b,
strong {
font-weight: bolder;
}
label {
display: block;
margin-bottom: 1rem;
}
input,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
padding: 0.5rem;
border-radius: 4px;
}
textarea {
resize: vertical;
}
input[type="url"],
textarea {
width: 100%;
color: var(--s2f-input-text-color);
background-color: var(--s2f-input-bg-color);
border: 1px solid var(--s2f-border-color);
}
input[type="checkbox"],
input[type="radio"] {
vertical-align: middle;
}
input[type="submit"] {
background-color: var(--s2f-accent-color);
color: var(--s2f-button-text-color);
font-weight: bolder;
height: 2.5rem;
padding: 0.5rem 2rem;
border: 0;
cursor: pointer;
appearance: button;
&:hover {
background-color: var(--s2f-accent-color-light);
}
}
@media (prefers-color-scheme: dark) {
:root {
--s2f-accent-color: #43776a;
--s2f-accent-color-light: #619587;
--s2f-accent-color-contrast: #a8f7e2;
--s2f-border-color: #333;
}
}