diff --git a/Themes/DiscordRecolor/DiscordRecolor.css b/Themes/DiscordRecolor/DiscordRecolor.css index 5c4f600def..d5914b1873 100644 --- a/Themes/DiscordRecolor/DiscordRecolor.css +++ b/Themes/DiscordRecolor/DiscordRecolor.css @@ -4132,6 +4132,155 @@ html .ace_scrollbar.ace_scrollbar-h::-webkit-scrollbar-track { background-color: var(--background-secondary-alt); } +body .ace_closeButton { + display: none; +} +body #ace_settingsmenu { + background: var(--background-primary); + box-shadow: -5px 4px 5px rgba(var(--backgroundtertiary), 0.55); + color: var(--header-primary); + padding-top: 10px; + padding-bottom: 10px; +} +body #ace_settingsmenu::-webkit-scrollbar { + width: 16px; +} +body #ace_settingsmenu::-webkit-scrollbar-thumb { + background-color: var(--background-secondary-alt); + min-height: 40px; +} +body #ace_settingsmenu::-webkit-scrollbar-thumb, +body #ace_settingsmenu::-webkit-scrollbar-track { + border: 4px solid transparent; + background-clip: padding-box; + border-radius: 8px; +} +body #ace_settingsmenu::-webkit-scrollbar-track { + background-color: var(--background-secondary); +} +body #ace_settingsmenu .ace_optionsMenuEntry { + height: 40px; + display: flex; + align-items: center; + justify-content: flex-start; + margin-bottom: 10px; +} +body #ace_settingsmenu .ace_optionsMenuEntry:hover { + background: transparent; +} +body #ace_settingsmenu .ace_optionsMenuEntry + div:not([class]) { + float: right; + color: var(--text-muted); + padding-right: 0 !important; + padding-bottom: 0 !important; +} +body #ace_settingsmenu .ace_optionsMenuEntry label { + flex: 1 0 auto; + color: var(--header-primary); + margin-right: 16px; + font-size: 16px; + font-weight: 500; + line-height: 24px; + cursor: pointer; +} +body #ace_settingsmenu .ace_optionsMenuEntry button { + justify-content: center; + align-items: center; + text-align: center; + background: transparent; + box-shadow: none; + border: none; + border-radius: 4px; + color: var(--interactive-normal); + min-width: 40px; + margin: 0 8px; + padding: 2px 8px; +} +body #ace_settingsmenu .ace_optionsMenuEntry button:hover { + background-color: rgba(0, 0, 0, 0.2); + box-shadow: none; + border: none; + color: var(--interactive-hover); +} +body #ace_settingsmenu .ace_optionsMenuEntry button[ace_selected_button=true] { + background-color: rgb(var(--vaccentcolor)); + box-shadow: none; + border: none; + color: var(--header-primary); + cursor: default; +} +body #ace_settingsmenu .ace_optionsMenuEntry input[type="text"], +body #ace_settingsmenu .ace_optionsMenuEntry input[type="number"], +body #ace_settingsmenu .ace_optionsMenuEntry select { + flex: 0 1 auto; + float: unset; + width: 200px; + height: 40px; + padding: 10px; + background-color: var(--deprecated-text-input-bg); + border: 1px solid var(--deprecated-text-input-border); + border-radius: 3px; + box-sizing: border-box; + color: var(--header-primary); + font-size: 16px; + transition: background-color .15s ease,border .15s ease; +} +body #ace_settingsmenu .ace_optionsMenuEntry input[type="number"] { + padding-right: 2px; +} +body #ace_settingsmenu .ace_optionsMenuEntry input[type="text"]:hover, +body #ace_settingsmenu .ace_optionsMenuEntry input[type="number"]:hover, +body #ace_settingsmenu .ace_optionsMenuEntry select:hover { + border-color: var(--deprecated-text-input-border-hover); +} +body #ace_settingsmenu .ace_optionsMenuEntry input[type="text"]:focus, +body #ace_settingsmenu .ace_optionsMenuEntry input[type="number"]:focus, +body #ace_settingsmenu .ace_optionsMenuEntry select:focus { + border-color: rgb(var(--vaccentcolor)); +} +body #ace_settingsmenu .ace_optionsMenuEntry select option { + background-color: var(--background-primary); + color: var(--header-primary); +} +body #ace_settingsmenu input[type="checkbox"] { + position: relative; + flex: 0 0 auto; + width: 42px; + height: 24px; + -webkit-appearance: none; +} +body #ace_settingsmenu input[type="checkbox"]::before { + content: ""; + display: block; + position: relative; + width: 42px; + height: 24px; + background: #72767d; + border-radius: 14px; + transition: background .15s ease-in-out,box-shadow .15s ease-in-out,border .15s ease-in-out; +} +body #ace_settingsmenu input[type="checkbox"]:checked::before { + background: rgb(var(--vaccentcolor)); +} +body #ace_settingsmenu input[type="checkbox"]::after { + content: ""; + display: block; + position: absolute; + top: 3px; + left: 3px; + bottom: 3px; + width: 18px; + height: 18px; + background-color: #fff; + box-shadow: 0 2px 4px rgba(0,0,0,.3); + border-radius: 10px; + transition: all .15s ease; +} +body #ace_settingsmenu input[type="checkbox"]:checked::after { + transform: translateX(20px); +} + + /* ~~~~ 13. POWERCORDSUPPORT ~~~~ */ .powercord-toast .header {