discord.com by elkowar

/* ==UserStyle==
@name         discord.com
@version      20220517.11.09
@namespace    userstyles.world/user/elkowar
@description  Gruvbox discord styles
@author       elkowar
@license      No License
==/UserStyle== */

@-moz-document domain("discord.com"), domain("neverdecaf.github.io") {
:root {
  --elk-font-family: "Terminus (TTF)";
  --elk-font-size: 16px;

  --elk-bg-dark: #1d2021;
  --elk-bg-darkish: #222222;
  --elk-bg-normal: #282828;

  --elk-fg-normal: #fbf1c7;
  --elk-fg-darker: #a89984;
  --elk-fg-inactive: #696969;

  --elk-red: #fb4934;
  --elk-purple: #b16286;
  --elk-blue: #458588;
  --elk-green: #b8bb26;
  --elk-aqua: #83c07c;
  --elk-yellow: #fabd2f;
  --elk-orange: #fe8019;

  --elk-accent: var(--elk-aqua);


  /* other stuff */
  --button: #daddee1a;
  -moz-tab-size: 2;
}

.theme-dark {
  --header-primary: var(--elk-fg-normal);
  --header-secondary: var(--elk-fg-darker);
  --text-normal: var(--elk-fg-normal);
  --text-muted: var(--elk-fg-darker);
  --text-link: var(--elk-accent);
  --channels-default: var(--elk-fg-darker);
  --interactive-normal: var(--elk-fg-darker);
  --interactive-hover: var(--elk-fg-normal);
  --interactive-active: var(--elk-fg-normal);
  --interactive-muted: var(--elk-fg-darker);
  --background-primary: var(--elk-bg-normal);
  --background-secondary: var(--elk-bg-darkish);
  --background-secondary-alt: var(--elk-bg-normal);
  --background-tertiary: var(--elk-bg-normal);
  --background-accent: var(--elk-accent);
  --background-floating: var(--elk-bg-normal);
  --background-modifier-hover: rgba(79, 84, 92, 0.16);
  --background-modifier-active: rgba(79, 84, 92, 0.24);
  /*--background-modifier-accent: hsla(0, 0%, 100%, 0.06);*/
  --background-modifier-accent: rgba(0, 0, 0, 0);
  --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24);
  --guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  --channeltextarea-background: var(--elk-bg-normal);
  --activity-card-background: var(--elk-bg-darkish);
  --deprecated-panel-background: var(--elk-bg-dark);
  --background-modifier-selected: var(--elk-bg-normal);
  --elevation-low: none !important;
  --background-message-hover: var(--elk-bg-darkish) !important;
}

* {
  font-family: var(--elk-font-family) !important;
  /*font-weight: normal !important;*/
  font-size: var(--elk-font-size) !important;


}
/*
.wrapper-3NnKdC.guilds-1SWlCJ {
    display: none;
    width: 0px !important;
}
*/
.base-3dtUhz {
    left: 0;
}



/* channel list stuff*/
[class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] {
    height: 25px !important;
}
/*
[class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] > * {
    font-size: 15px !important;
}*/
[class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] div[class*="iconContainer-"] svg {
    color: var(--elk-fg-darker) !important;
}
/*icons in the channel list when hovered */
[class*="sidebar"] [class*="containerDefault"] [class*="iconVisibility-"] [class*="children-"]{
    height: 25px;
}



::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-handle,
::-webkit-scrollbar-track-piece {
  border-color: rgba(0, 0, 0, 0) !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

/* general */
[class*="colorBrand"] {
  color: var(--elk-accent);
}

[class*="colorDanger"] {
  color: var(--elk-red);
}

[class*="lookBlank"] {
  color: var(--elk-fg-darker);
}

[class*="input"]:focus {
    border-color: var(--elk-accent);
}

[class*="contentTitle-"] strong {
    color: var(--elk-fg-normal) !important;
}

div[class*="ephemeral-"] {
    background-color: #0766780D !important;
    border-radius: 10px !important;
}
div[class*="ephemeral-"]:hover {
    background-color: #07667815 !important;
}
div[class*="ephemeral-"]:before {
    background-color: #076678;
}


/* sections */

[id*="popout"] [class*="container"] {
  background-color: var(--elk-bg-normal);
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
  color: var(--elk-fg-normal) !important;
}
[id*="popout"] [class*="container"] ::after {
  background-image: none !important;
}

[class*="live"][class*="textBadge"] {
  background-color: var(--elk-red) !important;
  color: var(--elk-fg-normal);
}

[class*="navButtonActive"] {
    background-color: unset;
    color: var(--elk-fg-normal);
}

[class*="option"][class*="selected"] {
  background-color: var(--elk-bg-darkish) !important;
}

[class*="resultsGroup"] * {
  color: var(--elk-fg-darker) !important;
}
[class*="resultsGroup"] [class*="filter"] {
  color: var(--elk-fg-normal) !important;
}
[class*="resultsGroup"] [class*="header"] {
  color: var(--elk-fg-normal) !important;
}

[class*="peopleColumn"] {
  background-color: var(--elk-bg-darkish);
}
[class*="sectionTitle"] {
    background-color: unset !important;
}

/* TODO fix this completely */
[class*="section"] {
  /*background-color: var(--elk-bg-dark);*/
    /*background-color: green;*/
}


[class*="sidebar"] [class*="container"] [class*="header"]{
  background-color: var(--elk-bg-normal) !important;
  /*box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);*/
    box-shadow: none;
    border: none !important;
}
[class*="sidebar"] [class*="container"] [class*="bannerVisible-"] [class*="header"] {
    background-color: unset !important;
}
[class*="sidebar"] [class*="container"] [class*="communityInfoContainer"] {
    display: none;
}
[class*="sidebar"] > [class*="container"],
[class*="members"][class*="scroller"] {
  box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.2);
}

