96 lines
1.9 KiB
CSS
96 lines
1.9 KiB
CSS
[data-nav-item] {
|
|
border-radius: 10rem !important;
|
|
--themable-button-text: #121520;
|
|
--themable-button-hover-text: var(--bg-color);
|
|
}
|
|
|
|
[data-nav-item]:hover {
|
|
filter: brightness(1.25);
|
|
}
|
|
|
|
[data-nav-item="test"] {
|
|
background: #f94348;
|
|
}
|
|
|
|
[data-nav-item="leaderboards"] {
|
|
background: #9261ff;
|
|
}
|
|
|
|
[data-nav-item="about"] {
|
|
background: #3cc5f8;
|
|
}
|
|
|
|
[data-nav-item="settings"] {
|
|
background: #4acb8a;
|
|
}
|
|
|
|
[data-nav-item="alerts"],
|
|
[data-nav-item="login"],
|
|
[data-nav-item="account"] {
|
|
--themable-button-text: #393c73;
|
|
--themable-button-hover-text: var(--text-color);
|
|
}
|
|
|
|
[data-nav-item="account"] .xpBar {
|
|
bottom: -0.75rem !important;
|
|
}
|
|
|
|
[data-nav-item="account"]:hover svg {
|
|
/* color: var(--text-color); */
|
|
}
|
|
|
|
header[data-focused] {
|
|
& [data-nav-item] {
|
|
--nav-focus-opacity: 1;
|
|
background: var(--sub-color);
|
|
}
|
|
& [data-nav-item="alerts"],
|
|
& [data-nav-item="login"],
|
|
& [data-nav-item="account"] {
|
|
--nav-focus-opacity: 0;
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
body.crtmode {
|
|
& [data-nav-item="test"] {
|
|
box-shadow:
|
|
3px 0 1px color-mix(in srgb, #f94348 20%, transparent),
|
|
-3px 0 color-mix(in srgb, #f94348 30%, transparent),
|
|
0 0 3px;
|
|
}
|
|
|
|
& [data-nav-item="leaderboards"] {
|
|
box-shadow:
|
|
3px 0 1px color-mix(in srgb, #9261ff 20%, transparent),
|
|
-3px 0 color-mix(in srgb, #9261ff 30%, transparent),
|
|
0 0 3px;
|
|
}
|
|
|
|
& [data-nav-item="about"] {
|
|
box-shadow:
|
|
3px 0 1px color-mix(in srgb, #3cc5f8 20%, transparent),
|
|
-3px 0 color-mix(in srgb, #3cc5f8 30%, transparent),
|
|
0 0 3px;
|
|
}
|
|
|
|
& [data-nav-item="settings"] {
|
|
box-shadow:
|
|
3px 0 1px color-mix(in srgb, #4acb8a 20%, transparent),
|
|
-3px 0 color-mix(in srgb, #4acb8a 30%, transparent),
|
|
0 0 3px;
|
|
}
|
|
|
|
& header[data-focused] {
|
|
& [data-nav-item] {
|
|
box-shadow:
|
|
3px 0 1px var(--crt-sub-color-glow),
|
|
-3px 0 var(--crt-sub-color-glow);
|
|
}
|
|
|
|
& [data-nav-item="account"] {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|