//META{"name":"Duvbox","description":"A Discord theme based on Gruvbox, a Vim theme","author":"CircuitRCAY","version":"1.6.0"}*//
/**
    Duvbox - adapted for Discord
    
    Made by CircuitRCAY (Circuit#2816)
*/

/* Iosevka, codeblock font */

@import url("https://cdn.jsdelivr.net/npm/@typopro/web-iosevka@3.7.5/TypoPRO-Iosevka.css");

code {
    font-family: "TypoPRO Iosevka Term", monospace;
    font-weight: 400;
}

/* Iosevka on Powercord */
pre > code {
    font-family: "TypoPRO Iosevka Term", monospace;
    font-weight: 400;
}


/** End Iosevka */

.theme-dark {
    --background-primary: #282828;
    --background-secondary: #3c3836;
    --background-tertiary: #504945;
    --background-accent: #32302f;
    --text-normal: #ebdbb2;
    --text-spotify: #fbf1c7;
    --text-muted: #bdae93;
    --text-link: #458588;
    --background-floating: #3c3836;
    --header-primary: #ebdbb2;
    --header-secondary: #bdae93;
    --header-spotify: #b8bb26;
    --interactive-normal: #ebdbb2;
    --interactive-hover: #bdae93;
    --interactive-active: #fbf1c7;
    
}

.theme-light {
    --background-primary: #fbf1c7;
    --background-secondary: #ebdbb2;
    --background-tertiary: #d5c4a1;
    --background-accent: #f2e5bc;
    --text-normal: #3c3836;
    --text-muted: #504945;
    --text-link: #076678;
    --header-primary: #3c3836;
    --header-secondary: #504945;
    --header-spotify: #98971a;
    --background-floating: #ebdbb2;
    --interactive-normal: #665c54;
    --interactive-muted: #928374;
    --interactive-hover: #504945;
    --interactive-active: #7c6f64;
}

::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
    background: transparent !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
    width:5px !important;
}
::-webkit-scrollbar-thumb {
    background: var(--background-accent) !important;
    width:5px !important;
    border:none !important;
    border-radius: 0px !important;
}

/* Guild menu (discord forces light theme) */
div[class*="wrapper"][class*="fixClipping"]{
    background-color: var(--background-accent);
}

/* New Messages Bar */
div[class*="newMessagesBar"] {
    background-color: var(--background-accent);
}

/* Hide the action bar nametag and status */
section > div[class*="container"] > [class*='nameTag-'] {
    display:none;
}

/* Center buttons in the panels container */
div[class*="sidebar"] > [class*='panels-'] [class*='container-']{
    display:flex;
    flex-flow:row wrap;
    justify-content: center;
}

/* Credit to craftxbox */

/* Mentions (channel, user) */
span[class*="mention"][class*="interactive"] {
    color: var(--text-link);
}

/* Mentions (role) */
span[class*="mention"] {
    color: var(--text-link);
}

div[class^="scrollableContainer"] {
    background-color: var(--background-secondary);
}

div[class^="name"] > span {
    color: var(--text-normal);
}

h1, h2, h3 {
    color: var(--text-normal);
}

h3[class^="title"] {
    color: var(--text-normal);
}

div[class^="panels"] > div[class^="container"] {
    background-color: var(--background-secondary);
}

div[class^="wrapper"] > div[class^="container"] {
    background-color: var(--background-tertiary);
}

section[class^="panels"] > div[class^="container"] > div[class^="nameTag"] > * {
    color: var(--text-normal);
}

section[class^="panels"] > div[class^="container"] {
    background-color: var(--background-secondary);
}

div.userSettingsAccount-2eMFVR > div > div {
    background-color: var(--background-primary);
}

* > div[class^="contents"] {
    color: var(--text-normal)
}

div[class^="size14"] {
    color: var(--text-normal);
}

div[class^="topic"] {
    color: var(--text-muted);
}

div[class^="friendsTable"] {
    background-color: var(--background-primary);
}

[class^="input"] {
    background-color: var(--background-primary);
}

