.folder-banner{
width:var(--pw2);
max-width:var(--max);
height:120px;
margin:var(--gap) auto;
background-color:#131313;
box-shadow:0 0 3px #000;
border:2px solid #000;
border-radius:var(--br1);
display:flex;
align-items:center;
padding:0 calc(var(--gap) * 1.2);
overflow:hidden;
gap:calc(var(--gap) * 0.6);
}
.folder-banner-icon{
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
}
.folder-banner-icon svg{
width:44px;
height:44px;
fill:#fff;
stroke:none;
opacity:0.35;
}
.folder-banner-name{
font-size:28px;
font-weight:700;
font-family:"dosis";
color:#fff;
line-height:1.1;
text-overflow:ellipsis;
white-space:nowrap;
flex:1;
min-width:0;
}
.folder-banner-meta{
display:flex;
align-items:center;
gap:10px;
flex-shrink:0;
margin-left:auto;
}
.folder-banner-count{
font-size:var(--fz2);
color:#fff;
font-weight:var(--fw1);
opacity:0.55;
}
.banner-pin-btn,
.banner-share-btn{
display:none;
padding:0 14px;
height:34px;
border:2px solid rgba(255,255,255,0.25);
background:transparent;
color:rgba(255,255,255,0.55);
font-size:13px;
font-weight:700;
border-radius:50px;
cursor:pointer;
align-items:center;
gap:6px;
transition:background 100ms ease,color 100ms ease,border-color 100ms ease;
}
.banner-pin-btn.vis,
.banner-share-btn.vis{
display:flex;
}
.banner-btn-hover{
display:none;
}
.banner-pin-btn:hover .banner-btn-label,
.banner-share-btn:hover .banner-btn-label{
display:none;
}
.banner-pin-btn:hover .banner-btn-hover,
.banner-share-btn:hover .banner-btn-hover{
display:inline;
}
.banner-pin-btn:hover,
.banner-share-btn:hover{
border-color:rgba(255,255,255,0.5);
color:#fff;
background:rgba(255,255,255,0.1);
}
.banner-pin-btn:active,
.banner-share-btn:active{
background:rgba(255,255,255,0.15);
}
.folder-banner.folder-banner-shared{
background-color:#3b82f6;
}
.folder-banner.folder-banner-shared .folder-banner-name,
.folder-banner.folder-banner-shared .folder-banner-count,
.folder-banner.folder-banner-shared .folder-banner-type{
color:var(--ooo);
}
.folder-banner.folder-banner-shared .folder-banner-icon svg{
fill:var(--ooo);
opacity:0.25;
}
.folder-banner.folder-banner-shared .banner-pin-btn,
.folder-banner.folder-banner-shared .banner-share-btn{
border-color:rgba(0,0,0,0.25);
color:rgba(0,0,0,0.55);
}
.folder-banner.folder-banner-shared .banner-pin-btn:hover,
.folder-banner.folder-banner-shared .banner-share-btn:hover{
border-color:rgba(0,0,0,0.5);
color:var(--ooo);
background:rgba(0,0,0,0.1);
}
.folder-banner.folder-banner-pinned{
background-color:var(--ac2);
}
.folder-banner.folder-banner-pinned .folder-banner-name,
.folder-banner.folder-banner-pinned .folder-banner-count,
.folder-banner.folder-banner-pinned .folder-banner-type{
color:var(--ooo);
}
.folder-banner.folder-banner-pinned .folder-banner-icon svg{
fill:var(--ooo);
opacity:0.25;
}
.folder-banner.folder-banner-pinned .banner-pin-btn,
.folder-banner.folder-banner-pinned .banner-share-btn{
border-color:rgba(0,0,0,0.25);
color:rgba(0,0,0,0.55);
}
.folder-banner.folder-banner-pinned .banner-pin-btn:hover,
.folder-banner.folder-banner-pinned .banner-share-btn:hover{
border-color:rgba(0,0,0,0.5);
color:var(--ooo);
background:rgba(0,0,0,0.1);
}
.folder-banner.folder-banner-shared.folder-banner-pinned{
background-color:#3b82f6;
}
.folder-banner.folder-banner-trash{
background-color:var(--ac1);
}
.folder-banner.folder-banner-trash .folder-banner-name,
.folder-banner.folder-banner-trash .folder-banner-count,
.folder-banner.folder-banner-trash .folder-banner-type{
color:var(--ooo);
}
.folder-banner.folder-banner-trash .folder-banner-icon svg{
fill:none;
stroke:var(--ooo);
opacity:0.5;
}
.folder-banner.folder-banner-trash .banner-pin-btn,
.folder-banner.folder-banner-trash .banner-share-btn{
border-color:rgba(0,0,0,0.25);
color:rgba(0,0,0,0.55);
}
.folder-banner.folder-banner-trash .banner-pin-btn:hover,
.folder-banner.folder-banner-trash .banner-share-btn:hover{
border-color:rgba(0,0,0,0.5);
color:var(--ooo);
background:rgba(0,0,0,0.1);
}
.empty-trash-btn{
flex-shrink:0;
padding:0 16px;
height:38px;
border:2px solid var(--ooo);
background:transparent;
color:var(--ooo);
font-size:14px;
font-weight:700;
border-radius:50px;
cursor:pointer;
display:none;
align-items:center;
gap:6px;
transition:background 100ms ease,color 100ms ease;
}
.folder-banner-trash .empty-trash-btn{
display:flex;
}
.empty-trash-btn:hover{
background:var(--ooo);
color:var(--ac1);
}
.empty-trash-btn:active{
background:#000;
color:var(--ac1);
}
.empty-trash-icon{
display:flex;
align-items:center;
justify-content:center;
width:16px;
height:16px;
}
.empty-trash-icon svg{
width:16px;
height:16px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}