☰

ZwiftPower.com - Dark Mode

ZwiftPower Dark Mode

  1. /* ==UserStyle==
  2. @name           ZwiftPower.com - Dark Mode
  3. @namespace      typpi.online
  4. @homepageURL    https://github.com/Nick2bad4u/UserStyles
  5. @supportURL     https://github.com/Nick2bad4u/UserStyles/issues
  6. @version        1.4.1
  7. @description    ZwiftPower Dark Mode
  8. @author         Nick2bad4u
  9. @license        UnLicense
  10.  
  11. @var color darkColor "Dark Color" #000000
  12. @var color lightColor "Light Color" #ffffff
  13. @var color blueColor "Blue Color" #337ab7
  14. ==/UserStyle== */
  15. @-moz-document domain("zwiftpower.com") {
  16. 	/* Use the variables for colors */
  17. 	:root {
  18. 		--darkColor: var(darkColor);
  19. 		--lightColor: var(lightColor);
  20. 		--blueColor: var(blueColor);
  21. 	}
  22.  
  23. 	html,
  24. 	svg,
  25. 	iframe,
  26. 	nav,
  27. 	.img-circle,
  28. 	rect,
  29. 	.text-gray,
  30. 	.text-left.text-nowrap.athlete_col.sorting_1 > div > span,
  31. 	.fix-right-nav > li > ul,
  32. 	#team_list
  33. 		> tbody
  34. 		> tr:nth-child(n)
  35. 		> td:nth-child(n)
  36. 		> div
  37. 		> span,
  38. 	.highcharts-label.highcharts-tooltip.highcharts-color-0
  39. 		> path,
  40. 	.navbar-nav > li > .dropdown-menu,
  41. 	.label {
  42. 		filter: invert(1) hue-rotate(180deg);
  43. 	}
  44.  
  45. 	.btn-group
  46. 		> .btn:not(:first-child, :last-child, .dropdown-toggle),
  47. 	.btn-group > .btn:last-child:not(:first-child) {
  48. 		filter: invert(0) hue-rotate(0deg) !important;
  49. 	}
  50.  
  51. 	button:nth-child(n) {
  52. 		color: var(--darkColor) !important;
  53. 	}
  54.  
  55. 	#zp_submenu > ul,
  56. 	#zp_submenu > ul > li:nth-child(n) > a {
  57. 		background: var(--lightColor);
  58. 		color: var(--darkColor) !important;
  59. 		text-shadow: 1px 1px 1px var(--lightColor) !important;
  60. 	}
  61.  
  62. 	#highcharts-ptc6m8e-28 > div > span {
  63. 		border-color: var(--darkColor);
  64. 		background: var(--lightColor);
  65. 	}
  66.  
  67. 	#page-footer {
  68. 		border-radius: 50px;
  69. 		background-color: var(--lightColor);
  70. 	}
  71.  
  72. 	button:nth-child(n):hover,
  73. 	.grey_bg {
  74. 		background-color: var(--blueColor) !important;
  75. 	}
  76.  
  77. 	.panel.panel-grey > div.panel-heading {
  78. 		filter: invert(1) hue-rotate(180deg);
  79. 		border-bottom: 1px solid var(--blueColor);
  80. 		background-color: var(--blueColor);
  81. 		color: var(--darkColor);
  82. 		font-weight: 500;
  83. 		font-size: 20px;
  84. 	}
  85.  
  86. 	.highcharts-color-undefined {
  87. 		filter: invert(1) hue-rotate(180deg);
  88. 	}
  89.  
  90. 	#friends_results > thead > tr > th:nth-child(n)::after {
  91. 		opacity: 30%;
  92. 		color: var(--darkColor) !important;
  93. 	}
  94.  
  95. 	#rdetails_body > div.panel-body > a:nth-child(8) {
  96. 		word-wrap: break-word;
  97. 	}
  98. }