diff --git a/clients/amoled-cord.theme.css b/clients/amoled-cord.theme.css index 4e553c6..e9f28bf 100644 --- a/clients/amoled-cord.theme.css +++ b/clients/amoled-cord.theme.css @@ -77,56 +77,33 @@ html.theme-dark .theme-light .root_f9a4c9, .theme-light.popout_f6639d { --activity-card-background: var(--primary-830) !important; - --android-navigation-bar-background: var(--primary-830) !important; - --android-navigation-scrim-background: hsl(var(--primary-830-hsl)/0.5) !important; - --android-ripple: hsl(var(--white-500-hsl)/0.07) !important; + --autocomplete-bg: var(--primary-860) !important; --background-accent: var(--primary-760) !important; --background-floating: var(--primary-830) !important; - --background-message-hover: hsl(var(--primary-900-hsl)/0.06) !important; - --background-mobile-primary: var(--black-500) !important; + --background-message-hover: hsl(var(--white-hsl)/0.015) !important; + --background-mobile-primary: var(--black) !important; --background-mobile-secondary: var(--primary-860) !important; --background-modifier-accent: 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; --background-nested-floating: var(--primary-830) !important; - --background-primary: var(--black-500) !important; + --background-primary: var(--black) !important; --background-secondary: var(--primary-830) !important; --background-secondary-alt: var(--primary-800) !important; --background-tertiary: var(--primary-860) !important; - --bug-reporter-modal-submitting-background: hsl(var(--primary-800-hsl)/0.6) !important; - --scrollbar-auto-scrollbar-color-track: var(--primary-860) !important; - --scrollbar-auto-scrollbar-color-thumb: var(--primary-800) !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; - --button-outline-brand-background: hsl(var(--white-500-hsl)/0) !important; - --button-outline-brand-text: var(--white-500) !important; - --button-outline-brand-text-active: var(--white-500) !important; - --button-outline-brand-text-hover: var(--white-500) !important; - --button-outline-danger-background: hsl(var(--white-500-hsl)/0) !important; - --button-outline-danger-background-active: var(--red-460) !important; - --button-outline-danger-background-hover: var(--red-430) !important; - --button-outline-danger-border: var(--red-400) !important; - --button-outline-danger-border-active: var(--red-430) !important; - --button-outline-danger-border-hover: var(--red-430) !important; - --button-outline-danger-text: var(--white-500) !important; - --button-outline-danger-text-active: var(--white-500) !important; - --button-outline-danger-text-hover: var(--white-500) !important; - --button-outline-positive-background: hsl(var(--white-500-hsl)/0) !important; - --button-outline-positive-text: var(--white-500) !important; - --button-outline-positive-text-active: var(--white-500) !important; - --button-outline-positive-text-hover: var(--white-500) !important; + --bg-mod-faint: hsl(var(--black-hsl)) !important; + --bg-surface-overlay: var(--primary-830) !important; + --bg-surface-raised: var(--primary-700) !important; --button-outline-primary-background: var(--primary-700) !important; --button-outline-primary-background-active: var(--primary-600) !important; --button-outline-primary-background-hover: var(--primary-630) !important; --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-500) !important; - --button-outline-primary-text-active: var(--white-500) !important; - --button-outline-primary-text-hover: var(--white-500) !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; @@ -135,58 +112,42 @@ html.theme-dark .theme-light .root_f9a4c9, --channel-text-area-placeholder: var(--primary-400) !important; --channels-default: var(--primary-360) !important; --channeltextarea-background: var(--primary-830) !important; - --chat-background: var(--black-500) !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-500-hsl)/0.3) !important; - --deprecated-store-bg: var(--black-500) !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-500-hsl)/0.3) !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; - --display-banner-overflow-background: hsl(var(--primary-700-hsl)/0.5) !important; - --forum-post-extra-media-count-container-background: hsl(var(--primary-660-hsl)/0.8) !important; - --forum-post-tag-background: hsl(var(--primary-660-hsl)/0.9) !important; --header-primary: var(--primary-130) !important; --header-secondary: var(--primary-345) !important; - --home-background: var(--black-500) !important; + --home-background: var(--black) !important; --home-card-resting-border: hsl(var(--transparent-hsl)/0) !important; - --info-danger-text: var(--white-500) !important; - --info-help-text: var(--white-500) !important; - --info-positive-text: var(--white-500) !important; - --info-warning-text: var(--white-500) !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; - --live-stage-tile-border: hsl(var(--primary-500-hsl)/0.6) !important; - --logo-primary: var(--white-500) !important; - --mention-background: hsl(var(--brand-500-hsl)/0.3) !important; --modal-background: var(--primary-860) !important; --modal-footer-background: var(--primary-900) !important; - --profile-gradient-message-input-border: hsl(var(--primary-500-hsl)/0.48) !important; - --profile-gradient-note-background: hsl(var(--black-500-hsl)/0.3) !important; - --profile-gradient-overlay: hsl(var(--black-500-hsl)/0.6) !important; - --profile-gradient-overlay-synced-with-user-theme: hsl(var(--black-500-hsl)/0.8) !important; - --profile-gradient-profile-body-background-hover: hsl(var(--white-500-hsl)/0.16) !important; - --profile-gradient-role-pill-background: hsl(var(--primary-660-hsl)/0.5) !important; - --profile-gradient-role-pill-border: hsl(var(--white-500-hsl)/0.2) !important; - --profile-gradient-section-box: hsl(var(--black-500-hsl)/0.45) !important; + --scrollbar-auto-scrollbar-color-track: var(--primary-860) !important; + --scrollbar-auto-scrollbar-color-thumb: var(--primary-800) !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; - --status-danger-text: var(--white-500) !important; - --status-positive-text: var(--white-500) !important; - --status-warning-text: var(--black-500) !important; --text-muted: var(--primary-345) !important; --text-normal: var(--primary-300) !important; --textbox-markdown-syntax: var(--primary-360) !important; - --user-profile-header-overflow-background: hsl(var(--primary-700-hsl)/0.5) !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; @@ -214,17 +175,244 @@ html.theme-dark .theme-light .root_f9a4c9, --profile-role-pill-border-color: var(--interactive-normal) !important; } +@supports (color: color-mix(in lch, red, blue)) and (top: var(--f)) { + .theme-dark { + --activity-card-background: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --autocomplete-bg: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-accent: color-mix( + in oklab, + var(--primary-760) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-floating: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-message-hover: color-mix( + in oklab, + hsl(var(--white-hsl) / 0.015) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.06) var(--theme-base-color-amount, 0%) + ) !important; + --background-mobile-primary: color-mix( + in oklab, + var(--black) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-mobile-secondary: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-modifier-accent: 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%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) + ) !important; + --background-modifier-hover: color-mix( + in oklab, + hsl(var(--primary-760-hsl) / 0.4) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4) var(--theme-base-color-amount, 0%) + ) !important; + --background-modifier-selected: color-mix( + in oklab, + hsl(var(--primary-760-hsl) / 0.6) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%) + ) !important; + --background-nested-floating: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-primary: color-mix( + in oklab, + var(--black) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-secondary: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-secondary-alt: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-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, + hsl(var(--black-hsl)) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%) + ) !important; + --bg-surface-overlay: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --bg-surface-raised: color-mix( + in oklab, + var(--primary-700) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --channeltextarea-background: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --chat-background: color-mix( + in oklab, + var(--black) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --chat-border: color-mix( + in oklab, + var(--primary-700) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --chat-input-container-background: color-mix( + in oklab, + var(--primary-600) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --deprecated-card-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%) + ) !important; + --deprecated-quickswitcher-input-background: color-mix( + in oklab, + var(--primary-400) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --deprecated-quickswitcher-input-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%) + ) !important; + --deprecated-store-bg: 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( + 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( + 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( + in oklab, + var(--primary-900) 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%) + ) !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; + --modal-background: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --modal-footer-background: color-mix( + in oklab, + var(--primary-900) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-auto-scrollbar-color-thumb: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-auto-scrollbar-color-track: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-auto-thumb: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-auto-track: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-thin-thumb: color-mix( + in oklab, + var(--primary-800) 100%, + 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%) + ) !important; + --spoiler-hidden-background: 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%) + ) !important; + } +} :is(.theme-dark, .theme-midnight) #app-mount .container_e40c16 { background-color: var(--background-primary); } -:is(.theme-dark, .theme-midnight) #app-mount .bar_c7a159 { - background-color: var(--background-accent); -} -:is(.theme-dark, .theme-midnight) #app-mount .markDash_c7a159 { - background: var(--background-accent); -} - :is(.theme-dark, .theme-midnight) #app-mount .container_e44302 [class*=searchBar] { background-color: var(--background-secondary); } @@ -247,6 +435,9 @@ html.theme-dark .theme-light .root_f9a4c9, :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 { background-color: var(--background-tertiary); } +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .matchingPostsRow_a6d69a { + background-color: var(--background-secondary); +} :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .loadingCard_a6d69a { background-color: var(--background-tertiary); } @@ -269,12 +460,12 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--background-modifier-selected); } -:is(.theme-dark, .theme-midnight) #app-mount .messageListItem_d5deea:hover { - background-color: rgba(255, 255, 255, 0.015); -} :is(.theme-dark, .theme-midnight) #app-mount .tile_ab47a1 { background-color: var(--background-secondary); } +:is(.theme-dark, .theme-midnight) #app-mount .tile_ab47a1:hover { + background-color: var(--background-modifier-hover); +} :is(.theme-dark, .theme-midnight) #app-mount .tile_ab47a1 .invalidPoop_ff31dd { background-color: var(--background-secondary-alt); } @@ -288,20 +479,10 @@ html.theme-dark .theme-light .root_f9a4c9, :is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .enabled_b97e9a[aria-checked=false] .answerInner_cf2c85:hover { outline-color: var(--background-secondary-alt); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .answerInner_cf2c85 { - background-color: var(--background-primary); -} :is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .normalStylesDefault_b5cb3c .votePercentageBar_cf2c85 { background-color: var(--background-secondary-alt); } -:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .container_f1fd9c, -:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .container_c2efea, -:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .header_f1fd9c, -:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .scrollerContainer_c6b11b, -:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .emptyPage_c6b11b { - background-color: transparent; -} :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .prompt_c6b11b { background-color: var(--background-tertiary); } @@ -328,6 +509,15 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--background-modifier-hover); } +:is(.theme-dark, .theme-midnight) .folder_bc7085.hover_bc7085 { + background-color: var(--background-secondary-alt); +} + +:is(.theme-dark, .theme-midnight) #app-mount [class=wrapper_f90abb] .childWrapper_f90abb, +:is(.theme-dark, .theme-midnight) #app-mount [class=circleIconButton_db6521] { + 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 { background-color: var(--button-secondary-background); } @@ -338,18 +528,16 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--button-secondary-background-active); } -:is(.theme-dark, .theme-midnight) #app-mount .key_c90023 { +:is(.theme-dark, .theme-midnight) #app-mount .key_c90023:not(.keyComboInner_f51af4, .keyComboInner_c11c02) { box-shadow: inset 0 -4px 0 var(--primary-760); background-color: var(--primary-660); } -:is(.theme-dark, .theme-midnight) .folder_bc7085.hover_bc7085 { - background-color: var(--background-secondary-alt); +:is(.theme-dark, .theme-midnight) #app-mount .bar_c7a159 { + background-color: var(--background-accent); } - -:is(.theme-dark, .theme-midnight) #app-mount [class=wrapper_f90abb] .childWrapper_f90abb, -:is(.theme-dark, .theme-midnight) #app-mount [class=circleIconButton_db6521] { - background-color: var(--background-secondary-alt); +:is(.theme-dark, .theme-midnight) #app-mount .markDash_c7a159 { + background: var(--background-accent); } :is(.theme-dark, .theme-midnight) .container_cbd271 { @@ -372,6 +560,13 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--modal-footer-background); } +:is(.theme-dark, .theme-midnight) #app-mount .container_f24a96 { + background-color: var(--modal-background); +} +:is(.theme-dark, .theme-midnight) #app-mount .container_f24a96 .footer_f24a96 { + background-color: var(--modal-footer-background); +} + :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .message_ddcc45 { background-color: var(--background-primary); } @@ -432,12 +627,9 @@ html.theme-dark .theme-light .root_f9a4c9, background: none !important; } -:is(.theme-dark, .theme-midnight) #app-mount .container_f24a96 { +:is(.theme-dark, .theme-midnight) #app-mount .voters_cbdbf0 { background-color: var(--modal-background); } -:is(.theme-dark, .theme-midnight) #app-mount .container_f24a96 .footer_f24a96 { - background-color: var(--modal-footer-background); -} :is(.theme-dark, .theme-midnight) #app-mount .modal_b3373b .body_b3373b { background-color: var(--modal-background); @@ -725,10 +917,9 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .autocomplete_f23da8 { - background-color: var(--background-tertiary); -} -:is(.theme-dark, .theme-midnight) #app-mount .autocomplete_f23da8 .categoryHeader_fe2299 { +:is(.theme-dark, .theme-midnight) #app-mount .customColorPicker_b91d66 { + border: none; + box-shadow: var(--dark-elevation-border), var(--dark-elevation-high); background-color: var(--background-tertiary); } @@ -756,12 +947,6 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .customColorPicker_b91d66 { - border: none; - box-shadow: var(--dark-elevation-border), var(--dark-elevation-high); - background-color: var(--background-tertiary); -} - :is(.theme-dark, .theme-midnight) #app-mount .overflowRolesPopout_e4010c { background-color: var(--background-floating); } @@ -769,6 +954,10 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { background-color: var(--background-floating); } +:is(.theme-dark, .theme-midnight) #app-mount .popout_b705bc { + background-color: var(--background-floating); +} + :is(.theme-dark, .theme-midnight) #app-mount .quickSelectPopout_abbf45 { background-color: var(--background-floating); } @@ -947,6 +1136,10 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { background-color: transparent; } +#app-mount .sidebarContianer_d2194f :is(.theme-dark, .theme-midnight) .topRow_d936aa, #app-mount .sidebarContianer_d2194f :is(.theme-dark, .theme-midnight) .bottomRowAction_d936aa, #app-mount .sidebarContianer_d2194f :is(.theme-dark, .theme-midnight) .header_f51af4, #app-mount .sidebarContianer_d2194f :is(.theme-dark, .theme-midnight) .container_f51af4 { + background-color: hsl(var(--black-hsl)/0.8) !important; +} + :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 2518826..7730fdd 100644 --- a/clients/amoled-cord.user.css +++ b/clients/amoled-cord.user.css @@ -76,56 +76,33 @@ html.theme-dark .theme-light .root_f9a4c9, .theme-light.popout_f6639d { --activity-card-background: var(--primary-830) !important; - --android-navigation-bar-background: var(--primary-830) !important; - --android-navigation-scrim-background: hsl(var(--primary-830-hsl)/0.5) !important; - --android-ripple: hsl(var(--white-500-hsl)/0.07) !important; + --autocomplete-bg: var(--primary-860) !important; --background-accent: var(--primary-760) !important; --background-floating: var(--primary-830) !important; - --background-message-hover: hsl(var(--primary-900-hsl)/0.06) !important; - --background-mobile-primary: var(--black-500) !important; + --background-message-hover: hsl(var(--white-hsl)/0.015) !important; + --background-mobile-primary: var(--black) !important; --background-mobile-secondary: var(--primary-860) !important; --background-modifier-accent: 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; --background-nested-floating: var(--primary-830) !important; - --background-primary: var(--black-500) !important; + --background-primary: var(--black) !important; --background-secondary: var(--primary-830) !important; --background-secondary-alt: var(--primary-800) !important; --background-tertiary: var(--primary-860) !important; - --bug-reporter-modal-submitting-background: hsl(var(--primary-800-hsl)/0.6) !important; - --scrollbar-auto-scrollbar-color-track: var(--primary-860) !important; - --scrollbar-auto-scrollbar-color-thumb: var(--primary-800) !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; - --button-outline-brand-background: hsl(var(--white-500-hsl)/0) !important; - --button-outline-brand-text: var(--white-500) !important; - --button-outline-brand-text-active: var(--white-500) !important; - --button-outline-brand-text-hover: var(--white-500) !important; - --button-outline-danger-background: hsl(var(--white-500-hsl)/0) !important; - --button-outline-danger-background-active: var(--red-460) !important; - --button-outline-danger-background-hover: var(--red-430) !important; - --button-outline-danger-border: var(--red-400) !important; - --button-outline-danger-border-active: var(--red-430) !important; - --button-outline-danger-border-hover: var(--red-430) !important; - --button-outline-danger-text: var(--white-500) !important; - --button-outline-danger-text-active: var(--white-500) !important; - --button-outline-danger-text-hover: var(--white-500) !important; - --button-outline-positive-background: hsl(var(--white-500-hsl)/0) !important; - --button-outline-positive-text: var(--white-500) !important; - --button-outline-positive-text-active: var(--white-500) !important; - --button-outline-positive-text-hover: var(--white-500) !important; + --bg-mod-faint: hsl(var(--black-hsl)) !important; + --bg-surface-overlay: var(--primary-830) !important; + --bg-surface-raised: var(--primary-700) !important; --button-outline-primary-background: var(--primary-700) !important; --button-outline-primary-background-active: var(--primary-600) !important; --button-outline-primary-background-hover: var(--primary-630) !important; --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-500) !important; - --button-outline-primary-text-active: var(--white-500) !important; - --button-outline-primary-text-hover: var(--white-500) !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; @@ -134,58 +111,42 @@ --channel-text-area-placeholder: var(--primary-400) !important; --channels-default: var(--primary-360) !important; --channeltextarea-background: var(--primary-830) !important; - --chat-background: var(--black-500) !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-500-hsl)/0.3) !important; - --deprecated-store-bg: var(--black-500) !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-500-hsl)/0.3) !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; - --display-banner-overflow-background: hsl(var(--primary-700-hsl)/0.5) !important; - --forum-post-extra-media-count-container-background: hsl(var(--primary-660-hsl)/0.8) !important; - --forum-post-tag-background: hsl(var(--primary-660-hsl)/0.9) !important; --header-primary: var(--primary-130) !important; --header-secondary: var(--primary-345) !important; - --home-background: var(--black-500) !important; + --home-background: var(--black) !important; --home-card-resting-border: hsl(var(--transparent-hsl)/0) !important; - --info-danger-text: var(--white-500) !important; - --info-help-text: var(--white-500) !important; - --info-positive-text: var(--white-500) !important; - --info-warning-text: var(--white-500) !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; - --live-stage-tile-border: hsl(var(--primary-500-hsl)/0.6) !important; - --logo-primary: var(--white-500) !important; - --mention-background: hsl(var(--brand-500-hsl)/0.3) !important; --modal-background: var(--primary-860) !important; --modal-footer-background: var(--primary-900) !important; - --profile-gradient-message-input-border: hsl(var(--primary-500-hsl)/0.48) !important; - --profile-gradient-note-background: hsl(var(--black-500-hsl)/0.3) !important; - --profile-gradient-overlay: hsl(var(--black-500-hsl)/0.6) !important; - --profile-gradient-overlay-synced-with-user-theme: hsl(var(--black-500-hsl)/0.8) !important; - --profile-gradient-profile-body-background-hover: hsl(var(--white-500-hsl)/0.16) !important; - --profile-gradient-role-pill-background: hsl(var(--primary-660-hsl)/0.5) !important; - --profile-gradient-role-pill-border: hsl(var(--white-500-hsl)/0.2) !important; - --profile-gradient-section-box: hsl(var(--black-500-hsl)/0.45) !important; + --scrollbar-auto-scrollbar-color-track: var(--primary-860) !important; + --scrollbar-auto-scrollbar-color-thumb: var(--primary-800) !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; - --status-danger-text: var(--white-500) !important; - --status-positive-text: var(--white-500) !important; - --status-warning-text: var(--black-500) !important; --text-muted: var(--primary-345) !important; --text-normal: var(--primary-300) !important; --textbox-markdown-syntax: var(--primary-360) !important; - --user-profile-header-overflow-background: hsl(var(--primary-700-hsl)/0.5) !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; @@ -213,17 +174,244 @@ --profile-role-pill-border-color: var(--interactive-normal) !important; } + @supports (color: color-mix(in lch, red, blue)) and (top: var(--f)) { + .theme-dark { + --activity-card-background: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --autocomplete-bg: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-accent: color-mix( + in oklab, + var(--primary-760) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-floating: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-message-hover: color-mix( + in oklab, + hsl(var(--white-hsl) / 0.015) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.06) var(--theme-base-color-amount, 0%) + ) !important; + --background-mobile-primary: color-mix( + in oklab, + var(--black) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-mobile-secondary: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-modifier-accent: 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%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) + ) !important; + --background-modifier-hover: color-mix( + in oklab, + hsl(var(--primary-760-hsl) / 0.4) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4) var(--theme-base-color-amount, 0%) + ) !important; + --background-modifier-selected: color-mix( + in oklab, + hsl(var(--primary-760-hsl) / 0.6) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%) + ) !important; + --background-nested-floating: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-primary: color-mix( + in oklab, + var(--black) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-secondary: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-secondary-alt: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-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, + hsl(var(--black-hsl)) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%) + ) !important; + --bg-surface-overlay: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --bg-surface-raised: color-mix( + in oklab, + var(--primary-700) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --channeltextarea-background: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --chat-background: color-mix( + in oklab, + var(--black) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --chat-border: color-mix( + in oklab, + var(--primary-700) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --chat-input-container-background: color-mix( + in oklab, + var(--primary-600) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --deprecated-card-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%) + ) !important; + --deprecated-quickswitcher-input-background: color-mix( + in oklab, + var(--primary-400) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --deprecated-quickswitcher-input-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%) + ) !important; + --deprecated-store-bg: 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( + 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( + 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( + in oklab, + var(--primary-900) 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%) + ) !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; + --modal-background: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --modal-footer-background: color-mix( + in oklab, + var(--primary-900) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-auto-scrollbar-color-thumb: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-auto-scrollbar-color-track: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-auto-thumb: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-auto-track: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-thin-thumb: color-mix( + in oklab, + var(--primary-800) 100%, + 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%) + ) !important; + --spoiler-hidden-background: 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%) + ) !important; + } + } :is(.theme-dark, .theme-midnight) #app-mount .container_e40c16 { background-color: var(--background-primary); } - :is(.theme-dark, .theme-midnight) #app-mount .bar_c7a159 { - background-color: var(--background-accent); - } - :is(.theme-dark, .theme-midnight) #app-mount .markDash_c7a159 { - background: var(--background-accent); - } - :is(.theme-dark, .theme-midnight) #app-mount .container_e44302 [class*=searchBar] { background-color: var(--background-secondary); } @@ -246,6 +434,9 @@ :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 { background-color: var(--background-tertiary); } + :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .matchingPostsRow_a6d69a { + background-color: var(--background-secondary); + } :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .loadingCard_a6d69a { background-color: var(--background-tertiary); } @@ -268,12 +459,12 @@ background-color: var(--background-modifier-selected); } - :is(.theme-dark, .theme-midnight) #app-mount .messageListItem_d5deea:hover { - background-color: rgba(255, 255, 255, 0.015); - } :is(.theme-dark, .theme-midnight) #app-mount .tile_ab47a1 { background-color: var(--background-secondary); } + :is(.theme-dark, .theme-midnight) #app-mount .tile_ab47a1:hover { + background-color: var(--background-modifier-hover); + } :is(.theme-dark, .theme-midnight) #app-mount .tile_ab47a1 .invalidPoop_ff31dd { background-color: var(--background-secondary-alt); } @@ -287,20 +478,10 @@ :is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .enabled_b97e9a[aria-checked=false] .answerInner_cf2c85:hover { outline-color: var(--background-secondary-alt); } - :is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .answerInner_cf2c85 { - background-color: var(--background-primary); - } :is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .normalStylesDefault_b5cb3c .votePercentageBar_cf2c85 { background-color: var(--background-secondary-alt); } - :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .container_f1fd9c, - :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .container_c2efea, - :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .header_f1fd9c, - :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .scrollerContainer_c6b11b, - :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .emptyPage_c6b11b { - background-color: transparent; - } :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .prompt_c6b11b { background-color: var(--background-tertiary); } @@ -327,6 +508,15 @@ background-color: var(--background-modifier-hover); } + :is(.theme-dark, .theme-midnight) .folder_bc7085.hover_bc7085 { + background-color: var(--background-secondary-alt); + } + + :is(.theme-dark, .theme-midnight) #app-mount [class=wrapper_f90abb] .childWrapper_f90abb, + :is(.theme-dark, .theme-midnight) #app-mount [class=circleIconButton_db6521] { + 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 { background-color: var(--button-secondary-background); } @@ -337,18 +527,16 @@ background-color: var(--button-secondary-background-active); } - :is(.theme-dark, .theme-midnight) #app-mount .key_c90023 { + :is(.theme-dark, .theme-midnight) #app-mount .key_c90023:not(.keyComboInner_f51af4, .keyComboInner_c11c02) { box-shadow: inset 0 -4px 0 var(--primary-760); background-color: var(--primary-660); } - :is(.theme-dark, .theme-midnight) .folder_bc7085.hover_bc7085 { - background-color: var(--background-secondary-alt); + :is(.theme-dark, .theme-midnight) #app-mount .bar_c7a159 { + background-color: var(--background-accent); } - - :is(.theme-dark, .theme-midnight) #app-mount [class=wrapper_f90abb] .childWrapper_f90abb, - :is(.theme-dark, .theme-midnight) #app-mount [class=circleIconButton_db6521] { - background-color: var(--background-secondary-alt); + :is(.theme-dark, .theme-midnight) #app-mount .markDash_c7a159 { + background: var(--background-accent); } :is(.theme-dark, .theme-midnight) .container_cbd271 { @@ -371,6 +559,13 @@ background-color: var(--modal-footer-background); } + :is(.theme-dark, .theme-midnight) #app-mount .container_f24a96 { + background-color: var(--modal-background); + } + :is(.theme-dark, .theme-midnight) #app-mount .container_f24a96 .footer_f24a96 { + background-color: var(--modal-footer-background); + } + :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .message_ddcc45 { background-color: var(--background-primary); } @@ -431,12 +626,9 @@ background: none !important; } - :is(.theme-dark, .theme-midnight) #app-mount .container_f24a96 { + :is(.theme-dark, .theme-midnight) #app-mount .voters_cbdbf0 { background-color: var(--modal-background); } - :is(.theme-dark, .theme-midnight) #app-mount .container_f24a96 .footer_f24a96 { - background-color: var(--modal-footer-background); - } :is(.theme-dark, .theme-midnight) #app-mount .modal_b3373b .body_b3373b { background-color: var(--modal-background); @@ -724,10 +916,9 @@ background-color: var(--background-secondary); } - :is(.theme-dark, .theme-midnight) #app-mount .autocomplete_f23da8 { - background-color: var(--background-tertiary); - } - :is(.theme-dark, .theme-midnight) #app-mount .autocomplete_f23da8 .categoryHeader_fe2299 { + :is(.theme-dark, .theme-midnight) #app-mount .customColorPicker_b91d66 { + border: none; + box-shadow: var(--dark-elevation-border), var(--dark-elevation-high); background-color: var(--background-tertiary); } @@ -755,12 +946,6 @@ background-color: var(--background-secondary); } - :is(.theme-dark, .theme-midnight) #app-mount .customColorPicker_b91d66 { - border: none; - box-shadow: var(--dark-elevation-border), var(--dark-elevation-high); - background-color: var(--background-tertiary); - } - :is(.theme-dark, .theme-midnight) #app-mount .overflowRolesPopout_e4010c { background-color: var(--background-floating); } @@ -768,6 +953,10 @@ background-color: var(--background-floating); } + :is(.theme-dark, .theme-midnight) #app-mount .popout_b705bc { + background-color: var(--background-floating); + } + :is(.theme-dark, .theme-midnight) #app-mount .quickSelectPopout_abbf45 { background-color: var(--background-floating); } @@ -946,6 +1135,10 @@ background-color: transparent; } + #app-mount .sidebarContianer_d2194f :is(.theme-dark, .theme-midnight) .topRow_d936aa, #app-mount .sidebarContianer_d2194f :is(.theme-dark, .theme-midnight) .bottomRowAction_d936aa, #app-mount .sidebarContianer_d2194f :is(.theme-dark, .theme-midnight) .header_f51af4, #app-mount .sidebarContianer_d2194f :is(.theme-dark, .theme-midnight) .container_f51af4 { + background-color: hsl(var(--black-hsl)/0.8) !important; + } + :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 acf6ef1..e74f5aa 100644 --- a/src/amoled-cord.css +++ b/src/amoled-cord.css @@ -64,56 +64,33 @@ html.theme-dark .theme-light .root_f9a4c9, .theme-light.popout_f6639d { --activity-card-background: var(--primary-830) !important; - --android-navigation-bar-background: var(--primary-830) !important; - --android-navigation-scrim-background: hsl(var(--primary-830-hsl)/0.5) !important; - --android-ripple: hsl(var(--white-500-hsl)/0.07) !important; + --autocomplete-bg: var(--primary-860) !important; --background-accent: var(--primary-760) !important; --background-floating: var(--primary-830) !important; - --background-message-hover: hsl(var(--primary-900-hsl)/0.06) !important; - --background-mobile-primary: var(--black-500) !important; + --background-message-hover: hsl(var(--white-hsl)/0.015) !important; + --background-mobile-primary: var(--black) !important; --background-mobile-secondary: var(--primary-860) !important; --background-modifier-accent: 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; --background-nested-floating: var(--primary-830) !important; - --background-primary: var(--black-500) !important; + --background-primary: var(--black) !important; --background-secondary: var(--primary-830) !important; --background-secondary-alt: var(--primary-800) !important; --background-tertiary: var(--primary-860) !important; - --bug-reporter-modal-submitting-background: hsl(var(--primary-800-hsl)/0.6) !important; - --scrollbar-auto-scrollbar-color-track: var(--primary-860) !important; - --scrollbar-auto-scrollbar-color-thumb: var(--primary-800) !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; - --button-outline-brand-background: hsl(var(--white-500-hsl)/0) !important; - --button-outline-brand-text: var(--white-500) !important; - --button-outline-brand-text-active: var(--white-500) !important; - --button-outline-brand-text-hover: var(--white-500) !important; - --button-outline-danger-background: hsl(var(--white-500-hsl)/0) !important; - --button-outline-danger-background-active: var(--red-460) !important; - --button-outline-danger-background-hover: var(--red-430) !important; - --button-outline-danger-border: var(--red-400) !important; - --button-outline-danger-border-active: var(--red-430) !important; - --button-outline-danger-border-hover: var(--red-430) !important; - --button-outline-danger-text: var(--white-500) !important; - --button-outline-danger-text-active: var(--white-500) !important; - --button-outline-danger-text-hover: var(--white-500) !important; - --button-outline-positive-background: hsl(var(--white-500-hsl)/0) !important; - --button-outline-positive-text: var(--white-500) !important; - --button-outline-positive-text-active: var(--white-500) !important; - --button-outline-positive-text-hover: var(--white-500) !important; + --bg-mod-faint: hsl(var(--black-hsl)) !important; + --bg-surface-overlay: var(--primary-830) !important; + --bg-surface-raised: var(--primary-700) !important; --button-outline-primary-background: var(--primary-700) !important; --button-outline-primary-background-active: var(--primary-600) !important; --button-outline-primary-background-hover: var(--primary-630) !important; --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-500) !important; - --button-outline-primary-text-active: var(--white-500) !important; - --button-outline-primary-text-hover: var(--white-500) !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; @@ -122,58 +99,42 @@ html.theme-dark .theme-light .root_f9a4c9, --channel-text-area-placeholder: var(--primary-400) !important; --channels-default: var(--primary-360) !important; --channeltextarea-background: var(--primary-830) !important; - --chat-background: var(--black-500) !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-500-hsl)/0.3) !important; - --deprecated-store-bg: var(--black-500) !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-500-hsl)/0.3) !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; - --display-banner-overflow-background: hsl(var(--primary-700-hsl)/0.5) !important; - --forum-post-extra-media-count-container-background: hsl(var(--primary-660-hsl)/0.8) !important; - --forum-post-tag-background: hsl(var(--primary-660-hsl)/0.9) !important; --header-primary: var(--primary-130) !important; --header-secondary: var(--primary-345) !important; - --home-background: var(--black-500) !important; + --home-background: var(--black) !important; --home-card-resting-border: hsl(var(--transparent-hsl)/0) !important; - --info-danger-text: var(--white-500) !important; - --info-help-text: var(--white-500) !important; - --info-positive-text: var(--white-500) !important; - --info-warning-text: var(--white-500) !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; - --live-stage-tile-border: hsl(var(--primary-500-hsl)/0.6) !important; - --logo-primary: var(--white-500) !important; - --mention-background: hsl(var(--brand-500-hsl)/0.3) !important; --modal-background: var(--primary-860) !important; --modal-footer-background: var(--primary-900) !important; - --profile-gradient-message-input-border: hsl(var(--primary-500-hsl)/0.48) !important; - --profile-gradient-note-background: hsl(var(--black-500-hsl)/0.3) !important; - --profile-gradient-overlay: hsl(var(--black-500-hsl)/0.6) !important; - --profile-gradient-overlay-synced-with-user-theme: hsl(var(--black-500-hsl)/0.8) !important; - --profile-gradient-profile-body-background-hover: hsl(var(--white-500-hsl)/0.16) !important; - --profile-gradient-role-pill-background: hsl(var(--primary-660-hsl)/0.5) !important; - --profile-gradient-role-pill-border: hsl(var(--white-500-hsl)/0.2) !important; - --profile-gradient-section-box: hsl(var(--black-500-hsl)/0.45) !important; + --scrollbar-auto-scrollbar-color-track: var(--primary-860) !important; + --scrollbar-auto-scrollbar-color-thumb: var(--primary-800) !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; - --status-danger-text: var(--white-500) !important; - --status-positive-text: var(--white-500) !important; - --status-warning-text: var(--black-500) !important; --text-muted: var(--primary-345) !important; --text-normal: var(--primary-300) !important; --textbox-markdown-syntax: var(--primary-360) !important; - --user-profile-header-overflow-background: hsl(var(--primary-700-hsl)/0.5) !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; @@ -201,17 +162,244 @@ html.theme-dark .theme-light .root_f9a4c9, --profile-role-pill-border-color: var(--interactive-normal) !important; } +@supports (color: color-mix(in lch, red, blue)) and (top: var(--f)) { + .theme-dark { + --activity-card-background: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --autocomplete-bg: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-accent: color-mix( + in oklab, + var(--primary-760) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-floating: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-message-hover: color-mix( + in oklab, + hsl(var(--white-hsl) / 0.015) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.06) var(--theme-base-color-amount, 0%) + ) !important; + --background-mobile-primary: color-mix( + in oklab, + var(--black) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-mobile-secondary: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-modifier-accent: 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%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) + ) !important; + --background-modifier-hover: color-mix( + in oklab, + hsl(var(--primary-760-hsl) / 0.4) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4) var(--theme-base-color-amount, 0%) + ) !important; + --background-modifier-selected: color-mix( + in oklab, + hsl(var(--primary-760-hsl) / 0.6) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%) + ) !important; + --background-nested-floating: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-primary: color-mix( + in oklab, + var(--black) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-secondary: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-secondary-alt: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-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, + hsl(var(--black-hsl)) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%) + ) !important; + --bg-surface-overlay: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --bg-surface-raised: color-mix( + in oklab, + var(--primary-700) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --channeltextarea-background: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --chat-background: color-mix( + in oklab, + var(--black) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --chat-border: color-mix( + in oklab, + var(--primary-700) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --chat-input-container-background: color-mix( + in oklab, + var(--primary-600) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --deprecated-card-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%) + ) !important; + --deprecated-quickswitcher-input-background: color-mix( + in oklab, + var(--primary-400) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --deprecated-quickswitcher-input-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%) + ) !important; + --deprecated-store-bg: 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( + 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( + 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( + in oklab, + var(--primary-900) 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%) + ) !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; + --modal-background: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --modal-footer-background: color-mix( + in oklab, + var(--primary-900) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-auto-scrollbar-color-thumb: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-auto-scrollbar-color-track: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-auto-thumb: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-auto-track: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-thin-thumb: color-mix( + in oklab, + var(--primary-800) 100%, + 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%) + ) !important; + --spoiler-hidden-background: 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%) + ) !important; + } +} :is(.theme-dark, .theme-midnight) #app-mount .container_e40c16 { background-color: var(--background-primary); } -:is(.theme-dark, .theme-midnight) #app-mount .bar_c7a159 { - background-color: var(--background-accent); -} -:is(.theme-dark, .theme-midnight) #app-mount .markDash_c7a159 { - background: var(--background-accent); -} - :is(.theme-dark, .theme-midnight) #app-mount .container_e44302 [class*=searchBar] { background-color: var(--background-secondary); } @@ -234,6 +422,9 @@ html.theme-dark .theme-light .root_f9a4c9, :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 { background-color: var(--background-tertiary); } +:is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .matchingPostsRow_a6d69a { + background-color: var(--background-secondary); +} :is(.theme-dark, .theme-midnight) #app-mount .container_a6d69a .loadingCard_a6d69a { background-color: var(--background-tertiary); } @@ -256,12 +447,12 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--background-modifier-selected); } -:is(.theme-dark, .theme-midnight) #app-mount .messageListItem_d5deea:hover { - background-color: rgba(255, 255, 255, 0.015); -} :is(.theme-dark, .theme-midnight) #app-mount .tile_ab47a1 { background-color: var(--background-secondary); } +:is(.theme-dark, .theme-midnight) #app-mount .tile_ab47a1:hover { + background-color: var(--background-modifier-hover); +} :is(.theme-dark, .theme-midnight) #app-mount .tile_ab47a1 .invalidPoop_ff31dd { background-color: var(--background-secondary-alt); } @@ -275,20 +466,10 @@ html.theme-dark .theme-light .root_f9a4c9, :is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .enabled_b97e9a[aria-checked=false] .answerInner_cf2c85:hover { outline-color: var(--background-secondary-alt); } -:is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .answerInner_cf2c85 { - background-color: var(--background-primary); -} :is(.theme-dark, .theme-midnight) #app-mount .container_a1531c .normalStylesDefault_b5cb3c .votePercentageBar_cf2c85 { background-color: var(--background-secondary-alt); } -:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .container_f1fd9c, -:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .container_c2efea, -:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .header_f1fd9c, -:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .scrollerContainer_c6b11b, -:is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .emptyPage_c6b11b { - background-color: transparent; -} :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e .prompt_c6b11b { background-color: var(--background-tertiary); } @@ -315,6 +496,15 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--background-modifier-hover); } +:is(.theme-dark, .theme-midnight) .folder_bc7085.hover_bc7085 { + background-color: var(--background-secondary-alt); +} + +:is(.theme-dark, .theme-midnight) #app-mount [class=wrapper_f90abb] .childWrapper_f90abb, +:is(.theme-dark, .theme-midnight) #app-mount [class=circleIconButton_db6521] { + 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 { background-color: var(--button-secondary-background); } @@ -325,18 +515,16 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--button-secondary-background-active); } -:is(.theme-dark, .theme-midnight) #app-mount .key_c90023 { +:is(.theme-dark, .theme-midnight) #app-mount .key_c90023:not(.keyComboInner_f51af4, .keyComboInner_c11c02) { box-shadow: inset 0 -4px 0 var(--primary-760); background-color: var(--primary-660); } -:is(.theme-dark, .theme-midnight) .folder_bc7085.hover_bc7085 { - background-color: var(--background-secondary-alt); +:is(.theme-dark, .theme-midnight) #app-mount .bar_c7a159 { + background-color: var(--background-accent); } - -:is(.theme-dark, .theme-midnight) #app-mount [class=wrapper_f90abb] .childWrapper_f90abb, -:is(.theme-dark, .theme-midnight) #app-mount [class=circleIconButton_db6521] { - background-color: var(--background-secondary-alt); +:is(.theme-dark, .theme-midnight) #app-mount .markDash_c7a159 { + background: var(--background-accent); } :is(.theme-dark, .theme-midnight) .container_cbd271 { @@ -359,6 +547,13 @@ html.theme-dark .theme-light .root_f9a4c9, background-color: var(--modal-footer-background); } +:is(.theme-dark, .theme-midnight) #app-mount .container_f24a96 { + background-color: var(--modal-background); +} +:is(.theme-dark, .theme-midnight) #app-mount .container_f24a96 .footer_f24a96 { + background-color: var(--modal-footer-background); +} + :is(.theme-dark, .theme-midnight) #app-mount .root_f9a4c9 .message_ddcc45 { background-color: var(--background-primary); } @@ -419,12 +614,9 @@ html.theme-dark .theme-light .root_f9a4c9, background: none !important; } -:is(.theme-dark, .theme-midnight) #app-mount .container_f24a96 { +:is(.theme-dark, .theme-midnight) #app-mount .voters_cbdbf0 { background-color: var(--modal-background); } -:is(.theme-dark, .theme-midnight) #app-mount .container_f24a96 .footer_f24a96 { - background-color: var(--modal-footer-background); -} :is(.theme-dark, .theme-midnight) #app-mount .modal_b3373b .body_b3373b { background-color: var(--modal-background); @@ -712,10 +904,9 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .autocomplete_f23da8 { - background-color: var(--background-tertiary); -} -:is(.theme-dark, .theme-midnight) #app-mount .autocomplete_f23da8 .categoryHeader_fe2299 { +:is(.theme-dark, .theme-midnight) #app-mount .customColorPicker_b91d66 { + border: none; + box-shadow: var(--dark-elevation-border), var(--dark-elevation-high); background-color: var(--background-tertiary); } @@ -743,12 +934,6 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { background-color: var(--background-secondary); } -:is(.theme-dark, .theme-midnight) #app-mount .customColorPicker_b91d66 { - border: none; - box-shadow: var(--dark-elevation-border), var(--dark-elevation-high); - background-color: var(--background-tertiary); -} - :is(.theme-dark, .theme-midnight) #app-mount .overflowRolesPopout_e4010c { background-color: var(--background-floating); } @@ -756,6 +941,10 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { background-color: var(--background-floating); } +:is(.theme-dark, .theme-midnight) #app-mount .popout_b705bc { + background-color: var(--background-floating); +} + :is(.theme-dark, .theme-midnight) #app-mount .quickSelectPopout_abbf45 { background-color: var(--background-floating); } @@ -934,6 +1123,10 @@ body .contentWrapper-3RqEiS .accordionContainer-vSTU_l { background-color: transparent; } +#app-mount .sidebarContianer_d2194f :is(.theme-dark, .theme-midnight) .topRow_d936aa, #app-mount .sidebarContianer_d2194f :is(.theme-dark, .theme-midnight) .bottomRowAction_d936aa, #app-mount .sidebarContianer_d2194f :is(.theme-dark, .theme-midnight) .header_f51af4, #app-mount .sidebarContianer_d2194f :is(.theme-dark, .theme-midnight) .container_f51af4 { + background-color: hsl(var(--black-hsl)/0.8) !important; +} + :is(.theme-dark, .theme-midnight) .sidebar_a4d4d9 .panels_a4d4d9 { background-color: var(--background-primary); } diff --git a/src/core/_variables.scss b/src/core/_variables.scss index be8659b..0141cbe 100644 --- a/src/core/_variables.scss +++ b/src/core/_variables.scss @@ -65,60 +65,33 @@ html.theme-dark .theme-light .root_f9a4c9, .theme-light.popout_f6639d { --activity-card-background: var(--primary-830) !important; - --android-navigation-bar-background: var(--primary-830) !important; - --android-navigation-scrim-background: hsl(var(--primary-830-hsl)/0.5) !important; - --android-ripple: hsl(var(--white-500-hsl)/0.07) !important; + --autocomplete-bg: var(--primary-860) !important; --background-accent: var(--primary-760) !important; --background-floating: var(--primary-830) !important; - --background-message-hover: hsl(var(--primary-900-hsl)/0.06) !important; - --background-mobile-primary: var(--black-500) !important; + --background-message-hover: hsl(var(--white-hsl)/0.015) !important; + --background-mobile-primary: var(--black) !important; --background-mobile-secondary: var(--primary-860) !important; --background-modifier-accent: 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; --background-nested-floating: var(--primary-830) !important; - --background-primary: var(--black-500) !important; + --background-primary: var(--black) !important; --background-secondary: var(--primary-830) !important; --background-secondary-alt: var(--primary-800) !important; --background-tertiary: var(--primary-860) !important; - --bug-reporter-modal-submitting-background: hsl(var(--primary-800-hsl)/0.6) !important; - - --scrollbar-auto-scrollbar-color-track: var(--primary-860) !important; - --scrollbar-auto-scrollbar-color-thumb: var(--primary-800) !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; - - --button-outline-brand-background: hsl(var(--white-500-hsl)/0) !important; - --button-outline-brand-text: var(--white-500) !important; - --button-outline-brand-text-active: var(--white-500) !important; - --button-outline-brand-text-hover: var(--white-500) !important; - --button-outline-danger-background: hsl(var(--white-500-hsl)/0) !important; - --button-outline-danger-background-active: var(--red-460) !important; - --button-outline-danger-background-hover: var(--red-430) !important; - --button-outline-danger-border: var(--red-400) !important; - --button-outline-danger-border-active: var(--red-430) !important; - --button-outline-danger-border-hover: var(--red-430) !important; - --button-outline-danger-text: var(--white-500) !important; - --button-outline-danger-text-active: var(--white-500) !important; - --button-outline-danger-text-hover: var(--white-500) !important; - --button-outline-positive-background: hsl(var(--white-500-hsl)/0) !important; - --button-outline-positive-text: var(--white-500) !important; - --button-outline-positive-text-active: var(--white-500) !important; - --button-outline-positive-text-hover: var(--white-500) !important; - + --bg-mod-faint: hsl(var(--black-hsl)) !important; + --bg-surface-overlay: var(--primary-830) !important; + --bg-surface-raised: var(--primary-700) !important; --button-outline-primary-background: var(--primary-700) !important; --button-outline-primary-background-active: var(--primary-600) !important; --button-outline-primary-background-hover: var(--primary-630) !important; --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-500) !important; - --button-outline-primary-text-active: var(--white-500) !important; - --button-outline-primary-text-hover: var(--white-500) !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; @@ -127,59 +100,42 @@ html.theme-dark .theme-light .root_f9a4c9, --channel-text-area-placeholder: var(--primary-400) !important; --channels-default: var(--primary-360) !important; --channeltextarea-background: var(--primary-830) !important; - --chat-background: var(--black-500) !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-500-hsl)/0.3) !important; - --deprecated-store-bg: var(--black-500) !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-500-hsl)/0.3) !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; - --display-banner-overflow-background: hsl(var(--primary-700-hsl)/0.5) !important; - --forum-post-extra-media-count-container-background: hsl(var(--primary-660-hsl)/0.8) !important; - --forum-post-tag-background: hsl(var(--primary-660-hsl)/0.9) !important; --header-primary: var(--primary-130) !important; --header-secondary: var(--primary-345) !important; - --home-background: var(--black-500) !important; + --home-background: var(--black) !important; --home-card-resting-border: hsl(var(--transparent-hsl)/0) !important; - --info-danger-text: var(--white-500) !important; - --info-help-text: var(--white-500) !important; - --info-positive-text: var(--white-500) !important; - --info-warning-text: var(--white-500) !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; - --live-stage-tile-border: hsl(var(--primary-500-hsl)/0.6) !important; - --logo-primary: var(--white-500) !important; - --mention-background: hsl(var(--brand-500-hsl)/0.3) !important; --modal-background: var(--primary-860) !important; --modal-footer-background: var(--primary-900) !important; - --profile-gradient-message-input-border: hsl(var(--primary-500-hsl)/0.48) !important; - --profile-gradient-note-background: hsl(var(--black-500-hsl)/0.3) !important; - --profile-gradient-overlay: hsl(var(--black-500-hsl)/0.6) !important; - --profile-gradient-overlay-synced-with-user-theme: hsl(var(--black-500-hsl)/0.8) !important; - --profile-gradient-profile-body-background-hover: hsl(var(--white-500-hsl)/0.16) !important; - --profile-gradient-role-pill-background: hsl(var(--primary-660-hsl)/0.5) !important; - --profile-gradient-role-pill-border: hsl(var(--white-500-hsl)/0.2) !important; - --profile-gradient-section-box: hsl(var(--black-500-hsl)/0.45) !important; - + --scrollbar-auto-scrollbar-color-track: var(--primary-860) !important; + --scrollbar-auto-scrollbar-color-thumb: var(--primary-800) !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; - --status-danger-text: var(--white-500) !important; - --status-positive-text: var(--white-500) !important; - --status-warning-text: var(--black-500) !important; --text-muted: var(--primary-345) !important; --text-normal: var(--primary-300) !important; --textbox-markdown-syntax: var(--primary-360) !important; - --user-profile-header-overflow-background: hsl(var(--primary-700-hsl)/0.5) !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; @@ -208,4 +164,239 @@ html.theme-dark .theme-light .root_f9a4c9, --profile-note-background-color: var(--background-tertiary) !important; --profile-role-pill-background-color: var(--background-floating) !important; --profile-role-pill-border-color: var(--interactive-normal) !important; +} + +@supports (color: color-mix(in lch, red, blue)) and (top: var(--f)) { + .theme-dark { + --activity-card-background: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --autocomplete-bg: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-accent: color-mix( + in oklab, + var(--primary-760) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-floating: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-message-hover: color-mix( + in oklab, + hsl(var(--white-hsl) / 0.015) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.06) var(--theme-base-color-amount, 0%) + ) !important; + --background-mobile-primary: color-mix( + in oklab, + var(--black) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-mobile-secondary: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-modifier-accent: 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%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.48) var(--theme-base-color-amount, 0%) + ) !important; + --background-modifier-hover: color-mix( + in oklab, + hsl(var(--primary-760-hsl) / 0.4) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.4) var(--theme-base-color-amount, 0%) + ) !important; + --background-modifier-selected: color-mix( + in oklab, + hsl(var(--primary-760-hsl) / 0.6) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.6) var(--theme-base-color-amount, 0%) + ) !important; + --background-nested-floating: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-primary: color-mix( + in oklab, + var(--black) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-secondary: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-secondary-alt: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --background-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, + hsl(var(--black-hsl)) 100%, + hsl(var(--theme-base-color-hsl, 0 0% 0%) / 0.08) var(--theme-base-color-amount, 0%) + ) !important; + --bg-surface-overlay: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --bg-surface-raised: color-mix( + in oklab, + var(--primary-700) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --channeltextarea-background: color-mix( + in oklab, + var(--primary-830) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --chat-background: color-mix( + in oklab, + var(--black) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --chat-border: color-mix( + in oklab, + var(--primary-700) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --chat-input-container-background: color-mix( + in oklab, + var(--primary-600) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --deprecated-card-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%) + ) !important; + --deprecated-quickswitcher-input-background: color-mix( + in oklab, + var(--primary-400) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --deprecated-quickswitcher-input-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%) + ) !important; + --deprecated-store-bg: 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( + 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( + 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( + in oklab, + var(--primary-900) 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%) + ) !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; + --modal-background: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --modal-footer-background: color-mix( + in oklab, + var(--primary-900) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-auto-scrollbar-color-thumb: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-auto-scrollbar-color-track: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-auto-thumb: color-mix( + in oklab, + var(--primary-800) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-auto-track: color-mix( + in oklab, + var(--primary-860) 100%, + var(--theme-base-color, black) var(--theme-base-color-amount, 0%) + ) !important; + --scrollbar-thin-thumb: color-mix( + in oklab, + var(--primary-800) 100%, + 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%) + ) !important; + --spoiler-hidden-background: 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%) + ) !important; + } } \ No newline at end of file diff --git a/src/theme/_index.scss b/src/theme/_index.scss index e3f0ce2..1c6ad8d 100644 --- a/src/theme/_index.scss +++ b/src/theme/_index.scss @@ -1,7 +1,7 @@ @forward 'app'; @forward 'chat'; -@forward 'inputs'; @forward 'guilds'; +@forward 'inputs'; @forward 'members'; @forward 'modals'; @forward 'overlay'; diff --git a/src/theme/app/_index.scss b/src/theme/app/_index.scss index db853d9..80600a4 100644 --- a/src/theme/app/_index.scss +++ b/src/theme/app/_index.scss @@ -1,5 +1,4 @@ @forward 'loading'; // @forward 'notice'; // @forward 'scrollerbar'; -@forward 'sliders'; @forward 'toolbar'; \ No newline at end of file diff --git a/src/theme/chat/_forums.scss b/src/theme/chat/_forums.scss index ee8e20d..f665913 100644 --- a/src/theme/chat/_forums.scss +++ b/src/theme/chat/_forums.scss @@ -2,6 +2,9 @@ .mainCard_a6d69a, .container_a03b48, .container_ddbb27, .container_a039eb { background-color: var(--background-tertiary); } + .matchingPostsRow_a6d69a { + background-color: var(--background-secondary); + } .loadingCard_a6d69a { background-color: var(--background-tertiary); } diff --git a/src/theme/chat/_messages.scss b/src/theme/chat/_messages.scss index 756e7fd..9358f91 100644 --- a/src/theme/chat/_messages.scss +++ b/src/theme/chat/_messages.scss @@ -1,11 +1,10 @@ :is(.theme-dark, .theme-midnight) #app-mount { - // Message Items - .messageListItem_d5deea:hover { - background-color: rgba(255, 255, 255, 0.015); - } // Gifts .tile_ab47a1 { background-color: var(--background-secondary); + &:hover { + background-color: var(--background-modifier-hover); + } .invalidPoop_ff31dd { background-color: var(--background-secondary-alt); } @@ -23,10 +22,6 @@ outline-color: var(--background-secondary-alt); } - .answerInner_cf2c85 { - background-color: var(--background-primary); - } - .normalStylesDefault_b5cb3c .votePercentageBar_cf2c85 { background-color: var(--background-secondary-alt); } diff --git a/src/theme/chat/_onboarding.scss b/src/theme/chat/_onboarding.scss index ac547c5..1e3a4bb 100644 --- a/src/theme/chat/_onboarding.scss +++ b/src/theme/chat/_onboarding.scss @@ -1,12 +1,5 @@ :is(.theme-dark, .theme-midnight) #app-mount .chat_a7d72e { // Roles - .container_f1fd9c, - .container_c2efea, - .header_f1fd9c, - .scrollerContainer_c6b11b, - .emptyPage_c6b11b { - background-color: transparent; - } .prompt_c6b11b { background-color: var(--background-tertiary); .selected_bd5e1f { diff --git a/src/theme/inputs/_index.scss b/src/theme/inputs/_index.scss index ca2f24a..d2a1b2a 100644 --- a/src/theme/inputs/_index.scss +++ b/src/theme/inputs/_index.scss @@ -1,2 +1,3 @@ @forward 'buttons'; @forward 'keybinds'; +@forward 'sliders'; diff --git a/src/theme/inputs/_keybinds.scss b/src/theme/inputs/_keybinds.scss index 96ee941..11e2c66 100644 --- a/src/theme/inputs/_keybinds.scss +++ b/src/theme/inputs/_keybinds.scss @@ -1,4 +1,4 @@ -:is(.theme-dark, .theme-midnight) #app-mount .key_c90023 { +:is(.theme-dark, .theme-midnight) #app-mount .key_c90023:not(.keyComboInner_f51af4, .keyComboInner_c11c02) { box-shadow: inset 0 -4px 0 var(--primary-760); background-color: var(--primary-660); } \ No newline at end of file diff --git a/src/theme/app/_sliders.scss b/src/theme/inputs/_sliders.scss similarity index 100% rename from src/theme/app/_sliders.scss rename to src/theme/inputs/_sliders.scss diff --git a/src/theme/modals/_polls.scss b/src/theme/modals/_create-poll.scss similarity index 100% rename from src/theme/modals/_polls.scss rename to src/theme/modals/_create-poll.scss diff --git a/src/theme/modals/_index.scss b/src/theme/modals/_index.scss index 7bfe74c..640d991 100644 --- a/src/theme/modals/_index.scss +++ b/src/theme/modals/_index.scss @@ -1,5 +1,6 @@ @forward 'accept-invite'; @forward 'account-switcher'; +@forward 'create-poll'; @forward 'delete'; @forward 'generic'; @forward 'invite'; @@ -8,7 +9,7 @@ @forward 'modify-attachment'; @forward 'notification-settings'; @forward 'onboarding'; -@forward 'polls'; +@forward 'poll-votes'; @forward 'server-shop-product'; @forward 'stickers'; @forward 'tab-tips'; \ No newline at end of file diff --git a/src/theme/modals/_poll-votes.scss b/src/theme/modals/_poll-votes.scss new file mode 100644 index 0000000..5f8838e --- /dev/null +++ b/src/theme/modals/_poll-votes.scss @@ -0,0 +1,3 @@ +:is(.theme-dark, .theme-midnight) #app-mount .voters_cbdbf0 { + background-color: var(--modal-background); +} \ No newline at end of file diff --git a/src/theme/popouts/_autocomplete.scss b/src/theme/popouts/_autocomplete.scss deleted file mode 100644 index 14c41a5..0000000 --- a/src/theme/popouts/_autocomplete.scss +++ /dev/null @@ -1,6 +0,0 @@ -:is(.theme-dark, .theme-midnight) #app-mount .autocomplete_f23da8 { - background-color: var(--background-tertiary); - .categoryHeader_fe2299 { - background-color: var(--background-tertiary); - } -} \ No newline at end of file diff --git a/src/theme/popouts/_index.scss b/src/theme/popouts/_index.scss index 55ed406..b165d50 100644 --- a/src/theme/popouts/_index.scss +++ b/src/theme/popouts/_index.scss @@ -1,12 +1,12 @@ @forward 'add-game'; @forward 'add-permissions'; -@forward 'autocomplete'; +@forward 'color-picker'; @forward 'content-warning'; @forward 'country-code'; @forward 'drawer'; @forward 'generic'; -@forward 'color-picker'; @forward 'member-roles'; +@forward 'public-guild-announcement'; @forward 'region-picker'; @forward 'screenshare'; @forward 'search'; diff --git a/src/theme/popouts/_public-guild-announcement.scss b/src/theme/popouts/_public-guild-announcement.scss new file mode 100644 index 0000000..0cfc2d1 --- /dev/null +++ b/src/theme/popouts/_public-guild-announcement.scss @@ -0,0 +1,3 @@ +:is(.theme-dark, .theme-midnight) #app-mount .popout_b705bc { + background-color: var(--background-floating); +} \ No newline at end of file diff --git a/src/theme/sidebar/_index.scss b/src/theme/sidebar/_index.scss index 780f97b..df9916c 100644 --- a/src/theme/sidebar/_index.scss +++ b/src/theme/sidebar/_index.scss @@ -1,4 +1,5 @@ @forward 'container'; @forward 'dm-list'; @forward 'header'; +@forward 'mod-view'; @forward 'user-area'; \ No newline at end of file diff --git a/src/theme/sidebar/_mod-view.scss b/src/theme/sidebar/_mod-view.scss new file mode 100644 index 0000000..58012a3 --- /dev/null +++ b/src/theme/sidebar/_mod-view.scss @@ -0,0 +1,5 @@ +#app-mount .sidebarContianer_d2194f :is(.theme-dark, .theme-midnight) { + .topRow_d936aa, .bottomRowAction_d936aa, .header_f51af4, .container_f51af4 { + background-color: hsl(var(--black-hsl)/.8) !important; + } +} \ No newline at end of file