div[class^="uploadModal"] > div[class^="inner"], div[class^="inner"] > div[class^="uploadModal"], div[class^="uploadModal"] > div[class^="footer"] {
    background-color: var(--background-primary);
}

[class^="usernameContainer"]:not([style]){
    color: var(--text-normal)
}

div[class^="username"] {
    background-color: inherit;
}

span[class^="wrapperHover"][role="button"] {
    color: var(--text-link)
}

[class^="autocompleteInner"] {
    background-color: var(--background-secondary)
}


a[class^="wrapper"] {
    color: var(--text-normal)
}

[class^="tooltipRight"] {
    color: var(--text-normal)
}

div[role="dialog"] {
    color: var(--background-primary)
}

div[class*="activityPanel"] {
    background-color: var(--background-secondary)
}

div[class^="text"] {
    color: var(--text-normal)
}

div[class^="side"] > div[class^="item"] {
    background-color: var(--background-secondary)
}

[class^="userInfoViewing"] {
    background-color: var(--background-secondary);
}

[class*="lookFilled"][class*="colorBrand"] {
    background-color: var(--text-link);
}

div[class*="tooltip"] {
    background-color: var(--background-secondary);
}
div[class*="contextMenu"] {
    background-color: var(--background-secondary);
}

div[class*="header"] {
    background-color: var(--background-secondary)
}

div[class*="details"] {
    color: var(--text-normal);
}

div[class*="headerTextNormal"] {
    background-color: var(--background-secondary);
}

span {
    color: var(--text-normal)
}

span[class*="headerName"] {
    color: var(--text-normal)
}

div[class*="userPopout"] > div[class*="footer"] {
    background-color: var(--background-primary)
}

div[class*="scrollerWrap"][class*="body"] > div[class*="scroller"] {
    background-color: var(--background-primary)
}

[class*="footer"] > [class*="quickMessage"] {
    background-color: var(--background-primary)
}

div[class^="topSectionPlaying"] > header[class^="header"] {
    background-color: var(--background-secondary);
}

header[class^="title"] {
    color: var(--text-normal)
}

div[class^="tabBody"] {
    background-color: var(--background-primary);
}

div[class^="topSectionNormal"] > header > div[class^="headerInfo"]{
    background-color: inherit;
}

div[class^="topSectionSpotify"] > header > div[class^="headerInfo"]{
    background-color: inherit;
}

div[class^="topSectionSpotify"] {
    background-color: var(--header-spotify);
}

div[class*="nameNormal"][class*="ellipsis"][class*="textRow"][class*="weightSemiBold"] > a {
    color: var(--text-normal)
}

div[class*="detailsWrap"][class*="textRow"] > span > a {
    color: var(--text-normal);
}

div[class*="state"][class*="ellipsis"][class*="textRow"] > span > a {
    color: var(--text-normal);
}

div[class^="headerTextNormal"][class*="headerText"][class*="small"][class*="marginBottom8"][class*="weightBold"] {
    color: var(--text-normal);
    background-color: var(--background-secondary);
    background: transparent !important;
}

div[class*="details"][class*="ellipsis"][class*="textRow"] {
    color: var(--text-normal)
}

div[class*="timestamp"] {
    color: var(--text-normal)
}

section[class^="section"] {
    background-color: var(--background-secondary);
}

div[class*="container"] > div[class*="contentWrapper"] {
    background-color: var(--background-secondary);
}

div[class*="selectorSelected"][class*="selector"] {
    background-color: var(--background-tertiary);
}

div[class*="selectorSelected"][class*="selector"] > * > div[class*="marginLeft"] {
    color: var(--text-normal)
}

div[class*="selectorSelected"][class*="selector"] > * > div[class*="colorStandard"] {
    color: var(--text-muted);
}

[class*="selector"] > * > div[class*="marginLeft"] {
    color: var(--text-normal)
}

[class*="selector"] > * > div[class*="colorStandard"] {
    color: var(--text-muted);
}



div[class*="infoBar"] {
    background-color: var(--background-tertiary);
}

