Formula 1 - Dark X by Saadski

/* ==UserStyle==
@name         Formula 1 - Dark X
@version      20241203.01.41
@namespace    https://userstyles.world/user/Saadski
@description  Dark theme for Formula 1's official website.
@author       Saadski
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://www.formula1.com/"), url-prefix("https://www.riddle.com"), url-prefix("https://account.formula1.com"), url-prefix("http://ogp.me"), url-prefix("https://f1tv.formula1.com/"), domain("cloudfront.net"), domain("consent.formula1.com"), domain("amplifyapp.com") {
/* Formula 1 - Dark X */
h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
p,
strong,
[id*="headline"],
[class*="headline"],
[id*="header"],
[class*="header"],
[class*="header"] td
{
    color: #ababab !important
}

.nav-global .global-actions .sign-in .login-link .user-icon-text .loggedin-user,
.nav-global .global-actions .sign-in .user-account-actions .user-icon-text .loggedin-user
{
    color: #474747 !important
}

link:hover
{
    border-bottom: solid 2px #313131;
}

li.has-image.show-nav a img
{
    filter: invert(0)grayscale(0)brightness(2)contrast(1);
}

.nav-global .global-links li a,
.resultsarchive-filter .selected .clip,
.resultsarchive-filter-item-link,
.f1-footer li.f1-nav__item .f1-nav__underline,
.nav-global .f2-f3-nav ul li a,
.nav-primary .primary-links > ul > li.expandable > a .link-text,
.f1-border--top-right,
.f1-border--three-right,
.nav-primary .primary-links > ul > li .nav-mainlink .link-text,
.resultsarchive-table .dark,
.nav-header a,
.nav-secondary--overlay .category-label,
.nav-secondary--overlay .f1-cc--collection:focus .tag-name,
.nav-secondary--overlay .f1-cc--collection .tag-name,
.race-calendar .more-cta .sync-calendar--dark .sync-calendar-link,
.race-calendar .more-cta a,
.nav-primary .primary-links > ul > li.expandable > a:after
{
    color: #ababab !important
}

/* width */
::-webkit-scrollbar
{
    width: 5px !important;
    border-radius: 0px !important;
}

/* Track */
::-webkit-scrollbar-track
{
    background: #232323 !important;
    border-radius: 0px !important;
}

