zwiftalizer.com - Darker Mode [Customizable]

Darker mode for Zwiftalizer - Set theme on site to dark

当前为 2025-01-16 提交的版本,查看 最新版本

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

QingJ © 2025

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