fix: componentize and multiple fixes
* it's almost 4 am * it is past 4:20 am * quick fixes * attempted dark sidebar, more refactoring * no more oop hell, add fourm icons, speaking border * fix: header, unhoverable tooltip svgs * fix: header, code, premium membership
This commit is contained in:
Ren
8
.github/workflows/gh-pages.yml
vendored
8
.github/workflows/gh-pages.yml
vendored
@@ -16,8 +16,8 @@ jobs:
|
|||||||
- name: Setup Node
|
- name: Setup Node
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: '16'
|
node-version: "16"
|
||||||
cache: 'yarn'
|
cache: "yarn"
|
||||||
|
|
||||||
- run: yarn install
|
- run: yarn install
|
||||||
- run: yarn build
|
- run: yarn build
|
||||||
@@ -27,5 +27,5 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
publish_dir: ./dist/
|
publish_dir: ./dist/
|
||||||
user_name: 'github-actions[bot]'
|
user_name: "github-actions[bot]"
|
||||||
user_email: 'github-actions[bot]@users.noreply.github.com'
|
user_email: "github-actions[bot]@users.noreply.github.com"
|
||||||
|
|||||||
1100
src/_theme.scss
1100
src/_theme.scss
File diff suppressed because it is too large
Load Diff
@@ -8,6 +8,13 @@
|
|||||||
* @invite r6Mdz5dpFc
|
* @invite r6Mdz5dpFc
|
||||||
**/
|
**/
|
||||||
|
|
||||||
@import "colors/_frappe";
|
@use "sass:math";
|
||||||
|
@import "_colors/frappe";
|
||||||
|
|
||||||
@import "_theme";
|
$brand: $blue;
|
||||||
|
|
||||||
|
button[class*="emojiButtonNormal"] > div > div {
|
||||||
|
filter: grayscale(0.77) hue-rotate(185deg) brightness(1.015) opacity(100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@import "theme";
|
||||||
|
|||||||
@@ -8,6 +8,350 @@
|
|||||||
* @invite r6Mdz5dpFc
|
* @invite r6Mdz5dpFc
|
||||||
**/
|
**/
|
||||||
|
|
||||||
@import "colors/_latte";
|
@use "sass:math";
|
||||||
|
@import "_colors/latte";
|
||||||
|
|
||||||
@import "_theme";
|
$brand: $blue;
|
||||||
|
|
||||||
|
button[class*="emojiButtonNormal"] > div > div {
|
||||||
|
filter: grayscale(0.77) hue-rotate(185deg) brightness(0.7) opacity(100%)
|
||||||
|
contrast(2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// for dark sidebars :clueless:
|
||||||
|
:root .theme-dark {
|
||||||
|
@import "_colors/mocha";
|
||||||
|
@import "components/_catppuccin-server";
|
||||||
|
|
||||||
|
// weighted brand colors
|
||||||
|
--brand-experiment: #{$brand};
|
||||||
|
--brand-experiment-100: #{lighten($brand, math.div(90%, 2))};
|
||||||
|
--brand-experiment-130: #{lighten($brand, math.div(85%, 2))};
|
||||||
|
--brand-experiment-160: #{lighten($brand, math.div(80%, 2))};
|
||||||
|
--brand-experiment-200: #{lighten($brand, math.div(75%, 2))};
|
||||||
|
--brand-experiment-230: #{lighten($brand, math.div(70%, 2))};
|
||||||
|
--brand-experiment-260: #{lighten($brand, math.div(65%, 2))};
|
||||||
|
--brand-experiment-300: #{lighten($brand, math.div(60%, 2))};
|
||||||
|
--brand-experiment-330: #{lighten($brand, math.div(50%, 2))};
|
||||||
|
--brand-experiment-360: #{lighten($brand, math.div(40%, 2))};
|
||||||
|
--brand-experiment-400: #{lighten($brand, math.div(30%, 2))};
|
||||||
|
--brand-experiment-430: #{lighten($brand, math.div(20%, 2))};
|
||||||
|
--brand-experiment-460: #{lighten($brand, math.div(10%, 2))};
|
||||||
|
--brand-experiment-500: #{$brand};
|
||||||
|
--brand-experiment-530: #{darken($brand, math.div(10%, 2))};
|
||||||
|
--brand-experiment-560: #{darken($brand, math.div(20%, 2))};
|
||||||
|
--brand-experiment-600: #{darken($brand, math.div(30%, 2))};
|
||||||
|
--brand-experiment-630: #{darken($brand, math.div(40%, 2))};
|
||||||
|
--brand-experiment-660: #{darken($brand, math.div(50%, 2))};
|
||||||
|
--brand-experiment-700: #{darken($brand, math.div(60%, 2))};
|
||||||
|
--brand-experiment-730: #{darken($brand, math.div(65%, 2))};
|
||||||
|
--brand-experiment-760: #{darken($brand, math.div(70%, 2))};
|
||||||
|
--brand-experiment-800: #{darken($brand, math.div(75%, 2))};
|
||||||
|
--brand-experiment-830: #{darken($brand, math.div(80%, 2))};
|
||||||
|
--brand-experiment-860: #{darken($brand, math.div(85%, 2))};
|
||||||
|
--brand-experiment-900: #{darken($brand, math.div(90%, 2))};
|
||||||
|
// similar to other brand colors, except alpha only
|
||||||
|
--brand-experiment-05a: #{adjust-color($brand, $alpha: -0.95)};
|
||||||
|
--brand-experiment-10a: #{adjust-color($brand, $alpha: -0.9)};
|
||||||
|
--brand-experiment-15a: #{adjust-color($brand, $alpha: -0.85)};
|
||||||
|
--brand-experiment-20a: #{adjust-color($brand, $alpha: -0.8)};
|
||||||
|
--brand-experiment-25a: #{adjust-color($brand, $alpha: -0.75)};
|
||||||
|
--brand-experiment-30a: #{adjust-color($brand, $alpha: -0.7)};
|
||||||
|
--brand-experiment-35a: #{adjust-color($brand, $alpha: -0.65)};
|
||||||
|
--brand-experiment-40a: #{adjust-color($brand, $alpha: -0.6)};
|
||||||
|
--brand-experiment-45a: #{adjust-color($brand, $alpha: -0.55)};
|
||||||
|
--brand-experiment-50a: #{adjust-color($brand, $alpha: -0.5)};
|
||||||
|
--brand-experiment-55a: #{adjust-color($brand, $alpha: -0.45)};
|
||||||
|
--brand-experiment-60a: #{adjust-color($brand, $alpha: -0.4)};
|
||||||
|
--brand-experiment-65a: #{adjust-color($brand, $alpha: -0.35)};
|
||||||
|
--brand-experiment-70a: #{adjust-color($brand, $alpha: -0.3)};
|
||||||
|
--brand-experiment-75a: #{adjust-color($brand, $alpha: -0.25)};
|
||||||
|
--brand-experiment-80a: #{adjust-color($brand, $alpha: -0.2)};
|
||||||
|
--brand-experiment-85a: #{adjust-color($brand, $alpha: -0.15)};
|
||||||
|
--brand-experiment-90a: #{adjust-color($brand, $alpha: -0.1)};
|
||||||
|
--brand-experiment-95a: #{adjust-color($brand, $alpha: -0.05)};
|
||||||
|
|
||||||
|
--header-primary: #{$text};
|
||||||
|
--header-secondary: #{$subtext0};
|
||||||
|
|
||||||
|
--text-normal: #{$text};
|
||||||
|
--text-muted: #{$subtext0};
|
||||||
|
--text-link: #{$blue};
|
||||||
|
--text-link-low-saturation: #{$sapphire};
|
||||||
|
--text-positive: #{$green};
|
||||||
|
--text-warning: #{$yellow};
|
||||||
|
--text-danger: #{$red};
|
||||||
|
--text-brand: #{$brand};
|
||||||
|
|
||||||
|
--background-primary: #{$base};
|
||||||
|
--background-secondary: #{$mantle};
|
||||||
|
--background-secondary-alt: #{darken($mantle, 2%)};
|
||||||
|
--background-tertiary: #{$crust};
|
||||||
|
--background-accent: #{$brand};
|
||||||
|
--background-floating: #{darken($crust, 2%)};
|
||||||
|
--background-nested-floating: #{$mantle};
|
||||||
|
--background-mobile-primary: #{$base};
|
||||||
|
--background-mobile-secondary: #{$mantle};
|
||||||
|
|
||||||
|
--chat-background: #{$base};
|
||||||
|
--chat-border: #{$crust};
|
||||||
|
--chat-input-container-background: #{$base};
|
||||||
|
|
||||||
|
--background-modifier-hover: #{adjust-color($text, $alpha: -0.85)};
|
||||||
|
--background-modifier-selected: #{adjust-color($text, $alpha: -0.8)};
|
||||||
|
--background-modifier-accent: #{adjust-color($text, $alpha: -0.74)};
|
||||||
|
--background-modifier-active: #{adjust-color($text, $alpha: -0.83)};
|
||||||
|
|
||||||
|
--info-positive-background: #{adjust-color($green, $alpha: -0.85)};
|
||||||
|
--info-positive-foreground: #{$green};
|
||||||
|
--info-positive-text: #{$text};
|
||||||
|
|
||||||
|
--info-warning-background: #{adjust-color($yellow, $alpha: -0.85)};
|
||||||
|
--info-warning-foreground: #{$yellow};
|
||||||
|
--info-warning-text: #{$text};
|
||||||
|
|
||||||
|
--info-danger-background: #{adjust-color($red, $alpha: -0.85)};
|
||||||
|
--info-danger-foreground: #{$red};
|
||||||
|
--info-danger-text: #{$text};
|
||||||
|
|
||||||
|
--info-help-background: #{adjust-color($sky, $alpha: -0.85)};
|
||||||
|
--info-help-foreground: #{$sky};
|
||||||
|
--info-help-text: #{$text};
|
||||||
|
|
||||||
|
--status-positive-background: #{$green};
|
||||||
|
--status-positive-text: #{$base};
|
||||||
|
|
||||||
|
--status-warning-background: #{$yellow};
|
||||||
|
--status-warning-text: #{$base};
|
||||||
|
|
||||||
|
--status-danger-background: #{$red};
|
||||||
|
--status-danger-text: #{$base};
|
||||||
|
|
||||||
|
--status-danger: #{$red};
|
||||||
|
--status-positive: #{$green};
|
||||||
|
--status-warning: #{$yellow};
|
||||||
|
|
||||||
|
--button-danger-background: #{$red};
|
||||||
|
--button-danger-background-hover: #{darken($red, math.div(10%, 2))};
|
||||||
|
--button-danger-background-active: #{darken($brand, math.div(15%, 2))};
|
||||||
|
--button-danger-background-disabled: #{$red};
|
||||||
|
|
||||||
|
--button-positive-background: #{$green};
|
||||||
|
--button-positive-background-hover: #{darken($green, math.div(10%, 2))};
|
||||||
|
--button-positive-background-active: #{darken($green, math.div(15%, 2))};
|
||||||
|
--button-positive-background-disabled: #{$green};
|
||||||
|
|
||||||
|
--button-secondary-background: #{$surface1};
|
||||||
|
--button-secondary-background-hover: #{darken($surface1, math.div(10%, 2))};
|
||||||
|
--button-secondary-background-active: #{darken($surface1, math.div(10%, 2))};
|
||||||
|
--button-secondary-background-disabled: #{$surface1};
|
||||||
|
|
||||||
|
--button-outline-danger-text: #{$text};
|
||||||
|
--button-outline-danger-border: #{$red};
|
||||||
|
--button-outline-danger-background: transparent;
|
||||||
|
--button-outline-danger-background-hover: #{darken($red, math.div(5%, 2))};
|
||||||
|
--button-outline-danger-text-hover: #{$base};
|
||||||
|
--button-outline-danger-border-hover: #{darken($red, math.div(5%, 2))};
|
||||||
|
--button-outline-danger-background-active: #{darken($red, math.div(10%, 2))};
|
||||||
|
--button-outline-danger-text-active: #{$base};
|
||||||
|
--button-outline-danger-border-active: #{darken($red, math.div(5%, 2))};
|
||||||
|
|
||||||
|
--button-outline-positive-text: #{$text};
|
||||||
|
--button-outline-positive-border: #{$green};
|
||||||
|
--button-outline-positive-background: transparent;
|
||||||
|
--button-outline-positive-background-hover: #{darken($green, math.div(5%, 2))};
|
||||||
|
--button-outline-positive-text-hover: #{$base};
|
||||||
|
--button-outline-positive-border-hover: #{darken($green, math.div(5%, 2))};
|
||||||
|
--button-outline-positive-background-active: #{darken(
|
||||||
|
$green,
|
||||||
|
math.div(10%, 2)
|
||||||
|
)};
|
||||||
|
--button-outline-positive-text-active: #{$base};
|
||||||
|
--button-outline-positive-border-active: #{darken($green, math.div(5%, 2))};
|
||||||
|
|
||||||
|
--button-outline-brand-text: #{$text};
|
||||||
|
--button-outline-brand-border: #{$brand};
|
||||||
|
--button-outline-brand-background: transparent;
|
||||||
|
--button-outline-brand-background-hover: #{darken($brand, math.div(5%, 2))};
|
||||||
|
--button-outline-brand-text-hover: #{$base};
|
||||||
|
--button-outline-brand-border-hover: #{darken($brand, math.div(5%, 2))};
|
||||||
|
--button-outline-brand-background-active: #{darken($brand, math.div(10%, 2))};
|
||||||
|
--button-outline-brand-text-active: #{$base};
|
||||||
|
--button-outline-brand-border-active: #{darken($brand, math.div(5%, 2))};
|
||||||
|
|
||||||
|
--button-outline-primary-text: #{$text};
|
||||||
|
--button-outline-primary-border: #{$surface2};
|
||||||
|
--button-outline-primary-background: transparent;
|
||||||
|
--button-outline-primary-background-hover: #{darken(
|
||||||
|
$surface2,
|
||||||
|
math.div(5%, 2)
|
||||||
|
)};
|
||||||
|
--button-outline-primary-text-hover: #{$base};
|
||||||
|
--button-outline-primary-border-hover: #{darken($surface2, math.div(5%, 2))};
|
||||||
|
--button-outline-primary-background-active: #{darken(
|
||||||
|
$surface2,
|
||||||
|
math.div(10%, 2)
|
||||||
|
)};
|
||||||
|
--button-outline-primary-text-active: #{$base};
|
||||||
|
--button-outline-primary-border-active: #{darken($surface2, math.div(5%, 2))};
|
||||||
|
|
||||||
|
--modal-background: #{$base};
|
||||||
|
--modal-footer-background: #{$crust};
|
||||||
|
|
||||||
|
--scrollbar-thin-thumb: #{$brand};
|
||||||
|
--scrollbar-thin-track: transparent;
|
||||||
|
--scrollbar-auto-thumb: #{$brand};
|
||||||
|
--scrollbar-auto-track: #{$crust};
|
||||||
|
|
||||||
|
--scrollbar-auto-scrollbar-color-thumb: #{$brand};
|
||||||
|
--scrollbar-auto-scrollbar-color-track: #{$crust};
|
||||||
|
|
||||||
|
--input-background: #{$crust};
|
||||||
|
--input-placeholder-text: #{$subtext1};
|
||||||
|
|
||||||
|
--logo-primary: #{$text};
|
||||||
|
|
||||||
|
--control-brand-foreground: #{$brand};
|
||||||
|
--control-brand-foreground-new: #{$brand};
|
||||||
|
|
||||||
|
--background-mentioned: #{adjust-color($yellow, $alpha: -0.9)};
|
||||||
|
--background-mentioned-hover: #{adjust-color($yellow, $alpha: -0.92)};
|
||||||
|
--background-message-hover: #{adjust-color($crust, $alpha: -0.93)};
|
||||||
|
--background-message-automod: #{adjust-color($rosewater, $alpha: -0.95)};
|
||||||
|
--background-message-automod-hover: #{adjust-color($rosewater, $alpha: -0.9)};
|
||||||
|
--background-message-highlight: #{adjust-color($brand, $alpha: -0.9)};
|
||||||
|
--background-message-highlight-hover: #{adjust-color($brand, $alpha: -0.92)};
|
||||||
|
|
||||||
|
--channels-default: #{darken($subtext0, 5%)};
|
||||||
|
--channel-icon: #{darken($subtext0, 5%)};
|
||||||
|
--channel-text-area-placeholder: #{adjust-color($text, $alpha: -0.5)};
|
||||||
|
--channeltextarea-background: #{$mantle};
|
||||||
|
|
||||||
|
--activity-card-background: #{$crust};
|
||||||
|
|
||||||
|
--textbox-markdown-syntax: #{$surface0};
|
||||||
|
|
||||||
|
--spoiler-revealed-background: #{$surface0};
|
||||||
|
--spoiler-hidden-background: #{$surface2};
|
||||||
|
|
||||||
|
--android-navigation-bar-background: #{$crust};
|
||||||
|
--android-ripple: #{adjust-color($crust, $alpha: -0.7)};
|
||||||
|
|
||||||
|
--deprecated-card-bg: #{adjust-color($crust, $alpha: -0.4)};
|
||||||
|
--deprecated-card-editable-bg: #{adjust-color($crust, $alpha: -0.7)};
|
||||||
|
|
||||||
|
--deprecated-store-bg: #{$base};
|
||||||
|
--deprecated-quickswitcher-input-background: #{darken(
|
||||||
|
$surface2,
|
||||||
|
math.div(10%, 2)
|
||||||
|
)};
|
||||||
|
--deprecated-quickswitcher-input-placeholder: #{adjust-color(
|
||||||
|
$crust,
|
||||||
|
$alpha: -0.7
|
||||||
|
)};
|
||||||
|
--deprecated-text-input-bg: #{$crust};
|
||||||
|
--deprecated-text-input-border: #{adjust-color($crust, $alpha: -0.7)};
|
||||||
|
--deprecated-text-input-border-hover: #{darken($crust, math.div(10%, 2))};
|
||||||
|
--deprecated-text-input-border-disabled: #{$mantle};
|
||||||
|
--deprecated-text-input-prefix: #{$subtext0};
|
||||||
|
|
||||||
|
--focus-primary: #{$brand};
|
||||||
|
|
||||||
|
--interactive-normal: #{$text};
|
||||||
|
--interactive-muted: #{adjust-color($text, $alpha: -0.7)};
|
||||||
|
--interactive-hover: #{$text};
|
||||||
|
--interactive-active: #{$text};
|
||||||
|
|
||||||
|
// "spine" svgs before threads
|
||||||
|
svg[class^="spine-"] {
|
||||||
|
color: $surface2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// rainbow threads
|
||||||
|
ul[aria-label$=" threads"] > li:nth-child(1n) {
|
||||||
|
--channels-default: #{mix($red, $text, 30%)};
|
||||||
|
--interactive-hover: #{$red};
|
||||||
|
--interactive-active: #{$red};
|
||||||
|
}
|
||||||
|
|
||||||
|
ul[aria-label$=" threads"] > li:nth-child(2n) {
|
||||||
|
--channels-default: #{mix($peach, $text, 30%)};
|
||||||
|
--interactive-hover: #{$peach};
|
||||||
|
--interactive-active: #{$peach};
|
||||||
|
}
|
||||||
|
|
||||||
|
ul[aria-label$=" threads"] > li:nth-child(3n) {
|
||||||
|
--channels-default: #{mix($yellow, $text, 30%)};
|
||||||
|
--interactive-hover: #{$yellow};
|
||||||
|
--interactive-active: #{$yellow};
|
||||||
|
}
|
||||||
|
|
||||||
|
ul[aria-label$=" threads"] > li:nth-child(4n) {
|
||||||
|
--channels-default: #{mix($green, $text, 30%)};
|
||||||
|
--interactive-hover: #{$green};
|
||||||
|
--interactive-active: #{$green};
|
||||||
|
}
|
||||||
|
|
||||||
|
ul[aria-label$=" threads"] > li:nth-child(5n) {
|
||||||
|
--channels-default: #{mix($blue, $text, 30%)};
|
||||||
|
--interactive-hover: #{$sapphire};
|
||||||
|
--interactive-active: #{$sapphire};
|
||||||
|
}
|
||||||
|
|
||||||
|
ul[aria-label$=" threads"] > li:nth-child(6n) {
|
||||||
|
--channels-default: #{mix($mauve, $text, 30%)};
|
||||||
|
--interactive-hover: #{$mauve};
|
||||||
|
--interactive-active: #{$mauve};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav[class*="guilds-"].theme-dark {
|
||||||
|
@import "_colors/mocha";
|
||||||
|
|
||||||
|
// server icons
|
||||||
|
foreignObject > div[data-list-item-id^="guildsnav_"] {
|
||||||
|
background-color: lighten($base, 2%);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&[class*="selected"] {
|
||||||
|
> div[class^="childWrapper-"] {
|
||||||
|
color: $crust;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// lightens home nav bg
|
||||||
|
div[data-list-item-id="guildsnav___home"] {
|
||||||
|
--background-primary: #{lighten($base, 3%)};
|
||||||
|
}
|
||||||
|
|
||||||
|
// lightens folder wrapper bg
|
||||||
|
span[class^="expandedFolderBackground-"] {
|
||||||
|
background-color: lighten($base, 3%);
|
||||||
|
}
|
||||||
|
div[class^="folder-"][class*="hover-"] {
|
||||||
|
background-color: lighten($base, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// create server/discovery
|
||||||
|
div[data-list-item-id="guildsnav___create-join-button"] svg > path,
|
||||||
|
div[data-list-item-id="guildsnav___guild-discover-button"] svg > path {
|
||||||
|
fill: $green;
|
||||||
|
}
|
||||||
|
|
||||||
|
// server list icons
|
||||||
|
div[class^="upperBadge"] {
|
||||||
|
> div[class^="iconBadge"] {
|
||||||
|
path {
|
||||||
|
color: $base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="participating-"] {
|
||||||
|
background: $green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@import "theme";
|
||||||
|
|||||||
@@ -8,6 +8,13 @@
|
|||||||
* @invite r6Mdz5dpFc
|
* @invite r6Mdz5dpFc
|
||||||
**/
|
**/
|
||||||
|
|
||||||
@import "colors/_macchiato";
|
@use "sass:math";
|
||||||
|
@import "_colors/macchiato";
|
||||||
|
|
||||||
@import "_theme";
|
$brand: $blue;
|
||||||
|
|
||||||
|
button[class*="emojiButtonNormal"] > div > div {
|
||||||
|
filter: grayscale(0.77) hue-rotate(185deg) brightness(1.03) opacity(100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@import "theme";
|
||||||
|
|||||||
@@ -8,6 +8,13 @@
|
|||||||
* @invite r6Mdz5dpFc
|
* @invite r6Mdz5dpFc
|
||||||
**/
|
**/
|
||||||
|
|
||||||
@import "colors/_mocha";
|
@use "sass:math";
|
||||||
|
@import "_colors/mocha";
|
||||||
|
|
||||||
@import "_theme";
|
$brand: $blue;
|
||||||
|
|
||||||
|
button[class*="emojiButtonNormal"] > div > div {
|
||||||
|
filter: grayscale(0.77) hue-rotate(185deg) brightness(1.02) opacity(100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@import "theme";
|
||||||
|
|||||||
63
src/components/_buttons.scss
Normal file
63
src/components/_buttons.scss
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
// filled buttons and badges should have crust text
|
||||||
|
[class*="lookFilled-"] {
|
||||||
|
&[class*="colorBrand-"],
|
||||||
|
&[class*="colorBrandNew-"],
|
||||||
|
&[class*="colorLink-"],
|
||||||
|
&[class*="colorYellow-"],
|
||||||
|
&[class*="colorRed-"],
|
||||||
|
&[class*="colorGreen-"] {
|
||||||
|
color: $crust;
|
||||||
|
|
||||||
|
// darken the nitro button too
|
||||||
|
svg[class^="premiumIcon"] {
|
||||||
|
color: darken($pink, 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ...unless it's primary
|
||||||
|
&[class*="colorPrimary-"] {
|
||||||
|
color: $text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// buttons in calls
|
||||||
|
button {
|
||||||
|
&[class*="white"] {
|
||||||
|
background: $surface0;
|
||||||
|
svg * {
|
||||||
|
fill: $text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[class*="primaryDark"] {
|
||||||
|
background: $base;
|
||||||
|
svg * {
|
||||||
|
fill: $text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[class*="red"] {
|
||||||
|
background: $red;
|
||||||
|
svg * {
|
||||||
|
fill: $base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// lookInverted buttons should have darker brand text
|
||||||
|
[class*="lookInverted-"][class*="colorBrand-"] {
|
||||||
|
color: var(--brand-experiment-600);
|
||||||
|
|
||||||
|
// darken the nitro button too
|
||||||
|
svg[class^="premiumIcon"] {
|
||||||
|
color: darken($pink, 15%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// lookLink + colorPrimary should be themed
|
||||||
|
.theme-dark,
|
||||||
|
.theme-light {
|
||||||
|
[class*="lookLink-"][class*="colorPrimary-"] {
|
||||||
|
color: $text;
|
||||||
|
}
|
||||||
|
}
|
||||||
188
src/components/_chat.scss
Normal file
188
src/components/_chat.scss
Normal file
@@ -0,0 +1,188 @@
|
|||||||
|
main[class^="chatContent"] {
|
||||||
|
// new message ruler
|
||||||
|
#---new-messages-bar {
|
||||||
|
span[class^="unreadPill-"] {
|
||||||
|
color: $crust;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// new message bar
|
||||||
|
div[class^="newMessagesBar-"] {
|
||||||
|
button {
|
||||||
|
color: $crust;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// text input area
|
||||||
|
div[class^="channelTextArea-"] {
|
||||||
|
div[class^="buttons-"] * {
|
||||||
|
color: var(--interactive-normal) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// reactions
|
||||||
|
[id^="message-reactions-"] {
|
||||||
|
div[class^="reaction-"] {
|
||||||
|
background-color: $surface0;
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--brand-experiment-20a);
|
||||||
|
border-color: var(--brand-experiment-30a);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// buttons in chat header
|
||||||
|
div[class^="container-"][class*="header-"] {
|
||||||
|
div[class*="addReactButton-"],
|
||||||
|
div[class^="buttons-"]:not([class*="lookBlank-"]) div[class^="contents"] {
|
||||||
|
background: $surface0;
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--brand-experiment-20a);
|
||||||
|
border-color: var(--brand-experiment-30a);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// code stuff
|
||||||
|
[class*="after_inlineCode-"],
|
||||||
|
[class*="before_inlineCode-"] {
|
||||||
|
color: $overlay0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="inlineCode-"] {
|
||||||
|
background: $surface0;
|
||||||
|
}
|
||||||
|
|
||||||
|
code.inline {
|
||||||
|
background: $surface0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// spoiler messages
|
||||||
|
.theme-dark,
|
||||||
|
.theme-light {
|
||||||
|
span[class^="spoilerText"] {
|
||||||
|
background-color: $surface0;
|
||||||
|
|
||||||
|
&[class*="hidden"] {
|
||||||
|
background-color: $surface2;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: lighten($surface2, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="spoilerContainer-"] {
|
||||||
|
div[class^="spoilerWarning-"] {
|
||||||
|
color: $text;
|
||||||
|
background-color: adjust-color($crust, $alpha: -0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
div[class^="spoilerWarning-"] {
|
||||||
|
color: $text;
|
||||||
|
background-color: $crust;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
article[class*="embedFull-"] {
|
||||||
|
border-color: $surface2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// cooldown text
|
||||||
|
div[class^="cooldownWrapper-"] {
|
||||||
|
color: var(--text-muted) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// autocomplete chat textboxes
|
||||||
|
div[class*="autocomplete-"] {
|
||||||
|
background-color: $mantle !important;
|
||||||
|
|
||||||
|
div[class*="categoryHeader"] {
|
||||||
|
background-color: $mantle !important;
|
||||||
|
}
|
||||||
|
div[class*="autocompleteRowSubheading"] {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
div[class*="autocompleteRowContentSecondary"] {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
div[class^="usageWrapper-"] > div[class*="title-"] {
|
||||||
|
color: $brand !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: $brand !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// emoji button
|
||||||
|
div[class^="channelTextArea-"] button[class*="emojiButton-"] {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// upload???
|
||||||
|
[class*="uploadDropModal-"] div[class^="inner"] {
|
||||||
|
border-color: $crust;
|
||||||
|
|
||||||
|
* {
|
||||||
|
color: $crust !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="chat"] > div[class^="content-"] > div[class^="container-"] {
|
||||||
|
background-color: $base;
|
||||||
|
|
||||||
|
// forum icons
|
||||||
|
div[class^="pinIcon-"] > svg > path,
|
||||||
|
div[class^="stepStatus-"] > svg > path {
|
||||||
|
fill: $crust !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// discord icon
|
||||||
|
svg[class^="discordIcon-"] {
|
||||||
|
background-color: $brand;
|
||||||
|
color: $crust;
|
||||||
|
}
|
||||||
|
|
||||||
|
// new badge
|
||||||
|
div[class^="newBadge-"] {
|
||||||
|
background-color: $lavender !important;
|
||||||
|
color: $crust;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="mainCard-"] {
|
||||||
|
background-color: $surface0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="sidebar-"] > section[class^="panels-"] {
|
||||||
|
svg[class*="buttonIcon-"],
|
||||||
|
div[class*="buttonContents"] {
|
||||||
|
fill: $text;
|
||||||
|
color: $text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-list-id^="forum-channel-list-"] {
|
||||||
|
div[class^="body-"] > div[class^="tags"] div[class*="pill"] {
|
||||||
|
background-color: $mantle;
|
||||||
|
}
|
||||||
|
|
||||||
|
// new post button
|
||||||
|
button[class^="submitButton-"][class*="colorBrand"] {
|
||||||
|
background-color: $brand;
|
||||||
|
color: $crust;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// fix the sidebar on smaller servers
|
||||||
|
div[class^="chat"]
|
||||||
|
> div[class^="content-"]
|
||||||
|
main[class^="chatContent-"]
|
||||||
|
+ div[class^="container-"] {
|
||||||
|
background-color: var(--background-secondary);
|
||||||
|
}
|
||||||
163
src/components/_details.scss
Normal file
163
src/components/_details.scss
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
// online
|
||||||
|
rect[fill^="hsl(139"],
|
||||||
|
foreignObject[mask="url(#svg-mask-status-online)"] > div,
|
||||||
|
div[class^="dotOnline"],
|
||||||
|
i[class^="statusOnline-"] {
|
||||||
|
fill: $green !important;
|
||||||
|
background-color: $green !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// idle
|
||||||
|
rect[fill^="hsl(38"],
|
||||||
|
foreignObject[mask="url(#svg-mask-status-idle)"] > div {
|
||||||
|
fill: $yellow !important;
|
||||||
|
background-color: $yellow !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// dnd
|
||||||
|
rect[fill^="hsl(359"],
|
||||||
|
foreignObject[mask="url(#svg-mask-status-dnd)"] > div {
|
||||||
|
fill: $red !important;
|
||||||
|
background-color: $red !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// offline
|
||||||
|
rect[fill^="hsl(214"],
|
||||||
|
foreignObject[mask="url(#svg-mask-status-offline)"] > div,
|
||||||
|
div[class^="dotOffline"],
|
||||||
|
i[class^="statusOffline-"] {
|
||||||
|
fill: $subtext0 !important;
|
||||||
|
background-color: $subtext0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// dots in typing
|
||||||
|
svg[class^="cursorDefault-"] svg[class^="dots-"] circle {
|
||||||
|
fill: $base !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// inline brand color styles...
|
||||||
|
[style*="background-color: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%)"] {
|
||||||
|
background-color: $brand !important;
|
||||||
|
color: $crust;
|
||||||
|
}
|
||||||
|
|
||||||
|
// for those roles that blend in the background
|
||||||
|
span[class^="username-"][style*="color: rgb(54, 57, 62)"],
|
||||||
|
span[class^="username-"][style*="color: rgb(53, 57, 64)"] {
|
||||||
|
color: var(--background-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// server badges
|
||||||
|
div[class*="flowerStarContainer-"] {
|
||||||
|
&[class*="boostedGuildTierIconBackgroundWithVisibleBanner"] {
|
||||||
|
svg[class*="flowerStar-"] * {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
div[class^="childContainer-"] svg * {
|
||||||
|
fill: $crust;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[class*="iconBackgroundTierOne-"],
|
||||||
|
&[class*="iconBackgroundTierTwo-"]:not([class*="boostedGuildTierIconBackgroundWithVisibleBanner"]) {
|
||||||
|
svg[class*="flowerStar-"] * {
|
||||||
|
fill: $surface2;
|
||||||
|
}
|
||||||
|
div[class^="childContainer-"] svg * {
|
||||||
|
fill: $text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[class*="iconBackgroundTierThree-"] {
|
||||||
|
svg[class*="flowerStar-"] * {
|
||||||
|
fill: $pink;
|
||||||
|
}
|
||||||
|
div[class^="childContainer-"] svg * {
|
||||||
|
fill: $crust;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[class*="verified-"] {
|
||||||
|
svg[class*="flowerStar-"] * {
|
||||||
|
fill: $green;
|
||||||
|
}
|
||||||
|
div[class^="childContainer-"] svg * {
|
||||||
|
fill: $crust;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[class*="partnered-"] {
|
||||||
|
svg[class*="flowerStar-"] * {
|
||||||
|
fill: $brand;
|
||||||
|
}
|
||||||
|
div[class^="childContainer-"] svg * {
|
||||||
|
fill: $crust;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// public / verified server info pill
|
||||||
|
div[class^="communityInfoPill"] {
|
||||||
|
--background-accent: #{adjust-color($base, $alpha: -0.3)};
|
||||||
|
color: $text;
|
||||||
|
|
||||||
|
div[class^="text"] {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// social links on "what's new"
|
||||||
|
a[class*="socialLink-"][href*="discord"] {
|
||||||
|
color: $subtext0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// upload icon
|
||||||
|
svg[class^="uploadIcon"] {
|
||||||
|
color: $crust;
|
||||||
|
}
|
||||||
|
|
||||||
|
// empty states. why is it colored like this
|
||||||
|
.theme-dark,
|
||||||
|
.theme-light {
|
||||||
|
h2[class^="emptyStateHeader-"] {
|
||||||
|
color: $text;
|
||||||
|
}
|
||||||
|
|
||||||
|
p[class^="emptyStateSubtext-"] {
|
||||||
|
color: $subtext0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// anything that uses a color background should have crust text
|
||||||
|
div[class*="unreadMentionsBar-"],
|
||||||
|
div[class*="unreadBar-"] {
|
||||||
|
color: $crust;
|
||||||
|
}
|
||||||
|
|
||||||
|
// make number badges have crust text and bolder
|
||||||
|
div[class^="numberBadge-"] {
|
||||||
|
font-weight: 700;
|
||||||
|
color: $crust;
|
||||||
|
}
|
||||||
|
|
||||||
|
// spotify button on text area
|
||||||
|
button[class^="attachButton-"] {
|
||||||
|
svg path[class^="attachButtonPlay-"] {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// speaking indicator
|
||||||
|
div[class*="avatarSpeaking-"] {
|
||||||
|
-webkit-box-shadow: inset 0 0 0 2px $green,
|
||||||
|
inset 0 0 0 3px var(--background-secondary);
|
||||||
|
box-shadow: inset 0 0 0 2px $green,
|
||||||
|
inset 0 0 0 3px var(--background-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="videoLayer-"]
|
||||||
|
> div[class^="tileChild"]
|
||||||
|
> div[class^="border"][class*="speaking-"] {
|
||||||
|
-webkit-box-shadow: inset 0 0 0 2px $green, inset 0 0 0 3px $green;
|
||||||
|
bow-shadow: inset 0 0 0 2px $green, inset 0 0 0 3px $green;
|
||||||
|
}
|
||||||
50
src/components/_hljs.scss
Normal file
50
src/components/_hljs.scss
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
.hljs-bullet,
|
||||||
|
.hljs-link,
|
||||||
|
.hljs-meta,
|
||||||
|
.hljs-meta.hljs-keyword,
|
||||||
|
.hljs-meta .hljs-keyword,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo,
|
||||||
|
.hljs-subst,
|
||||||
|
.hljs-symbol {
|
||||||
|
color: #{$peach};
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-attr,
|
||||||
|
.hljs-attribute,
|
||||||
|
.hljs-class.hljs-title,
|
||||||
|
.hljs-class .hljs-title,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-type,
|
||||||
|
.hljs-variable {
|
||||||
|
color: #{$yellow};
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-deletion {
|
||||||
|
color: #{$maroon};
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-doctag,
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-meta.hljs-meta-string,
|
||||||
|
.hljs-meta .hljs-meta-string,
|
||||||
|
.hljs-number,
|
||||||
|
.hljs-regexp,
|
||||||
|
.hljs-string {
|
||||||
|
color: #{$teal};
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition,
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-selector-tag {
|
||||||
|
color: #{$green};
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-name,
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-title {
|
||||||
|
color: #{$blue};
|
||||||
|
}
|
||||||
16
src/components/_icons-bgImg.scss
Normal file
16
src/components/_icons-bgImg.scss
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
$bgImg: (
|
||||||
|
"staffBadge": (
|
||||||
|
icon:
|
||||||
|
"data:image/svg+xml,%3Csvg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23#{str-slice(inspect($crust), 2)}'%3E%3Cpath d='m5.92127 6.03526s.22115-.33086.31286-.47743c.09172-.14657-.23743-.49286-.36514-.60257-.12772-.10971-.32914-.05486-.32914-.05486-1.60715.71229-2.41115 2.17372-2.52086 2.466-.10972.29229.27943.61115.56657.76715.132.072.342-.08743.47143-.20572l.04371-.04457.06772-.06857.00085-.00086 4.37229 4.35517.59743-.5975 1.09801-1.098-4.32173-4.43224z'/%3E%3Cpath d='m16.2505 10.6294.2306-.2194 2.0717 2.052c.0146.0129.03.018.0437.018.0395 0 .072-.036.072-.036s2.2937-2.2757 2.3015-2.2834c.0677-.0669 0-.1037 0-.1037l-1.7692-1.78119-.0026.00258-.2425-.23743.1354-.13029.2897.03343-.0548-.384.0728-.07371-.1088-.55372c-.378-.53571-1.4135-1.39371-1.4135-1.39371l-.5417-.09772-.0548.07286-.408-.06086.0394.348.0257.02572-.1209.12171-.6685-.654s-3.8795-2.10686-4.086-2.20457c-.1166-.054-.2023-.09-.2846-.09-.0634 0-.1251.02143-.1963.072-.1646.11571-.0677.34886-.0677.34886l2.412 4.45714.4826.47829-.1509.15085-.0557.05572-.3857-.05315.0591.38229-.1114.11143-.0197-.01972c-.018-.018-.0429-.02742-.0669-.02742s-.048.00942-.0668.02742c-.0369.03686-.0369.09686 0 .13372l.0197.01971-.0532.054-.0137-.01457c-.0188-.018-.0428-.02743-.0668-.02743-.0249 0-.0489.00943-.0669.02743-.0368.03686-.0368.09686 0 .13372l.0146.01457-1.0149 1.02004-.0231-.0232c-.0189-.018-.0429-.0274-.0669-.0274s-.048.0094-.0668.0274c-.0369.0369-.0369.0969 0 .1337l.024.0232-.054.054-.018-.0172c-.018-.0188-.0429-.0283-.066-.0283-.0249 0-.0489.0095-.0677.0283-.036.0369-.036.096 0 .1329l.018.018-.132.1337-.018.1697.0694.0712-.0017.0008-.084.0857-5.47632 5.4755-.07114-.0592-.22714.0326-.12858.1303-.00857-.0086c-.01885-.0189-.04285-.0283-.06685-.0283s-.04886.0094-.06686.0283c-.03686.0369-.03686.096 0 .1329l.01028.0102-.05314.0549-.00514-.0051c-.018-.0189-.04286-.0283-.06686-.0283s-.048.0094-.06686.0283c-.036.0368-.036.096 0 .1328l.006.0069-1.002 1.0191-.02057-.0206c-.01885-.0188-.042-.0274-.06685-.0274-.024 0-.048.0086-.06686.0274-.03686.0369-.03686.0969 0 .1338l.02228.0214-.05314.054-.01628-.0163c-.01886-.018-.04286-.0274-.06772-.0274-.02314 0-.048.0094-.066.0274-.03686.0369-.03686.0969 0 .1337l.01714.018-.07457.0763-.38828-.0694.02914.4337-.12257.1251.10628.5846s.16286.5091.498.8469c.32486.3274.82029.4842.84172.5005l.55971.0977.138-.1354.38572.0626-.06343-.3814.11743-.1149.054.054c.018.018.042.0274.066.0274s.04885-.0094.06685-.0274c.03686-.0377.03686-.0969 0-.1337l-.05314-.0532.05486-.0531.04628.0463c.018.0188.04286.0283.06686.0283s.048-.0095.06686-.0283c.03686-.0369.03686-.096 0-.1329l-.04543-.0463 1.01743-1.0037.04457.0446c.018.0189.04286.0274.06686.0274s.048-.0085.06685-.0274c.036-.0369.036-.0969 0-.1337l-.04371-.0429.054-.054.03771.0377c.018.018.042.0275.066.0275.02486 0 .04886-.0095.06686-.0275.03686-.0368.03686-.0968 0-.1337l-.03686-.0368.114-.1115.04115-.2442-.06086-.0609.00086-.0009.11057-.1097 5.43946-5.4411-.0026-.0052.1063.1098.1706-.0189.1534-.1543.0248.0249c.0189.018.0429.0274.0669.0274s.0489-.0094.0669-.0274c.0368-.0369.0368-.0969 0-.1337l-.0249-.0249.054-.0531.0189.0188c.018.018.042.0274.0668.0274.024 0 .048-.0094.066-.0274.0369-.0368.0369-.0968 0-.1337l-.0188-.0197 1.0165-1.0183.0266.0266c.018.018.042.0274.066.0274.0249 0 .0489-.0094.0669-.0274.0368-.0369.0368-.0969 0-.1337l-.0266-.0266.054-.054.0206.0214c.0188.018.0428.0274.0668.0274s.048-.0094.0669-.0274c.0368-.0377.0368-.0968 0-.1337l-.0206-.0214.1131-.1132.378.0592z'/%3E%3Cpath d='m17.0057 16.7793-2.4111-1.8274-.4294-.4423-1.6637 1.6637.4183.3995 1.5711 2.3562 2.1188 2.3203 2.4421-2.2783z'/%3E%3C/g%3E%3C/svg%3E",
|
||||||
|
),
|
||||||
|
"permissionCheckmark": (
|
||||||
|
icon:
|
||||||
|
"%3Csvg height='18' width='18' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m0 0h18v18h-18z'/%3E%3Cpath d='m14.25 14.25h-10.5v-10.5h7.5v-1.5h-7.5c-.8325 0-1.5.6675-1.5 1.5v10.5c0 .8284271.67157288 1.5 1.5 1.5h10.5c.8284271 0 1.5-.6715729 1.5-1.5v-6h-1.5zm-7.5675-6.94-1.0575 1.065 3.375 3.375 7.5-7.5-1.0575-1.065-6.4425 6.4425z' fill='%23#{str-slice(inspect($green), 2)}'/%3E%3C/g%3E%3C/svg%3E",
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
@each $class, $icon in $bgImg {
|
||||||
|
[class*="#{$class}-"] {
|
||||||
|
background-image: url("#{map-get($icon, icon)}") !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
14
src/components/_icons-svgBg.scss
Normal file
14
src/components/_icons-svgBg.scss
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
$svgBg: (
|
||||||
|
"noItemsIcon": (
|
||||||
|
color: $surface1,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
@each $class, $color in $svgBg {
|
||||||
|
.theme-dark,
|
||||||
|
.theme-light {
|
||||||
|
svg[class*="#{$class}-"] {
|
||||||
|
background-color: #{map-get($color, color)};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
62
src/components/_icons-svgColor.scss
Normal file
62
src/components/_icons-svgColor.scss
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
$svgColor: (
|
||||||
|
"tier1ProfilePerk": (
|
||||||
|
color: $blue,
|
||||||
|
),
|
||||||
|
"tier1BoostPerk": (
|
||||||
|
color: $pink,
|
||||||
|
),
|
||||||
|
"tier1CustomEmojiPerk": (
|
||||||
|
color: $yellow,
|
||||||
|
),
|
||||||
|
"tier1UploadPerk": (
|
||||||
|
color: $lavender,
|
||||||
|
),
|
||||||
|
"tier1StreamPerk": (
|
||||||
|
color: $green,
|
||||||
|
),
|
||||||
|
"guildBoostingIcon": (
|
||||||
|
color: $pink,
|
||||||
|
),
|
||||||
|
"guildSubscriptionSlotIcon": (
|
||||||
|
color: $pink,
|
||||||
|
),
|
||||||
|
"guildSubscriberCountIcon": (
|
||||||
|
color: $pink,
|
||||||
|
),
|
||||||
|
"gemWithLabel": (
|
||||||
|
color: $pink,
|
||||||
|
),
|
||||||
|
"gemWithoutLabel": (
|
||||||
|
color: $overlay1,
|
||||||
|
),
|
||||||
|
"memberBadgeIcon": (
|
||||||
|
color: $pink,
|
||||||
|
),
|
||||||
|
"stickerIcon": (
|
||||||
|
color: $mauve,
|
||||||
|
),
|
||||||
|
"audioQualityIcon": (
|
||||||
|
color: $sapphire,
|
||||||
|
),
|
||||||
|
"uploadSizeIcon": (
|
||||||
|
color: $pink,
|
||||||
|
),
|
||||||
|
"threadIcon": (
|
||||||
|
color: $teal,
|
||||||
|
),
|
||||||
|
"premiumIcon": (
|
||||||
|
color: $pink,
|
||||||
|
),
|
||||||
|
"gameIcon": (
|
||||||
|
color: $text,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
@each $class, $color in $svgColor {
|
||||||
|
.theme-dark,
|
||||||
|
.theme-light {
|
||||||
|
svg[class*="#{$class}-"] {
|
||||||
|
color: #{map-get($color, color)};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
50
src/components/_navbar.scss
Normal file
50
src/components/_navbar.scss
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
nav[class*="guilds-"] {
|
||||||
|
// server icons
|
||||||
|
foreignObject > div[data-list-item-id^="guildsnav_"] {
|
||||||
|
background-color: lighten($base, 2%);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&[class*="selected"] {
|
||||||
|
> div[class^="childWrapper-"] {
|
||||||
|
color: $crust;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// lightens home nav bg
|
||||||
|
div[data-list-item-id="guildsnav___home"] {
|
||||||
|
--background-primary: #{lighten($base, 3%)};
|
||||||
|
}
|
||||||
|
|
||||||
|
// lightens folder wrapper bg
|
||||||
|
span[class^="expandedFolderBackground-"] {
|
||||||
|
background-color: lighten($base, 3%);
|
||||||
|
}
|
||||||
|
div[class^="folder-"][class*="hover-"] {
|
||||||
|
background-color: lighten($base, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// create server/discovery
|
||||||
|
div[data-list-item-id="guildsnav___create-join-button"] svg > path,
|
||||||
|
div[data-list-item-id="guildsnav___guild-discover-button"] svg > path {
|
||||||
|
fill: $green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// server list icons
|
||||||
|
div[class^="upperBadge"] {
|
||||||
|
> div[class^="iconBadge"] {
|
||||||
|
path {
|
||||||
|
color: $base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="participating-"] {
|
||||||
|
background: $green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// div[class^="lowerBadge"] {
|
||||||
|
//
|
||||||
|
// }
|
||||||
396
src/components/_pages.scss
Normal file
396
src/components/_pages.scss
Normal file
@@ -0,0 +1,396 @@
|
|||||||
|
// settings
|
||||||
|
div[class^="sidebarRegion-"] {
|
||||||
|
div[class^="premiumTab-"] {
|
||||||
|
> div > svg > path {
|
||||||
|
fill: $pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div[class*="selected"] {
|
||||||
|
color: $crust;
|
||||||
|
|
||||||
|
svg > path {
|
||||||
|
fill: $crust;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="contentRegion-"] {
|
||||||
|
// #my-account-tab {
|
||||||
|
// div[class^="userSettingsSecurity-"] {
|
||||||
|
// h5::after {
|
||||||
|
// content: " ";
|
||||||
|
// z-index: 10;
|
||||||
|
// margin-right: 4px;
|
||||||
|
// width: 10px;
|
||||||
|
// height: 14px;
|
||||||
|
// top: 2px;
|
||||||
|
// background-image: url("data:image/svg+xml,%3Csvg height='14' viewBox='0 0 10 14' width='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m553 515h-6v-1c0-1.654 1.346-3 3-3s3 1.346 3 3zm-4 6h2v-4h-2zm1-12c-2.762 0-5 2.238-5 5v1 4 2c0 1.104.896 2 2 2h6c1.104 0 2-.896 2-2v-2-4-1c0-2.762-2.238-5-5-5z' fill='%23#{str-slice(inspect($green), 2)}' fill-rule='evenodd' transform='translate(-545 -509)'/%3E%3C/svg%3E");
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
#appearance-tab,
|
||||||
|
#accessibility-tab,
|
||||||
|
[id="voice-&-video-tab"] {
|
||||||
|
[class^="bar-"],
|
||||||
|
[class^="markDash-"] {
|
||||||
|
background: $surface1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[id="privacy-&-safety-tab"] {
|
||||||
|
div[class^="radioBar-"] {
|
||||||
|
&[style*="hsl(139,"] {
|
||||||
|
border-color: $green;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[style*="hsl(37,"] {
|
||||||
|
border-color: $yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[style*="hsl(359,"] {
|
||||||
|
border-color: $red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#nitro-server-boost-tab {
|
||||||
|
circle[class^="circleProgress-"] {
|
||||||
|
color: $pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="gemIndicatorContainer-"] {
|
||||||
|
background-color: $base;
|
||||||
|
|
||||||
|
div[class^="tierLabel-"] {
|
||||||
|
color: $subtext1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#subscriptions-tab {
|
||||||
|
[class^="sectionAccountCredit-"],
|
||||||
|
[class^="subscriptionDetails-"] {
|
||||||
|
border-color: var(--background-modifier-accent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#library-inventory-tab {
|
||||||
|
div[class^="promotionIcon-"] {
|
||||||
|
background-color: $base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#billing-tab {
|
||||||
|
[class*="Divider"] {
|
||||||
|
border-color: var(--background-modifier-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="defaultIndicator-"] {
|
||||||
|
color: $text;
|
||||||
|
background-color: $surface1;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="summaryInfo"],
|
||||||
|
[class^="paymentHeader-"] {
|
||||||
|
color: $text;
|
||||||
|
border-color: var(--background-modifier-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="premiumIndicator-"] {
|
||||||
|
color: $crust;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="paymentPane-"],
|
||||||
|
div[class*="paginator-"],
|
||||||
|
div[class*="payment-"] {
|
||||||
|
background-color: $surface0;
|
||||||
|
color: $text;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="expandedInfo-"] {
|
||||||
|
background-color: $surface1;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="paymentText-"] {
|
||||||
|
color: $subtext1;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="codeRedemptionRedirect-"] {
|
||||||
|
background-color: $mantle;
|
||||||
|
color: $text;
|
||||||
|
border-color: $surface0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[id="voice-&-video-tab"] {
|
||||||
|
div[class^="backgroundOptionRing-"] {
|
||||||
|
border-color: $brand;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#keybinds-tab {
|
||||||
|
div[class^="keybindShortcut-"] > span[class^="key-"] {
|
||||||
|
color: $crust;
|
||||||
|
|
||||||
|
svg > g {
|
||||||
|
fill: $crust;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#game-activity-tab {
|
||||||
|
div[class*="nowPlayingAdd-"],
|
||||||
|
div[class*="lastPlayed-"],
|
||||||
|
div[class*="overlayStatusText-"] {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="activeGame-"][class*="nowPlaying"] * {
|
||||||
|
color: $crust;
|
||||||
|
|
||||||
|
svg > g > path {
|
||||||
|
fill: $crust;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[class^="gameName-"] {
|
||||||
|
color: $text;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[class*="gameNameInput-"] {
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background-color: $mantle;
|
||||||
|
border-color: #{adjust-color($mantle, $alpha: -0.7)};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="game-"] {
|
||||||
|
-webkit-box-shadow: 0 1px 0 0 var(--background-modifier-accent);
|
||||||
|
box-shadow: 0 1px 0 0 var(--background-modifier-accent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Voice & Audio checks
|
||||||
|
section[class^="inputSensitivityToggle-"] {
|
||||||
|
div[class*="speaking-"] {
|
||||||
|
background: $green !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="reactionMe-"] {
|
||||||
|
background-color: $surface0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// toggles in preferencs
|
||||||
|
// checked
|
||||||
|
div[class^="control-"] > div[class*="checked-"],
|
||||||
|
div[class^="sensitivity-"] div[class*="checked-"] {
|
||||||
|
background-color: $green !important;
|
||||||
|
|
||||||
|
// svg[class^="slider-"] {
|
||||||
|
// > rect {
|
||||||
|
// fill: $base;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// > svg > path {
|
||||||
|
// fill: $green;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
// unchecked
|
||||||
|
div[class^="control"] {
|
||||||
|
> div[style*="background-color: hsl(218, calc(var(--saturation-factor, 1) * 4.6%), 46.9%)"] {
|
||||||
|
background-color: $surface2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg[class^="slider-"] > svg > path {
|
||||||
|
fill: darken($green, 40%) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-settings-title {
|
||||||
|
color: $text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-switch {
|
||||||
|
&-body {
|
||||||
|
--switch-color: #{$surface2};
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .bd-switch-body {
|
||||||
|
--switch-color: #{$green};
|
||||||
|
|
||||||
|
svg.bd-switch-symbol path {
|
||||||
|
fill: darken($green, 40%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-button {
|
||||||
|
background-color: $brand;
|
||||||
|
color: $crust;
|
||||||
|
|
||||||
|
&.bd-button-danger {
|
||||||
|
background-color: $red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-controls > .bd-addon-button svg {
|
||||||
|
fill: $crust;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-addon-views .bd-view-button.selected {
|
||||||
|
background-color: $brand;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $crust;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="perksModal"] {
|
||||||
|
background-color: $base;
|
||||||
|
|
||||||
|
li[class^="perk"] {
|
||||||
|
background-color: $mantle;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
color: $pink;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg[class^="giftIcon"] {
|
||||||
|
color: $crust;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="tierHeaderUnlocked"] {
|
||||||
|
background-image: linear-gradient(90deg, $blue, $mauve);
|
||||||
|
color: $base;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="tierUnlocked"],
|
||||||
|
div[class^="tierMarkerBackground"] {
|
||||||
|
background-color: $base;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="barBackground"],
|
||||||
|
div[class^="tierMarkerInProgress"],
|
||||||
|
div[class^="tierBody"] {
|
||||||
|
background-color: $crust;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="tierMarkerInProgress"] [class^="currentTierIcon"] {
|
||||||
|
color: $pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="barForeground"],
|
||||||
|
div[class^="tierMarkerAccomplished"] {
|
||||||
|
background-color: $pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg[class^="currentTierIcon"] {
|
||||||
|
color: $base;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="tierMarkerLabelText"],
|
||||||
|
svg[class^="tierLock"] {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="selectedTier"] div[class*="tierMarkerLabelText"] {
|
||||||
|
color: var(--text-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="tierHeaderLocked"] {
|
||||||
|
background-color: darken($crust, 5%);
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
svg[class*="unlocked"] {
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// boost progress bar
|
||||||
|
div[class^="sidebar-"] div[class^="container"] {
|
||||||
|
div[class^="progressBar-"] {
|
||||||
|
background: linear-gradient(90deg, $blue, $mauve);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
div[class^="progressBar-"] {
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
hsl(221, 70%, 55.5%),
|
||||||
|
$mauve 34%,
|
||||||
|
$blue 67%,
|
||||||
|
$mauve
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="divider-"] {
|
||||||
|
border-color: var(--background-modifier-accent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="pageWrapper-"] {
|
||||||
|
background: $base !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// public server home
|
||||||
|
div[class^="homeContainer-"] {
|
||||||
|
background: $base !important;
|
||||||
|
|
||||||
|
> div[class^="homeContent-"] div[class*="card-"] {
|
||||||
|
background: $surface0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// the header for the public server home
|
||||||
|
section[class^="title-"] {
|
||||||
|
background: var(--background-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="categoryItem-"][class*="selectedCategoryItem"],
|
||||||
|
button[class*="lookFilled"] div[class*="addButton"] {
|
||||||
|
// color when selected or if button
|
||||||
|
color: $crust !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// new label
|
||||||
|
div[class^="itemInner-"] div[class^="new-"] > div[class*="newText-"] {
|
||||||
|
color: $crust !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// student hubs
|
||||||
|
section[class^="guildListSection-"] {
|
||||||
|
div[class^="guildList"]:first-child {
|
||||||
|
div[class^="iconContainer-"] {
|
||||||
|
background-color: $green;
|
||||||
|
|
||||||
|
> div[class^="icon-"] {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg fill='none' height='24' viewBox='0 0 25 24' width='25' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23#{str-slice(inspect($crust), 2)}'%3E%3Cpath clip-rule='evenodd' d='m13.25 18v-12h-1.5v12z' fill-rule='evenodd'/%3E%3Cpath clip-rule='evenodd' d='m7 12.75c-.69036 0-1.25.5596-1.25 1.25v4h-1.5v-4c0-1.5188 1.23122-2.75 2.75-2.75h11c1.5188 0 2.75 1.2312 2.75 2.75v4h-1.5v-4c0-.6904-.5596-1.25-1.25-1.25z' fill-rule='evenodd'/%3E%3Cpath d='m12.5 7c-1.3807 0-2.5-1.11929-2.5-2.5s1.1193-2.5 2.5-2.5 2.5 1.11929 2.5 2.5-1.1193 2.5-2.5 2.5z'/%3E%3Cpath d='m20 22c-1.3807 0-2.5-1.1193-2.5-2.5s1.1193-2.5 2.5-2.5 2.5 1.1193 2.5 2.5-1.1193 2.5-2.5 2.5z'/%3E%3Cpath d='m12.5 22c-1.3807 0-2.5-1.1193-2.5-2.5s1.1193-2.5 2.5-2.5 2.5 1.1193 2.5 2.5-1.1193 2.5-2.5 2.5z'/%3E%3Cpath d='m5 22c-1.38071 0-2.5-1.1193-2.5-2.5s1.11929-2.5 2.5-2.5 2.5 1.1193 2.5 2.5-1.11929 2.5-2.5 2.5z'/%3E%3C/g%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// onlycords 💀
|
||||||
|
path[d="M22 12.4065C21.8956 14.9141 20.8533 17.2908 19.0798 19.0654C17.3062 20.8401 14.931 21.883 12.425 21.9875L13.7625 15.646L17.2375 17.9224C17.3214 17.9702 17.416 17.996 17.5125 17.9975C17.6481 17.9962 17.7781 17.9424 17.875 17.8474C17.9439 17.7577 17.9813 17.6478 17.9813 17.5347C17.9813 17.4216 17.9439 17.3117 17.875 17.222L15.6 13.7323L22 12.4065ZM13.7625 8.34148L17.2375 6.06504C17.3352 6.00866 17.4487 5.98608 17.5605 6.00084C17.6723 6.0156 17.7762 6.06686 17.8559 6.14665C17.9357 6.22645 17.9869 6.33037 18.0017 6.44225C18.0164 6.55413 17.9938 6.66772 17.9375 6.76548L15.6625 10.2551L22 11.581C21.8956 9.07342 20.8533 6.69669 19.0798 4.92206C17.3062 3.14742 14.931 2.10449 12.425 2L13.7625 8.34148ZM10.275 8.34148L11.6 2C9.09402 2.10449 6.71878 3.14742 4.94525 4.92206C3.17172 6.69669 2.12945 9.07342 2.02502 11.581L8.37497 10.2551L6.08752 6.76548C6.02873 6.66774 6.00413 6.55315 6.01772 6.43988C6.0313 6.32661 6.08228 6.22113 6.16252 6.14009C6.24233 6.05781 6.34797 6.00542 6.46175 5.99176C6.57552 5.97809 6.69052 6.00399 6.78752 6.06504L10.275 8.34148ZM6.16252 17.8474C6.08228 17.7663 6.0313 17.6609 6.01772 17.5476C6.00413 17.4343 6.02873 17.3197 6.08752 17.222L8.37497 13.7323L2 12.4065C2.10442 14.9141 3.1467 17.2908 4.92023 19.0654C6.69376 20.8401 9.06899 21.883 11.575 21.9875L10.25 15.646L6.7625 17.9224C6.67925 17.9718 6.58428 17.9977 6.48753 17.9975C6.35971 17.9937 6.23848 17.9398 6.15001 17.8474H6.16252Z"] {
|
||||||
|
fill: $teal;
|
||||||
|
}
|
||||||
|
|
||||||
|
path[d="M17.225 6.06504C17.3227 6.00866 17.4362 5.98608 17.548 6.00084C17.6598 6.0156 17.7637 6.06686 17.8434 6.14665C17.9232 6.22645 17.9744 6.33037 17.9892 6.44225C18.0039 6.55413 17.9813 6.66772 17.925 6.76548L15.65 10.2551L21.9875 11.581C21.9875 11.7185 21.9875 11.8562 21.9875 11.9937C21.9875 12.1313 21.9875 12.2689 21.9875 12.4065L15.65 13.7323L17.925 17.222C17.9939 17.3117 18.0313 17.4216 18.0313 17.5347C18.0313 17.6478 17.9939 17.7577 17.925 17.8474C17.8281 17.9424 17.6982 17.9962 17.5625 17.9975C17.466 17.996 17.3714 17.9702 17.2875 17.9224L13.8125 15.646L12.4125 22H11.5875L10.2625 15.6585L6.77501 17.935C6.69176 17.9843 6.59672 18.0102 6.49997 18.01C6.43455 18.0098 6.3699 17.9963 6.30977 17.9705C6.24964 17.9447 6.1953 17.9072 6.15001 17.8599C6.06977 17.7789 6.01879 17.6734 6.0052 17.5601C5.99162 17.4468 6.01621 17.3323 6.07501 17.2345L8.36253 13.7449L2 12.4065C2 12.2689 2 12.1313 2 11.9937C2 11.8562 2 11.7185 2 11.581L8.35002 10.2551L6.0625 6.76548C6.0037 6.66774 5.97918 6.55315 5.99277 6.43988C6.00635 6.32661 6.05726 6.22113 6.1375 6.14009C6.21731 6.05781 6.32295 6.00542 6.43672 5.99176C6.5505 5.97809 6.6655 6.00399 6.7625 6.06504L10.25 8.34148L11.575 2H12.4L13.7375 8.34148L17.225 6.06504Z"] {
|
||||||
|
fill: $crust;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="tierPreviews-"] {
|
||||||
|
button[class^="button-"] {
|
||||||
|
background: linear-gradient(90deg, $teal, $blue);
|
||||||
|
}
|
||||||
|
}
|
||||||
256
src/components/_popouts.scss
Normal file
256
src/components/_popouts.scss
Normal file
@@ -0,0 +1,256 @@
|
|||||||
|
div[class^="layerContainer"] [role="menu"] {
|
||||||
|
// make menu items readable when hovered
|
||||||
|
--brand-experiment-560: var(--brand-experiment-25a);
|
||||||
|
--brand-experiment-600: var(--brand-experiment);
|
||||||
|
|
||||||
|
[class*="colorDefault"] {
|
||||||
|
&[class*="colorBrand"] {
|
||||||
|
color: $brand;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[class*="focused"] {
|
||||||
|
&:not([class*="colorDanger"]),
|
||||||
|
[class*="checkbox-"] {
|
||||||
|
color: var(--interactive-normal);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// make active items have dark text
|
||||||
|
&:active:not([class*="hideInteraction-"]) {
|
||||||
|
color: var(--background-floating);
|
||||||
|
|
||||||
|
[class*="check-"] {
|
||||||
|
color: var(--interactive-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="checkbox-"] {
|
||||||
|
color: var(--background-floating);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="colorDanger"][class*="focused"],
|
||||||
|
[class*="colorDefault"] [class*="check-"] {
|
||||||
|
color: var(--background-floating);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-dark,
|
||||||
|
.theme-light {
|
||||||
|
div[class^="layerContainer"]
|
||||||
|
div[id^="popout_"]
|
||||||
|
> div[class*="didRender-"]
|
||||||
|
> div {
|
||||||
|
background-color: var(--background-floating);
|
||||||
|
|
||||||
|
div[class*="flowerStarContainer-"] {
|
||||||
|
svg[class*="flowerStar-"] * {
|
||||||
|
fill: $brand;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="recentMentionsPopout"] {
|
||||||
|
div[class^="header-"] {
|
||||||
|
div[class^="tabBar"] div[class^="tab"][class*="active-"] {
|
||||||
|
color: $base;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="controls-"] {
|
||||||
|
--background-secondary: #{$surface0};
|
||||||
|
--background-primary: #{adjust-color($surface0, $alpha: -0.1)};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="scroller-"] {
|
||||||
|
[role="button"] {
|
||||||
|
--background-tertiary: #{adjust-color($subtext0, $alpha: -0.85)};
|
||||||
|
--background-floating: #{adjust-color($subtext0, $alpha: -0.88)};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="rolesList"] {
|
||||||
|
// make box lighter
|
||||||
|
div[class^="role-"],
|
||||||
|
button[class^="addButton-"] {
|
||||||
|
background-color: lighten($mantle, 4%);
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="role-"] {
|
||||||
|
span[class^="roleCircle-"] {
|
||||||
|
// default roles
|
||||||
|
&[style*="background-color: rgb(185, 187, 190)"] {
|
||||||
|
background-color: $subtext0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// base color roles
|
||||||
|
&[style*="background-color: rgb(54, 57, 62)"],
|
||||||
|
&[style*="background-color: rgb(53, 57, 64)"] {
|
||||||
|
background-color: $base !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="layerContainer"] {
|
||||||
|
> div[class^="layer"] {
|
||||||
|
// reaction popout
|
||||||
|
div[class^="reactors"] {
|
||||||
|
background-color: var(--background-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="scroller"] {
|
||||||
|
background-color: var(--background-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="reactorDefault"] {
|
||||||
|
-webkit-box-shadow: inset 0 -1px 0 var(--background-modifier-accent);
|
||||||
|
box-shadow: inset 0 -1px 0 var(--background-modifier-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="reactionSelected"] {
|
||||||
|
background-color: var(--background-modifier-selected);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// gif/sticker/emoji section
|
||||||
|
section[class^="positionContainer-"] {
|
||||||
|
// colors tab when active
|
||||||
|
button[class*="navButtonActive"] {
|
||||||
|
background-color: $brand;
|
||||||
|
color: $crust;
|
||||||
|
}
|
||||||
|
|
||||||
|
// more transparent to make things more bearable
|
||||||
|
[class*="stickerInspected-"] [class^="inspectedIndicator"],
|
||||||
|
[class^="emojiItem-"][class*="emojiItemSelected-"] {
|
||||||
|
background-color: var(--brand-experiment-25a);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light {
|
||||||
|
// color: $text;
|
||||||
|
|
||||||
|
> div[class^="focusLock"]
|
||||||
|
> div[class^="root"]
|
||||||
|
> div[class^="container"]
|
||||||
|
div[class*="footer"] {
|
||||||
|
// background-color: $mantle;
|
||||||
|
|
||||||
|
&[class*="footerSeparator-"] {
|
||||||
|
box-shadow: inset 0 1px 0 $surface0;
|
||||||
|
-webkit-box-shadow: inset 0 1px 0 $surface0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> div[class^="focusLock"] > div[class^="root"] {
|
||||||
|
box-shadow: 0 0 0 1px $surface0,
|
||||||
|
0 2px 10px 0 hsla(0, calc(var(--saturation-factor, 1) * 0%), 0%, 0.1);
|
||||||
|
-webkit-box-shadow: 0 0 0 1px $surface0,
|
||||||
|
0 2px 10px 0 hsla(0, calc(var(--saturation-factor, 1) * 0%), 0%, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="layerContainer"] {
|
||||||
|
// right-click popups for guild, channels, and user
|
||||||
|
#guild-header-popout,
|
||||||
|
#guild-context,
|
||||||
|
div[id^="channel-context"],
|
||||||
|
div[id^="user-context"] {
|
||||||
|
background: $crust;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div[class^="layer"] {
|
||||||
|
// search popout
|
||||||
|
div[role="listbox"] {
|
||||||
|
background-color: $mantle;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="focusLock"] {
|
||||||
|
// create channel (modal) and stream popout (modalSize)
|
||||||
|
div[class^="modal-"],
|
||||||
|
div[class^="modalSize-"] {
|
||||||
|
background-color: $mantle;
|
||||||
|
li,
|
||||||
|
p,
|
||||||
|
span {
|
||||||
|
color: $text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// their respective footers
|
||||||
|
div[class*="footer"] {
|
||||||
|
background-color: $crust;
|
||||||
|
}
|
||||||
|
|
||||||
|
// feature headers
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
&[class^="fixed-"] {
|
||||||
|
&:after {
|
||||||
|
background-color: $red;
|
||||||
|
}
|
||||||
|
color: $red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="message-"] {
|
||||||
|
background-color: $surface0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// add game
|
||||||
|
div[class^="addGamePopout-"] {
|
||||||
|
background-color: $mantle;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class*="searchOption-"]::after,
|
||||||
|
div[class*="option-"]::after,
|
||||||
|
li[class*="option-"]::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class^="queryContainer"] {
|
||||||
|
background-color: $crust;
|
||||||
|
span[class^="key"] {
|
||||||
|
color: $text;
|
||||||
|
background-color: $base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// branded tooltips should have dark text
|
||||||
|
[class*="tooltipBrand-"] {
|
||||||
|
color: $crust;
|
||||||
|
}
|
||||||
|
|
||||||
|
// when hovering active threads
|
||||||
|
div[class^="popout-"] div[class^="row"][role="button"] {
|
||||||
|
&:hover {
|
||||||
|
color: $crust;
|
||||||
|
|
||||||
|
[class*="timestamp"] {
|
||||||
|
color: $crust;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// add account modal + cards
|
||||||
|
form[class*="card-"] {
|
||||||
|
background-color: $base;
|
||||||
|
}
|
||||||
|
|
||||||
|
// user info
|
||||||
|
div[class*="userInfoSection-"] {
|
||||||
|
div[class^="connectedAccountContainer-"] {
|
||||||
|
background-color: adjust-color($surface0, $alpha: -0.55) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
57
src/components/_sidebar.scss
Normal file
57
src/components/_sidebar.scss
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
// "spine" svgs before threads
|
||||||
|
svg[class^="spine-"] {
|
||||||
|
color: $surface2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// rainbow threads
|
||||||
|
ul[aria-label$=" threads"] > li:nth-child(1n) {
|
||||||
|
--channels-default: #{mix($red, $text, 30%)};
|
||||||
|
--interactive-hover: #{$red};
|
||||||
|
--interactive-active: #{$red};
|
||||||
|
}
|
||||||
|
|
||||||
|
ul[aria-label$=" threads"] > li:nth-child(2n) {
|
||||||
|
--channels-default: #{mix($peach, $text, 30%)};
|
||||||
|
--interactive-hover: #{$peach};
|
||||||
|
--interactive-active: #{$peach};
|
||||||
|
}
|
||||||
|
|
||||||
|
ul[aria-label$=" threads"] > li:nth-child(3n) {
|
||||||
|
--channels-default: #{mix($yellow, $text, 30%)};
|
||||||
|
--interactive-hover: #{$yellow};
|
||||||
|
--interactive-active: #{$yellow};
|
||||||
|
}
|
||||||
|
|
||||||
|
ul[aria-label$=" threads"] > li:nth-child(4n) {
|
||||||
|
--channels-default: #{mix($green, $text, 30%)};
|
||||||
|
--interactive-hover: #{$green};
|
||||||
|
--interactive-active: #{$green};
|
||||||
|
}
|
||||||
|
|
||||||
|
ul[aria-label$=" threads"] > li:nth-child(5n) {
|
||||||
|
--channels-default: #{mix($blue, $text, 30%)};
|
||||||
|
--interactive-hover: #{$sapphire};
|
||||||
|
--interactive-active: #{$sapphire};
|
||||||
|
}
|
||||||
|
|
||||||
|
ul[aria-label$=" threads"] > li:nth-child(6n) {
|
||||||
|
--channels-default: #{mix($mauve, $text, 30%)};
|
||||||
|
--interactive-hover: #{$mauve};
|
||||||
|
--interactive-active: #{$mauve};
|
||||||
|
}
|
||||||
|
|
||||||
|
// bot tag in sidebar
|
||||||
|
[class^="botText"] {
|
||||||
|
color: $crust;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg[class^="botTagVerified"] {
|
||||||
|
color: $crust;
|
||||||
|
}
|
||||||
|
|
||||||
|
// streaming badge
|
||||||
|
div[class*="liveShapeRound-"] {
|
||||||
|
background-color: $red;
|
||||||
|
color: $base;
|
||||||
|
}
|
||||||
254
src/components/_variables.scss
Normal file
254
src/components/_variables.scss
Normal file
@@ -0,0 +1,254 @@
|
|||||||
|
[data-popout-root],
|
||||||
|
html {
|
||||||
|
// weighted brand colors
|
||||||
|
--brand-experiment: #{$brand};
|
||||||
|
--brand-experiment-100: #{lighten($brand, math.div(90%, 2))};
|
||||||
|
--brand-experiment-130: #{lighten($brand, math.div(85%, 2))};
|
||||||
|
--brand-experiment-160: #{lighten($brand, math.div(80%, 2))};
|
||||||
|
--brand-experiment-200: #{lighten($brand, math.div(75%, 2))};
|
||||||
|
--brand-experiment-230: #{lighten($brand, math.div(70%, 2))};
|
||||||
|
--brand-experiment-260: #{lighten($brand, math.div(65%, 2))};
|
||||||
|
--brand-experiment-300: #{lighten($brand, math.div(60%, 2))};
|
||||||
|
--brand-experiment-330: #{lighten($brand, math.div(50%, 2))};
|
||||||
|
--brand-experiment-360: #{lighten($brand, math.div(40%, 2))};
|
||||||
|
--brand-experiment-400: #{lighten($brand, math.div(30%, 2))};
|
||||||
|
--brand-experiment-430: #{lighten($brand, math.div(20%, 2))};
|
||||||
|
--brand-experiment-460: #{lighten($brand, math.div(10%, 2))};
|
||||||
|
--brand-experiment-500: #{$brand};
|
||||||
|
--brand-experiment-530: #{darken($brand, math.div(10%, 2))};
|
||||||
|
--brand-experiment-560: #{darken($brand, math.div(20%, 2))};
|
||||||
|
--brand-experiment-600: #{darken($brand, math.div(30%, 2))};
|
||||||
|
--brand-experiment-630: #{darken($brand, math.div(40%, 2))};
|
||||||
|
--brand-experiment-660: #{darken($brand, math.div(50%, 2))};
|
||||||
|
--brand-experiment-700: #{darken($brand, math.div(60%, 2))};
|
||||||
|
--brand-experiment-730: #{darken($brand, math.div(65%, 2))};
|
||||||
|
--brand-experiment-760: #{darken($brand, math.div(70%, 2))};
|
||||||
|
--brand-experiment-800: #{darken($brand, math.div(75%, 2))};
|
||||||
|
--brand-experiment-830: #{darken($brand, math.div(80%, 2))};
|
||||||
|
--brand-experiment-860: #{darken($brand, math.div(85%, 2))};
|
||||||
|
--brand-experiment-900: #{darken($brand, math.div(90%, 2))};
|
||||||
|
// similar to other brand colors, except alpha only
|
||||||
|
--brand-experiment-05a: #{adjust-color($brand, $alpha: -0.95)};
|
||||||
|
--brand-experiment-10a: #{adjust-color($brand, $alpha: -0.9)};
|
||||||
|
--brand-experiment-15a: #{adjust-color($brand, $alpha: -0.85)};
|
||||||
|
--brand-experiment-20a: #{adjust-color($brand, $alpha: -0.8)};
|
||||||
|
--brand-experiment-25a: #{adjust-color($brand, $alpha: -0.75)};
|
||||||
|
--brand-experiment-30a: #{adjust-color($brand, $alpha: -0.7)};
|
||||||
|
--brand-experiment-35a: #{adjust-color($brand, $alpha: -0.65)};
|
||||||
|
--brand-experiment-40a: #{adjust-color($brand, $alpha: -0.6)};
|
||||||
|
--brand-experiment-45a: #{adjust-color($brand, $alpha: -0.55)};
|
||||||
|
--brand-experiment-50a: #{adjust-color($brand, $alpha: -0.5)};
|
||||||
|
--brand-experiment-55a: #{adjust-color($brand, $alpha: -0.45)};
|
||||||
|
--brand-experiment-60a: #{adjust-color($brand, $alpha: -0.4)};
|
||||||
|
--brand-experiment-65a: #{adjust-color($brand, $alpha: -0.35)};
|
||||||
|
--brand-experiment-70a: #{adjust-color($brand, $alpha: -0.3)};
|
||||||
|
--brand-experiment-75a: #{adjust-color($brand, $alpha: -0.25)};
|
||||||
|
--brand-experiment-80a: #{adjust-color($brand, $alpha: -0.2)};
|
||||||
|
--brand-experiment-85a: #{adjust-color($brand, $alpha: -0.15)};
|
||||||
|
--brand-experiment-90a: #{adjust-color($brand, $alpha: -0.1)};
|
||||||
|
--brand-experiment-95a: #{adjust-color($brand, $alpha: -0.05)};
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-dark,
|
||||||
|
.theme-light {
|
||||||
|
--header-primary: #{$text};
|
||||||
|
--header-secondary: #{$subtext0};
|
||||||
|
|
||||||
|
--text-normal: #{$text};
|
||||||
|
--text-muted: #{$subtext0};
|
||||||
|
--text-link: #{$blue};
|
||||||
|
--text-link-low-saturation: #{$sapphire};
|
||||||
|
--text-positive: #{$green};
|
||||||
|
--text-warning: #{$yellow};
|
||||||
|
--text-danger: #{$red};
|
||||||
|
--text-brand: #{$brand};
|
||||||
|
|
||||||
|
--background-primary: #{$base};
|
||||||
|
--background-secondary: #{$mantle};
|
||||||
|
--background-secondary-alt: #{darken($mantle, 2%)};
|
||||||
|
--background-tertiary: #{$crust};
|
||||||
|
--background-accent: #{$brand};
|
||||||
|
--background-floating: #{darken($crust, 2%)};
|
||||||
|
--background-nested-floating: #{$mantle};
|
||||||
|
--background-mobile-primary: #{$base};
|
||||||
|
--background-mobile-secondary: #{$mantle};
|
||||||
|
|
||||||
|
--chat-background: #{$base};
|
||||||
|
--chat-border: #{$crust};
|
||||||
|
--chat-input-container-background: #{$base};
|
||||||
|
|
||||||
|
--background-modifier-hover: #{adjust-color($text, $alpha: -0.85)};
|
||||||
|
--background-modifier-selected: #{adjust-color($text, $alpha: -0.8)};
|
||||||
|
--background-modifier-accent: #{adjust-color($text, $alpha: -0.74)};
|
||||||
|
--background-modifier-active: #{adjust-color($text, $alpha: -0.83)};
|
||||||
|
|
||||||
|
--info-positive-background: #{adjust-color($green, $alpha: -0.85)};
|
||||||
|
--info-positive-foreground: #{$green};
|
||||||
|
--info-positive-text: #{$text};
|
||||||
|
|
||||||
|
--info-warning-background: #{adjust-color($yellow, $alpha: -0.85)};
|
||||||
|
--info-warning-foreground: #{$yellow};
|
||||||
|
--info-warning-text: #{$text};
|
||||||
|
|
||||||
|
--info-danger-background: #{adjust-color($red, $alpha: -0.85)};
|
||||||
|
--info-danger-foreground: #{$red};
|
||||||
|
--info-danger-text: #{$text};
|
||||||
|
|
||||||
|
--info-help-background: #{adjust-color($sky, $alpha: -0.85)};
|
||||||
|
--info-help-foreground: #{$sky};
|
||||||
|
--info-help-text: #{$text};
|
||||||
|
|
||||||
|
--status-positive-background: #{$green};
|
||||||
|
--status-positive-text: #{$base};
|
||||||
|
|
||||||
|
--status-warning-background: #{$yellow};
|
||||||
|
--status-warning-text: #{$base};
|
||||||
|
|
||||||
|
--status-danger-background: #{$red};
|
||||||
|
--status-danger-text: #{$base};
|
||||||
|
|
||||||
|
--status-danger: #{$red};
|
||||||
|
--status-positive: #{$green};
|
||||||
|
--status-warning: #{$yellow};
|
||||||
|
|
||||||
|
--button-danger-background: #{$red};
|
||||||
|
--button-danger-background-hover: #{darken($red, math.div(10%, 2))};
|
||||||
|
--button-danger-background-active: #{darken($brand, math.div(15%, 2))};
|
||||||
|
--button-danger-background-disabled: #{$red};
|
||||||
|
|
||||||
|
--button-positive-background: #{$green};
|
||||||
|
--button-positive-background-hover: #{darken($green, math.div(10%, 2))};
|
||||||
|
--button-positive-background-active: #{darken($green, math.div(15%, 2))};
|
||||||
|
--button-positive-background-disabled: #{$green};
|
||||||
|
|
||||||
|
--button-secondary-background: #{$surface1};
|
||||||
|
--button-secondary-background-hover: #{darken($surface1, math.div(10%, 2))};
|
||||||
|
--button-secondary-background-active: #{darken($surface1, math.div(10%, 2))};
|
||||||
|
--button-secondary-background-disabled: #{$surface1};
|
||||||
|
|
||||||
|
--button-outline-danger-text: #{$text};
|
||||||
|
--button-outline-danger-border: #{$red};
|
||||||
|
--button-outline-danger-background: transparent;
|
||||||
|
--button-outline-danger-background-hover: #{darken($red, math.div(5%, 2))};
|
||||||
|
--button-outline-danger-text-hover: #{$base};
|
||||||
|
--button-outline-danger-border-hover: #{darken($red, math.div(5%, 2))};
|
||||||
|
--button-outline-danger-background-active: #{darken($red, math.div(10%, 2))};
|
||||||
|
--button-outline-danger-text-active: #{$base};
|
||||||
|
--button-outline-danger-border-active: #{darken($red, math.div(5%, 2))};
|
||||||
|
|
||||||
|
--button-outline-positive-text: #{$text};
|
||||||
|
--button-outline-positive-border: #{$green};
|
||||||
|
--button-outline-positive-background: transparent;
|
||||||
|
--button-outline-positive-background-hover: #{darken($green, math.div(5%, 2))};
|
||||||
|
--button-outline-positive-text-hover: #{$base};
|
||||||
|
--button-outline-positive-border-hover: #{darken($green, math.div(5%, 2))};
|
||||||
|
--button-outline-positive-background-active: #{darken(
|
||||||
|
$green,
|
||||||
|
math.div(10%, 2)
|
||||||
|
)};
|
||||||
|
--button-outline-positive-text-active: #{$base};
|
||||||
|
--button-outline-positive-border-active: #{darken($green, math.div(5%, 2))};
|
||||||
|
|
||||||
|
--button-outline-brand-text: #{$text};
|
||||||
|
--button-outline-brand-border: #{$brand};
|
||||||
|
--button-outline-brand-background: transparent;
|
||||||
|
--button-outline-brand-background-hover: #{darken($brand, math.div(5%, 2))};
|
||||||
|
--button-outline-brand-text-hover: #{$base};
|
||||||
|
--button-outline-brand-border-hover: #{darken($brand, math.div(5%, 2))};
|
||||||
|
--button-outline-brand-background-active: #{darken($brand, math.div(10%, 2))};
|
||||||
|
--button-outline-brand-text-active: #{$base};
|
||||||
|
--button-outline-brand-border-active: #{darken($brand, math.div(5%, 2))};
|
||||||
|
|
||||||
|
--button-outline-primary-text: #{$text};
|
||||||
|
--button-outline-primary-border: #{$surface2};
|
||||||
|
--button-outline-primary-background: transparent;
|
||||||
|
--button-outline-primary-background-hover: #{darken(
|
||||||
|
$surface2,
|
||||||
|
math.div(5%, 2)
|
||||||
|
)};
|
||||||
|
--button-outline-primary-text-hover: #{$base};
|
||||||
|
--button-outline-primary-border-hover: #{darken($surface2, math.div(5%, 2))};
|
||||||
|
--button-outline-primary-background-active: #{darken(
|
||||||
|
$surface2,
|
||||||
|
math.div(10%, 2)
|
||||||
|
)};
|
||||||
|
--button-outline-primary-text-active: #{$base};
|
||||||
|
--button-outline-primary-border-active: #{darken($surface2, math.div(5%, 2))};
|
||||||
|
|
||||||
|
--modal-background: #{$base};
|
||||||
|
--modal-footer-background: #{$crust};
|
||||||
|
|
||||||
|
--scrollbar-thin-thumb: #{$brand};
|
||||||
|
--scrollbar-thin-track: transparent;
|
||||||
|
--scrollbar-auto-thumb: #{$brand};
|
||||||
|
--scrollbar-auto-track: #{$crust};
|
||||||
|
|
||||||
|
--scrollbar-auto-scrollbar-color-thumb: #{$brand};
|
||||||
|
--scrollbar-auto-scrollbar-color-track: #{$crust};
|
||||||
|
|
||||||
|
--input-background: #{$crust};
|
||||||
|
--input-placeholder-text: #{$subtext1};
|
||||||
|
|
||||||
|
--logo-primary: #{$text};
|
||||||
|
|
||||||
|
--control-brand-foreground: #{$brand};
|
||||||
|
--control-brand-foreground-new: #{$brand};
|
||||||
|
|
||||||
|
--background-mentioned: #{adjust-color($yellow, $alpha: -0.9)};
|
||||||
|
--background-mentioned-hover: #{adjust-color($yellow, $alpha: -0.92)};
|
||||||
|
--background-message-hover: #{adjust-color($crust, $alpha: -0.93)};
|
||||||
|
--background-message-automod: #{adjust-color($rosewater, $alpha: -0.95)};
|
||||||
|
--background-message-automod-hover: #{adjust-color($rosewater, $alpha: -0.9)};
|
||||||
|
--background-message-highlight: #{adjust-color($brand, $alpha: -0.9)};
|
||||||
|
--background-message-highlight-hover: #{adjust-color($brand, $alpha: -0.92)};
|
||||||
|
|
||||||
|
--channels-default: #{darken($subtext0, 5%)};
|
||||||
|
--channel-icon: #{darken($subtext0, 5%)};
|
||||||
|
--channel-text-area-placeholder: #{adjust-color($text, $alpha: -0.5)};
|
||||||
|
--channeltextarea-background: #{$mantle};
|
||||||
|
|
||||||
|
--activity-card-background: #{$crust};
|
||||||
|
|
||||||
|
--textbox-markdown-syntax: #{$surface0};
|
||||||
|
|
||||||
|
--spoiler-revealed-background: #{$surface0};
|
||||||
|
--spoiler-hidden-background: #{$surface2};
|
||||||
|
|
||||||
|
--android-navigation-bar-background: #{$crust};
|
||||||
|
--android-ripple: #{adjust-color($crust, $alpha: -0.7)};
|
||||||
|
|
||||||
|
--deprecated-card-bg: #{adjust-color($crust, $alpha: -0.4)};
|
||||||
|
--deprecated-card-editable-bg: #{adjust-color($crust, $alpha: -0.7)};
|
||||||
|
|
||||||
|
--deprecated-store-bg: #{$base};
|
||||||
|
--deprecated-quickswitcher-input-background: #{darken(
|
||||||
|
$surface2,
|
||||||
|
math.div(10%, 2)
|
||||||
|
)};
|
||||||
|
--deprecated-quickswitcher-input-placeholder: #{adjust-color(
|
||||||
|
$crust,
|
||||||
|
$alpha: -0.7
|
||||||
|
)};
|
||||||
|
--deprecated-text-input-bg: #{$crust};
|
||||||
|
--deprecated-text-input-border: #{adjust-color($crust, $alpha: -0.7)};
|
||||||
|
--deprecated-text-input-border-hover: #{darken($crust, math.div(10%, 2))};
|
||||||
|
--deprecated-text-input-border-disabled: #{$mantle};
|
||||||
|
--deprecated-text-input-prefix: #{$subtext0};
|
||||||
|
|
||||||
|
--focus-primary: #{$brand};
|
||||||
|
|
||||||
|
--interactive-normal: #{$text};
|
||||||
|
--interactive-muted: #{adjust-color($text, $alpha: -0.7)};
|
||||||
|
--interactive-hover: #{$text};
|
||||||
|
--interactive-active: #{$text};
|
||||||
|
|
||||||
|
// make tooltips that you can't hover surface0
|
||||||
|
[class*="disabledPointerEvents"] {
|
||||||
|
--background-floating: #{$surface0};
|
||||||
|
--background-tertiary: #{lighten($base, 3%)};
|
||||||
|
|
||||||
|
svg[class^="activityIcon-"] {
|
||||||
|
color: $subtext0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -8,4 +8,4 @@
|
|||||||
* @invite r6Mdz5dpFc
|
* @invite r6Mdz5dpFc
|
||||||
* **/
|
* **/
|
||||||
|
|
||||||
@import url("https://catppuccin.github.io/discord/dist/catppuccin-frappe.theme.css")
|
@import url("https://catppuccin.github.io/discord/dist/catppuccin-frappe.theme.css");
|
||||||
|
|||||||
@@ -8,4 +8,4 @@
|
|||||||
* @invite r6Mdz5dpFc
|
* @invite r6Mdz5dpFc
|
||||||
* **/
|
* **/
|
||||||
|
|
||||||
@import url("https://catppuccin.github.io/discord/dist/catppuccin-latte.theme.css")
|
@import url("https://catppuccin.github.io/discord/dist/catppuccin-latte.theme.css");
|
||||||
|
|||||||
@@ -8,4 +8,4 @@
|
|||||||
* @invite r6Mdz5dpFc
|
* @invite r6Mdz5dpFc
|
||||||
* **/
|
* **/
|
||||||
|
|
||||||
@import url("https://catppuccin.github.io/discord/dist/catppuccin-macchiato.theme.css")
|
@import url("https://catppuccin.github.io/discord/dist/catppuccin-macchiato.theme.css");
|
||||||
|
|||||||
@@ -8,4 +8,4 @@
|
|||||||
* @invite r6Mdz5dpFc
|
* @invite r6Mdz5dpFc
|
||||||
* **/
|
* **/
|
||||||
|
|
||||||
@import url("https://catppuccin.github.io/discord/dist/catppuccin-mocha.theme.css")
|
@import url("https://catppuccin.github.io/discord/dist/catppuccin-mocha.theme.css");
|
||||||
|
|||||||
Reference in New Issue
Block a user