169 lines
6.3 KiB
CSS
169 lines
6.3 KiB
CSS
|
/**
|
||
|
|
* @name Zelk
|
||
|
|
* @version 1.2.2
|
||
|
|
* @description a smooth theme inspired by zorin
|
||
|
|
* @author schnensch
|
||
|
|
* @authorId 652801938374656013
|
||
|
|
* @source https://github.com/schnensch0/zelk
|
||
|
|
* @invite tMEcBhsNqA
|
||
|
|
*/
|
||
|
|
/* ▀▀█ █▀▀ █ █ █
|
||
|
|
▄▀ █▀▀ █ █▀▄
|
||
|
|
▀▀▀ ▀▀▀ ▀▀▀ ▀ ▀ */
|
||
|
|
/*--------------IMPORTS------------- */
|
||
|
|
@import url(https://schnensch0.github.io/zelk/main.css);
|
||
|
|
@import url(https://discord-custom-covers.github.io/usrbg/dist/usrbg.css);
|
||
|
|
@import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/_res/SettingsIcons.css);
|
||
|
|
/*--------------COLORS---------------*/
|
||
|
|
/*------remove / and * to apply------*/
|
||
|
|
/* @import url(https://raw.githack.com/schnensch0/zelk/main/colors/blue.css); */
|
||
|
|
/* @import url(https://raw.githack.com/schnensch0/zelk/main/colors/green.css); */
|
||
|
|
/* @import url(https://raw.githack.com/schnensch0/zelk/main/colors/gray.css); */
|
||
|
|
/* @import url(https://raw.githack.com/schnensch0/zelk/main/colors/orange.css); */
|
||
|
|
/* @import url(https://raw.githack.com/schnensch0/zelk/main/colors/purple.css); */
|
||
|
|
/* @import url(https://raw.githack.com/schnensch0/zelk/main/colors/red.css); */
|
||
|
|
/* @import url(https://raw.githack.com/schnensch0/zelk/main/colors/discord.css); */
|
||
|
|
/*-------------VARIABLES-------------*/
|
||
|
|
:root {
|
||
|
|
/* set to 'unset' to show */
|
||
|
|
--scrollbars: none;
|
||
|
|
/* user notes */
|
||
|
|
--notes: none;
|
||
|
|
/* direct message box */
|
||
|
|
--message: none;
|
||
|
|
/* set to '4px solid' to show */
|
||
|
|
--embed-color: none;
|
||
|
|
/* set to 'Inter', sans-serif !important to use Inter font*/
|
||
|
|
--font-primary: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
|
|
--font-display: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
|
||
|
|
--border-radius-1: 10px;
|
||
|
|
--border-radius-2: 8px;
|
||
|
|
}
|
||
|
|
/*-----------CUSTOM COLORS-----------*/
|
||
|
|
/*-------------DARK MODE-------------*/
|
||
|
|
/*---------------BASIC---------------*/
|
||
|
|
.theme-dark {
|
||
|
|
--accent-color: #bde6fb;
|
||
|
|
--background-1: #171d20;
|
||
|
|
--background-2: #1e2529;
|
||
|
|
--background-accent: #1e2529;
|
||
|
|
--border-color: #273034;
|
||
|
|
}
|
||
|
|
/*-------------LIGHT MODE------------*/
|
||
|
|
.theme-light {
|
||
|
|
--accent-color: #22c5fd;
|
||
|
|
--background-1: #ffffff;
|
||
|
|
--background-2: #f5f7fa;
|
||
|
|
--background-accent: var(--background-2);
|
||
|
|
--border-color: transparent;
|
||
|
|
}
|
||
|
|
/*-------------ADVANCED--------------*/
|
||
|
|
.theme-dark {
|
||
|
|
/* background */
|
||
|
|
--background-primary: var(--background-1);
|
||
|
|
--background-primary-alt: var(--background-1);
|
||
|
|
--background-secondary: var(--background-1);
|
||
|
|
--background-secondary-alt: var(--background-1);
|
||
|
|
--background-tertiary: var(--background-2);
|
||
|
|
--background-accent-gradient: var(--background-2);
|
||
|
|
--background-floating: var(--background-1);
|
||
|
|
--background-mentioned: #bde6fb10;
|
||
|
|
--background-mentioned-hover: #bde6fb15;
|
||
|
|
/* modifiers */
|
||
|
|
--background-modifier-hover: #262e33;
|
||
|
|
--background-modifier-active: #495a63;
|
||
|
|
--background-modifier-selected: var(--accent-color);
|
||
|
|
--background-modifier-accent: transparent;
|
||
|
|
--background-message-hover: transparent;
|
||
|
|
/* text */
|
||
|
|
--text-normal: var(--accent-color);
|
||
|
|
--text-positive: var(--text-normal);
|
||
|
|
--text-muted: #6d8692;
|
||
|
|
--text-link: #edf8fe;
|
||
|
|
--interactive-selected: var(--background-primary);
|
||
|
|
--interactive-active: var(--text-normal);
|
||
|
|
--interactive-normal: var(--text-normal);
|
||
|
|
--interactive-muted: var(--button-background-active);
|
||
|
|
--channels-default: var(--text-muted);
|
||
|
|
--header-primary: var(--text-normal);
|
||
|
|
--header-secondary: var(--text-muted);
|
||
|
|
/* more */
|
||
|
|
--settings-icon-color: #8eacbc;
|
||
|
|
--control-brand-foreground: var(--accent-color);
|
||
|
|
--info-warning-foreground: var(--accent-color);
|
||
|
|
--tab-selected: #354249;
|
||
|
|
--switch: #3d4c53;
|
||
|
|
--activity-card-background: var(--background-1);
|
||
|
|
--brand-experiment: var(--accent-color) !important;
|
||
|
|
/* buttons */
|
||
|
|
--button-background: #2a3439;
|
||
|
|
--button-background-hover: #354249;
|
||
|
|
--button-background-active: #4d5f68;
|
||
|
|
--button-accent: var(--accent-color);
|
||
|
|
--button-accent-hover: #d2f3ff;
|
||
|
|
--button-accent-active: #8dd4f8;
|
||
|
|
--button-destructive: #fb7c7c;
|
||
|
|
--button-destructive-hover: #ff929b;
|
||
|
|
--button-destructive-active: #fa4a4a;
|
||
|
|
}
|
||
|
|
.theme-light {
|
||
|
|
/* background */
|
||
|
|
--background-primary: var(--background-1);
|
||
|
|
--background-primary-alt: var(--background-1);
|
||
|
|
--background-secondary: var(--background-1);
|
||
|
|
--background-secondary-alt: var(--background-1);
|
||
|
|
--background-tertiary: var(--background-2);
|
||
|
|
--background-accent-gradient: var(--background-2);
|
||
|
|
--background-floating: var(--background-1);
|
||
|
|
--background-mentioned: #22c5fd10;
|
||
|
|
--background-mentioned-hover: #22c5fd15;
|
||
|
|
/* modifiers */
|
||
|
|
--background-modifier-hover: transparent;
|
||
|
|
--background-modifier-active: #b7c2cc;
|
||
|
|
--background-modifier-selected: var(--accent-color);
|
||
|
|
--background-modifier-accent: transparent;
|
||
|
|
--background-message-hover: transparent;
|
||
|
|
/* text */
|
||
|
|
--text-normal: #123354;
|
||
|
|
--text-positive: var(--text-normal);
|
||
|
|
--text-muted: #8495a7;
|
||
|
|
--text-link: #15a6f0;
|
||
|
|
--interactive-selected: var(--background-primary);
|
||
|
|
--interactive-active: var(--text-normal);
|
||
|
|
--interactive-normal: var(--text-normal);
|
||
|
|
--interactive-muted: var(--text-muted);
|
||
|
|
--channels-default: var(--text-normal);
|
||
|
|
--header-primary: var(--text-normal);
|
||
|
|
--header-secondary: var(--text-muted);
|
||
|
|
/* more */
|
||
|
|
--settings-icon-color: #566e86;
|
||
|
|
--control-brand-foreground: var(--accent-color);
|
||
|
|
--info-warning-foreground: var(--accent-color);
|
||
|
|
--tab-selected: var(--background-1);
|
||
|
|
--switch: #c8d0d9;
|
||
|
|
--activity-card-background: var(--background-1);
|
||
|
|
--brand-experiment: var(--accent-color) !important;
|
||
|
|
/* buttons */
|
||
|
|
--button-background: var(--background-1);
|
||
|
|
--button-background-hover: #d3dae1;
|
||
|
|
--button-background-active: #b1bcc8;
|
||
|
|
--button-accent: var(--accent-color);
|
||
|
|
--button-accent-hover: #22c5fd;
|
||
|
|
--button-accent-active: #0d87c5;
|
||
|
|
--button-destructive: #fb7c7c;
|
||
|
|
--button-destructive-hover: #ff929b;
|
||
|
|
--button-destructive-active: #fa4a4a;
|
||
|
|
}
|
||
|
|
/*-----------DON'T CHANGE------------*/
|
||
|
|
:root {
|
||
|
|
--outdated-122: none !important;
|
||
|
|
}
|
||
|
|
/* usrbg | snippet by _david_#0218 */
|
||
|
|
.userPopout-2j1gM4[style*="--user-background"] .banner-1YaD3N, .root-8LYsGj[style*="--user-background"] .banner-1YaD3N {
|
||
|
|
height: 120px;
|
||
|
|
background: var(--background-tertiary) var(--user-background) var(--user-popout-position, center) center / cover !important;
|
||
|
|
}
|
||
|
|
.root-8LYsGj[style*="--user-background"] .banner-1YaD3N {
|
||
|
|
height: 240px;
|
||
|
|
}
|