☰

zwiftalizer.com - Darker Mode [Customizable]

Darker mode for Zwiftalizer - Set theme on site to dark

  1. /* ==UserStyle==
  2. @name           zwiftalizer.com - Darker Mode [Customizable]
  3. @namespace      typpi.online
  4. @version        1.0.6
  5. @description    Darker mode for Zwiftalizer - Set theme on site to dark
  6. @author         Nick2bad4u
  7. @license        UnLicense
  8. @homepageURL    https://github.com/Nick2bad4u/UserStyles
  9. @supportURL     https://github.com/Nick2bad4u/UserStyles/issues
  10.  
  11. @var color darker "Darker Color" #000000
  12. @var color green "Green Color" #2dce89
  13. @var color purple "Purple Color" #8965e0
  14. @var color dark "Dark Color" #212529
  15. @var color blue "Blue Color" #08354f
  16. @var color lighter "Lighter Color" #e9ecef
  17. @var color gray "Gray Color" #6c757d
  18. @var color white "White Color" #ffffff
  19. @var color pink "Pink Color" #f3a4b5
  20. ==/UserStyle== */
  21. @-moz-document domain("zwiftalizer.com") {
  22. 	/* Use the variables for colors */
  23. 	:root {
  24. 		--darker: var(darker) !important;
  25. 		--green: var(green) !important;
  26. 		--purple: var(purple) !important;
  27. 		--dark: var(dark) !important;
  28. 		--blue: var(blue) !important;
  29. 		--lighter: var(lighter) !important;
  30. 		--gray: var(gray) !important;
  31. 		--white: var(white) !important;
  32. 		--pink: var(pink) !important;
  33. 	}
  34.  
  35. 	/* Invert colors except images and videos */
  36. 	html,
  37. 	.content,
  38. 	.main-panel,
  39. 	.modal-content {
  40. 		background: var(--darker);
  41. 	}
  42.  
  43. 	.bootstrap-select.show .dropdown-menu:not(.inner),
  44. 	.dropdown-menu.bootstrap-datetimepicker-widget.bottom.open,
  45. 	.dropdown-menu.bootstrap-datetimepicker-widget.top.open,
  46. 	.dropdown.show .dropdown-menu,
  47. 	.dropup.show:not(.bootstrap-select) .dropdown-menu,
  48. 	.navbar .dropdown.show .dropdown-menu,
  49. 	.form-group .form-control,
  50. 	.input-group .form-control,
  51. 	.container,
  52. 	.alert-dismissible.animated {
  53. 		/*Manipulations stuff*/
  54. 		filter: invert(1);
  55. 	}
  56.  
  57. 	.card .card-body,
  58. 	.card {
  59. 		background: var(--darker);
  60. 	}
  61.  
  62. 	.user-activity-heading,
  63. 	.user-activity-heading-right,
  64. 	.table > tbody > tr > td,
  65. 	.table > tbody > tr > th,
  66. 	.table > tfoot > tr > td,
  67. 	.table > tfoot > tr > th,
  68. 	.table > thead > tr > td,
  69. 	.table > thead > tr > th {
  70. 		text-align: center !important;
  71. 	}
  72.  
  73. 	.user-activity a:visited,
  74. 	.user-activity-heading a:visited,
  75. 	.user-activity-heading-right a:visited,
  76. 	.user-activity-right a:visited,
  77. 	.form-check .form-check-label {
  78. 		color: var(--green) !important;
  79. 	}
  80.  
  81. 	.table.details > tbody > tr > td,
  82. 	.session:not(.session.good),
  83. 	.far,
  84. 	.fas {
  85. 		color: var(--purple) !important;
  86. 	}
  87.  
  88. 	.tooltip-inner {
  89. 		/*Box model stuff*/
  90. 		border: 1px solid var(--dark);
  91. 		background: var(--darker) !important;
  92. 		/*Typography stuff*/
  93. 		color: var(--white);
  94. 	}
  95.  
  96. 	.tooltip.show {
  97. 		/*Manipulations stuff*/
  98. 		opacity: 100%;
  99. 	}
  100.  
  101. 	.main-panel > div > div:nth-child(1),
  102. 	.main-panel > div > div:nth-child(2),
  103. 	#root
  104. 		> div.wrapper
  105. 		> div.main-panel
  106. 		> div
  107. 		> div:nth-child(3)
  108. 		> div:nth-child(3),
  109. 	#root
  110. 		> div.wrapper
  111. 		> div.sidebar
  112. 		> div
  113. 		> ul
  114. 		> li:nth-child(8) {
  115. 		/*Display stuff*/
  116. 		display: none;
  117. 	}
  118.  
  119. 	.fixed-plugin,
  120. 	.off-canvas-sidebar .sidebar-wrapper,
  121. 	.sidebar .sidebar-wrapper {
  122. 		/*Box model stuff*/
  123. 		background: var(--blue);
  124. 	}
  125.  
  126. 	.dropbox .heading {
  127. 		color: var(--blue);
  128. 	}
  129.  
  130. 	.fixed-plugin {
  131. 		opacity: 20%;
  132. 	}
  133.  
  134. 	.fixed-plugin:hover {
  135. 		opacity: 100%;
  136. 	}
  137.  
  138. 	/* Additional Table Styles */
  139. 	table {
  140. 		margin: 20px 0;
  141. 		border-collapse: collapse;
  142. 		background-color: var(--lighter);
  143. 		width: 100%;
  144. 		font-family: var(--font-family-sans-serif);
  145. 	}
  146.  
  147. 	table th,
  148. 	table td {
  149. 		border: 1px solid var(--gray);
  150. 		padding: 10px 15px;
  151. 		text-align: left;
  152. 	}
  153.  
  154. 	table th {
  155. 		/*Box model stuff*/
  156. 		background-color: var(--blue);
  157. 		color: var(--white);
  158. 		/*Typography stuff*/
  159. 		font-weight: 700;
  160. 	}
  161.  
  162. 	table tr:nth-child(even) {
  163. 		background-color: var(--darker);
  164. 	}
  165.  
  166. 	table tr:hover {
  167. 		background-color: var(--blue);
  168. 		color: var(--white);
  169. 	}
  170.  
  171. 	a:hover {
  172. 		color: var(--pink) !important;
  173. 	}
  174.  
  175. 	/* Responsive Design */
  176. 	/* stylelint-disable-next-line media-query-no-invalid -- UnNeeded */
  177. 	@media (max-width: var(--breakpoint-sm)) {
  178. 		table {
  179. 			display: block;
  180. 			overflow-x: auto;
  181. 			white-space: nowrap;
  182. 		}
  183.  
  184. 		table thead,
  185. 		table tbody,
  186. 		table th,
  187. 		table td,
  188. 		table tr {
  189. 			display: block;
  190. 		}
  191.  
  192. 		table th {
  193. 			text-align: left;
  194. 		}
  195.  
  196. 		table th::before {
  197. 			float: left;
  198. 			content: attr(data-label);
  199. 			font-weight: bold;
  200. 		}
  201.  
  202. 		table td {
  203. 			text-align: right;
  204. 		}
  205.  
  206. 		table td::before {
  207. 			float: left;
  208. 			content: attr(data-label);
  209. 			font-weight: bold;
  210. 		}
  211. 	}
  212.  
  213. 	#root > div.wrapper > div.main-panel > footer {
  214. 		display: none;
  215. 	}
  216.  
  217. 	/* stylelint-disable-next-line no-duplicate-selectors -- UnNeeded  */
  218. 	:root {
  219. 		--indigo: #5603ad;
  220. 		--red: #f5365c;
  221. 		--orange: #fc6719;
  222. 		--yellow: #ffd12c;
  223. 		--teal: #11cdef;
  224. 		--cyan: #2bffc6;
  225. 		--gray-dark: #4a4a63;
  226. 		--light: #ced4da;
  227. 		--primary: #f96332;
  228. 		--secondary: #f4f5f7;
  229. 		--success: #5cb85c;
  230. 		--info: #178acc;
  231. 		--warning: #f0ad4e;
  232. 		--danger: #fd5d93;
  233. 		--light2: #adb5bd;
  234. 		--dark2: #0d0d0d;
  235. 		--default: #4f4f4f;
  236. 		--neutral: #fff;
  237. 		--breakpoint-xs: 0;
  238. 		--breakpoint-sm: 576px;
  239. 		--breakpoint-md: 768px;
  240. 		--breakpoint-lg: 992px;
  241. 		--breakpoint-xl: 1200px;
  242. 		--font-family-sans-serif: -apple-system,
  243. 			blinkmacsystemfont, 'Segoe UI', roboto,
  244. 			'Helvetica Neue', arial, 'Noto Sans', sans-serif,
  245. 			'Apple Color Emoji', 'Segoe UI Emoji',
  246. 			'Segoe UI Symbol', 'Noto Color Emoji';
  247. 		--font-family-monospace: sfmono-regular, menlo, monaco,
  248. 			consolas, 'Liberation Mono', 'Courier New', monospace;
  249. 	}
  250. }