[class*="scrollerWrap"] {
  border-radius: 10px !important;
}

[class*="membersWrap"] {
  /*border-top-left-radius: 15px;*/
  overflow: hidden;
}

/* message input area */

[class*="chatContent"] [class*="form"] {
  padding-top: 0.5rem;
  background-color: var(--elk-bg-normal);
  box-shadow: 0 -30px 20px -30px rgba(0, 0, 0, 0.3);
}

[class*="textAreaSlate"] {
  background-color: var(--elk-bg-dark);
  border-radius: 13px;
  color: var(--fg-2);
  box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

[class*="textAreaSlate"] > * {
  padding-left: 1rem;
  padding-right: 1rem;
}
[class*="textAreaSlate"] [class*="placeholder-"] {
    padding: 10px;
    color: var(--elk-fg-inactive);
}

[class*="userPopout"] [class*="body"],
[class*="userPopout"] [class*="footer"]{
    background-color: var(--elk-bg-normal);
}
[class*="userPopout"] [class*="headerNormal"] {
    background-color: var(--elk-bg-darkish);
}

[class*="headerPlaying"] * {
    background-color: var(--elk-accent) !important;
}
[class*="attachedBars-"] {
    border-radius: 10px;
    margin-left: 11px;
    margin-right: 11px;
    margin-bottom: 5px;
}

span[class*="optionPill-"][class*="selectedPill-"]{
    border-color: var(--elk-accent) !important;
}

section[class*="title-"] svg {
    color: var(--elk-fg-darker);
}

/* components */

button[class*="lookFilled"] {
  background-color: var(--button) !important;
}
button[class*="buttonActive"][class*="lookFilled"] {
  background-color: var(--elk-accent) !important;
  color: var(--elk-bg-normal) !important;
}

button[class*="lookLink"] {
  color: var(--elk-fg-normal) !important;
}

[class*="sprite"] {
  filter: brightness(80%) sepia(80%) saturate(60%) !important;
}
[class*="username"] {
  filter: sepia(30%) !important;
  transition: filter 0.2s;
}
[class*="username"]:hover {
  filter: sepia(20%) !important;
}

[class*="newMessagesBar-"] {
  background-color: var(--elk-accent);
  opacity: 1;
}
[class*="newMessagesBar-"] button {
  color: var(--elk-bg-normal) !important;
}

img[class*="avatar"] {
  filter: sepia(30%) !important;
  border-radius: 50%;
  overflow: hidden;
  transition: filter 0.1s, transform 0.1s ease-in-out;
}
img[class*="avatar"]:hover {
  filter: sepia(0%) !important;
  transform: scale(1.05);
}

[class*="pictureInPictureWindow"] {
  box-shadow: 0 8px 15px 0px rgba(0, 0, 0, 0.5) !important;
}

[class*="divider"] {
  border-color: var(--elk-bg-dark);
}
[class*="divider"][class*="isUnread"] {
  border-color: var(--elk-red) !important;
}

[class*="unreadPill-"] {
  background-color: var(--elk-red);
}

[class*="unreadPillCap"] {
  fill: var(--elk-red);
}
button[class*="lookFilled"] {
  color: var(--elk-fg-normal) !important;
}

[class*="live"][class*="textBadge"] {
  background-color: var(--elk-red) !important;
  color: var(--elk-fg-normal);
}

[class*="modal"] [class*="queryContainer-"],
[class*="modal"] [class*="resultsGroup-"],
[class*="modal"] [class*="bodyInner-"],
[class*="modal"] [class*="quickMessage-"],
[class*="modal"] [class*="inner-"],
[class*="modal"] [class*="header-"]:not(header):not(h2),
[class*="modal"] [class*="uploadModal-"],
[role*="dialog"] form  {
  background-color: var(--elk-bg-normal) !important;
}

[role*="dialog"] form [class*="footer"]{
    background-color: var(--elk-bg-darkish);
}

[class*="modal"] [class*="sourceScroller"],
[class*="modal"] [class*="segmentContainer-"] [class*="segmentControl"] /*go live source selector header bar*/ {
  background-color: var(--elk-bg-dark) !important;
}
[class*="modal"] [class*="header"] {
  padding-top: unset;
  padding: 0.4rem;
}

[class*="modal"] [class*="footer-"] {
  background-color: var(--elk-bg-dark) !important;
  filter: brightness(110%);
}

[class*="panels"] > *:nth-child(2) {
  height: 4.6rem;
  padding-bottom: 0.5rem;
}

div[class*="chat"] div[class*="root"] {
  background-color: var(--elk-bg-normal);
}

div[class*="autocomplete-"], div[class*="autocomplete-"] div[class*="categoryHeader"] {
    background-color: var(--elk-bg-dark) !important;
}
div[class*="autocomplete-"] div[class*="rail"] > div {
    background-color: var(--elk-bg-normal) !important;
}
div[class*="noAutocompleteResults-"] * {
    color: var(--elk-fg-darker);
}
div[class*="noAutocompleteResults-"] div[class*="sadImage-"] {
    filter: sepia(100%) brightness(80%) contrast(70%);
}


div[class*="rtcConnectionStatus"] *,
[class*="circleIconButton"] {
  color: var(--elk-accent) !important;
}
/* display info about code blocks  */
code.hljs:not(.inline)::before {
	content: attr(class) !important;
	float: r...