.folder-list{
display:grid;
grid-template-columns:var(--col);
grid-template-rows:var(--gx2);
grid-auto-rows:0;
gap:var(--gap);
width:var(--pw2);
max-width:var(--max);
margin:var(--gap) auto;
min-height:min-content;
position:relative;
z-index:100;
height:var(--gx2);
}
.folder{
display:flex;
align-items:center;
height:var(--gx2);
background-color:var(--ooo);
border:var(--bw1) 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{
border-color:var(--ac2);
box-shadow:0 0 0 2px var(--ac2),0 0 12px rgba(var(--ac2-rgb,74,158,255),0.4);
z-index:200;
}
.folder.drop-target .folder-count{
background-color:var(--ac2);
border-color:var(--ac2);
}
html[data-dragging="true"] .folder:not(.add-folder){
cursor:copy;
}
.overflow-dd{
position:fixed;
display:none;
background:#171717;
border:var(--bw1) solid #000;
border-radius:var(--br1);
padding:6px;
z-index:10000;
overflow-y:auto;
scrollbar-width:none;
width:var(--ch1);
min-width:160px;
}
.folder:not(.drop-target){
transform-origin:bottom left;
}
.folder *{
font-size:var(--fz2);
font-weight:var(--fw1);
}
.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;
transform:rotate(-45deg) translate(1.6px,-1.6px);
}
.folder-share-icon{
display:flex;
align-items:center;
margin-left:8px;
opacity:1;
}
.folder-share-icon svg{
width:18px;
height:18px;
}
.folder-count{
margin:0 5.4px;
height:40.4px;
width:40.4px;
display:flex;
align-items:center;
justify-content:center;
border:var(--bw1) solid var(--n02);
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.folder-pinned .folder-name{
color:var(--ooo);
}
.folder:not(.folder-pinned) .count-number{
color:#888;
}
.cur.folder:not(.folder-pinned) .count-number{
color:#fff;
}
.cur.folder-pinned .folder-count{
border-color:var(--ac2-dark-dark);
background-color:var(--ac2-light);
}
.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(--n02);
}
.folder-pinned:not(.cur) .folder-count{
border-color:var(--ac2);
}
.folder-other .folder-count{
color:var(--ac2);
}
.folder.empty .folder-text,.folder.empty .count-number{
color:#555;
}
.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:28px;
font-weight:370;
transform:translateY(-1px);
}
.folder-pinned .folder-pin-icon{
opacity:1;
color:var(--ac2);
}
.folder-unpinned svg{
display:none;
}
.folder-pinned svg path{
fill:#555;
}
.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:24px;
font-weight:bold;
line-height:0.7;
letter-spacing:1px;
pointer-events:none;
}
.overflow-menu.cur::after{
color:#000;
}
.overflow-menu.act .overflow-dd{
display:block;
}
.overflow-menu.cur .count-number{
color:var(--ac2);
}
.overflow-dd .folder{
width:100%;
margin-bottom:6px;
}
.overflow-dd .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;
}
.folder-pinned .folder-count:hover .pinned-icon,.folder-unpinned .folder-count:hover .unpinned-icon{
display:none;
}
.folder-pinned .folder-count:hover .unpinned-icon,.folder-unpinned .folder-count:hover .pinned-icon{
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);
}
.overflow-menu:hover .more-dots{
fill: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):hover .folder-count{
border-color:var(--ac2);
}
.folder-other *:hover,.overflow-menu > *{
pointer-events:none;
}
.folder-filler{
height:var(--gx2);
background:linear-gradient(90deg,rgba(255,255,255,0.02) 0%,rgba(255,255,255,0.01) 100%);
border:var(--bw1) solid rgba(255,255,255,0.03);
border-radius:var(--br1);
pointer-events:none;
}
.folder-shared{
background-color:var(--ooo);
}
.folder-shared .folder-name{
color:#60a5fa;
}
.folder-shared .folder-count{
background-color:#3b82f6;
border-color:var(--n02);
}
.folder-shared .count-number{
color:#fff;
}
.folder-shared .folder-share-icon{
color:#60a5fa;
}
.folder-shared:not(.cur) .count-number{
color:#000;
}
.folder-shared:hover{
border-color:#3b82f6;
}
.folder-shared:hover .folder-count{
background-color:#60a5fa;
border-color:var(--n02);
}
.folder-shared.cur{
border-color:#3b82f6;
background-color:#3b82f6;
}
.folder-shared.cur .folder-name{
color:var(--ooo);
}
.folder-shared.cur .folder-count{
background-color:var(--ooo);
border-color:var(--n02);
}
.folder-shared.cur .count-number{
color:#3b82f6;
}
.folder-shared.cur .folder-share-icon{
color:var(--ooo);
}
.folder-shared.cur:hover{
border-color:#2563eb;
background-color:#2563eb;
}
.folder-shared.empty .folder-text{
color:#3b82f6;
}
.folder-shared.empty .count-number{
color:#fff;
}
.folder-shared.cur.empty .folder-text{
color:var(--ooo);
}