Dark theme for Formula 1's official website.
Formula 1 - Dark X by Saadski
Details
AuthorSaadski
LicenseNo License
Categoryformula1.com
Created
Updated
Size54 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
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:...