110 lines
2.6 KiB
SCSS
110 lines
2.6 KiB
SCSS
@use "_vars";
|
|
|
|
.sidebar-1tnWFu {
|
|
> .container-1NXEtd {
|
|
#channels {
|
|
.containerDefault-YUSmu3 {
|
|
.unread-36eUEm {
|
|
border-radius: 0;
|
|
width: 2px;
|
|
height: 22px;
|
|
margin-top: 0;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.content-1gYQeQ {
|
|
|
|
|
|
> a > .name-28HaxV {
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
}
|
|
|
|
&:hover .content-1gYQeQ > a > .name-28HaxV,
|
|
> modeSelected-3DmyhH > .content-1gYQeQ > a > .name-28HaxV {
|
|
transform: translateX(5px);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
> .panels-3wFtMD {
|
|
// width: 48px;
|
|
// height: 92px;
|
|
|
|
> .container-YkUktl {
|
|
.avatar-b5OQ1N {
|
|
border-radius: vars.$avatar-roundness;
|
|
}
|
|
|
|
.nameTag-sc-gpq {
|
|
width: min-content;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.usernameContainer-3PPkWq {
|
|
max-width: 17ch;
|
|
transition: width ease-in-out 0.2s;
|
|
display: inline-block;
|
|
}
|
|
|
|
&:hover .usernameContainer-3PPkWq {
|
|
width: max-content;
|
|
}
|
|
|
|
> div:last-child {
|
|
position: relative;
|
|
margin-left: auto;
|
|
|
|
&::before {
|
|
content: "";
|
|
width: 2.5px;
|
|
height: 2.5px;
|
|
position: absolute;
|
|
|
|
border-bottom: 2px solid var(--interactive-normal);
|
|
border-left: 2px solid var(--interactive-normal);
|
|
|
|
top: 50%;
|
|
|
|
transform: translateY(-50%) rotate(45deg);
|
|
|
|
transition: all 0.4s ease-in-out;
|
|
}
|
|
|
|
&::before:hover {
|
|
border-left: 2px solid var(--interactive-active);
|
|
}
|
|
|
|
> :not(:last-child) {
|
|
width: 0;
|
|
opacity: 0;
|
|
transition: width 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
|
}
|
|
|
|
&:hover::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
&:hover > :not(:last-child) {
|
|
width: 32px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|