API tools faq
paste
Advertisement
Bennai

Untitled

Bennai
Jun 14th, 2021
1,225
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 18.44 KB | None | 0 0
raw download clone embed print report
  1. /*
  2.  * Yes, this codebase is near unreadable. Why?
  3.  * I designed this mainly as a test to see how viable avoidance of straight out class selectors would be.
  4.  * The codebase was never designed to be pretty, it was designed to require as little maintenance as possible.
  5.  */
  6.  
  7. @import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&display=swap');
  8. @import url('https://mwittrien.github.io/BetterDiscordAddons/Themes/BlurpleRecolor/BlurpleRecolor.css');
  9. @import url('https://discord-custom-covers.github.io/usrbg/dist/usrbg.css');
  10.  
  11. button {
  12.     --accentcolor: var(--accent-alt);
  13. }
  14.  
  15.  
  16. /* Root Variables */
  17.  
  18.  :root {
  19.     --font-primary: 'Karla', sans-serif;
  20.     --font-display: var(--font-primary) !important;
  21.     /* Dark Matter Variables */
  22.     --avatar-size: 32px;
  23.     --background-color:  #101218;
  24.     --home-image: url('https://i.imgur.com/233d55Y.gif');
  25.     --background-solid: #161921;
  26.     --background-solid-dark: #101218;
  27.     --background-solid-darker: #0c0e12;
  28.     --accent: 37, 172, 232;
  29.     --accent-alt: 29, 101, 134;
  30.     --black: 0, 0, 0;
  31.     --white: 255, 255, 255;
  32.     /* BlurpleRecolor */
  33.     --accentcolor: var(--accent);
  34.     --vaccentcolor-hover: rgb(var(--accent));
  35.     --vaccentcolor-active: rgb(var(--accent));
  36. }
  37.  
  38. .theme-dark,
  39. .theme-light {
  40.     /* Discord vars */
  41.     --background-primary: var(--background-solid);
  42.     --background-mobile-primary: var(--background-primary);
  43.     --background-secondary: var(--background-solid);
  44.     --background-mobile-secondary: var(--background-secondary);
  45.     --background-secondary-alt: var(--background-solid);
  46.     --background-tertiary: var(--background-solid);
  47.     --background-floating: var(--background-solid);
  48.     --background-secondary: var(--background-solid);
  49.     --background-accent: var(--background-solid);
  50.     --background-message-hover: rgba(var(--black), 0.4);
  51.     --channeltextarea-background: transparent;
  52.     --activity-card-background: rgba(var(--white), 0.05);
  53.     --deprecated-store-bg: transparent;
  54.     --background-modifier-hover: rgba(var(--black), 0.3);
  55.     --background-modifier-active: rgba(var(--black), 0.3);
  56.     --background-modifier-selected: rgba(var(--black), 0.6);
  57.     --elevation-low: inset 0 -1px 0 0 rgba(var(--black), 0.3);
  58.     --channels-default: rgba(var(--white), 0.3);
  59.     --deprecated-quickswitcher-input-background: var(--background-solid);
  60.     --header-primary: rgba(var(--white), 1);
  61.     --header-secondary: rgba(var(--white), 0.6);
  62.     --text-normal: rgba(var(--white), 0.6);
  63.     --text-muted: #8a8e94;
  64.     --interactive-muted: rgba(var(--white), 0.15);
  65.     --interactive-normal: rgba(var(--white), 0.5);
  66.     --interactive-hover: rgba(var(--white), 0.75);
  67.     --interactive-active: rgba(var(--white), 1);
  68.     --deprecated-card-bg: rgba(var(--white), 0.05);
  69.     --text-link: rgba(var(--accent), 1);
  70.     --focus-primary: rgba(var(--accent), 1);
  71. }
  72.  
  73.  ::selection {
  74.     background-color: rgba(var(--accent-alt), 0.5);
  75. }
  76.  
  77.  
  78. /* Scrollbars */
  79.  
  80.  ::-webkit-scrollbar {
  81.     width: 14px !important;
  82. }
  83.  
  84.  ::-webkit-scrollbar-thumb {
  85.     border-radius: 8px !important;
  86.     border: none !important;
  87.     border: 3px solid transparent !important;
  88.     background-color: rgba(var(--accent-alt), 1) !important;
  89. }
  90.  
  91.  ::-webkit-scrollbar-track {
  92.     visibility: visible !important;
  93.     border-radius: 8px !important;
  94.     border: 3px solid transparent !important;
  95.     background-color: rgba(0, 0, 0, 0.3) !important;
  96.     background-clip: padding-box !important;
  97. }
  98.  
  99. .none-2Eo-qx::-webkit-scrollbar {
  100.     display: none !important;
  101. }
  102.  
  103.  
  104. /* Titlebar */
  105.  
  106. div[class*="typeWindows-"] {
  107.     --background-modifier-hover: rgba(var(--white), 0.05);
  108.     --background-modifier-active: rgba(var(--white), 0.075);
  109.     height: 26px;
  110. }
  111.  
  112. div[class*="typeWindows-"]>div:first-child {
  113.     display: none;
  114. }
  115.  
  116. div[class*="typeWindows-"]>div[role="button"] {
  117.     height: 30px;
  118.     width: 36px;
  119. }
  120.  
  121. div[class*="typeWindows-"]::after {
  122.     content: 'Discord';
  123.     font-weight: 5000;
  124.     line-height: 31px;
  125.     color: var(--text-muted);
  126.     font-size: 14px;
  127.     position: absolute;
  128.     padding: 0 12px;
  129.     top: 0;
  130.     left: 0;
  131.     width: 100%;
  132.     height: 30px;
  133.     background: rgba(var(--black), 0.85);
  134.     z-index: -1;
  135. }
  136.  
  137.  
  138. /* Guilds */
  139.  
  140. ul[data-list-id='guildsnav'] {
  141.     --background-secondary: var(--background-solid);
  142.         --background-primary: rgba(var(--white), 0.1);
  143.     margin-bottom: 70px;
  144.     background-color: rgba(var(--black), 0.6);
  145.     border-right: 1px solid rgba(var(--black), 0.2);
  146.     box-shadow: inset -10px 0px 20px -10px rgba(var(--black), 0.3);
  147. }
  148.  
  149. ul[data-list-id='guildsnav'] ::-webkit-scrollbar {
  150.     display: none;
  151. }
  152.  
  153. ul[data-list-id='guildsnav']>div[dir] {
  154.     padding-top: 18px;
  155. }
  156.  
  157. ul[data-list-id='guildsnav'] [class^="pill-"],
  158. ul[data-list-id='guildsnav'] [class^="pill-"]>div {
  159.     height: 40px !important;
  160. }
  161.  
  162. ul[data-list-id='guildsnav'] div[style*="height: 56"],
  163. ul[id^="folder-items-"] {
  164.     height: auto !important;
  165. }
  166.  
  167. ul[data-list-id='guildsnav'] [class^="pill-"] span {
  168.     width: 10px;
  169.     margin-left: -5px;
  170.     border-radius: 20px;
  171. }
  172.  
  173. [data-list-id='guildsnav'] [class^="pill-"] span[style^="opacity: 1; height: 40"] {
  174.     --header-primary: rgba(var(--accent), 1);
  175. }
  176.  
  177. span[class^="expandedFolderBackground-"] {
  178.     --background-secondary: rgba(var(--black), 0.25);
  179.     border-radius: 14px;
  180.     width: 40px;
  181.     left: 16px;
  182. }
  183.  
  184. .wrapper-25eVIn {
  185.     zoom: .83334;
  186. }
  187.  
  188. svg[class^="placeholderMask-"] {
  189.     width: 40px;
  190.     height: 40px;
  191. }
  192.  
  193. div[data-list-item-id="guildsnav___home"] {
  194.     background: var(--home-image) top center/110% no-repeat;
  195. }
  196.  
  197. div[class^="unreadMentionsIndicatorBottom-"] {
  198.     bottom: 70px;
  199. }
  200.  
  201. #app-mount [data-list-item-id="guildsnav___home"]>div {
  202.     color: transparent;
  203.     background-color: transparent;
  204. }
  205.  
  206. div[data-list-item-id="guildsnav___create-join-button"],
  207. div[data-list-item-id="guildsnav___guild-discover-button"] {
  208.     transition: 150ms ease;
  209.     opacity: 0.5;
  210.     background-color: var(--background-solid) !important;
  211.     color: rgba(var(--white), 0.3) !important;
  212.     border: 1px dashed rgba(var(--white), 0.3);
  213.     border-radius: 50px;
  214. }
  215.  
  216. div[data-list-item-id="guildsnav___create-join-button"]:hover,
  217. div[data-list-item-id="guildsnav___guild-discover-button"]:hover {
  218.     opacity: 1;
  219. }
  220.  
  221.  
  222. /* Sidebar */
  223.  
  224. .platform-win [class^="sidebar-"] {
  225.     border-radius: 0;
  226. }
  227.  
  228. div[class^="sidebar-"] nav,
  229. #private-channels {
  230.     background-color: transparent;
  231.     --background-tertiary: rgba(var(--black), 0.35);
  232. }
  233.  
  234. div[class^="sidebar-"]>nav>div[class^="searchBar"] {
  235.     height: 54px;
  236. }
  237.  
  238. div[id^="members-"] {
  239.     --background-secondary: rgba(var(--black), 0.4);
  240.     --background-modifier-hover: rgba(var(--white), 0.07);
  241.     --background-modifier-active: var(--background-modifier-hover);
  242.     --background-modifier-selected: rgba(var(--white), 0.07);
  243. }
  244.  
  245. div[id^="members-"]>div {
  246.     background-color: transparent;
  247. }
  248.  
  249. div[id^="members-"] [class*="placeholder"] {
  250.     --backgorund-primary: var(--text-normal);
  251. }
  252.  
  253. div[class^='nowPlayingColumn'] {
  254.     --background-secondary: transparent;
  255.     --background-primary: rgba(var(--black), 0.5);
  256.     --background-modifier-hover: rgba(var(--white), 0.075);
  257. }
  258.  
  259. #channels div[class^="unread-"] {
  260.     --interactive-active: rgba(var(--accent), 1);
  261. }
  262.  
  263.  
  264. /* Sidebar Header */
  265.  
  266. div[class*='clickable-'][aria-expanded]>header {
  267.     height: 54px;
  268.     --background-accent: rgba(var(--accent), 1);
  269.     --background-modifier-hover: rgba(var(--black), 0.25);
  270. }
  271.  
  272.  
  273. /* Outer containers */
  274.  
  275. #app-mount {
  276.     --background-tertiary: transparent;
  277.     --background-secondary: transparent;
  278.     background: var(--background-image) center/cover no-repeat;
  279. }
  280.  
  281. #app-mount>div[class^="app-"] {
  282.     --background-tertiary: transparent;
  283.     --background-secondary: rgba(var(--black), 0.7);
  284.     background-color: rgba(var(--black), 0.4);
  285. }
  286.  
  287. nav+div [class^='sidebar-'],
  288. nav+div[class^='base-'] {
  289.     overflow: visible !important;
  290.     position: relative;
  291.     max-width: calc(100% - 72px);
  292. }
  293.  
  294. nav+div[class^='base-'] > div[class^="notice"] {
  295.     border-radius: 0;
  296. }
  297.  
  298. div[class^='base-']>div {
  299.     --background-secondary: rgba(var(--black), 0.7);
  300.     --background-tertiary: rgba(var(--white), 0.05);
  301.     --background-primary: rgba(var(--black), 0.8);
  302. }
  303.  
  304. #app-mount>div:not([class^="app-"]),
  305. .autocomplete-1vrmpx {
  306.     --background-primary: var(--background-solid);
  307.     --background-secondary: var(--background-solid-dark);
  308.     --background-secondary-alt: var(--background-solid-darker);
  309.     --background-tertiary: var(--background-solid-darker);
  310. }
  311.  
  312.  
  313. /* Header */
  314.  
  315. section[class*="themed-"] {
  316.     height: 54px;
  317.     box-shadow: var(--elevation-low);
  318.     --background-secondary: rgba(var(--white), 0.1);
  319. }
  320.  
  321. section>div>a[href="https:https://support.discord.com"] {
  322.     display: none;
  323. }
  324.  
  325. section[class*="themed-"]::before,
  326. section[class*="themed-"] ::after {
  327.     content: none;
  328. }
  329.  
  330. section div[class^="toolbar"]>div[role] {
  331.     margin: 0 4px;
  332.     transition: 150ms ease;
  333.     display: flex;
  334.     align-items: center;
  335.     justify-content: center;
  336.     border-radius: 3px;
  337.     width: 28px;
  338.     height: 28px;
  339. }
  340.  
  341. section div[class^="toolbar"]>div[role] svg {
  342.     width: 22px;
  343. }
  344.  
  345. section div[class^="toolbar"]>div[role][class*="selected-"] {
  346.     background-color: rgba(var(--white), 0.1);
  347. }
  348.  
  349.  
  350. /* Panels */
  351.  
  352. div[class^='sidebar-']>section {
  353.     --background-primary: rgba(var(--white), 0.07);
  354.     --background-secondary: rgba(var(--white), 0.1);
  355.     --background-secondary-alt: rgba(var(--black), 0.95);
  356.     margin-bottom: 70px;
  357. }
  358.  
  359. div[class^='sidebar-']>section>div:last-child {
  360.     background-color: var(--background-secondary-alt);
  361.     box-sizing: border-box;
  362.     height: 70px;
  363.     padding: 0 18px;
  364.     width: calc(100% + 72px);
  365.     position: absolute;
  366.     left: -72px;
  367. }
  368.  
  369.  
  370. /* Content */
  371.  
  372. div[class^='chat'] {
  373.     --background-floating: rgba(var(--black), 0.5);
  374. }
  375.  
  376. div[class^="container-"][id^="chat-messages-"] {
  377.     --background-modifier-hover: var(--background-solid-dark);
  378. }
  379.  
  380. div[class^='chat'] main form {
  381.     margin-top: 0;
  382. }
  383.  
  384. div[class^='chat'] main form::before {
  385.     content: none;
  386. }
  387.  
  388. div[data-list-id="chat-messages"] {
  389.     --background-primary: transparent;
  390.     --background-secondary: rgba(var(--white), 0.05);
  391.     --background-accent: rgba(var(--white), 0.1);
  392. }
  393.  
  394. div[class^="channelTextArea-"] {
  395.     --background-secondary: transparent;
  396.     box-shadow: inset 0 0 0 2px rgba(var(--white), 0.1);
  397.     transition: 250ms ease;
  398.     margin-bottom: 24px;
  399.     margin-top: 12px;
  400.     border-radius: 5px;
  401. }
  402.  
  403. div[id^="chat-messages-"]+div:not([id]):last-child {
  404.     height: 8px;
  405. }
  406.  
  407. div[id^="chat-messages-"][class*="cozy-"] {
  408.     padding-left: calc(var(--avatar-size) * 2);
  409. }
  410.  
  411. div[id^="chat-messages-"] {
  412.     margin-left: 8px;
  413.     margin-right: 8px;
  414.     border-radius: 4px;
  415. }
  416.  
  417. div[id^="chat-messages-"]>div[class^="buttonContainer-"] {
  418.     transform: scale(.85);
  419.     top: 1px;
  420. }
  421.  
  422. div[id^="chat-messages-"] {
  423.     --background-primary: rgba(var(--black), 0.5);
  424. }
  425.  
  426. div[id^="chat-messages-"]>div>[class^="avatar-"] {
  427.     margin-top: 6px;
  428.     width: var(--avatar-size);
  429.     height: var(--avatar-size);
  430. }
  431.  
  432. div[id^="chat-messages-"][class*="cozy-"] div::before {
  433.     --gutter: 13px;
  434. }
  435.  
  436. .mention {
  437.     transition: 150ms ease;
  438.     color: rgba(var(--accent), 1) !important;
  439.     background-color: rgba(var(--accent), 0.3);
  440.     padding: 3px 5px;
  441.     border-radius: 5px;
  442. }
  443.  
  444. .mention:hover {
  445.     background-color: rgba(var(--accent), 0.3) !important;
  446. }
  447.  
  448. #app-mount .container-1D34oG {
  449.     background: var(--background-primary);
  450. }
  451.  
  452. div[class*="barBase-"] {
  453.     padding-bottom: 0;
  454.     background-color: rgba(var(--accent-alt), 0.9);
  455. }
  456.  
  457.  
  458. /* Codeblocks */
  459.  
  460. html pre {
  461.     border-radius: 0;
  462.     background: transparent;
  463.     border-color: rgba(255, 255, 255, 0.1);
  464. }
  465.  
  466. pre code.hljs {
  467.     border: none;
  468.     background-color: rgba(var(--white), 0.1);
  469.     color: rgba(var(--white), 0.7);
  470.     padding: 1em;
  471. }
  472.  
  473. html code.inline,
  474. html code.inline {
  475.     background: rgba(var(--white), 0.1);
  476.     color: rgba(var(--white), 0.7);
  477.     padding: 0.3em 0.6em;
  478.     border-radius: 3px;
  479. }
  480.  
  481.  
  482. /* Settings */
  483.  
  484. div[aria-label*="_SETTINGS"],
  485. div[aria-label*="_DEBUG"] {
  486.     --background-primary: transparent;
  487.     --background-secondary: rgba(var(--black), 0.7);
  488. }
  489.  
  490. div[class^="sidebarRegionScroller-"]>nav {
  491.     --background-secondary: transparent;
  492. }
  493.  
  494. div[class^="contentRegion-"] {
  495.     --background-primary: rgba(var(--black), 0.8);
  496. }
  497.  
  498. div[class^="contentRegion-"] div[style^="overflow: hidden scroll"] {
  499.     background-color: transparent;
  500.     --background-primary: rgba(var(--black), 0.1);
  501.     --background-secondary: rgba(var(--black), 0.2);
  502.     --background-secondary-alt: rgba(var(--black), 0.25);
  503.     --background-tertiary: rgba(var(--white), 0.1);
  504. }
  505.  
  506. div[aria-label*="_SETTINGS"] aside>div {
  507.     --background-primary: transparent;
  508. }
  509.  
  510. div[aria-label*="_SETTINGS"] aside>div::-webkit-scrollbar-track {
  511.     visibility: hidden !important;
  512. }
  513.  
  514. .bd-addon-list {
  515.     --background-secondary: var(--background-solid);
  516.     --background-secondary-alt: var(--background-solid-dark);
  517. }
  518.  
  519.  
  520. /* Tab Bar */
  521.  
  522. div[class*="topPill"],
  523. nav>div[role="tablist"],
  524. .bd-tab-bar {
  525.     --background-accent: rgba(var(--accent));
  526.     --background-modifier-hover: rgba(var(--white), 0.05);
  527.     --background-modifier-active: rgba(var(--white), 0.075);
  528.     --background-modifier-selected: rgba(var(--accent), 0.25);
  529. }
  530.  
  531.  
  532. /* Server Discovery */
  533.  
  534. div[class^="sidebar"]+[class^="pageWrapper"] {
  535.     --background-secondary: rgba(var(--black), 0.8);
  536.     background-color: var(--background-secondary);
  537. }
  538.  
  539.  
  540. /* Crash Page */
  541.  
  542. div[class*="errorPage"] {
  543.     --background-secondary: rgba(var(--black), 0.7) !important;
  544. }
  545.  
  546.  
  547. /* Tooltips */
  548.  
  549. div[class^="tooltip-"] {
  550.     --background-floating: rgba(var(--accent-alt), 1);
  551.     --text-normal: #e0e0e0;
  552. }
  553.  
  554.  
  555. /* Buttons */
  556.  
  557. button[class*="button-"][class*="color"],
  558. .bd-button {
  559.     --vaccentcolor: var(--accent-alt);
  560. }
  561.  
  562. .bd-button {
  563.     --bd-blue: rgba(var(--accent-alt), 1);
  564. }
  565.  
  566.  
  567. /* Context Menu */
  568.  
  569. div[role="menuitem"] {
  570.     --vaccentcolor: var(--accent-alt);
  571. }
  572.  
  573. div[role="menuitem"]:active {
  574.     --vaccentcolor: var(--accent);
  575. }
  576.  
  577.  
  578. /* Depreceated Components */
  579.  
  580.  
  581. /* These use hardcoded colors, no need to bother with strange selectors */
  582.  
  583. #app-mount .footer-2gL1pp,
  584. #app-mount .footer-3mqk7D {
  585.     background-color: var(--background-secondary);
  586.     box-shadow: none;
  587. }
  588.  
  589. #app-mount .root-1gCeng,
  590. #app-mount .addGamePopout-2RY8Ju,
  591. #app-mount .keyboardShortcutsModal-3piNz7,
  592. #app-mount .emojiAliasInput-1y-NBz .emojiInput-1aLNse,
  593. .perksModal-fSYqOq .perk-2WeBWW,
  594. #app-mount .uploadModal-2ifh8j,
  595. #app-mount .contentWrapper-3WC1ID,
  596. #app-mount .contentWarningPopout-n5JsIs {
  597.     background-color: var(--background-primary);
  598. }
  599.  
  600. #app-mount .codeRedemptionRedirect-1wVR4b,
  601. #app-mount .userSettingsVoice-iwdUCU .previewOverlay-2O7_KC,
  602. #app-mount .inset-3sAvek {
  603.     background-color: var(--background-tertiary);
  604.     border: none;
  605. }
  606.  
  607. #app-mount .paymentPane-3bwJ6A,
  608. #app-mount .tierBody-x9kBBp,
  609. #app-mount .tierBody-16Chc9,
  610. #app-mount .barBackground-2EEiLw,
  611. #app-mount .body-3iLsc4,
  612. #app-mount .footer-1fjuF6,
  613. #app-mount .container-3ayLPN,
  614. #app-mount .colorPickerCustom-2CWBn2,
  615. #app-mount .tierMarkerBackground-3q29am,
  616. .css-3vaxre-menu,
  617. .css-dwar6a-menu,
  618. #app-mount .autocomplete-1vrmpx,
  619. .categoryHeader-O1zU94,
  620. #app-mount .popoutList-T9CKZQ,
  621. #app-mount .quickSelectPopout-X1hvgV,
  622. .colorable-1bkp8v.primaryDark-3mSFDl,
  623. .tile-2naSqK,
  624. .videoWrapper-2v09vt,
  625. #app-mount .spoilerText-3p6IlD.hidden-HHr2R9 {
  626.     background-color: var(--background-solid);
  627. }
  628.  
  629. #app-mount .expandedInfo-3kfShd,
  630. #app-mount .tierHeaderLocked-1a2opw,
  631. #app-mount .tierHeaderLocked-1s2JJz,
  632. #app-mount .headerNormal-T_seeN,
  633. #app-mount .focused-2bY0OD,
  634. .colorable-1bkp8v.primaryDark-3mSFDl:hover {
  635.     background-color: var(--background-solid-dark);
  636. }
  637.  
  638. #app-mount .payment-xT17Mq {
  639.     background-color: transparent;
  640.     border-bottom-color: rgba(var(--white), 0.025);
  641. }
  642.  
  643. #app-mount .bottomDivider-1K9Gao,
  644. #app-mount .focused-2bY0OD {
  645.     border-bottom-color: var(--background-solid-dark);
  646. }
  647.  
  648. #app-mount div[data-list-id="billing-history"],
  649. #app-mount .media-engine-video,
  650. .react-datepicker,
  651. .react-datepicker__header,
  652. .react-datepicker__day--outside-month,
  653. .react-datepicker__day--disabled {
  654.     background-color: transparent !important;
  655. }
  656.  
  657. .react-datepicker__day--disabled {
  658.     opacity: .6;
  659. }
  660.  
  661. #app-mount .react-datepicker__day {
  662.     border-top-color: var(--background-secondary);
  663.     border-left-color: var(--background-secondary);
  664. }
  665.  
  666. #app-mount .background-3xPPFc,
  667. #app-mount .tierInProgress-3mBoXq {
  668.     color: var(--background-solid);
  669. }
  670.  
  671. .option-96V44q:after {
  672.     content: none;
  673. }
  674.  
  675. #app-mount .option-96V44q.selected-rZcOL-,
  676. #app-mount .selected-1Tbx07,
  677. #app-mount .quickSelectPopoutOption-opKBx9:hover,
  678. #app-mount .outer-1AjyKL.active-1xchHY,
  679. #app-mount .outer-1AjyKL.interactive-3B9GmY:hover {
  680.     background-color: var(--background-modifier-hover);
  681. }
  682.  
  683. .css-3vaxre-menu,
  684. .tierMarker-5HkGJ_[style] {
  685.     border-color: rgba(var(--white), 0.025) !important;
  686. }
  687.  
  688. #app-mount .searchAnswer-3Dz2-q,
  689. #app-mount .searchFilter-2ESiM3,
  690. #app-mount .option-1B5ZV8,
  691. #app-mount .pill-2pQByF {
  692.     background-color: rgba(var(--accent-alt), 1);
  693.     color: #fff;
  694. }
  695.  
  696. #app-mount .keybindShortcut-1BD6Z1 span {
  697.     background: var(--background-solid-dark);
  698.     box-shadow: inset 0 -4px 0 var(--background-solid-darker);
  699. }
  700.  
  701. #app-mount .perksModal-fSYqOq {
  702.     background: rgba(var(--black), 0.7);
  703. }
  704.  
  705. #app-mount .card-FDVird:before {
  706.     background: var(--background-modifier-hover);
  707.     border: none;
  708. }
  709.  
  710.  
  711. /* Login Page */
  712.  
  713. div[class^="splashBackground"] canvas,
  714. div[class^="splashBackground"] img {
  715.     display: none;
  716. }
  717.  
  718. /* USRBG */
  719.  
  720. /*
  721.  * USRBG User-Popout Implimentation
  722.  *
  723.  * This source code is licensed under the MIT license found in the
  724.  * LICENSE file in the root directory of this source tree.
  725. */
  726.  
  727. .userPopout-3XzG_A {
  728.     overflow: hidden;
  729.     transform: translateZ(0) !important;
  730.     --USRBG-banner-height: 60px;
  731. }
  732.  
  733. .userPopout-3XzG_A[style*="-user-"] {
  734.     --USRBG-banner-height: 120px;
  735.     --USRBG-avatar-offset: 76px;
  736. }
  737.  
  738. .userPopout-3XzG_A[style*="-user-"] .profileBanner-33-uE1 {
  739.     background-size: cover;
  740.     background-repeat: no-repeat;
  741.     background-position: var(--user-popout-position, center) center;
  742.     background-image: var(--user-background);
  743. }
  744.  
  745. .userPopout-3XzG_A[style*="-user-"] .profileBanner-33-uE1 {
  746.     height: var(--USRBG-banner-height, 120px);
  747. }
  748.  
  749. .userPopout-3XzG_A[style*="-user-"] .avatarWrapperNormal-2tu8Ts {
  750.     top: var(--USRBG-avatar-offset, 76px);
  751. }
  752.  
  753. .userPopout-3XzG_A:not([style*="-user-"]) .avatar-22FtUu,
  754. .userPopout-3XzG_A:not([style*="-user-"]) .avatarHint-1E3LMl{
  755.     z-index: 1;
  756. }
  757.  
  758. .userPopout-3XzG_A:not([style*="-user-"]) .avatar-22FtUu::after {
  759.     content: '';
  760.     position: fixed;
  761.     top: 0;
  762.     left: 0;
  763.     width: 100%;
  764.     z-index: -1;
  765.     height: var(--USRBG-banner-height, 60px);
  766.     pointer-events: none;
  767.     background-size: cover;
  768.     background-repeat: no-repeat;
  769.     background-position: var(--user-popout-position, center) center;
  770.     background-image: var(--user-background);
  771. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!