From 239c12d194a2bfc9d12dc9c0f4752651cd62adb9 Mon Sep 17 00:00:00 2001 From: Federico <38290480+FedeIlLeone@users.noreply.github.com> Date: Tue, 3 Sep 2024 19:29:23 +0200 Subject: [PATCH 1/6] feat: enhancements --- src/core/_variables.scss | 168 +++++++++--------- src/theme/app/_index.scss | 1 - src/theme/app/_scrollerbar.scss | 10 -- src/theme/chat/_forums.scss | 37 ++-- src/theme/chat/_messages.scss | 14 +- src/theme/chat/_voice.scss | 6 + src/theme/inputs/_buttons.scss | 3 +- src/theme/members/_container.scss | 5 + src/theme/members/_member.scss | 3 +- src/theme/modals/_delete.scss | 5 - src/theme/modals/_generic.scss | 3 - src/theme/modals/_index.scss | 1 - src/theme/modals/_modify-attachment.scss | 10 +- src/theme/modals/_notification-settings.scss | 16 +- src/theme/modals/_onboarding.scss | 2 +- src/theme/pages/_active-now.scss | 3 - src/theme/pages/_app-directory.scss | 3 - src/theme/pages/_developers.scss | 138 +++++++------- src/theme/pages/_discovery.scss | 5 +- src/theme/pages/_index.scss | 4 +- src/theme/pages/_members.scss | 1 - src/theme/pages/_server-guide.scss | 6 +- src/theme/pages/_server-shop.scss | 2 +- src/theme/pages/_shop.scss | 3 - src/theme/popouts/_activity-interactions.scss | 8 + src/theme/popouts/_add-game.scss | 2 +- src/theme/popouts/_client-theme-preview.scss | 8 + src/theme/popouts/_content-warning.scss | 2 +- src/theme/popouts/_country-code.scss | 2 +- src/theme/popouts/_index.scss | 5 +- src/theme/popouts/_screenshare.scss | 3 - src/theme/popouts/_search.scss | 15 +- src/theme/popouts/_webhook.scss | 3 - src/theme/settings/_content.scss | 2 +- src/theme/settings/_guild.scss | 14 +- src/theme/settings/_sidebar.scss | 1 - src/theme/settings/_user.scss | 26 +-- src/theme/sidebar/_container.scss | 13 +- src/theme/sidebar/_dm-list.scss | 7 +- src/theme/sidebar/_header.scss | 9 - 40 files changed, 237 insertions(+), 332 deletions(-) delete mode 100644 src/theme/app/_scrollerbar.scss delete mode 100644 src/theme/modals/_delete.scss delete mode 100644 src/theme/pages/_app-directory.scss delete mode 100644 src/theme/pages/_shop.scss create mode 100644 src/theme/popouts/_activity-interactions.scss create mode 100644 src/theme/popouts/_client-theme-preview.scss delete mode 100644 src/theme/popouts/_webhook.scss diff --git a/src/core/_variables.scss b/src/core/_variables.scss index 23c4f4c..e7d28b9 100644 --- a/src/core/_variables.scss +++ b/src/core/_variables.scss @@ -72,6 +72,7 @@ html.theme-dark .theme-light .root_f9a4c9, --background-mobile-primary: var(--black) !important; --background-mobile-secondary: var(--primary-830) !important; --background-modifier-accent: hsl(var(--primary-760-hsl)/0.48) !important; + --background-modifier-accent-2: hsl(var(--primary-760-hsl)/0.48) !important; --background-modifier-active: hsl(var(--primary-760-hsl)/0.48) !important; --background-modifier-hover: hsl(var(--primary-760-hsl)/0.4) !important; --background-modifier-selected: hsl(var(--primary-760-hsl)/0.6) !important; @@ -84,6 +85,8 @@ html.theme-dark .theme-light .root_f9a4c9, --bg-base-secondary: var(--primary-830) !important; --bg-base-tertiary: var(--primary-860) !important; --bg-mod-faint: var(--black) !important; + --bg-mod-strong: hsl(var(--primary-760-hsl)/0.54) !important; + --bg-mod-subtle: hsl(var(--primary-760-hsl)/0.48) !important; --bg-surface-overlay: var(--primary-830) !important; --bg-surface-raised: var(--black) !important; --button-outline-primary-background: var(--primary-700) !important; @@ -92,53 +95,36 @@ html.theme-dark .theme-light .root_f9a4c9, --button-outline-primary-border: var(--primary-700) !important; --button-outline-primary-border-active: var(--primary-600) !important; --button-outline-primary-border-hover: var(--primary-630) !important; - --button-outline-primary-text: var(--white) !important; - --button-outline-primary-text-active: var(--white) !important; - --button-outline-primary-text-hover: var(--white) !important; --button-secondary-background: var(--primary-700) !important; --button-secondary-background-active: var(--primary-600) !important; --button-secondary-background-disabled: var(--primary-700) !important; --button-secondary-background-hover: var(--primary-630) !important; - --channel-icon: var(--primary-400) !important; + --card-primary-bg: var(--primary-800) !important; + --card-primary-pressed-bg: var(--primary-860) !important; + --card-secondary-bg: var(--primary-830) !important; + --card-secondary-pressed-bg: var(--primary-860) !important; --channel-text-area-placeholder: var(--primary-400) !important; - --channels-default: var(--primary-360) !important; --channeltextarea-background: var(--primary-830) !important; --chat-background: var(--black) !important; --chat-border: var(--primary-700) !important; --chat-input-container-background: var(--primary-600) !important; - --deprecated-card-bg: hsl(var(--primary-700-hsl)/0.6) !important; - --deprecated-card-editable-bg: hsl(var(--primary-700-hsl)/0.3) !important; - --deprecated-quickswitcher-input-background: var(--primary-400) !important; - --deprecated-quickswitcher-input-placeholder: hsl(var(--white-hsl)/0.3) !important; --deprecated-store-bg: var(--black) !important; - --deprecated-text-input-bg: var(--primary-700) !important; - --deprecated-text-input-border: hsl(var(--black-hsl)/0.3) !important; - --deprecated-text-input-border-disabled: var(--primary-700) !important; - --deprecated-text-input-border-hover: var(--primary-900) !important; - --deprecated-text-input-prefix: var(--primary-200) !important; - --header-primary: var(--primary-130) !important; - --header-secondary: var(--primary-345) !important; + --deprecated-text-input-bg: var(--primary-800) !important; + --deprecated-text-input-border-disabled: var(--primary-800) !important; --home-background: var(--black) !important; - --home-card-resting-border: hsl(var(--transparent-hsl)/0) !important; --input-background: var(--primary-800) !important; - --input-placeholder-text: var(--input-placeholder-text-dark) !important; - --interactive-active: var(--primary-130) !important; - --interactive-hover: var(--primary-230) !important; - --interactive-muted: var(--primary-500) !important; - --interactive-normal: var(--primary-345) !important; + --input-focused-border: hsl(var(--white-hsl)/0.03) !important; + --live-stage-tile-border: hsl(var(--primary-860-hsl)/0.6) !important; --modal-background: var(--primary-860) !important; --modal-footer-background: var(--primary-900) !important; - --scrollbar-auto-scrollbar-color-track: var(--primary-860) !important; --scrollbar-auto-scrollbar-color-thumb: var(--primary-800) !important; + --scrollbar-auto-scrollbar-color-track: var(--primary-860) !important; --scrollbar-auto-thumb: var(--primary-800) !important; --scrollbar-auto-track: var(--primary-860) !important; --scrollbar-thin-thumb: var(--primary-800) !important; - --scrollbar-thin-track: transparent !important; - --spoiler-hidden-background: var(--primary-700) !important; - --spoiler-revealed-background: var(--primary-660) !important; + --scrollbar-thin-track: hsl(var(--black-hsl)/0) !important; --text-muted: var(--primary-345) !important; --text-normal: var(--primary-300) !important; - --textbox-markdown-syntax: var(--primary-360) !important; --elevation-stroke: 0 0 0 1px hsl(var(--primary-600-hsl)/0.15) !important; --elevation-low: 0 1px 0 hsl(var(--primary-630-hsl)/0.2),0 1.5px 0 hsl(var(--primary-600-hsl)/0.05),0 2px 0 hsl(var(--primary-630-hsl)/0.05) !important; @@ -147,10 +133,6 @@ html.theme-dark .theme-light .root_f9a4c9, --search-popout-option-fade: linear-gradient(90deg,hsl(var(--primary-830-hsl)/0),hsl(var(--primary-830-hsl)/1) 80%) !important; --search-popout-option-fade-hover: linear-gradient(90deg,hsl(var(--primary-800-hsl)/0),var(--primary-800) 50%) !important; - - --legacy-elevation-low: 0 1px 5px 0 hsl(var(--black-500-hsl)/0.3); - --legacy-elevation-high: 0 2px 10px 0 hsl(var(--black-500-hsl)/0.2); - --legacy-elevation-border: 0 0 0 1px hsl(var(--primary-700-hsl)/0.6); } .theme-dark:not(.custom-profile-theme) { @@ -211,6 +193,11 @@ html.theme-dark .theme-light .root_f9a4c9, hsl(var(--primary-760-hsl) / 0.48) 100%, hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) ) !important; + --background-modifier-accent-2: color-mix( + in oklab, + hsl(var(--primary-760-hsl) / 0.48) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) + ) !important; --background-modifier-active: color-mix( in oklab, hsl(var(--primary-760-hsl) / 0.48) 100%, @@ -255,117 +242,122 @@ html.theme-dark .theme-light .root_f9a4c9, in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) - ); + ) !important; --bg-base-secondary: color-mix( in oklab, var(--primary-830) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) - ); + ) !important; --bg-base-tertiary: color-mix( in oklab, var(--primary-860) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) - ); + ) !important; --bg-mod-faint: color-mix( in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --bg-surface-overlay: color-mix( + --bg-mod-strong: color-mix( in oklab, - var(--primary-830) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + hsl(var(--primary-760-hsl) / 0.54) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.54) var(--theme-base-color-amount, 0%) ) !important; - --bg-surface-raised: color-mix( + --bg-mod-subtle: color-mix( in oklab, - var(--black) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + hsl(var(--primary-760-hsl) / 0.48) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) ) !important; - --channeltextarea-background: color-mix( + --bg-surface-overlay: color-mix( in oklab, var(--primary-830) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --chat-background: color-mix( + --bg-surface-raised: color-mix( in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --chat-border: color-mix( + --card-primary-bg: color-mix( in oklab, - var(--primary-700) 100%, + var(--primary-800) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --chat-input-container-background: color-mix( + --card-primary-pressed-bg: color-mix( in oklab, - var(--primary-600) 100%, + var(--primary-860) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-card-bg: color-mix( + --card-secondary-bg: color-mix( in oklab, - hsl(var(--primary-700-hsl) / 0.6) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%) - ) !important; - --deprecated-card-editable-bg: color-mix( - in oklab, - hsl(var(--primary-700-hsl) / 0.3) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%) + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-quickswitcher-input-background: color-mix( + --card-secondary-pressed-bg: color-mix( in oklab, - var(--primary-400) 100%, + var(--primary-860) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-quickswitcher-input-placeholder: color-mix( + --channel-text-area-placeholder: color-mix( in oklab, - hsl(var(--white-hsl) / 0.3) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%) + var(--primary-400) 100%, + var(--theme-text-color, black) var(--theme-text-color-amount, 0%) ) !important; - --deprecated-store-bg: color-mix( + --channeltextarea-background: color-mix( in oklab, - var(--black) 100%, + var(--primary-830) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-text-input-bg: color-mix( + --chat-background: color-mix( in oklab, - var(--primary-700) 100%, + var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-text-input-border: color-mix( - in oklab, - hsl(var(--black-hsl) / 0.3) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%) - ) !important; - --deprecated-text-input-border-disabled: color-mix( + --chat-border: color-mix( in oklab, var(--primary-700) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-text-input-border-hover: color-mix( + --chat-input-container-background: color-mix( in oklab, - var(--primary-900) 100%, + var(--primary-600) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-text-input-prefix: color-mix( + --deprecated-store-bg: color-mix( in oklab, - var(--primary-200) 100%, + var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; + --deprecated-text-input-bg: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --deprecated-text-input-border-disabled: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; --home-background: color-mix( in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --home-card-resting-border: color-mix( - in oklab, - hsl(var(--transparent-hsl) / 0) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) - ) !important; --input-background: color-mix( in oklab, var(--primary-800) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; + --input-focused-border: color-mix( + in oklab, + hsl(var(--white-hsl) / 0.03) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.03) var(--theme-base-color-amount, 0%) + ) !important; + --live-stage-tile-border: color-mix( + in oklab, + hsl(var(--primary-860-hsl) / 0.6) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%) + ) !important; --modal-background: color-mix( in oklab, var(--primary-860) 100%, @@ -402,19 +394,19 @@ html.theme-dark .theme-light .root_f9a4c9, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --scrollbar-thin-track: color-mix( + in oklab, + hsl(var(--black-hsl) / 0) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) + ) !important; + --text-muted: color-mix( in oklab, - transparent, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) + var(--primary-345) 100%, + var(--theme-text-color, black) var(--theme-text-color-amount, 0%) ) !important; - --spoiler-hidden-background: color-mix( + --text-normal: color-mix( in oklab, - var(--primary-700) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) - ) !important; - --spoiler-revealed-background: color-mix( - in oklab, - var(--primary-660) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + var(--primary-300) 100%, + var(--theme-text-color, black) var(--theme-text-color-amount, 0%) ) !important; } } \ No newline at end of file diff --git a/src/theme/app/_index.scss b/src/theme/app/_index.scss index 80600a4..8d659e9 100644 --- a/src/theme/app/_index.scss +++ b/src/theme/app/_index.scss @@ -1,4 +1,3 @@ @forward 'loading'; // @forward 'notice'; -// @forward 'scrollerbar'; @forward 'toolbar'; \ No newline at end of file diff --git a/src/theme/app/_scrollerbar.scss b/src/theme/app/_scrollerbar.scss deleted file mode 100644 index 823aef3..0000000 --- a/src/theme/app/_scrollerbar.scss +++ /dev/null @@ -1,10 +0,0 @@ -:is(.theme-dark, .theme-midnight) :is( - .scroller_e2e187, - .auto_eed6a8, - .thin_eed6a8, - .peopleColumn_c2739c, - .contentRegionScroller_c25c6d, - .scrollerBase_eed6a8 -)::-webkit-scrollbar-thumb { - background-color: var(--background-secondary-alt); -} \ No newline at end of file diff --git a/src/theme/chat/_forums.scss b/src/theme/chat/_forums.scss index f665913..0825244 100644 --- a/src/theme/chat/_forums.scss +++ b/src/theme/chat/_forums.scss @@ -1,5 +1,12 @@ :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a { - .mainCard_a6d69a, .container_a03b48, .container_ddbb27, .container_a039eb { + // Theme cards and ignore hovers/active/open states on list/gallery views + .mainCard_a6d69a:not( + .container_a57509:is(.isOpen_a57509, :hover, :active), + .container_d331f1:is(.isOpen_d331f1, :active) + ), + .container_a03b48, + .container_ddbb27, + .container_a039eb { background-color: var(--background-tertiary); } .matchingPostsRow_a6d69a { @@ -8,26 +15,16 @@ .loadingCard_a6d69a { background-color: var(--background-tertiary); } - .container_a57509 { - &:hover { - background-color: var(--background-modifier-hover); - } - &:active { - background-color: var(--background-modifier-active); - } - &.isOpen_a57509 { - background-color: var(--background-modifier-selected); - } - .textContentFooter_a57509 { - background: transparent; - } + .sortDropdown_a6d69a, .tag_a6d69a, .tagsButton_a6d69a { + background-color: var(--background-secondary); } - .container_d331f1 { - &:active { - background-color: var(--background-modifier-active); - } - &.isOpen_d331f1 { - background-color: var(--background-modifier-selected); + .pill_c993da.clickable_c993da:not(.disabled_c993da):hover { + background-color: var(--background-secondary); + } + .textContentFooter_a57509 { + background: linear-gradient(to top, hsl(var(--black-hsl)/1), hsl(var(--black-hsl)/0.97) 36px, hsl(var(--black-hsl)/0.4)); + &.noTags_a57509 { + background: linear-gradient(to top, hsl(var(--black-hsl)/1), hsl(var(--black-hsl)/0)); } } } \ No newline at end of file diff --git a/src/theme/chat/_messages.scss b/src/theme/chat/_messages.scss index b8fe078..5d633df 100644 --- a/src/theme/chat/_messages.scss +++ b/src/theme/chat/_messages.scss @@ -6,23 +6,21 @@ background-color: var(--background-modifier-hover); } .invalidPoop_ff31dd { - background-color: var(--background-secondary-alt); + background-color: hsl(var(--primary-700-hsl)/0.3); } } // Activity Invites .invite_f61cb8 { - border-color: var(--background-secondary-alt); - background-color: var(--background-secondary); + border-color: hsl(var(--primary-800-hsl)/0.9); + background-color: hsl(var(--primary-830-hsl)/0.6); } - // Polls -- scuffed but it works + // Polls .container_a1531c { - background-color: var(--background-secondary); - - .enabled_b97e9a[aria-checked="false"] .answerInner_cf2c85:hover { + .answer_cf2c85:hover .answerInner_cf2c85.currentlyVoting_cf2c85:not(.selected_cf2c85) { outline-color: var(--background-secondary-alt); } - .normalStylesDefault_b5cb3c .votePercentageBar_cf2c85 { + .votePercentageBar_cf2c85 { background-color: var(--background-secondary-alt); } } diff --git a/src/theme/chat/_voice.scss b/src/theme/chat/_voice.scss index 9931bd9..ec37707 100644 --- a/src/theme/chat/_voice.scss +++ b/src/theme/chat/_voice.scss @@ -8,4 +8,10 @@ .container_dc3fc4:hover { background-color: var(--background-modifier-hover); } + .colorable_ef18ee.primaryDark_ef18ee { + background-color: var(--background-secondary-alt); + &.active_ef18ee, &:hover { + background-color: var(--background-modifier-hover); + } + } } \ No newline at end of file diff --git a/src/theme/inputs/_buttons.scss b/src/theme/inputs/_buttons.scss index 5f4662c..74170fe 100644 --- a/src/theme/inputs/_buttons.scss +++ b/src/theme/inputs/_buttons.scss @@ -1,5 +1,6 @@ :is(.theme-dark, .theme-midnight) #app-mount { - .button_adcaac.buttonColor_adcaac, .button_adcaac .buttonColor_adcaac { + .button_adcaac.buttonColor_adcaac:not(.buttonActive_adcaac), + .button_adcaac .buttonColor_adcaac:not(.buttonActive_adcaac) { background-color: var(--button-secondary-background); &:hover { background-color: var(--button-secondary-background-hover); diff --git a/src/theme/members/_container.scss b/src/theme/members/_container.scss index 01d8b53..2124e20 100644 --- a/src/theme/members/_container.scss +++ b/src/theme/members/_container.scss @@ -1,3 +1,8 @@ :is(.theme-dark, .theme-midnight) .container_cbd271 { background-color: var(--background-primary); + + // Activity Cards + .container_c64476:not(.selected_c64476) { + background-color: var(--background-tertiary); + } } \ No newline at end of file diff --git a/src/theme/members/_member.scss b/src/theme/members/_member.scss index c96f541..1b2f7bb 100644 --- a/src/theme/members/_member.scss +++ b/src/theme/members/_member.scss @@ -1,6 +1,5 @@ :is(.theme-dark, .theme-midnight) #app-mount { - .member_a31c43, - .members_cbd271 { + .member_cbd271, .members_cbd271 { background-color: var(--background-primary); } } \ No newline at end of file diff --git a/src/theme/modals/_delete.scss b/src/theme/modals/_delete.scss deleted file mode 100644 index c419e8f..0000000 --- a/src/theme/modals/_delete.scss +++ /dev/null @@ -1,5 +0,0 @@ -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 { - .message_ddcc45 { - background-color: var(--background-primary); - } -} \ No newline at end of file diff --git a/src/theme/modals/_generic.scss b/src/theme/modals/_generic.scss index 52d96f9..049bd19 100644 --- a/src/theme/modals/_generic.scss +++ b/src/theme/modals/_generic.scss @@ -1,7 +1,4 @@ :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 { - &.rootWithShadow_f9a4c9 { - box-shadow: var(--dark-elevation-border), var(--dark-elevation-high); - } .footerSeparator_f9a4c9 { box-shadow: inset 0 1px 0 var(--modal-footer-background); } diff --git a/src/theme/modals/_index.scss b/src/theme/modals/_index.scss index 3639cd3..37f600c 100644 --- a/src/theme/modals/_index.scss +++ b/src/theme/modals/_index.scss @@ -2,7 +2,6 @@ @forward 'account-switcher'; @forward 'activity-invite'; @forward 'create-poll'; -@forward 'delete'; @forward 'generic'; @forward 'invite'; @forward 'keybinds'; diff --git a/src/theme/modals/_modify-attachment.scss b/src/theme/modals/_modify-attachment.scss index 2da8228..06caef2 100644 --- a/src/theme/modals/_modify-attachment.scss +++ b/src/theme/modals/_modify-attachment.scss @@ -1,9 +1,5 @@ -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 { - &.uploadModal_f82cc7 { - background-color: var(--modal-background); - .footer_f82cc7 { - box-shadow: inset 0 1px 0 hsl(var(--primary-900-hsl)/.6); - background-color: var(--modal-footer-background); - } +:is(.theme-dark, .theme-midnight) #app-mount .uploadModal_f82cc7 { + .footer_f82cc7 { + background-color: var(--modal-footer-background); } } \ No newline at end of file diff --git a/src/theme/modals/_notification-settings.scss b/src/theme/modals/_notification-settings.scss index 905c587..04b4bfd 100644 --- a/src/theme/modals/_notification-settings.scss +++ b/src/theme/modals/_notification-settings.scss @@ -1,22 +1,8 @@ :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 { .header_da6bd8 { - box-shadow: none; background-color: var(--modal-background); } - - .sectionContent_da6bd8 { - background-color: var(--background-secondary); - } - - .channels_b3d000 { - border-color: var(--background-secondary-alt); - background-color: var(--background-secondary); - } - - .cardPrimary_a298b8 { - background-color: var(--background-secondary); - } - .default_a467ac { + .default_a467ac:not(:hover) { background-color: var(--background-primary); } } \ No newline at end of file diff --git a/src/theme/modals/_onboarding.scss b/src/theme/modals/_onboarding.scss index 376aa74..25ba2fa 100644 --- a/src/theme/modals/_onboarding.scss +++ b/src/theme/modals/_onboarding.scss @@ -3,6 +3,6 @@ background-color: var(--background-secondary); } .overlay_cd377c { - background: none !important; + background: linear-gradient(to top, hsl(var(--primary-860-hsl)), hsl(var(--primary-860-hsl)/0)) !important; } } \ No newline at end of file diff --git a/src/theme/pages/_active-now.scss b/src/theme/pages/_active-now.scss index 25dc85d..0704a29 100644 --- a/src/theme/pages/_active-now.scss +++ b/src/theme/pages/_active-now.scss @@ -2,7 +2,4 @@ .separator_cd82a7 { background-color: var(--background-secondary); } - .applicationStreamingPreviewWrapper_cd82a7 { - background-color: var(--background-secondary-alt); - } } \ No newline at end of file diff --git a/src/theme/pages/_app-directory.scss b/src/theme/pages/_app-directory.scss deleted file mode 100644 index a894733..0000000 --- a/src/theme/pages/_app-directory.scss +++ /dev/null @@ -1,3 +0,0 @@ -:is(.theme-dark, .theme-midnight) #app-mount .directoryContainer_da3f59 { - background-color: var(--background-primary); -} \ No newline at end of file diff --git a/src/theme/pages/_developers.scss b/src/theme/pages/_developers.scss index 2c1f5d0..12c9b87 100644 --- a/src/theme/pages/_developers.scss +++ b/src/theme/pages/_developers.scss @@ -1,88 +1,99 @@ // https://discord.com/developers -body { - // Misc Stuff +.theme-dark body { + // Sidebar + .wrapper-28jGDw { + background-color: var(--background-primary); + } + .hasBorder-17PTeu { + border-bottom-color: var(--background-modifier-accent); + } + .searchContainer-2duiLS:is(:hover) button { + border-color: var(--background-secondary); + background-color: var(--input-background); + } + + // Documentation + .contentWrapper-1Cwe5m hr { + background-color: hsl(var(--primary-760-hsl) / 0.6); + } + .pre-398F0p { + background-color: var(--background-tertiary); + } + .mdxCard-iv9u29:hover { + background-color: var(--card-secondary-pressed-bg); + } + + // Panel + .colorDark-311Rq5, .colorLight-1o6rnK { background-color: var(--background-tertiary); } .borderPrimary-1l1Cvj { border-color: var(--background-secondary); } - .divider-_0um2u { - background-color: var(--background-modifier-accent); + + // Tooltips + .tooltip-2YjxAH { + background-color: var(--background-floating); } - .hasBorder-17PTeu { - border-bottom-color: var(--background-modifier-accent); + .top-3SkhL3:after { + border-top-color: var(--background-floating); } - .searchContainer-2duiLS:is(:hover) button { - border-color: var(--background-secondary); - background-color: var(--input-background); + .bottom-1VilIE:after { + border-bottom-color: var(--background-floating); + } + .left-3N6_YX:after { + border-left-color: var(--background-floating); } - .h6-3NIpOq { - background: var(--background-primary); + .right-2v0SN-:after { + border-right-color: var(--background-floating); + } + .grey-IHse8x { + background-color: var(--background-secondary-alt); + &:after { + border-top-color: var(--background-secondary-alt) !important; + } } - // Content Scrollers - .scrollbar-1NUwvY .thumb-3r19ww { - background-color: var(--background-secondary-alt) !important; + // Forms + .divider-_0um2u { + background-color: var(--background-modifier-accent); } - // Dropdowns - [class$="control"] { + // Selects + [class$="-control"] { border-color: var(--background-secondary); &:hover { border-color: var(--background-secondary-alt); } } - .css-1129voj-menu { + .css-gqriav-menu { border-color: var(--background-secondary); box-shadow: var(--background-secondary) 0px 1px 5px 0px; background-color: var(--background-floating); } - .css-lbnt4y-option { + .css-17vfzgn-option { background-color: var(--background-modifier-selected); } - .css-1jrkz9i-option { + .css-ic7iun-option { background-color: var(--background-modifier-hover); } // Modals .modalContent-31OOYM { - box-shadow: var(--dark-elevation-border), var(--dark-elevation-high); background-color: var(--modal-background); .modalFooter-3193QM { border: none; - box-shadow: inset 0 1px 0 hsl(var(--primary-900-hsl)/.6); background-color: var(--modal-footer-background); } - } - - // Inputs - .input-2g-os5, .inputWrapper-3a4ywb { - border-color: var(--background-secondary); - background-color: var(--input-background); - } - .multiInputBlur-2Gn0-C { - border-color: var(--background-secondary); - background-color: var(--input-background); - } - - // Grids - .grid-2a45cj { - .header-1JzP0t { - background-color: var(--background-tertiary); - } - .rowWrapper-2RxnWO { - background-color: var(--background-secondary); - &:hover::before { - background-color: var(--background-secondary-alt); - } - &::after { - border-color: var(--background-secondary-alt) !important; - } + .divider-Qljx2k { + background-color: var(--background-modifier-accent); } } + // Paginator - .disabled-29cfPA, .disabled-29cfPA:hover { + .disabled-29cfPA, + .disabled-29cfPA:hover { border-color: var(--background-secondary); background-color: var(--background-tertiary); } @@ -103,36 +114,10 @@ body { background-color: var(--background-secondary); } - // Sidebar - .wrapper-28jGDw { - background-color: var(--background-tertiary); - .scrollbar-1NUwvY { - background-color: var(--background-tertiary) !important; - .pad-1eAWXq { - background-color: var(--background-tertiary) !important; - } - } - } - // Content .contentWrapper-3RqEiS { - background-color: var(--background-primary); - .scrollbar-1NUwvY { - background-color: var(--background-primary) !important; - } - .pad-1eAWXq { - background-color: var(--background-primary) !important; - } - .cardOptionTile-30nXFk:hover { - background-color: var(--background-modifier-hover); - } - .cardOptionTileSelected-wkswQf { - background-color: var(--background-modifier-active); - } - // Applications .cardLink-H6gvNe { - background-color: var(--background-secondary); &:hover { background-color: var(--background-secondary-alt); } @@ -144,10 +129,9 @@ body { .avatarUploaderInner-yEhTv5 { background-color: var(--background-primary); } - - // Server Insights - Partner - .accordionContainer-vSTU_l { - background-color: var(--background-tertiary); + // Applications - Rich Presence + .invite-1J5PX7 { + border-color: var(--background-modifier-accent); } } } \ No newline at end of file diff --git a/src/theme/pages/_discovery.scss b/src/theme/pages/_discovery.scss index aa602b6..f85d0ed 100644 --- a/src/theme/pages/_discovery.scss +++ b/src/theme/pages/_discovery.scss @@ -1,7 +1,4 @@ :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 { - .pageWrapper_a3a4ce { - background-color: var(--background-primary); - } .searchBox_d83b4d { background-color: var(--input-background); input { @@ -15,7 +12,7 @@ } } // Quests - .container_a56260, .bannerImage_fc867b { + .container_a56260 { background-color: var(--background-primary) !important; } .contentContainer_a56260 { diff --git a/src/theme/pages/_index.scss b/src/theme/pages/_index.scss index 1d7b4a2..c19fd03 100644 --- a/src/theme/pages/_index.scss +++ b/src/theme/pages/_index.scss @@ -1,8 +1,6 @@ @forward 'active-now'; -@forward 'app-directory'; @forward 'developers'; @forward 'discovery'; @forward 'members'; @forward 'server-guide'; -@forward 'server-shop'; -@forward 'shop'; +@forward 'server-shop'; \ No newline at end of file diff --git a/src/theme/pages/_members.scss b/src/theme/pages/_members.scss index 1463f67..cd49a5e 100644 --- a/src/theme/pages/_members.scss +++ b/src/theme/pages/_members.scss @@ -1,5 +1,4 @@ :is(.theme-dark, .theme-midnight) #app-mount .page_d20375 { - background-color: var(--background-primary) !important; .mainTableContainer_e23072 { background-color: var(--background-tertiary); } diff --git a/src/theme/pages/_server-guide.scss b/src/theme/pages/_server-guide.scss index 894774c..0e3b80e 100644 --- a/src/theme/pages/_server-guide.scss +++ b/src/theme/pages/_server-guide.scss @@ -5,10 +5,8 @@ background-color: var(--background-modifier-hover); } } - .clickableAction_e3f878 { - &:hover .action_e3f878 { - background-color: var(--background-modifier-hover); - } + .clickableAction_e3f878:hover .action_e3f878 { + background-color: var(--background-modifier-hover); } .action_e3f878 { background-color: var(--background-tertiary); diff --git a/src/theme/pages/_server-shop.scss b/src/theme/pages/_server-shop.scss index ee5ee24..1e21cf5 100644 --- a/src/theme/pages/_server-shop.scss +++ b/src/theme/pages/_server-shop.scss @@ -2,6 +2,6 @@ background-color: var(--background-primary); .opaqueBackground_eb6c38 { - background-color: var(--background-secondary-alt); + background-color: hsl(var(--primary-800-hsl)/0.85); } } \ No newline at end of file diff --git a/src/theme/pages/_shop.scss b/src/theme/pages/_shop.scss deleted file mode 100644 index 5b0b1fa..0000000 --- a/src/theme/pages/_shop.scss +++ /dev/null @@ -1,3 +0,0 @@ -:is(.theme-dark, .theme-midnight) #app-mount .shop_e77fa3 { - background-color: var(--background-primary); -} \ No newline at end of file diff --git a/src/theme/popouts/_activity-interactions.scss b/src/theme/popouts/_activity-interactions.scss new file mode 100644 index 0000000..10e8111 --- /dev/null +++ b/src/theme/popouts/_activity-interactions.scss @@ -0,0 +1,8 @@ +:is(.theme-dark, .theme-midnight) #app-mount .popout_a35965 { + .interactionsContainerHeader_a35965 { + border-top-color: var(--background-modifier-accent); + } + .shareToChannelButton_a35965 { + border-right-color: var(--background-secondary); + } +} \ No newline at end of file diff --git a/src/theme/popouts/_add-game.scss b/src/theme/popouts/_add-game.scss index d43c99d..b9d2478 100644 --- a/src/theme/popouts/_add-game.scss +++ b/src/theme/popouts/_add-game.scss @@ -1,3 +1,3 @@ :is(.theme-dark, .theme-midnight) #app-mount .addGamePopout_fd966d { - background-color: var(--background-primary); + background-color: var(--background-tertiary); } \ No newline at end of file diff --git a/src/theme/popouts/_client-theme-preview.scss b/src/theme/popouts/_client-theme-preview.scss new file mode 100644 index 0000000..5c307f2 --- /dev/null +++ b/src/theme/popouts/_client-theme-preview.scss @@ -0,0 +1,8 @@ +:is(.theme-dark, .theme-midnight) #app-mount .draggableContainer_ca37d0 { + .container_ca37d0 { + background-color: var(--background-tertiary); + } + .footerContainer_ca37d0 { + background: linear-gradient(180deg, hsla(var(--primary-760-hsl)/0) 0%, hsla(var(--primary-800-hsl)/0.9) 50%, var(--background-secondary-alt) 100%); + } +} \ No newline at end of file diff --git a/src/theme/popouts/_content-warning.scss b/src/theme/popouts/_content-warning.scss index 587c53f..ee5569d 100644 --- a/src/theme/popouts/_content-warning.scss +++ b/src/theme/popouts/_content-warning.scss @@ -1,6 +1,6 @@ :is(.theme-dark, .theme-midnight) #app-mount .contentWarningPopout_fa823b { background-color: var(--background-floating); .footer_fa823b { - background-color: var(--background-tertiary); + background-color: hsl(var(--primary-900-hsl)/0.8); } } \ No newline at end of file diff --git a/src/theme/popouts/_country-code.scss b/src/theme/popouts/_country-code.scss index 92f7114..54eff85 100644 --- a/src/theme/popouts/_country-code.scss +++ b/src/theme/popouts/_country-code.scss @@ -1,3 +1,3 @@ -:is(.theme-dark, .theme-midnight) #app-mount .phoneFieldPopout_ff761b { +:is(.theme-dark, .theme-midnight) #app-mount .popoutList_da8701 { background-color: var(--background-floating); } \ No newline at end of file diff --git a/src/theme/popouts/_index.scss b/src/theme/popouts/_index.scss index 6ea5bdf..65b6858 100644 --- a/src/theme/popouts/_index.scss +++ b/src/theme/popouts/_index.scss @@ -1,4 +1,6 @@ +@forward 'activity-interactions'; @forward 'add-game'; +@forward 'client-theme-preview'; @forward 'color-picker'; @forward 'content-warning'; @forward 'country-code'; @@ -9,5 +11,4 @@ @forward 'region-picker'; @forward 'screenshare'; @forward 'search'; -@forward 'soundboard'; -@forward 'webhook'; \ No newline at end of file +@forward 'soundboard'; \ No newline at end of file diff --git a/src/theme/popouts/_screenshare.scss b/src/theme/popouts/_screenshare.scss index 16461a7..9c9643a 100644 --- a/src/theme/popouts/_screenshare.scss +++ b/src/theme/popouts/_screenshare.scss @@ -1,6 +1,3 @@ :is(.theme-dark, .theme-midnight) #app-mount .streamPreview_adbea6 { background-color: var(--background-secondary); - .previewContainer_adbea6 { - background-color: var(--background-secondary-alt); - } } \ No newline at end of file diff --git a/src/theme/popouts/_search.scss b/src/theme/popouts/_search.scss index 4f02da3..e6d6623 100644 --- a/src/theme/popouts/_search.scss +++ b/src/theme/popouts/_search.scss @@ -9,17 +9,14 @@ .react-datepicker__header { background-color: var(--background-secondary); } - .react-datepicker__navigation, - .react-datepicker__navigation { - background-color: var(--background-secondary); - } .react-datepicker__current-month { - background-color: var(--background-secondary); + border-bottom-color: var(--background-modifier-accent); } - .react-datepicker__day--outside-month, - .react-datepicker__day--disabled { - background-color: var(--background-tertiary); + .react-datepicker__day { + &.react-datepicker__day--disabled, + &.react-datepicker__day--disabled:hover { + background-color: var(--background-tertiary); + } } - // .react-datepicker__day--disabled, .react-datepicker__day--outside-month, .react-datepicker__day.react-datepicker__day--disabled, .react-datepicker__day.react-datepicker__day--disabled:hover } } \ No newline at end of file diff --git a/src/theme/popouts/_webhook.scss b/src/theme/popouts/_webhook.scss deleted file mode 100644 index d06b2aa..0000000 --- a/src/theme/popouts/_webhook.scss +++ /dev/null @@ -1,3 +0,0 @@ -:is(.theme-dark, .theme-midnight) #app-mount .body_cf5d0a { - background-color: var(--background-secondary); -} \ No newline at end of file diff --git a/src/theme/settings/_content.scss b/src/theme/settings/_content.scss index d97ac6e..1596755 100644 --- a/src/theme/settings/_content.scss +++ b/src/theme/settings/_content.scss @@ -1,5 +1,5 @@ :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 { - .default_a467ac { + .default_a467ac:not(:hover) { background-color: var(--background-primary); } } \ No newline at end of file diff --git a/src/theme/settings/_guild.scss b/src/theme/settings/_guild.scss index 2baa1da..1d8e11a 100644 --- a/src/theme/settings/_guild.scss +++ b/src/theme/settings/_guild.scss @@ -4,15 +4,12 @@ background-color: var(--background-secondary-alt); } // Stickers - .tierHeaderContent_da77bd { - background-color: var(--background-secondary); - } .background_bfac79 { color: var(--background-secondary-alt); } // Custom Invite Link .prefixInput_a6236d { - background-color: var(--input-background); + background-color: hsl(var(--primary-700-hsl)/0.2); } // Safety Setup .backgroundContainer_ceff93 { @@ -33,17 +30,18 @@ // Audit Log .auditLog_eebd33 { border-color: var(--background-secondary); - .header_eebd33 { - background-color: var(--background-secondary); + .headerDefault_eebd33, + .headerClickable_eebd33 { + background-color: hsl(var(--primary-660-hsl)/0.3); } .headerExpanded_eebd33 { - background-color: var(--background-secondary-alt); + background-color: hsl(var(--primary-660-hsl)/0.5); } .divider_eebd33 { background-color: var(--background-modifier-accent); } .changeDetails_eebd33 { - background-color: var(--background-secondary); + background-color: hsl(var(--primary-660-hsl)/0.3); } } // Server Boost Status diff --git a/src/theme/settings/_sidebar.scss b/src/theme/settings/_sidebar.scss index 5da554b..7484813 100644 --- a/src/theme/settings/_sidebar.scss +++ b/src/theme/settings/_sidebar.scss @@ -1,5 +1,4 @@ :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 { - .sidebarRegion_c25c6d, .sidebarRegionScroller_c25c6d { background-color: var(--background-primary); } diff --git a/src/theme/settings/_user.scss b/src/theme/settings/_user.scss index 571afe2..558cfed 100644 --- a/src/theme/settings/_user.scss +++ b/src/theme/settings/_user.scss @@ -3,27 +3,13 @@ .cardPrimary_a298b8.outline_a298b8 { background-color: var(--background-secondary); } - // Connections - .connectContainer_e2a436 { - background-color: var(--background-secondary); - .wrapper_c36ce4:hover { - background-color: var(--background-modifier-hover); - } - } // Billing .paymentPane_f66684 { - background-color: var(--background-secondary); .expandedInfo_a28a08 { background-color: var(--background-primary); } - .paginator_f66684 { - background-color: var(--background-secondary); - .payment_a28a08 { - background-color: var(--background-secondary); - &.hoverablePayment_a28a08:hover { - background-color: var(--background-modifier-hover); - } - } + .hoverablePayment_a28a08:hover { + background-color: var(--background-modifier-hover); } .bottomDivider_f66684 { border-bottom-color: var(--background-modifier-accent); @@ -31,7 +17,6 @@ } .codeRedemptionRedirect_cb70f4 { border-color: var(--background-tertiary); - background-color: var(--background-secondary); } // Appearance .preview_a614a7 { @@ -44,14 +29,17 @@ } // Keybinds .container_c67e31 { - background-color: var(--input-background); + background-color: hsl(var(--primary-800-hsl)/0.6); + &:not(:hover, :focus-within) { + border-color: hsl(var(--primary-800-hsl)/0.8); + } } // Registered Games .game_fd966d { box-shadow: none; border-bottom: 1px solid var(--background-modifier-accent); .gameNameInput_fd966d:is(:hover, :focus) { - border-color: var(--background-tertiary); + border-color: hsl(var(--primary-800-hsl)/0.6); background-color: var(--background-secondary); } } diff --git a/src/theme/sidebar/_container.scss b/src/theme/sidebar/_container.scss index f7ae486..99bba67 100644 --- a/src/theme/sidebar/_container.scss +++ b/src/theme/sidebar/_container.scss @@ -1,11 +1,8 @@ -:is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 { - nav { +:is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 { + .sidebar_a4d4d9, + .container_ee69e0, + .sidebarContainer_a3a4ce, + .privateChannels_f0963d { background-color: var(--background-primary); } - [class*="scroller"] { - background-color: var(--background-primary); - &.fade_eed6a8 { - background-color: transparent; - } - } } \ No newline at end of file diff --git a/src/theme/sidebar/_dm-list.scss b/src/theme/sidebar/_dm-list.scss index a2033c3..2c2a891 100644 --- a/src/theme/sidebar/_dm-list.scss +++ b/src/theme/sidebar/_dm-list.scss @@ -1,8 +1,5 @@ :is(.theme-dark, .theme-midnight) .sidebar_a4d4d9 { - .searchBar_f0963d { - background-color: var(--background-primary); - .searchBarComponent_f0963d { - background-color: var(--background-secondary); - } + .searchBarComponent_f0963d { + background-color: var(--background-secondary); } } \ No newline at end of file diff --git a/src/theme/sidebar/_header.scss b/src/theme/sidebar/_header.scss index 62186b9..fceaffb 100644 --- a/src/theme/sidebar/_header.scss +++ b/src/theme/sidebar/_header.scss @@ -1,14 +1,5 @@ :is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 { - .container_fd6364:not(.hasBanner_fd6364) .header_fd6364 { - background-color: var(--background-primary); - &:hover { - background-color: var(--background-secondary); - } - } .bannerImage_fd6364:before { background: linear-gradient(to bottom, var(--primary-900), transparent 100%); } - .hasBanner_fd6364 [class*="scroller-"] { - background-color: transparent; - } } \ No newline at end of file From 23f76c52ad24ac712c8746b6fc40b7abb6005a44 Mon Sep 17 00:00:00 2001 From: Federico <38290480+FedeIlLeone@users.noreply.github.com> Date: Tue, 3 Sep 2024 19:29:38 +0200 Subject: [PATCH 2/6] chore: compile --- clients/amoled-cord.theme.css | 520 ++++++++++++++-------------------- clients/amoled-cord.user.css | 520 ++++++++++++++-------------------- src/amoled-cord.css | 520 ++++++++++++++-------------------- 3 files changed, 651 insertions(+), 909 deletions(-) diff --git a/clients/amoled-cord.theme.css b/clients/amoled-cord.theme.css index dcdc91b..8eb8440 100644 --- a/clients/amoled-cord.theme.css +++ b/clients/amoled-cord.theme.css @@ -84,6 +84,7 @@ html.theme-dark .theme-light .root_f9a4c9, --background-mobile-primary: var(--black) !important; --background-mobile-secondary: var(--primary-830) !important; --background-modifier-accent: hsl(var(--primary-760-hsl)/0.48) !important; + --background-modifier-accent-2: hsl(var(--primary-760-hsl)/0.48) !important; --background-modifier-active: hsl(var(--primary-760-hsl)/0.48) !important; --background-modifier-hover: hsl(var(--primary-760-hsl)/0.4) !important; --background-modifier-selected: hsl(var(--primary-760-hsl)/0.6) !important; @@ -96,6 +97,8 @@ html.theme-dark .theme-light .root_f9a4c9, --bg-base-secondary: var(--primary-830) !important; --bg-base-tertiary: var(--primary-860) !important; --bg-mod-faint: var(--black) !important; + --bg-mod-strong: hsl(var(--primary-760-hsl)/0.54) !important; + --bg-mod-subtle: hsl(var(--primary-760-hsl)/0.48) !important; --bg-surface-overlay: var(--primary-830) !important; --bg-surface-raised: var(--black) !important; --button-outline-primary-background: var(--primary-700) !important; @@ -104,62 +107,42 @@ html.theme-dark .theme-light .root_f9a4c9, --button-outline-primary-border: var(--primary-700) !important; --button-outline-primary-border-active: var(--primary-600) !important; --button-outline-primary-border-hover: var(--primary-630) !important; - --button-outline-primary-text: var(--white) !important; - --button-outline-primary-text-active: var(--white) !important; - --button-outline-primary-text-hover: var(--white) !important; --button-secondary-background: var(--primary-700) !important; --button-secondary-background-active: var(--primary-600) !important; --button-secondary-background-disabled: var(--primary-700) !important; --button-secondary-background-hover: var(--primary-630) !important; - --channel-icon: var(--primary-400) !important; + --card-primary-bg: var(--primary-800) !important; + --card-primary-pressed-bg: var(--primary-860) !important; + --card-secondary-bg: var(--primary-830) !important; + --card-secondary-pressed-bg: var(--primary-860) !important; --channel-text-area-placeholder: var(--primary-400) !important; - --channels-default: var(--primary-360) !important; --channeltextarea-background: var(--primary-830) !important; --chat-background: var(--black) !important; --chat-border: var(--primary-700) !important; --chat-input-container-background: var(--primary-600) !important; - --deprecated-card-bg: hsl(var(--primary-700-hsl)/0.6) !important; - --deprecated-card-editable-bg: hsl(var(--primary-700-hsl)/0.3) !important; - --deprecated-quickswitcher-input-background: var(--primary-400) !important; - --deprecated-quickswitcher-input-placeholder: hsl(var(--white-hsl)/0.3) !important; --deprecated-store-bg: var(--black) !important; - --deprecated-text-input-bg: var(--primary-700) !important; - --deprecated-text-input-border: hsl(var(--black-hsl)/0.3) !important; - --deprecated-text-input-border-disabled: var(--primary-700) !important; - --deprecated-text-input-border-hover: var(--primary-900) !important; - --deprecated-text-input-prefix: var(--primary-200) !important; - --header-primary: var(--primary-130) !important; - --header-secondary: var(--primary-345) !important; + --deprecated-text-input-bg: var(--primary-800) !important; + --deprecated-text-input-border-disabled: var(--primary-800) !important; --home-background: var(--black) !important; - --home-card-resting-border: hsl(var(--transparent-hsl)/0) !important; --input-background: var(--primary-800) !important; - --input-placeholder-text: var(--input-placeholder-text-dark) !important; - --interactive-active: var(--primary-130) !important; - --interactive-hover: var(--primary-230) !important; - --interactive-muted: var(--primary-500) !important; - --interactive-normal: var(--primary-345) !important; + --input-focused-border: hsl(var(--white-hsl)/0.03) !important; + --live-stage-tile-border: hsl(var(--primary-860-hsl)/0.6) !important; --modal-background: var(--primary-860) !important; --modal-footer-background: var(--primary-900) !important; - --scrollbar-auto-scrollbar-color-track: var(--primary-860) !important; --scrollbar-auto-scrollbar-color-thumb: var(--primary-800) !important; + --scrollbar-auto-scrollbar-color-track: var(--primary-860) !important; --scrollbar-auto-thumb: var(--primary-800) !important; --scrollbar-auto-track: var(--primary-860) !important; --scrollbar-thin-thumb: var(--primary-800) !important; - --scrollbar-thin-track: transparent !important; - --spoiler-hidden-background: var(--primary-700) !important; - --spoiler-revealed-background: var(--primary-660) !important; + --scrollbar-thin-track: hsl(var(--black-hsl)/0) !important; --text-muted: var(--primary-345) !important; --text-normal: var(--primary-300) !important; - --textbox-markdown-syntax: var(--primary-360) !important; --elevation-stroke: 0 0 0 1px hsl(var(--primary-600-hsl)/0.15) !important; --elevation-low: 0 1px 0 hsl(var(--primary-630-hsl)/0.2),0 1.5px 0 hsl(var(--primary-600-hsl)/0.05),0 2px 0 hsl(var(--primary-630-hsl)/0.05) !important; --elevation-medium: 0 4px 4px hsl(var(--black-500-hsl)/0.16) !important; --elevation-high: 0 8px 16px hsl(var(--black-500-hsl)/0.24) !important; --search-popout-option-fade: linear-gradient(90deg,hsl(var(--primary-830-hsl)/0),hsl(var(--primary-830-hsl)/1) 80%) !important; --search-popout-option-fade-hover: linear-gradient(90deg,hsl(var(--primary-800-hsl)/0),var(--primary-800) 50%) !important; - --legacy-elevation-low: 0 1px 5px 0 hsl(var(--black-500-hsl)/0.3); - --legacy-elevation-high: 0 2px 10px 0 hsl(var(--black-500-hsl)/0.2); - --legacy-elevation-border: 0 0 0 1px hsl(var(--primary-700-hsl)/0.6); } .theme-dark:not(.custom-profile-theme) { @@ -220,6 +203,11 @@ html.theme-dark .theme-light .root_f9a4c9, hsl(var(--primary-760-hsl) / 0.48) 100%, hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) ) !important; + --background-modifier-accent-2: color-mix( + in oklab, + hsl(var(--primary-760-hsl) / 0.48) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) + ) !important; --background-modifier-active: color-mix( in oklab, hsl(var(--primary-760-hsl) / 0.48) 100%, @@ -264,117 +252,122 @@ html.theme-dark .theme-light .root_f9a4c9, in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) - ); + ) !important; --bg-base-secondary: color-mix( in oklab, var(--primary-830) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) - ); + ) !important; --bg-base-tertiary: color-mix( in oklab, var(--primary-860) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) - ); + ) !important; --bg-mod-faint: color-mix( in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --bg-surface-overlay: color-mix( + --bg-mod-strong: color-mix( in oklab, - var(--primary-830) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + hsl(var(--primary-760-hsl) / 0.54) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.54) var(--theme-base-color-amount, 0%) ) !important; - --bg-surface-raised: color-mix( + --bg-mod-subtle: color-mix( in oklab, - var(--black) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + hsl(var(--primary-760-hsl) / 0.48) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) ) !important; - --channeltextarea-background: color-mix( + --bg-surface-overlay: color-mix( in oklab, var(--primary-830) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --chat-background: color-mix( + --bg-surface-raised: color-mix( in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --chat-border: color-mix( + --card-primary-bg: color-mix( in oklab, - var(--primary-700) 100%, + var(--primary-800) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --chat-input-container-background: color-mix( + --card-primary-pressed-bg: color-mix( in oklab, - var(--primary-600) 100%, + var(--primary-860) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-card-bg: color-mix( + --card-secondary-bg: color-mix( in oklab, - hsl(var(--primary-700-hsl) / 0.6) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%) + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-card-editable-bg: color-mix( + --card-secondary-pressed-bg: color-mix( in oklab, - hsl(var(--primary-700-hsl) / 0.3) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%) + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-quickswitcher-input-background: color-mix( + --channel-text-area-placeholder: color-mix( in oklab, var(--primary-400) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + var(--theme-text-color, black) var(--theme-text-color-amount, 0%) ) !important; - --deprecated-quickswitcher-input-placeholder: color-mix( + --channeltextarea-background: color-mix( in oklab, - hsl(var(--white-hsl) / 0.3) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%) + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-store-bg: color-mix( + --chat-background: color-mix( in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-text-input-bg: color-mix( + --chat-border: color-mix( in oklab, var(--primary-700) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-text-input-border: color-mix( - in oklab, - hsl(var(--black-hsl) / 0.3) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%) - ) !important; - --deprecated-text-input-border-disabled: color-mix( + --chat-input-container-background: color-mix( in oklab, - var(--primary-700) 100%, + var(--primary-600) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-text-input-border-hover: color-mix( + --deprecated-store-bg: color-mix( in oklab, - var(--primary-900) 100%, + var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-text-input-prefix: color-mix( - in oklab, - var(--primary-200) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + --deprecated-text-input-bg: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --deprecated-text-input-border-disabled: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --home-background: color-mix( in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --home-card-resting-border: color-mix( - in oklab, - hsl(var(--transparent-hsl) / 0) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) - ) !important; --input-background: color-mix( in oklab, var(--primary-800) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; + --input-focused-border: color-mix( + in oklab, + hsl(var(--white-hsl) / 0.03) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.03) var(--theme-base-color-amount, 0%) + ) !important; + --live-stage-tile-border: color-mix( + in oklab, + hsl(var(--primary-860-hsl) / 0.6) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%) + ) !important; --modal-background: color-mix( in oklab, var(--primary-860) 100%, @@ -411,19 +404,19 @@ html.theme-dark .theme-light .root_f9a4c9, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --scrollbar-thin-track: color-mix( - in oklab, - transparent, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) + in oklab, + hsl(var(--black-hsl) / 0) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) ) !important; - --spoiler-hidden-background: color-mix( + --text-muted: color-mix( in oklab, - var(--primary-700) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + var(--primary-345) 100%, + var(--theme-text-color, black) var(--theme-text-color-amount, 0%) ) !important; - --spoiler-revealed-background: color-mix( + --text-normal: color-mix( in oklab, - var(--primary-660) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + var(--primary-300) 100%, + var(--theme-text-color, black) var(--theme-text-color-amount, 0%) ) !important; } } @@ -450,7 +443,11 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--background-tertiary); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .mainCard_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a03b48, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_ddbb27, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a039eb { +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .mainCard_a6d69a:not(.container_a57509:is(.isOpen_a57509, :hover, :active), +.container_d331f1:is(.isOpen_d331f1, :active)), +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a03b48, +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_ddbb27, +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a039eb { background-color: var(--background-tertiary); } :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .matchingPostsRow_a6d69a { @@ -459,23 +456,17 @@ html.theme-dark .theme-light .root_f9a4c9, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .loadingCard_a6d69a { background-color: var(--background-tertiary); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a57509:hover { - background-color: var(--background-modifier-hover); -} -:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a57509:active { - background-color: var(--background-modifier-active); -} -:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a57509.isOpen_a57509 { - background-color: var(--background-modifier-selected); +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .sortDropdown_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tag_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tagsButton_a6d69a { + background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a57509 .textContentFooter_a57509 { - background: transparent; +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .pill_c993da.clickable_c993da:not(.disabled_c993da):hover { + background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_d331f1:active { - background-color: var(--background-modifier-active); +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .textContentFooter_a57509 { + background: linear-gradient(to top, hsl(var(--black-hsl)/1), hsl(var(--black-hsl)/0.97) 36px, hsl(var(--black-hsl)/0.4)); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_d331f1.isOpen_d331f1 { - background-color: var(--background-modifier-selected); +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .textContentFooter_a57509.noTags_a57509 { + background: linear-gradient(to top, hsl(var(--black-hsl)/1), hsl(var(--black-hsl)/0)); } :is(.theme-dark, .theme-midnight) #app-mount .tile_ab47a1 { @@ -485,19 +476,16 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--background-modifier-hover); } :is(.theme-dark, .theme-midnight) #app-mount .tile_ab47a1 .invalidPoop_ff31dd { - background-color: var(--background-secondary-alt); + background-color: hsl(var(--primary-700-hsl)/0.3); } :is(.theme-dark, .theme-midnight) #app-mount .invite_f61cb8 { - border-color: var(--background-secondary-alt); - background-color: var(--background-secondary); -} -:is(.theme-dark, .theme-midnight) #app-mount .container_a1531c { - background-color: var(--background-secondary); + border-color: hsl(var(--primary-800-hsl)/0.9); + background-color: hsl(var(--primary-830-hsl)/0.6); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .enabled_b97e9a[aria-checked=false] .answerInner_cf2c85:hover { +:is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .answer_cf2c85:hover .answerInner_cf2c85.currentlyVoting_cf2c85:not(.selected_cf2c85) { outline-color: var(--background-secondary-alt); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .normalStylesDefault_b5cb3c .votePercentageBar_cf2c85 { +:is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .votePercentageBar_cf2c85 { background-color: var(--background-secondary-alt); } @@ -526,6 +514,12 @@ html.theme-dark .theme-light .root_f9a4c9, :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .container_dc3fc4:hover { background-color: var(--background-modifier-hover); } +:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .colorable_ef18ee.primaryDark_ef18ee { + background-color: var(--background-secondary-alt); +} +:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .colorable_ef18ee.primaryDark_ef18ee.active_ef18ee, :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .colorable_ef18ee.primaryDark_ef18ee:hover { + background-color: var(--background-modifier-hover); +} :is(.theme-dark, .theme-midnight) .folder_bc7085.hover_bc7085 { background-color: var(--background-secondary-alt); @@ -536,13 +530,16 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--background-secondary-alt); } -:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac, :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac { +:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac:not(.buttonActive_adcaac), +:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac:not(.buttonActive_adcaac) { background-color: var(--button-secondary-background); } -:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac:hover, :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac:hover { +:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac:not(.buttonActive_adcaac):hover, +:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac:not(.buttonActive_adcaac):hover { background-color: var(--button-secondary-background-hover); } -:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac:active, :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac:active { +:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac:not(.buttonActive_adcaac):active, +:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac:not(.buttonActive_adcaac):active { background-color: var(--button-secondary-background-active); } @@ -561,9 +558,11 @@ html.theme-dark .theme-light .root_f9a4c9, :is(.theme-dark, .theme-midnight) .container_cbd271 { background-color: var(--background-primary); } +:is(.theme-dark, .theme-midnight) .container_cbd271 .container_c64476:not(.selected_c64476) { + background-color: var(--background-tertiary); +} -:is(.theme-dark, .theme-midnight) #app-mount .member_a31c43, -:is(.theme-dark, .theme-midnight) #app-mount .members_cbd271 { +:is(.theme-dark, .theme-midnight) #app-mount .member_cbd271, :is(.theme-dark, .theme-midnight) #app-mount .members_cbd271 { background-color: var(--background-primary); } @@ -589,13 +588,6 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--modal-footer-background); } -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .message_ddcc45 { - background-color: var(--background-primary); -} - -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9.rootWithShadow_f9a4c9 { - box-shadow: var(--dark-elevation-border), var(--dark-elevation-high); -} :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .footerSeparator_f9a4c9 { box-shadow: inset 0 1px 0 var(--modal-footer-background); } @@ -616,29 +608,14 @@ html.theme-dark .theme-light .root_f9a4c9, border-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9.uploadModal_f82cc7 { - background-color: var(--modal-background); -} -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9.uploadModal_f82cc7 .footer_f82cc7 { - box-shadow: inset 0 1px 0 hsl(var(--primary-900-hsl)/0.6); +:is(.theme-dark, .theme-midnight) #app-mount .uploadModal_f82cc7 .footer_f82cc7 { background-color: var(--modal-footer-background); } :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .header_da6bd8 { - box-shadow: none; background-color: var(--modal-background); } -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .sectionContent_da6bd8 { - background-color: var(--background-secondary); -} -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .channels_b3d000 { - border-color: var(--background-secondary-alt); - background-color: var(--background-secondary); -} -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .cardPrimary_a298b8 { - background-color: var(--background-secondary); -} -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .default_a467ac { +:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .default_a467ac:not(:hover) { background-color: var(--background-primary); } @@ -646,7 +623,7 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--background-secondary); } :is(.theme-dark, .theme-midnight) #app-mount .promptContent_cd377c .overlay_cd377c { - background: none !important; + background: linear-gradient(to top, hsl(var(--primary-860-hsl)), hsl(var(--primary-860-hsl)/0)) !important; } :is(.theme-dark, .theme-midnight) #app-mount .voters_cbdbf0 { @@ -761,145 +738,118 @@ html.theme-dark .theme-light .root_f9a4c9, :is(.theme-dark, .theme-midnight) #app-mount .nowPlayingColumn_c2739c .separator_cd82a7 { background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .nowPlayingColumn_c2739c .applicationStreamingPreviewWrapper_cd82a7 { - background-color: var(--background-secondary-alt); -} -:is(.theme-dark, .theme-midnight) #app-mount .directoryContainer_da3f59 { +.theme-dark body .wrapper-28jGDw { background-color: var(--background-primary); } - -body .colorLight-1o6rnK { - background-color: var(--background-tertiary); +.theme-dark body .hasBorder-17PTeu { + border-bottom-color: var(--background-modifier-accent); } -body .borderPrimary-1l1Cvj { +.theme-dark body .searchContainer-2duiLS:is(:hover) button { border-color: var(--background-secondary); + background-color: var(--input-background); } -body .divider-_0um2u { - background-color: var(--background-modifier-accent); +.theme-dark body .contentWrapper-1Cwe5m hr { + background-color: hsl(var(--primary-760-hsl)/0.6); } -body .hasBorder-17PTeu { - border-bottom-color: var(--background-modifier-accent); +.theme-dark body .pre-398F0p { + background-color: var(--background-tertiary); } -body .searchContainer-2duiLS:is(:hover) button { +.theme-dark body .mdxCard-iv9u29:hover { + background-color: var(--card-secondary-pressed-bg); +} +.theme-dark body .colorDark-311Rq5, +.theme-dark body .colorLight-1o6rnK { + background-color: var(--background-tertiary); +} +.theme-dark body .borderPrimary-1l1Cvj { border-color: var(--background-secondary); - background-color: var(--input-background); } -body .h6-3NIpOq { - background: var(--background-primary); +.theme-dark body .tooltip-2YjxAH { + background-color: var(--background-floating); +} +.theme-dark body .top-3SkhL3:after { + border-top-color: var(--background-floating); +} +.theme-dark body .bottom-1VilIE:after { + border-bottom-color: var(--background-floating); +} +.theme-dark body .left-3N6_YX:after { + border-left-color: var(--background-floating); +} +.theme-dark body .right-2v0SN-:after { + border-right-color: var(--background-floating); +} +.theme-dark body .grey-IHse8x { + background-color: var(--background-secondary-alt); +} +.theme-dark body .grey-IHse8x:after { + border-top-color: var(--background-secondary-alt) !important; } -body .scrollbar-1NUwvY .thumb-3r19ww { - background-color: var(--background-secondary-alt) !important; +.theme-dark body .divider-_0um2u { + background-color: var(--background-modifier-accent); } -body [class$=control] { +.theme-dark body [class$=-control] { border-color: var(--background-secondary); } -body [class$=control]:hover { +.theme-dark body [class$=-control]:hover { border-color: var(--background-secondary-alt); } -body .css-1129voj-menu { +.theme-dark body .css-gqriav-menu { border-color: var(--background-secondary); box-shadow: var(--background-secondary) 0px 1px 5px 0px; background-color: var(--background-floating); } -body .css-lbnt4y-option { +.theme-dark body .css-17vfzgn-option { background-color: var(--background-modifier-selected); } -body .css-1jrkz9i-option { +.theme-dark body .css-ic7iun-option { background-color: var(--background-modifier-hover); } -body .modalContent-31OOYM { - box-shadow: var(--dark-elevation-border), var(--dark-elevation-high); +.theme-dark body .modalContent-31OOYM { background-color: var(--modal-background); } -body .modalContent-31OOYM .modalFooter-3193QM { +.theme-dark body .modalContent-31OOYM .modalFooter-3193QM { border: none; - box-shadow: inset 0 1px 0 hsl(var(--primary-900-hsl)/0.6); background-color: var(--modal-footer-background); } -body .input-2g-os5, body .inputWrapper-3a4ywb { - border-color: var(--background-secondary); - background-color: var(--input-background); -} -body .multiInputBlur-2Gn0-C { - border-color: var(--background-secondary); - background-color: var(--input-background); -} -body .grid-2a45cj .header-1JzP0t { - background-color: var(--background-tertiary); -} -body .grid-2a45cj .rowWrapper-2RxnWO { - background-color: var(--background-secondary); -} -body .grid-2a45cj .rowWrapper-2RxnWO:hover::before { - background-color: var(--background-secondary-alt); -} -body .grid-2a45cj .rowWrapper-2RxnWO::after { - border-color: var(--background-secondary-alt) !important; +.theme-dark body .modalContent-31OOYM .divider-Qljx2k { + background-color: var(--background-modifier-accent); } -body .disabled-29cfPA, body .disabled-29cfPA:hover { +.theme-dark body .disabled-29cfPA, +.theme-dark body .disabled-29cfPA:hover { border-color: var(--background-secondary); background-color: var(--background-tertiary); } -body .disabled-29cfPA + .pageButtonNext-2_bbdk, -body .disabled-29cfPA + .pageCount-17vMJm, -body .disabled-29cfPA:hover + .pageButtonNext-2_bbdk, -body .disabled-29cfPA:hover + .pageCount-17vMJm, -body .pageButtonNext-2_bbdk, -body .pageCount-17vMJm, -body .pageButtonNext-2_bbdk, -body .pageButtonPrev-3q9rh8 { +.theme-dark body .disabled-29cfPA + .pageButtonNext-2_bbdk, +.theme-dark body .disabled-29cfPA + .pageCount-17vMJm, +.theme-dark body .disabled-29cfPA:hover + .pageButtonNext-2_bbdk, +.theme-dark body .disabled-29cfPA:hover + .pageCount-17vMJm, +.theme-dark body .pageButtonNext-2_bbdk, +.theme-dark body .pageCount-17vMJm, +.theme-dark body .pageButtonNext-2_bbdk, +.theme-dark body .pageButtonPrev-3q9rh8 { border-color: var(--background-secondary) !important; background-color: var(--background-tertiary); } -body .pageButtonNext-2_bbdk:hover, -body .pageButtonPrev-3q9rh8:hover { +.theme-dark body .pageButtonNext-2_bbdk:hover, +.theme-dark body .pageButtonPrev-3q9rh8:hover { border-color: var(--background-secondary-alt) !important; background-color: var(--background-secondary); } -body .wrapper-28jGDw { - background-color: var(--background-tertiary); -} -body .wrapper-28jGDw .scrollbar-1NUwvY { - background-color: var(--background-tertiary) !important; -} -body .wrapper-28jGDw .scrollbar-1NUwvY .pad-1eAWXq { - background-color: var(--background-tertiary) !important; -} -body .contentWrapper-3RqEiS { - background-color: var(--background-primary); -} -body .contentWrapper-3RqEiS .scrollbar-1NUwvY { - background-color: var(--background-primary) !important; -} -body .contentWrapper-3RqEiS .pad-1eAWXq { - background-color: var(--background-primary) !important; -} -body .contentWrapper-3RqEiS .cardOptionTile-30nXFk:hover { - background-color: var(--background-modifier-hover); -} -body .contentWrapper-3RqEiS .cardOptionTileSelected-wkswQf { - background-color: var(--background-modifier-active); -} -body .contentWrapper-3RqEiS .cardLink-H6gvNe { - background-color: var(--background-secondary); -} -body .contentWrapper-3RqEiS .cardLink-H6gvNe:hover { +.theme-dark body .contentWrapper-3RqEiS .cardLink-H6gvNe:hover { background-color: var(--background-secondary-alt); } -body .contentWrapper-3RqEiS .cardLink-H6gvNe .cardImagePlaceholder-EjWnzT { +.theme-dark body .contentWrapper-3RqEiS .cardLink-H6gvNe .cardImagePlaceholder-EjWnzT { background-color: var(--background-primary); } -body .contentWrapper-3RqEiS .avatarUploaderInner-yEhTv5 { +.theme-dark body .contentWrapper-3RqEiS .avatarUploaderInner-yEhTv5 { background-color: var(--background-primary); } -body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { - background-color: var(--background-tertiary); +.theme-dark body .contentWrapper-3RqEiS .invite-1J5PX7 { + border-color: var(--background-modifier-accent); } -:is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .pageWrapper_a3a4ce { - background-color: var(--background-primary); -} :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .searchBox_d83b4d { background-color: var(--input-background); } @@ -912,7 +862,7 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .searchBox_d83b4d .searchIcon_f69601, :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .searchBox_d83b4d .closeIcon_f69601 { color: var(--interactive-normal); } -:is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .container_a56260, :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .bannerImage_fc867b { +:is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .container_a56260 { background-color: var(--background-primary) !important; } :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .contentContainer_a56260 { @@ -922,9 +872,6 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { background: linear-gradient(0deg, var(--background-secondary-alt) 0%, hsla(var(--primary-800-hsl)/0.95) 20.31%, hsla(var(--primary-800-hsl)/0) 100%); } -:is(.theme-dark, .theme-midnight) #app-mount .page_d20375 { - background-color: var(--background-primary) !important; -} :is(.theme-dark, .theme-midnight) #app-mount .page_d20375 .mainTableContainer_e23072 { background-color: var(--background-tertiary); } @@ -956,15 +903,25 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { background-color: var(--background-primary); } :is(.theme-dark, .theme-midnight) #app-mount .container_cac32e .opaqueBackground_eb6c38 { - background-color: var(--background-secondary-alt); + background-color: hsl(var(--primary-800-hsl)/0.85); } -:is(.theme-dark, .theme-midnight) #app-mount .shop_e77fa3 { - background-color: var(--background-primary); +:is(.theme-dark, .theme-midnight) #app-mount .popout_a35965 .interactionsContainerHeader_a35965 { + border-top-color: var(--background-modifier-accent); +} +:is(.theme-dark, .theme-midnight) #app-mount .popout_a35965 .shareToChannelButton_a35965 { + border-right-color: var(--background-secondary); } :is(.theme-dark, .theme-midnight) #app-mount .addGamePopout_fd966d { - background-color: var(--background-primary); + background-color: var(--background-tertiary); +} + +:is(.theme-dark, .theme-midnight) #app-mount .draggableContainer_ca37d0 .container_ca37d0 { + background-color: var(--background-tertiary); +} +:is(.theme-dark, .theme-midnight) #app-mount .draggableContainer_ca37d0 .footerContainer_ca37d0 { + background: linear-gradient(180deg, hsla(var(--primary-760-hsl)/0) 0%, hsla(var(--primary-800-hsl)/0.9) 50%, var(--background-secondary-alt) 100%); } :is(.theme-dark, .theme-midnight) #app-mount .customColorPicker_b91d66 { @@ -977,10 +934,10 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { background-color: var(--background-floating); } :is(.theme-dark, .theme-midnight) #app-mount .contentWarningPopout_fa823b .footer_fa823b { - background-color: var(--background-tertiary); + background-color: hsl(var(--primary-900-hsl)/0.8); } -:is(.theme-dark, .theme-midnight) #app-mount .phoneFieldPopout_ff761b { +:is(.theme-dark, .theme-midnight) #app-mount .popoutList_da8701 { background-color: var(--background-floating); } @@ -1015,9 +972,6 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { :is(.theme-dark, .theme-midnight) #app-mount .streamPreview_adbea6 { background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .streamPreview_adbea6 .previewContainer_adbea6 { - background-color: var(--background-secondary-alt); -} :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .focused_eedf95 { background-color: var(--background-secondary); @@ -1028,15 +982,10 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__header { background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__navigation, -:is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__navigation { - background-color: var(--background-secondary); -} :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__current-month { - background-color: var(--background-secondary); + border-bottom-color: var(--background-modifier-accent); } -:is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__day--outside-month, -:is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__day--disabled { +:is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__day.react-datepicker__day--disabled, :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__day.react-datepicker__day--disabled:hover { background-color: var(--background-tertiary); } @@ -1047,25 +996,18 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { background-color: var(--background-primary); } -:is(.theme-dark, .theme-midnight) #app-mount .body_cf5d0a { - background-color: var(--background-secondary); -} - -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .default_a467ac { +:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .default_a467ac:not(:hover) { background-color: var(--background-primary); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .avatarUploaderInnerSquareDisabled_e9b3be { background-color: var(--background-secondary-alt); } -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .tierHeaderContent_da77bd { - background-color: var(--background-secondary); -} :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .background_bfac79 { color: var(--background-secondary-alt); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .prefixInput_a6236d { - background-color: var(--input-background); + background-color: hsl(var(--primary-700-hsl)/0.2); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .backgroundContainer_ceff93 { background-color: var(--background-secondary-alt); @@ -1085,23 +1027,23 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 { border-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .header_eebd33 { - background-color: var(--background-secondary); +:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .headerDefault_eebd33, +:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .headerClickable_eebd33 { + background-color: hsl(var(--primary-660-hsl)/0.3); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .headerExpanded_eebd33 { - background-color: var(--background-secondary-alt); + background-color: hsl(var(--primary-660-hsl)/0.5); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .divider_eebd33 { background-color: var(--background-modifier-accent); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .changeDetails_eebd33 { - background-color: var(--background-secondary); + background-color: hsl(var(--primary-660-hsl)/0.3); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .tierBody_da77bd { background-color: var(--background-secondary-alt); } -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .sidebarRegion_c25c6d, :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .sidebarRegionScroller_c25c6d { background-color: var(--background-primary); } @@ -1109,25 +1051,10 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .cardPrimary_a298b8.outline_a298b8 { background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .connectContainer_e2a436 { - background-color: var(--background-secondary); -} -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .connectContainer_e2a436 .wrapper_c36ce4:hover { - background-color: var(--background-modifier-hover); -} -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 { - background-color: var(--background-secondary); -} :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .expandedInfo_a28a08 { background-color: var(--background-primary); } -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .paginator_f66684 { - background-color: var(--background-secondary); -} -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .paginator_f66684 .payment_a28a08 { - background-color: var(--background-secondary); -} -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .paginator_f66684 .payment_a28a08.hoverablePayment_a28a08:hover { +:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .hoverablePayment_a28a08:hover { background-color: var(--background-modifier-hover); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .bottomDivider_f66684 { @@ -1135,7 +1062,6 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .codeRedemptionRedirect_cb70f4 { border-color: var(--background-tertiary); - background-color: var(--background-secondary); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .preview_a614a7 { border-color: var(--background-secondary); @@ -1145,14 +1071,17 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { color: var(--background-primary); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .container_c67e31 { - background-color: var(--input-background); + background-color: hsl(var(--primary-800-hsl)/0.6); +} +:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .container_c67e31:not(:hover, :focus-within) { + border-color: hsl(var(--primary-800-hsl)/0.8); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .game_fd966d { box-shadow: none; border-bottom: 1px solid var(--background-modifier-accent); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .game_fd966d .gameNameInput_fd966d:is(:hover, :focus) { - border-color: var(--background-tertiary); + border-color: hsl(var(--primary-800-hsl)/0.6); background-color: var(--background-secondary); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .option_b877fa:not(.selected_b877fa, :hover) { @@ -1162,35 +1091,20 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { color: var(--background-accent); } -:is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 nav { +:is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .sidebar_a4d4d9, +:is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .container_ee69e0, +:is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .sidebarContainer_a3a4ce, +:is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .privateChannels_f0963d { background-color: var(--background-primary); } -:is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 [class*=scroller] { - background-color: var(--background-primary); -} -:is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 [class*=scroller].fade_eed6a8 { - background-color: transparent; -} -:is(.theme-dark, .theme-midnight) .sidebar_a4d4d9 .searchBar_f0963d { - background-color: var(--background-primary); -} -:is(.theme-dark, .theme-midnight) .sidebar_a4d4d9 .searchBar_f0963d .searchBarComponent_f0963d { +:is(.theme-dark, .theme-midnight) .sidebar_a4d4d9 .searchBarComponent_f0963d { background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 .container_fd6364:not(.hasBanner_fd6364) .header_fd6364 { - background-color: var(--background-primary); -} -:is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 .container_fd6364:not(.hasBanner_fd6364) .header_fd6364:hover { - background-color: var(--background-secondary); -} :is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 .bannerImage_fd6364:before { background: linear-gradient(to bottom, var(--primary-900), transparent 100%); } -:is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 .hasBanner_fd6364 [class*=scroller-] { - background-color: transparent; -} :is(.theme-dark, .theme-midnight) .sidebar_a4d4d9 .panels_a4d4d9 { background-color: var(--background-primary); diff --git a/clients/amoled-cord.user.css b/clients/amoled-cord.user.css index 463358c..cd4befd 100644 --- a/clients/amoled-cord.user.css +++ b/clients/amoled-cord.user.css @@ -83,6 +83,7 @@ --background-mobile-primary: var(--black) !important; --background-mobile-secondary: var(--primary-830) !important; --background-modifier-accent: hsl(var(--primary-760-hsl)/0.48) !important; + --background-modifier-accent-2: hsl(var(--primary-760-hsl)/0.48) !important; --background-modifier-active: hsl(var(--primary-760-hsl)/0.48) !important; --background-modifier-hover: hsl(var(--primary-760-hsl)/0.4) !important; --background-modifier-selected: hsl(var(--primary-760-hsl)/0.6) !important; @@ -95,6 +96,8 @@ --bg-base-secondary: var(--primary-830) !important; --bg-base-tertiary: var(--primary-860) !important; --bg-mod-faint: var(--black) !important; + --bg-mod-strong: hsl(var(--primary-760-hsl)/0.54) !important; + --bg-mod-subtle: hsl(var(--primary-760-hsl)/0.48) !important; --bg-surface-overlay: var(--primary-830) !important; --bg-surface-raised: var(--black) !important; --button-outline-primary-background: var(--primary-700) !important; @@ -103,62 +106,42 @@ --button-outline-primary-border: var(--primary-700) !important; --button-outline-primary-border-active: var(--primary-600) !important; --button-outline-primary-border-hover: var(--primary-630) !important; - --button-outline-primary-text: var(--white) !important; - --button-outline-primary-text-active: var(--white) !important; - --button-outline-primary-text-hover: var(--white) !important; --button-secondary-background: var(--primary-700) !important; --button-secondary-background-active: var(--primary-600) !important; --button-secondary-background-disabled: var(--primary-700) !important; --button-secondary-background-hover: var(--primary-630) !important; - --channel-icon: var(--primary-400) !important; + --card-primary-bg: var(--primary-800) !important; + --card-primary-pressed-bg: var(--primary-860) !important; + --card-secondary-bg: var(--primary-830) !important; + --card-secondary-pressed-bg: var(--primary-860) !important; --channel-text-area-placeholder: var(--primary-400) !important; - --channels-default: var(--primary-360) !important; --channeltextarea-background: var(--primary-830) !important; --chat-background: var(--black) !important; --chat-border: var(--primary-700) !important; --chat-input-container-background: var(--primary-600) !important; - --deprecated-card-bg: hsl(var(--primary-700-hsl)/0.6) !important; - --deprecated-card-editable-bg: hsl(var(--primary-700-hsl)/0.3) !important; - --deprecated-quickswitcher-input-background: var(--primary-400) !important; - --deprecated-quickswitcher-input-placeholder: hsl(var(--white-hsl)/0.3) !important; --deprecated-store-bg: var(--black) !important; - --deprecated-text-input-bg: var(--primary-700) !important; - --deprecated-text-input-border: hsl(var(--black-hsl)/0.3) !important; - --deprecated-text-input-border-disabled: var(--primary-700) !important; - --deprecated-text-input-border-hover: var(--primary-900) !important; - --deprecated-text-input-prefix: var(--primary-200) !important; - --header-primary: var(--primary-130) !important; - --header-secondary: var(--primary-345) !important; + --deprecated-text-input-bg: var(--primary-800) !important; + --deprecated-text-input-border-disabled: var(--primary-800) !important; --home-background: var(--black) !important; - --home-card-resting-border: hsl(var(--transparent-hsl)/0) !important; --input-background: var(--primary-800) !important; - --input-placeholder-text: var(--input-placeholder-text-dark) !important; - --interactive-active: var(--primary-130) !important; - --interactive-hover: var(--primary-230) !important; - --interactive-muted: var(--primary-500) !important; - --interactive-normal: var(--primary-345) !important; + --input-focused-border: hsl(var(--white-hsl)/0.03) !important; + --live-stage-tile-border: hsl(var(--primary-860-hsl)/0.6) !important; --modal-background: var(--primary-860) !important; --modal-footer-background: var(--primary-900) !important; - --scrollbar-auto-scrollbar-color-track: var(--primary-860) !important; --scrollbar-auto-scrollbar-color-thumb: var(--primary-800) !important; + --scrollbar-auto-scrollbar-color-track: var(--primary-860) !important; --scrollbar-auto-thumb: var(--primary-800) !important; --scrollbar-auto-track: var(--primary-860) !important; --scrollbar-thin-thumb: var(--primary-800) !important; - --scrollbar-thin-track: transparent !important; - --spoiler-hidden-background: var(--primary-700) !important; - --spoiler-revealed-background: var(--primary-660) !important; + --scrollbar-thin-track: hsl(var(--black-hsl)/0) !important; --text-muted: var(--primary-345) !important; --text-normal: var(--primary-300) !important; - --textbox-markdown-syntax: var(--primary-360) !important; --elevation-stroke: 0 0 0 1px hsl(var(--primary-600-hsl)/0.15) !important; --elevation-low: 0 1px 0 hsl(var(--primary-630-hsl)/0.2),0 1.5px 0 hsl(var(--primary-600-hsl)/0.05),0 2px 0 hsl(var(--primary-630-hsl)/0.05) !important; --elevation-medium: 0 4px 4px hsl(var(--black-500-hsl)/0.16) !important; --elevation-high: 0 8px 16px hsl(var(--black-500-hsl)/0.24) !important; --search-popout-option-fade: linear-gradient(90deg,hsl(var(--primary-830-hsl)/0),hsl(var(--primary-830-hsl)/1) 80%) !important; --search-popout-option-fade-hover: linear-gradient(90deg,hsl(var(--primary-800-hsl)/0),var(--primary-800) 50%) !important; - --legacy-elevation-low: 0 1px 5px 0 hsl(var(--black-500-hsl)/0.3); - --legacy-elevation-high: 0 2px 10px 0 hsl(var(--black-500-hsl)/0.2); - --legacy-elevation-border: 0 0 0 1px hsl(var(--primary-700-hsl)/0.6); } .theme-dark:not(.custom-profile-theme) { @@ -219,6 +202,11 @@ hsl(var(--primary-760-hsl) / 0.48) 100%, hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) ) !important; + --background-modifier-accent-2: color-mix( + in oklab, + hsl(var(--primary-760-hsl) / 0.48) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) + ) !important; --background-modifier-active: color-mix( in oklab, hsl(var(--primary-760-hsl) / 0.48) 100%, @@ -263,117 +251,122 @@ in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) - ); + ) !important; --bg-base-secondary: color-mix( in oklab, var(--primary-830) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) - ); + ) !important; --bg-base-tertiary: color-mix( in oklab, var(--primary-860) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) - ); + ) !important; --bg-mod-faint: color-mix( in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --bg-surface-overlay: color-mix( + --bg-mod-strong: color-mix( in oklab, - var(--primary-830) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + hsl(var(--primary-760-hsl) / 0.54) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.54) var(--theme-base-color-amount, 0%) ) !important; - --bg-surface-raised: color-mix( + --bg-mod-subtle: color-mix( in oklab, - var(--black) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + hsl(var(--primary-760-hsl) / 0.48) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) ) !important; - --channeltextarea-background: color-mix( + --bg-surface-overlay: color-mix( in oklab, var(--primary-830) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --chat-background: color-mix( + --bg-surface-raised: color-mix( in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --chat-border: color-mix( + --card-primary-bg: color-mix( in oklab, - var(--primary-700) 100%, + var(--primary-800) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --chat-input-container-background: color-mix( + --card-primary-pressed-bg: color-mix( in oklab, - var(--primary-600) 100%, + var(--primary-860) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-card-bg: color-mix( + --card-secondary-bg: color-mix( in oklab, - hsl(var(--primary-700-hsl) / 0.6) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%) + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-card-editable-bg: color-mix( + --card-secondary-pressed-bg: color-mix( in oklab, - hsl(var(--primary-700-hsl) / 0.3) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%) + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-quickswitcher-input-background: color-mix( + --channel-text-area-placeholder: color-mix( in oklab, var(--primary-400) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + var(--theme-text-color, black) var(--theme-text-color-amount, 0%) ) !important; - --deprecated-quickswitcher-input-placeholder: color-mix( + --channeltextarea-background: color-mix( in oklab, - hsl(var(--white-hsl) / 0.3) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%) + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-store-bg: color-mix( + --chat-background: color-mix( in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-text-input-bg: color-mix( + --chat-border: color-mix( in oklab, var(--primary-700) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-text-input-border: color-mix( - in oklab, - hsl(var(--black-hsl) / 0.3) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%) - ) !important; - --deprecated-text-input-border-disabled: color-mix( + --chat-input-container-background: color-mix( in oklab, - var(--primary-700) 100%, + var(--primary-600) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-text-input-border-hover: color-mix( + --deprecated-store-bg: color-mix( in oklab, - var(--primary-900) 100%, + var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-text-input-prefix: color-mix( - in oklab, - var(--primary-200) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + --deprecated-text-input-bg: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --deprecated-text-input-border-disabled: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --home-background: color-mix( in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --home-card-resting-border: color-mix( - in oklab, - hsl(var(--transparent-hsl) / 0) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) - ) !important; --input-background: color-mix( in oklab, var(--primary-800) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; + --input-focused-border: color-mix( + in oklab, + hsl(var(--white-hsl) / 0.03) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.03) var(--theme-base-color-amount, 0%) + ) !important; + --live-stage-tile-border: color-mix( + in oklab, + hsl(var(--primary-860-hsl) / 0.6) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%) + ) !important; --modal-background: color-mix( in oklab, var(--primary-860) 100%, @@ -410,19 +403,19 @@ var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --scrollbar-thin-track: color-mix( - in oklab, - transparent, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) + in oklab, + hsl(var(--black-hsl) / 0) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) ) !important; - --spoiler-hidden-background: color-mix( + --text-muted: color-mix( in oklab, - var(--primary-700) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + var(--primary-345) 100%, + var(--theme-text-color, black) var(--theme-text-color-amount, 0%) ) !important; - --spoiler-revealed-background: color-mix( + --text-normal: color-mix( in oklab, - var(--primary-660) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + var(--primary-300) 100%, + var(--theme-text-color, black) var(--theme-text-color-amount, 0%) ) !important; } } @@ -449,7 +442,11 @@ background-color: var(--background-tertiary); } - :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .mainCard_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a03b48, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_ddbb27, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a039eb { + :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .mainCard_a6d69a:not(.container_a57509:is(.isOpen_a57509, :hover, :active), + .container_d331f1:is(.isOpen_d331f1, :active)), + :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a03b48, + :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_ddbb27, + :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a039eb { background-color: var(--background-tertiary); } :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .matchingPostsRow_a6d69a { @@ -458,23 +455,17 @@ :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .loadingCard_a6d69a { background-color: var(--background-tertiary); } - :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a57509:hover { - background-color: var(--background-modifier-hover); - } - :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a57509:active { - background-color: var(--background-modifier-active); - } - :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a57509.isOpen_a57509 { - background-color: var(--background-modifier-selected); + :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .sortDropdown_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tag_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tagsButton_a6d69a { + background-color: var(--background-secondary); } - :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a57509 .textContentFooter_a57509 { - background: transparent; + :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .pill_c993da.clickable_c993da:not(.disabled_c993da):hover { + background-color: var(--background-secondary); } - :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_d331f1:active { - background-color: var(--background-modifier-active); + :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .textContentFooter_a57509 { + background: linear-gradient(to top, hsl(var(--black-hsl)/1), hsl(var(--black-hsl)/0.97) 36px, hsl(var(--black-hsl)/0.4)); } - :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_d331f1.isOpen_d331f1 { - background-color: var(--background-modifier-selected); + :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .textContentFooter_a57509.noTags_a57509 { + background: linear-gradient(to top, hsl(var(--black-hsl)/1), hsl(var(--black-hsl)/0)); } :is(.theme-dark, .theme-midnight) #app-mount .tile_ab47a1 { @@ -484,19 +475,16 @@ background-color: var(--background-modifier-hover); } :is(.theme-dark, .theme-midnight) #app-mount .tile_ab47a1 .invalidPoop_ff31dd { - background-color: var(--background-secondary-alt); + background-color: hsl(var(--primary-700-hsl)/0.3); } :is(.theme-dark, .theme-midnight) #app-mount .invite_f61cb8 { - border-color: var(--background-secondary-alt); - background-color: var(--background-secondary); - } - :is(.theme-dark, .theme-midnight) #app-mount .container_a1531c { - background-color: var(--background-secondary); + border-color: hsl(var(--primary-800-hsl)/0.9); + background-color: hsl(var(--primary-830-hsl)/0.6); } - :is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .enabled_b97e9a[aria-checked=false] .answerInner_cf2c85:hover { + :is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .answer_cf2c85:hover .answerInner_cf2c85.currentlyVoting_cf2c85:not(.selected_cf2c85) { outline-color: var(--background-secondary-alt); } - :is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .normalStylesDefault_b5cb3c .votePercentageBar_cf2c85 { + :is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .votePercentageBar_cf2c85 { background-color: var(--background-secondary-alt); } @@ -525,6 +513,12 @@ :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .container_dc3fc4:hover { background-color: var(--background-modifier-hover); } + :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .colorable_ef18ee.primaryDark_ef18ee { + background-color: var(--background-secondary-alt); + } + :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .colorable_ef18ee.primaryDark_ef18ee.active_ef18ee, :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .colorable_ef18ee.primaryDark_ef18ee:hover { + background-color: var(--background-modifier-hover); + } :is(.theme-dark, .theme-midnight) .folder_bc7085.hover_bc7085 { background-color: var(--background-secondary-alt); @@ -535,13 +529,16 @@ background-color: var(--background-secondary-alt); } - :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac, :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac { + :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac:not(.buttonActive_adcaac), + :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac:not(.buttonActive_adcaac) { background-color: var(--button-secondary-background); } - :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac:hover, :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac:hover { + :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac:not(.buttonActive_adcaac):hover, + :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac:not(.buttonActive_adcaac):hover { background-color: var(--button-secondary-background-hover); } - :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac:active, :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac:active { + :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac:not(.buttonActive_adcaac):active, + :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac:not(.buttonActive_adcaac):active { background-color: var(--button-secondary-background-active); } @@ -560,9 +557,11 @@ :is(.theme-dark, .theme-midnight) .container_cbd271 { background-color: var(--background-primary); } + :is(.theme-dark, .theme-midnight) .container_cbd271 .container_c64476:not(.selected_c64476) { + background-color: var(--background-tertiary); + } - :is(.theme-dark, .theme-midnight) #app-mount .member_a31c43, - :is(.theme-dark, .theme-midnight) #app-mount .members_cbd271 { + :is(.theme-dark, .theme-midnight) #app-mount .member_cbd271, :is(.theme-dark, .theme-midnight) #app-mount .members_cbd271 { background-color: var(--background-primary); } @@ -588,13 +587,6 @@ background-color: var(--modal-footer-background); } - :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .message_ddcc45 { - background-color: var(--background-primary); - } - - :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9.rootWithShadow_f9a4c9 { - box-shadow: var(--dark-elevation-border), var(--dark-elevation-high); - } :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .footerSeparator_f9a4c9 { box-shadow: inset 0 1px 0 var(--modal-footer-background); } @@ -615,29 +607,14 @@ border-color: var(--background-secondary); } - :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9.uploadModal_f82cc7 { - background-color: var(--modal-background); - } - :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9.uploadModal_f82cc7 .footer_f82cc7 { - box-shadow: inset 0 1px 0 hsl(var(--primary-900-hsl)/0.6); + :is(.theme-dark, .theme-midnight) #app-mount .uploadModal_f82cc7 .footer_f82cc7 { background-color: var(--modal-footer-background); } :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .header_da6bd8 { - box-shadow: none; background-color: var(--modal-background); } - :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .sectionContent_da6bd8 { - background-color: var(--background-secondary); - } - :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .channels_b3d000 { - border-color: var(--background-secondary-alt); - background-color: var(--background-secondary); - } - :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .cardPrimary_a298b8 { - background-color: var(--background-secondary); - } - :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .default_a467ac { + :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .default_a467ac:not(:hover) { background-color: var(--background-primary); } @@ -645,7 +622,7 @@ background-color: var(--background-secondary); } :is(.theme-dark, .theme-midnight) #app-mount .promptContent_cd377c .overlay_cd377c { - background: none !important; + background: linear-gradient(to top, hsl(var(--primary-860-hsl)), hsl(var(--primary-860-hsl)/0)) !important; } :is(.theme-dark, .theme-midnight) #app-mount .voters_cbdbf0 { @@ -760,145 +737,118 @@ :is(.theme-dark, .theme-midnight) #app-mount .nowPlayingColumn_c2739c .separator_cd82a7 { background-color: var(--background-secondary); } - :is(.theme-dark, .theme-midnight) #app-mount .nowPlayingColumn_c2739c .applicationStreamingPreviewWrapper_cd82a7 { - background-color: var(--background-secondary-alt); - } - :is(.theme-dark, .theme-midnight) #app-mount .directoryContainer_da3f59 { + .theme-dark body .wrapper-28jGDw { background-color: var(--background-primary); } - - body .colorLight-1o6rnK { - background-color: var(--background-tertiary); + .theme-dark body .hasBorder-17PTeu { + border-bottom-color: var(--background-modifier-accent); } - body .borderPrimary-1l1Cvj { + .theme-dark body .searchContainer-2duiLS:is(:hover) button { border-color: var(--background-secondary); + background-color: var(--input-background); } - body .divider-_0um2u { - background-color: var(--background-modifier-accent); + .theme-dark body .contentWrapper-1Cwe5m hr { + background-color: hsl(var(--primary-760-hsl)/0.6); } - body .hasBorder-17PTeu { - border-bottom-color: var(--background-modifier-accent); + .theme-dark body .pre-398F0p { + background-color: var(--background-tertiary); } - body .searchContainer-2duiLS:is(:hover) button { + .theme-dark body .mdxCard-iv9u29:hover { + background-color: var(--card-secondary-pressed-bg); + } + .theme-dark body .colorDark-311Rq5, + .theme-dark body .colorLight-1o6rnK { + background-color: var(--background-tertiary); + } + .theme-dark body .borderPrimary-1l1Cvj { border-color: var(--background-secondary); - background-color: var(--input-background); } - body .h6-3NIpOq { - background: var(--background-primary); + .theme-dark body .tooltip-2YjxAH { + background-color: var(--background-floating); + } + .theme-dark body .top-3SkhL3:after { + border-top-color: var(--background-floating); + } + .theme-dark body .bottom-1VilIE:after { + border-bottom-color: var(--background-floating); + } + .theme-dark body .left-3N6_YX:after { + border-left-color: var(--background-floating); + } + .theme-dark body .right-2v0SN-:after { + border-right-color: var(--background-floating); + } + .theme-dark body .grey-IHse8x { + background-color: var(--background-secondary-alt); + } + .theme-dark body .grey-IHse8x:after { + border-top-color: var(--background-secondary-alt) !important; } - body .scrollbar-1NUwvY .thumb-3r19ww { - background-color: var(--background-secondary-alt) !important; + .theme-dark body .divider-_0um2u { + background-color: var(--background-modifier-accent); } - body [class$=control] { + .theme-dark body [class$=-control] { border-color: var(--background-secondary); } - body [class$=control]:hover { + .theme-dark body [class$=-control]:hover { border-color: var(--background-secondary-alt); } - body .css-1129voj-menu { + .theme-dark body .css-gqriav-menu { border-color: var(--background-secondary); box-shadow: var(--background-secondary) 0px 1px 5px 0px; background-color: var(--background-floating); } - body .css-lbnt4y-option { + .theme-dark body .css-17vfzgn-option { background-color: var(--background-modifier-selected); } - body .css-1jrkz9i-option { + .theme-dark body .css-ic7iun-option { background-color: var(--background-modifier-hover); } - body .modalContent-31OOYM { - box-shadow: var(--dark-elevation-border), var(--dark-elevation-high); + .theme-dark body .modalContent-31OOYM { background-color: var(--modal-background); } - body .modalContent-31OOYM .modalFooter-3193QM { + .theme-dark body .modalContent-31OOYM .modalFooter-3193QM { border: none; - box-shadow: inset 0 1px 0 hsl(var(--primary-900-hsl)/0.6); background-color: var(--modal-footer-background); } - body .input-2g-os5, body .inputWrapper-3a4ywb { - border-color: var(--background-secondary); - background-color: var(--input-background); - } - body .multiInputBlur-2Gn0-C { - border-color: var(--background-secondary); - background-color: var(--input-background); - } - body .grid-2a45cj .header-1JzP0t { - background-color: var(--background-tertiary); - } - body .grid-2a45cj .rowWrapper-2RxnWO { - background-color: var(--background-secondary); - } - body .grid-2a45cj .rowWrapper-2RxnWO:hover::before { - background-color: var(--background-secondary-alt); - } - body .grid-2a45cj .rowWrapper-2RxnWO::after { - border-color: var(--background-secondary-alt) !important; + .theme-dark body .modalContent-31OOYM .divider-Qljx2k { + background-color: var(--background-modifier-accent); } - body .disabled-29cfPA, body .disabled-29cfPA:hover { + .theme-dark body .disabled-29cfPA, + .theme-dark body .disabled-29cfPA:hover { border-color: var(--background-secondary); background-color: var(--background-tertiary); } - body .disabled-29cfPA + .pageButtonNext-2_bbdk, - body .disabled-29cfPA + .pageCount-17vMJm, - body .disabled-29cfPA:hover + .pageButtonNext-2_bbdk, - body .disabled-29cfPA:hover + .pageCount-17vMJm, - body .pageButtonNext-2_bbdk, - body .pageCount-17vMJm, - body .pageButtonNext-2_bbdk, - body .pageButtonPrev-3q9rh8 { + .theme-dark body .disabled-29cfPA + .pageButtonNext-2_bbdk, + .theme-dark body .disabled-29cfPA + .pageCount-17vMJm, + .theme-dark body .disabled-29cfPA:hover + .pageButtonNext-2_bbdk, + .theme-dark body .disabled-29cfPA:hover + .pageCount-17vMJm, + .theme-dark body .pageButtonNext-2_bbdk, + .theme-dark body .pageCount-17vMJm, + .theme-dark body .pageButtonNext-2_bbdk, + .theme-dark body .pageButtonPrev-3q9rh8 { border-color: var(--background-secondary) !important; background-color: var(--background-tertiary); } - body .pageButtonNext-2_bbdk:hover, - body .pageButtonPrev-3q9rh8:hover { + .theme-dark body .pageButtonNext-2_bbdk:hover, + .theme-dark body .pageButtonPrev-3q9rh8:hover { border-color: var(--background-secondary-alt) !important; background-color: var(--background-secondary); } - body .wrapper-28jGDw { - background-color: var(--background-tertiary); - } - body .wrapper-28jGDw .scrollbar-1NUwvY { - background-color: var(--background-tertiary) !important; - } - body .wrapper-28jGDw .scrollbar-1NUwvY .pad-1eAWXq { - background-color: var(--background-tertiary) !important; - } - body .contentWrapper-3RqEiS { - background-color: var(--background-primary); - } - body .contentWrapper-3RqEiS .scrollbar-1NUwvY { - background-color: var(--background-primary) !important; - } - body .contentWrapper-3RqEiS .pad-1eAWXq { - background-color: var(--background-primary) !important; - } - body .contentWrapper-3RqEiS .cardOptionTile-30nXFk:hover { - background-color: var(--background-modifier-hover); - } - body .contentWrapper-3RqEiS .cardOptionTileSelected-wkswQf { - background-color: var(--background-modifier-active); - } - body .contentWrapper-3RqEiS .cardLink-H6gvNe { - background-color: var(--background-secondary); - } - body .contentWrapper-3RqEiS .cardLink-H6gvNe:hover { + .theme-dark body .contentWrapper-3RqEiS .cardLink-H6gvNe:hover { background-color: var(--background-secondary-alt); } - body .contentWrapper-3RqEiS .cardLink-H6gvNe .cardImagePlaceholder-EjWnzT { + .theme-dark body .contentWrapper-3RqEiS .cardLink-H6gvNe .cardImagePlaceholder-EjWnzT { background-color: var(--background-primary); } - body .contentWrapper-3RqEiS .avatarUploaderInner-yEhTv5 { + .theme-dark body .contentWrapper-3RqEiS .avatarUploaderInner-yEhTv5 { background-color: var(--background-primary); } - body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { - background-color: var(--background-tertiary); + .theme-dark body .contentWrapper-3RqEiS .invite-1J5PX7 { + border-color: var(--background-modifier-accent); } - :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .pageWrapper_a3a4ce { - background-color: var(--background-primary); - } :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .searchBox_d83b4d { background-color: var(--input-background); } @@ -911,7 +861,7 @@ :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .searchBox_d83b4d .searchIcon_f69601, :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .searchBox_d83b4d .closeIcon_f69601 { color: var(--interactive-normal); } - :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .container_a56260, :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .bannerImage_fc867b { + :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .container_a56260 { background-color: var(--background-primary) !important; } :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .contentContainer_a56260 { @@ -921,9 +871,6 @@ background: linear-gradient(0deg, var(--background-secondary-alt) 0%, hsla(var(--primary-800-hsl)/0.95) 20.31%, hsla(var(--primary-800-hsl)/0) 100%); } - :is(.theme-dark, .theme-midnight) #app-mount .page_d20375 { - background-color: var(--background-primary) !important; - } :is(.theme-dark, .theme-midnight) #app-mount .page_d20375 .mainTableContainer_e23072 { background-color: var(--background-tertiary); } @@ -955,15 +902,25 @@ background-color: var(--background-primary); } :is(.theme-dark, .theme-midnight) #app-mount .container_cac32e .opaqueBackground_eb6c38 { - background-color: var(--background-secondary-alt); + background-color: hsl(var(--primary-800-hsl)/0.85); } - :is(.theme-dark, .theme-midnight) #app-mount .shop_e77fa3 { - background-color: var(--background-primary); + :is(.theme-dark, .theme-midnight) #app-mount .popout_a35965 .interactionsContainerHeader_a35965 { + border-top-color: var(--background-modifier-accent); + } + :is(.theme-dark, .theme-midnight) #app-mount .popout_a35965 .shareToChannelButton_a35965 { + border-right-color: var(--background-secondary); } :is(.theme-dark, .theme-midnight) #app-mount .addGamePopout_fd966d { - background-color: var(--background-primary); + background-color: var(--background-tertiary); + } + + :is(.theme-dark, .theme-midnight) #app-mount .draggableContainer_ca37d0 .container_ca37d0 { + background-color: var(--background-tertiary); + } + :is(.theme-dark, .theme-midnight) #app-mount .draggableContainer_ca37d0 .footerContainer_ca37d0 { + background: linear-gradient(180deg, hsla(var(--primary-760-hsl)/0) 0%, hsla(var(--primary-800-hsl)/0.9) 50%, var(--background-secondary-alt) 100%); } :is(.theme-dark, .theme-midnight) #app-mount .customColorPicker_b91d66 { @@ -976,10 +933,10 @@ background-color: var(--background-floating); } :is(.theme-dark, .theme-midnight) #app-mount .contentWarningPopout_fa823b .footer_fa823b { - background-color: var(--background-tertiary); + background-color: hsl(var(--primary-900-hsl)/0.8); } - :is(.theme-dark, .theme-midnight) #app-mount .phoneFieldPopout_ff761b { + :is(.theme-dark, .theme-midnight) #app-mount .popoutList_da8701 { background-color: var(--background-floating); } @@ -1014,9 +971,6 @@ :is(.theme-dark, .theme-midnight) #app-mount .streamPreview_adbea6 { background-color: var(--background-secondary); } - :is(.theme-dark, .theme-midnight) #app-mount .streamPreview_adbea6 .previewContainer_adbea6 { - background-color: var(--background-secondary-alt); - } :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .focused_eedf95 { background-color: var(--background-secondary); @@ -1027,15 +981,10 @@ :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__header { background-color: var(--background-secondary); } - :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__navigation, - :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__navigation { - background-color: var(--background-secondary); - } :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__current-month { - background-color: var(--background-secondary); + border-bottom-color: var(--background-modifier-accent); } - :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__day--outside-month, - :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__day--disabled { + :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__day.react-datepicker__day--disabled, :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__day.react-datepicker__day--disabled:hover { background-color: var(--background-tertiary); } @@ -1046,25 +995,18 @@ background-color: var(--background-primary); } - :is(.theme-dark, .theme-midnight) #app-mount .body_cf5d0a { - background-color: var(--background-secondary); - } - - :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .default_a467ac { + :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .default_a467ac:not(:hover) { background-color: var(--background-primary); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .avatarUploaderInnerSquareDisabled_e9b3be { background-color: var(--background-secondary-alt); } - :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .tierHeaderContent_da77bd { - background-color: var(--background-secondary); - } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .background_bfac79 { color: var(--background-secondary-alt); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .prefixInput_a6236d { - background-color: var(--input-background); + background-color: hsl(var(--primary-700-hsl)/0.2); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .backgroundContainer_ceff93 { background-color: var(--background-secondary-alt); @@ -1084,23 +1026,23 @@ :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 { border-color: var(--background-secondary); } - :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .header_eebd33 { - background-color: var(--background-secondary); + :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .headerDefault_eebd33, + :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .headerClickable_eebd33 { + background-color: hsl(var(--primary-660-hsl)/0.3); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .headerExpanded_eebd33 { - background-color: var(--background-secondary-alt); + background-color: hsl(var(--primary-660-hsl)/0.5); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .divider_eebd33 { background-color: var(--background-modifier-accent); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .changeDetails_eebd33 { - background-color: var(--background-secondary); + background-color: hsl(var(--primary-660-hsl)/0.3); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .tierBody_da77bd { background-color: var(--background-secondary-alt); } - :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .sidebarRegion_c25c6d, :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .sidebarRegionScroller_c25c6d { background-color: var(--background-primary); } @@ -1108,25 +1050,10 @@ :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .cardPrimary_a298b8.outline_a298b8 { background-color: var(--background-secondary); } - :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .connectContainer_e2a436 { - background-color: var(--background-secondary); - } - :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .connectContainer_e2a436 .wrapper_c36ce4:hover { - background-color: var(--background-modifier-hover); - } - :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 { - background-color: var(--background-secondary); - } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .expandedInfo_a28a08 { background-color: var(--background-primary); } - :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .paginator_f66684 { - background-color: var(--background-secondary); - } - :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .paginator_f66684 .payment_a28a08 { - background-color: var(--background-secondary); - } - :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .paginator_f66684 .payment_a28a08.hoverablePayment_a28a08:hover { + :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .hoverablePayment_a28a08:hover { background-color: var(--background-modifier-hover); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .bottomDivider_f66684 { @@ -1134,7 +1061,6 @@ } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .codeRedemptionRedirect_cb70f4 { border-color: var(--background-tertiary); - background-color: var(--background-secondary); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .preview_a614a7 { border-color: var(--background-secondary); @@ -1144,14 +1070,17 @@ color: var(--background-primary); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .container_c67e31 { - background-color: var(--input-background); + background-color: hsl(var(--primary-800-hsl)/0.6); + } + :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .container_c67e31:not(:hover, :focus-within) { + border-color: hsl(var(--primary-800-hsl)/0.8); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .game_fd966d { box-shadow: none; border-bottom: 1px solid var(--background-modifier-accent); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .game_fd966d .gameNameInput_fd966d:is(:hover, :focus) { - border-color: var(--background-tertiary); + border-color: hsl(var(--primary-800-hsl)/0.6); background-color: var(--background-secondary); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .option_b877fa:not(.selected_b877fa, :hover) { @@ -1161,35 +1090,20 @@ color: var(--background-accent); } - :is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 nav { + :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .sidebar_a4d4d9, + :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .container_ee69e0, + :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .sidebarContainer_a3a4ce, + :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .privateChannels_f0963d { background-color: var(--background-primary); } - :is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 [class*=scroller] { - background-color: var(--background-primary); - } - :is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 [class*=scroller].fade_eed6a8 { - background-color: transparent; - } - :is(.theme-dark, .theme-midnight) .sidebar_a4d4d9 .searchBar_f0963d { - background-color: var(--background-primary); - } - :is(.theme-dark, .theme-midnight) .sidebar_a4d4d9 .searchBar_f0963d .searchBarComponent_f0963d { + :is(.theme-dark, .theme-midnight) .sidebar_a4d4d9 .searchBarComponent_f0963d { background-color: var(--background-secondary); } - :is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 .container_fd6364:not(.hasBanner_fd6364) .header_fd6364 { - background-color: var(--background-primary); - } - :is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 .container_fd6364:not(.hasBanner_fd6364) .header_fd6364:hover { - background-color: var(--background-secondary); - } :is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 .bannerImage_fd6364:before { background: linear-gradient(to bottom, var(--primary-900), transparent 100%); } - :is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 .hasBanner_fd6364 [class*=scroller-] { - background-color: transparent; - } :is(.theme-dark, .theme-midnight) .sidebar_a4d4d9 .panels_a4d4d9 { background-color: var(--background-primary); diff --git a/src/amoled-cord.css b/src/amoled-cord.css index e53b1a2..5b1c752 100644 --- a/src/amoled-cord.css +++ b/src/amoled-cord.css @@ -71,6 +71,7 @@ html.theme-dark .theme-light .root_f9a4c9, --background-mobile-primary: var(--black) !important; --background-mobile-secondary: var(--primary-830) !important; --background-modifier-accent: hsl(var(--primary-760-hsl)/0.48) !important; + --background-modifier-accent-2: hsl(var(--primary-760-hsl)/0.48) !important; --background-modifier-active: hsl(var(--primary-760-hsl)/0.48) !important; --background-modifier-hover: hsl(var(--primary-760-hsl)/0.4) !important; --background-modifier-selected: hsl(var(--primary-760-hsl)/0.6) !important; @@ -83,6 +84,8 @@ html.theme-dark .theme-light .root_f9a4c9, --bg-base-secondary: var(--primary-830) !important; --bg-base-tertiary: var(--primary-860) !important; --bg-mod-faint: var(--black) !important; + --bg-mod-strong: hsl(var(--primary-760-hsl)/0.54) !important; + --bg-mod-subtle: hsl(var(--primary-760-hsl)/0.48) !important; --bg-surface-overlay: var(--primary-830) !important; --bg-surface-raised: var(--black) !important; --button-outline-primary-background: var(--primary-700) !important; @@ -91,62 +94,42 @@ html.theme-dark .theme-light .root_f9a4c9, --button-outline-primary-border: var(--primary-700) !important; --button-outline-primary-border-active: var(--primary-600) !important; --button-outline-primary-border-hover: var(--primary-630) !important; - --button-outline-primary-text: var(--white) !important; - --button-outline-primary-text-active: var(--white) !important; - --button-outline-primary-text-hover: var(--white) !important; --button-secondary-background: var(--primary-700) !important; --button-secondary-background-active: var(--primary-600) !important; --button-secondary-background-disabled: var(--primary-700) !important; --button-secondary-background-hover: var(--primary-630) !important; - --channel-icon: var(--primary-400) !important; + --card-primary-bg: var(--primary-800) !important; + --card-primary-pressed-bg: var(--primary-860) !important; + --card-secondary-bg: var(--primary-830) !important; + --card-secondary-pressed-bg: var(--primary-860) !important; --channel-text-area-placeholder: var(--primary-400) !important; - --channels-default: var(--primary-360) !important; --channeltextarea-background: var(--primary-830) !important; --chat-background: var(--black) !important; --chat-border: var(--primary-700) !important; --chat-input-container-background: var(--primary-600) !important; - --deprecated-card-bg: hsl(var(--primary-700-hsl)/0.6) !important; - --deprecated-card-editable-bg: hsl(var(--primary-700-hsl)/0.3) !important; - --deprecated-quickswitcher-input-background: var(--primary-400) !important; - --deprecated-quickswitcher-input-placeholder: hsl(var(--white-hsl)/0.3) !important; --deprecated-store-bg: var(--black) !important; - --deprecated-text-input-bg: var(--primary-700) !important; - --deprecated-text-input-border: hsl(var(--black-hsl)/0.3) !important; - --deprecated-text-input-border-disabled: var(--primary-700) !important; - --deprecated-text-input-border-hover: var(--primary-900) !important; - --deprecated-text-input-prefix: var(--primary-200) !important; - --header-primary: var(--primary-130) !important; - --header-secondary: var(--primary-345) !important; + --deprecated-text-input-bg: var(--primary-800) !important; + --deprecated-text-input-border-disabled: var(--primary-800) !important; --home-background: var(--black) !important; - --home-card-resting-border: hsl(var(--transparent-hsl)/0) !important; --input-background: var(--primary-800) !important; - --input-placeholder-text: var(--input-placeholder-text-dark) !important; - --interactive-active: var(--primary-130) !important; - --interactive-hover: var(--primary-230) !important; - --interactive-muted: var(--primary-500) !important; - --interactive-normal: var(--primary-345) !important; + --input-focused-border: hsl(var(--white-hsl)/0.03) !important; + --live-stage-tile-border: hsl(var(--primary-860-hsl)/0.6) !important; --modal-background: var(--primary-860) !important; --modal-footer-background: var(--primary-900) !important; - --scrollbar-auto-scrollbar-color-track: var(--primary-860) !important; --scrollbar-auto-scrollbar-color-thumb: var(--primary-800) !important; + --scrollbar-auto-scrollbar-color-track: var(--primary-860) !important; --scrollbar-auto-thumb: var(--primary-800) !important; --scrollbar-auto-track: var(--primary-860) !important; --scrollbar-thin-thumb: var(--primary-800) !important; - --scrollbar-thin-track: transparent !important; - --spoiler-hidden-background: var(--primary-700) !important; - --spoiler-revealed-background: var(--primary-660) !important; + --scrollbar-thin-track: hsl(var(--black-hsl)/0) !important; --text-muted: var(--primary-345) !important; --text-normal: var(--primary-300) !important; - --textbox-markdown-syntax: var(--primary-360) !important; --elevation-stroke: 0 0 0 1px hsl(var(--primary-600-hsl)/0.15) !important; --elevation-low: 0 1px 0 hsl(var(--primary-630-hsl)/0.2),0 1.5px 0 hsl(var(--primary-600-hsl)/0.05),0 2px 0 hsl(var(--primary-630-hsl)/0.05) !important; --elevation-medium: 0 4px 4px hsl(var(--black-500-hsl)/0.16) !important; --elevation-high: 0 8px 16px hsl(var(--black-500-hsl)/0.24) !important; --search-popout-option-fade: linear-gradient(90deg,hsl(var(--primary-830-hsl)/0),hsl(var(--primary-830-hsl)/1) 80%) !important; --search-popout-option-fade-hover: linear-gradient(90deg,hsl(var(--primary-800-hsl)/0),var(--primary-800) 50%) !important; - --legacy-elevation-low: 0 1px 5px 0 hsl(var(--black-500-hsl)/0.3); - --legacy-elevation-high: 0 2px 10px 0 hsl(var(--black-500-hsl)/0.2); - --legacy-elevation-border: 0 0 0 1px hsl(var(--primary-700-hsl)/0.6); } .theme-dark:not(.custom-profile-theme) { @@ -207,6 +190,11 @@ html.theme-dark .theme-light .root_f9a4c9, hsl(var(--primary-760-hsl) / 0.48) 100%, hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) ) !important; + --background-modifier-accent-2: color-mix( + in oklab, + hsl(var(--primary-760-hsl) / 0.48) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) + ) !important; --background-modifier-active: color-mix( in oklab, hsl(var(--primary-760-hsl) / 0.48) 100%, @@ -251,117 +239,122 @@ html.theme-dark .theme-light .root_f9a4c9, in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) - ); + ) !important; --bg-base-secondary: color-mix( in oklab, var(--primary-830) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) - ); + ) !important; --bg-base-tertiary: color-mix( in oklab, var(--primary-860) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) - ); + ) !important; --bg-mod-faint: color-mix( in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --bg-surface-overlay: color-mix( + --bg-mod-strong: color-mix( in oklab, - var(--primary-830) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + hsl(var(--primary-760-hsl) / 0.54) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.54) var(--theme-base-color-amount, 0%) ) !important; - --bg-surface-raised: color-mix( + --bg-mod-subtle: color-mix( in oklab, - var(--black) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + hsl(var(--primary-760-hsl) / 0.48) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) ) !important; - --channeltextarea-background: color-mix( + --bg-surface-overlay: color-mix( in oklab, var(--primary-830) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --chat-background: color-mix( + --bg-surface-raised: color-mix( in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --chat-border: color-mix( + --card-primary-bg: color-mix( in oklab, - var(--primary-700) 100%, + var(--primary-800) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --chat-input-container-background: color-mix( + --card-primary-pressed-bg: color-mix( in oklab, - var(--primary-600) 100%, + var(--primary-860) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-card-bg: color-mix( + --card-secondary-bg: color-mix( in oklab, - hsl(var(--primary-700-hsl) / 0.6) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%) + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-card-editable-bg: color-mix( + --card-secondary-pressed-bg: color-mix( in oklab, - hsl(var(--primary-700-hsl) / 0.3) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%) + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-quickswitcher-input-background: color-mix( + --channel-text-area-placeholder: color-mix( in oklab, var(--primary-400) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + var(--theme-text-color, black) var(--theme-text-color-amount, 0%) ) !important; - --deprecated-quickswitcher-input-placeholder: color-mix( + --channeltextarea-background: color-mix( in oklab, - hsl(var(--white-hsl) / 0.3) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%) + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-store-bg: color-mix( + --chat-background: color-mix( in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-text-input-bg: color-mix( + --chat-border: color-mix( in oklab, var(--primary-700) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-text-input-border: color-mix( - in oklab, - hsl(var(--black-hsl) / 0.3) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.3) var(--theme-base-color-amount, 0%) - ) !important; - --deprecated-text-input-border-disabled: color-mix( + --chat-input-container-background: color-mix( in oklab, - var(--primary-700) 100%, + var(--primary-600) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-text-input-border-hover: color-mix( + --deprecated-store-bg: color-mix( in oklab, - var(--primary-900) 100%, + var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --deprecated-text-input-prefix: color-mix( - in oklab, - var(--primary-200) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + --deprecated-text-input-bg: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --deprecated-text-input-border-disabled: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --home-background: color-mix( in oklab, var(--black) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; - --home-card-resting-border: color-mix( - in oklab, - hsl(var(--transparent-hsl) / 0) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) - ) !important; --input-background: color-mix( in oklab, var(--primary-800) 100%, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; + --input-focused-border: color-mix( + in oklab, + hsl(var(--white-hsl) / 0.03) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.03) var(--theme-base-color-amount, 0%) + ) !important; + --live-stage-tile-border: color-mix( + in oklab, + hsl(var(--primary-860-hsl) / 0.6) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%) + ) !important; --modal-background: color-mix( in oklab, var(--primary-860) 100%, @@ -398,19 +391,19 @@ html.theme-dark .theme-light .root_f9a4c9, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --scrollbar-thin-track: color-mix( - in oklab, - transparent, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) + in oklab, + hsl(var(--black-hsl) / 0) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) ) !important; - --spoiler-hidden-background: color-mix( + --text-muted: color-mix( in oklab, - var(--primary-700) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + var(--primary-345) 100%, + var(--theme-text-color, black) var(--theme-text-color-amount, 0%) ) !important; - --spoiler-revealed-background: color-mix( + --text-normal: color-mix( in oklab, - var(--primary-660) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + var(--primary-300) 100%, + var(--theme-text-color, black) var(--theme-text-color-amount, 0%) ) !important; } } @@ -437,7 +430,11 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--background-tertiary); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .mainCard_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a03b48, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_ddbb27, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a039eb { +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .mainCard_a6d69a:not(.container_a57509:is(.isOpen_a57509, :hover, :active), +.container_d331f1:is(.isOpen_d331f1, :active)), +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a03b48, +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_ddbb27, +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a039eb { background-color: var(--background-tertiary); } :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .matchingPostsRow_a6d69a { @@ -446,23 +443,17 @@ html.theme-dark .theme-light .root_f9a4c9, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .loadingCard_a6d69a { background-color: var(--background-tertiary); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a57509:hover { - background-color: var(--background-modifier-hover); -} -:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a57509:active { - background-color: var(--background-modifier-active); -} -:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a57509.isOpen_a57509 { - background-color: var(--background-modifier-selected); +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .sortDropdown_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tag_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tagsButton_a6d69a { + background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_a57509 .textContentFooter_a57509 { - background: transparent; +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .pill_c993da.clickable_c993da:not(.disabled_c993da):hover { + background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_d331f1:active { - background-color: var(--background-modifier-active); +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .textContentFooter_a57509 { + background: linear-gradient(to top, hsl(var(--black-hsl)/1), hsl(var(--black-hsl)/0.97) 36px, hsl(var(--black-hsl)/0.4)); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .container_d331f1.isOpen_d331f1 { - background-color: var(--background-modifier-selected); +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .textContentFooter_a57509.noTags_a57509 { + background: linear-gradient(to top, hsl(var(--black-hsl)/1), hsl(var(--black-hsl)/0)); } :is(.theme-dark, .theme-midnight) #app-mount .tile_ab47a1 { @@ -472,19 +463,16 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--background-modifier-hover); } :is(.theme-dark, .theme-midnight) #app-mount .tile_ab47a1 .invalidPoop_ff31dd { - background-color: var(--background-secondary-alt); + background-color: hsl(var(--primary-700-hsl)/0.3); } :is(.theme-dark, .theme-midnight) #app-mount .invite_f61cb8 { - border-color: var(--background-secondary-alt); - background-color: var(--background-secondary); -} -:is(.theme-dark, .theme-midnight) #app-mount .container_a1531c { - background-color: var(--background-secondary); + border-color: hsl(var(--primary-800-hsl)/0.9); + background-color: hsl(var(--primary-830-hsl)/0.6); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .enabled_b97e9a[aria-checked=false] .answerInner_cf2c85:hover { +:is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .answer_cf2c85:hover .answerInner_cf2c85.currentlyVoting_cf2c85:not(.selected_cf2c85) { outline-color: var(--background-secondary-alt); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .normalStylesDefault_b5cb3c .votePercentageBar_cf2c85 { +:is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .votePercentageBar_cf2c85 { background-color: var(--background-secondary-alt); } @@ -513,6 +501,12 @@ html.theme-dark .theme-light .root_f9a4c9, :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .container_dc3fc4:hover { background-color: var(--background-modifier-hover); } +:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .colorable_ef18ee.primaryDark_ef18ee { + background-color: var(--background-secondary-alt); +} +:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .colorable_ef18ee.primaryDark_ef18ee.active_ef18ee, :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .colorable_ef18ee.primaryDark_ef18ee:hover { + background-color: var(--background-modifier-hover); +} :is(.theme-dark, .theme-midnight) .folder_bc7085.hover_bc7085 { background-color: var(--background-secondary-alt); @@ -523,13 +517,16 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--background-secondary-alt); } -:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac, :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac { +:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac:not(.buttonActive_adcaac), +:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac:not(.buttonActive_adcaac) { background-color: var(--button-secondary-background); } -:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac:hover, :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac:hover { +:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac:not(.buttonActive_adcaac):hover, +:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac:not(.buttonActive_adcaac):hover { background-color: var(--button-secondary-background-hover); } -:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac:active, :is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac:active { +:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac.buttonColor_adcaac:not(.buttonActive_adcaac):active, +:is(.theme-dark, .theme-midnight) #app-mount .button_adcaac .buttonColor_adcaac:not(.buttonActive_adcaac):active { background-color: var(--button-secondary-background-active); } @@ -548,9 +545,11 @@ html.theme-dark .theme-light .root_f9a4c9, :is(.theme-dark, .theme-midnight) .container_cbd271 { background-color: var(--background-primary); } +:is(.theme-dark, .theme-midnight) .container_cbd271 .container_c64476:not(.selected_c64476) { + background-color: var(--background-tertiary); +} -:is(.theme-dark, .theme-midnight) #app-mount .member_a31c43, -:is(.theme-dark, .theme-midnight) #app-mount .members_cbd271 { +:is(.theme-dark, .theme-midnight) #app-mount .member_cbd271, :is(.theme-dark, .theme-midnight) #app-mount .members_cbd271 { background-color: var(--background-primary); } @@ -576,13 +575,6 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--modal-footer-background); } -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .message_ddcc45 { - background-color: var(--background-primary); -} - -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9.rootWithShadow_f9a4c9 { - box-shadow: var(--dark-elevation-border), var(--dark-elevation-high); -} :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .footerSeparator_f9a4c9 { box-shadow: inset 0 1px 0 var(--modal-footer-background); } @@ -603,29 +595,14 @@ html.theme-dark .theme-light .root_f9a4c9, border-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9.uploadModal_f82cc7 { - background-color: var(--modal-background); -} -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9.uploadModal_f82cc7 .footer_f82cc7 { - box-shadow: inset 0 1px 0 hsl(var(--primary-900-hsl)/0.6); +:is(.theme-dark, .theme-midnight) #app-mount .uploadModal_f82cc7 .footer_f82cc7 { background-color: var(--modal-footer-background); } :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .header_da6bd8 { - box-shadow: none; background-color: var(--modal-background); } -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .sectionContent_da6bd8 { - background-color: var(--background-secondary); -} -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .channels_b3d000 { - border-color: var(--background-secondary-alt); - background-color: var(--background-secondary); -} -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .cardPrimary_a298b8 { - background-color: var(--background-secondary); -} -:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .default_a467ac { +:is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .default_a467ac:not(:hover) { background-color: var(--background-primary); } @@ -633,7 +610,7 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--background-secondary); } :is(.theme-dark, .theme-midnight) #app-mount .promptContent_cd377c .overlay_cd377c { - background: none !important; + background: linear-gradient(to top, hsl(var(--primary-860-hsl)), hsl(var(--primary-860-hsl)/0)) !important; } :is(.theme-dark, .theme-midnight) #app-mount .voters_cbdbf0 { @@ -748,145 +725,118 @@ html.theme-dark .theme-light .root_f9a4c9, :is(.theme-dark, .theme-midnight) #app-mount .nowPlayingColumn_c2739c .separator_cd82a7 { background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .nowPlayingColumn_c2739c .applicationStreamingPreviewWrapper_cd82a7 { - background-color: var(--background-secondary-alt); -} -:is(.theme-dark, .theme-midnight) #app-mount .directoryContainer_da3f59 { +.theme-dark body .wrapper-28jGDw { background-color: var(--background-primary); } - -body .colorLight-1o6rnK { - background-color: var(--background-tertiary); +.theme-dark body .hasBorder-17PTeu { + border-bottom-color: var(--background-modifier-accent); } -body .borderPrimary-1l1Cvj { +.theme-dark body .searchContainer-2duiLS:is(:hover) button { border-color: var(--background-secondary); + background-color: var(--input-background); } -body .divider-_0um2u { - background-color: var(--background-modifier-accent); +.theme-dark body .contentWrapper-1Cwe5m hr { + background-color: hsl(var(--primary-760-hsl)/0.6); } -body .hasBorder-17PTeu { - border-bottom-color: var(--background-modifier-accent); +.theme-dark body .pre-398F0p { + background-color: var(--background-tertiary); } -body .searchContainer-2duiLS:is(:hover) button { +.theme-dark body .mdxCard-iv9u29:hover { + background-color: var(--card-secondary-pressed-bg); +} +.theme-dark body .colorDark-311Rq5, +.theme-dark body .colorLight-1o6rnK { + background-color: var(--background-tertiary); +} +.theme-dark body .borderPrimary-1l1Cvj { border-color: var(--background-secondary); - background-color: var(--input-background); } -body .h6-3NIpOq { - background: var(--background-primary); +.theme-dark body .tooltip-2YjxAH { + background-color: var(--background-floating); +} +.theme-dark body .top-3SkhL3:after { + border-top-color: var(--background-floating); +} +.theme-dark body .bottom-1VilIE:after { + border-bottom-color: var(--background-floating); +} +.theme-dark body .left-3N6_YX:after { + border-left-color: var(--background-floating); +} +.theme-dark body .right-2v0SN-:after { + border-right-color: var(--background-floating); +} +.theme-dark body .grey-IHse8x { + background-color: var(--background-secondary-alt); +} +.theme-dark body .grey-IHse8x:after { + border-top-color: var(--background-secondary-alt) !important; } -body .scrollbar-1NUwvY .thumb-3r19ww { - background-color: var(--background-secondary-alt) !important; +.theme-dark body .divider-_0um2u { + background-color: var(--background-modifier-accent); } -body [class$=control] { +.theme-dark body [class$=-control] { border-color: var(--background-secondary); } -body [class$=control]:hover { +.theme-dark body [class$=-control]:hover { border-color: var(--background-secondary-alt); } -body .css-1129voj-menu { +.theme-dark body .css-gqriav-menu { border-color: var(--background-secondary); box-shadow: var(--background-secondary) 0px 1px 5px 0px; background-color: var(--background-floating); } -body .css-lbnt4y-option { +.theme-dark body .css-17vfzgn-option { background-color: var(--background-modifier-selected); } -body .css-1jrkz9i-option { +.theme-dark body .css-ic7iun-option { background-color: var(--background-modifier-hover); } -body .modalContent-31OOYM { - box-shadow: var(--dark-elevation-border), var(--dark-elevation-high); +.theme-dark body .modalContent-31OOYM { background-color: var(--modal-background); } -body .modalContent-31OOYM .modalFooter-3193QM { +.theme-dark body .modalContent-31OOYM .modalFooter-3193QM { border: none; - box-shadow: inset 0 1px 0 hsl(var(--primary-900-hsl)/0.6); background-color: var(--modal-footer-background); } -body .input-2g-os5, body .inputWrapper-3a4ywb { - border-color: var(--background-secondary); - background-color: var(--input-background); -} -body .multiInputBlur-2Gn0-C { - border-color: var(--background-secondary); - background-color: var(--input-background); -} -body .grid-2a45cj .header-1JzP0t { - background-color: var(--background-tertiary); -} -body .grid-2a45cj .rowWrapper-2RxnWO { - background-color: var(--background-secondary); -} -body .grid-2a45cj .rowWrapper-2RxnWO:hover::before { - background-color: var(--background-secondary-alt); -} -body .grid-2a45cj .rowWrapper-2RxnWO::after { - border-color: var(--background-secondary-alt) !important; +.theme-dark body .modalContent-31OOYM .divider-Qljx2k { + background-color: var(--background-modifier-accent); } -body .disabled-29cfPA, body .disabled-29cfPA:hover { +.theme-dark body .disabled-29cfPA, +.theme-dark body .disabled-29cfPA:hover { border-color: var(--background-secondary); background-color: var(--background-tertiary); } -body .disabled-29cfPA + .pageButtonNext-2_bbdk, -body .disabled-29cfPA + .pageCount-17vMJm, -body .disabled-29cfPA:hover + .pageButtonNext-2_bbdk, -body .disabled-29cfPA:hover + .pageCount-17vMJm, -body .pageButtonNext-2_bbdk, -body .pageCount-17vMJm, -body .pageButtonNext-2_bbdk, -body .pageButtonPrev-3q9rh8 { +.theme-dark body .disabled-29cfPA + .pageButtonNext-2_bbdk, +.theme-dark body .disabled-29cfPA + .pageCount-17vMJm, +.theme-dark body .disabled-29cfPA:hover + .pageButtonNext-2_bbdk, +.theme-dark body .disabled-29cfPA:hover + .pageCount-17vMJm, +.theme-dark body .pageButtonNext-2_bbdk, +.theme-dark body .pageCount-17vMJm, +.theme-dark body .pageButtonNext-2_bbdk, +.theme-dark body .pageButtonPrev-3q9rh8 { border-color: var(--background-secondary) !important; background-color: var(--background-tertiary); } -body .pageButtonNext-2_bbdk:hover, -body .pageButtonPrev-3q9rh8:hover { +.theme-dark body .pageButtonNext-2_bbdk:hover, +.theme-dark body .pageButtonPrev-3q9rh8:hover { border-color: var(--background-secondary-alt) !important; background-color: var(--background-secondary); } -body .wrapper-28jGDw { - background-color: var(--background-tertiary); -} -body .wrapper-28jGDw .scrollbar-1NUwvY { - background-color: var(--background-tertiary) !important; -} -body .wrapper-28jGDw .scrollbar-1NUwvY .pad-1eAWXq { - background-color: var(--background-tertiary) !important; -} -body .contentWrapper-3RqEiS { - background-color: var(--background-primary); -} -body .contentWrapper-3RqEiS .scrollbar-1NUwvY { - background-color: var(--background-primary) !important; -} -body .contentWrapper-3RqEiS .pad-1eAWXq { - background-color: var(--background-primary) !important; -} -body .contentWrapper-3RqEiS .cardOptionTile-30nXFk:hover { - background-color: var(--background-modifier-hover); -} -body .contentWrapper-3RqEiS .cardOptionTileSelected-wkswQf { - background-color: var(--background-modifier-active); -} -body .contentWrapper-3RqEiS .cardLink-H6gvNe { - background-color: var(--background-secondary); -} -body .contentWrapper-3RqEiS .cardLink-H6gvNe:hover { +.theme-dark body .contentWrapper-3RqEiS .cardLink-H6gvNe:hover { background-color: var(--background-secondary-alt); } -body .contentWrapper-3RqEiS .cardLink-H6gvNe .cardImagePlaceholder-EjWnzT { +.theme-dark body .contentWrapper-3RqEiS .cardLink-H6gvNe .cardImagePlaceholder-EjWnzT { background-color: var(--background-primary); } -body .contentWrapper-3RqEiS .avatarUploaderInner-yEhTv5 { +.theme-dark body .contentWrapper-3RqEiS .avatarUploaderInner-yEhTv5 { background-color: var(--background-primary); } -body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { - background-color: var(--background-tertiary); +.theme-dark body .contentWrapper-3RqEiS .invite-1J5PX7 { + border-color: var(--background-modifier-accent); } -:is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .pageWrapper_a3a4ce { - background-color: var(--background-primary); -} :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .searchBox_d83b4d { background-color: var(--input-background); } @@ -899,7 +849,7 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .searchBox_d83b4d .searchIcon_f69601, :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .searchBox_d83b4d .closeIcon_f69601 { color: var(--interactive-normal); } -:is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .container_a56260, :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .bannerImage_fc867b { +:is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .container_a56260 { background-color: var(--background-primary) !important; } :is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .contentContainer_a56260 { @@ -909,9 +859,6 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { background: linear-gradient(0deg, var(--background-secondary-alt) 0%, hsla(var(--primary-800-hsl)/0.95) 20.31%, hsla(var(--primary-800-hsl)/0) 100%); } -:is(.theme-dark, .theme-midnight) #app-mount .page_d20375 { - background-color: var(--background-primary) !important; -} :is(.theme-dark, .theme-midnight) #app-mount .page_d20375 .mainTableContainer_e23072 { background-color: var(--background-tertiary); } @@ -943,15 +890,25 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { background-color: var(--background-primary); } :is(.theme-dark, .theme-midnight) #app-mount .container_cac32e .opaqueBackground_eb6c38 { - background-color: var(--background-secondary-alt); + background-color: hsl(var(--primary-800-hsl)/0.85); } -:is(.theme-dark, .theme-midnight) #app-mount .shop_e77fa3 { - background-color: var(--background-primary); +:is(.theme-dark, .theme-midnight) #app-mount .popout_a35965 .interactionsContainerHeader_a35965 { + border-top-color: var(--background-modifier-accent); +} +:is(.theme-dark, .theme-midnight) #app-mount .popout_a35965 .shareToChannelButton_a35965 { + border-right-color: var(--background-secondary); } :is(.theme-dark, .theme-midnight) #app-mount .addGamePopout_fd966d { - background-color: var(--background-primary); + background-color: var(--background-tertiary); +} + +:is(.theme-dark, .theme-midnight) #app-mount .draggableContainer_ca37d0 .container_ca37d0 { + background-color: var(--background-tertiary); +} +:is(.theme-dark, .theme-midnight) #app-mount .draggableContainer_ca37d0 .footerContainer_ca37d0 { + background: linear-gradient(180deg, hsla(var(--primary-760-hsl)/0) 0%, hsla(var(--primary-800-hsl)/0.9) 50%, var(--background-secondary-alt) 100%); } :is(.theme-dark, .theme-midnight) #app-mount .customColorPicker_b91d66 { @@ -964,10 +921,10 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { background-color: var(--background-floating); } :is(.theme-dark, .theme-midnight) #app-mount .contentWarningPopout_fa823b .footer_fa823b { - background-color: var(--background-tertiary); + background-color: hsl(var(--primary-900-hsl)/0.8); } -:is(.theme-dark, .theme-midnight) #app-mount .phoneFieldPopout_ff761b { +:is(.theme-dark, .theme-midnight) #app-mount .popoutList_da8701 { background-color: var(--background-floating); } @@ -1002,9 +959,6 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { :is(.theme-dark, .theme-midnight) #app-mount .streamPreview_adbea6 { background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .streamPreview_adbea6 .previewContainer_adbea6 { - background-color: var(--background-secondary-alt); -} :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .focused_eedf95 { background-color: var(--background-secondary); @@ -1015,15 +969,10 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__header { background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__navigation, -:is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__navigation { - background-color: var(--background-secondary); -} :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__current-month { - background-color: var(--background-secondary); + border-bottom-color: var(--background-modifier-accent); } -:is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__day--outside-month, -:is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__day--disabled { +:is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__day.react-datepicker__day--disabled, :is(.theme-dark, .theme-midnight) #app-mount .layer_cd0de5 .calendarPicker_be05cd .react-datepicker__day.react-datepicker__day--disabled:hover { background-color: var(--background-tertiary); } @@ -1034,25 +983,18 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { background-color: var(--background-primary); } -:is(.theme-dark, .theme-midnight) #app-mount .body_cf5d0a { - background-color: var(--background-secondary); -} - -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .default_a467ac { +:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .default_a467ac:not(:hover) { background-color: var(--background-primary); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .avatarUploaderInnerSquareDisabled_e9b3be { background-color: var(--background-secondary-alt); } -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .tierHeaderContent_da77bd { - background-color: var(--background-secondary); -} :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .background_bfac79 { color: var(--background-secondary-alt); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .prefixInput_a6236d { - background-color: var(--input-background); + background-color: hsl(var(--primary-700-hsl)/0.2); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .backgroundContainer_ceff93 { background-color: var(--background-secondary-alt); @@ -1072,23 +1014,23 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 { border-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .header_eebd33 { - background-color: var(--background-secondary); +:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .headerDefault_eebd33, +:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .headerClickable_eebd33 { + background-color: hsl(var(--primary-660-hsl)/0.3); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .headerExpanded_eebd33 { - background-color: var(--background-secondary-alt); + background-color: hsl(var(--primary-660-hsl)/0.5); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .divider_eebd33 { background-color: var(--background-modifier-accent); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .auditLog_eebd33 .changeDetails_eebd33 { - background-color: var(--background-secondary); + background-color: hsl(var(--primary-660-hsl)/0.3); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .tierBody_da77bd { background-color: var(--background-secondary-alt); } -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .sidebarRegion_c25c6d, :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .sidebarRegionScroller_c25c6d { background-color: var(--background-primary); } @@ -1096,25 +1038,10 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .cardPrimary_a298b8.outline_a298b8 { background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .connectContainer_e2a436 { - background-color: var(--background-secondary); -} -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .connectContainer_e2a436 .wrapper_c36ce4:hover { - background-color: var(--background-modifier-hover); -} -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 { - background-color: var(--background-secondary); -} :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .expandedInfo_a28a08 { background-color: var(--background-primary); } -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .paginator_f66684 { - background-color: var(--background-secondary); -} -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .paginator_f66684 .payment_a28a08 { - background-color: var(--background-secondary); -} -:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .paginator_f66684 .payment_a28a08.hoverablePayment_a28a08:hover { +:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .hoverablePayment_a28a08:hover { background-color: var(--background-modifier-hover); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .paymentPane_f66684 .bottomDivider_f66684 { @@ -1122,7 +1049,6 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .codeRedemptionRedirect_cb70f4 { border-color: var(--background-tertiary); - background-color: var(--background-secondary); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .preview_a614a7 { border-color: var(--background-secondary); @@ -1132,14 +1058,17 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { color: var(--background-primary); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .container_c67e31 { - background-color: var(--input-background); + background-color: hsl(var(--primary-800-hsl)/0.6); +} +:is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .container_c67e31:not(:hover, :focus-within) { + border-color: hsl(var(--primary-800-hsl)/0.8); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .game_fd966d { box-shadow: none; border-bottom: 1px solid var(--background-modifier-accent); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .game_fd966d .gameNameInput_fd966d:is(:hover, :focus) { - border-color: var(--background-tertiary); + border-color: hsl(var(--primary-800-hsl)/0.6); background-color: var(--background-secondary); } :is(.theme-dark, .theme-midnight) #app-mount .layers_d4b6c5 .option_b877fa:not(.selected_b877fa, :hover) { @@ -1149,35 +1078,20 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { color: var(--background-accent); } -:is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 nav { +:is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .sidebar_a4d4d9, +:is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .container_ee69e0, +:is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .sidebarContainer_a3a4ce, +:is(.theme-dark, .theme-midnight) #app-mount .content_a4d4d9 .privateChannels_f0963d { background-color: var(--background-primary); } -:is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 [class*=scroller] { - background-color: var(--background-primary); -} -:is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 [class*=scroller].fade_eed6a8 { - background-color: transparent; -} -:is(.theme-dark, .theme-midnight) .sidebar_a4d4d9 .searchBar_f0963d { - background-color: var(--background-primary); -} -:is(.theme-dark, .theme-midnight) .sidebar_a4d4d9 .searchBar_f0963d .searchBarComponent_f0963d { +:is(.theme-dark, .theme-midnight) .sidebar_a4d4d9 .searchBarComponent_f0963d { background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 .container_fd6364:not(.hasBanner_fd6364) .header_fd6364 { - background-color: var(--background-primary); -} -:is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 .container_fd6364:not(.hasBanner_fd6364) .header_fd6364:hover { - background-color: var(--background-secondary); -} :is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 .bannerImage_fd6364:before { background: linear-gradient(to bottom, var(--primary-900), transparent 100%); } -:is(.theme-dark, .theme-midnight) #app-mount .sidebar_a4d4d9 .hasBanner_fd6364 [class*=scroller-] { - background-color: transparent; -} :is(.theme-dark, .theme-midnight) .sidebar_a4d4d9 .panels_a4d4d9 { background-color: var(--background-primary); From ecc64ba834eea7b1ff55e5c4049f42ae81b77cc6 Mon Sep 17 00:00:00 2001 From: Federico <38290480+FedeIlLeone@users.noreply.github.com> Date: Tue, 3 Sep 2024 19:48:53 +0200 Subject: [PATCH 3/6] style: use spaces --- clients/amoled-cord.theme.css | 24 ++++++++++++------------ clients/amoled-cord.user.css | 24 ++++++++++++------------ src/amoled-cord.css | 24 ++++++++++++------------ src/core/_variables.scss | 34 +++++++++++++++++----------------- 4 files changed, 53 insertions(+), 53 deletions(-) diff --git a/clients/amoled-cord.theme.css b/clients/amoled-cord.theme.css index 8eb8440..33bb82c 100644 --- a/clients/amoled-cord.theme.css +++ b/clients/amoled-cord.theme.css @@ -204,9 +204,9 @@ html.theme-dark .theme-light .root_f9a4c9, hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) ) !important; --background-modifier-accent-2: color-mix( - in oklab, - hsl(var(--primary-760-hsl) / 0.48) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) + in oklab, + hsl(var(--primary-760-hsl) / 0.48) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) ) !important; --background-modifier-active: color-mix( in oklab, @@ -339,14 +339,14 @@ html.theme-dark .theme-light .root_f9a4c9, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --deprecated-text-input-bg: color-mix( - in oklab, - var(--primary-800) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --deprecated-text-input-border-disabled: color-mix( - in oklab, - var(--primary-800) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --home-background: color-mix( in oklab, @@ -404,9 +404,9 @@ html.theme-dark .theme-light .root_f9a4c9, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --scrollbar-thin-track: color-mix( - in oklab, - hsl(var(--black-hsl) / 0) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) + in oklab, + hsl(var(--black-hsl) / 0) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) ) !important; --text-muted: color-mix( in oklab, diff --git a/clients/amoled-cord.user.css b/clients/amoled-cord.user.css index cd4befd..0a4e875 100644 --- a/clients/amoled-cord.user.css +++ b/clients/amoled-cord.user.css @@ -203,9 +203,9 @@ hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) ) !important; --background-modifier-accent-2: color-mix( - in oklab, - hsl(var(--primary-760-hsl) / 0.48) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) + in oklab, + hsl(var(--primary-760-hsl) / 0.48) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) ) !important; --background-modifier-active: color-mix( in oklab, @@ -338,14 +338,14 @@ var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --deprecated-text-input-bg: color-mix( - in oklab, - var(--primary-800) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --deprecated-text-input-border-disabled: color-mix( - in oklab, - var(--primary-800) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --home-background: color-mix( in oklab, @@ -403,9 +403,9 @@ var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --scrollbar-thin-track: color-mix( - in oklab, - hsl(var(--black-hsl) / 0) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) + in oklab, + hsl(var(--black-hsl) / 0) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) ) !important; --text-muted: color-mix( in oklab, diff --git a/src/amoled-cord.css b/src/amoled-cord.css index 5b1c752..72e74ec 100644 --- a/src/amoled-cord.css +++ b/src/amoled-cord.css @@ -191,9 +191,9 @@ html.theme-dark .theme-light .root_f9a4c9, hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) ) !important; --background-modifier-accent-2: color-mix( - in oklab, - hsl(var(--primary-760-hsl) / 0.48) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) + in oklab, + hsl(var(--primary-760-hsl) / 0.48) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) ) !important; --background-modifier-active: color-mix( in oklab, @@ -326,14 +326,14 @@ html.theme-dark .theme-light .root_f9a4c9, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --deprecated-text-input-bg: color-mix( - in oklab, - var(--primary-800) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --deprecated-text-input-border-disabled: color-mix( - in oklab, - var(--primary-800) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --home-background: color-mix( in oklab, @@ -391,9 +391,9 @@ html.theme-dark .theme-light .root_f9a4c9, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --scrollbar-thin-track: color-mix( - in oklab, - hsl(var(--black-hsl) / 0) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) + in oklab, + hsl(var(--black-hsl) / 0) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) ) !important; --text-muted: color-mix( in oklab, diff --git a/src/core/_variables.scss b/src/core/_variables.scss index e7d28b9..37c092b 100644 --- a/src/core/_variables.scss +++ b/src/core/_variables.scss @@ -194,10 +194,10 @@ html.theme-dark .theme-light .root_f9a4c9, hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) ) !important; --background-modifier-accent-2: color-mix( - in oklab, - hsl(var(--primary-760-hsl) / 0.48) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) - ) !important; + in oklab, + hsl(var(--primary-760-hsl) / 0.48) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) + ) !important; --background-modifier-active: color-mix( in oklab, hsl(var(--primary-760-hsl) / 0.48) 100%, @@ -329,15 +329,15 @@ html.theme-dark .theme-light .root_f9a4c9, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --deprecated-text-input-bg: color-mix( - in oklab, - var(--primary-800) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) - ) !important; - --deprecated-text-input-border-disabled: color-mix( - in oklab, - var(--primary-800) 100%, - var(--theme-base-color, black) var(--theme-base-color-amount, 0%) - ) !important; + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --deprecated-text-input-border-disabled: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; --home-background: color-mix( in oklab, var(--black) 100%, @@ -394,10 +394,10 @@ html.theme-dark .theme-light .root_f9a4c9, var(--theme-base-color, black) var(--theme-base-color-amount, 0%) ) !important; --scrollbar-thin-track: color-mix( - in oklab, - hsl(var(--black-hsl) / 0) 100%, - hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) - ) !important; + in oklab, + hsl(var(--black-hsl) / 0) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0) var(--theme-base-color-amount, 0%) + ) !important; --text-muted: color-mix( in oklab, var(--primary-345) 100%, From 260bfc7a8bc7238c4abd2000aa722bf00f2793a2 Mon Sep 17 00:00:00 2001 From: Federico <38290480+FedeIlLeone@users.noreply.github.com> Date: Tue, 3 Sep 2024 20:31:17 +0200 Subject: [PATCH 4/6] chore: bump version --- clients/amoled-cord.theme.css | 2 +- clients/amoled-cord.user.css | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/clients/amoled-cord.theme.css b/clients/amoled-cord.theme.css index 33bb82c..57fe827 100644 --- a/clients/amoled-cord.theme.css +++ b/clients/amoled-cord.theme.css @@ -2,7 +2,7 @@ * @name AMOLED-Cord * @author LuckFire * @description A basically pitch black theme for Discord. Lights out, baby! - * @version 4.1.5 + * @version 4.1.6 * @invite vYdXbEzqDs * @authorId 399416615742996480 * @source https://github.com/LuckFire/amoled-cord diff --git a/clients/amoled-cord.user.css b/clients/amoled-cord.user.css index 0a4e875..cb0441d 100644 --- a/clients/amoled-cord.user.css +++ b/clients/amoled-cord.user.css @@ -3,7 +3,7 @@ @name AMOLED-Cord @author LuckFire @description A basically pitch black theme for Discord. Lights out, baby! - @version 4.1.5 + @version 4.1.6 @namespace https://github.com/discord-extensions/amoled-cord @license MIT ==/UserStyle== */ diff --git a/package.json b/package.json index a79d4ff..448ad87 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "amoled-cord", - "version": "4.1.5", + "version": "4.1.6", "description": "A basically pitch black theme for Discord. Lights out, baby!", "author": "LuckFire", "scripts": { From a55ed2c69a7d66ca358e23726ade452ed5d8ba1e Mon Sep 17 00:00:00 2001 From: Federico <38290480+FedeIlLeone@users.noreply.github.com> Date: Wed, 4 Sep 2024 11:50:20 +0200 Subject: [PATCH 5/6] fix(forums): tag selectable color --- clients/amoled-cord.theme.css | 2 +- clients/amoled-cord.user.css | 2 +- src/amoled-cord.css | 2 +- src/theme/chat/_forums.scss | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/clients/amoled-cord.theme.css b/clients/amoled-cord.theme.css index 57fe827..3fea01b 100644 --- a/clients/amoled-cord.theme.css +++ b/clients/amoled-cord.theme.css @@ -456,7 +456,7 @@ html.theme-dark .theme-light .root_f9a4c9, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .loadingCard_a6d69a { background-color: var(--background-tertiary); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .sortDropdown_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tag_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tagsButton_a6d69a { +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .sortDropdown_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tag_a6d69a:not(.selected_c993da), :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tagsButton_a6d69a { background-color: var(--background-secondary); } :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .pill_c993da.clickable_c993da:not(.disabled_c993da):hover { diff --git a/clients/amoled-cord.user.css b/clients/amoled-cord.user.css index cb0441d..4340a5e 100644 --- a/clients/amoled-cord.user.css +++ b/clients/amoled-cord.user.css @@ -455,7 +455,7 @@ :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .loadingCard_a6d69a { background-color: var(--background-tertiary); } - :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .sortDropdown_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tag_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tagsButton_a6d69a { + :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .sortDropdown_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tag_a6d69a:not(.selected_c993da), :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tagsButton_a6d69a { background-color: var(--background-secondary); } :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .pill_c993da.clickable_c993da:not(.disabled_c993da):hover { diff --git a/src/amoled-cord.css b/src/amoled-cord.css index 72e74ec..824aa2d 100644 --- a/src/amoled-cord.css +++ b/src/amoled-cord.css @@ -443,7 +443,7 @@ html.theme-dark .theme-light .root_f9a4c9, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .loadingCard_a6d69a { background-color: var(--background-tertiary); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .sortDropdown_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tag_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tagsButton_a6d69a { +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .sortDropdown_a6d69a, :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tag_a6d69a:not(.selected_c993da), :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .tagsButton_a6d69a { background-color: var(--background-secondary); } :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .pill_c993da.clickable_c993da:not(.disabled_c993da):hover { diff --git a/src/theme/chat/_forums.scss b/src/theme/chat/_forums.scss index 0825244..0627870 100644 --- a/src/theme/chat/_forums.scss +++ b/src/theme/chat/_forums.scss @@ -15,7 +15,7 @@ .loadingCard_a6d69a { background-color: var(--background-tertiary); } - .sortDropdown_a6d69a, .tag_a6d69a, .tagsButton_a6d69a { + .sortDropdown_a6d69a, .tag_a6d69a:not(.selected_c993da), .tagsButton_a6d69a { background-color: var(--background-secondary); } .pill_c993da.clickable_c993da:not(.disabled_c993da):hover { From b129b76637fc3d4186187154da5c43a6a199adc4 Mon Sep 17 00:00:00 2001 From: Federico <38290480+FedeIlLeone@users.noreply.github.com> Date: Thu, 5 Sep 2024 15:45:41 +0200 Subject: [PATCH 6/6] fix: message popover in split view --- clients/amoled-cord.theme.css | 2 +- clients/amoled-cord.user.css | 2 +- src/amoled-cord.css | 2 +- src/theme/chat/_container.scss | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/clients/amoled-cord.theme.css b/clients/amoled-cord.theme.css index 3fea01b..f5f2166 100644 --- a/clients/amoled-cord.theme.css +++ b/clients/amoled-cord.theme.css @@ -439,7 +439,7 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--background-primary); } -:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .wrapper_f7e168 { +:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .wrapper_f7e168, .container_d1c246 .wrapper_f7e168 { background-color: var(--background-tertiary); } diff --git a/clients/amoled-cord.user.css b/clients/amoled-cord.user.css index 4340a5e..ff05ee2 100644 --- a/clients/amoled-cord.user.css +++ b/clients/amoled-cord.user.css @@ -438,7 +438,7 @@ background-color: var(--background-primary); } - :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .wrapper_f7e168 { + :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .wrapper_f7e168, .container_d1c246 .wrapper_f7e168 { background-color: var(--background-tertiary); } diff --git a/src/amoled-cord.css b/src/amoled-cord.css index 824aa2d..03458ea 100644 --- a/src/amoled-cord.css +++ b/src/amoled-cord.css @@ -426,7 +426,7 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--background-primary); } -:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .wrapper_f7e168 { +:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .wrapper_f7e168, .container_d1c246 .wrapper_f7e168 { background-color: var(--background-tertiary); } diff --git a/src/theme/chat/_container.scss b/src/theme/chat/_container.scss index f0106b8..b7ff049 100644 --- a/src/theme/chat/_container.scss +++ b/src/theme/chat/_container.scss @@ -1,4 +1,4 @@ -:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e { +:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e, .container_d1c246 { .wrapper_f7e168 { background-color: var(--background-tertiary); }