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