From d25d2d88204f93c31b355ea4f1eefa5fa0dd9b8a Mon Sep 17 00:00:00 2001 From: Mirco Wittrien Date: Fri, 7 May 2021 12:32:48 +0200 Subject: [PATCH] stuff --- Library/_res/BDFDB.raw.css | 70 ++++++++++------------ Themes/BasicBackground/BasicBackground.css | 38 ++++++------ Themes/BlurpleRecolor/BlurpleRecolor.css | 3 + Themes/DiscordRecolor/DiscordRecolor.css | 21 +++++++ 4 files changed, 75 insertions(+), 57 deletions(-) diff --git a/Library/_res/BDFDB.raw.css b/Library/_res/BDFDB.raw.css index 40e835b44b..dbb2ed7e5e 100644 --- a/Library/_res/BDFDB.raw.css +++ b/Library/_res/BDFDB.raw.css @@ -525,12 +525,12 @@ img:not([src]), img[src=""], img[src="null"] { visibility: hidden; } [REPLACE_CLASS_sliderbubble], -[REPLACE_CLASS_sliderbubble]:before { +[REPLACE_CLASS_sliderbubble]::before { position: absolute; left: 50%; pointer-events: none; } -[REPLACE_CLASS_sliderbubble]:before { +[REPLACE_CLASS_sliderbubble]::before { border: 5px solid transparent; border-top-color: var(--background-floating); content: " "; @@ -775,7 +775,7 @@ img:not([src]), img[src=""], img[src="null"] { [REPLACE_CLASS_settingstablecard] [REPLACE_CLASS_settingstablecardconfigs] { margin: 0; } -[REPLACE_CLASS_settingstablelist] [REPLACE_CLASS_checkboxcontainer]:before { +[REPLACE_CLASS_settingstablelist] [REPLACE_CLASS_checkboxcontainer]::before { display: none; } @@ -1032,23 +1032,23 @@ img:not([src]), img[src=""], img[src="null"] { margin-right: 12px; } -[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popoutright][REPLACE_CLASS_popoutarrowalignmentmiddle]:before { +[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popoutright][REPLACE_CLASS_popoutarrowalignmentmiddle]::before { border-right-color: #2f3136; } -[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popoutleft][REPLACE_CLASS_popoutarrowalignmentmiddle]:before { +[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popoutleft][REPLACE_CLASS_popoutarrowalignmentmiddle]::before { border-left-color: #2f3136; } -[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popoutbottom][REPLACE_CLASS_popoutarrowalignmentmiddle]:before, -[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popoutbottom][REPLACE_CLASS_popoutarrowalignmenttop]:before, -[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popoutbottomleft][REPLACE_CLASS_popoutarrowalignmentmiddle]:before, -[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popoutbottomleft][REPLACE_CLASS_popoutarrowalignmenttop]:before, -[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popoutbottomright][REPLACE_CLASS_popoutarrowalignmentmiddle]:before, -[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popoutbottomright][REPLACE_CLASS_popoutarrowalignmenttop]:before { +[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popoutbottom][REPLACE_CLASS_popoutarrowalignmentmiddle]::before, +[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popoutbottom][REPLACE_CLASS_popoutarrowalignmenttop]::before, +[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popoutbottomleft][REPLACE_CLASS_popoutarrowalignmentmiddle]::before, +[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popoutbottomleft][REPLACE_CLASS_popoutarrowalignmenttop]::before, +[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popoutbottomright][REPLACE_CLASS_popoutarrowalignmentmiddle]::before, +[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popoutbottomright][REPLACE_CLASS_popoutarrowalignmenttop]::before { border-bottom-color: #2f3136; } -[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popouttop]:after, -[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popouttopleft]:after, -[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popouttopright]:after { +[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popouttop]::after, +[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popouttopleft]::after, +[REPLACE_CLASS_themedark] [REPLACE_CLASS_popoutwrapper][REPLACE_CLASS_popouttopright]::after { border-top-color: #2f3136; } [REPLACE_CLASS_popoutthemedpopout] { @@ -1239,13 +1239,13 @@ img:not([src]), img[src=""], img[src="null"] { [REPLACE_CLASS_colorpickerswatch][REPLACE_CLASS_colorpickerswatchcustom][style*="background"] { border: none; } -[REPLACE_CLASS_colorpickerswatch]:not([REPLACE_CLASS_colorpickerswatchdefault]):after { +[REPLACE_CLASS_colorpickerswatch]:not([REPLACE_CLASS_colorpickerswatchdefault])::after { border-radius: 3px; } -[REPLACE_CLASS_colorpickerswatch][REPLACE_CLASS_colorpickerswatchcustom]:not([REPLACE_CLASS_colorpickerswatchdefault]):after { +[REPLACE_CLASS_colorpickerswatch][REPLACE_CLASS_colorpickerswatchcustom]:not([REPLACE_CLASS_colorpickerswatchdefault])::after { border-radius: 5px; } -[REPLACE_CLASS_colorpickerswatch]:not([REPLACE_CLASS_colorpickerswatchnocolor]):not([REPLACE_CLASS_colorpickerswatchdefault]):not([REPLACE_CLASS_colorpickerswatchdisabled]):after { +[REPLACE_CLASS_colorpickerswatch]:not([REPLACE_CLASS_colorpickerswatchnocolor]):not([REPLACE_CLASS_colorpickerswatchdefault]):not([REPLACE_CLASS_colorpickerswatchdisabled])::after { content: ""; background: url('data:image/svg+xml; utf8, ') center repeat; position: absolute; @@ -1272,13 +1272,13 @@ img:not([src]), img[src=""], img[src="null"] { margin-top: -3px !important; border-radius: 3px !important; } -[REPLACE_CLASS_themelight] [REPLACE_CLASS_colorpickersaturation] > div > div > div > div { - box-shadow: rgb(200, 200, 200) 0px 0px 0px 1.5px, rgba(0, 0, 0, 0.6) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.6) 0px 0px 1px 2px !important; +[REPLACE_CLASS_colorpickersaturation] > div > div > div > div { + box-shadow: var(--header-primary) 0px 0px 0px 1.5px, var(--background-floating) 0px 0px 1px 1px inset, var(--background-floating) 0px 0px 1px 2px !important; } -[REPLACE_CLASS_themelight] [REPLACE_CLASS_colorpickerhue] > div > div > div > div, -[REPLACE_CLASS_themelight] [REPLACE_CLASS_colorpickeralpha] > div > div > div > div { - background: rgb(200, 200, 200) !important; - box-shadow: rgba(0, 0, 0, 1) 0px 0px 2px !important; +[REPLACE_CLASS_colorpickerhue] > div > div > div > div, +[REPLACE_CLASS_colorpickeralpha] > div > div > div > div { + background: var(--header-primary) !important; + box-shadow: var(--background-floating) 0px 0px 2px !important; } [REPLACE_CLASS_colorpickeralpha] > div > div, [REPLACE_CLASS_colorpickergradient] > div > div { @@ -1286,7 +1286,7 @@ img:not([src]), img[src=""], img[src="null"] { } [REPLACE_CLASS_colorpickeralpha] [REPLACE_CLASS_colorpickeralphacheckered], [REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcheckered], -[REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor] > div:after { +[REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor] > div::after { background: url('data:image/svg+xml; utf8, ') center repeat; } [REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor] > div { @@ -1298,7 +1298,7 @@ img:not([src]), img[src=""], img[src="null"] { transform: translateX(-5px); transform-style: preserve-3d; } -[REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor] > div:after { +[REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor] > div::after { content: ""; position: absolute; top: 0; @@ -1309,7 +1309,7 @@ img:not([src]), img[src=""], img[src="null"] { border-radius: 3px; transform: translateZ(-1px); } -[REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor] > div:before { +[REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor] > div::before { content: ""; position: absolute; border: 3px solid transparent; @@ -1321,25 +1321,19 @@ img:not([src]), img[src=""], img[src="null"] { left: -50%; transform: translateX(5px); } -[REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor][REPLACE_CLASS_colorpickergradientcursoredge] > div:before { +[REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor][REPLACE_CLASS_colorpickergradientcursoredge] > div::before { border-right-width: 0; border-left-width: 5px; } -[REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor][REPLACE_CLASS_colorpickergradientcursoredge] ~ [REPLACE_CLASS_colorpickergradientcursor][REPLACE_CLASS_colorpickergradientcursoredge] > div:before { +[REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor][REPLACE_CLASS_colorpickergradientcursoredge] ~ [REPLACE_CLASS_colorpickergradientcursor][REPLACE_CLASS_colorpickergradientcursoredge] > div::before { border-right-width: 5px; border-left-width: 0; } -[REPLACE_CLASS_themelight] [REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor][REPLACE_CLASS_colorpickergradientcursorselected] > div { - border-color: rgb(55, 55, 55); +[REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor][REPLACE_CLASS_colorpickergradientcursorselected] > div { + border-color: var(--header-secondary); } -[REPLACE_CLASS_themelight] [REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor][REPLACE_CLASS_colorpickergradientcursorselected] > div:before { - border-top-color: rgb(55, 55, 55); -} -[REPLACE_CLASS_themedark] [REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor][REPLACE_CLASS_colorpickergradientcursorselected] > div { - border-color: rgb(200, 200, 200); -} -[REPLACE_CLASS_themedark] [REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor][REPLACE_CLASS_colorpickergradientcursorselected] > div:before { - border-top-color: rgb(200, 200, 200); +[REPLACE_CLASS_colorpickergradient] [REPLACE_CLASS_colorpickergradientcursor][REPLACE_CLASS_colorpickergradientcursorselected] > div::before { + border-top-color: var(--header-secondary); } [REPLACE_CLASS_colorpickergradientbutton] { color: var(--interactive-normal); diff --git a/Themes/BasicBackground/BasicBackground.css b/Themes/BasicBackground/BasicBackground.css index 5e7561e090..2867d0f2eb 100644 --- a/Themes/BasicBackground/BasicBackground.css +++ b/Themes/BasicBackground/BasicBackground.css @@ -4737,11 +4737,11 @@ img[src="/assets/cef02719c12d8aaf38894c16dca7fbe6.svg"] { /* rolesettings addr z-index: -1; } #app-mount .queryContainer-RKFJW- { - color: rgb(var(--fontwhite3)); border-bottom-color: var(--background-modifier-accent); + color: var(--header-secondary); } #app-mount .queryContainer-RKFJW- strong { - color: rgb(var(--fontwhite1)); + color: var(--header-primary); } #app-mount .focused-2bY0OD { background-color: rgba(var(--transparencycolor), .2); @@ -4753,7 +4753,7 @@ img[src="/assets/cef02719c12d8aaf38894c16dca7fbe6.svg"] { /* rolesettings addr #app-mount .resultsGroup-r_nuzN .plusIcon-v0BTrL, #app-mount .resultsGroup-r_nuzN .searchClearHistory-2cSSMO, #app-mount .resultsGroup-r_nuzN .searchLearnMore-3SQUAj a { - color: rgb(var(--fontwhite2)); + color: var(--text-normal); } #app-mount .option-96V44q::after { display: none; @@ -4769,38 +4769,38 @@ img[src="/assets/cef02719c12d8aaf38894c16dca7fbe6.svg"] { /* rolesettings addr #app-mount .option-96V44q .answer-1n6g43, #app-mount .option-96V44q .nonText-3CRkO0, #app-mount .option-96V44q strong { - color: rgb(var(--fontwhite2)); + color: var(--text-normal); } #app-mount .option-96V44q .filter-3Y_im- { - color: rgb(var(--fontwhite4)); + color: var(--text-muted); } #app-mount .option-96V44q.user-O3Czj0 .displayedNick-3xxvzU { - color: rgb(var(--fontwhite2)); + color: var(--text-normal); } #app-mount .option-96V44q.user-O3Czj0 .displayUsername-Qekxml { - color: rgb(var(--fontwhite3)); + color: var(--interactive-muted); } #app-mount .searchOption-zQ-1l6 .filter-3Y_im- { - color: rgb(var(--fontwhite2)); + color: var(--text-normal); } #app-mount .searchOption-zQ-1l6 .answer-1n6g43 { - color: rgb(var(--fontwhite4)); + color: var(--text-muted); } #app-mount .datePicker--XZbmJ .datePickerHint-3Q1Udw { border-top-color: var(--background-modifier-accent); } #app-mount .datePicker--XZbmJ .datePickerHint-3Q1Udw .hint-165cR4 { - color: rgb(var(--fontwhite2)); + color: var(--text-normal); } #app-mount .datePicker--XZbmJ .datePickerHint-3Q1Udw .hintValue-29ny8Z { - color: rgb(var(--fontwhite1)); + color: var(--header-primary); } #app-mount .datePicker--XZbmJ .datePickerHint-3Q1Udw .hintValue-29ny8Z:hover { - background-color: #677bc4; + text-shadow: 1px 1px var(--textshadow); } #app-mount .searchResultChannelCategory-1l0lSn, #app-mount .searchResultChannelIcon-1DnTme { - color: rgb(var(--fontwhite4)); + color: var(--text-muted); } #app-mount .calendarPicker-2yf6Ci .react-datepicker { @@ -4810,8 +4810,8 @@ img[src="/assets/cef02719c12d8aaf38894c16dca7fbe6.svg"] { /* rolesettings addr border-color: rgba(var(--transparencycolor), .5); } #app-mount .datePicker--XZbmJ .react-datepicker__day--outside-month { - border-color: transparent; background: rgba(var(--transparencycolor), .5); + border-color: transparent; } #app-mount .datePicker--XZbmJ .react-datepicker__header, #app-mount .datePicker--XZbmJ .react-datepicker__month-container, @@ -4823,7 +4823,7 @@ img[src="/assets/cef02719c12d8aaf38894c16dca7fbe6.svg"] { /* rolesettings addr } #app-mount .datePicker--XZbmJ .react-datepicker__navigation { background: transparent; - border-color: rgba(var(--fontwhite1), .5); + border-color: rgba(var(--textbrightest), .5); top: 30px; } #app-mount .datePicker--XZbmJ .react-datepicker__navigation::before { @@ -4834,7 +4834,7 @@ img[src="/assets/cef02719c12d8aaf38894c16dca7fbe6.svg"] { /* rolesettings addr bottom: 0; left: 0; -webkit-mask: url(https://discord.com/assets/7619529e87dad31fd2ae83d9b9583e49.svg) center/6px 12px no-repeat; - background-color: rgb(var(--fontwhite1)); + background-color: rgb(var(--textbrightest)); } #app-mount .datePicker--XZbmJ .react-datepicker__navigation--previous { left: 30px; @@ -4852,13 +4852,13 @@ img[src="/assets/cef02719c12d8aaf38894c16dca7fbe6.svg"] { /* rolesettings addr #app-mount .datePicker--XZbmJ .react-datepicker__day:not(.react-datepicker__day--disabled):not(.react-datepicker__day--outside-month), #app-mount .datePicker--XZbmJ .datePickerHint-3Q1Udw .hint-165cR4, #app-mount .datePicker--XZbmJ .datePickerHint-3Q1Udw .hintValue-29ny8Z { - color: rgb(var(--fontwhite1)); + color: var(--header-primary); } #app-mount .datePicker--XZbmJ .react-datepicker__day--disabled:not(.react-datepicker__day--outside-month) { - color: rgb(var(--fontwhite3)); + color: var(--header-secondary); } #app-mount .datePicker--XZbmJ .react-datepicker__day--outside-month { - color: rgb(var(--fontwhite4)); + color: var(--text-muted); } #app-mount .datePicker--XZbmJ .datePickerHint-3Q1Udw { margin: 0; diff --git a/Themes/BlurpleRecolor/BlurpleRecolor.css b/Themes/BlurpleRecolor/BlurpleRecolor.css index c548e7102e..acdb7a5081 100644 --- a/Themes/BlurpleRecolor/BlurpleRecolor.css +++ b/Themes/BlurpleRecolor/BlurpleRecolor.css @@ -1737,6 +1737,9 @@ #app-mount .datePicker--XZbmJ .datePickerHint-3Q1Udw .hintValue-29ny8Z { background-color: rgb(var(--accentcolor)); } +#app-mount .datePicker--XZbmJ .datePickerHint-3Q1Udw .hintValue-29ny8Z:hover { + background: var(--accentcolor-hover); +} /* ~~~~ 12. GENERAL ~~~~ */ diff --git a/Themes/DiscordRecolor/DiscordRecolor.css b/Themes/DiscordRecolor/DiscordRecolor.css index 41486c9761..eeb67a211e 100644 --- a/Themes/DiscordRecolor/DiscordRecolor.css +++ b/Themes/DiscordRecolor/DiscordRecolor.css @@ -3637,6 +3637,27 @@ img[src='/assets/58957d928db6fb9d4658eb882f33d7bc.svg'] { background-color: var(--background-primary); border-color: rgba(var(--backgroundfloating),.2); } +#app-mount .datePicker--XZbmJ .react-datepicker__navigation { + background: transparent; + border-color: rgba(var(--textbrightest), .5); + top: 30px; +} +#app-mount .datePicker--XZbmJ .react-datepicker__navigation::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + -webkit-mask: url(https://discord.com/assets/7619529e87dad31fd2ae83d9b9583e49.svg) center/6px 12px no-repeat; + background-color: rgb(var(--textbrightest)); +} +#app-mount .datePicker--XZbmJ .react-datepicker__navigation--previous { + left: 30px; +} +#app-mount .datePicker--XZbmJ .react-datepicker__navigation--next { + right: 30px; +} #app-mount .calendarPicker-2yf6Ci .react-datepicker__current-month { border-bottom-color: rgba(var(--backgroundfloating),.3); color: var(--header-primary);