Add base.css

This commit is contained in:
Lee 2023-08-21 00:28:00 +00:00
commit 30fdfe2132

764
base.css Normal file

@ -0,0 +1,764 @@
/*
* Yes, this codebase is near unreadable. Why?
* I designed this mainly as a test to see how viable avoidance of straight out class selectors would be.
* The codebase was never designed to be pretty, it was designed to require as little maintenance as possible.
*/
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&display=swap');
@import url('https://mwittrien.github.io/BetterDiscordAddons/Themes/BlurpleRecolor/BlurpleRecolor.css');
@import url('https://discord-custom-covers.github.io/usrbg/dist/usrbg.css');
button {
--accentcolor: var(--accent-alt);
}
/* Root Variables */
:root {
--font-primary: 'Karla', sans-serif;
--font-display: var(--font-primary) !important;
/* Dark Matter Variables */
--avatar-size: 32px;
--background-image: url('https://i.imgur.com/7SbtKvw.png');
--home-image: url('https://i.imgur.com/233d55Y.gif');
--background-solid: #161921;
--background-solid-dark: #101218;
--background-solid-darker: #0c0e12;
--accent: 37, 172, 232;
--accent-alt: 29, 101, 134;
--md-black: 0, 0, 0;
--dm-white: 255, 255, 255;
/* BlurpleRecolor */
--accentcolor: var(--accent);
--vaccentcolor-hover: rgb(var(--accent));
--vaccentcolor-active: rgb(var(--accent));
}
:not(div[class*="userProfile"][class*="unThemed"]).theme-dark,
:not(div[class*="userProfile"]).theme-light,
div[class*="userProfile"][class*="unThemed"].theme-light {
/* Discord vars */
--background-primary: var(--background-solid);
--background-mobile-primary: var(--background-primary);
--background-secondary: var(--background-solid);
--background-mobile-secondary: var(--background-secondary);
--background-secondary-alt: var(--background-solid);
--background-tertiary: var(--background-solid);
--background-floating: var(--background-solid);
--background-secondary: var(--background-solid);
--background-accent: var(--background-solid);
--background-message-hover: rgba(var(--md-black), 0.4);
--channeltextarea-background: transparent;
--activity-card-background: rgba(var(--dm-white), 0.05);
--deprecated-store-bg: transparent;
--background-modifier-hover: rgba(var(--md-black), 0.3);
--background-modifier-active: rgba(var(--md-black), 0.3);
--background-modifier-selected: rgba(var(--md-black), 0.6);
--elevation-low: inset 0 -1px 0 0 rgba(var(--md-black), 0.3);
--channels-default: rgba(var(--dm-white), 0.3);
--deprecated-quickswitcher-input-background: var(--background-solid);
--header-primary: rgba(var(--dm-white), 1);
--header-secondary: rgba(var(--dm-white), 0.6);
--text-normal: rgba(var(--dm-white), 0.6);
--text-muted: #8a8e94;
--interactive-muted: rgba(var(--dm-white), 0.15);
--interactive-normal: rgba(var(--dm-white), 0.5);
--interactive-hover: rgba(var(--dm-white), 0.75);
--interactive-active: rgba(var(--dm-white), 1);
--deprecated-card-bg: rgba(var(--dm-white), 0.05);
--text-link: rgba(var(--accent), 1);
--focus-primary: rgba(var(--accent), 1);
--modal-background: var(--background-solid);
--modal-footer-background: var(--background-solid-darker);
}
::selection {
background-color: rgba(var(--accent-alt), 0.5);
}
/* Scrollbars */
::-webkit-scrollbar {
width: 14px !important;
}
::-webkit-scrollbar-thumb {
border-radius: 8px !important;
border: 3px solid transparent !important;
background-color: rgba(var(--accent-alt), 1) !important;
}
::-webkit-scrollbar-track {
visibility: visible !important;
border-radius: 8px !important;
border: 3px solid transparent !important;
background-color: rgba(0, 0, 0, 0.3) !important;
background-clip: padding-box !important;
}
.none-2Eo-qx::-webkit-scrollbar {
display: none !important;
}
/* Titlebar */
div[class*="typeWindows-"] {
--background-modifier-hover: rgba(var(--dm-white), 0.05);
--background-modifier-active: rgba(var(--dm-white), 0.075);
height: 26px;
}
div[class*="typeWindows-"]>div:first-child {
display: none;
}
div[class*="typeWindows-"]>div[role="button"] {
height: 30px;
width: 36px;
}
div[class*="typeWindows-"]::after {
content: 'Discord';
font-weight: 5000;
line-height: 31px;
color: var(--text-muted);
font-size: 14px;
position: absolute;
padding: 0 12px;
top: 0;
left: 0;
width: 100%;
height: 30px;
background: rgba(var(--md-black), 0.85);
z-index: -1;
}
/* Guilds */
nav[class*="guilds-"] {
background: transparent;
}
ul[data-list-id='guildsnav'] {
--background-secondary: var(--background-solid);
--background-primary: rgba(var(--dm-white), 0.1);
margin-bottom: 70px;
background-color: rgba(var(--md-black), 0.6);
border-right: 1px solid rgba(var(--md-black), 0.2);
box-shadow: inset -10px 0px 20px -10px rgba(var(--md-black), 0.3);
}
ul[data-list-id='guildsnav'] ::-webkit-scrollbar {
display: none;
}
ul[data-list-id='guildsnav']>div[dir] {
padding-top: 18px;
}
ul[data-list-id='guildsnav'] [class^="pill-"],
ul[data-list-id='guildsnav'] [class^="pill-"]>div {
height: 40px !important;
}
ul[data-list-id='guildsnav'] div[style*="height: 56"],
ul[id^="folder-items-"] {
height: auto !important;
}
ul[data-list-id='guildsnav'] [class^="pill-"] span {
width: 10px;
margin-left: -5px;
border-radius: 20px;
}
[data-list-id='guildsnav'] [class^="pill-"] span[style^="opacity: 1; height: 40"] {
--header-primary: rgba(var(--accent), 1);
}
span[class^="expandedFolderBackground-"] {
--background-secondary: rgba(var(--md-black), 0.25);
border-radius: 14px;
width: 40px;
left: 16px;
}
.wrapper-28eC3z,
[data-list-id='guildsnav'] [data-dnd-name] > div,
[data-list-id='guildsnav'] svg[width="48"] {
width: 40px;
height: 40px;
}
div[data-list-item-id="guildsnav___home"] {
background: var(--home-image) top center/110% no-repeat;
}
div[class^="unreadMentionsIndicatorBottom-"] {
bottom: 70px;
}
#app-mount [data-list-item-id="guildsnav___home"]>div {
color: transparent;
background-color: transparent;
}
div[data-list-item-id="guildsnav___create-join-button"],
div[data-list-item-id="guildsnav___guild-discover-button"] {
transition: 150ms ease;
opacity: 0.5;
background-color: var(--background-solid) !important;
color: rgba(var(--dm-white), 0.3) !important;
border: 1px dashed rgba(var(--dm-white), 0.3);
border-radius: 50px;
}
div[data-list-item-id="guildsnav___create-join-button"]:hover,
div[data-list-item-id="guildsnav___guild-discover-button"]:hover {
opacity: 1;
}
/* Sidebar */
.platform-win [class^="sidebar-"] {
border-radius: 0;
background-color: transparent;
}
div[class^="sidebar-"] nav,
#private-channels {
background: var(--background-secondary) !important;
--background-tertiary: rgba(var(--md-black), 0.35);
}
div[class^="sidebar-"]>nav>div[class^="searchBar"] {
height: 54px;
}
/* members wrapper */
.container-2o3qEW {
--background-secondary: rgba(var(--md-black), 0.4);
--background-modifier-hover: rgba(var(--dm-white), 0.07);
--background-modifier-active: var(--background-modifier-hover);
--background-modifier-selected: rgba(var(--dm-white), 0.07);
background: rgb(var(--md-black), 0.9);
}
div[data-list-id^="members-"][class*="scrollerBase-"] {
background: transparent;
}
div[data-list-id^="members-"] [class*="placeholder"] {
--backgorund-primary: var(--text-normal);
}
div[class^='nowPlayingColumn'] {
--background-secondary: transparent;
--background-primary: rgba(var(--md-black), 0.5);
--background-modifier-hover: rgba(var(--dm-white), 0.075);
}
div[class^="members-"] div[class^="member-"] {
background-color: transparent;
}
#channels div[class^="unread-"] {
--interactive-active: rgba(var(--accent), 1);
}
/* Sidebar Header */
nav[aria-label]>div>header {
display: flex;
flex-direction: column;
justify-content: center;
height: 54px;
--background-accent: rgba(var(--accent), 1);
--background-modifier-hover: rgba(var(--md-black), 0.25);
}
/* Outer containers */
body {
background: var(--background-image) center/cover no-repeat;
}
#app-mount {
background-color: transparent;
--background-tertiary: transparent;
--background-secondary: transparent;
}
#app-mount>div[class^="appDevToolsWrapper-"] {
--background-primary: transparent;
--background-tertiary: transparent;
--background-secondary: rgba(var(--md-black), 0.7);
background-color: rgba(var(--md-black), 0.4);
}
div[class^="notAppAsidePanel-"]>div[class^="app-"]>div[class^="app-"],
div[class^="app-"]>div[class^="bg-"] {
background-color: transparent;
}
div[class*="baseLayer-"]>div[class^="container-"] {
background-color: rgb(var(--md-black), 0.4);
}
nav+div [class^='sidebar-'],
nav+div[class^='base-'] {
overflow: visible !important;
position: relative;
max-width: calc(100% - 72px);
}
nav+div[class^='base-'] > div[class^="notice"] {
border-radius: 0;
}
div[class^='base-']>div,
section[class*="themed-"] {
--background-secondary: rgba(var(--md-black), 0.7);
--background-tertiary: rgba(var(--dm-white), 0.05);
--background-primary: rgba(var(--md-black), 0.8);
}
#app-mount>div:not([class^="appDevToolsWrapper-"]),
.autocomplete-1vrmpx {
--background-primary: var(--background-solid);
--background-secondary: var(--background-solid-dark);
--background-secondary-alt: var(--background-solid-darker);
--background-tertiary: var(--background-solid-darker);
}
/* Header */
section[class*="themed-"] {
height: 54px;
box-shadow: var(--elevation-low);
background-color: rgb(var(--md-black), 0.925) !important;
--background-secondary: rgba(var(--dm-white), 0.1);
}
section>div>a[href*="support.discord.com"] {
display: none;
}
section[class*="themed-"]::before,
section[class*="themed-"] ::after {
content: none;
}
section div[class^="toolbar"]>div[role] {
margin: 0 4px;
transition: 150ms ease;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
width: 28px;
height: 28px;
}
section div[class^="toolbar"]>div[role] svg {
width: 22px;
}
section div[class^="toolbar"]>div[role][class*="selected-"] {
background-color: rgba(var(--dm-white), 0.1);
}
/* Panels */
div[class^='sidebar-']>section {
--background-primary: rgba(var(--dm-white), 0.07);
--background-secondary: rgba(var(--dm-white), 0.1);
--background-secondary-alt: rgba(var(--md-black), 0.95);
margin-bottom: 70px;
}
div[class^='sidebar-']>section>div:last-child {
background-color: var(--background-secondary-alt);
box-sizing: border-box;
height: 70px;
padding: 0 18px;
width: calc(100% + 72px);
position: absolute;
left: -72px;
bottom: 0;
}
div[class^="sidebar-"]>section>div:last-child [class^="avatarWrapper-"] {
flex: 1;
}
/* Content */
div[class^='chat'] {
--background-floating: rgba(var(--md-black), 0.5);
background: transparent;
}
div[class^="container-"][id^="chat-messages-"] {
--background-modifier-hover: var(--background-solid-dark);
}
div[class^='chat'] main form {
margin-top: 0;
}
div[class^='chat'] main form::before {
content: none;
}
div[data-list-id="chat-messages"] {
--background-primary: transparent;
--background-secondary: rgba(var(--dm-white), 0.05);
--background-accent: rgba(var(--dm-white), 0.1);
}
div[class^="channelTextArea-"] {
--background-secondary: transparent;
box-shadow: inset 0 0 0 2px rgba(var(--dm-white), 0.1);
transition: 250ms ease;
margin-bottom: 24px;
margin-top: 12px;
border-radius: 5px;
}
div[id^="chat-messages-"]+div:not([id]):last-child {
height: 8px;
}
div[id^="chat-messages-"][class*="cozy-"] {
padding-left: calc(var(--avatar-size) * 2);
}
div[id^="chat-messages-"] {
margin-left: 8px;
margin-right: 8px;
border-radius: 4px;
}
div[id^="chat-messages-"]>div[class^="buttonContainer-"] {
transform: scale(.85);
top: 1px;
}
div[id^="chat-messages-"] {
--background-primary: rgba(var(--md-black), 0.5);
}
div[id^="chat-messages-"]>div>[class^="avatar-"] {
margin-top: 6px;
width: var(--avatar-size);
height: var(--avatar-size);
}
div[id^="chat-messages-"][class*="cozy-"] div::before {
--gutter: 13px;
}
.mention {
transition: 150ms ease;
color: rgba(var(--accent), 1) !important;
background-color: rgba(var(--accent), 0.3);
padding: 3px 5px;
border-radius: 5px;
}
.mention:hover {
background-color: rgba(var(--accent), 0.3) !important;
}
#app-mount .container-2cd8Mz {
background: var(--background-primary);
}
div[class*="barBase-"] {
padding-bottom: 0;
background-color: rgba(var(--accent-alt), 0.9);
}
/* Codeblocks */
html pre {
border-radius: 0;
background: transparent;
border-color: rgba(255, 255, 255, 0.1);
}
pre code.hljs {
border: none;
background-color: rgba(var(--dm-white), 0.1);
color: rgba(var(--dm-white), 0.7);
padding: 1em;
}
html code.inline,
html code.inline {
background: rgba(var(--dm-white), 0.1);
color: rgba(var(--dm-white), 0.7);
padding: 0.3em 0.6em;
border-radius: 3px;
}
/* Settings */
div[aria-label*="_SETTINGS"],
div[aria-label*="_DEBUG"] {
--background-primary: transparent;
--background-secondary: rgba(var(--md-black), 0.7);
}
div[class^="sidebarRegionScroller-"]>nav {
--background-secondary: transparent;
}
div[class^="contentRegion-"] {
--background-primary: rgba(var(--md-black), 0.8);
}
div[class^="contentRegion-"] div[style^="overflow: hidden scroll"] {
background-color: transparent;
--background-primary: rgba(var(--md-black), 0.1);
--background-secondary: rgba(var(--md-black), 0.2);
--background-secondary-alt: rgba(var(--md-black), 0.25);
--background-tertiary: rgba(var(--dm-white), 0.1);
}
div[aria-label*="_SETTINGS"] aside>div {
--background-primary: transparent;
}
div[aria-label*="_SETTINGS"] aside>div::-webkit-scrollbar-track {
visibility: hidden !important;
}
.bd-addon-list {
--background-secondary: var(--background-solid);
--background-secondary-alt: var(--background-solid-dark);
}
/* Tab Bar */
div[class*="topPill"],
nav>div[role="tablist"],
.bd-tab-bar {
--background-accent: rgba(var(--accent));
--background-modifier-hover: rgba(var(--dm-white), 0.05);
--background-modifier-active: rgba(var(--dm-white), 0.075);
--background-modifier-selected: rgba(var(--accent), 0.25);
}
/* Server Discovery */
div[class^="sidebar"]+[class^="pageWrapper"] {
--background-secondary: rgba(var(--md-black), 0.8);
background-color: var(--background-secondary);
}
/* Crash Page */
div[class*="errorPage"] {
--background-secondary: rgba(var(--md-black), 0.7) !important;
}
/* Tooltips */
div[class^="tooltip-"] {
--background-floating: rgba(var(--accent-alt), 1);
--text-normal: #e0e0e0;
}
/* Buttons */
button[class*="button-"][class*="color"],
.bd-button {
--vaccentcolor: var(--accent-alt);
}
.bd-button {
--bd-blue: rgba(var(--accent-alt), 1);
}
/* Context Menu */
div[role="menuitem"] {
--vaccentcolor: var(--accent-alt);
}
div[role="menuitem"]:active {
--vaccentcolor: var(--accent);
}
/* Depreceated Components */
/* These use hardcoded colors, no need to bother with strange selectors */
#app-mount .footer-2gL1pp,
#app-mount .footer-3mqk7D {
background-color: var(--background-secondary);
box-shadow: none;
}
#app-mount .root-1gCeng,
#app-mount .addGamePopout-2RY8Ju,
#app-mount .keyboardShortcutsModal-3piNz7,
#app-mount .emojiAliasInput-1y-NBz .emojiInput-1aLNse,
.perksModal-fSYqOq .perk-2WeBWW,
#app-mount .uploadModal-2ifh8j,
#app-mount .contentWrapper-3WC1ID,
#app-mount .contentWarningPopout-n5JsIs {
background-color: var(--background-primary);
}
#app-mount .codeRedemptionRedirect-1wVR4b,
#app-mount .userSettingsVoice-iwdUCU .previewOverlay-2O7_KC,
#app-mount .inset-3sAvek {
background-color: var(--background-tertiary);
border: none;
}
#app-mount .paymentPane-3bwJ6A,
#app-mount .tierBody-x9kBBp,
#app-mount .tierBody-16Chc9,
#app-mount .barBackground-2EEiLw,
#app-mount .body-3iLsc4,
#app-mount .footer-1fjuF6,
#app-mount .container-3ayLPN,
#app-mount .colorPickerCustom-2CWBn2,
#app-mount .tierMarkerBackground-3q29am,
.css-3vaxre-menu,
.css-dwar6a-menu,
#app-mount .autocomplete-1vrmpx,
.categoryHeader-O1zU94,
#app-mount .popoutList-T9CKZQ,
#app-mount .quickSelectPopout-X1hvgV,
.colorable-1bkp8v.primaryDark-3mSFDl,
.tile-2naSqK,
.videoWrapper-2v09vt,
#app-mount .spoilerText-3p6IlD.hidden-HHr2R9 {
background-color: var(--background-solid);
}
#app-mount .expandedInfo-3kfShd,
#app-mount .tierHeaderLocked-1a2opw,
#app-mount .tierHeaderLocked-1s2JJz,
#app-mount .headerNormal-T_seeN,
#app-mount .focused-2bY0OD,
.colorable-1bkp8v.primaryDark-3mSFDl:hover {
background-color: var(--background-solid-dark);
}
#app-mount .payment-xT17Mq {
background-color: transparent;
border-bottom-color: rgba(var(--dm-white), 0.025);
}
#app-mount .bottomDivider-1K9Gao,
#app-mount .focused-2bY0OD {
border-bottom-color: var(--background-solid-dark);
}
#app-mount div[data-list-id="billing-history"],
#app-mount div[data-list-id^="private-channels-"],
#app-mount .media-engine-video,
.react-datepicker,
.react-datepicker__header,
.react-datepicker__day--outside-month,
.react-datepicker__day--disabled,
div[data-list-id^="members-"],
div[data-list-id^="members-"]>div {
background-color: transparent !important;
}
.react-datepicker__day--disabled {
opacity: .6;
}
#app-mount .react-datepicker__day {
border-top-color: var(--background-secondary);
border-left-color: var(--background-secondary);
}
#app-mount .background-3xPPFc,
#app-mount .tierInProgress-3mBoXq {
color: var(--background-solid);
}
.option-96V44q:after {
content: none;
}
#app-mount .option-96V44q.selected-rZcOL-,
#app-mount .selected-1Tbx07,
#app-mount .quickSelectPopoutOption-opKBx9:hover,
#app-mount .outer-1AjyKL.active-1xchHY,
#app-mount .outer-1AjyKL.interactive-3B9GmY:hover {
background-color: var(--background-modifier-hover);
}
.css-3vaxre-menu,
.tierMarker-5HkGJ_[style] {
border-color: rgba(var(--dm-white), 0.025) !important;
}
#app-mount .searchAnswer-3Dz2-q,
#app-mount .searchFilter-2ESiM3,
#app-mount .option-1B5ZV8,
#app-mount .pill-2pQByF {
background-color: rgba(var(--accent-alt), 1);
color: #fff;
}
#app-mount .keybindShortcut-1BD6Z1 span {
background: var(--background-solid-dark);
box-shadow: inset 0 -4px 0 var(--background-solid-darker);
}
#app-mount .perksModal-fSYqOq {
background: rgba(var(--md-black), 0.7);
}
#app-mount .card-FDVird:before {
background: var(--background-modifier-hover);
border: none;
}
/* Login Page */
div[class^="splashBackground"] canvas,
div[class^="splashBackground"] img {
display: none;
}
/* Modals */
div[class*="footerSeparator"] {
box-shadow: none !important;
}
/* Forums */
.container-3wLKDe {
background: var(--background-primary);
}
li[class^="card-"]>div[class^="container-"] {
background: var(--background-floating)
}