/* Handle */
::-webkit-scrollbar-thumb
{
    background: #333 !important;
    border-radius: 0px !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover
{
    background: #555 !important;
    border-radius: 0px !important;
}

*
{
    scrollbar-width: thin;
    scrollbar-color: var(--bw) var(--darker) !important;
}

::selection
{
    background: #f7f7f76e !important;
    color: #000 !important
}

/*.rolex-clock--face {
	background-image: url(https://doc-0s-4o-docs.googleusercontent.com/docs/securesc/9vuna02g1l78o34698ddo7nrltdep60a/kmdnam8ehsaroekrq8m0476n61ljnsus/1581977700000/16832889232922781697/16832889232922781697/1COxiNk0zWGKzMq8XIO6IzA7t0ZfLAqtw?authuser=0);
}
.canvas .race-calendar .rolex-branding .rolex-clock .clock {
	background-image: url(https://doc-0s-4o-docs.googleusercontent.com/docs/securesc/9vuna02g1l78o34698ddo7nrltdep60a/kmdnam8ehsaroekrq8m0476n61ljnsus/1581977700000/16832889232922781697/16832889232922781697/1COxiNk0zWGKzMq8XIO6IzA7t0ZfLAqtw?authuser=0
);
}

/*Clock Face links

http://saadaliracing@saad-ali.net/downloads/Clockface.png

https://lh6.googleusercontent.com/op90oTyyQ1tSMRANKv2mnw_s0jQtaI9CpRp1nXkAxv2dVcGhnClmz5nmn1XkljAZZkKhwW9wf1jjX66QlrWB=w3840-h1778

https://i.pinimg.com/236x/d6/c7/1e/d6c71eae0a89be63512d05009fc8a467--watch-faces.jpg

https://drive.google.com/file/d/1COxiNk0zWGKzMq8XIO6IzA7t0ZfLAqtw/view?usp=sharing

https://doc-0s-4o-docs.googleusercontent.com/docs/securesc/9vuna02g1l78o34698ddo7nrltdep60a/kmdnam8ehsaroekrq8m0476n61ljnsus/1581977700000/16832889232922781697/16832889232922781697/1COxiNk0zWGKzMq8XIO6IzA7t0ZfLAqtw?authuser=0


.canvas .race-calendar .rolex-branding .rolex-clock .clock {
	filter: grayscale(1)invert(1)brightness(0.5)contrast(0.999);
}*/
.canvas .race-calendar .rolex-branding .rolex-clock .clock,
[src="https://www.formula1.com/assets/home/_next/static/media/face.d0a95198.svg"]
{
    content: url(https://i.pinimg.com/564x/9b/6b/de/9b6bde4adb1fcfdad8a8ee97b6c9c5e9.jpg) !important;
    background-size: 100% 100%;
    filter: contrast(1.2);
}

.rolex-clock--face,
[src="/assets/result/_next/static/media/RolexDialImage.a81f846c.webp"],
[alt="Rolex Clock"],
[src="https://www.formula1.com/assets/home/_next/static/media/face.d0a95198.svg"]
{
    content: url(https://i.pinimg.com/564x/9b/6b/de/9b6bde4adb1fcfdad8a8ee97b6c9c5e9.jpg) !important;
    background-size: 100% 100% !important;
    filter: contrast(1.2) !important;
}

.race-calendar #regular_timepiece_canvas,
.rolex-clock--seconds,
.rolex-clock--minutes,
.rolex-clock--hours
{
    filter: hue-rotate(180deg) brightness(1) saturate(0) invert(1)drop-shadow(1px 2px 2px #00000021) !important;
}

[src="/assets/home/_next/static/media/hours.fed8770d.svg"],
[src="/assets/home/_next/static/media/minutes.15643f3a.svg"],
[src="/assets/home/_next/static/media/seconds.ee938cd7.svg"],
[class="animate-hours block w-full h-full m-0 absolute"],
[class="animate-minutes block w-full h-full m-0 absolute"],
[class="animate-seconds block w-full h-full m-0 absolute"]
{
    filter: invert(1) saturate(0) brightness(2)
}

[class="title-bar f1-uppercase f1-center"]
{
    background-color: #0f0f0f !important;
}

.countdown-wrapper .countdown-clock-wrapper .rolex-clock-wrapper,
.countdown-wrapper .countdown-clock-wrapper .rolex-clock-wrapper:before,
.listing-event-tracker .listing-ev-state.countdown-wrapper .countdown-clock-wrapper .countdown-clock,
.bg-006341
{
    background-color: #0f0f0f !important;
}

/* color change */
body
{
    background: #0f0f0f;
}

.nav-global,
.nav-mobile-header,
.nav-global,
.nav-mobile-header,
.nav-primary,
.laptop\:bg-white,
.bg-primary,
[class="w-full hidden laptop:block bg-primary w-full pt-[70px] pb-[20px] laptop:py-0 px-[10px] z-20 order-2 laptop:order-2 laptop:h-[70px]"]
{
    background-color: #000000B0 !important;
    backdrop-filter: blur(15px);
}

.nav-backdrop
{
    background: #0000004F;
}

.laptop\:border-b,
.laptop\:border-r
{
    border-bottom: 0px !important;
    border-right: 0px !important
}

.f1-homepage--hero .f1-pattern-fill .f1-transparent-overlay
{
    background-color: #0f0f0f;
}

.f1-cc.f1-cc--curated-hero-white,
.f1-cc.f1-cc--curated-hero-white .icon,
.f1-cc.f1-cc--curated-hero-white .nav-mobile-header .nav-burger button.open,
.nav-mobile-header .nav-burger .f1-cc.f1-cc--curated-hero-white button.open,
.f1-cc.f1-cc--curated-hero-white .nav-mobile-header .nav-burger button.close,
.nav-mobile-header .nav-burger .f1-cc.f1-cc--curated-hero-white button.close,
.f1-cc.f1-cc--curated-white,
.f1-cc.f1-cc--curated-white .icon,
.f1-cc.f1-cc--curated-white .nav-mobile-header .nav-burger button.open,
.nav-mobile-header .nav-burger .f1-cc.f1-cc--curated-white button.open,
.f1-cc.f1-cc--curated-white .nav-mobile-header .nav-burger button.close,
.nav-mobile-header .nav-burger .f1-cc.f1-cc--curated-white button.close,
.f1-cc.f1-cc--curated-white .f1-cc--caption,
.f1-cc.f1-cc--curated-white .f1-cc--caption:before
{
    background: #1a1a1a;
}

.collection-preview .tags-pattern:before
{
    background: #0f0f0f;
}

.f1-border-color--carbonBlack,
.f1-color--carbonBlack
{
    border-color: #1a1a1a !important;
}

.f1-bg--offWhite
{
    background-color: #0f0f0f;
}

.f1-cc--reg-primary.f1-cc--white-solid,
.f1-cc--reg-primary.f1-cc--white-solid .icon,
.f1-cc--reg-primary.f1-cc--white-solid .nav-mobile-header .nav-burger button.open,
.nav-mobile-header .nav-burger .f1-cc--reg-primary.f1-cc--white-solid button.open,
.f1-cc--reg-primary.f1-cc--white-solid .nav-mobile-header .nav-burger button.close,
.nav-mobile-header .nav-burger .f1-cc--reg-primary.f1-cc--white-solid button.close,
.f1-cc--reg-primary.f1-cc--white-solid .f1-cc--caption,
.f1-cc--reg-secondary.f1-cc--white-solid,
.f1-cc--reg-secondary.f1-cc--white-solid .icon,
.f1-cc--reg-secondary.f1-cc--white-solid .nav-mobile-header .nav-burger button.open,
.nav-mobile-header .nav-burger .f1-cc--reg-secondary.f1-cc--white-solid button.open,
.f1-cc--reg-secondary.f1-cc--white-solid .nav-mobile-header .nav-burger button.close,
.nav-mobile-header .nav-burger .f1-cc--reg-secondary.f1-cc--white-solid button.close,
.f1-cc--reg-secondary.f1-cc--white-solid .f1-cc--caption
{
    background: #1a1a1acc;
}

.f1-bg--white
{
    background-color: #1a1a1a78;
    backdrop-filter: blur(2px);
}

.f1-bg--gray1
{
    background-color: #0f0f0f;
}

.f1-standings .f1-podium
{
    background-color: #0f0f0f78;
}

.f1-bg--gray2
{
    background-color: #2d2d2d;
    color: #a7a7a7 !important;
}

.f1-sponsorship,
.f1-bg--gray6
{
    background-color: #0f0f0f;
}

.f1-footer
{
    background: #0f0f0f;
}

.f1-footer .f1-footer__top
{
    background: #1a1a1a;
    margin-bottom: 0px;
}

.f1-footer .f1-border
{
    border-right: solid 0px #38383f;
    border-bottom: solid 0px #38383f;
    background: #0f0f0f;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.f1-collection .f1-cc--collection:after
{
    background-image: url(none);
}

.race-calendar .parallax
{
    background: #0f0f0f;
    background-image: linear-gradient(rgba(17, 18, 33, 0.95), rgb(4, 4, 4)), linear-gradient(to bottom, #141b2e00, #12121200) !important;
}

.race-calendar .race
{
    margin: 0px 0;
    padding: 30px 0 0;
}

.nav-primary
{
    background: #0f0f0f;
}

.race-calendar .race-time-list .race-time
{
    background-color: #2b2b2b4a;
    color: #ababab;
}

.btn.btn--default,
.btn.btn--follow,
.btn.btn--live
{
    background: #1a1a1a;
}

.nav-primary .primary-links > ul > li .nav-mainlink:active,
.nav-primary .primary-links > ul > li .nav-mainlink:focus,
.nav-primary .primary-links > ul > li .nav-mainlink:hover,
.nav-secondary
{
    background: #1a1a1a;
}

.fom-content-modal .social-share-wrapper .title
{
    color: #1a1a1a;
    margin-bottom: 20px;
}

.f1-bg--carbonBlack
{
    background-color: #0f0f0f00;
}

.nav-secondary
{
    display: none;
    background: #1a1a1a;
}

.nav-primary .primary-links > ul > li .nav-mainlink:active,
.nav-primary .primary-links > ul >...