main.scss

@use 'start' as *;
/* ### ClearVision v#{$version} by the ClearVision team ### */

// SELECTORS
@use 'backend' as *;

// IMPORT THEME FILES
@use 'src' as *;

// DEFAULT SETTINGS
:root {
  --main-color: #2780e6;
  --hover-color: #1e63b3;
  --success-color: #43b581;
  --danger-color: #982929;
  --channel-unread: var(--main-color);
  --channel-color: rgba(255, 255, 255, 0.3);
  --muted-color: rgba(255, 255, 255, 0.1);
  --server-unread: var(--main-color);
  --channel-text-selected: #fff;
  --focus-primary: var(--main-color);
  --url-color: var(--main-color);
  --online-color: #43b581;
  --idle-color: #faa61a;
  --dnd-color: #982929;
  --offline-color: #808080;
  --streaming-color: #593695;
  --main-font: gg sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  --code-font: Consolas, Liberation Mono, Menlo, Courier, monospace;
  --font-display: var(--main-font);
  --text-normal: rgb(220, 221, 222);
  --text-muted: rgb(114, 118, 125);
  --channels-width: 220px;
  --members-width: 240px;
  --background-shading: 100%;
  --background-overlay: rgba(0, 0, 0, 0.6);
  --background-image: url(https://clearvision.github.io/images/sapphire.jpg);
  --background-position: center;
  --background-size: cover;
  --background-repeat: no-repeat;
  --background-attachment: fixed;
  --background-brightness: 100%;
  --background-contrast: 100%;
  --background-saturation: 100%;
  --background-invert: 0%;
  --background-grayscale: 0%;
  --background-sepia: 0%;
  --background-blur: 0px;
  --backdrop-overlay: rgba(0, 0, 0, 0.8);
  --backdrop-image: var(--background-image);
  --backdrop-position: var(--background-position);
  --backdrop-size: var(--background-size);
  --backdrop-repeat: var(--background-repeat);
  --backdrop-attachment: var(--background-attachment);
  --backdrop-brightness: var(--background-brightness);
  --backdrop-contrast: var(--background-contrast);
  --backdrop-saturation: var(--background-saturation);
  --backdrop-invert: var(--background-invert);
  --backdrop-grayscale: var(--background-grayscale);
  --backdrop-sepia: var(--background-sepia);
  --backdrop-blur: var(--background-blur);
  --user-popout-image: var(--background-image);
  --user-popout-position: var(--background-position);
  --user-popout-size: var(--background-size);
  --user-popout-repeat: var(--background-repeat);
  --user-popout-attachment: var(--background-attachment);
  --user-popout-brightness: var(--background-brightness);
  --user-popout-contrast: var(--background-contrast);
  --user-popout-saturation: var(--background-saturation);
  --user-popout-invert: var(--background-invert);
  --user-popout-grayscale: var(--background-grayscale);
  --user-popout-sepia: var(--background-sepia);
  --user-popout-blur: calc(var(--background-blur) + 3px);
  --user-popout-overlay: rgba(0, 0, 0, 0.65);
  --user-modal-image: var(--background-image);
  --user-modal-position: var(--background-position);
  --user-modal-size: var(--background-size);
  --user-modal-repeat: var(--background-repeat);
  --user-modal-attachment: var(--background-attachment);
  --user-modal-brightness: var(--background-brightness);
  --user-modal-contrast: var(--background-contrast);
  --user-modal-saturation: var(--background-saturation);
  --user-modal-invert: var(--background-invert);
  --user-modal-grayscale: var(--background-grayscale);
  --user-modal-sepia: var(--background-sepia);
  --user-modal-blur: calc(var(--background-blur) + 3px);
  --home-icon: url(https://clearvision.github.io/icons/discord.svg);
  --home-position: center;
  --home-size: 40px;
  --popout-color: rgba(0, 0, 0, 0.7);
  --modal-color: rgba(0, 0, 0, 0.5);
  --bd-blue: var(--main-color);
  --bd-blue-hover: var(--hover-color);
  --bd-blue-active: var(--hover-color);
  --font-primary: var(--main-font);
  --font-code: var(--code-font);
}