103 lines
1.5 KiB
SCSS
103 lines
1.5 KiB
SCSS
.sidenav {
|
|
z-index: 10;
|
|
background-color: transparent;
|
|
width: 225px;
|
|
height: calc(100vh - 65px);
|
|
position: absolute;
|
|
top: 65px;
|
|
transition: 0.25s;
|
|
box-shadow: 5px 0px 30px 0px #000;
|
|
padding-bottom: 20px;
|
|
@media (max-width: 613px) {
|
|
top: 105px;
|
|
}
|
|
}
|
|
|
|
:host-context(.ltr-layout) .sidenav {
|
|
left: -250px;
|
|
}
|
|
|
|
:host-context(.rtl-layout) .sidenav {
|
|
right: -250px;
|
|
}
|
|
|
|
.ellipsis {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.scrollable {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.sidenav.open {
|
|
display: block;
|
|
background-color: var(--bg);
|
|
}
|
|
|
|
:host-context(.ltr-layout) .sidenav.open {
|
|
left: 0;
|
|
}
|
|
|
|
:host-context(.rtl-layout) .sidenav.open {
|
|
right: 0;
|
|
}
|
|
|
|
.sidenav a, button{
|
|
text-decoration: none;
|
|
color: lightgray;
|
|
margin-left: 20px;
|
|
}
|
|
.sidenav a:hover {
|
|
color: white;
|
|
}
|
|
.sidenav nav {
|
|
width: 100%;
|
|
height: calc(100vh - 65px);
|
|
background-color: var(--bg);
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
@media (max-width: 991px) {
|
|
padding-bottom: 200px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-height: 450px) {
|
|
.sidenav a {font-size: 18px;}
|
|
}
|
|
|
|
.badge-default {
|
|
background-color: black;
|
|
}
|
|
|
|
.badge-og {
|
|
background-color: var(--title-fg);
|
|
}
|
|
|
|
.badge-pleb {
|
|
background-color: #3ccbe3;
|
|
}
|
|
|
|
.badge-chad {
|
|
background-color: #957d0b;
|
|
}
|
|
|
|
.badge-whale {
|
|
background-color: var(--tertiary);
|
|
}
|
|
|
|
.badge-silver {
|
|
background-color: #95a5a6;
|
|
}
|
|
|
|
.badge-gold {
|
|
background-color: #f1c40f;
|
|
}
|
|
|
|
.badge-platinum {
|
|
background-color: var(--tertiary);
|
|
} |