Darker mode for Zwiftalizer - Set theme on site to dark
/* ==UserStyle==
@name zwiftalizer.com - Darker Mode [Customizable]
@namespace typpi.online
@version 1.0.6
@description Darker mode for Zwiftalizer - Set theme on site to dark
@author Nick2bad4u
@license UnLicense
@homepageURL https://github.com/Nick2bad4u/UserStyles
@supportURL https://github.com/Nick2bad4u/UserStyles/issues
@var color darker "Darker Color" #000000
@var color green "Green Color" #2dce89
@var color purple "Purple Color" #8965e0
@var color dark "Dark Color" #212529
@var color blue "Blue Color" #08354f
@var color lighter "Lighter Color" #e9ecef
@var color gray "Gray Color" #6c757d
@var color white "White Color" #ffffff
@var color pink "Pink Color" #f3a4b5
==/UserStyle== */
@-moz-document domain("zwiftalizer.com") {
/* Use the variables for colors */
:root {
--darker: var(darker) !important;
--green: var(green) !important;
--purple: var(purple) !important;
--dark: var(dark) !important;
--blue: var(blue) !important;
--lighter: var(lighter) !important;
--gray: var(gray) !important;
--white: var(white) !important;
--pink: var(pink) !important;
}
/* Invert colors except images and videos */
html,
.content,
.main-panel,
.modal-content {
background: var(--darker);
}
.bootstrap-select.show .dropdown-menu:not(.inner),
.dropdown-menu.bootstrap-datetimepicker-widget.bottom.open,
.dropdown-menu.bootstrap-datetimepicker-widget.top.open,
.dropdown.show .dropdown-menu,
.dropup.show:not(.bootstrap-select) .dropdown-menu,
.navbar .dropdown.show .dropdown-menu,
.form-group .form-control,
.input-group .form-control,
.container,
.alert-dismissible.animated {
/*Manipulations stuff*/
filter: invert(1);
}
.card .card-body,
.card {
background: var(--darker);
}
.user-activity-heading,
.user-activity-heading-right,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
text-align: center !important;
}
.user-activity a:visited,
.user-activity-heading a:visited,
.user-activity-heading-right a:visited,
.user-activity-right a:visited,
.form-check .form-check-label {
color: var(--green) !important;
}
.table.details > tbody > tr > td,
.session:not(.session.good),
.far,
.fas {
color: var(--purple) !important;
}
.tooltip-inner {
/*Box model stuff*/
border: 1px solid var(--dark);
background: var(--darker) !important;
/*Typography stuff*/
color: var(--white);
}
.tooltip.show {
/*Manipulations stuff*/
opacity: 100%;
}
.main-panel > div > div:nth-child(1),
.main-panel > div > div:nth-child(2),
#root
> div.wrapper
> div.main-panel
> div
> div:nth-child(3)
> div:nth-child(3),
#root
> div.wrapper
> div.sidebar
> div
> ul
> li:nth-child(8) {
/*Display stuff*/
display: none;
}
.fixed-plugin,
.off-canvas-sidebar .sidebar-wrapper,
.sidebar .sidebar-wrapper {
/*Box model stuff*/
background: var(--blue);
}
.dropbox .heading {
color: var(--blue);
}
.fixed-plugin {
opacity: 20%;
}
.fixed-plugin:hover {
opacity: 100%;
}
/* Additional Table Styles */
table {
margin: 20px 0;
border-collapse: collapse;
background-color: var(--lighter);
width: 100%;
font-family: var(--font-family-sans-serif);
}
table th,
table td {
border: 1px solid var(--gray);
padding: 10px 15px;
text-align: left;
}
table th {
/*Box model stuff*/
background-color: var(--blue);
color: var(--white);
/*Typography stuff*/
font-weight: 700;
}
table tr:nth-child(even) {
background-color: var(--darker);
}
table tr:hover {
background-color: var(--blue);
color: var(--white);
}
a:hover {
color: var(--pink) !important;
}
/* Responsive Design */
/* stylelint-disable-next-line media-query-no-invalid -- UnNeeded */
@media (max-width: var(--breakpoint-sm)) {
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
table thead,
table tbody,
table th,
table td,
table tr {
display: block;
}
table th {
text-align: left;
}
table th::before {
float: left;
content: attr(data-label);
font-weight: bold;
}
table td {
text-align: right;
}
table td::before {
float: left;
content: attr(data-label);
font-weight: bold;
}
}
#root > div.wrapper > div.main-panel > footer {
display: none;
}
/* stylelint-disable-next-line no-duplicate-selectors -- UnNeeded */
:root {
--indigo: #5603ad;
--red: #f5365c;
--orange: #fc6719;
--yellow: #ffd12c;
--teal: #11cdef;
--cyan: #2bffc6;
--gray-dark: #4a4a63;
--light: #ced4da;
--primary: #f96332;
--secondary: #f4f5f7;
--success: #5cb85c;
--info: #178acc;
--warning: #f0ad4e;
--danger: #fd5d93;
--light2: #adb5bd;
--dark2: #0d0d0d;
--default: #4f4f4f;
--neutral: #fff;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system,
blinkmacsystemfont, 'Segoe UI', roboto,
'Helvetica Neue', arial, 'Noto Sans', sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--font-family-monospace: sfmono-regular, menlo, monaco,
consolas, 'Liberation Mono', 'Courier New', monospace;
}
}