132 lines
4.7 KiB
CSS
132 lines
4.7 KiB
CSS
.navbar-toggler {
|
|
background-color: rgba(56, 189, 248, 0.1);
|
|
border: 1px solid rgba(56, 189, 248, 0.25);
|
|
}
|
|
|
|
.top-row {
|
|
min-height: 3.75rem;
|
|
background: linear-gradient(180deg, rgba(13, 19, 31, 0.95) 0%, rgba(9, 13, 22, 0.95) 100%);
|
|
border-bottom: 1px solid rgba(56, 189, 248, 0.15);
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-size: 1.15rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: #f0f6fc;
|
|
}
|
|
|
|
.brand-glow {
|
|
color: #38bdf8;
|
|
text-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.brand-text {
|
|
background: linear-gradient(135deg, #ffffff 30%, #38bdf8 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.badge-nav-live {
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
padding: 0.2rem 0.45rem;
|
|
border-radius: 4px;
|
|
background: rgba(56, 189, 248, 0.2);
|
|
color: #38bdf8;
|
|
border: 1px solid rgba(56, 189, 248, 0.4);
|
|
box-shadow: 0 0 6px rgba(56, 189, 248, 0.3);
|
|
}
|
|
|
|
.bi {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
margin-right: 0.75rem;
|
|
top: -1px;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.bi-house-door-fill-nav-menu {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.bi-galaxy-nav-menu {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2338bdf8' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='2.5' fill='%2338bdf8'/%3E%3Ccircle cx='2.5' cy='4' r='1.5' fill='%2338bdf8'/%3E%3Ccircle cx='13.5' cy='5' r='1.5' fill='%2338bdf8'/%3E%3Ccircle cx='4' cy='13' r='1.5' fill='%2338bdf8'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%2338bdf8'/%3E%3Cpath stroke='%2338bdf8' stroke-width='1.2' stroke-linecap='round' d='M2.5 4L8 8m0 0l5.5-3M8 8l-4 5m4-5l4 4' opacity='.65'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.bi-star-systems-nav-menu {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23f59e0b' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.5' fill='%23f59e0b'/%3E%3Cpath stroke='%23f59e0b' stroke-width='1.2' stroke-linecap='round' d='M8 1v2.5M8 12.5V15M1 8h2.5M12.5 8H15M3 3l1.8 1.8M11.2 11.2l1.8 1.8M3 13l1.8-1.8M11.2 4.8l1.8-1.8' opacity='.75'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.bi-masteries-nav-menu {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a78bfa' viewBox='0 0 16 16'%3E%3Cpath d='M8 0.5l2.2 4.6 5 .7-3.6 3.6.9 5-4.5-2.4-4.5 2.4.9-5-3.6-3.6 5-.7L8 0.5z' fill='%23a78bfa'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.bi-units-nav-menu {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2310b981' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' stroke='%2310b981' stroke-width='1.3' fill='none'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%2310b981'/%3E%3Cpath stroke='%2310b981' stroke-width='1.3' d='M8 0v4M8 12v4M0 8h4M12 8h4'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.nav-item {
|
|
font-size: 0.92rem;
|
|
padding-bottom: 0.4rem;
|
|
}
|
|
|
|
.nav-item:first-of-type {
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.nav-item:last-of-type {
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.nav-item ::deep a {
|
|
color: #94a3b8;
|
|
border-radius: 8px;
|
|
height: 2.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 2.75rem;
|
|
padding: 0 0.85rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.nav-item ::deep a.active {
|
|
background: linear-gradient(90deg, rgba(56, 189, 248, 0.15) 0%, rgba(56, 189, 248, 0.05) 100%);
|
|
color: #38bdf8;
|
|
border-color: rgba(56, 189, 248, 0.35);
|
|
box-shadow: inset 0 0 12px rgba(56, 189, 248, 0.12), 0 0 8px rgba(56, 189, 248, 0.1);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-item ::deep a:hover:not(.active) {
|
|
background-color: rgba(56, 189, 248, 0.08);
|
|
color: #e2e8f0;
|
|
border-color: rgba(56, 189, 248, 0.15);
|
|
}
|
|
|
|
@media (min-width: 641px) {
|
|
.navbar-toggler {
|
|
display: none;
|
|
}
|
|
|
|
.collapse {
|
|
/* Never collapse the sidebar for wide screens */
|
|
display: block;
|
|
}
|
|
|
|
.nav-scrollable {
|
|
/* Allow sidebar to scroll for tall menus */
|
|
height: calc(100vh - 3.75rem);
|
|
overflow-y: auto;
|
|
}
|
|
}
|