gotosocial/web/source/css/themes/default.css

/*
	GoToSocial
	Copyright (C) GoToSocial Authors admin@gotosocial.org
	SPDX-License-Identifier: AGPL-3.0-or-later

	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 <http://www.gnu.org/licenses/>.
*/

/*
   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) */

$blue0: #00336B; /* darkest blue, can be used for links in error alerts, on $error2 (6.00) */
$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) */
$blue4: #b3ddff; /* used as background for info alerts */

$red1: #860000; /* Error border/foreground text, can be used with $error2 (5.0), $white1 (10), $white2 (5.1) */
$red2: #dd2c2c; /* Error button background text, can be used with $white1 (4.51) */
$red3: #ff9796; /* Error background text, can be used with $error1 (5.0), $gray1 (6.6), $gray2 (5.3), $gray3 (4.8) */

$green1: #94E749; /* Green for positive/confirmation, similar contrast (luminance) as $blue2 */

$boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15);
$boxshadow-border: 0.08rem solid $gray1;

/* Color variables as used in a specific location */

/* Base */
$fg: $white1;
$bg: $gray1;

$bg-accent: $gray5;
$fg-accent: $blue3;
$fg-reduced: $white2;
$border-accent: $orange2;

$link-fg: $fg-accent;

/* Profile */
$profile-bg: $gray4;
$avatar-border: $orange2;

$role-admin: $orange2;
$role-mod: $blue2;

/* Status */
$status-bg: $gray3;
$status-info-bg: $gray2;

$status-focus-bg: $gray5;
$status-focus-info-bg: $gray4;

$no-img-desc-bg: $orange1;
$no-img-desc-fg: $gray1;

$bg-sensitive: $gray1;

/* Form inputs */
$input-bg: $gray4;
$input-disabled-bg: $gray2;
$input-border: $blue1;
$input-error-border: $error3;
$input-focus-border: $blue3;

$settings-nav-bg: $bg;
$settings-nav-header-fg: $orange2;

$settings-nav-bg-hover: $gray3;
$settings-nav-fg-hover: $fg;

$settings-nav-bg-active: $blue3;
$settings-nav-border-active: $info-bg;
$settings-nav-fg-active: $gray2;

/* Buttons */
$button-bg: $blue2;
$button-fg: $gray1;
$button-hover-bg: $blue3;

$button-danger-bg: $error3;
$button-danger-fg: $white1;
$button-danger-hover-bg: $error2;

/* Alerts */
$info-fg: $gray1;
$info-bg: $blue4;
$info-link: $blue0;

$error-fg: $red1;
$error-bg: $red3;
$error-link: $blue0;

$list-entry-bg: $gray2;
$list-entry-alternate-bg: $gray3;
$list-entry-hover-bg: $gray4;

/* Plyr video player */
$plyr-color-main: $orange2;
$plyr-video-background: $bg-accent;
$plyr-badge-background: $bg-accent;
$plyr-video-controls-background: $bg-accent;
$plyr-badge-text-color: $fg;
$plyr-badge-border-radius: $br;
$plyr-video-progress-buffered-background: $gray8;