div[class*="body"][class*="scrollerBase"][class*="thin"] {
    background-color: var(--background-primary);
}

/* Fix text colour when Spotify is playing */
div[class*="topSectionSpotify"] > header > div[class*="headerInfo"] > div[class*="nameTag"] > * {
    color: var(--text-spotify);
}

/* Fix button colours */
div[class*="topSectionSpotify"] > header > button[class*="actionButton"] {
    background-color: var(--background-tertiary);
}

div[class*="topSectionNormal"] > header > button[class*="actionButton"] {
    background-color: var(--background-secondary);
}

div[class*="topSectionPlaying"] > header > button[class*="actionButton"] {
    background-color: var(--background-tertiary);
}

/** Search **/
div[class*="resultsGroup"] {
    background-color: var(--background-secondary);
}

div[class*="resultsGroup"] > div[class*="option"]::after {
    background-color: var(--background-secondary);
    background: transparent
}

div[class*="resultsGroup"] > div[class*="option"]:hover {
    background-color: var(--background-primary);
}

/** Channel topic **/
div[class*="layerContainer"] > div[class*="layer"] > div[class*="focusLock"] > div[class*="modal"] > div[class*="content"] {
    background-color: var(--background-secondary);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/** Playing statuses */
* > div[class*="activityText"] {
    color: var(--text-muted);
}

* > svg {
    color: var(--interactive-hover)
}

/** Header fixes */
* > span[class*="activityName"] {
    color: var(--text-normal)
}

div[class*="activityUserPopout"] > h3[class*="headerTextNormal"][class*="headerText"] {
   color: var(--text-normal);
}

/** Role names */
div[class*="roleName"] {
    color: var(--text-normal);
}

/** That discord icon on the top left */
.wrapper-1BJsBx.selected-bZ3Lue .childWrapper-anI2G9 {
    background-color: var(--background-primary);
}
.wrapper-1BJsBx .childWrapper-anI2G9 {
    background-color: var(--background-primary);
}

/** and the pill beside it */
div[class*="pill"] > span[class*="item"] {
    background-color: var(--background-primary)
}

/** Deleted Messages */
div[class*="focusLock"] > div[class*="root"] > div[class*="content"] {
    background-color: var(--background-secondary);
}
div[class*="focusLock"] > div[class*="root"] > div[class*="content"] > div[class*="message"] {
    background-color: var(--background-tertiary);
}

div[class*="focusLock"] > div[class*="root"] > div[class*="flex"] {
    background-color: var(--background-secondary);
}

/** Bot Tags */
span[class*="botTag"] {
    background-color: var(--text-link)
}

/** Discover Guilds */
div[class*="circleIconButton"][class*="selected"] {
    background-color: var(--background-secondary);
}

div[class*="dragRegion"] {
    background-color: var(--background-secondary);
}

div[class*="container"] > div[class*="base"] > div[class*="content"] div[class*="scroller"][class*="auto"] {
    background-color: var(--background-primary);
}

section[class*="guildListSection"] > div[class*="guildList"] > div[class*="loaded"] > div[class*="card"] {
    background-color: var(--background-tertiary);
}

div[class*="searchBox"] {
    border-color: var(--background-secondary);
}

div[class*="searchBox"] > div[class*="inputWrapper"] {
    background-color: var(--background-tertiary);
    
}

div[class*="headerContentWrapper"] {
    background-color: var(--background-primary);
}

div[class*="headerContentWrapper"] > div[class*="headerContent"] {
    background-color: var(--background-primary);
}

div[class*="container"] > div[class*="search"] {
    border-color: var(--background-primary);
    color: var(--background-primary);
}

div[class*="headerContentWrapper"] > div[class*="headerContent"] > * {
    color: var(--text-normal)
}

div[class*="categoryItem"][class*="selected"] > div[class*="itemInner"] {
    background-color: var(--text-link);
}
div[class*="categoryItem"][class*="selected"] > div[class*="itemInner"] > * {
    color: var(--text-normal)
}

/* Support new integrations menu */
div[class*="flex"][class*="justifyStart"] > button[class*="copyButton"] {
    background-color: var(--background-tertiary);
}

div[class*="flex"][class*="vertical"][class*="directionColumn"] > div[class*="body"] {
    background-color: var(--background-secondary);
}

/* Fix Invites */
div[class*="customScroller"] > div[class*="listContent"] > div[class*="headerSection"] {
    background-color: var(--background-primary);
}

div[class*="flexChild"] > h4[class*="title"] {
    color: var(--text-muted);
}
div[class*="flexChild"] > div[class*="text"] {
    color: var(--text-muted);
}

/* Fix Nickname Menu */
div[class*="root"] > form > div[class*="content"] {
    background-color: var(--background-secondary);
}

div[class*="root"] > form > div[class*="content"] > div[class*="input"] > h5[class*="colorStandard"] {
    background-color: var(--background-secondary);
    margin: 0;
    color: var(--text-normal);
}


div[class*="root"] > form > div[class*="content"] > div[class*="input"] > div[class*="inputWrapper"] > input {
    background-color: var(--background-tertiary);
}

div[class*="flex"][class*="horizontalReverse"][class*="directionRowReverse"] {
    background-color: var(--background-floating);
}

/* Fix "Listen Along" */

/* Modal */
div[class*="modal"] > div[class*="inner"] > div[class*="modal"] > div[class*="content"] {
    background-color: var(--background-secondary);
}

div[class*="modal"] > div[class*="inner"] > div[class*="modal"] > div[class*="content"] > div[class*="invite"] {
    background-color: var(--background-primary);
}

div[class*="header"][class*="inFront"] {
    background-color: var(--background-primary);
    color: var(--text-muted);
}

div[class*="flex"][class*="directionRow"][class*="alignEnd"] > div > button {
    background-color: var(--text-link);
}

div[class*="content"][class*="thin"] > div[class*="textArea"] > div[class*="scrollableContainer"] {
    background-color: var(--background-primary);
}

/* Embed */
div[id*="messages"] > div[class*="container"] > div[class*="invite"] {
    background-color: var(--background-secondary);
}

div[id*="messages"] > div[class*="container"] > div[class*="invite"] > * > * > div[class*="header"] {
    background-color: var(--background-secondary);
}

div[class*="details"] > a[class*="anchor"] {
    color: var(--text-normal);
}

div[class*="state"] {
    color: var(--text-normal);
}

div[class*="state"] > span > a[class*="anchor"] {
    color: var(--text-normal);
}

/* Tooltip fix */
div[class*="tooltipContent"] {
    color: var(--text-normal);
}

/* MessageBox fix */
div[class*="markdown"] {
    color: var(--text-normal);
}

/* Spotify in Powercord */
div[class="powercord-spotify"] {
    background-color: var(--background-secondary);
}

div[class="powercord-spotify hover"] {
    background-color: var(--background-secondary);
}

/** Change Progress Bar colour */
div[class="powercord-spotify"] > div[class*="spotify-seek"] > div[class*="spotify-seek-bar"] > * {
    background-color: var(--header-spotify);
}

/** Change Progress Bar colour */
div[class="powercord-spotify hover"] > div[class*="spotify-seek"] > div[class*="spotify-seek-bar"] > * {
    background-color: var(--header-spotify);
}

/* BetterDiscord toasts */
/* TODO: Fix shadows of toasts */
div[class="bd-toast"] {
    background: var(--background-floating);
    color: var(--text-normal);
}
/* Sadly colors of other toasts(toast-info, toast-success, toast-warning, toast-error) can't be overridden */

/* Fix a.k.a [nickname] */
div[class*="nicknames"][class*="overflow"] > div[class*="tooltip"] {
    background-color: var(--background-primary);
}

/* Fix slash commands */
* > div[class*="categorySection"] > div[class*="wrapper"] {
    background-color: var(--background-secondary);
}

div[class*="itemWrapper"] > div[class*="base"][class*="selectable"][class*="selected"] {
    background-color: var(--background-tertiary);
}

div[class*="usageWrapper"] > div[class*="colorHeaderPrimary"] {
    background-color: var(--background-accent);
    color: var(--text-muted);
}

/* Fix emoji picker */
div[class*="emojiPicker"] > div[class*="inspector"] {
    background-color: var(--background-tertiary);
}

/* Finally fix server info */
div[class*="container"] > * > * > div[class*="content"] {
    background-color: var(--background-secondary);
    margin: 0;
}

div[class*="container"] > * > * > div[class*="flex"][class*="horizontalReverse"] > button {
    background-color: var(--background-accent);
}

div[class*="container"] > * > * > div[class*="flex"][class*="horizontalReverse"] > button {
    background-color: var(--background-accent);
}

div[class*="container"] > * > * > div > div[class*="content"][class*="scrollerBase"] {
    background-color: var(--background-secondary);
}

div[class*="container"] > * > * > div > div[class*="content"][class*="scrollerBase"] > form[class*="inputForm"] > div {
    background-color: var(--background-secondary);
}

/* Fix private channel settings on an empty channel */
div[class*="contents"] > div[class*="flex"] > div[class*="size16"] {
    background-color: var(--background-primary);
}

div[class*="contents"] > div[class*="flex"] {
    background-color: var(--background-primary);
}

div[class*="members"] > button[class*="role"][class*="button"] > div[class*="contents"] > div[class*="role"] {
    background-color: var(--background-secondary);
}

/* Support new role list */
div[class*="contentContainer"] > div[class*="scroller"] > div[class*="contentWidth"] > div[class*="header"] {
    background-color: var(--background-primary);
}

div[class*="contentContainer"] > div[class*="scroller"] > div[class*="contentWidth"] > div[class*="header"] > div[class*="tabBar"] > div[class*="item"] {
    background-color: var(--background-secondary);
}

/** Gruvbox (dark) Highlight.js theme. Ported from https://github.com/highlightjs/highlight.js/blob/master/src/styles/gruvbox-dark.css */
.theme-dark .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #282828;
}
  
