☰

zwiftalizer.com - Darker Mode

Darker mode for Zwiftalizer - Set theme on site to dark

当前为 2024-12-22 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           zwiftalizer.com - Darker Mode
  3. @namespace      typpi.online
  4. @version        1.0.1
  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. ==/UserStyle== */
  10. @-moz-document domain("zwiftalizer.com")
  11. {
  12. 	/* Invert colors except images and videos */
  13. 	html,
  14. 	.content,
  15. 	.main-panel
  16. 	{
  17. 		background: var(--darker);
  18. 	}
  19.  
  20. 	.bootstrap-select.show .dropdown-menu:not(.inner),
  21. 	.dropdown-menu.bootstrap-datetimepicker-widget.bottom.open,
  22. 	.dropdown-menu.bootstrap-datetimepicker-widget.top.open,
  23. 	.dropdown.show .dropdown-menu,
  24. 	.dropup.show:not(.bootstrap-select) .dropdown-menu,
  25. 	.navbar .dropdown.show .dropdown-menu,
  26. 	.form-group .form-control,
  27. 	.input-group .form-control,
  28. 	.container
  29. 	{
  30. 		filter: invert(1);
  31. 	}
  32.  
  33. 	.card .card-body,
  34. 	.card
  35. 	{
  36. 		background: var(--darker);
  37. 	}
  38.  
  39. 	.user-activity-heading,
  40. 	h5.user-activity-heading-right
  41. 	{
  42. 		text-align: center;
  43. 	}
  44.  
  45. 	.tooltip-inner
  46. 	{
  47. 		background: var(--darker) !important;
  48. 		color: #FFF;
  49. 		border: 1px solid var(--dark);
  50. 	}
  51.  
  52. 	.tooltip.show
  53. 	{
  54. 		opacity: 1;
  55. 	}
  56.  
  57.  
  58. 	.main-panel > div > div:nth-child(1),
  59. 	.main-panel > div > div:nth-child(2),
  60. 	#root > div.wrapper > div.main-panel > div > div:nth-child(3) > div:nth-child(3),
  61. 	#root > div.wrapper > div.sidebar > div > ul > li:nth-child(8)
  62. 	{
  63. 		display: none;
  64. 	}
  65.  
  66. 	.fixed-plugin,
  67. 	.off-canvas-sidebar .sidebar-wrapper,
  68. 	.sidebar .sidebar-wrapper
  69. 	{
  70. 		background: var(--blue);
  71. 	}
  72.  
  73. 	.dropbox .heading
  74. 	{
  75. 		color: var(--blue);
  76. 	}
  77.  
  78. 	.fixed-plugin
  79. 	{
  80. 		opacity: 20%;
  81. 	}
  82.  
  83. 	.fixed-plugin:hover
  84. 	{
  85. 		opacity: 100%;
  86. 	}
  87.  
  88. 	/* Additional Table Styles */
  89. 	table
  90. 	{
  91. 		width: 100%;
  92. 		border-collapse: collapse;
  93. 		background-color: var(--lighter);
  94. 		margin: 20px 0;
  95. 		font-family: var(--font-family-sans-serif);
  96. 	}
  97.  
  98. 	table th,
  99. 	table td
  100. 	{
  101. 		padding: 10px 15px;
  102. 		border: 1px solid var(--gray);
  103. 		text-align: left;
  104. 	}
  105.  
  106. 	table th
  107. 	{
  108. 		background-color: var(--blue);
  109. 		color: var(--white);
  110. 		font-weight: 700;
  111. 	}
  112.  
  113. 	table tr:nth-child(even)
  114. 	{
  115. 		background-color: var(--darker);
  116. 	}
  117.  
  118. 	table tr:hover
  119. 	{
  120. 		background-color: var(--blue);
  121. 		color: var(--white);
  122. 	}
  123.  
  124. 	a:hover
  125. 	{
  126. 		color: var(--pink) !important;
  127. 	}
  128.  
  129. 	/* Responsive Design */
  130. 	@media (max-width: var(--breakpoint-sm))
  131. 	{
  132. 		table
  133. 		{
  134. 			display: block;
  135. 			overflow-x: auto;
  136. 			white-space: nowrap;
  137. 		}
  138.  
  139. 		table thead,
  140. 		table tbody,
  141. 		table th,
  142. 		table td,
  143. 		table tr
  144. 		{
  145. 			display: block;
  146. 		}
  147.  
  148. 		table th
  149. 		{
  150. 			text-align: left;
  151. 		}
  152.  
  153. 		table th::before
  154. 		{
  155. 			content: attr(data-label);
  156. 			float: left;
  157. 			font-weight: bold;
  158. 		}
  159.  
  160. 		table td
  161. 		{
  162. 			text-align: right;
  163. 		}
  164.  
  165. 		table td::before
  166. 		{
  167. 			content: attr(data-label);
  168. 			float: left;
  169. 			font-weight: bold;
  170. 		}
  171. 	}
  172.  
  173. 	#root > div.wrapper > div.main-panel > footer
  174. 	{
  175. 		display: none;
  176. 	}
  177.  
  178. 	:root
  179. 	{
  180. 		--blue: #08354F;
  181. 		--indigo: #5603ad;
  182. 		--purple: #8965e0;
  183. 		--pink: #f3a4b5;
  184. 		--red: #f5365c;
  185. 		--orange: #fc6719;
  186. 		--yellow: #ffd12c;
  187. 		--green: #2dce89;
  188. 		--teal: #11cdef;
  189. 		--cyan: #2bffc6;
  190. 		--gray: #6c757d;
  191. 		--gray-dark: #4a4a63;
  192. 		--light: #ced4da;
  193. 		--lighter: #e9ecef;
  194. 		--primary: #f96332;
  195. 		--secondary: #f4f5f7;
  196. 		--success: #5cb85c;
  197. 		--info: #178acc;
  198. 		--warning: #f0ad4e;
  199. 		--danger: #fd5d93;
  200. 		--light: #adb5bd;
  201. 		--dark: #212529;
  202. 		--dark2: #0D0D0D;
  203. 		--default: #4f4f4f;
  204. 		--white: #fff;
  205. 		--neutral: #fff;
  206. 		--darker: #000;
  207. 		--breakpoint-xs: 0;
  208. 		--breakpoint-sm: 576px;
  209. 		--breakpoint-md: 768px;
  210. 		--breakpoint-lg: 992px;
  211. 		--breakpoint-xl: 1200px;
  212. 		--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";
  213. 		--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  214. 	}
  215. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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