BetterDiscordAddons/Themes/FullThemeDark/FullThemeDark.css

382 lines
12 KiB
CSS

@import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/_res/BetterDocsBlock.css);
@import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/_res/ThemeDevBadge.css);
:root {
--daccentcolor: 114,137,218;
--vaccentcolor: var(--accentcolor,var(--daccentcolor));
}
.theme-light {
--header-primary: #fff;
--header-secondary: #b9bbbe;
--text-normal: #dcddde;
--text-muted: #72767d;
--text-link: #00b0f4;
--channels-default: #8e9297;
--interactive-normal: #b9bbbe;
--interactive-hover: #dcddde;
--interactive-active: #fff;
--interactive-muted: #4f545c;
--background-primary: #36393f;
--background-secondary: #2f3136;
--background-secondary-alt: #292b2f;
--background-tertiary: #202225;
--background-accent: #4f545c;
--background-floating: #18191c;
--background-mobile-primary: #36393f;
--background-mobile-secondary: #2f3136;
--background-modifier-hover: rgba(79,84,92,0.16);
--background-modifier-active: rgba(79,84,92,0.24);
--background-modifier-selected: rgba(79,84,92,0.32);
--background-modifier-accent: hsla(0,0%,100%,0.06);
--background-mentioned: rgba(250,166,26,0.05);
--background-mentioned-hover: rgba(250,166,26,0.08);
--background-message-hover: rgba(4,4,5,0.07);
--background-help-warning: rgba(250,166,26,0.1);
--background-help-info: rgba(0,176,244,0.1);
--scrollbar-thin-thumb: #202225;
--scrollbar-thin-track: transparent;
--scrollbar-auto-thumb: #202225;
--scrollbar-auto-track: #2e3338;
--scrollbar-auto-scrollbar-color-thumb: #202225;
--scrollbar-auto-scrollbar-color-track: #2f3136;
--elevation-stroke: 0 0 0 1px rgba(4,4,5,0.15);
--elevation-low: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
--elevation-medium: 0 4px 4px rgba(0,0,0,0.16);
--elevation-high: 0 8px 16px rgba(0,0,0,0.24);
--logo-primary: #fff;
--focus-primary: #00b0f4;
--guild-header-text-shadow: 0 1px 1px rgba(0,0,0,0.4);
--channeltextarea-background: #40444b;
--activity-card-background: #202225;
--textbox-markdown-syntax: #8e9297;
--deprecated-card-bg: rgba(32,34,37,0.6);
--deprecated-card-editable-bg: rgba(32,34,37,0.3);
--deprecated-store-bg: #36393f;
--deprecated-quickswitcher-input-background: #72767d;
--deprecated-quickswitcher-input-placeholder: hsla(0,0%,100%,0.3);
--deprecated-text-input-bg: rgba(0,0,0,0.1);
--deprecated-text-input-border: rgba(0,0,0,0.3);
--deprecated-text-input-border-hover: #040405;
--deprecated-text-input-border-disabled: #202225;
--deprecated-text-input-prefix: #dcddde;
}
html {
color: #fff;
}
#app-mount .root-1gCeng { /* modal container */
background-color: var(--background-primary);
-webkit-box-shadow: 0 0 0 1px rgba(32,34,37,.6), 0 2px 10px 0 rgba(0,0,0,.2);
box-shadow: 0 0 0 1px rgba(32,34,37,.6), 0 2px 10px 0 rgba(0,0,0,.2);
}
#app-mount .footer-2gL1pp { /* modal footer */
background-color: var(--background-primary);
-webkit-box-shadow: inset 0 1px 0 rgba(47,49,54,.6);
box-shadow: inset 0 1px 0 rgba(47,49,54,.6);
}
#app-mount .regionSelectModal-12e-57 { /* region modal container */
background-color: var(--background-primary) !important;
}
#app-mount .regionSelectModal-12e-57 .regionSelectModalOption-2DSIZ3 { /* region modal option */
background-color: var(--background-primary);
border-color: var(--background-modifier-accent);
}
#app-mount .regionSelectModal-12e-57 .regionSelectModalOption-2DSIZ3:hover {
background-color: var(--background-modifier-hover);
}
#app-mount .regionSelectName-2-2FWh { /* region modal name */
color: var(--text-normal);
}
#app-mount .regionSelectModal-12e-57 .regionSelectModalFooter-20C5iA { /* region modal footer */
color: var(--text-muted);
}
.arrow-hynWUl { /* create modal arrow */
object-position: -9999999px -9999999px;
-webkit-mask: url(https://discordapp.com/assets/69a0ea5dbf79a129c81a0cb171b60b7a.svg) center/cover no-repeat;
background: var(--text-normal);
}
#app-mount .backdrop-1wrmKB[style*="background-color: rgb(255,255,255)"] { /* download modal backdrop */
background-color: rgb(0,0,0) !important;
opacity: 0.85 !important;
}
#app-mount .downloadApps-wbBFdZ { /* download modal container */
background-color: var(--background-primary);
border-radius: 5px;
}
#app-mount .downloadApps-wbBFdZ .inner-2LETmR {
overflow-y: scroll;
}
#app-mount .downloadApps-wbBFdZ .inner-2LETmR:-webkit-scrollbar {
height: 16px;
width: 16px;
}
#app-mount .downloadApps-wbBFdZ .inner-2LETmR:-webkit-scrollbar-corner {
background-color: transparent;
}
#app-mount .downloadApps-wbBFdZ .inner-2LETmR:-webkit-scrollbar-thumb {
background-color: var(--scrollbar-auto-thumb);
min-height: 40px;
}
#app-mount .downloadApps-wbBFdZ .inner-2LETmR:-webkit-scrollbar-thumb,
#app-mount .downloadApps-wbBFdZ .inner-2LETmR:-webkit-scrollbar-track {
border: 4px solid transparent;
background-clip: padding-box;
border-radius: 8px;
}
#app-mount .downloadApps-wbBFdZ .inner-2LETmR:-webkit-scrollbar-track {
background-color: var(--scrollbar-auto-track);
}
#app-mount .uploadModalIn-1z07Bv .uploadDropModal-2kTwbc { /* uploadmodal container */
width: unset;
}
#app-mount .uploadDropModal-2kTwbc .bgScale-1otPtc {
background-color: var(--background-primary);
}
#app-mount .uploadDropModal-2kTwbc .inner-3nWsbo {
border-color: var(--text-normal);
}
#app-mount .uploadDropModal-2kTwbc .inner-3nWsbo .instructions-2Du9gG {
padding: 0 5px;
}
#app-mount .autocomplete-1vrmpx { /* autocomplete container */
background-color: var(--background-secondary);
}
#app-mount .selected-1Tbx07 { /* autocomplete row selected */
background-color: var(--background-primary);
}
#app-mount .divider-23swzi { /* autocomplete divider */
background-color: var(--background-modifier-accent);
}
#app-mount .contentTitle-2tG_sM { /* autocomplete contenttitle */
color: var(--text-muted);
}
#app-mount .contentTitle-2tG_sM strong {
color: var(--header-primary);
}
#app-mount .content-Qb0rXO { /* autocomplete content */
color: var(--header-primary);
}
#app-mount .iconForeground-1w5n7R{ /* autocomplete icon */
fill: var(--text-muted);
}
#app-mount .description-11DmNu,
#app-mount .descriptionUsername-J_75O8 {
color: var(--text-muted);
}
#app-mount .descriptionDiscriminator-3vUOCc {
color: var(--interactive-muted);
}
#app-mount .avatarStatus-3jMZl_ {
border-color: var(--background-secondary);
}
#app-mount .bd-addon-list .bd-addon-card.settings-open::-webkit-scrollbar,
#app-mount .bda-description.scroller::-webkit-scrollbar {
height: 8px;
width: 8px;
}
#app-mount .bd-addon-list .bd-addon-card.settings-open::-webkit-scrollbar-corner,
#app-mount .bda-description.scroller::-webkit-scrollbar-corner {
background-color: transparent;
}
#app-mount .bd-addon-list .bd-addon-card.settings-open::-webkit-scrollbar-thumb,
#app-mount .bda-description.scroller::-webkit-scrollbar-thumb {
background-clip: padding-box;
background-color: var(--scrollbar-thin-thumb);
border: 2px solid transparent;
border-radius: 4px;
min-height: 40px;
}
#app-mount .bd-addon-list .bd-addon-card.settings-open::-webkit-scrollbar-track,
#app-mount .bda-description.scroller::-webkit-scrollbar-track {
background-color: var(--scrollbar-thin-track);
border: 2px solid var(--scrollbar-thin-track);
}
body .ace_editor {
background: var(--background-secondary);
}
body .contentRegion-3nDuYy #bd-customcss-attach-controls,
body #bd-customcss-detach-container #bd-customcss-attach-controls {
background: var(--background-secondary);
box-shadow: 0 1px 0 0 var(--background-secondary) inset;
}
body .standardSidebarView-3F1I7i #bd-customcss-attach-controls button,
body .bd-detached-css-editor #bd-customcss-attach-controls button {
background: var(--background-primary);
}
body .standardSidebarView-3F1I7i #bd-customcss-attach-controls button[style*="border-left"],
body .bd-detached-css-editor #bd-customcss-attach-controls button[style*="border-left"] {
border-left-color: var(--background-secondary) !important;
}
body .standardSidebarView-3F1I7i #bd-customcss-attach-controls button[style*="border-right"],
body .bd-detached-css-editor #bd-customcss-attach-controls button[style*="border-right"] {
border-right-color: var(--background-secondary) !important;
}
#bd-customcss-attach-controls .help-text .inline {
background: var(--background-primary);
}
body #ace_settingsmenu {
position: absolute;
top: 10vh;
right: calc(50vw - 300px);
bottom: 10vh;
left: calc(50vw - 300px);
background-color: var(--background-primary);
border-radius: 5px;
box-shadow: 0 0 0 1px rgba(32,34,37,.6), 0 2px 10px 0 rgba(0,0,0,.2);
padding-right: 20px;
}
body #ace_settingsmenu table,
body #ace_settingsmenu tr,
body #ace_settingsmenu td {
display: block;
}
body #ace_settingsmenu > table > tr:last-child {
color: var(--text-muted);
float: right;
}
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: none;
}
body #ace_settingsmenu .ace_optionsMenuEntry > td:first-child {
flex: 1 0 auto;
margin-right: 10px;
}
body #ace_settingsmenu .ace_optionsMenuEntry label {
color: var(--header-primary);
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: var(--background-modifier-hover);
box-shadow: none;
border: none;
color: var(--interactive-hover);
}
body #ace_settingsmenu .ace_optionsMenuEntry button[ace_selected_button=true] {
background-color: var(--background-modifier-selected);
box-shadow: none;
border: none;
color: var(--interactive-active);
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;
box-sizing: border-box;
float: unset !important;
background-color: rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.3);
border-radius: 3px;
color: var(--header-primary);
width: 200px;
height: 40px;
padding: 10px;
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: #040405;
}
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: #303339;
color: var(--header-primary);
}
body #ace_settingsmenu input[type="checkbox"] {
position: relative;
float: unset !important;
width: 44px;
height: 24px;
}
body #ace_settingsmenu input[type="checkbox"]:before {
content: "";
display: block;
position: relative;
background: var(--text-muted);
border-radius: 14px;
width: 44px;
height: 24px;
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;
width: 18px;
height: 18px;
position: absolute;
top: 3px;
left: 3px;
bottom: 3px;
background: var(--header-primary);
border-radius: 10px;
transition: all .15s ease;
box-shadow: 0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);
}
body #ace_settingsmenu input[type="checkbox"]:checked:after {
transform: translateX(20px);
}
body #ace_settingsmenu::-webkit-scrollbar {
height: 16px;
width: 16px;
}
body #ace_settingsmenu::-webkit-scrollbar-corner {
background-color: transparent;
}
body #ace_settingsmenu::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-auto-thumb);
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(--scrollbar-auto-track);
}