☰

zwiftalizer.com - Darker Mode [Customizable]

Darker mode for Zwiftalizer - Set theme on site to dark

当前为 2025-01-21 提交的版本，查看 最新版本。

  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
  44. 		.dropdown-menu:not(.inner),
  45. 	.dropdown-menu.bootstrap-datetimepicker-widget.bottom.open,
  46. 	.dropdown-menu.bootstrap-datetimepicker-widget.top.open,
  47. 	.dropdown.show .dropdown-menu,
  48. 	.dropup.show:not(.bootstrap-select)
  49. 		.dropdown-menu,
  50. 	.navbar .dropdown.show .dropdown-menu,
  51. 	.form-group .form-control,
  52. 	.input-group .form-control,
  53. 	.container,
  54. 	.alert-dismissible.animated {
  55. 		/*Manipulations stuff*/
  56. 		filter: invert(1);
  57. 	}
  58.  
  59. 	.card .card-body,
  60. 	.card {
  61. 		background: var(--darker);
  62. 	}
  63.  
  64. 	.user-activity-heading,
  65. 	.user-activity-heading-right,
  66. 	.table > tbody > tr > td,
  67. 	.table > tbody > tr > th,
  68. 	.table > tfoot > tr > td,
  69. 	.table > tfoot > tr > th,
  70. 	.table > thead > tr > td,
  71. 	.table > thead > tr > th {
  72. 		text-align: center !important;
  73. 	}
  74.  
  75. 	.user-activity a:visited,
  76. 	.user-activity-heading a:visited,
  77. 	.user-activity-heading-right a:visited,
  78. 	.user-activity-right a:visited,
  79. 	.form-check .form-check-label {
  80. 		color: var(--green) !important;
  81. 	}
  82.  
  83. 	.table.details > tbody > tr > td,
  84. 	.session:not(.session.good),
  85. 	.far,
  86. 	.fas {
  87. 		color: var(--purple) !important;
  88. 	}
  89.  
  90. 	.tooltip-inner {
  91. 		/*Box model stuff*/
  92. 		border: 1px solid var(--dark);
  93. 		background: var(--darker) !important;
  94. 		/*Typography stuff*/
  95. 		color: var(--white);
  96. 	}
  97.  
  98. 	.tooltip.show {
  99. 		/*Manipulations stuff*/
  100. 		opacity: 100%;
  101. 	}
  102.  
  103. 	.main-panel > div > div:nth-child(1),
  104. 	.main-panel > div > div:nth-child(2),
  105. 	#root
  106. 		> div.wrapper
  107. 		> div.main-panel
  108. 		> div
  109. 		> div:nth-child(3)
  110. 		> div:nth-child(3),
  111. 	#root
  112. 		> div.wrapper
  113. 		> div.sidebar
  114. 		> div
  115. 		> ul
  116. 		> li:nth-child(8) {
  117. 		/*Display stuff*/
  118. 		display: none;
  119. 	}
  120.  
  121. 	.fixed-plugin,
  122. 	.off-canvas-sidebar .sidebar-wrapper,
  123. 	.sidebar .sidebar-wrapper {
  124. 		/*Box model stuff*/
  125. 		background: var(--blue);
  126. 	}
  127.  
  128. 	.dropbox .heading {
  129. 		color: var(--blue);
  130. 	}
  131.  
  132. 	.fixed-plugin {
  133. 		opacity: 20%;
  134. 	}
  135.  
  136. 	.fixed-plugin:hover {
  137. 		opacity: 100%;
  138. 	}
  139.  
  140. 	/* Additional Table Styles */
  141. 	table {
  142. 		margin: 20px 0;
  143. 		border-collapse: collapse;
  144. 		background-color: var(--lighter);
  145. 		width: 100%;
  146. 		font-family: var(--font-family-sans-serif);
  147. 	}
  148.  
  149. 	table th,
  150. 	table td {
  151. 		border: 1px solid var(--gray);
  152. 		padding: 10px 15px;
  153. 		text-align: left;
  154. 	}
  155.  
  156. 	table th {
  157. 		/*Box model stuff*/
  158. 		background-color: var(--blue);
  159. 		color: var(--white);
  160. 		/*Typography stuff*/
  161. 		font-weight: 700;
  162. 	}
  163.  
  164. 	table tr:nth-child(even) {
  165. 		background-color: var(--darker);
  166. 	}
  167.  
  168. 	table tr:hover {
  169. 		background-color: var(--blue);
  170. 		color: var(--white);
  171. 	}
  172.  
  173. 	a:hover {
  174. 		color: var(--pink) !important;
  175. 	}
  176.  
  177. 	/* Responsive Design */
  178. 	/* stylelint-disable-next-line media-query-no-invalid */
  179. 	@media (max-width: var(--breakpoint-sm)) {
  180. 		table {
  181. 			display: block;
  182. 			overflow-x: auto;
  183. 			white-space: nowrap;
  184. 		}
  185.  
  186. 		table thead,
  187. 		table tbody,
  188. 		table th,
  189. 		table td,
  190. 		table tr {
  191. 			display: block;
  192. 		}
  193.  
  194. 		table th {
  195. 			text-align: left;
  196. 		}
  197.  
  198. 		table th::before {
  199. 			float: left;
  200. 			content: attr(data-label);
  201. 			font-weight: bold;
  202. 		}
  203.  
  204. 		table td {
  205. 			text-align: right;
  206. 		}
  207.  
  208. 		table td::before {
  209. 			float: left;
  210. 			content: attr(data-label);
  211. 			font-weight: bold;
  212. 		}
  213. 	}
  214.  
  215. 	#root > div.wrapper > div.main-panel > footer {
  216. 		display: none;
  217. 	}
  218.  
  219. 	/* stylelint-disable-next-line no-duplicate-selectors */
  220. 	:root {
  221. 		--indigo: #5603ad;
  222. 		--red: #f5365c;
  223. 		--orange: #fc6719;
  224. 		--yellow: #ffd12c;
  225. 		--teal: #11cdef;
  226. 		--cyan: #2bffc6;
  227. 		--gray-dark: #4a4a63;
  228. 		--light: #ced4da;
  229. 		--primary: #f96332;
  230. 		--secondary: #f4f5f7;
  231. 		--success: #5cb85c;
  232. 		--info: #178acc;
  233. 		--warning: #f0ad4e;
  234. 		--danger: #fd5d93;
  235. 		--light2: #adb5bd;
  236. 		--dark2: #0d0d0d;
  237. 		--default: #4f4f4f;
  238. 		--neutral: #fff;
  239. 		--breakpoint-xs: 0;
  240. 		--breakpoint-sm: 576px;
  241. 		--breakpoint-md: 768px;
  242. 		--breakpoint-lg: 992px;
  243. 		--breakpoint-xl: 1200px;
  244. 		--font-family-sans-serif: -apple-system,
  245. 			blinkmacsystemfont, 'Segoe UI', roboto,
  246. 			'Helvetica Neue', arial, 'Noto Sans',
  247. 			sans-serif, 'Apple Color Emoji',
  248. 			'Segoe UI Emoji', 'Segoe UI Symbol',
  249. 			'Noto Color Emoji';
  250. 		--font-family-monospace: sfmono-regular,
  251. 			menlo, monaco, consolas, 'Liberation Mono',
  252. 			'Courier New', monospace;
  253. 	}
  254. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址