API tools faq
paste
tpacancel

ven theme base

tpacancel
Mar 26th, 2025 (edited)
180
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 84.59 KB | Gaming | 0 0
raw download clone embed print report
  1. .theme-dark,
  2. .theme-light {
  3.   --brand-experiment: var(--main-color);
  4.   --header-primary: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  5.   --header-secondary: rgba(255, 255, 255, 0.7);
  6.   --text-normal: hsl(210, calc(var(--saturation-factor, 1) * 2.9%), 86.7%);
  7.   --text-muted: rgba(255, 255, 255, 0.5);
  8.   --text-link: var(--accent-color);
  9.   --text-link-low-saturation: hsl(197, calc(var(--saturation-factor, 1) * 100%), 52.9%);
  10.   --text-positive: hsl(139, calc(var(--saturation-factor, 1) * 51.6%), 52.2%);
  11.   --text-warning: hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%);
  12.   --text-danger: hsl(359, calc(var(--saturation-factor, 1) * 82%), 73.9%);
  13.   --text-brand: hsl(235, calc(var(--saturation-factor, 1) * 86.1%), 77.5%);
  14.   --interactive-normal: hsl(216, calc(var(--saturation-factor, 1) * 3.7%), 73.5%);
  15.   --interactive-hover: hsl(210, calc(var(--saturation-factor, 1) * 2.9%), 86.7%);
  16.   --interactive-active: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  17.   --interactive-muted: rgba(255, 255, 255, 0.3);
  18.   --background-primary: transparent !important;
  19.   --background-secondary: transparent !important;
  20.   --background-secondary-alt: transparent !important;
  21.   --background-tertiary: rgba(0, 0, 0, 0.1) !important;
  22.   --background-accent: var(--main-color);
  23.   --background-floating: rgba(0, 0, 0, 0.9);
  24.   --background-nested-floating: hsl(223, calc(var(--saturation-factor, 1) * 6.9%), 19.8%);
  25.   --background-mobile-primary: hsl(220, calc(var(--saturation-factor, 1) * 7.7%), 22.9%);
  26.   --background-mobile-secondary: hsl(223, calc(var(--saturation-factor, 1) * 6.9%), 19.8%);
  27.   --chat-background: hsl(220, calc(var(--saturation-factor, 1) * 7.7%), 22.9%);
  28.   --chat-border: hsl(216, calc(var(--saturation-factor, 1) * 7.2%), 13.5%);
  29.   --chat-input-container-background: hsl(220, calc(var(--saturation-factor, 1) * 7.7%), 22.9%);
  30.   --background-modifier-hover: rgba(255, 255, 255, 0.05) !important;
  31.   --background-modifier-active: rgba(255, 255, 255, 0.05) !important;
  32.   --background-modifier-selected: rgba(255, 255, 255, 0.1) !important;
  33.   --background-modifier-accent: rgba(255, 255, 255, 0.1);
  34.   --info-positive-background: hsla(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%, 0.1);
  35.   --info-positive-foreground: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);
  36.   --info-positive-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  37.   --info-warning-background: hsla(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%, 0.1);
  38.   --info-warning-foreground: hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%);
  39.   --info-warning-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  40.   --info-danger-background: hsla(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%, 0.1);
  41.   --info-danger-foreground: hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);
  42.   --info-danger-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  43.   --info-help-background: hsla(197, calc(var(--saturation-factor, 1) * 100%), 47.8%, 0.1);
  44.   --info-help-foreground: hsl(197, calc(var(--saturation-factor, 1) * 100%), 47.8%);
  45.   --info-help-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  46.   --status-positive-background: hsl(139, calc(var(--saturation-factor, 1) * 47.1%), 33.3%);
  47.   --status-positive-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  48.   --status-warning-background: hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%);
  49.   --status-warning-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 0%);
  50.   --status-danger-background: hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);
  51.   --status-danger-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  52.   --status-danger: hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);
  53.   --status-positive: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);
  54.   --status-warning: hsl(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%);
  55.   --button-danger-background: hsl(359, calc(var(--saturation-factor, 1) * 66.7%), 54.1%);
  56.   --button-danger-background-hover: hsl(359, calc(var(--saturation-factor, 1) * 56.3%), 40.4%);
  57.   --button-danger-background-active: hsl(359, calc(var(--saturation-factor, 1) * 56.4%), 35.1%);
  58.   --button-danger-background-disabled: hsl(359, calc(var(--saturation-factor, 1) * 66.7%), 54.1%);
  59.   --button-positive-background: hsl(139, calc(var(--saturation-factor, 1) * 47.1%), 33.3%);
  60.   --button-positive-background-hover: hsl(138, calc(var(--saturation-factor, 1) * 46.8%), 24.3%);
  61.   --button-positive-background-active: hsl(138, calc(var(--saturation-factor, 1) * 46.9%), 22.2%);
  62.   --button-positive-background-disabled: hsl(139, calc(var(--saturation-factor, 1) * 47.1%), 33.3%);
  63.   --button-secondary-background: hsl(217, calc(var(--saturation-factor, 1) * 7.6%), 33.5%);
  64.   --button-secondary-background-hover: hsl(213, calc(var(--saturation-factor, 1) * 5%), 42.9%);
  65.   --button-secondary-background-active: hsl(218, calc(var(--saturation-factor, 1) * 4.6%), 46.9%);
  66.   --button-secondary-background-disabled: hsl(217, calc(var(--saturation-factor, 1) * 7.6%), 33.5%);
  67.   --button-outline-danger-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  68.   --button-outline-danger-border: hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);
  69.   --button-outline-danger-background: hsla(0, calc(var(--saturation-factor, 1) * 0%), 100%, 0);
  70.   --button-outline-danger-background-hover: hsl(359, calc(var(--saturation-factor, 1) * 66.7%), 54.1%);
  71.   --button-outline-danger-text-hover: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  72.   --button-outline-danger-border-hover: hsl(359, calc(var(--saturation-factor, 1) * 66.7%), 54.1%);
  73.   --button-outline-danger-background-active: hsl(359, calc(var(--saturation-factor, 1) * 56.7%), 48%);
  74.   --button-outline-danger-text-active: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  75.   --button-outline-danger-border-active: hsl(359, calc(var(--saturation-factor, 1) * 66.7%), 54.1%);
  76.   --button-outline-positive-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  77.   --button-outline-positive-border: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);
  78.   --button-outline-positive-background: hsla(0, calc(var(--saturation-factor, 1) * 0%), 100%, 0);
  79.   --button-outline-positive-background-hover: hsl(139, calc(var(--saturation-factor, 1) * 47.1%), 33.3%);
  80.   --button-outline-positive-text-hover: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  81.   --button-outline-positive-border-hover: hsl(139, calc(var(--saturation-factor, 1) * 47.1%), 33.3%);
  82.   --button-outline-positive-background-active: hsl(138, calc(var(--saturation-factor, 1) * 46.8%), 24.3%);
  83.   --button-outline-positive-text-active: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  84.   --button-outline-positive-border-active: hsl(138, calc(var(--saturation-factor, 1) * 46.8%), 24.3%);
  85.   --button-outline-brand-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  86.   --button-outline-brand-border: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%);
  87.   --button-outline-brand-background: hsla(0, calc(var(--saturation-factor, 1) * 0%), 100%, 0);
  88.   --button-outline-brand-background-hover: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%);
  89.   --button-outline-brand-text-hover: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  90.   --button-outline-brand-border-hover: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%);
  91.   --button-outline-brand-background-active: hsl(235, calc(var(--saturation-factor, 1) * 51.4%), 52.4%);
  92.   --button-outline-brand-text-active: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  93.   --button-outline-brand-border-active: hsl(235, calc(var(--saturation-factor, 1) * 51.4%), 52.4%);
  94.   --button-outline-primary-text: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  95.   --button-outline-primary-border: hsl(217, calc(var(--saturation-factor, 1) * 7.6%), 33.5%);
  96.   --button-outline-primary-background: hsla(0, calc(var(--saturation-factor, 1) * 0%), 100%, 0);
  97.   --button-outline-primary-background-hover: hsl(217, calc(var(--saturation-factor, 1) * 7.6%), 33.5%);
  98.   --button-outline-primary-text-hover: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  99.   --button-outline-primary-border-hover: hsl(217, calc(var(--saturation-factor, 1) * 7.6%), 33.5%);
  100.   --button-outline-primary-background-active: hsl(213, calc(var(--saturation-factor, 1) * 5%), 42.9%);
  101.   --button-outline-primary-text-active: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  102.   --button-outline-primary-border-active: hsl(213, calc(var(--saturation-factor, 1) * 5%), 42.9%);
  103.   --modal-background: rgba(0, 0, 0, 0.95);
  104.   --modal-footer-background: rgba(0, 0, 0, 0.95);
  105.   --scrollbar-auto-thumb: var(--scroll-thumb-color);
  106.   --scrollbar-thin-thumb: var(--scroll-thumb-color);
  107.   --scrollbar-auto-track: rgba(0, 0, 0, 0.1) !important;
  108.   --scrollbar-thin-track: transparent !important;
  109.   --scrollbar-auto-scrollbar-color-thumb: hsl(216, calc(var(--saturation-factor, 1) * 7.2%), 13.5%);
  110.   --scrollbar-auto-scrollbar-color-track: hsl(223, calc(var(--saturation-factor, 1) * 6.9%), 19.8%);
  111.   --input-background: rgba(0, 0, 0, 0.5);
  112.   --input-placeholder-text: hsl(216, calc(var(--saturation-factor, 1) * 2.1%), 53.9%);
  113.   --logo-primary: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
  114.   --control-brand-foreground: var(--main-color);
  115.   --control-brand-foreground-new: var(--main-color);
  116.   --background-mentioned: hsla(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%, 0.1);
  117.   --background-mentioned-hover: hsla(38, calc(var(--saturation-factor, 1) * 95.7%), 54.1%, 0.08);
  118.   --background-message-hover: hsla(240, calc(var(--saturation-factor, 1) * 11.1%), 1.8%, 0.07);
  119.   --background-message-automod: hsla(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%, 0.05);
  120.   --background-message-automod-hover: hsla(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%, 0.1);
  121.   --background-message-highlight: hsla(235, calc(var(--saturation-factor, 1) * 86.1%), 77.5%, 0.08);
  122.   --background-message-highlight-hover: hsla(235, calc(var(--saturation-factor, 1) * 86.1%), 77.5%, 0.06);
  123.   --channels-default: rgba(255, 255, 255, 0.7);
  124.   --channel-icon: hsl(213, calc(var(--saturation-factor, 1) * 4.1%), 57.5%);
  125.   --channel-text-area-placeholder: hsl(218, calc(var(--saturation-factor, 1) * 4.6%), 46.9%);
  126.   --channeltextarea-background: hsl(218, calc(var(--saturation-factor, 1) * 7.9%), 27.3%);
  127.   --activity-card-background: hsl(216, calc(var(--saturation-factor, 1) * 7.2%), 13.5%);
  128.   --textbox-markdown-syntax: hsl(213, calc(var(--saturation-factor, 1) * 4.1%), 57.5%);
  129.   --spoiler-revealed-background: hsl(220, calc(var(--saturation-factor, 1) * 6.8%), 17.3%);
  130.   --spoiler-hidden-background: hsl(216, calc(var(--saturation-factor, 1) * 7.2%), 13.5%);
  131.   --android-navigation-bar-background: hsl(220, calc(var(--saturation-factor, 1) * 7.7%), 7.6%);
  132.   --android-ripple: hsla(0, calc(var(--saturation-factor, 1) * 0%), 100%, 0.07);
  133.   --deprecated-card-bg: hsla(216, calc(var(--saturation-factor, 1) * 7.2%), 13.5%, 0.6);
  134.   --deprecated-card-editable-bg: hsla(216, calc(var(--saturation-factor, 1) * 7.2%), 13.5%, 0.3);
  135.   --deprecated-store-bg: hsl(220, calc(var(--saturation-factor, 1) * 7.7%), 22.9%);
  136.   --deprecated-quickswitcher-input-background: hsl(218, calc(var(--saturation-factor, 1) * 4.6%), 46.9%);
  137.   --deprecated-quickswitcher-input-placeholder: hsla(0, calc(var(--saturation-factor, 1) * 0%), 100%, 0.3);
  138.   --deprecated-text-input-bg: hsl(216, calc(var(--saturation-factor, 1) * 7.2%), 13.5%);
  139.   --deprecated-text-input-border: hsla(0, calc(var(--saturation-factor, 1) * 0%), 0%, 0.3);
  140.   --deprecated-text-input-border-hover: hsl(240, calc(var(--saturation-factor, 1) * 11.1%), 1.8%);
  141.   --deprecated-text-input-border-disabled: hsl(216, calc(var(--saturation-factor, 1) * 7.2%), 13.5%);
  142.   --deprecated-text-input-prefix: hsl(210, calc(var(--saturation-factor, 1) * 2.9%), 86.7%);
  143. }
  144.  
  145. :root {
  146.   --app-background: url("https://przemec.github.io/Novum/assets/images/app_min.png");
  147.   --main-color: #992727;
  148.   --main-color-selected: #aa2f2f;
  149.   --main-color-semitransparent: #d4393926;
  150.   --main-color-semitransparent-selected: #d336364d;
  151.   --accent-color: #fd9fa0;
  152.   --accent-color-semitransparent: #fca7a918;
  153.   --accent-saturated: #fd7a7c;
  154.   --accent-desaturated: #b47a7a;
  155.   --button-text: #dddddd;
  156.   --button-text-selected: #ffffff;
  157.   --profile-background: url("https://przemec.github.io/Novum/assets/images/profile_min.png");
  158.   --profile-activity: #6d1515;
  159.   --scroll-thumb-color: #a54b4b;
  160. }
  161.  
  162. body::after {
  163.   background-image: var(--app-background) !important;
  164.   background-repeat: no-repeat;
  165.   background-size: cover;
  166.   content: "";
  167.   position: absolute;
  168.   top: 0;
  169.   left: 0;
  170.   width: 100%;
  171.   height: 100%;
  172.   background-position: left top;
  173.   z-index: -90;
  174. }
  175.  
  176. [class^=appMount_],
  177. [class^=app_],
  178. [class^=chat_],
  179. [class^=chatContent_],
  180. [class^=bg_] {
  181.   background: transparent !important;
  182. }
  183.  
  184. #app-mount > [class^=typeMacOS],
  185. #app-mount > [class^=typeWindows] {
  186.   height: 18px;
  187.   margin-top: 0px;
  188.   background-color: rgba(0, 0, 0, 0.1);
  189.   background-repeat: no-repeat;
  190.   background-size: cover;
  191.   padding-top: 4px;
  192. }
  193.  
  194. [class^=chat_] > [class^=header] + [class^=content_],
  195. [class^=chat_] > [class^=content_] > div {
  196.   background: transparent !important;
  197. }
  198.  
  199. [class^=wrapper_] {
  200.   border: none;
  201. }
  202.  
  203. [class^=sidebar_] > nav > div:first-child,
  204. [class^=base_] > [class^=content_] > :nth-child(2) section[class*=container_],
  205. [class^=base_] > [class^=content_] > :nth-last-child(2) section[class*=container_] {
  206.   background: rgba(0, 0, 0, 0.1) !important;
  207. }
  208.  
  209. button {
  210.   transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  211. }
  212.  
  213. button[class*=lookFilled_][class*=colorGrey],
  214. button[class*=lookFilled_][class*=colorPrimary_] {
  215.   background: var(--accent-color-semitransparent) !important;
  216.   color: var(--button-text) !important;
  217. }
  218. button[class*=lookFilled_][class*=colorGrey]:hover,
  219. button[class*=lookFilled_][class*=colorPrimary_]:hover {
  220.   background: var(--accent-color-semitransparent) !important;
  221.   color: var(--button-text-selected) !important;
  222. }
  223.  
  224. button[class*=colorBrand_]:not([class*=lookBlank], [class*=lookLink]) {
  225.   background: var(--main-color);
  226.   color: var(--button-text);
  227. }
  228. button[class*=colorBrand_]:not([class*=lookBlank], [class*=lookLink]):hover {
  229.   background: var(--main-color-selected);
  230.   color: var(--button-text-selected);
  231. }
  232.  
  233. button[class*=colorBrand_][class*=lookInverted] {
  234.   background: var(--button-text-selected);
  235.   color: var(--main-color-selected);
  236. }
  237. button[class*=colorBrand_][class*=lookInverted]:hover {
  238.   background: var(--button-text);
  239.   color: var(--main-color);
  240. }
  241.  
  242. button[class*=lookOutlined_]:not([class*=lookBlank]) {
  243.   color: var(--button-text);
  244.   border-color: transparent !important;
  245. }
  246.  
  247. button[class*=colorGreen_],
  248. button[class*=colorRed_] {
  249.   background: var(--main-color) !important;
  250.   color: var(--button-text) !important;
  251. }
  252. button[class*=colorGreen_]:hover,
  253. button[class*=colorRed_]:hover {
  254.   background: var(--main-color-selected) !important;
  255.   color: var(--button-text-selected) !important;
  256. }
  257.  
  258. button[class*=lookLink_] {
  259.   color: var(--button-text);
  260. }
  261. button[class*=lookLink_]:hover {
  262.   text-decoration: none !important;
  263.   color: var(--button-text-selected);
  264. }
  265. button[class*=lookLink_][class*=colorLink_] {
  266.   color: var(--accent-color);
  267. }
  268. button[class*=lookLink_][class*=colorLink_]:hover {
  269.   color: var(--accent-saturated);
  270. }
  271. button[class*=lookLink_] > [class*=contents] {
  272.   background: none !important;
  273.   border-bottom: 1px solid transparent;
  274.   margin-bottom: -1px;
  275. }
  276. button[class*=lookLink_]:hover > [class*=contents] {
  277.   background: none !important;
  278.   border-color: currentColor;
  279. }
  280.  
  281. [class^=control_] [class^=container_] {
  282.   background: var(--accent-color-semitransparent) !important;
  283. }
  284.  
  285. [class^=control_] [class^=container_][style*="rgb(35,"] {
  286.   background: var(--main-color) !important;
  287. }
  288. [class^=control_] [class^=container_][style*="rgb(35,"] [class^=slider] path {
  289.   fill: var(--main-color);
  290. }
  291.  
  292. input {
  293.   transition: all 0.3s;
  294. }
  295.  
  296. input:focus {
  297.   border-color: var(--accent-desaturated) !important;
  298.   box-shadow: none;
  299. }
  300.  
  301. [class^=inputDefault] {
  302.   background: rgba(0, 0, 0, 0.3);
  303. }
  304.  
  305. [aria-checked=true] [class*=iconContainer] svg > path:first-child {
  306.   fill: var(--main-color);
  307. }
  308.  
  309. [aria-checked=true] [class*=iconContainer] svg > path:last-child {
  310.   fill: var(--button-text-selected) !important;
  311. }
  312.  
  313. [class^=select][class*=lookFilled] {
  314.   background: rgba(0, 0, 0, 0.2);
  315.   border-color: rgba(0, 0, 0, 0.2);
  316. }
  317.  
  318. [class^=select][class*=lookFilled][class*=open] {
  319.   background: rgba(0, 0, 0, 0.9);
  320. }
  321.  
  322. [class^=popout][role=listbox] {
  323.   background: rgba(0, 0, 0, 0.9);
  324. }
  325.  
  326. [class^=slider_] > [class^=bar_] {
  327.   background: var(--accent-color-semitransparent) !important;
  328. }
  329. [class^=slider_] > [class^=bar_] [class^=barFill_] {
  330.   background: var(--main-color) !important;
  331. }
  332.  
  333. [class^=colorPrimary_] {
  334.   background: var(--main-color) !important;
  335. }
  336.  
  337. [class*=tooltipGrey],
  338. [class*=tooltipPrimary],
  339. [class*=tooltipGreen] {
  340.   background: rgba(0, 0, 0, 0.95) !important;
  341.   border: 2px solid rgb(0, 0, 0);
  342.   color: rgba(255, 255, 255, 0.5);
  343.   font-weight: bold;
  344. }
  345. [class*=tooltipGrey] [class*=tooltipPointer],
  346. [class*=tooltipPrimary] [class*=tooltipPointer],
  347. [class*=tooltipGreen] [class*=tooltipPointer] {
  348.   border-top-color: rgb(0, 0, 0) !important;
  349. }
  350.  
  351. [class^=layerContainer_] > [class*=toolbar] {
  352.   background: rgba(0, 0, 0, 0.95) !important;
  353.   border: 2px solid rgb(0, 0, 0);
  354. }
  355. [class^=layerContainer_] > [class*=toolbar]::before {
  356.   border-top-color: rgb(0, 0, 0) !important;
  357. }
  358.  
  359. [class^=backdrop] {
  360.   background: linear-gradient(rgba(0, 0, 0, 0.1333333333), black) !important;
  361. }
  362.  
  363. [class^=pro_],
  364. [class*=protip] {
  365.   color: var(--accent-saturated) !important;
  366. }
  367.  
  368. [class^=channelTextArea] {
  369.   border-radius: 10px;
  370.   background: rgba(0, 0, 0, 0.1) !important;
  371. }
  372. [class^=channelTextArea] [class*=scrollableContainer] {
  373.   background: rgba(0, 0, 0, 0.1);
  374. }
  375. [class^=channelTextArea] [class*=scrollableContainer] [class^=attachWrapper] {
  376.   border-right-color: rgba(255, 255, 255, 0.1);
  377. }
  378. [class^=channelTextArea] [class^=autocomplete] {
  379.   background: transparent !important;
  380. }
  381. [class^=channelTextArea] [class^=autocompleteInner] {
  382.   background: rgba(0, 0, 0, 0.9) !important;
  383.   border-color: transparent !important;
  384. }
  385. [class^=channelTextArea] [class*=autocompleteRow] > [class*=selected] {
  386.   background: var(--main-color-semitransparent-selected) !important;
  387. }
  388. [class^=channelTextArea] > [class^=container_] > [class^=containerBackground] {
  389.   background: rgba(0, 0, 0, 0.95) !important;
  390.   border-color: transparent;
  391. }
  392. [class^=channelTextArea] [class*=inner] [class^=buttons] > [class*=grow] {
  393.   display: none !important;
  394. }
  395.  
  396. [class^=channelAppLauncher] .app-launcher-entrypoint > button {
  397.   background: rgba(0, 0, 0, 0.1);
  398. }
  399.  
  400. [class*=floating] > section {
  401.   background: rgba(0, 0, 0, 0.1) !important;
  402. }
  403. [class*=floating]::before {
  404.   content: "";
  405.   top: 0;
  406.   right: 0;
  407.   bottom: 0;
  408.   left: 0;
  409.   position: absolute;
  410.   z-index: -1;
  411.   background: var(--app-background) center/cover no-repeat fixed;
  412.   background-position: unset;
  413. }
  414.  
  415. [class^=drawerSizingWrapper_] > [class^=contentWrapper_] {
  416.   background: rgba(0, 0, 0, 0.9) !important;
  417. }
  418. [class^=drawerSizingWrapper_] > [class^=contentWrapper_] [class^=navList_] > [class^=navItem_] > [class^=navButtonActive_] {
  419.   background: var(--main-color) !important;
  420. }
  421. [class^=drawerSizingWrapper_] > [class^=contentWrapper_] [class^=unicodeShortcut_],
  422. [class^=drawerSizingWrapper_] > [class^=contentWrapper_] [class^=inspector_] {
  423.   background: #000;
  424. }
  425.  
  426. [class*=followButton] {
  427.   background: var(--main-color) !important;
  428.   color: var(--button-text) !important;
  429. }
  430. [class*=followButton]:hover {
  431.   background: var(--main-color-selected) !important;
  432.   color: var(--button-text-selected) !important;
  433. }
  434.  
  435. [id^=chat-messages] [class*=description] [class*=colorBrand] {
  436.   background: rgba(0, 255, 128, 0.1) !important;
  437.   color: rgba(0, 255, 128, 0.7) !important;
  438. }
  439. [id^=chat-messages] [class*=description] [class*=colorBrand]:hover, [id^=chat-messages] [class*=description] [class*=colorBrand][class*=selected] {
  440.   background: rgba(0, 255, 128, 0.2) !important;
  441.   color: rgba(0, 255, 128, 0.9) !important;
  442. }
  443. [id^=chat-messages] [class*=description] [class*=colorPrimary] {
  444.   background: rgba(0, 0, 0, 0.2) !important;
  445.   color: rgba(255, 255, 255, 0.6) !important;
  446. }
  447. [id^=chat-messages] [class*=description] [class*=colorPrimary]:hover, [id^=chat-messages] [class*=description] [class*=colorPrimary][class*=selected] {
  448.   background: rgba(0, 0, 0, 0.4) !important;
  449.   color: rgb(255, 255, 255) !important;
  450. }
  451. [id^=chat-messages] [class*=description] [class*=coloRed] {
  452.   background: var(--main-color) !important;
  453.   color: var(--button-text) !important;
  454. }
  455. [id^=chat-messages] [class*=description] [class*=coloRed]:hover {
  456.   background: var(--main-color-selected) !important;
  457.   color: var(--button-text-selected) !important;
  458. }
  459.  
  460. [class*=chatContent] form > [class^=wrapper] {
  461.   background: rgba(0, 0, 0, 0.3);
  462. }
  463.  
  464. [class*=chatContent] form > [class^=wrapper] button:not([class*=lookBlank], [class*=barButtonBase]) {
  465.   background: var(--main-color) !important;
  466.   color: var(--button-text) !important;
  467. }
  468. [class*=chatContent] form > [class^=wrapper] button:not([class*=lookBlank], [class*=barButtonBase]):hover {
  469.   background: var(--main-color-selected) !important;
  470.   color: var(--button-text-selected) !important;
  471. }
  472.  
  473. [class*=reactions_] [class*=reaction_]:not([class^=reactionCount], [class^=reactionBtn]) {
  474.   background: rgba(0, 0, 0, 0.2) !important;
  475.   transform: scale(1.07);
  476.   display: flex;
  477.   align-content: center;
  478. }
  479. [class*=reactions_] [class*=reaction_]:not([class^=reactionCount], [class^=reactionBtn]):hover {
  480.   border-color: transparent;
  481. }
  482. [class*=reactions_] [class*=reaction_]:not([class^=reactionCount], [class^=reactionBtn]) img {
  483.   transform: scale(1.2);
  484. }
  485. [class*=reactions_] [class*=reaction_]:not([class^=reactionCount], [class^=reactionBtn])[class*=reactionMe] {
  486.   border-color: var(--main-color);
  487.   background: rgba(0, 0, 0, 0.4) !important;
  488. }
  489.  
  490. [class*=reactionCount_] {
  491.   color: var(--accent-color) !important;
  492. }
  493.  
  494. [class^=layerContainer_] [class^=layer_] [class*=reactors_] {
  495.   background: transparent !important;
  496. }
  497. [class^=layerContainer_] [class^=layer_] [class*=reactors_] div:not([class*=contents]) {
  498.   background: rgba(0, 0, 0, 0.95) !important;
  499. }
  500. [class^=layerContainer_] [class^=layer_] [class*=menu_] {
  501.   background: rgba(0, 0, 0, 0.95) !important;
  502.   box-shadow: none !important;
  503. }
  504. [class^=layerContainer_] [class^=layer_] [class*=menu_] [class*=wrapper_] img {
  505.   width: 30px !important;
  506.   height: 30px !important;
  507. }
  508.  
  509. [class*=messagesPopoutWrap] {
  510.   background: rgba(0, 0, 0, 0.95) !important;
  511. }
  512.  
  513. [class^=uploadDropModal] [class^=bgScale] {
  514.   background: var(--profile-activity) !important;
  515. }
  516. [class^=uploadDropModal] [class*=icons] {
  517.   filter: hue-rotate(110deg) contrast(1.3) !important;
  518. }
  519.  
  520. [class^=uploadModal] {
  521.   background: rgba(0, 0, 0, 0.95) !important;
  522.   box-shadow: none !important;
  523. }
  524. [class^=uploadModal] [class^=footer] {
  525.   background: rgba(0, 0, 0, 0.95) !important;
  526. }
  527. [class^=uploadModal] label[class*=checked] [class*=checkbox] {
  528.   background: var(--main-color) !important;
  529.   border-color: transparent !important;
  530. }
  531. [class^=uploadModal] label[class*=checked] [class*=checkbox] svg path {
  532.   fill: #fff !important;
  533. }
  534.  
  535. [id^=message-content-Uploader] > div[class*=attachment] {
  536.   background: rgba(0, 0, 0, 0.3);
  537.   border-color: #000000;
  538. }
  539. [id^=message-content-Uploader] > div[class*=attachment] [class*=progressBar] {
  540.   background: var(--accent-color) !important;
  541. }
  542.  
  543. [id^=message-accessories] > [class^=embedWrapper] {
  544.   background: var(--accent-color-semitransparent) !important;
  545.   border-color: var(--accent-saturated) !important;
  546. }
  547.  
  548. [class^=messageAttachment] {
  549.   border-color: #000 !important;
  550. }
  551. [class^=messageAttachment] > [class^=attachment], [class^=messageAttachment] > [class^=embedWrapper] {
  552.   background: rgba(0, 0, 0, 0.2) !important;
  553. }
  554. [class^=messageAttachment] code {
  555.   background: transparent !important;
  556. }
  557. [class^=messageAttachment] [class^=textContainer] + div {
  558.   background: rgba(0, 0, 0, 0.2) !important;
  559. }
  560.  
  561. [id^=message-content] [class*=mention] {
  562.   color: var(--accent-desaturated);
  563.   background: rgba(0, 0, 0, 0.2) !important;
  564.   border-radius: 3px;
  565. }
  566. [id^=message-content] [class*=mention]:hover {
  567.   background: rgba(0, 0, 0, 0.4) !important;
  568. }
  569.  
  570. [class*=mentioned] {
  571.   background: linear-gradient(90deg, transparent 5px, var(--accent-color-semitransparent) 5px, transparent 80%) !important;
  572. }
  573. [class*=mentioned] [class*=mention] {
  574.   color: var(--accent-saturated);
  575.   background: rgba(0, 0, 0, 0.2) !important;
  576. }
  577. [class*=mentioned]::before {
  578.   left: 1px;
  579.   border-radius: 5px 0 0 5px;
  580.   background: var(--accent-saturated);
  581.   border-left: 2px solid var(--accent-saturated);
  582. }
  583.  
  584. [class*=message] [class*=buttonContainer] [class*=container] [class*=wrapper] {
  585.   background: rgba(0, 0, 0, 0.95);
  586. }
  587.  
  588. [class*=recentMentionsPopout] {
  589.   background: rgba(0, 0, 0, 0.95) !important;
  590. }
  591.  
  592. [class*=layer] #emoji-picker-tab-panel[class*=wrapper] {
  593.   background: rgba(0, 0, 0, 0.95) !important;
  594. }
  595. [class*=layer] #emoji-picker-tab-panel[class*=wrapper] [class*=emojiItem] {
  596.   transition: transform 0.2s ease-in-out;
  597. }
  598. [class*=layer] #emoji-picker-tab-panel[class*=wrapper] [class*=emojiItemSelected] {
  599.   background: rgba(255, 255, 255, 0.3);
  600.   transform: scale(1.1);
  601. }
  602.  
  603. [class^=threadSidebar] {
  604.   background: rgba(0, 0, 0, 0.95);
  605. }
  606.  
  607. [class*=layer] [class*=browser] {
  608.   background: rgba(0, 0, 0, 0.95) !important;
  609. }
  610.  
  611. [class*=hasThread] [class*=cta] {
  612.   color: var(--accent-color) !important;
  613. }
  614.  
  615. [class*=messagesWrapper] [class*=content] [class*=divider] {
  616.   border-color: transparent;
  617.   background-color: transparent !important;
  618.   margin-top: 35px;
  619.   margin-bottom: 35px;
  620. }
  621. [class*=messagesWrapper] [class*=content] [class*=divider] [class*=content] {
  622.   color: var(--accent-saturated) !important;
  623.   width: 95%;
  624.   transform: translateY(6px);
  625. }
  626. [class*=messagesWrapper] [class*=content] [class*=divider]:not([class*=isUnread]) > span {
  627.   color: rgba(255, 255, 255, 0.7) !important;
  628.   background: rgba(204, 204, 204, 0.1) !important;
  629.   font-size: 14px;
  630.   border-radius: 5px;
  631.   padding: 7px 15px;
  632.   text-align: center;
  633.   width: 90%;
  634. }
  635. [class*=messagesWrapper] [class*=content] [class*=divider] [class*=isUnread] {
  636.   background: transparent !important;
  637.   color: var(--accent-saturated) !important;
  638.   width: 95%;
  639.   transform: translateY(6px);
  640. }
  641.  
  642. [class*=unreadPill] {
  643.   background: var(--main-color-semitransparent) !important;
  644.   color: var(--accent-saturated) !important;
  645.   padding: 12px 0;
  646.   width: 100%;
  647.   font-size: 14px;
  648. }
  649.  
  650. [class*=unreadPillCap] {
  651.   visibility: hidden;
  652. }
  653.  
  654. [id^=status-picker] {
  655.   transition: background 200ms ease-out;
  656. }
  657.  
  658. #account-status-picker--online {
  659.   color: #43b581;
  660. }
  661. #account-status-picker--online[class*=focused] {
  662.   background: rgba(67, 181, 130, 0.2666666667);
  663. }
  664. #account-status-picker--idle {
  665.   color: #faa61a;
  666. }
  667. #account-status-picker--idle[class*=focused] {
  668.   background: rgba(250, 168, 26, 0.2588235294);
  669. }
  670. #account-status-picker--dnd {
  671.   color: #f04747;
  672. }
  673. #account-status-picker--dnd[class*=focused] {
  674.   background: rgba(184, 58, 60, 0.2392156863);
  675. }
  676. #account-status-picker--invisible {
  677.   color: #747f8d;
  678. }
  679. #account-status-picker--invisible[class*=focused] {
  680.   background: rgba(116, 127, 141, 0.2392156863);
  681. }
  682. #account-status-picker--custom-status[class*=focused] {
  683.   background: rgba(255, 77, 181, 0.2392156863);
  684. }
  685.  
  686. [class^=newMessagesBar_] {
  687.   background: var(--main-color) !important;
  688.   padding: 3px 0;
  689.   border-color: transparent !important;
  690. }
  691.  
  692. [class^=jumpToPresentBar_] {
  693.   background: var(--accent-desaturated) !important;
  694.   padding: 3px 0;
  695.   border-color: transparent !important;
  696. }
  697.  
  698. [id^=message-accessories_] > [class*=wrapper] {
  699.   background: rgba(0, 0, 0, 0.2);
  700. }
  701.  
  702. [id^=message-accessories_] > [class*=wrapper] [class*=guildIconImage] {
  703.   background-color: rgba(0, 0, 0, 0.2);
  704. }
  705.  
  706. [class*=title] [class*=search] {
  707.   order: 1;
  708.   margin-left: 4px;
  709. }
  710. [class*=title] [class*=search] [class*=search]:not([class*=open]) [class*=searchBar] {
  711.   width: 27px;
  712.   transition: 250ms;
  713.   background: transparent;
  714.   border-bottom: 2px solid transparent;
  715. }
  716. [class*=title] [class*=search] [class*=search]:not([class*=open]) [class*=searchBar] [class*=iconContainer] {
  717.   transform: scale(1.3);
  718.   transition: 250ms;
  719. }
  720. [class*=title] [class*=search] [class*=search]:not([class*=open]) [class*=searchBar] [class*=iconContainer] [class*=icon] {
  721.   color: var(--interactive-normal);
  722. }
  723. [class*=title] [class*=search] [class*=search]:not([class*=open]):hover [class*=searchBar] {
  724.   width: 240px;
  725.   background: rgba(0, 0, 0, 0.15);
  726. }
  727. [class*=title] [class*=search] [class*=search]:not([class*=open]):hover [class*=searchBar] [class*=iconContainer] {
  728.   transform: scale(1);
  729. }
  730. [class*=title] [class*=search] [class*=search]:not([class*=open]):hover [class*=searchBar] [class*=iconContainer] [class*=icon] {
  731.   color: var(--text-muted);
  732. }
  733.  
  734. [class*=DraftEditor] [class*=searchFilter],
  735. [class*=DraftEditor] [class*=searchAnswer] {
  736.   background: var(--main-color);
  737. }
  738.  
  739. [id*=popout] > [class*=container] {
  740.   background: rgba(0, 0, 0, 0.95);
  741.   box-shadow: none !important;
  742. }
  743. [id*=popout] > [class*=container] [class*=resultsGroup] {
  744.   text-align: center;
  745. }
  746. [id*=popout] > [class*=container] [class*=resultsGroup] [class*=selected],
  747. [id*=popout] > [class*=container] [class*=resultsGroup] [class*=option]:hover {
  748.   background: var(--main-color-semitransparent-selected);
  749. }
  750. [id*=popout] > [class*=container] [class*=resultsGroup]::before,
  751. [id*=popout] > [class*=container] [class*=resultsGroup] [class*=option]::after {
  752.   visibility: hidden !important;
  753. }
  754. [id*=popout] > [class*=container] [class*=queryContainer] {
  755.   background: rgb(0, 0, 0);
  756. }
  757. [id*=popout] > [class*=container] [class*=queryContainer] span {
  758.   background: var(--main-color);
  759. }
  760. [id*=popout] > [class*=container] [class*=searchLearnMore] {
  761.   display: none;
  762. }
  763.  
  764. [class*=datePicker] {
  765.   background: rgba(0, 0, 0, 0.9) !important;
  766. }
  767. [class*=datePicker] [class*=hintValue] {
  768.   margin-left: 5px;
  769.   background: var(--main-color) !important;
  770.   color: var(--button-text) !important;
  771. }
  772. [class*=datePicker] [class*=hintValue]:hover {
  773.   background: var(--main-color-selected) !important;
  774.   color: var(--button-text-selected) !important;
  775. }
  776.  
  777. [class*=react-datepicker] {
  778.   background: transparent !important;
  779. }
  780. [class*=react-datepicker] [class*=month] > [class*=week] [class*=day]:not([class*=day--disabled]) {
  781.   background: var(--main-color-semitransparent) !important;
  782. }
  783. [class*=react-datepicker] [class*=month] > [class*=week] [class*=day]:not([class*=day--disabled]):hover {
  784.   background: var(--main-color-semitransparent-selected) !important;
  785. }
  786. [class*=react-datepicker] [class*=month] > [class*=week] [class*=selected] {
  787.   background: var(--main-color-semitransparent-selected) !important;
  788. }
  789. [class*=react-datepicker] [class*=month] > [class*=week] [class*=selected]::after {
  790.   background: var(--main-color-semitransparent-selected) !important;
  791. }
  792. [class*=react-datepicker] [class*=month] > [class*=week] [class*=outside-month]:not([class*=day--disabled]) {
  793.   background: var(--main-color-semitransparent) !important;
  794.   opacity: 0.3 !important;
  795. }
  796.  
  797. [class*=searchResultsWrap] [class*=channelSeparator] [class*=channelName] {
  798.   background: transparent;
  799.   text-align: right !important;
  800.   border-radius: 8px;
  801.   padding: 5px !important;
  802. }
  803. [class*=searchResultsWrap] [class*=channelSeparator] [class*=channelName]:hover {
  804.   background: var(--main-color-semitransparent-selected);
  805.   text-decoration: none;
  806. }
  807. [class*=searchResultsWrap] [class*=searchHeader] {
  808.   background: rgba(0, 0, 0, 0.3) !important;
  809.   border-bottom-left-radius: 5px;
  810.   border-bottom-right-radius: 5px;
  811. }
  812. [class*=searchResultsWrap] [class*=searchResult][class*=expanded] {
  813.   border-color: transparent !important;
  814.   border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  815.   background: rgba(0, 0, 0, 0.1) !important;
  816.   opacity: 1;
  817. }
  818. [class*=searchResultsWrap] [class*=searchResult] [class*=searchResultMessage][class*=after], [class*=searchResultsWrap] [class*=searchResult] [class*=searchResultMessage][class*=before] {
  819.   opacity: 0.15 !important;
  820. }
  821.  
  822. [class*=actionButtons] [class*=jumpButton] {
  823.   background: rgba(0, 0, 0, 0.3) !important;
  824.   border-radius: 3px !important;
  825.   color: var(--button-text) !important;
  826. }
  827. [class*=actionButtons] [class*=jumpButton]:hover {
  828.   background: rgba(0, 0, 0, 0.6) !important;
  829.   color: var(--button-text-selected) !important;
  830. }
  831.  
  832. [class*=pageControlContainer] {
  833.   background: rgba(0, 0, 0, 0.3) !important;
  834.   border-top-left-radius: 5px;
  835.   border-top-right-radius: 5px;
  836. }
  837. [class*=pageControlContainer] [class*=activeButton] {
  838.   background: var(--main-color) !important;
  839. }
  840. [class*=pageControlContainer] [class*=roundButton]:not([class*=activeButton]):hover {
  841.   background: var(--main-color-semitransparent) !important;
  842. }
  843.  
  844. [class*=backgroundFlash] {
  845.   background: transparent !important;
  846. }
  847. [class*=backgroundFlash] li {
  848.   background: var(--accent-color-semitransparent) !important;
  849.   border-radius: 5px 0 0 5px;
  850. }
  851.  
  852. [class*=replyBar] {
  853.   background: rgba(0, 0, 0, 0.1);
  854.   margin-top: 8px;
  855. }
  856. [class*=replyBar] [class*=colorLink] {
  857.   color: var(--button-text);
  858. }
  859.  
  860. [class*=channelAttachmentArea] > li {
  861.   background: rgba(0, 0, 0, 0.1) !important;
  862. }
  863. [class*=channelAttachmentArea] > li [class*=actionBar] [class*=wrapper] {
  864.   background: rgba(0, 0, 0, 0.7) !important;
  865. }
  866.  
  867. code {
  868.   background: rgba(0, 0, 0, 0.2) !important;
  869. }
  870. code .hljs-keyword {
  871.   color: var(--accent-desaturated) !important;
  872. }
  873. code .hljs-title {
  874.   color: var(--accent-saturated) !important;
  875. }
  876. code .hljs-literal {
  877.   color: var(--main-color-selected) !important;
  878. }
  879. code .hljs-string {
  880.   color: var(--button-text) !important;
  881. }
  882. code .hljs-attribute {
  883.   color: var(--accent-desaturated) !important;
  884. }
  885. code .hljs-selector-class {
  886.   color: var(--accent-saturated) !important;
  887. }
  888. code .hljs-number {
  889.   color: var(--main-color-selected) !important;
  890. }
  891. code .hljs-selector-tag {
  892.   color: var(--accent-desaturated) !important;
  893. }
  894.  
  895. [class*=replying] {
  896.   background-color: rgba(0, 0, 0, 0.1) !important;
  897. }
  898. [class*=replying]::before {
  899.   left: 3px;
  900.   border-radius: 5px 0 0 5px;
  901.   background: var(--accent-saturated);
  902.   border-left: 2px solid var(--accent-saturated);
  903. }
  904.  
  905. [class^=categoryFadeBlurple_] {
  906.   background: var(--main-color) !important;
  907. }
  908.  
  909. [class*=chat] form {
  910.   margin: 0;
  911. }
  912.  
  913. [src*="avatars/214676791955161091"][class*=clickable],
  914. [style*="avatars/214676791955161091"][class*=avatar] {
  915.   -webkit-animation: rotate1 40s linear infinite;
  916.   animation: rotate1 40s linear infinite;
  917. }
  918.  
  919. [src*="avatars/221743310744715265"][class*=clickable],
  920. [style*="avatars/221743310744715265"][class*=avatar] {
  921.   -webkit-animation: rotate2 40s linear infinite;
  922.   animation: rotate2 40s linear infinite;
  923. }
  924.  
  925. @-webkit-keyframes rotate1 {
  926.   0% {
  927.     transform: rotate(0deg);
  928.   }
  929.   100% {
  930.     transform: rotate(360deg);
  931.   }
  932. }
  933. @keyframes rotate1 {
  934.   0% {
  935.     transform: rotate(0deg);
  936.   }
  937.   100% {
  938.     transform: rotate(360deg);
  939.   }
  940. }
  941. @-webkit-keyframes rotate2 {
  942.   0% {
  943.     transform: rotate(0deg);
  944.   }
  945.   100% {
  946.     transform: rotate(360deg);
  947.   }
  948. }
  949. @keyframes rotate2 {
  950.   0% {
  951.     transform: rotate(360deg);
  952.   }
  953.   100% {
  954.     transform: rotate(0deg);
  955.   }
  956. }
  957. .app,
  958. body::after {
  959.   will-change: opacity, filter;
  960.   -webkit-animation: fadeIn 2s ease-out;
  961.   animation: fadeIn 2s ease-out;
  962. }
  963.  
  964. @-webkit-keyframes fadeIn {
  965.   0% {
  966.     opacity: 0;
  967.     -webkit-filter: blur(10px);
  968.     filter: blur(10px);
  969.   }
  970.   100% {
  971.     opacity: 1;
  972.     -webkit-filter: blur(0px);
  973.     filter: blur(0px);
  974.   }
  975. }
  976. @keyframes fadeIn {
  977.   0% {
  978.     opacity: 0;
  979.     -webkit-filter: blur(10px);
  980.     filter: blur(10px);
  981.   }
  982.   100% {
  983.     opacity: 1;
  984.     -webkit-filter: blur(0px);
  985.     filter: blur(0px);
  986.   }
  987. }
  988. [class*=connection] div:nth-child(2) button:nth-child(2) {
  989.   background-color: transparent;
  990.   background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgOWMtMS42IDAtMy4xNS4yNS00LjYuNzJ2My4xYzAgLjM5LS4yMy43NC0uNTYuOS0uOTguNDktMS44NyAxLjEyLTIuNjYgMS44NS0uMTguMTgtLjQzLjI4LS43LjI4LS4yOCAwLS41My0uMTEtLjcxLS4yOUwuMjkgMTMuMDhjLS4xOC0uMTctLjI5LS40Mi0uMjktLjcgMC0uMjguMTEtLjUzLjI5LS43MUMzLjM0IDguNzggNy40NiA3IDEyIDdzOC42NiAxLjc4IDExLjcxIDQuNjdjLjE4LjE4LjI5LjQzLjI5LjcxIDAgLjI4LS4xMS41My0uMjkuNzFsLTIuNDggMi40OGMtLjE4LjE4LS40My4yOS0uNzEuMjktLjI3IDAtLjUyLS4xMS0uNy0uMjgtLjc5LS43NC0xLjY5LTEuMzYtMi42Ny0xLjg1LS4zMy0uMTYtLjU2LS41LS41Ni0uOXYtMy4xQzE1LjE1IDkuMjUgMTMuNiA5IDEyIDl6Ii8+PC9zdmc+) !important;
  991.   background-position: center;
  992.   background-repeat: no-repeat;
  993.   background-size: 20px;
  994.   opacity: 0.5;
  995. }
  996. [class*=connection] div:nth-child(2) button:nth-child(2) svg {
  997.   display: none;
  998. }
  999. [class*=connection] div:nth-child(2) button:nth-child(2):hover {
  1000.   -webkit-animation: disconnect1 0.06s infinite alternate;
  1001.   animation: disconnect1 0.06s infinite alternate;
  1002.   background-color: transparent;
  1003.   opacity: 1;
  1004. }
  1005.  
  1006. @-webkit-keyframes disconnect1 {
  1007.   from {
  1008.     -webkit-transform: rotate(-7deg);
  1009.     transform: rotate(-7deg);
  1010.   }
  1011.   to {
  1012.     -webkit-transform: rotate(7deg);
  1013.     transform: rotate(7deg);
  1014.   }
  1015. }
  1016. @keyframes disconnect1 {
  1017.   from {
  1018.     -webkit-transform: rotate(-7deg);
  1019.     transform: rotate(-7deg);
  1020.   }
  1021.   to {
  1022.     -webkit-transform: rotate(7deg);
  1023.     transform: rotate(7deg);
  1024.   }
  1025. }
  1026. [class^=content] > [class^=sidebar]::after,
  1027. [class^=content] > [class^=sidebar] [class*=guilds] {
  1028.   background: transparent;
  1029. }
  1030.  
  1031. [class^=scroller_] {
  1032.   background: transparent !important;
  1033. }
  1034.  
  1035. [class*=wrapper][class*=guilds] [class*=listItemWrapper] > a {
  1036.   background: rgba(0, 0, 0, 0.6);
  1037.   border-color: var(--accent-saturated);
  1038.   color: var(--accent-saturated);
  1039. }
  1040. [class*=wrapper][class*=guilds] [class*=listItemWrapper] > a:hover {
  1041.   background: rgba(0, 0, 0, 0.7);
  1042. }
  1043. [class*=wrapper][class*=guilds] [class*=folder],
  1044. [class*=wrapper][class*=guilds] [class*=closedFolderIconWrapper],
  1045. [class*=wrapper][class*=guilds] [class*=expandedFolderBackground] {
  1046.   background: transparent !important;
  1047. }
  1048. [class*=wrapper][class*=guilds] [class*=folderIconWrapper],
  1049. [class*=wrapper][class*=guilds] [class*=expandedFolderBackground]:not([class*=collapsed]) {
  1050.   background: rgba(0, 0, 0, 0.3) !important;
  1051.   border-radius: 20px;
  1052. }
  1053. [class*=wrapper][class*=guilds] [class*=circleIconButton] {
  1054.   background: rgba(0, 0, 0, 0.3) !important;
  1055.   color: var(--accent-saturated);
  1056. }
  1057. [class*=wrapper][class*=guilds] [class^=footer] {
  1058.   background: transparent;
  1059. }
  1060. [class*=wrapper][class*=guilds] #bd-pub-button,
  1061. [class*=wrapper][class*=guilds] foreignObject > [class^=wrapper] > [class*=childWrapper],
  1062. [class*=wrapper][class*=guilds] foreignObject > [class^=wrapper] > img {
  1063.   background-color: rgba(0, 0, 0, 0.3) !important;
  1064. }
  1065. [class*=wrapper][class*=guilds] foreignObject > [class^=wrapper][class*=selected] > [class*=childWrapper] {
  1066.   background-color: var(--main-color) !important;
  1067. }
  1068.  
  1069. [class^=unreadMentionsIndicator] > [class*=bar] {
  1070.   background: var(--main-color);
  1071. }
  1072.  
  1073. [class*=colorPickerCustom] {
  1074.   background: rgb(0, 0, 0) !important;
  1075.   border-color: transparent;
  1076. }
  1077.  
  1078. button[style="background-color: rgb(88, 101, 242);"] {
  1079.   background: var(--accent-color) !important;
  1080. }
  1081.  
  1082. svg[style="color: rgb(88, 101, 242);"] path {
  1083.   fill: var(--accent-color);
  1084. }
  1085.  
  1086. [class*=header] h3 {
  1087.   color: rgba(255, 255, 255, 0.8);
  1088. }
  1089.  
  1090. [class*=footer] h3 {
  1091.   color: rgba(255, 255, 255, 0.8);
  1092. }
  1093.  
  1094. [class*=footerButton] {
  1095.   background: var(--main-color) !important;
  1096.   color: var(--button-text) !important;
  1097. }
  1098. [class*=footerButton]:hover {
  1099.   background: var(--main-color-selected) !important;
  1100.   color: var(--button-text-selected) !important;
  1101. }
  1102.  
  1103. [class^=listItem] > [class^=wrapper] > [class*=target]::before, [class^=listItem] > [class^=wrapper] > [class*=centerTarget]::before {
  1104.   background: var(--accent-color);
  1105. }
  1106.  
  1107. header h1[class^=name] {
  1108.   font-size: 18px;
  1109.   font-weight: bold;
  1110.   line-height: 55px;
  1111. }
  1112.  
  1113. [class^=sidebar] [class*=selected] header {
  1114.   background: transparent;
  1115. }
  1116.  
  1117. [class*=labelContainer] svg {
  1118.   transition: transform 0.2s ease-in-out;
  1119. }
  1120.  
  1121. [class*=labelContainer][class*=focused] {
  1122.   background: var(--main-color) !important;
  1123. }
  1124. [class*=labelContainer][class*=focused] svg {
  1125.   transform: scale(1.2);
  1126. }
  1127.  
  1128. [class*=tabBarItem]:hover {
  1129.   border-bottom-color: var(--main-color-selected) !important;
  1130. }
  1131.  
  1132. [class*=tabBarItem][class*=da-selected] {
  1133.   border-bottom-color: var(--main-color) !important;
  1134. }
  1135.  
  1136. [class*=sidebar] [class*=containerDefault] [class*=icon] {
  1137.   color: rgba(255, 255, 255, 0.6) !important;
  1138. }
  1139. [class*=sidebar] [class*=containerDefault] [class*=icon] > path {
  1140.   opacity: 0.6;
  1141. }
  1142. [class*=sidebar] [class*=containerDefault] [class*=icon] > path:last-of-type {
  1143.   opacity: 0.9;
  1144. }
  1145. [class*=sidebar] [class*=containerDefault] [class*=content]:hover {
  1146.   background: transparent !important;
  1147. }
  1148. [class*=sidebar] [class*=containerDefault] [class*=modeMuted] [class*=name] {
  1149.   color: rgba(255, 255, 255, 0.5);
  1150. }
  1151. [class*=sidebar] [class*=containerDefault] [class*=muted] [class*=name] {
  1152.   color: rgba(255, 255, 255, 0.5);
  1153. }
  1154. [class*=sidebar] [class*=containerDefault] [class*=modeSelected] [class*=link_] {
  1155.   background: var(--main-color-semitransparent-selected) !important;
  1156. }
  1157. [class*=sidebar] [class*=containerDefault] [class*=modeSelected] [class*=name_] {
  1158.   color: #ffffff !important;
  1159. }
  1160. [class*=sidebar] [class*=containerDefault]:hover [class*=modeSelected] [class*=link_] {
  1161.   background: var(--main-color-semitransparent-selected) !important;
  1162. }
  1163. [class*=sidebar] [class*=containerDefault] [class^=children] > [class^=icon]:nth-last-child(2) {
  1164.   display: none !important;
  1165. }
  1166.  
  1167. [data-list-item-id*=active-threads] [class*=name],
  1168. [data-list-item-id*=active-threads] [class*=icon] {
  1169.   color: var(--button-text) !important;
  1170. }
  1171.  
  1172. [class*=avatarSpeaking] {
  1173.   box-shadow: inset 0 0 0 2px var(--accent-color), inset 0 0 0 3px var(--accent-color-semitransparent);
  1174. }
  1175.  
  1176. [class*=avatarSpeaking]::before {
  1177.   content: "";
  1178.   z-index: -10 !important;
  1179.   position: absolute;
  1180.   left: 20px;
  1181.   height: 24px;
  1182.   width: 60%;
  1183.   border-radius: -5px;
  1184.   background: linear-gradient(to right, var(--accent-color-semitransparent), transparent);
  1185.   opacity: 1;
  1186.   border-color: transparent;
  1187.   filter: brightness(10);
  1188. }
  1189.  
  1190. [class*=userLimit] > [class*=wrapper] {
  1191.   border-radius: 5px !important;
  1192. }
  1193. [class*=userLimit] [class*=total] {
  1194.   color: var(--accent-saturated);
  1195.   background: rgba(0, 0, 0, 0.6) !important;
  1196. }
  1197. [class*=userLimit] [class*=total]::after {
  1198.   border-right-color: rgba(0, 0, 0, 0.4) !important;
  1199. }
  1200. [class*=userLimit] [class*=users] {
  1201.   color: var(--accent-color);
  1202.   background: rgba(0, 0, 0, 0.3) !important;
  1203. }
  1204.  
  1205. nav[class*=container] > [class*=container] > header:hover {
  1206.   background: transparent !important;
  1207. }
  1208.  
  1209. [class*=layer] [class*=animator] [class*=container][class*=scrollerBase] {
  1210.   background: rgba(0, 0, 0, 0.95) !important;
  1211. }
  1212.  
  1213. [class*=panels] {
  1214.   border-top: 1px solid var(--background-modifier-accent);
  1215.   background: transparent !important;
  1216. }
  1217. [class*=panels]::before {
  1218.   content: "";
  1219.   top: 0;
  1220.   right: 0;
  1221.   bottom: 0;
  1222.   left: 0;
  1223.   position: absolute;
  1224.   z-index: -2;
  1225.   background: var(--app-background) center/cover no-repeat fixed;
  1226.   background-position: unset;
  1227.   -webkit-animation: fadeIn 2s ease-out;
  1228.   animation: fadeIn 2s ease-out;
  1229. }
  1230. [class*=panels]::after {
  1231.   content: "";
  1232.   top: 0;
  1233.   right: 0;
  1234.   bottom: 0;
  1235.   left: 0;
  1236.   position: absolute;
  1237.   z-index: -1;
  1238.   background: rgba(0, 0, 0, 0.2);
  1239.   border-radius: 10px;
  1240. }
  1241. [class*=panels] > [class*=activityPanel], [class*=panels] > [class*=container] {
  1242.   border: 0;
  1243. }
  1244. [class*=panels] > [class*=activityPanel] button:hover, [class*=panels] > [class*=container] button:hover {
  1245.   background: rgba(0, 0, 0, 0.2) !important;
  1246. }
  1247. [class*=panels] > [class*=wrapper] > [class*=container] {
  1248.   border: 0;
  1249. }
  1250. [class*=panels] [class*=actionButtons] button {
  1251.   background: var(--main-color-semitransparent) !important;
  1252.   color: var(--button-text) !important;
  1253. }
  1254. [class*=panels] [class*=actionButtons] button:hover {
  1255.   background: var(--main-color-semitransparent-selected) !important;
  1256.   color: var(--button-text-selected) !important;
  1257. }
  1258.  
  1259. [class*=focusLock] [class*=modal] {
  1260.   background: rgba(0, 0, 0, 0.95) !important;
  1261. }
  1262. [class*=focusLock] [class*=modal] [class*=horizontalReverse] {
  1263.   background: rgba(0, 0, 0, 0.95) !important;
  1264. }
  1265. [class*=focusLock] [class*=modal] [class*=radioBar] > div:not([class*=info]) circle {
  1266.   fill: var(--main-color) !important;
  1267. }
  1268.  
  1269. [aria-label=GUILD_SETTINGS] [class^=sidebar] [class*=item]:hover {
  1270.   background: var(--main-color-semitransparent) !important;
  1271.   color: var(--button-text) !important;
  1272. }
  1273. [aria-label=GUILD_SETTINGS] [class^=sidebar] [class*=item][class*=selected] {
  1274.   background: var(--main-color-semitransparent-selected) !important;
  1275.   color: var(--button-text-selected) !important;
  1276. }
  1277.  
  1278. [class*=circleButton] {
  1279.   background-color: var(--main-color-semitransparent) !important;
  1280. }
  1281. [class*=circleButton]:hover {
  1282.   background-color: var(--main-color-semitransparent-selected) !important;
  1283. }
  1284.  
  1285. [class*=stickyHeaderElevated]::before {
  1286.   content: "";
  1287.   top: 0;
  1288.   right: 0;
  1289.   bottom: 0;
  1290.   left: 0;
  1291.   position: absolute;
  1292.   z-index: -1;
  1293.   background: var(--app-background) center/cover no-repeat fixed;
  1294.   background-position: unset;
  1295. }
  1296.  
  1297. [class^=content_] > [class^=emojiRow_][class*=card_] {
  1298.   background: transparent !important;
  1299. }
  1300.  
  1301. [class*=emojiRemove] {
  1302.   background-color: var(--main-color-semitransparent-selected) !important;
  1303. }
  1304.  
  1305. [class*=contentExpandContainer] [class*=header] [class*=backgroundModifierContainer],
  1306. [class*=contentExpandContainer] [class*=groupCollapsedContainer],
  1307. [class*=clickableContainer] [class*=backgroundModifierContainer] {
  1308.   background: rgba(0, 0, 0, 0.2) !important;
  1309. }
  1310.  
  1311. [class*=contentExpandContainer] [class*=selected] [class*=statusGreen] {
  1312.   background: rgba(0, 230, 77, 0.2) !important;
  1313. }
  1314.  
  1315. [class*=contentExpandContainer] [class*=selected] [class*=statusYellow] {
  1316.   background: rgba(255, 196, 0, 0.2) !important;
  1317. }
  1318.  
  1319. [class*=contentExpandContainer] [class*=selected] [class*=statusOrange] {
  1320.   background: rgba(242, 97, 0, 0.2) !important;
  1321. }
  1322.  
  1323. [class*=contentExpandContainer] [class*=selected] [class*=statusRed] {
  1324.   background: rgba(244, 40, 40, 0.2) !important;
  1325. }
  1326.  
  1327. [role=list] > [class*=auditLog] {
  1328.   border-color: #000 !important;
  1329. }
  1330. [role=list] > [class*=auditLog] > [class^=header] {
  1331.   background: rgba(0, 0, 0, 0.2) !important;
  1332. }
  1333. [role=list] > [class*=auditLog] > [class^=divider] {
  1334.   background: #000 !important;
  1335. }
  1336. [role=list] > [class*=auditLog] > [class*=changeDetails] {
  1337.   background: rgba(0, 0, 0, 0.2) !important;
  1338. }
  1339.  
  1340. [class*=revokeInvite] {
  1341.   background-color: var(--main-color-semitransparent-selected) !important;
  1342. }
  1343.  
  1344. div[class^=bannedUser_][class*=card_] {
  1345.   background: transparent !important;
  1346. }
  1347. div[class^=bannedUser_][class*=card_] span {
  1348.   color: rgba(255, 255, 255, 0.5) !important;
  1349. }
  1350.  
  1351. [class*=directoryModal] {
  1352.   background-image: var(--app-background) !important;
  1353. }
  1354. [class*=directoryModal] [class*=categoryList] > [class^=category],
  1355. [class*=directoryModal] [class^=list] > article,
  1356. [class*=directoryModal] [class^=itemsContainer] > [class^=itemContainer] {
  1357.   background-color: rgba(0, 0, 0, 0.1);
  1358. }
  1359.  
  1360. [class^=chat] > [class*=minimum] {
  1361.   background: rgba(0, 0, 0, 0.1) !important;
  1362. }
  1363.  
  1364. [class*=voiceCallWrapper_] [class*=border_][class*=speaking_],
  1365. [class^=tileChild_] [class*=border_][class*=speaking_] {
  1366.   box-shadow: inset 0 0 0 3px var(--accent-color), inset 0 0 0 4px #000;
  1367. }
  1368.  
  1369. [class^=callContainer] {
  1370.   background: transparent !important;
  1371. }
  1372.  
  1373. [id^=popout] [class^=popoutWrapper] > [class^=scroller] {
  1374.   background: rgba(0, 0, 0, 0.95) !important;
  1375. }
  1376.  
  1377. [class^=quickSelectPopout] {
  1378.   background: rgba(0, 0, 0, 0.95) !important;
  1379. }
  1380.  
  1381. button[class*=participantsButton] {
  1382.   background: rgba(0, 0, 0, 0.6) !important;
  1383.   color: var(--button-text) !important;
  1384.   transition: 0.2s all ease-in-out;
  1385. }
  1386. button[class*=participantsButton]:hover {
  1387.   background: rgba(0, 0, 0, 0.9) !important;
  1388.   color: var(--button-text-selected) !important;
  1389. }
  1390.  
  1391. [class^=liveQualityIndicator] {
  1392.   background: rgba(0, 0, 0, 0.95) !important;
  1393.   color: var(--button-text) !important;
  1394. }
  1395.  
  1396. [class^=liveIndicator] > [class^=live] {
  1397.   background: var(--main-color) !important;
  1398.   color: var(--button-text) !important;
  1399. }
  1400.  
  1401. [class^=tileChild_] button > [class*=button_] {
  1402.   background: rgba(0, 0, 0, 0.95);
  1403.   color: var(--button-text);
  1404. }
  1405. [class^=tileChild_] button > [class*=button_]:hover {
  1406.   color: var(--button-text-selected);
  1407. }
  1408.  
  1409. [class^=pictureInPictureVideo_] {
  1410.   background: rgba(0, 0, 0, 0.9) !important;
  1411. }
  1412.  
  1413. [class^=pictureInPictureVideo_] > span button > [class*=button_] {
  1414.   background: var(--main-color);
  1415.   color: var(--button-text);
  1416. }
  1417. [class^=pictureInPictureVideo_] > span button > [class*=button_]:hover {
  1418.   background: var(--main-color-selected);
  1419.   color: var(--button-text-selected);
  1420. }
  1421.  
  1422. [class^=emptyPreview_] {
  1423.   background: rgba(0, 0, 0, 0.3) !important;
  1424. }
  1425.  
  1426. [class^=wanderingCubesItem_] {
  1427.   background: var(--accent-color) !important;
  1428. }
  1429.  
  1430. [class^=tile_] {
  1431.   background: rgba(0, 0, 0, 0.3) !important;
  1432.   border-radius: 10px;
  1433. }
  1434.  
  1435. [class^=tileChild] > [class*=videoWrapper],
  1436. [class^=tileChild] > div:nth-child(2):not([class^=overlay]) {
  1437.   background: transparent !important;
  1438. }
  1439.  
  1440. [class*=tileSizer] [class*=tile] {
  1441.   background: transparent !important;
  1442. }
  1443. [class*=tileSizer] [class*=tile] button[class*=button] {
  1444.   background: var(--main-color);
  1445.   color: var(--button-text);
  1446. }
  1447. [class*=tileSizer] [class*=tile] button[class*=button]:hover {
  1448.   background: var(--main-color-selected);
  1449.   color: var(--button-text-selected);
  1450. }
  1451.  
  1452. [class^=videoControls] [class*=contextMenuNub],
  1453. [class^=videoControls] button[class*=centerButton] {
  1454.   background: rgba(0, 0, 0, 0.6) !important;
  1455.   transition: 0.2s all ease-in-out;
  1456. }
  1457. [class^=videoControls] [class*=contextMenuNub]:hover,
  1458. [class^=videoControls] button[class*=centerButton]:hover {
  1459.   background: rgba(0, 0, 0, 0.9) !important;
  1460. }
  1461. [class^=videoControls] [class*=contextMenuNub] svg,
  1462. [class^=videoControls] button[class*=centerButton] svg {
  1463.   color: var(--button-text-selected) !important;
  1464. }
  1465. [class^=videoControls] button[class*=red] {
  1466.   transition: 0.2s all ease-in-out;
  1467.   background: var(--main-color) !important;
  1468.   color: var(--button-text) !important;
  1469. }
  1470. [class^=videoControls] button[class*=red]:hover {
  1471.   background: var(--main-color-selected) !important;
  1472.   color: var(--button-text-selected) !important;
  1473. }
  1474. [class^=videoControls] > [class^=gradient] {
  1475.   background: transparent !important;
  1476. }
  1477. [class^=videoControls] [class*=topControls] [class*=headerWrapper] [class*=transparent][class*=container] {
  1478.   background: transparent !important;
  1479. }
  1480.  
  1481. [class*=content] [class*=pageWrapper] {
  1482.   background: transparent !important;
  1483. }
  1484.  
  1485. [class*=selectedCategoryItem] > div {
  1486.   background: var(--main-color) !important;
  1487. }
  1488.  
  1489. [class*=searchPage] > [class*=search] {
  1490.   background: rgba(0, 0, 0, 0.2) !important;
  1491. }
  1492. [class*=searchPage] > [class*=search] [class*=searchBox] {
  1493.   background: transparent !important;
  1494. }
  1495.  
  1496. [class*=categoryPill] > div {
  1497.   color: rgba(255, 255, 255, 0.5) !important;
  1498. }
  1499. [class*=categoryPill][class*=selected] {
  1500.   background: var(--main-color) !important;
  1501. }
  1502. [class*=categoryPill][class*=selected] > div {
  1503.   color: rgba(255, 255, 255, 0.8) !important;
  1504. }
  1505.  
  1506. .bd-server-splash {
  1507.   filter: none;
  1508. }
  1509.  
  1510. [class^=stageSection_] {
  1511.   background: transparent;
  1512. }
  1513.  
  1514. [class^=nowPlayingSidebar_] > [class^=container_] {
  1515.   background: transparent !important;
  1516. }
  1517.  
  1518. [class^=stageSection_] > [class^=container_] > [class^=container_] {
  1519.   background: rgba(0, 0, 0, 0.15);
  1520. }
  1521.  
  1522. [class^=stageSection_] > [class^=container_] > [class^=container_]:nth-last-child(2) {
  1523.   background: transparent !important;
  1524. }
  1525.  
  1526. [class^=guildInfoContainer_] > [class^=rightJustifiedContent_] > div {
  1527.   background: var(--main-color) !important;
  1528. }
  1529.  
  1530. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] {
  1531.   background: rgba(0, 0, 0, 0.95) !important;
  1532.   background-size: cover;
  1533. }
  1534. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class^=bodyInnerWrapper],
  1535. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class^=footer],
  1536. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class^=avatar] {
  1537.   background: transparent !important;
  1538.   border-color: transparent !important;
  1539. }
  1540. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class^=userPopoutOverlayBackground] {
  1541.   background: rgba(0, 0, 0, 0.2);
  1542. }
  1543. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class^=bodyInnerWrapper] > [class*=divider] {
  1544.   display: none;
  1545. }
  1546. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] #permissions-popout,
  1547. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] h1:not([class*=nickname], [class*=ellipsis]),
  1548. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class*=rolesList]:not([class*=member-perm]),
  1549. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class*=memberSinceContainer],
  1550. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class*=textarea],
  1551. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] div[class*=customStatus],
  1552. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class*=userInfoBody][class*=markup] {
  1553.   padding-left: 16px;
  1554.   padding-right: 16px;
  1555. }
  1556. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class*=bodyTitle] {
  1557.   margin-top: 8px;
  1558.   color: var(--header-secondary);
  1559. }
  1560. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class*=userInfoSection] {
  1561.   margin-top: 20px;
  1562. }
  1563. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class*=member-perms-title] {
  1564.   text-transform: uppercase;
  1565.   margin-bottom: 8px;
  1566.   font-weight: 700;
  1567.   font-size: 12px;
  1568.   line-height: 16px;
  1569. }
  1570. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [role=tooltip] [class*=biteSize][class*=outer] {
  1571.   border: none;
  1572. }
  1573. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [role=tooltip] [class*=biteSize][class*=outer] [class*=inner], :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [role=tooltip] [class*=biteSize][class*=outer]:after, :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [role=tooltip] [class*=biteSize][class*=outer]:before {
  1574.   background: var(--main-color);
  1575.   background: var(--profile-background), rgba(0, 0, 0, 0.95) !important;
  1576.   border: none;
  1577. }
  1578. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class*=roles] > [class*=role] {
  1579.   position: relative;
  1580.   margin: 0 -20px 4px 0;
  1581.   background: transparent;
  1582.   border-color: transparent;
  1583. }
  1584. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class*=roles] > [class*=role] [class*=roleRemoveButton] {
  1585.   cursor: pointer;
  1586.   position: unset;
  1587.   width: 20px;
  1588.   height: 10px;
  1589. }
  1590. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class*=roles] > [class*=role] [class*=roleRemoveButton] svg {
  1591.   opacity: 0;
  1592. }
  1593. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class*=roles] > [class*=role] [class*=roleCircle] {
  1594.   position: absolute;
  1595.   width: calc(100% - 28px);
  1596.   margin: 0;
  1597.   border-radius: 4px;
  1598.   z-index: 1;
  1599.   opacity: 0.3;
  1600.   transform: scaleY(1.5);
  1601.   pointer-events: none;
  1602. }
  1603. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class*=roles] > [class*=role] [class*=roleName] {
  1604.   z-index: 2;
  1605.   margin-left: 4px;
  1606.   margin-right: 8px;
  1607.   transform: translateX(-8px);
  1608.   -webkit-transition: transform 0.15s ease-in-out;
  1609.   transition: transform 0.15s ease-in-out;
  1610.   overflow: visible;
  1611. }
  1612. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class*=roles] > [class*=role] [class*=roleName]::before {
  1613.   content: "";
  1614.   position: absolute;
  1615.   width: 0;
  1616.   height: 10px;
  1617.   top: 50%;
  1618.   left: 0;
  1619.   transform: translate(-16px, -50%);
  1620.   -webkit-transition: width 0.15s ease-in-out;
  1621.   transition: width 0.15s ease-in-out;
  1622.   pointer-events: none;
  1623. }
  1624. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class*=roles] > [class*=role]:hover [class*=roleName] {
  1625.   transform: translateX(-4px);
  1626. }
  1627. :not(.custom-profile-theme)[class*=biteSize] [class*=inner] [class*=roles] > [class*=role]:hover [class*=roleName]::before {
  1628.   width: 10px;
  1629.   background: url(https://przemec.github.io/Novum/assets/icons/close.svg);
  1630.   background-size: 10px;
  1631. }
  1632.  
  1633. [class*=profileBanner_] {
  1634.   background: rgba(0, 0, 0, 0.95) !important;
  1635. }
  1636.  
  1637. [class*=popoutBanner]:not([class*=BannerPremium])[style] {
  1638.   background: transparent !important;
  1639. }
  1640.  
  1641. :not(.custom-profile-theme)[style*=profile] [class*=activity] {
  1642.   background: var(--profile-activity) !important;
  1643.   margin-top: 40px;
  1644.   margin-bottom: 40px;
  1645.   padding-left: 16px;
  1646.   padding-right: 16px;
  1647.   border-radius: 0;
  1648. }
  1649. :not(.custom-profile-theme)[style*=profile] [class*=activity] [class*=platformIcon] {
  1650.   right: 16px !important;
  1651. }
  1652. :not(.custom-profile-theme)[style*=profile] [class*=activity] button {
  1653.   background: var(--main-color) !important;
  1654.   color: var(--button-text) !important;
  1655. }
  1656. :not(.custom-profile-theme)[style*=profile] [class*=activity] button:hover {
  1657.   background: var(--main-color-selected) !important;
  1658.   color: var(--button-text-selected) !important;
  1659. }
  1660. :not(.custom-profile-theme)[style*=profile] [class*=activity] [class^=bar_] {
  1661.   background: rgba(0, 0, 0, 0.2) !important;
  1662. }
  1663. :not(.custom-profile-theme)[style*=profile] [class*=activity]::before {
  1664.   content: "";
  1665.   position: absolute;
  1666.   height: 21px;
  1667.   z-index: 1;
  1668.   width: 100%;
  1669.   top: -20px;
  1670.   left: 0;
  1671.   background: var(--profile-activity);
  1672.   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="268" height="21" viewBox="0 0 268 21"><path d="M0 21V7.19143C0 7.19143 35.3844 -2.31216 79.4578 0.530784C126.044 1.7492 142.689 13.564 202.466 14.5019C242.561 14.5019 268 7.35388 268 7.35388V21H0Z"/></svg>');
  1673.   -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="268" height="21" viewBox="0 0 268 21"><path d="M0 21V7.19143C0 7.19143 35.3844 -2.31216 79.4578 0.530784C126.044 1.7492 142.689 13.564 202.466 14.5019C242.561 14.5019 268 7.35388 268 7.35388V21H0Z"/></svg>');
  1674.   animation: animate2 8s linear infinite;
  1675.   animation-delay: 0s;
  1676.   opacity: 1;
  1677. }
  1678. :not(.custom-profile-theme)[style*=profile] [class*=activity]::after {
  1679.   content: "";
  1680.   position: absolute;
  1681.   height: 21px;
  1682.   z-index: 1;
  1683.   width: 100%;
  1684.   bottom: -20px;
  1685.   left: 0;
  1686.   background: var(--profile-activity);
  1687.   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="268" height="21" viewBox="0 0 268 21"><path d="M0 21V7.19143C0 7.19143 35.3844 -2.31216 79.4578 0.530784C126.044 1.7492 142.689 13.564 202.466 14.5019C242.561 14.5019 268 7.35388 268 7.35388V21H0Z"/></svg>');
  1688.   -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="268" height="21" viewBox="0 0 268 21"><path d="M0 21V7.19143C0 7.19143 35.3844 -2.31216 79.4578 0.530784C126.044 1.7492 142.689 13.564 202.466 14.5019C242.561 14.5019 268 7.35388 268 7.35388V21H0Z"/></svg>');
  1689.   animation: animate2 8s linear infinite;
  1690.   animation-delay: 0s;
  1691.   opacity: 1;
  1692.   transform: rotate(-180deg);
  1693. }
  1694. @keyframes animate2 {
  1695.   0% {
  1696.     -webkit-mask-position-x: 268px;
  1697.   }
  1698.   100% {
  1699.     -webkit-mask-position-x: 0;
  1700.   }
  1701. }
  1702.  
  1703. [class^=activityUserPopout_] > [class^=horizontal_] > button {
  1704.   background: var(--main-color) !important;
  1705. }
  1706.  
  1707. [class^=statusBubble], [class^=statusBubble]::before, [class^=statusBubble]::after {
  1708.   background: rgb(0, 0, 0) !important;
  1709. }
  1710.  
  1711. [class*=fullSize][class*=inner] {
  1712.   background: transparent !important;
  1713. }
  1714. [class*=fullSize][class*=inner] [class^=body][class^=body][class^=body],
  1715. [class*=fullSize][class*=inner] [class^=root][class^=root] {
  1716.   background: transparent !important;
  1717. }
  1718. [class*=fullSize][class*=inner] [class^=overlay] {
  1719.   background: rgba(0, 0, 0, 0.2) !important;
  1720. }
  1721.  
  1722. :not([class*=custom-profile-theme]) > [class^=userProfileModalInner] {
  1723.   background: rgba(0, 0, 0, 0.95) !important;
  1724. }
  1725.  
  1726. [class*=member] [class*=activityText] {
  1727.   color: rgba(255, 255, 255, 0.5) !important;
  1728. }
  1729.  
  1730. [class*=members] {
  1731.   background: transparent;
  1732. }
  1733.  
  1734. .bd-error-modal,
  1735. .bd-error-modal-footer {
  1736.   background: rgba(0, 0, 0, 0.9) !important;
  1737.   box-shadow: none !important;
  1738. }
  1739.  
  1740. .bd-tab-bar .bd-tab-item.selected {
  1741.   background: var(--main-color);
  1742. }
  1743.  
  1744. .bd-addon-error {
  1745.   background: transparent !important;
  1746. }
  1747.  
  1748. .bd-addon-error-icon {
  1749.   background: var(--main-color);
  1750. }
  1751.  
  1752. .bd-settings-title {
  1753.   color: rgba(255, 255, 255, 0.9);
  1754.   font-weight: bold;
  1755. }
  1756.  
  1757. .bd-toast:not([class*=success]) {
  1758.   background: rgba(0, 0, 0, 0.9) !important;
  1759. }
  1760.  
  1761. .bd-button:not(.bd-addon-button):not(.bd-changelog-button) {
  1762.   background: var(--main-color);
  1763.   color: var(--button-text);
  1764. }
  1765. .bd-button:not(.bd-addon-button):not(.bd-changelog-button):hover {
  1766.   background: var(--main-color-selected);
  1767.   color: var(--button-text-selected);
  1768. }
  1769.  
  1770. .bd-switch-body {
  1771.   background: var(--accent-color-semitransparent) !important;
  1772. }
  1773.  
  1774. .bd-switch-checked .bd-switch-body {
  1775.   background: var(--main-color) !important;
  1776. }
  1777. .bd-switch-checked .bd-switch-body path {
  1778.   fill: var(--main-color);
  1779. }
  1780.  
  1781. .bd-addon-views > button {
  1782.   background: transparent !important;
  1783. }
  1784.  
  1785. .bd-addon-views > button.selected {
  1786.   background: var(--main-color-selected) !important;
  1787. }
  1788.  
  1789. .bd-addon-card {
  1790.   background: rgba(0, 0, 0, 0.2) !important;
  1791. }
  1792.  
  1793. .bd-addon-button {
  1794.   background: transparent !important;
  1795. }
  1796.  
  1797. .bd-controls > .bd-addon-button:last-of-type {
  1798.   margin-left: 10px;
  1799. }
  1800.  
  1801. [role=radiogroup] [aria-checked=true] [style*=green] {
  1802.   background: rgba(0, 230, 77, 0.2) !important;
  1803. }
  1804.  
  1805. [role=radiogroup] [aria-checked=true] [style*=yellow] {
  1806.   background: rgba(255, 153, 0, 0.2) !important;
  1807. }
  1808.  
  1809. [role=radiogroup] [aria-checked=true] [style*=red] {
  1810.   background: rgba(244, 40, 40, 0.2) !important;
  1811. }
  1812.  
  1813. [role=radiogroup] > [class*=item] {
  1814.   background: rgba(0, 0, 0, 0.1);
  1815. }
  1816. [role=radiogroup] > [class*=item]:hover {
  1817.   background: rgba(0, 0, 0, 0.2);
  1818. }
  1819. [role=radiogroup] > [class*=item][aria-checked=true] {
  1820.   background: rgba(0, 0, 0, 0.4);
  1821. }
  1822. [role=radiogroup] > [class*=item][aria-checked=true] [class*=radioBar] div:not([class*=info]) circle {
  1823.   fill: rgb(255, 255, 255);
  1824. }
  1825.  
  1826. [class^=session] > [class^=sessionIcon] {
  1827.   background: rgba(0, 0, 0, 0.1) !important;
  1828.   color: rgba(255, 255, 255, 0.7) !important;
  1829. }
  1830.  
  1831. [class^=connectedAccounts] > [class^=wrapper] {
  1832.   background: rgba(0, 0, 0, 0.3) !important;
  1833.   border: 1px solid #000000 !important;
  1834.   border-radius: 5px;
  1835.   transition: transform 200ms ease-in-out;
  1836. }
  1837. [class^=connectedAccounts] > [class^=wrapper]:hover {
  1838.   transform: scale(1.05);
  1839.   background: rgba(0, 0, 0, 0.8) !important;
  1840. }
  1841.  
  1842. [class^=connectionList] > [class^=connection] {
  1843.   background: rgba(0, 0, 0, 0.3) !important;
  1844.   border: 1px solid #000000 !important;
  1845.   border-radius: 10px;
  1846. }
  1847.  
  1848. [class^=slider_] > [class^=track_] > [class^=mark_] [class^=markValue_] {
  1849.   color: rgba(255, 255, 255, 0.5) !important;
  1850. }
  1851. [class^=slider_] > [class^=track_] > [class^=mark_] [class^=markDash_] {
  1852.   background: rgba(255, 255, 255, 0.5) !important;
  1853. }
  1854.  
  1855. [class*=keybindGroup] button {
  1856.   background: var(--main-color) !important;
  1857.   color: var(--button-text) !important;
  1858. }
  1859. [class*=keybindGroup] button:hover {
  1860.   background: var(--main-color-selected) !important;
  1861.   color: var(--button-text-selected) !important;
  1862. }
  1863.  
  1864. [class*=removeKeybind] {
  1865.   background-color: var(--main-color-selected);
  1866. }
  1867.  
  1868. [class^=children_] [class*=notDetected_] {
  1869.   background: rgba(0, 0, 0, 0.3) !important;
  1870. }
  1871.  
  1872. [class^=children_] [class*=nowPlaying_] {
  1873.   background: rgba(0, 255, 128, 0.2) !important;
  1874. }
  1875.  
  1876. [class^=addGamePopout_] {
  1877.   background: rgba(0, 0, 0, 0.9) !important;
  1878.   box-shadow: none !important;
  1879. }
  1880.  
  1881. [id^=popout] [class*=searchableSelect] {
  1882.   background: rgba(0, 0, 0, 0.95) !important;
  1883.   box-shadow: none !important;
  1884. }
  1885.  
  1886. [class^=lastPlayed_] {
  1887.   color: rgba(255, 255, 255, 0.5) !important;
  1888. }
  1889.  
  1890. [class^=overlayToggleIconOn_] path {
  1891.   fill: rgba(255, 255, 255, 0.5) !important;
  1892. }
  1893.  
  1894. [class^=overlayToggleIconOff_] path,
  1895. [class^=overlayToggleIconOff_] rect {
  1896.   fill: var(--main-color) !important;
  1897. }
  1898.  
  1899. [class*=removeGame] {
  1900.   background-color: var(--main-color-semitransparent-selected) !important;
  1901. }
  1902.  
  1903. [class^=overlayStatusText_] {
  1904.   color: rgba(255, 255, 255, 0.5) !important;
  1905. }
  1906.  
  1907. [class*=notificationSettings] label:not([class*=selected], [class*=disabled]) {
  1908.   background: rgba(255, 255, 255, 0.5);
  1909. }
  1910. [class*=notificationSettings] label:not([class*=selected], [class*=disabled]):hover {
  1911.   background: rgba(255, 255, 255, 0.7);
  1912. }
  1913. [class*=notificationSettings] label[class*=selected]:not([class*=disabled]) {
  1914.   background: var(--main-color);
  1915.   border-color: transparent;
  1916.   box-shadow: none;
  1917. }
  1918. [class*=notificationSettings] [class*=disabledSelected] {
  1919.   border-color: var(--main-color) !important;
  1920. }
  1921. [class*=notificationSettings] label[class*=disabled] path:last-child {
  1922.   fill: rgba(255, 255, 255, 0.5);
  1923. }
  1924. [class*=notificationSettings] label[class*=disabled]:hover path:last-child {
  1925.   fill: rgba(255, 255, 255, 0.7);
  1926. }
  1927. [class*=notificationSettings] label[class*=selected][class*=disabled] path:last-child {
  1928.   fill: var(--main-color) !important;
  1929. }
  1930.  
  1931. [class*=accountProfileCard] {
  1932.   background: var(--profile-background), rgba(0, 0, 0, 0.95) !important;
  1933. }
  1934. [class*=accountProfileCard] [class*=fieldButton_] {
  1935.   background: var(--main-color) !important;
  1936.   color: var(--button-text) !important;
  1937. }
  1938. [class*=accountProfileCard] [class*=fieldButton_]:hover {
  1939.   background: var(--main-color-selected) !important;
  1940.   color: var(--button-text-selected) !important;
  1941. }
  1942.  
  1943. [class*=profileBannerPreview] {
  1944.   background: var(--profile-background), rgba(0, 0, 0, 0.95) !important;
  1945. }
  1946.  
  1947. [class^=standardSidebarView] > [class^=sidebarRegion] [class^=info_] > * {
  1948.   color: rgba(255, 255, 255, 0.5);
  1949. }
  1950.  
  1951. [class^=standardSidebarView] > [class^=sidebarRegion] [class^=sidebar_] [class*=item][class*=bd], [class^=standardSidebarView] > [class^=sidebarRegion] [class^=sidebar_] [class*=item][aria-controls] {
  1952.   padding-left: 50px !important;
  1953. }
  1954. [class^=standardSidebarView] > [class^=sidebarRegion] [class^=sidebar_] [class*=item]:hover {
  1955.   background: var(--main-color-semitransparent) !important;
  1956.   color: var(--button-text) !important;
  1957. }
  1958. [class^=standardSidebarView] > [class^=sidebarRegion] [class^=sidebar_] [class*=item][class*=selected] {
  1959.   background: var(--main-color-semitransparent-selected) !important;
  1960.   color: var(--button-text-selected) !important;
  1961. }
  1962. [class^=standardSidebarView] > [class^=sidebarRegion] [class^=sidebar_] [class*=item][aria-controls=discord-nitro-tab] svg {
  1963.   display: none;
  1964. }
  1965. [class^=standardSidebarView] > [class^=sidebarRegion] [class^=sidebar_] [class*=item] [class*=selectedBackground] {
  1966.   background: transparent !important;
  1967. }
  1968.  
  1969. [class^=standardSidebarView] > [class^=sidebarRegion] [class^=sidebar_] [class*=item]::after {
  1970.   content: "";
  1971.   position: absolute;
  1972.   width: 24px;
  1973.   height: 24px;
  1974.   left: 15px;
  1975.   top: 50%;
  1976.   transform: translateY(-50%);
  1977.   opacity: 0.3;
  1978.   -webkit-transition: all 0.15s ease-in-out;
  1979.   transition: all 0.15s ease-in-out;
  1980.   background-size: cover !important;
  1981. }
  1982.  
  1983. [class^=standardSidebarView] > [class^=sidebarRegion] [class^=sidebar_] [class*=selected]::after {
  1984.   opacity: 0.7;
  1985. }
  1986.  
  1987. [aria-controls=my-account-tab]::after {
  1988.   background: url(https://przemec.github.io/Novum/assets/icons/person.svg) !important;
  1989. }
  1990.  
  1991. [aria-controls=profile-customization-tab]::after {
  1992.   background: url(https://przemec.github.io/Novum/assets/icons/person-box.svg) !important;
  1993. }
  1994.  
  1995. [aria-controls="privacy-&-safety-tab"]::after {
  1996.   background: url(https://przemec.github.io/Novum/assets/icons/security.svg) !important;
  1997. }
  1998.  
  1999. [aria-controls=authorized-apps-tab]::after {
  2000.   background: url(https://przemec.github.io/Novum/assets/icons/apps.svg) !important;
  2001. }
  2002.  
  2003. [aria-controls=sessions-tab]::after {
  2004.   background: url(https://przemec.github.io/Novum/assets/icons/desktop_windows.svg) !important;
  2005. }
  2006.  
  2007. [aria-controls=connections-tab]::after {
  2008.   background: url(https://przemec.github.io/Novum/assets/icons/link.svg) !important;
  2009. }
  2010.  
  2011. [aria-controls=friend-requests-tab]::after {
  2012.   background: url(https://przemec.github.io/Novum/assets/icons/emote.svg) !important;
  2013. }
  2014.  
  2015. [aria-controls=discord-nitro-tab]::after {
  2016.   background: url(https://przemec.github.io/Novum/assets/icons/nitro.svg) !important;
  2017. }
  2018.  
  2019. [aria-controls=nitro-server-boost-tab]::after {
  2020.   background: url(https://przemec.github.io/Novum/assets/icons/server_boost.svg) !important;
  2021. }
  2022.  
  2023. [aria-controls=subscriptions-tab]::after {
  2024.   background: url(https://przemec.github.io/Novum/assets/icons/cash.svg) !important;
  2025. }
  2026.  
  2027. [aria-controls=library-inventory-tab]::after {
  2028.   background: url(https://przemec.github.io/Novum/assets/icons/gift.svg) !important;
  2029. }
  2030.  
  2031. [aria-controls=billing-tab]::after {
  2032.   background: url(https://przemec.github.io/Novum/assets/icons/Credit_card.svg) !important;
  2033. }
  2034.  
  2035. [aria-controls=appearance-tab]::after {
  2036.   background: url(https://przemec.github.io/Novum/assets/icons/looks.svg) !important;
  2037. }
  2038.  
  2039. [aria-controls=accessibility-tab]::after {
  2040.   background: url(https://przemec.github.io/Novum/assets/icons/human.svg) !important;
  2041. }
  2042.  
  2043. [aria-controls="voice-&-video-tab"]::after {
  2044.   background: url(https://przemec.github.io/Novum/assets/icons/mic.svg) !important;
  2045. }
  2046.  
  2047. [aria-controls="text-&-images-tab"]::after {
  2048.   background: url(https://przemec.github.io/Novum/assets/icons/chat.svg) !important;
  2049. }
  2050.  
  2051. [aria-controls=notifications-tab]::after {
  2052.   background: url(https://przemec.github.io/Novum/assets/icons/notifications.svg) !important;
  2053. }
  2054.  
  2055. [aria-controls=keybinds-tab]::after {
  2056.   background: url(https://przemec.github.io/Novum/assets/icons/keyboard.svg) !important;
  2057. }
  2058.  
  2059. [aria-controls=language-tab]::after {
  2060.   background: url(https://przemec.github.io/Novum/assets/icons/language.svg) !important;
  2061. }
  2062.  
  2063. [aria-controls=windows-tab]::after {
  2064.   background: url(https://przemec.github.io/Novum/assets/icons/windows.svg) !important;
  2065. }
  2066.  
  2067. [aria-controls=streamer-mode-tab]::after {
  2068.   background: url(https://przemec.github.io/Novum/assets/icons/videocam.svg) !important;
  2069. }
  2070.  
  2071. [aria-controls=advanced-tab]::after {
  2072.   background: url(https://przemec.github.io/Novum/assets/icons/dots.svg) !important;
  2073. }
  2074.  
  2075. [aria-controls=activity-privacy-tab]::after {
  2076.   background: url(https://przemec.github.io/Novum/assets/icons/security.svg) !important;
  2077. }
  2078.  
  2079. [aria-controls=game-activity-tab]::after {
  2080.   background: url(https://przemec.github.io/Novum/assets/icons/gamepad.svg) !important;
  2081. }
  2082.  
  2083. [aria-controls=overlay-tab]::after {
  2084.   background: url(https://przemec.github.io/Novum/assets/icons/desktop_windows.svg) !important;
  2085. }
  2086.  
  2087. .bd-settings-tab::after {
  2088.   background: url(https://przemec.github.io/Novum/assets/icons/betterdiscord.svg) !important;
  2089. }
  2090.  
  2091. .bd-emotes-tab::after {
  2092.   background: url(https://przemec.github.io/Novum/assets/icons/emote.svg) !important;
  2093. }
  2094.  
  2095. .bd-updates-tab::after {
  2096.   background: url(https://przemec.github.io/Novum/assets/icons/history.svg) !important;
  2097. }
  2098.  
  2099. .bd-customcss-tab::after {
  2100.   background: url(https://przemec.github.io/Novum/assets/icons/code.svg) !important;
  2101. }
  2102.  
  2103. .bd-plugins-tab::after {
  2104.   background: url(https://przemec.github.io/Novum/assets/icons/puzzle.svg) !important;
  2105. }
  2106.  
  2107. .bd-themes-tab::after {
  2108.   background: url(https://przemec.github.io/Novum/assets/icons/palette.svg) !important;
  2109. }
  2110.  
  2111. [aria-controls=changelog-tab]::after {
  2112.   background: url(https://przemec.github.io/Novum/assets/icons/history.svg) !important;
  2113. }
  2114.  
  2115. [aria-controls=hypesquad-online-tab]::after {
  2116.   background: url(https://przemec.github.io/Novum/assets/icons/hypesquad.svg) !important;
  2117. }
  2118.  
  2119. [aria-controls=logout-tab]::after {
  2120.   background: url(https://przemec.github.io/Novum/assets/icons/exit.svg) !important;
  2121. }
  2122.  
  2123. [class*=base] [class*=content] [class*=container]:not([class*=embedWrapper]),
  2124. [class*=base] [class*=content] [class*=container] [class*=tabBody] {
  2125.   background: transparent;
  2126. }
  2127.  
  2128. [class*=base] [class*=content] [class*=container]:not([class*=embedWrapper]) [class*=container] > [class*=children]::after {
  2129.   display: none;
  2130. }
  2131. [class*=base] [class*=content] [class*=container]:not([class*=embedWrapper]) [class*=iconWrapper] svg {
  2132.   color: rgba(255, 255, 255, 0.7);
  2133. }
  2134. [class*=base] [class*=content] [class*=container]:not([class*=embedWrapper]) [class*=divider] {
  2135.   background-color: rgba(255, 255, 255, 0.1);
  2136. }
  2137. [class*=base] [class*=content] [class*=container]:not([class*=embedWrapper]) [class^=item][tabindex="0"] {
  2138.   background: transparent;
  2139.   font-size: 17px;
  2140. }
  2141. [class*=base] [class*=content] [class*=container]:not([class*=embedWrapper]) [class^=item]:not([tabindex="0"]):hover {
  2142.   background: transparent;
  2143. }
  2144. [class*=base] [class*=content] [class*=container]:not([class*=embedWrapper]) [class^=item][class*=addFriend] {
  2145.   background: rgba(0, 255, 128, 0.1) !important;
  2146.   color: rgba(0, 255, 128, 0.7) !important;
  2147. }
  2148. [class*=base] [class*=content] [class*=container]:not([class*=embedWrapper]) [class^=item][class*=addFriend]:hover, [class*=base] [class*=content] [class*=container]:not([class*=embedWrapper]) [class^=item][class*=addFriend][class*=selected] {
  2149.   background: rgba(0, 255, 128, 0.2) !important;
  2150.   color: rgba(0, 255, 128, 0.9) !important;
  2151. }
  2152. [class*=base] [class*=content] [class*=container]:not([class*=embedWrapper]) [class^=searchBar] > [class^=inner] {
  2153.   background: rgba(0, 0, 0, 0.2);
  2154. }
  2155. [class*=base] [class*=content] [class*=container]:not([class*=embedWrapper]) [class^=addFriendInputWrapper] {
  2156.   background: rgba(0, 0, 0, 0.4);
  2157.   border-color: rgba(0, 0, 0, 0.9);
  2158. }
  2159. [class*=base] [class*=content] [class*=container]:not([class*=embedWrapper]) [class^=addFriendInputWrapper] button {
  2160.   background: var(--main-color);
  2161.   color: var(--button-text);
  2162. }
  2163. [class*=base] [class*=content] [class*=container]:not([class*=embedWrapper]) [class^=addFriendInputWrapper] button:hover {
  2164.   background: var(--main-color-selected);
  2165.   color: var(--button-text-selected);
  2166. }
  2167.  
  2168. [class*=nowPlayingColumn] [class^=scroller] {
  2169.   border: 0;
  2170. }
  2171. [class*=nowPlayingColumn] [class*=itemCard] {
  2172.   border: 0;
  2173.   background: rgba(0, 0, 0, 0.5) !important;
  2174. }
  2175. [class*=nowPlayingColumn] [class*=itemCard] [class*=body] {
  2176.   background: transparent !important;
  2177. }
  2178. [class*=nowPlayingColumn] [class*=itemCard] [class*=body] [class*=separator] {
  2179.   display: none;
  2180. }
  2181.  
  2182. [class^=content] > [class^=sidebar] [class^=privateChannels] {
  2183.   background: transparent;
  2184. }
  2185.  
  2186. [class^=content] > [class^=channel] [class^=interactive]:hover {
  2187.   background: var(--main-color-semitransparent);
  2188.   color: var(--button-text);
  2189. }
  2190.  
  2191. [class^=content] > [class^=channel] [class^=interactive][class*=selected] {
  2192.   background: var(--main-color-semitransparent-selected);
  2193.   color: var(--button-text-selected);
  2194. }
  2195.  
  2196. [class*=applicationStore] {
  2197.   background: transparent !important;
  2198. }
  2199. [class*=applicationStore] button {
  2200.   background: var(--main-color) !important;
  2201.   color: var(--button-text) !important;
  2202. }
  2203. [class*=applicationStore] button:hover {
  2204.   background: var(--main-color-selected) !important;
  2205.   color: var(--button-text-selected) !important;
  2206. }
  2207. [class*=applicationStore] [class^=marketingRefreshSectionTier] {
  2208.   background: transparent !important;
  2209. }
  2210. [class*=applicationStore] [class^=feature] > li[class^=feature] {
  2211.   background: rgba(0, 0, 0, 0.3);
  2212. }
  2213.  
  2214. [class^=perksModal_] {
  2215.   background: transparent !important;
  2216. }
  2217.  
  2218. [class^=progressBar] > [class^=barBackground] {
  2219.   background: var(--main-color) !important;
  2220. }
  2221.  
  2222. [class^=tierMarkerGroup] > [class*=tierMarkerBackground] {
  2223.   background: var(--main-color) !important;
  2224. }
  2225.  
  2226. [class^=tierMarkerGroup] [class*=tierMarkerInProgress] {
  2227.   background: var(--main-color-selected) !important;
  2228. }
  2229.  
  2230. [class^=carousel] [class^=tier_] {
  2231.   background: var(--profile-background), rgba(0, 0, 0, 0.95) !important;
  2232. }
  2233. [class^=carousel] [class^=tier_] [class*=tierHeader] {
  2234.   background: rgba(0, 0, 0, 0.1) !important;
  2235. }
  2236. [class^=carousel] [class^=tier_] [class*=tierHeaderLocked] path {
  2237.   fill: rgba(255, 255, 255, 0.5);
  2238. }
  2239. [class^=carousel] [class^=tier_] [class*=tierBody] {
  2240.   background: transparent !important;
  2241. }
  2242.  
  2243. [class^=perks] > li[class^=perk] {
  2244.   background: rgba(0, 0, 0, 0.3);
  2245. }
  2246.  
  2247. [class^=progress] rect[class^=background] {
  2248.   fill: var(--scroll-thumb-color);
  2249. }
  2250.  
  2251. [class^=progress] [class*=tierInProgress] {
  2252.   background: var(--scroll-thumb-color);
  2253. }
  2254.  
  2255. [class^=tiers] > [class^=tier_] {
  2256.   background: var(--profile-background), rgba(0, 0, 0, 0.95) !important;
  2257. }
  2258. [class^=tiers] > [class^=tier_] [class*=tierHeader] {
  2259.   background: rgba(0, 0, 0, 0.1) !important;
  2260. }
  2261. [class^=tiers] > [class^=tier_] [class*=tierHeaderLocked] path {
  2262.   fill: rgba(255, 255, 255, 0.5);
  2263. }
  2264. [class^=tiers] > [class^=tier_] [class*=tierBody] {
  2265.   background: transparent !important;
  2266. }
  2267.  
  2268. #permissions-modal {
  2269.   background: rgba(0, 0, 0, 0.9) !important;
  2270. }
  2271. #permissions-modal div {
  2272.   background: rgba(0, 0, 0, 0.9) !important;
  2273. }
  2274. #permissions-modal div div {
  2275.   background: rgba(0, 0, 0, 0.9) !important;
  2276. }
  2277.  
  2278. .ChannelDms-channelpopout-popout {
  2279.   background: rgba(0, 0, 0, 0.95) !important;
  2280. }
  2281. .ChannelDms-channelpopout-popout > [role=button] {
  2282.   background-color: var(--main-color-semitransparent-selected) !important;
  2283. }
  2284. .ChannelDms-channelpopout-popout > button {
  2285.   background: rgba(0, 0, 0, 0.95) !important;
  2286.   border-radius: 5px !important;
  2287. }
  2288.  
  2289. .ChannelDms-channelmembers-wrap > [class*=header] {
  2290.   background: rgba(0, 0, 0, 0.1) !important;
  2291. }
  2292.  
  2293. [class*=messagesWrapper] [class*=topicsPillContainer]::before,
  2294. [class*=messagesWrapper] [class*=newTopicsBarContainer]::before {
  2295.   content: "";
  2296.   top: 0;
  2297.   right: 0;
  2298.   bottom: 0;
  2299.   left: 0;
  2300.   position: absolute;
  2301.   z-index: -1;
  2302.   background: var(--app-background) center/cover no-repeat fixed;
  2303.   background-position: unset;
  2304.   -webkit-animation: fadeIn 2s ease-out;
  2305.   animation: fadeIn 2s ease-out;
  2306. }
  2307. [class*=messagesWrapper] [class*=topicsDropdown] {
  2308.   background: rgba(0, 0, 0, 0.95) !important;
  2309. }
  2310. [class*=messagesWrapper] [class*=summariesBetaTag] {
  2311.   background: var(--main-color) !important;
  2312. }
  2313.  
  2314. .vc-notification-root {
  2315.   background: rgba(0, 0, 0, 0.5);
  2316. }
  2317.  
  2318. [class*=app] [class*=authBox] {
  2319.   background: rgba(0, 0, 0, 0.5);
  2320. }
  2321.  
  2322. [class*=badgeContainer] {
  2323.   background: rgba(0, 0, 0, 0.2);
  2324. }
  2325.  
  2326. [class*=numberBadge] {
  2327.   background: var(--main-color) !important;
  2328. }
  2329.  
  2330. [class^=live_][class*=textBadge] {
  2331.   background: var(--main-color-selected) !important;
  2332.   color: var(--button-text) !important;
  2333. }
  2334.  
  2335. [class^=akaBadge_] {
  2336.   background: var(--main-color) !important;
  2337.   color: var(--button-text) !important;
  2338. }
  2339.  
  2340. [class*=iconBadge] {
  2341.   background: var(--main-color) !important;
  2342. }
  2343.  
  2344. [class*=newChannel][class*=textBadge] {
  2345.   background: var(--main-color) !important;
  2346.   color: var(--button-text) !important;
  2347. }
  2348.  
  2349. [class*=newBadge] {
  2350.   background: var(--main-color) !important;
  2351.   color: var(--button-text) !important;
  2352. }
  2353.  
  2354. [id^=popout] > div > [role=dialog],
  2355. [id^=popout] > div > [class^=container],
  2356. [id^=popout] > div > [class^=popout] {
  2357.   background: rgba(0, 0, 0, 0.95) !important;
  2358.   border-radius: 10px;
  2359. }
  2360.  
  2361. [class^=noticeRegion] > [class^=container] {
  2362.   background: rgba(0, 0, 0, 0.85) !important;
  2363.   box-shadow: none !important;
  2364. }
  2365.  
  2366. [role=dialog] [class^=contentWrapper] {
  2367.   background: rgba(0, 0, 0, 0.95) !important;
  2368. }
  2369.  
  2370. [class^=popoutContainer] {
  2371.   background: rgba(0, 0, 0, 0.95) !important;
  2372. }
  2373. [class^=popoutContainer] button {
  2374.   background: var(--main-color);
  2375.   color: var(--button-text);
  2376. }
  2377. [class^=popoutContainer] button:hover {
  2378.   background: var(--main-color-selected);
  2379.   color: var(--button-text-selected);
  2380. }
  2381.  
  2382. [class^=app_] > [class*=fixClipping_] {
  2383.   background: linear-gradient(rgba(0, 0, 0, 0.1333333333), black) !important;
  2384. }
  2385.  
  2386. [class*=noiseCancellationPopout] {
  2387.   background: rgba(0, 0, 0, 0.95) !important;
  2388. }
  2389.  
  2390. [class*=keyboardShortcutsModal] {
  2391.   background: rgba(0, 0, 0, 0.95) !important;
  2392. }
  2393.  
  2394. [class^=quickswitcher] {
  2395.   height: 100% !important;
  2396.   box-shadow: none !important;
  2397. }
  2398.  
  2399. [class^=quickswitcher] input {
  2400.   background: rgba(0, 0, 0, 0.95) !important;
  2401. }
  2402.  
  2403. [class*=focusLock] [class*=root] {
  2404.   background: rgba(0, 0, 0, 0.95) !important;
  2405.   box-shadow: none !important;
  2406. }
  2407. [class*=focusLock] [class*=root] [class*=directionRow],
  2408. [class*=focusLock] [class*=root] [class*=body],
  2409. [class*=focusLock] [class*=root] [class*=topSection] {
  2410.   background: rgba(0, 0, 0, 0.95) !important;
  2411. }
  2412. [class*=focusLock] [class*=root] [class*=avatar] {
  2413.   border: none;
  2414. }
  2415. [class*=focusLock] [class*=root] [class*=message] {
  2416.   background: transparent !important;
  2417.   border: none !important;
  2418. }
  2419.  
  2420. div[class^=notice] {
  2421.   color: var(--button-text) !important;
  2422.   background: var(--main-color-semitransparent);
  2423. }
  2424. div[class^=notice] button {
  2425.   color: var(--button-text) !important;
  2426.   background: var(--main-color-semitransparent) !important;
  2427. }
  2428. div[class^=notice] button:hover {
  2429.   color: var(--button-text-selected) !important;
  2430.   background: var(--main-color-semitransparent-selected) !important;
  2431. }
  2432.  
  2433. #guild-context-invite-people:not(:hover),
  2434. #channel-context-invite-people:not(:hover),
  2435. #guild-header-popout-invite-people:not(:hover) {
  2436.   color: var(--accent-color);
  2437. }
  2438.  
  2439. [class^=flowerStar_] > path {
  2440.   fill: var(--accent-saturated) !important;
  2441. }
  2442.  
  2443. [class^=flowerStar_] + [class^=child] path {
  2444.   fill: #ffffff !important;
  2445. }
  2446.  
  2447. [class*=homeIcon] {
  2448.   transform: rotate(-180deg);
  2449. }
  2450.  
  2451. [data-list-item-id=guildsnav___home]:hover > div,
  2452. [data-list-item-id=guildsnav___home][class*=selected] > div {
  2453.   background: var(--main-color) !important;
  2454. }
  2455.  
  2456. [href="https://support.discord.com"] {
  2457.   display: none !important;
  2458. }
  2459.  
  2460. [class*=title] > [class^=toolbar] > [class*=icon]:nth-child(2) {
  2461.   display: none !important;
  2462. }
  2463.  
  2464. [class*=nameAndDecorators] [class*=botTagRegular] {
  2465.   transform: translateY(-2px);
  2466. }
  2467.  
  2468. [class*=botTagRegular] {
  2469.   background: transparent !important;
  2470.   position: relative;
  2471.   width: 20px !important;
  2472.   height: 20px !important;
  2473.   margin-top: 0 !important;
  2474.   padding: 0 !important;
  2475. }
  2476. [class*=botTagRegular]:not([class*=WithNickname]) {
  2477.   top: 0;
  2478.   right: 0;
  2479. }
  2480. [class*=botTagRegular][class*=WithNickname] {
  2481.   position: absolute;
  2482.   transform: translateY(-4px);
  2483. }
  2484. [class*=botTagRegular] [class*=botText] {
  2485.   display: none;
  2486. }
  2487. [class*=botTagRegular]::after {
  2488.   background: url(https://przemec.github.io/Novum/assets/icons/bot.svg) !important;
  2489.   background-size: cover !important;
  2490.   content: "";
  2491.   position: absolute;
  2492.   width: 20px;
  2493.   height: 20px;
  2494.   bottom: 0;
  2495.   right: 0;
  2496.   opacity: 0.8;
  2497. }
  2498. [class*=botTagRegular] > svg {
  2499.   color: #fff;
  2500.   transform: translate(18px, -5px);
  2501.   z-index: 2;
  2502. }
  2503.  
  2504. [class*=card_]:not([class*=justify]) {
  2505.   background: rgba(0, 0, 0, 0.3) !important;
  2506.   border-color: #000000 !important;
  2507. }
  2508.  
  2509. [class*=card_][class*=justify] {
  2510.   box-shadow: none;
  2511. }
  2512.  
  2513. [class*=mediaBarWrapper] [class*=fakeEdges] {
  2514.   background: var(--main-color);
  2515. }
  2516. [class*=mediaBarWrapper] [class*=fakeEdges]::after, [class*=mediaBarWrapper] [class*=fakeEdges]::before {
  2517.   background: var(--main-color);
  2518. }
  2519. [class*=mediaBarWrapper] [class*=mediaBarProgress] {
  2520.   background: var(--main-color);
  2521. }
  2522. [class*=mediaBarWrapper] [class*=mediaBarProgress]::after, [class*=mediaBarWrapper] [class*=mediaBarProgress]::before {
  2523.   background: var(--main-color);
  2524. }
  2525. [class*=mediaBarWrapper] [class*=mediaBarProgress] [class*=mediaBarGrabber] {
  2526.   background: var(--main-color);
  2527. }
  2528. [class*=mediaBarWrapper] [class*=bubble] {
  2529.   background: var(--main-color);
  2530. }
  2531.  
  2532. [class*=embedVideo] [class*=playPausePop] {
  2533.   display: none !important;
  2534. }
  2535.  
  2536. [class*=streamPreviewWrapper] [class*=streamPreview] {
  2537.   background: rgba(0, 0, 0, 0.95) !important;
  2538.   border: transparent;
  2539. }
  2540. [class*=streamPreviewWrapper] [class*=streamPreview] [class*=previewContainer] {
  2541.   background: transparent !important;
  2542.   border: transparent;
  2543. }
  2544.  
  2545. [class*=socialLinks]::after {
  2546.   content: "";
  2547.   position: absolute;
  2548.   width: 24px;
  2549.   height: 24px;
  2550.   margin-top: -5px;
  2551.   margin-left: 6px;
  2552.   background: url(https://przemec.github.io/Novum/assets/images/NovumLogo.png) center/cover no-repeat;
  2553.   filter: contrast(0%) brightness(1.4);
  2554. }
  2555.  
  2556. [class*=wordmark] svg {
  2557.   display: none;
  2558. }
  2559. [class*=wordmark]::before, [class*=wordmark]::after {
  2560.   height: 16px;
  2561.   line-height: 14px;
  2562. }
  2563. [class*=wordmark]::before {
  2564.   content: "Novum";
  2565.   margin-left: 2px;
  2566.   color: rgba(255, 255, 255, 0.5);
  2567.   font-size: 15px;
  2568.   font-family: Whitney, "ABC Ginto Normal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  2569.   font-weight: bold;
  2570. }
  2571. [class*=wordmark]::after {
  2572.   content: "v5.8.7";
  2573.   margin-left: 8px;
  2574.   color: rgba(255, 255, 255, 0.3);
  2575.   font-size: 14px;
  2576.   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  2577. }
  2578.  
  2579. /*# sourceMappingURL=theme.css.map */
Tags: venc theme base
Add Comment
Please, Sign In to add comment
Public Pastes
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!