/* GoToSocial Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org 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 . */ /* This stylesheets defines (color) variables to be used by other stylesheets on the page postcss-custom-prop-vars will transpile these to css --variables */ /* Color definitions */ /* Foreground */ $white1: #fafaff; /* default text color, contrast >= 5.0 with all $grays */ $white2: #b3b5c6; /* less important text, can be used with $gray1 (6.8), $gray2 (5.5), $gray3 (4.9), $gray4 (4.5) */ /* Background shades, contrast >= 5.0 with $white1 (#fafaff) */ $gray1: #2a2b2f; $gray2: #35363b; $gray3: #3a3b41; $gray4: #45464e; $gray5: #4d4e56; $gray6: #575861; $gray7: #5d5e67; $gray8: #696a75; $orange1: #fd6a00; /* Used for non-text accent colors, can be used as background: $gray1 for text color (contrast 4.6)*/ $orange2: #ff853e; /* hover/selected accent to $orange1, can be used with $gray1 (5.7), $gray2 (4.6) */ $blue1: #3a9fde; /* darker blue for smaller elements (borders), can only be used with $gray1 (4.7) */ $blue2: #66befe; /* all-round accent color, can be used with $gray1 (6.8), $gray2 (5.5), $gray3 (4.9), $gray4 (4.5) */ $blue3: #89caff; /* hover/selected accent to $blue2, can be used with $gray1 (7.9), $gray2 (6.3), $gray3 (5.6), $gray4 (5.2), $gray5 (4.7) */ $error1: #860000; /* Error border/foreground text, can be used with $error2 (5.0), $white1 (10), $white2 (5.1) */ $error2: #ff9796; /* Error background text, can be used with $error1 (5.0), $gray1 (6.6), $gray2 (5.3), $gray3 (4.8) */ $error3: #dd2c2c; /* Error button background text, can be used with $white1 (4.51) */ $error-link: #01318C; /* Error link text, can be used with $error2 (5.56) */ $green1: #94E749; /* Green for positive/confirmation, similar contrast (luminance) as $blue2 */ $info-fg: $gray1; $info-bg: #b3ddff; $info-link: $error-link; $fg: $white1; $bg: $gray1; $bg-trans: rgba(77, 78, 86, 0.62); $bg-accent: $gray5; $fg-accent: $blue3; $fg-reduced: $white2; $border-accent: $orange2; /* Color variables as used in a specific location */ $link-fg: $fg-accent; $role-moderator: $orange1; $role-admin: $blue2; $button-bg: $blue2; $button-fg: $gray1; $button-hover-bg: $blue3; $button-danger-bg: $error3; $button-danger-fg: $white1; $button-danger-hover-bg: $error2; $toot-focus-bg: $gray5; $toot-unfocus-bg: $gray2; $toot-info-bg: $gray4; $no-img-desc-bg: $orange1; $no-img-desc-fg: $gray1; $bg-sensitive: $gray1; $boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15); $boxshadow-border: 0.08rem solid $gray1; $avatar-border: $orange2; $input-bg: $gray4; $input-disabled-bg: $gray2; $input-border: $blue1; $input-error-border: $error3; $input-focus-border: $blue3; $settings-nav-bg: $bg-accent; $settings-nav-header-fg: $gray1; $settings-nav-header-bg: $orange1; $settings-nav-bg-hover: $gray3; /* $settings-nav-fg-hover: $gray1; */ $settings-nav-bg-active: $gray2; /* $settings-nav-fg-active: $orange2; */ $error-fg: $error1; $error-bg: $error2; $list-entry-bg: $gray2; $list-entry-alternate-bg: $gray3; $list-entry-hover-bg: $gray4;