sethwhitaker/iracing_forum_stylish_theme.css

## 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);
    }
}