CrystalMathLabs Black mode theme
/* ==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);
}
}