UserStyles/CrystalMathLabs-BlackMode.user.css at main · Nick2bad4u/UserStyles · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/* ==UserStyle==
@name           crystalmathlabs.com - Black Mode
@namespace      typpi.online
@version        1.0.5
@description    CrystalMathLabs Black mode theme
@author         Nick2bad4u
@license        UnLicense
@homepageURL    https://github.com/Nick2bad4u/UserStyles
@supportURL     https://github.com/Nick2bad4u/UserStyles/issues

@var color background-black "Background Black" #000000
@var color background-dark "Background Dark" #252323
@var color color-green "Green" #32cd32
@var color background-banner "Banner Background" #006400
@var color color-white "White" #ffffff
@var color color-pink "Pink" #ff69b4
==/UserStyle== */
/*

This CSS file applies a dark mode theme to the CrystalMathLabs website.

Variables:
	--background-black: Background color for main elements.
	--background-dark: Background color for secondary elements.
	--color-green: Text color for hover effects.
	--background-banner: Background color for the global banner.
	--color-white: Text color for main elements.
	--color-pink: Text color for links in the global banner.

Styles:
	- Applies dark background colors to the main content areas.
	- Adds rounded corners and padding to the menubar, hints, XP table, and footer.
	- Changes the background and text color of menu items on hover.
	- Sets the background and text color of the global banner and its links.
	- Styles input fields and buttons with dark backgrounds and white text.
*/
@-moz-document domain("crystalmathlabs.com") {
	:root {
		--background-black: var(background-black);
		--background-dark: var(background-dark);
		--color-green: var(color-green);
		--background-banner: var(background-banner);
		--color-white: var(color-white);
		--color-pink: var(color-pink);
	}

	/* Invert colors except images and videos */
	html,
	body,
	#wrap,
	#contentwrap,
	.news,
	.menubar ul li ul.dropdown {
		background: var(--background-black) !important;
		background-color: var(--background-black) !important;
	}

	.menubar,
	.hint,
	.xp-table > div:first-child,
	#footer {
		border-radius: 20px;
		background: var(--background-dark) !important;
		background-color: var(--background-dark) !important;
		padding-right: 10px;
		padding-left: 10px;
	}

	#menu
		> ul
		> li:nth-child(n)
		> ul
		> li:nth-child(n)
		> a:hover {
		border-radius: 20px;
		background: var(--background-dark) !important;
		background-color: var(--background-dark) !important;
		padding-left: 20px;
		color: var(--color-green);
	}

	#global-banner {
		background: var(--background-banner);
		color: var(--color-white);
	}

	#global-banner a {
		color: var(--color-pink);
	}

	input:nth-child(1),
	input:nth-child(2),
	input[type='text' i],
	#xp-calc-form button {
		background: var(--background-black) !important;
		background-color: var(--background-black) !important;
		color: var(--color-white);
	}
}