.sidebar-toggle{
position:fixed;
top:var(--gap);
left:var(--gap);
z-index:9991;
display:flex;
align-items:center;
justify-content:center;
width:var(--nbz);
height:var(--nbz);
padding:0;
border:none;
background:var(--ooo);
color:rgba(255,255,255,0.4);
border:var(--bt1) solid #000;
border-radius:var(--br1);
box-shadow:0 0 3px #000;
cursor:pointer;
flex-shrink:0;
transition:background 100ms ease,color 100ms ease,left 200ms cubic-bezier(0.4,0,0.2,1);
display: none;
}
.sidebar-toggle:hover{
color:rgba(255,255,255,0.85);
background:rgba(255,255,255,0.08);
}
.sidebar-toggle:active{
background:rgba(255,255,255,0.14);
}
.sidebar-toggle svg{
width:24px;
height:24px;
}
body.sidebar-open .sidebar-toggle{
color:#fff;
background:rgba(255,255,255,0.1);
left:calc(var(--gap) + 280px + var(--gap));
}
.sidebar-panel{
position:fixed;
top:var(--gap);
left:var(--gap);
width:280px;
max-height:calc(100vh - var(--gap) * 2);
background:var(--ooo);
border:var(--bt1) solid #000;
border-radius:var(--br1);
box-shadow:0 0 3px #000;
z-index:9990;
display:flex;
flex-direction:column;
transform:translateX(calc(-100% - var(--gap)));
transition:transform 200ms cubic-bezier(0.4,0,0.2,1);
overflow:hidden;
}
body.sidebar-open .sidebar-panel{
transform:translateX(0);
}
body.sidebar-open{
padding-left:calc(280px + var(--gap));
transition:padding-left 200ms cubic-bezier(0.4,0,0.2,1);
}
body:not(.sidebar-open){
transition:padding-left 200ms cubic-bezier(0.4,0,0.2,1);
}
.sidebar-backdrop{
display:none;
}
.sidebar-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 10px 10px 16px;
flex-shrink:0;
}
.sidebar-header-title{
font-size:var(--fz4);
font-weight:700;
color:rgba(255,255,255,0.55);
letter-spacing:0.5px;
}
.sidebar-close-btn{
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
padding:0;
border:none;
background:transparent;
color:rgba(255,255,255,0.3);
border-radius:50%;
cursor:pointer;
transition:background 100ms ease,color 100ms ease;
}
.sidebar-close-btn:hover{
color:#fff;
background:rgba(255,255,255,0.1);
}
.sidebar-close-btn svg{
width:22px;
height:22px;
}
.sidebar-folders{
flex:1;
overflow-y:auto;
overflow-x:hidden;
padding:0 6px 6px;
scrollbar-width:thin;
scrollbar-color:rgba(255,255,255,0.1) transparent;
}
.sidebar-folders::-webkit-scrollbar{
width:5px;
}
.sidebar-folders::-webkit-scrollbar-thumb{
background:rgba(255,255,255,0.1);
border-radius:3px;
}
.sidebar-folders .folder{
width:100%;
margin-bottom:6px;
height:var(--gt2);
}
.sidebar-folders .folder:last-child{
margin-bottom:0;
}
.sidebar-folders .sidebar-add-row{
width:100%;
margin-top:2px;
}
.sidebar-folders .folder.folder-sort-ghost{
opacity:0.3;
}
.sidebar-folders .folder.folder-sort-chosen{
z-index:10;
}
.sidebar-folders .folder.folder-sort-drag{
opacity:0;
}
.sidebar-folders .folder.sortable-fallback{
opacity:1;
z-index:10000;
background:var(--ooo);
box-shadow:0 2px 4px rgba(0,0,0,0.5);
cursor:grabbing;
}
@media(max-width:600px){
.sidebar-toggle{
width:40px;
height:40px;
}
.sidebar-toggle svg{
width:20px;
height:20px;
}
.sidebar-panel{
width:calc(100vw - var(--gap) * 2);
max-width:320px;
}
body.sidebar-open{
padding-left:0;
}
body.sidebar-open .sidebar-toggle{
left:calc(100vw - var(--gap) - 40px);
}
}