Skip to content

Instantly share code, notes, and snippets.

@sethwhitaker

sethwhitaker/iracing_forum_stylish_theme.css

Last active July 13, 2021 16:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sethwhitaker/a822bbaf029d3dc278138460b4e7d1b3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sethwhitaker/a822bbaf029d3dc278138460b4e7d1b3 to your computer and use it in GitHub Desktop.
Download ZIP
2021 iRacing Forum Stylish Theme
Raw
iracing_forum_stylish_theme.css
/* Variables */
:root {
--theme-spacing: 1rem 1.25rem;
--theme-font-size: 1rem;
--theme-border-radius: 7px;
--theme-box-shadow: rgb(0 0 0 / 22%) 0px 1px 3px 0px;
/* Colors */
--iracing-blue: #224289;
--iracing-red: #e2201c;
--theme-dark: #2c2c35;
--theme-light: #f5f5f5;
--theme-red: var(--iracing-red);
--theme-red-alt: #df2826;
--theme-blue: #006eff;
--theme-light-blue: #10b6ef;
/* Licences */
--theme-license-rookie: var(--iracing-red);
--theme-license-d: #ff6601;
--theme-license-c: #ffcc33;
--theme-license-b: #06b130;
--theme-license-a: #1e4488;
--theme-license-pro: #000000;
--theme-background-color: inherit;
--theme-font-color: inherit;
--theme-border-color: #4d4d4d;
--theme-header-bg: var(--theme-dark);
--theme-pager-bg: inherit;
--theme-pager-hover: rgba(255, 255, 255, .25);
--theme-comment-header-bg: rgba(255, 255, 255, 0.09);
--theme-comment-admin-header-bg: rgb(223, 39, 39, 0.6);
--theme-signature-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3) inset;
--theme-signature-bg: rgba(0, 0, 0, 0.3);
--theme-signature-color: #ccc;
--theme-message-quote-embed-bg: rgba(125, 125, 125, 0.1);
--theme-message-quote-embed-gradient: linear-gradient(transparent, var(--theme-dark));
--theme-button-bg: inherit;
--theme-button-color: inherit;
--theme-enable-post-animate: 1; /* enable = 1, disable = 0 */
--theme-post-animate-multiplyer: 0.01;
}
/************************************** REMOVED ITEMS ******************************************/
.Section-CategoryList .MainContent .pageHeadingBox .PageDescription,
.Section-DiscussionList .PageDescription ,
.Section-DiscussionList [class*="userPhoto-medium"],
.DataList .Excerpt,
.DataList .CategoryDescription,
.MessageList .Excerpt,
.MessageList .CategoryDescription {
display: none;
}
.Section-CategoryList .MainContent .DataList .Item.pageBox .Meta {
display: inline-flex;
/* display: none; */
}
/********************************************* Global *****************************************************/
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--theme-font-color);
}
input:not(.Button) {
background-color: var(--theme-background-color) !important;
color: var(--theme-font-color) !important;
}
header.titleBar [class*="searchBar-content"] {
background: none !important;
}
/* Meta */
.ItemContent a,
.Meta.Meta .MItem a{
color: var(--theme-font-color);
}
.Meta.Meta .MItem a:hover,
.Meta.Meta .MItem a:focus,
.Meta.Meta .MItem a:active,
.Meta.Meta .MItem a.focus-visible {
color: var(--theme-font-color);
}
.Meta.Meta, .AuthorInfo,
.Meta.Meta > .MItem, .AuthorInfo > .MItem {
color: var(--theme-font-color);
}
.MainContent .pageHeadingBox.pageHeadingBox.pageHeadingBox {
margin: 0;
}
/* Quick Links */
[class*="quickLinks"] [class*="PageBox-boxClass"] {
padding: 0;
}
[class*="quickLinks"] [class*="quickLinks-listItem"] {
border-color: var(--theme-border-color);
}
[class*="quickLinks"] [class*="quickLinks-listItemTitle"],
[class*="quickLinks"] [class*="quickLinks-count"] {
padding: 0.75rem 1rem !important;
}
[class*="quickLinks"] [class*="quickLinks-listItemTitle"]:hover {
color: var(--theme-light-blue);
}
/* Quote Box & Embeds */
[class*="quoteEmbed"] {
border-color: var(--theme-border-color) !important;
border-radius: var(--theme-border-radius) !important;
background-color: var(--theme-message-quote-embed-bg);
}
[class*="quoteEmbed-title"] {
color: var(--theme-font-color) !important;
background: none !important;
}
[class*="-quoteEmbed-header"] + [class*="-collapsableContent"] {
border-bottom-left-radius: var(--theme-border-radius);
border-bottom-right-radius: var(--theme-border-radius);
overflow: hidden;
}
[class*="-quoteEmbed-header"]:not([class*="collapsableContent-gradient"]),
[class*="-quoteEmbed-content"]:not([class*="collapsableContent-gradient"]),
[class*="-collapsableContent"]:not([class*="collapsableContent-gradient"]),
[class*="-collapsableContent-footer"]:not([class*="collapsableContent-gradient"]),
[class*="-embedExternal-content"]:not([class*="collapsableContent-gradient"]) {
background-color: var(--theme-message-quote-embed-bg) !important;
}
[class*="-quoteEmbed-header"]:not([class*="collapsableContent-gradient"]){
border-top-left-radius: var(--theme-border-radius);
border-top-right-radius: var(--theme-border-radius);
}
[class*="-collapsableContent-collapser"] {
background-color: var(--theme-button-bg) !important;
color: var(--theme-button-color);
}
[class*="collapsableContent-gradient"]{
height: 100px;
background: var(--theme-message-quote-embed-gradient);
}
.embedLink-excerpt,
.embedLink-source,
[class*="embed-title"]
{
color: var(--theme-font-color) !important;
}
/***** Navigation *****/
.Pager.NumberedPager .Pager-p {
color: var(--theme-font-color);
border-color: var(--theme-border-color);
transition: all 0.2s ease-in-out;
background-color: var(--theme-pager-bg) !important;
}
.Pager.NumberedPager .Previous,
.Pager.NumberedPager .Next {
background-color: var(--theme-pager-bg) !important;
color: var(--theme-font-color) !important;
border-color: var(--theme-border-color);
}
.Pager.NumberedPager a.Pager-p:hover,
.Pager.NumberedPager a.Previous:hover,
.Pager.NumberedPager a.Next:hover {
background-color: var(--theme-pager-hover) !important;
}
.Pager.NumberedPager a.Pager-p.Highlight {
background-color: var(--theme-blue) !important;
}
.Panel .Box li + li {
padding-top: 7px;
}
.userContent,
.UserContent,
.MessageList.Discussion {
color: var(--theme-font-color);
}
/*************************************************** Header ************************************************************/
header.titleBar [class*="titleBar-bg2-titleBar-bg2"] {
background: var(--theme-header-bg);
}
header.titleBar [class*="meBoxMessage-message"],
header.titleBar [class*="meBoxMessage"] + [class*="meBoxMessage"],
header.titleBar [class*="frameHeader"],
header.titleBar [class*="frameFooter"] {
color: var(--theme-font-color);
border-color: var(--theme-border-color);
}
header.titleBar [class*="dropDown-contents-dropDown-contents"],
header.titleBar [class*="dropDown-action"],
header.titleBar [class*="typography-subTitle-dropDown-sectionHeading"]{
color: var(--theme-font-color) !important;
}
/*************************************************** Home ***************************************************************/
.Section-CategoryList .Content .pageHeadingBox .HomepageTitle {
font-size: 24px !important;
}
/* move the view filter toggle to the right and up a little bit*/
.Section-CategoryList .Content .PageControls.Top .PageControls-filters {
justify-content: flex-end;
margin-top: -2rem;
}
.Section-CategoryList .CategoryList li.CategoryHeading{
background-color: var(--iracing-blue) !important;
border-bottom: 1px solid var(--theme-border-color);
padding: 0.5rem 1.25rem !important;
margin: 0 !important;
display: block;
box-shadow: var(--theme-box-shadow);
}
.Section-CategoryList .CategoryList li.CategoryHeading:first-child,
.Section-CategoryList[class*="Section-Category-"] .CategoryList .Item.pageBox:first-child {
border-top-right-radius: var(--theme-border-radius);
border-top-left-radius: var(--theme-border-radius);
overflow: hidden;
}
.Section-CategoryList .DataList li.CategoryHeading [role="heading"]{
font-size: 16px !important;
margin: 0 !important;
}
.Section-CategoryList .CategoryList .Item.pageBox {
border-bottom: 1px solid var(--theme-border-color);
border-radius: 0px;
margin-top: 0 !important;
padding: 0.5rem 1.25rem;
}
.Section-CategoryList .CategoryList .Item.pageBox:before {
content: '';
display: block;
background-color: var(--theme-light-blue);
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
}
.Section-CategoryList .CategoryList .Item.pageBox.Read:before {
content: none;
}
.Section-CategoryList .CategoryList .Item.pageBox:last-child {
border-bottom-right-radius: var(--theme-border-radius);
border-bottom-left-radius: var(--theme-border-radius);
border-bottom: none;
}
.Section-CategoryList .CategoryList .Item.pageBox .Item-Icon {
width: 22px;
height: 22px;
}
.Section-CategoryList .CategoryList .Item.pageBox .Title {
margin-bottom: 0;
font-size: 14px;
font-weight: 500;
}
.Section-CategoryList .CategoryList .Item.pageBox.Read .Title {
font-weight: 400 !important;
}
.Section-CategoryList .CategoryList .Item.pageBox .Meta .MItem.CommentCount {
margin-right: 8px;
}
.Section-CategoryList .CategoryList .Item.pageBox .Meta .MItem.CommentCount:after {
content: '|';
margin-left: 8px;
}
/************************************ Thread List **********************************************/
.Section-DiscussionList:not(.Drafts) section.Content {
display: grid;
grid-template-columns: 50% 50%;
align-items: end;
grid-template-areas:
"header header"
"main main"
". footer";
}
.Section-DiscussionList [class*="homeWidgetContainer"]{
grid-area: main;
margin-top: 15px;
}
.Section-DiscussionList .PageControls,
.Section-DiscussionList .PageControls .PageControls-filters {
justify-content: flex-end;
}
.Section-DiscussionList .PageControls .PageControls-filters {
grid-area: headerleft;
order: -1;
margin-top: 0;
}
.Section-DiscussionList .PageControls.Bottom {
grid-area: footer;
}
.Section-DiscussionList li[class*="PageBox-boxClass"],
.Section-DiscussionList .Content .pageBox .pageBox {
margin-top: 0 !important;
border-radius: 0;
border-bottom: 1px solid var(--theme-border-color);
padding: 0.75rem 1rem;
position: relative;
transition: all 0.2s ease-in-out;
}
/* .Section-DiscussionList li[class*="PageBox-boxClass"]:hover { */
/* z-index: 1; */
/* transform: scale(calc(1 + var(--theme-enable-post-animate) * var(--theme-post-animate-multiplyer))); */
/* } */
.Section-DiscussionList li[class*="PageBox-boxClass"]:last-child {
border-bottom: none;
}
.Section-DiscussionList li[class*="PageBox-boxClass"]:first-child {
border-top-right-radius: var(--theme-border-radius);
border-top-left-radius: var(--theme-border-radius);
}
.Section-DiscussionList li[class*="PageBox-boxClass"]:last-child {
border-bottom-right-radius: var(--theme-border-radius);
border-bottom-left-radius: var(--theme-border-radius);
}
.Section-DiscussionList [class*="ListItem-styles-metaDescriptionContainer"] {
margin-top: 5px;
}
.Section-DiscussionList [class*="ListItem-styles-metaDescriptionContainer"] div [class*="metas-meta"] {
color: var(--theme-font-color) !important;
}
.Section-DiscussionList [class*="ListItem-styles-metasContainer"] {
display: inline-flex;
flex-wrap: wrap;
margin-top: 0;
align-items: center;
}
.Section-DiscussionList [class*="metas-meta"] > div[class*="Notice-styles-root"] {
clip: rect(0, 0, 0, 0);
padding: 0;
font-size: 0;
border: 0;
overflow: hidden;
}
.Section-DiscussionList [class*="metas-meta"] > div[class*="Notice-styles-root"]:before {
content: '';
background-color: var(--theme-blue);
height: 100%;
width: 5px;
display: block;
position: absolute;
top: 50%;
left: 0px;
border-radius: 0;
transform: translateY(-50%);
}
.Section-DiscussionList [class*="metas-metaLabel"] {
background-color: var(--theme-red);
border-color: var(--theme-red);
font-size: 12px;
padding: 0px 6px;
}
.Section-DiscussionList [class*="metas-metaIcon"] {
display: inline-flex;
align-items: center;
}
.Section-DiscussionList [class*="metas-metaIcon"] svg {
vertical-align: middle;
transform: none;
}
.Section-DiscussionList div[class*="metas-metaIcon"]:first-of-type {
margin-left: auto;
}
.Section-DiscussionList [class*="userPhoto-medium"]{
width: 33px;
height: 33px;
}
/*********************************************** Message List ******************************************************/
/* Titles */
.Section-Discussion .PageTitle h1 {
font-size: 28px !important;
}
.Section-Discussion .CommentHeading {
font-size: 18px !important;
}
/* Items */
.Section-Discussion .MessageList.Comments{
box-shadow: none !important;
}
.Section-Discussion .MessageList.Comments,
.Section-Discussion .MessageList.AcceptedAnswers,
.Section-Discussion .MessageList .Item {
padding: 0 !important;
}
.Section-Discussion .MessageList.AcceptedAnswers {
margin-bottom: 15px;
}
.Section-Discussion .MessageList.AcceptedAnswers .QnA-Accepted {
background-color: var(--iracing-blue);
border-color: var(--iracing-blue);
}
.Section-Discussion .MessageList.DataList {
background: none !important;
}
.Section-Discussion .MessageList .Item {
margin-top: 15px !important;
box-shadow: var(--theme-box-shadow) !important;
}
.Section-Discussion .MessageList .Item:before,
.Section-Discussion .MessageList .Item:after {
content: none !important;
}
.Section-Discussion .MessageList .Item.Rank-Admin .Item-Header.DiscussionHeader,
.Section-Discussion .MessageList .Item.Rank-Admin .Item-Header.CommentHeader {
background-color: var(--theme-comment-admin-header-bg);
}
.Section-Discussion .MessageList .Item .Item-Header.DiscussionHeader,
.Section-Discussion .MessageList .Item .Item-Header.CommentHeader {
padding: 0.75rem 1.25rem 0.5rem;
background-color: var(--theme-comment-header-bg);
border-top-left-radius: var(--theme-border-radius);
border-top-right-radius: var(--theme-border-radius);
}
.Section-Discussion .DataList .Options,
.Section-Discussion .MessageList .Options {
align-self: flex-end;
position: relative;
top: 5px;
}
.Section-Discussion .MessageList .Item .Message {
padding: 1.25rem;
margin-top: 0;
}
.Section-Discussion .MessageList .Item .Message a:not(:hover) {
color: #62a6ff;
}
.Section-Discussion .MessageList .Item .Item-Header .Author .Username {
font-size: 15px;
}
.Section-Discussion .MessageList .Item .Item-Header .CommentMeta > .MItem,
.Section-Discussion .MessageList .Item .Item-Header .CommentMeta > .MItem a {
font-size: 11px;
color: #bbb;
}
/* Forum License Tag */
.Section-Discussion .MessageList .Item .Item-Header .Rank.MItem {
color: white !important;
border-radius: 10px;
text-transform: uppercase;
font-weight: bold;
font-size: 11px;
padding: 1px 7px;
}
.Section-Discussion .MessageList .Item .Item-Header .Rank.MItem[title="Forum Rookie"] {
background-color: var(--theme-license-rookie);
}
.Section-Discussion .MessageList .Item .Item-Header .Rank.MItem[title="Forum D License"] {
background-color: var(--theme-license-d);
}
.Section-Discussion .MessageList .Item .Item-Header .Rank.MItem[title="Forum C License"] {
background-color: var(--theme-license-c);
}
.Section-Discussion .MessageList .Item .Item-Header .Rank.MItem[title="Forum B License"] {
background-color: var(--theme-license-b);
}
.Section-Discussion .MessageList .Item .Item-Header .Rank.MItem[title="Forum A License"] {
background-color: var(--theme-license-a);
}
.Section-Discussion .MessageList .Item .Item-Header .Rank.MItem[title="Forum Pro License"] {
background-color: var(--theme-license-pro);;
}
.Section-Discussion .MessageList .Item .Item-Header .Rank.MItem.Rank-Admin {
background-color: white !important;
color: var(--theme-red-alt) !important;
}
.Section-Discussion .DataList .PhotoWrap,
.Section-Discussion .MessageList .PhotoWrap {
width: 38px;
height: 38px;
}
.Section-Discussion .MessageList .UserSignature {
background-color: var(--theme-signature-bg);
color: var(--theme-signature-color);
box-shadow: var(--theme-signature-shadow);
border-color: var(--theme-border-color);
padding: 1.25rem;
font-size: 12px;
}
/* clear floated elements insie signatures */
.Section-Discussion .MessageList .UserSignature {
overflow: hidden;
}
.Section-Discussion .MessageList .UserSignature .embedExternal-content {
background: none !important;
}
.Section-Discussion .MessageList .ItemDiscussion .InlineTags {
padding: 0.5rem 1.25rem;
}
/* Code Block */
.Section-Discussion .MessageList .Item .Message .code {
background-color: #777;
}
/******************************************************* Reactions *******************************************************/
.Reactions {
position: absolute;
top: 0px;
right: 0px;
justify-content: flex-end;
margin: 0 !important;
width: auto;
padding: 0.15rem 0.6rem !important;
background: var(--theme-reactions-bg);
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 0;
}
.Reactions .ReactLabel {
display: none;
}
.Reactions .ReactButton.Quote {
font-size: 0;
}
/******************************************************** Messages List ********************************************************/
.Section-ConversationList .DismissMessage,
.Section-ConversationList .DataList .Excerpt,
.Section-ConversationList .DataList .CategoryDescription,
.Section-ConversationList .MessageList .Excerpt,
.Section-ConversationList .MessageList .CategoryDescription{
color: var(--theme-font-color);
}
/************************************************** Messages Conversation ****************************************************/
.Section-Conversation .MessageList {
padding: 0 !important;
background: none !important;
}
.Section-Conversation .MessageList .Item {
padding: 1rem 1.25rem !important;
}
.Section-Conversation .MessageList .Item:after,
.Section-Conversation .MessageList .Item:before {
content: none !important;
}
/*********************************** Profile **********************************************/
.Section-Profile .Gloss {
border: none !important;
padding: 0 !important;
margin-top: 0 !important;
}
.Section-Profile .Rank:not(.Rank-Admin) {
color: white;
padding: 3px 5px;
border-radius: 3px;
font-weight: bold;
}
.Section-Profile .Rank[title="Forum Rookie"] {
background-color: var(--theme-license-rookie);
}
.Section-Profile .Rank[title="Forum D License"] {
background-color: var(--theme-license-d);
}
.Section-Profile .Rank[title="Forum C License"] {
background-color: var(--theme-license-c);
}
.Section-Profile .Rank[title="Forum B License"] {
background-color: var(--theme-license-b);
}
.Section-Profile .Rank[title="Forum A License"] {
background-color: var(--theme-license-a);
}
.Section-Profile .Rank[title="Forum Pro License"] {
background-color: var(--theme-license-pro);;
}
.Section-Profile .Panel .FilterMenu li a:not(:hover) {
color: var(--theme-font-color);
}
.Section-Profile [class*="PageBox-boxClass"]{
background-color: var(--theme-background-color);
}
/******************************************************* Best Of *******************************************************/
body.Section-BestOf .Tile {
border-color: var(--theme-border-color);
margin-bottom: 15px !important;
}
body.Section-BestOf .Tile .Reactions {
position: static;
}
body.Section-BestOf ul.FilterMenu li.Active a {
background-color: var(--theme-blue);
border-color: var(--theme-blue) !important;
}
body.Section-BestOf ul.FilterMenu li.Active a:hover {
background-color: var(--iracing-blue);
border-color: var(--iracing-blue) !important;
}
/******************************************************* Badges Page *******************************************************/
.Badges .Box.Leaderboard .Leaderboard__user-list .Leaderboard__user-list__item {
padding: 0.65rem !important;
}
/********************************************** Message Conversation **********************************************/
.Section-Conversation .MessageList {
box-shadow: none !important;
}
.Section-Conversation .MessageList .Item {
box-shadow: var(--theme-box-shadow) !important;
}
.Section-Conversation .Content .pageBox .pageBox .Item .Author a {
color: var(--theme-font-color) !important;
}
.Section-Conversation .MessageForm {
padding: 1.25rem !important;
}
.Section-Conversation .InThisConversation .Username{
color: var(--theme-font-color);
}
/********************************************* Profile ************************************************/
.Profile .Content > .ProfileOptions {
display: none;
}
.Profile .DataList .Item {
box-shadow: var(--theme-box-shadow);
}
/********************************************* Search Page ************************************************/
[class*="searchBar-valueContainer"] {
background-color: var(--theme-background-color) !important;
border-color: var(--theme-border-color) !important;
}
[class*="panelArea-areaOverlayBefore"],
[class*="panelArea-areaOverlayAfter"] {
display: none;
}
[class*="-searchInFilter-label"][class*="-button-radioAsButton"] {
background-color: var(--theme-background-color);
border-color: var(--theme-border-color);
color: var(--theme-font-color);
}
[class*="-searchInFilter-label"][class*="-button-radioAsButton"].isActive {
background-color: var(--theme-blue);
border-color: var(--theme-blue);
color:white !important;
}
/********************************************* LIGHT THEME ************************************************/
@media (prefers-color-scheme: light) {
:root{
--theme-border-color: #dfdfdf;
--theme-font-color: var(--theme-dark);
--theme-header-bg: var(--theme-dark);
--theme-background-color: white;
--theme-pager-bg: white;
--theme-pager-hover: var(--theme-light);
--theme-button-bg: var(--theme-light);
--theme-button-color: var(--theme-dark);
--theme-comment-header-bg: rgba(0,0,0, 0.05);
--theme-comment-admin-header-bg: rgb(223, 39, 39, 0.4);
--theme-signature-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1) inset;
--theme-signature-bg: rgba(0, 0, 0, 0.05);
--theme-signature-color: #666;
--theme-message-quote-embed-bg: var(--theme-light);
--theme-message-quote-embed-header-bg: var(--theme-light-alt);
--theme-message-quote-embed-gradient: linear-gradient(to bottom, transparent, var(--theme-light));
--theme-searchbar-placeholder-color: #cccccc;
}
/*********************** Global ***********************/
body[class*="-vanillaBodyReset"] {
color: var(--theme-font-color);
}
/* remove the background image*/
[class*="-fullBackground-fullBackground"] {
background-blend-mode: color-dodge;
background-color: var(--theme-light);
}
.userContent.userContent h1,
.userContent.userContent h2,
.userContent.userContent h3,
.userContent.userContent h4,
.userContent.userContent h5,
.userContent.userContent h6 {
color: var(--theme-font-color);
}
input[type="text"],
textarea,
input.InputBox,
.inputText.inputText,
.file-upload-choose,
.AdvancedSearch .InputBox,
.AdvancedSearch select,
select{
background-color: white !important;
border-color: var(--theme-border-color) !important;
color: var(--theme-font-color) !important;
}
.SelectWrapper:after{
color: var(--theme-font-color) !important;
}
div.token-input-dropdown.token-input-dropdown {
background-color: #aaa !important;
border-color: var(--theme-border-color) !important;
}
[class*="folderContents-picker"] {
color: var(--theme-font-color);
}
[class*="-tokens"] .tokens__multi-value {
background-color: var(--theme-light) !important;
}
.tokens__menu li {
color: var(--theme-font-color);
}
.DayPicker-Day {
color: var(--theme-font-color);
}
.DayPicker-Day--outside {
color: #aaa;
}
.datePicker-header svg path{
color: var(--theme-font-color);
}
[class*="dropDown-action"][class*="dropDown-action"]{
color: var(--theme-font-color) !important;
}
[class*="dropDown-contentBox"][class*="dropDown-contentBox"] {
background-color: white;
color: var(--theme-font-color);
}
.embedText-body.embedLink-body {
background-color: var(--theme-background-color);
}
/********************** Header Search Bar ******************/
.titleBar .searchBar__placeholder,
.titleBar [class*="searchBar-iconContainer"]{
color: var(--theme-searchbar-placeholder-color);
}
.titleBar [class*="searchBar-valueContainer"] {
background-color: var(--theme-background-color) !important;
border-color: var(--theme-border-color) !important;
}
/********************** Search Page ******************/
[class*="searchBar-iconContainer"] svg path {
fill: var(--theme-font-color);
}
[class*="searchMiscellaneousComponents-sortLabel"],
[class*="searchResult-title"] ,
[class*="searchResult-metas"] [class*="metas-meta"],
[class*="searchResult-metas"] [class*="metas-meta"]:hover,
[class*="searchResult-excerpt"],
[class*="inputBlock-labelAndDescription"]
{
color: var(--theme-font-color);
}
/********************** Breadcrumbs ******************/
nav.BreadcrumbsBox .Breadcrumbs a{
color: var(--theme-font-color);
}
/********************** Flyout ***********************/
.MenuItems,
.Flyout.Flyout,
.richEditorFlyout,
[class*="dropDown-contents-dropDown-contents"] {
background-color: var(--theme-light) !important;
border-color: var(--theme-border-color) !important;
}
.MenuItems.MenuItems li a,
.Flyout.Flyout li a,
[class*="dropDown-contents-dropDown-contents"] li[class*="dropDown-separator"] a {
color: var(--theme-font-color) !important;
}
.dropDown-contents p {
color: var(--theme-font-color);
}
/******************* Navigation *********************/
.Pager.NumberedPager span.Previous,
.Pager.NumberedPager span.Next{
background-color: rgba(0,0,0,0.2) !important;
}
.pageHeadingBox.pageHeadingBox.pageHeadingBox h1:not(.subtitle),
.pageHeadingBox.pageHeadingBox.pageHeadingBox h2:not(.subtitle),
.pageHeadingBox.pageHeadingBox.pageHeadingBox h3:not(.subtitle),
.pageHeadingBox.pageHeadingBox.pageHeadingBox h4:not(.subtitle),
.pageHeadingBox.pageHeadingBox.pageHeadingBox h5:not(.subtitle),
.pageHeadingBox.pageHeadingBox.pageHeadingBox [role="heading"]:not(.subtitle){
color: var(--theme-font-color);
}
.DataList .Item .Title a:not(:hover),
.DateList item h3 a:not(:hover),
.DataList .Item a.Title:not(:hover),
.DataTable .Title.Title a:not(:hover),
.DataTable h3 a:not(:hover),
.DataTable h2 a:not(:hover),
.DataTable.DiscussionsTable a.Title:not(:hover) {
color: var(--theme-font-color) !important;
}
.MessageList .Item.Read .Title,
.DataList .Item.Read .Title,
.DataTable .Item.Read .Title {
color: var(--theme-font-color) !important;
}
.About a:not(:hover),
.Panel.Panel-main .PanelInfo a.ItemLink:not(:hover) {
color: var(--theme-font-color) !important;
}
body.Section-EditProfile .Box .PanelCategories li.Depth3 a.ItemLink:not(:hover),
.BoxFilter:not(.BoxBestOfFilter) .PanelCategories li.Depth3 a.ItemLink:not(:hover),
.BoxCategories.BoxCategories .PanelCategories li.Depth3 a.ItemLink:not(:hover),
.Panel.Panel-main .Box .Heading[aria-level="3"] {
color: var(--theme-font-color) !important;
}
[class*="ListItem-styles-titleLink"]:not(:hover) {
color: var(--theme-font-color);
}
[class*="quickLinks"] [class*="PageBox-boxClass"] {
background-color: var(--theme-light);
overflow: hidden;
}
[class*="quickLinks"] [class*="quickLinks-listItem"]{
background: var(--theme-background-color);
}
[class*="quickLinks"] [class*="quickLinks-listItemTitle"]:not(:hover) {
color: var(--theme-font-color);
}
[class*="dropDown-likeDropDownContent"] {
background: var(--theme-background-color);
border-color: var(--theme-border-color);
}
.Reactions .ReactSprite:not(:hover)::before,
.Reactions .Count,
.Reactions .ReactLabel {
color: var(--theme-font-color);
}
.CommentForm,
.MessageForm {
background-color: var(--theme-light) !important;
}
.CommentForm .InputBox.InputBox.InputBox,
.MessageForm .InputBox.InputBox.InputBox,
.richEditor-frame.InputBox.InputBox.InputBox {
background-color: white !important;
border-color: var(--theme-border-color) !important;
color: var(--theme-font-color) !important;
}
.CommentForm svg path,
.MessageForm svg path,
.richEditor-frame.InputBox.InputBox.InputBox svg path {
fill: var(--theme-dark) !important;
}
.Container ul.token-input-list {
background-color: var(--theme-background-color);
border-color: var(--theme-border-color);
}
li.token-input-token.token-input-token {
border-color: var(--theme-border-color);
}
li.token-input-token.token-input-token p,
li.token-input-token span.token-input-delete-token,
div.token-input-dropdown.token-input-dropdown,
.token-input-dropdown ul li[class*="token-input-dropdown-item"],
.token-input-dropdown ul li[class*="token-input-dropdown-item"] b{
color: var(--theme-font-color) !important;
}
.richEditor [class*="embedExternal"],
.embedImage .embedExternal-content {
background-color: white !important;
border-color: var(--theme-border-color) !important;
color: var(--theme-font-color) !important;
}
.FormWrapper label {
color: var(--theme-font-color) !important;
}
/******************* Home *********************/
/* Featured Discussions */
.Section-CategoryList [class*="-homeWidgetItem-homeWidgetItem"]{
background-color: var(--theme-light);
}
.Section-CategoryList [class*="-homeWidgetItem-name"]{
color: var(--theme-font-color);
}
.Section-CategoryList .DataList .CategoryHeading div[role="heading"]{
color: var(--theme-light) !important;
}
.Section-CategoryList .Content .DataList .Item.pageBox {
background: var(--theme-background-color);
}
/**************** Thread List *******************/
.Section-DiscussionList li[class*="PageBox-boxClass"],
.Section-DiscussionList .Content .pageBox .pageBox {
background: var(--theme-background-color);
}
.Section-DiscussionList div[class*="ListItem-styles-actionsContainer"] svg path {
stroke: var(--theme-blue);
fill: var(--theme-blue);
}
/******************** Post ***********************/
.Section-Discussion [class*="icon-bookmark"] svg path{
stroke: var(--theme-font-color);
}
.Section-Discussion .Content.MainContent .Item {
background: white !important;
}
.Section-Discussion .Item-Header .Author .Username,
.Section-Discussion .Meta.Meta > .MItem,
.Section-Discussion .Meta.Meta > .MItem a,
.Section-Discussion .AuthorInfo > .MItem,
.Section-Discussion .Message
{
color: var(--theme-font-color) !important;
}
.Section-Discussion .MessageList .Item .Message [class*="-quoteEmbed-header"]:not([class*="collapsableContent-gradient"]){
background-color: rgba(125,125,125, 0.1) !important;
}
.Section-Discussion .MessageList .Item .Message [class*="-metas-metaStyles"]{
color: var(--theme-dark);
}
/***** Messages List *******/
.Section-ConversationList .Content .Item.pageBox {
background: var(--theme-background-color);
}
.Section-Conversation .MessageList .Item {
background: var(--theme-background-color) !important;
}
.Profile .DataList .Item {
background-color: var(--theme-background-color);
}
.Section-EditProfile .Box.SideMenu .PanelInfo li a:not(:hover) {
color: var(--theme-font-color);
}
/***** Best Of ******/
body.Section-BestOf .Tile {
background-color: var(--theme-background-color) !important;
color: var(--theme-font-color) !important;
}
body.Section-BestOf .Tile .Title,
body.Section-BestOf .Tile .Title a {
color: var(--theme-font-color);
}
/***** Badges ******/
.Badges .ItemBadge {
background: var(--theme-background-color) !important;
border: 1px solid var(--theme-border-color) !important ;
}
.Badges .ItemBadge .Meta p {
background-color: var(--theme-light) !important;
}
.Badges .Box.Leaderboard {
background-color: var(--theme-background-color);
}
.Badges .Box.Leaderboard .pageHeadingBox{
background-color: var(--theme-light);
}
.Badges .Box.Leaderboard .Leaderboard__user-list .Leaderboard__user-list__item {
border-color: var(--theme-border-color) !important;
}
.Badges .Box.Leaderboard .Leaderboard__user-list .Leaderboard__user-list__item:hover {
background-color: var(--theme-light);
}
.Badges .Box.Leaderboard .Leaderboard__user-list .Leaderboard__user-list__item .Username {
color: var(--theme-font-color);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment