/* ==UserStyle==
@name www.racefans.net
@version 20220619.14.01
@namespace userstyles.world/user/skilla
@description A clean dark-theme for www.racefans.net, featuring:
• Darkened feed, articles, comment-sections, photo-galleries and forum.
• Removal of layout-clutter to optimize readability.
• Adjusted font-sizes, margin and padding to optimize content-width within the given design.
• Tweaked the rather primitively main-menubar design.
• Added some box-shadowing, curved borders and other subtle CSS changes to give it a more modern look.
• Suppressed most - intrusively annoying - ads (full width header, footer and inline in article blocks).
@author skilla
@license Creative Commons License
==/UserStyle== */
@-moz-document domain("racefans.net") {
/* Override main background-color */
body, #page, #f1f-full-width-logo, #new-on-racefans, #sidebar, #wpadminbar,
tr.qualifying-elimination, .content-area .page-header, .hentry, .site-header, .menu-social-container, .secondary, .bbp-login-form, .bbp-widget-login,
.entry-footer, .comments-area, .site-info, .pagination { background-color: #111; color: #eee }
#new-on-racefans ul { background-color: #222; border-radius: 0 0 5px 5px; margin: -14px -14px 0 -14px; padding: 10px }
#new-on-racefans ul li { color: #1280c6 }
#new-on-racefans ul a { color: #ccc }
#new-on-racefans ul a:hover { color: #1280c6; text-decoration: none }
.f1fanatic_brief_meta,
.f1fanatic_brief_meta a { color: #888 }
.hentry { padding: 0; margin: 0 }
/* Override breadcrumbs semi-transparency, it doesn't work well with dark backgrounds */
#breadcrumbs { opacity: 1 }
/* override general padding of content-container */
.content-area { padding: 2.5% 0 0 0 }
.site-main { padding: 0 }
.entry-header-homepage { padding: 0}
.post-thumbnail-homepage { padding: 0 2.5% 2.5% 2.5% }
/* Disable branded table background logo */
.brandedtable { background-image: none }
/* For the search-results */
.page-content { background-color: #222 }
/* Top menu-bar overrides */
#wpadminbar .ab-top-menu>li.hover>.ab-item, #wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus, #wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item, #wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus { background: inherit }
h1.site-title { margin-right: 0.9em }
h1.site-title a, p.site-title a { background-color: #eee; box-shadow: 0px 0px 5px 0px #eee }
#f1f-full-width-logo { padding: 1em 0 5% 1.5em; margin-top: -90px }
#f1f-full-width-logo .main-navigation { margin: 0 0 0 10.6em }
#f1f-full-width-logo .main-navigation .menu-item-has-children>a { padding: 0.5em 1em; width: auto !important }
#f1f-full-width-logo .main-navigation li a { padding-left: 0; padding-right: 0 }
#f1f-full-width-logo .main-navigation ul li a,
#f1f-full-width-logo .main-navigation ul li button { border-bottom: none }
#f1f-full-width-logo .main-navigation ul li ul,
#f1f-full-width-logo .main-navigation ul li ul li { background-color: #181818C0; border-radius: 5px; width: 100% }
#f1f-full-width-logo .main-navigation ul li ul { width: calc(100% - 1em); padding: 0; border: 1px solid #282828C0 }
#f1f-full-width-logo .main-navigation ul li a:hover,
#f1f-full-width-logo .main-navigation ul li ul li:hover,
#f1f-full-width-logo .main-navigation ul li button:hover { background-color: #282828C0; border-radius: 5px }
#f1f-full-width-logo .main-navigation ul li ul { padding-left: 0 }
.sidebar-small-width-container { background-color: #111 }
/* Override main text-color */
label, ul, #breadcrumbs, .hentry, .bbp-login-form, .bbp-widget-login, .entry-footer, .entry-footer a,
.comments-area, .comment-notes, .comment-awaiting-moderation, .logged-in-as, .form-allowed-tags, .site-info, .site-info a
{ color: #eee !important }
/* Only underline article author on hover for cleaner layout */
a.author { text-decoration: none }
a.author:hover { text-decoration: underline }
/* Use nicer hover-effect */
a.post-thumbnail-homepage:hover { opacity: 1; filter: contrast(110%) brightness(110%) }
a.post-thumbnail-homepage:hover img { box-shadow: 0 0 5px 0 #eee }
/* Give about all images and pagination buttons round borders */
article img,
.nav-links a,
.nav-links span { border-radius: 5px }
.nav-menu a { text-decoration: none }
.nav-menu li { margin: 0.75em 0.5em 0 0.5em }
/* Boost article main-image width to 100% */
article img.size-full { width: 97.5%; float: right; margin-bottom: 2.5% }
/* Override Social Media icons to dark */
.sd-content { filter: invert(0.9) }
/* Override main title font size in frontpage-listing and on the article itself, and the article-comments */
.entry-header-homepage h2.entry-title { font-size: 1.4em }
h1.entry-title { font-size: 1.7em }
h2.comments-title { font-size: 1.4em }
/* Override sub-title for page-level - not article-level - titles */
.taxonomy-description { color: #6c9a30; font-weight: bold }
/* Override hide of input fields */
input[type='text'], input[type='password'], input[type='url'], input[type='email'] { height: 30px }
/* Override comments textboxes, separators and reply-buttons*/
textarea { background-color: #333 !important; color: #eee !important }
.comments-area { background-color: #222; border: 1px solid #333; border-radius: 15px; margin: 2.5% 0 0 0 }
.comment-content { padding: 0 0 1.2em 0 }
.comment-list li.depth-1 { border-top: 1px solid #333 }
.comment-list .reply a { display: inline; border: 1px solid #6c9a30; border-radius: 3px; text-decoration: none; padding: 6px 10px }
/* Strip ~100px vertical padding from the footer */
DIV.site-info { height: 50px; padding: 1.25% 0 0 2.5% }
/* Pagination links at the bottom of the main feed */
.pagination .page-numbers { line-height: 2.2em; text-decoration: none !important }
.pagination .next.page-numbers,
.pagination .prev,
.pagination .next { height: 2.2em; width: 125px }
.nav-links span { margin: 0 0.5em }
.pagination .prev:before,
.pagination .next:before { line-height: 1.1em; height: 1.1em; width: auto }
.pagination .prev:hover,
.pagination .next:hover,
.pagination .prev:focus,
.pagination .next:focus { background-color: #eee; color: #1280c6 }
#menu-page li:hover { opacity: 1; background: #111 radial-gradient(rgba(192, 192, 192, 0.30) 0%, transparent 100%) }
/* Image gallery overrids */
.wp-caption-text { color: inherit }
figcaption { background-color: inherit }
/* BB Forum related overrides */
#bbpress-forums div.odd , #bbpress-forums ul.odd { background-color: #111 }
#bbpress-forums div.even, #bbpress-forums ul.even,
#bbpress-forums li.bbp-header, #bbpress-forums li.bbp-footer,
#bbpress-forums div.bbp-forum-header, #bbpress-forums div.bbp-topic-header, #bbpress-forums div.bbp-reply-header,
#buddypress #item-body, #buddypress #item-header,
.bp-user #buddypress, .single-item.groups #buddypress, #buddypress div.item-list-tabs ul,
.single-item.groups #buddypress div#item-header div#item-actions h2,
#buddypress div#subnav.item-list-tabs ul li.last { background-color: #222 }
#buddypress div#subnav.item-list-tabs ul li.last select { color: #eee }
#buddypress div#subnav.item-list-tabs ul li.last select option { background-color: #222; color: #eee }
#buddypress #activity-stream .activity-comments>ul { background-color: #333; border-radius: 5px 0 0 5px }
#bbpress-forums ul.bbp-lead-topic, #bbpress-forums ul.bbp-topics, #bbpress-forums ul.bbp-forums, #bbpress-forums ul.bbp-replies, #bbpress-forums ul.bbp-search-results,
#bbpress-forums li.bbp-header, #bbpress-forums li.bbp-footer,
div.bbp-forum-header, div.bbp-topic-header, div.bbp-reply-header,
#bbpress-forums li.bbp-body ul.forum, #bbpress-forums li.bbp-body ul.topic,
.bbp-pagination-links a
{ border-color: #444 }
.bbp-pagination-links a,
.bbp-pagination-links span,
.bbp-pagination-links span.current,
.bbp-pagination-links span.dots { min-width: 32px; min-height: 30px; padding: 4px; text-align: center }
div.bbp-template-notice.info,
#buddypress #activity-stream .activity-content .activity-header p
{ background-color: #222; border: 0; color: #eee }
#buddypress #activity-stream .load-more { background-color: #333 }
#buddypress #activity-stream .load-more:hover { background-color: #444; border: 1px solid red }
#buddypress .activity-list li.load-more a, #buddypress .activity-list li.load-newest a { color: inherit }
#buddypress .activity-list li.load-more a:hover, #buddypress .activity-list li.load-newest a:hover { font-style: normal }
div.bbp-forum-header, div.bbp-topic-header, div.bbp-reply-header { background-color: #444 !important }
#buddypress .hentry { margin: 0 }
blockquote { color: #eee; background-color: #222; border: none; font-size: 100%; font-style: italic; box-shadow: 0 0 5px 0px #666 }
.login form { background-color: #eee; border-radius: 5px }
.login label { color: #222 !important }
h4 { border-radius: 5px 5px 0 0 }
.menu-social-container { border-radius: 0 0 5px 5px; background: #282828 }
/* svg fill-color (for charts) */
g text { fill: rgb(240, 240, 240) }
/* Hide ads */
.homepage-ad, #F1fanatic-Unit1, #F1fanatic-Unit2, #F1fanatic-Unit3, #F1fanatic-Unit4, #F1fanatic-Unit5, #F1fanatic-Unit6, #F1fanatic-Unit7, #F1fanatic-Unit8, #F1fanatic-Unit9,
.box-ad, .sidebar-ad, #rcjsload_920187, .text-above-ad { display: none !importa...
