☰

crystalmathlabs.com - Black Mode

CrystalMathLabs Black mode theme

  1. /* ==UserStyle==
  2. @name           crystalmathlabs.com - Black Mode
  3. @namespace      typpi.online
  4. @version        1.0.5
  5. @description    CrystalMathLabs Black mode theme
  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 background-black "Background Black" #000000
  12. @var color background-dark "Background Dark" #252323
  13. @var color color-green "Green" #32cd32
  14. @var color background-banner "Banner Background" #006400
  15. @var color color-white "White" #ffffff
  16. @var color color-pink "Pink" #ff69b4
  17. ==/UserStyle== */
  18. /*
  19.  
  20. This CSS file applies a dark mode theme to the CrystalMathLabs website.
  21.  
  22. Variables:
  23. 	--background-black: Background color for main elements.
  24. 	--background-dark: Background color for secondary elements.
  25. 	--color-green: Text color for hover effects.
  26. 	--background-banner: Background color for the global banner.
  27. 	--color-white: Text color for main elements.
  28. 	--color-pink: Text color for links in the global banner.
  29.  
  30. Styles:
  31. 	- Applies dark background colors to the main content areas.
  32. 	- Adds rounded corners and padding to the menubar, hints, XP table, and footer.
  33. 	- Changes the background and text color of menu items on hover.
  34. 	- Sets the background and text color of the global banner and its links.
  35. 	- Styles input fields and buttons with dark backgrounds and white text.
  36. */
  37. @-moz-document domain("crystalmathlabs.com") {
  38. 	:root {
  39. 		--background-black: var(background-black);
  40. 		--background-dark: var(background-dark);
  41. 		--color-green: var(color-green);
  42. 		--background-banner: var(background-banner);
  43. 		--color-white: var(color-white);
  44. 		--color-pink: var(color-pink);
  45. 	}
  46.  
  47. 	/* Invert colors except images and videos */
  48. 	html,
  49. 	body,
  50. 	#wrap,
  51. 	#contentwrap,
  52. 	.news,
  53. 	.menubar ul li ul.dropdown {
  54. 		background: var(--background-black) !important;
  55. 		background-color: var(--background-black) !important;
  56. 	}
  57.  
  58. 	.menubar,
  59. 	.hint,
  60. 	.xp-table > div:first-child,
  61. 	#footer {
  62. 		border-radius: 20px;
  63. 		background: var(--background-dark) !important;
  64. 		background-color: var(--background-dark) !important;
  65. 		padding-right: 10px;
  66. 		padding-left: 10px;
  67. 	}
  68.  
  69. 	#menu
  70. 		> ul
  71. 		> li:nth-child(n)
  72. 		> ul
  73. 		> li:nth-child(n)
  74. 		> a:hover {
  75. 		border-radius: 20px;
  76. 		background: var(--background-dark) !important;
  77. 		background-color: var(--background-dark) !important;
  78. 		padding-left: 20px;
  79. 		color: var(--color-green);
  80. 	}
  81.  
  82. 	#global-banner {
  83. 		background: var(--background-banner);
  84. 		color: var(--color-white);
  85. 	}
  86.  
  87. 	#global-banner a {
  88. 		color: var(--color-pink);
  89. 	}
  90.  
  91. 	input:nth-child(1),
  92. 	input:nth-child(2),
  93. 	input[type='text' i],
  94. 	#xp-calc-form button {
  95. 		background: var(--background-black) !important;
  96. 		background-color: var(--background-black) !important;
  97. 		color: var(--color-white);
  98. 	}
  99. }