.folder-list{
display:grid;
grid-template-columns:var(--col);
grid-template-rows:var(--gt2);
grid-auto-rows:0;
gap:0 var(--gap);
width:var(--pw2);
max-width:var(--max);
margin:var(--gap) auto;
min-height:min-content;
position:relative;
z-index:100;
height:var(--gt2);
}
.folder{
display:flex;
align-items:center;
height:var(--gt2);
background-color:var(--ooo);
border:var(--bt1) solid #000;
border-radius:var(--br1);
color:#fff;
position:relative;
white-space:nowrap;
box-shadow:0 0 3px #000;
transition:border-color 100ms ease,box-shadow 100ms ease;
}
.folder.drop-target{
z-index:200;
border-color:var(--ac2);
box-shadow:0 -2px 4px -1px rgba(255,160,0,0.45),0 0 3px #000;
}
.folder.drop-target .folder-name{
transform:translateY(-6px);
font-size:calc(var(--fz2) - 2px);
transition:transform 150ms ease,font-size 150ms ease;
}
.folder.drop-target-same{
opacity:0.45;
pointer-events:none;
}
html[data-dragging="true"] .folder:not(.add-folder){
cursor:grabbing;
}
html[data-folder-drop] .folder-list{
z-index:5000;
}
html[data-folder-drop] .sortable-fallback{
outline:2px solid var(--ac2);
outline-offset:-2px;
border-radius:var(--br1);
}
.overflow-dd{
position:fixed;
display:none;
flex-direction:column;
background:#171717;
border:var(--bt1) solid #000;
border-radius:var(--br1);
z-index:10000;
overflow:hidden;
min-height:500px;
}
.overflow-dd-scroll{
flex:1;
min-height:0;
overflow-y:auto;
overscroll-behavior:contain;
padding:6px var(--gap);
}
.overflow-dd-tabs{
display:flex;
gap:4px;
padding:0 var(--gap) 6px;
flex-shrink:0;
}
.overflow-dd-tab{
flex:1;
padding:10px 0;
border:var(--bt1) solid #333;
border-radius:var(--br2);
background:transparent;
color:#888;
font-size:14px;
font-weight:600;
font-family:inherit;
cursor:pointer;
transition:all 100ms ease;
text-align:center;
}
.overflow-dd-tab:hover{
color:#fff;
border-color:#555;
background:rgba(255,255,255,0.05);
}
.overflow-dd-tab.active{
color:#fff;
border-color:#555;
background:rgba(255,255,255,0.1);
}
.overflow-dd-tab[data-filter="pinned"]{
color:#b87a1a;
border-color:#4a3510;
}
.overflow-dd-tab[data-filter="pinned"]:hover{
color:var(--ac2);
border-color:var(--ac2-dark);
background:rgba(255,165,0,0.08);
}
.overflow-dd-tab[data-filter="pinned"].active{
color:#fff;
border-color:var(--ac2);
background:rgba(255,165,0,0.18);
}
.overflow-dd-tab[data-filter="collab"]{
color:#7c3aad;
border-color:#3d1d56;
}
.overflow-dd-tab[data-filter="collab"]:hover{
color:var(--ac3-light);
border-color:var(--ac3-dark);
background:rgba(168,85,247,0.08);
}
.overflow-dd-tab[data-filter="collab"].active{
color:#fff;
border-color:var(--ac3);
background:rgba(168,85,247,0.18);
}
.overflow-dd-tab[data-filter="shared"]{
color:#2563a8;
border-color:#1a3d6b;
}
.overflow-dd-tab[data-filter="shared"]:hover{
color:#60a5fa;
border-color:#3b82f6;
background:rgba(59,130,246,0.08);
}
.overflow-dd-tab[data-filter="shared"].active{
color:#fff;
border-color:#3b82f6;
background:rgba(59,130,246,0.18);
}
.overflow-dd-scroll .folder{
max-width:500px;
margin-left:auto;
margin-right:auto;
}
.overflow-dd-header{
display:flex;
align-items:center;
gap:8px;
padding:8px var(--gap);
flex-shrink:0;
}
.overflow-dd-close{
display:flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
flex-shrink:0;
cursor:pointer;
border-radius:50%;
color:rgba(255,255,255,0.45);
font-size:26px;
font-weight:700;
line-height:1;
transition:all 120ms ease;
}
.overflow-dd-close:hover{
color:#fff;
background:rgba(255,255,255,0.12);
}
.overflow-dd-filter-input{
flex:1;
min-width:0;
background:#111;
border:var(--bt1) solid #333;
border-radius:var(--br2);
outline:none;
color:#fff;
font-size:var(--fz2);
font-weight:var(--fw1);
font-family:inherit;
padding:8px 12px;
margin:0;
user-select:text;
-webkit-user-select:text;
}
.overflow-dd-filter-input::placeholder{
color:#555;
}
.overflow-dd-filter-input:focus{
border-color:var(--ac2);
}
.overflow-dd-add{
cursor:pointer;
}
.overflow-dd-add .folder-count,
.overflow-dd-add:hover .folder-count,
.overflow-dd-add .folder-count:hover{
border-color:#060606;
background-color:transparent;
}
.overflow-dd-add .count-number{
display:flex;
align-items:center;
justify-content:center;
font-size:var(--fz1);
font-weight:370;
color:#888;
}
.overflow-dd-add .count-number svg{
width:22px;
height:22px;
}
.overflow-dd-add .count-number svg path{
fill:#888;
}
.overflow-dd-add .folder-name{
color:#888;
}
.overflow-dd-add:hover .folder-name{
color:var(--ac2);
}
.overflow-dd-add:hover .count-number{
color:var(--ac2);
}
.overflow-dd-add:hover .count-number svg path{
fill:var(--ac2);
}
.folder *{
font-size:var(--fz3);
font-weight:var(--fw2);
}
.folder-text{
display:flex;
align-items:center;
min-width:0;
flex:1;
color:#fff;
padding:0 12px 0 0;
}
.folder-name{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
flex:1;
}
.folder-pin-icon{
display:flex;
align-items:center;
margin-left:10px;
opacity:0.5;
}
.folder-pin-icon svg{
width:24px;
height:24px;
}
.folder-count{
margin:0 5.4px;
height:40.4px;
width:40.4px;
display:flex;
align-items:center;
justify-content:center;
border:var(--bt1) solid var(--ooo);
border-radius:50%;
flex-shrink:0;
position:relative;
pointer-events:none;
}
.count-number{
display:block;
color:var(--ooo);
}
.cur{
border-color:var(--ac2);
background-color:var(--ac2);
}
.cur:not(.folder-pinned) .folder-text{
color:var(--ooo);
}
.cur:not(.folder-pinned) .folder-count{
background-color:var(--ooo);
border-color:var(--n02);
}
.cur:not(.folder-pinned) .count-number{
color:#fff;
}
.cur.folder-pinned .folder-count{
border-color:var(--ac2-dark-dark);
background-color:var(--ac2-light);
}
.cur.folder-pinned .folder-name{
color:var(--ooo);
}
.folder:not(.folder-pinned):not(.folder-trash):not(.folder-shared):not(.folder-collab) .count-number{
color:#888;
}
.folder-unpinned .folder-count,
.folder-other .folder-count,
.overflow-menu:not(.cur) .folder-count{
border-color:#060606;
}
.empty .folder-text{
color:var(--ooo);
}
.folder-pinned .folder-name{
color:var(--ac2-dark);
}
.folder-pinned .folder-count{
background-color:var(--ac2);
border-color:var(--ac2);
}
.folder-pinned .count-number{
color:#131313;
}
.folder-pinned .folder-pin-icon{
opacity:1;
color:var(--ac2);
}
.folder-pinned svg path{
fill:#555;
}
.folder-other .folder-count,
.overflow-menu:not(.cur) .folder-count{
color:var(--ac2);
}
.folder.empty .folder-text,
.folder.empty .count-number{
color:#666;
}
.cur.folder.empty .folder-text{
color:var(--ooo);
}
.folder-pinned.empty .folder-text,
.folder-pinned.empty .count-number{
color:var(--ooo);
}
.add-folder .count-number{
font-size:var(--fz1);
font-weight:370;
transform:translateY(-1px);
}
.folder-unpinned svg{
display:none;
}
.overflow-wrapper{
position:static;
}
.overflow-menu{
padding-right:26px;
cursor:pointer;
}
.overflow-menu::after{
content:"...";
position:absolute;
right:10px;
top:50%;
transform:translateY(-90%);
color:#fff;
font-size:var(--fz1);
font-weight:bold;
line-height:0.7;
letter-spacing:1px;
pointer-events:none;
}
.overflow-menu.cur::after{
color:#000;
}
.overflow-menu.cur .count-number{
color:var(--ac2);
}
.overflow-menu.folder-trash.cur::after,
.overflow-menu.folder-collab.cur::after{
color:var(--ooo);
}
.overflow-menu.act{
border-color:var(--ac2);
}
.overflow-menu.act::after{
color:var(--ac2);
}
.overflow-menu.act:hover{
border-color:var(--ac2);
background-color:var(--ooo);
}
.overflow-dd .folder{
width:100%;
margin-bottom:6px;
}
.overflow-dd-scroll .folder:last-child{
margin-bottom:0;
}
.folder:hover{
border-color:var(--ac2);
background-color:var(--ooo);
}
.folder:hover .folder-count{
background-color:var(--ac2);
border-color:var(--n02);
}
.folder-count:hover .count-number{
display:none;
}
.folder-other .folder-count:hover .count-number{
display:block;
}
.cur:hover{
border-color:var(--ac2-dark);
background-color:var(--ac2-dark);
}
.cur:hover .folder-name{
color:var(--ooo);
}
.folder-unpinned:hover .folder-count,
.folder-other:hover .folder-count{
color:var(--ac2);
border-color:var(--n02);
background-color:var(--ooo);
}
.folder-count:hover{
color:var(--ooo);
border-color:var(--ac2);
background-color:var(--ac2);
}
.folder-pinned .folder-count:hover path{
fill:var(--ac2);
}
.overflow-menu.cur:hover .folder-count,
.overflow-menu:hover .folder-count{
background-color:var(--ooo);
}
.folder-unpinned .folder-count:hover{
background-color:var(--ac2);
border-color:var(--ooo);
}
.cur.folder-pinned:hover .folder-count{
border-color:var(--ac2-dark-dark);
background-color:var(--ac2-light);
}
.folder-pinned:not(.cur):not(.folder-trash):not(.folder-shared):not(.folder-collab):hover .folder-count{
border-color:var(--ac2);
}
.folder-other *:hover,
.overflow-menu > *{
pointer-events:none;
}
.folder-filler{
height:var(--gt2);
background:linear-gradient(90deg,rgba(255,255,255,0.02) 0%,rgba(255,255,255,0.01) 100%);
border:var(--bt1) solid rgba(255,255,255,0.03);
border-radius:var(--br1);
pointer-events:none;
}
.folder-trash{
background-color:var(--ooo);
}
.folder-trash .folder-name{
color:var(--ac1);
}
.folder-trash .folder-count{
background-color:var(--ac1);
border-color:var(--ac1);
}
.folder-trash .count-number{
color:#131313;
}
.folder-trash:hover{
border-color:var(--ac1);
}
.folder-trash:hover .folder-count,
.folder-trash .folder-count:hover{
background-color:var(--ac1);
border-color:var(--ac1);
}
.folder-trash.cur:hover .folder-count,
.folder-trash.cur .folder-count:hover{
background-color:var(--ooo);
border-color:var(--n02);
}
.folder-trash.cur{
border-color:var(--ac1);
background-color:var(--ac1);
}
.folder-trash.cur .count-number{
color:var(--ac1);
}
.folder-trash.cur:hover{
border-color:var(--ac1-dark);
background-color:var(--ac1-dark);
}
.folder-trash.empty .folder-text{
color:var(--ac1);
}
.folder-trash.empty .count-number{
color:#131313;
}
.folder-trash.cur.empty .count-number{
color:#888;
}
.folder-shared{
background-color:var(--ooo);
}
.folder-shared .folder-name{
color:#60a5fa;
}
.folder-shared .folder-count{
background-color:#3b82f6;
border-color:#3b82f6;
}
.folder-shared:hover{
border-color:#3b82f6;
}
.folder-shared:hover .folder-count{
background-color:#3b82f6;
border-color:#3b82f6;
}
.folder-shared.cur{
border-color:#3b82f6;
background-color:#3b82f6;
}
.folder-shared.cur .count-number{
color:#3b82f6;
}
.folder-shared.cur:hover{
border-color:#2563eb;
background-color:#2563eb;
}
.folder-shared.empty .folder-text{
color:#3b82f6;
}
.folder-shared.folder-pinned{
background-color:var(--ooo);
}
.folder-shared.folder-pinned .folder-name{
color:#60a5fa;
}
.folder-shared.folder-pinned .folder-count{
background-color:#3b82f6;
}
.folder-shared.folder-pinned .folder-pin-icon{
color:#60a5fa;
}
.folder-shared.folder-pinned:hover{
background-color:var(--ooo);
}
.folder-shared.folder-pinned:hover .folder-count{
background-color:#60a5fa;
border-color:#60a5fa;
}
.folder-shared.folder-pinned.cur{
border-color:#3b82f6;
background-color:#3b82f6;
}
.folder-shared.folder-pinned.cur .count-number{
color:#3b82f6;
}
.folder-shared.folder-pinned.cur:hover{
border-color:#2563eb;
background-color:#2563eb;
}
.folder-shared.folder-pinned.cur:hover .folder-count,
.folder-collab.folder-pinned.cur:hover .folder-count{
background-color:var(--ooo);
border-color:var(--n02);
}
.folder-collab{
background-color:var(--ooo);
}
.folder-collab .folder-name{
color:var(--ac3-light);
}
.folder-collab .folder-count{
background-color:var(--ac3);
border-color:var(--ac3);
}
.folder-shared .count-number,
.folder-collab .count-number{
color:#fff;
}
.folder-shared:not(.cur) .count-number,
.folder-collab:not(.cur) .count-number{
color:#000;
}
.folder-collab:hover{
border-color:var(--ac3);
}
.folder-collab:hover .folder-count{
background-color:var(--ac3);
border-color:var(--ac3);
}
.folder-collab.cur{
border-color:var(--ac3);
background-color:var(--ac3);
}
.folder-trash.cur .folder-name,
.folder-shared.cur .folder-name,
.folder-collab.cur .folder-name{
color:var(--ooo);
}
.folder-trash.cur .folder-count,
.folder-shared.cur .folder-count,
.folder-collab.cur .folder-count{
background-color:var(--ooo);
border-color:var(--n02);
}
.folder-collab.cur .count-number{
color:var(--ac3);
}
.folder-collab.cur:hover{
border-color:var(--ac3-dark);
background-color:var(--ac3-dark);
}
.folder-collab.empty .folder-text{
color:var(--ac3);
}
.folder-trash.cur.empty .folder-text,
.folder-shared.cur.empty .folder-text,
.folder-collab.cur.empty .folder-text{
color:var(--ooo);
}
.folder-collab.folder-pinned{
background-color:var(--ooo);
}
.folder-collab.folder-pinned .folder-name{
color:var(--ac3-light);
}
.folder-collab.folder-pinned .folder-count{
background-color:var(--ac3);
}
.folder-shared.folder-pinned .count-number,
.folder-collab.folder-pinned .count-number{
color:#000;
}
.folder-collab.folder-pinned .folder-pin-icon{
color:var(--ac3-light);
}
.folder-collab.folder-pinned:hover{
background-color:var(--ooo);
}
.folder-collab.folder-pinned:hover .folder-count{
background-color:var(--ac3-light);
border-color:var(--ac3-light);
}
.folder-collab.folder-pinned.cur{
border-color:var(--ac3);
background-color:var(--ac3);
}
.folder-shared.folder-pinned.cur .folder-name,
.folder-collab.folder-pinned.cur .folder-name{
color:var(--ooo);
}
.folder-shared.folder-pinned.cur .folder-count,
.folder-collab.folder-pinned.cur .folder-count{
background-color:var(--ooo);
border-color:var(--n02);
}
.folder-collab.folder-pinned.cur .count-number{
color:var(--ac3);
}
.folder-collab.folder-pinned.cur:hover{
border-color:var(--ac3-dark);
background-color:var(--ac3-dark);
}
.folder-sort-ghost{
opacity:0.35;
}
.folder-dragging{
opacity:1;
z-index:1000;
cursor:grabbing;
}
.folder-sort-drag{
opacity:0;
}
.folder.sortable-fallback{
opacity:1;
z-index:1000;
cursor:grabbing;
}
html[data-folder-dragging] .folder,
html[data-folder-dragging] .folder-list,
html[data-folder-dragging] .overflow-dd,
html[data-folder-dragging] .sidebar-folders{
cursor:grabbing;
}
html[data-folder-dragging] .overflow-menu::after{
transition:none;
}
html[data-folder-dragging] .folder-list{
overflow:clip;
overflow-clip-margin:4px;
}