69 lines
1.3 KiB
SCSS
69 lines
1.3 KiB
SCSS
|
@import "theme.scss";
|
||
|
|
|
||
|
|
#server-list-container {
|
||
|
|
display: flex;
|
||
|
|
flex-flow: column;
|
||
|
|
overflow-y: scroll;
|
||
|
|
box-sizing: border-box;
|
||
|
|
flex: none; /* >:| NOT GONNA SHINK BOI */
|
||
|
|
width: 72px; /* TODO: auto-calculated from content */
|
||
|
|
height: calc(100vh - 22px);
|
||
|
|
padding-top: 8px;
|
||
|
|
overflow-y: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
#server-list {
|
||
|
|
display: flex;
|
||
|
|
flex-flow: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
#server-list::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#add-server,
|
||
|
|
#server-list .server {
|
||
|
|
cursor: pointer;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#add-server .pill,
|
||
|
|
#server-list .server .pill {
|
||
|
|
background-color: $header-primary;
|
||
|
|
width: 8px;
|
||
|
|
height: 0;
|
||
|
|
border-radius: 4px 4px;
|
||
|
|
margin-left: -4px;
|
||
|
|
margin-right: 8px;
|
||
|
|
transition: height .1s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
#server-list .server.active .pill {
|
||
|
|
height: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#server-list .server.unread:not(.active) .pill {
|
||
|
|
height: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#add-server:hover .pill,
|
||
|
|
#server-list .server:not(.active):hover .pill {
|
||
|
|
height: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#add-server img,
|
||
|
|
#server-list .server img {
|
||
|
|
width: 48px;
|
||
|
|
height: 48px;
|
||
|
|
border-radius: 24px;
|
||
|
|
transition: border-radius .1s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
#add-server:hover img,
|
||
|
|
#server-list .server:hover img,
|
||
|
|
#server-list .server.active img {
|
||
|
|
border-radius: 16px;
|
||
|
|
}
|