840 lines
20 KiB
CSS
840 lines
20 KiB
CSS
//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;
|
|
}
|
|
|
|
[class*="root"][class*="modalSize"] {
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
::-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^="size14"][class*="description"] {
|
|
color: white;
|
|
}
|
|
|
|
div[class^="size16"][class*="header"] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
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-secondary)
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
/* Video Button */
|
|
[class*="lookFilled"][class*="colorBrand"] {
|
|
background-color: var(--background-primary);
|
|
}
|
|
[class*="lookFilled"][class*="colorBrand"]:hover {
|
|
background-color: var(--background-primary);
|
|
}
|
|
|
|
/* Screen recording */
|
|
[class*="color"][class*="buttonColor"][class*="buttonActive"] {
|
|
background-color: var(--background-primary);
|
|
}
|
|
[class*="color"][class*="buttonColor"][class*="buttonActive"]:hover {
|
|
background-color: var(--background-primary);
|
|
}
|
|
|
|
div[class*="tooltip"] {
|
|
background-color: var(--background-secondary);
|
|
}
|
|
div[class*="contextMenu"] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
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-secondary)
|
|
}
|
|
|
|
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-secondary);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
span[class*="botText"] {
|
|
color: var(--background-primary);
|
|
}
|
|
|
|
svg[class*="botTagVerified"] {
|
|
color: var(--background-primary);
|
|
}
|
|
|
|
/** 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;
|
|
}
|
|
|
|
div[class*="headerIdleContainer"] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
div[class*="headerTitle"] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
div[class*="viewers"] > span {
|
|
color: #b9bbbe;
|
|
}
|