123 lines
2.7 KiB
CSS
123 lines
2.7 KiB
CSS
header[data-focused] [data-nav-item],
|
|
header[data-focused] nav:before,
|
|
header[data-focused] nav:after {
|
|
background: #99989f;
|
|
}
|
|
|
|
[data-nav-item] {
|
|
border-radius: 10rem !important;
|
|
--themable-button-text: var(--bg-color);
|
|
}
|
|
|
|
[data-nav-item]:hover {
|
|
filter: brightness(1.25);
|
|
}
|
|
|
|
[data-nav-item="test"] {
|
|
background: #553d94;
|
|
}
|
|
|
|
[data-nav-item="leaderboards"] {
|
|
background: #6851a4;
|
|
}
|
|
|
|
[data-nav-item="about"] {
|
|
background: #7962b3;
|
|
}
|
|
|
|
[data-nav-item="settings"] {
|
|
background: #8c76c3;
|
|
}
|
|
|
|
[data-nav-item="alerts"],
|
|
[data-nav-item="login"] {
|
|
background: #9f8ad4;
|
|
}
|
|
|
|
[data-nav-item="account"]:hover [data-ui-element="navAvatar"] svg {
|
|
fill: var(--bg-color);
|
|
}
|
|
|
|
[data-nav-item="alerts"],
|
|
[data-ui-element="navAvatar"] {
|
|
& [data-ui-element="notificationBubble"] {
|
|
box-shadow: none;
|
|
background: var(--bg-color);
|
|
}
|
|
}
|
|
|
|
[data-nav-item="account"] {
|
|
--themable-button-text: var(--bg-color);
|
|
--themable-button-bg: var(--sub-color);
|
|
--themable-button-hover-bg: color-mix(
|
|
in srgb,
|
|
var(--sub-color) 75%,
|
|
white 15%
|
|
);
|
|
--themable-button-hover-text: color-mix(
|
|
in srgb,
|
|
var(--themable-button-text) 75%,
|
|
white 15%
|
|
);
|
|
[data-ui-element="userLevel"] {
|
|
background: var(--themable-button-text);
|
|
color: var(--themable-button-bg);
|
|
}
|
|
}
|
|
|
|
header[data-focused] {
|
|
[data-nav-item="test"],
|
|
[data-nav-item="leaderboards"],
|
|
[data-nav-item="about"],
|
|
[data-nav-item="settings"] {
|
|
--themable-button-bg: var(--sub-alt-color);
|
|
--nav-focus-opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
body.crtmode {
|
|
& [data-nav-item="test"] {
|
|
box-shadow:
|
|
3px 0 1px color-mix(in srgb, #553d94 20%, transparent),
|
|
-3px 0 color-mix(in srgb, #553d94 30%, transparent),
|
|
0 0 3px;
|
|
}
|
|
|
|
& [data-nav-item="leaderboards"] {
|
|
box-shadow:
|
|
3px 0 1px color-mix(in srgb, #6851a4 20%, transparent),
|
|
-3px 0 color-mix(in srgb, #6851a4 30%, transparent),
|
|
0 0 3px;
|
|
}
|
|
|
|
& [data-nav-item="about"] {
|
|
box-shadow:
|
|
3px 0 1px color-mix(in srgb, #7962b3 20%, transparent),
|
|
-3px 0 color-mix(in srgb, #7962b3 30%, transparent),
|
|
0 0 3px;
|
|
}
|
|
|
|
& [data-nav-item="settings"] {
|
|
box-shadow:
|
|
3px 0 1px color-mix(in srgb, #8c76c3 20%, transparent),
|
|
-3px 0 color-mix(in srgb, #8c76c3 30%, transparent),
|
|
0 0 3px;
|
|
}
|
|
|
|
& [data-nav-item="alerts"],
|
|
& [data-nav-item="account"],
|
|
& [data-nav-item="login"] {
|
|
box-shadow:
|
|
3px 0 1px color-mix(in srgb, #9f8ad4 20%, transparent),
|
|
-3px 0 color-mix(in srgb, #9f8ad4 30%, transparent),
|
|
0 0 3px;
|
|
}
|
|
|
|
& header[data-focused] [data-nav-item] {
|
|
box-shadow:
|
|
3px 0 1px color-mix(in srgb, #99989f 20%, transparent),
|
|
-3px 0 color-mix(in srgb, #99989f 30%, transparent),
|
|
0 0 3px;
|
|
}
|
|
}
|