.theme-dark .hljs,
.hljs-subst {
    color: #ebdbb2;
}
  
/* Gruvbox Red */
.theme-dark
.hljs-deletion,
.hljs-formula,
.hljs-keyword,
.hljs-link,
.hljs-selector-tag {
    color: #fb4934;
}
  
/* Gruvbox Blue */
.theme-dark
.hljs-built_in,
.hljs-emphasis,
.hljs-name,
.hljs-quote,
.hljs-strong,
.hljs-title,
.hljs-variable {
    color: #83a598;
}
  
/* Gruvbox Yellow */
.hljs-attr,
.hljs-params,
.hljs-template-tag,
.hljs-type {
    color: #fabd2f;
}
  
/* Gruvbox Purple */
.theme-dark
.hljs-builtin-name,
.hljs-doctag,
.hljs-literal,
.hljs-number {
    color: #8f3f71;
}
  
/* Gruvbox Orange */
.theme-dark
.hljs-code,
.hljs-meta,
.hljs-regexp,
.hljs-selector-id,
.hljs-template-variable {
    color: #fe8019;
}
  
/* Gruvbox Green */
.theme-dark
.hljs-addition,
.hljs-meta-string,
.hljs-section,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-string,
.hljs-symbol {
    color: #b8bb26;
}
  
/* Gruvbox Aqua */
.theme-dark
.hljs-attribute,
.hljs-bullet,
.hljs-class,
.hljs-function,
.hljs-function .hljs-keyword,
.hljs-meta-keyword,
.hljs-selector-pseudo,
.hljs-tag {
    color: #8ec07c;
}
  
/* Gruvbox Gray */
.theme-dark,
.hljs-comment {
    color: #928374;
}
  
/* Gruvbox Purple */
.theme-dark
.hljs-link_label,
.hljs-literal,
.hljs-number {
    color: #d3869b;
}
  
.theme-dark
.hljs-comment,
.hljs-emphasis {
    font-style: italic;
}
  
.theme-dark
.hljs-section,
.hljs-strong,
.hljs-tag {
    font-weight: bold;
}