Skip to content

Formula 1 - Dark X by Saadski

Screenshot of Formula 1 - Dark X

Details

AuthorSaadski

LicenseNo License

Categoryformula1.com

Created

Updated

Size54 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Dark theme for Formula 1's official website.

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Formula 1 - Dark X
@version      20240915.13.53
@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;
}

::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;
}

[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 > li .nav-mainlink:focus,
.nav-primary .primary-links > ul > li .nav-mainlink:hover a
{
    background: #1a1a1a;
}

.template-driverindex .driver-teaser
{
    border: solid 0px #1a1a1a;
}

.driver-title
{
    background: #0f0f0f;
}

.driver-teaser .driver-number
{
    color: #818181;
}

.template-driverindex .driver-index-notes
{
    border-bottom: solid 2px #1a1a1a;
}

.template-driverindex .driver-index .content-area
{
    background: #0f0f0f;
}

.f1-theme--dark .f1-bg--theme
{
    background-color:...

Reviews

No reviews yet.