Last active
July 13, 2021 16:30
-
-
Save sethwhitaker/a822bbaf029d3dc278138460b4e7d1b3 to your computer and use it in GitHub Desktop.
2021 iRacing Forum Stylish Theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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