.folder-banner{
width:var(--pw2);
max-width:var(--max);
margin:var(--gap) auto;
background-color:#212121;
border:none;
border-radius:var(--br1);
display:flex;
flex-direction:column;
overflow:hidden;
}
.folder-banner-top{
display:flex;
align-items:center;
padding:var(--gd2);
height:var(--gt2);
gap:calc(var(--gap) * 0.6);
flex-shrink:0;
z-index:1;
background:transparent;
}
.folder-banner-icon{
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
}
.folder-banner-icon svg{
width:36px;
height:36px;
fill:#fff;
stroke:none;
opacity:0.35;
}
.folder-banner-name{
font-size:var(--fz1);
font-weight:700;
font-family:var(--ff1);
color:#fff;
line-height:1.1;
white-space:nowrap;
min-width:0;
display:inline-flex;
align-items:center;
gap:8px;
overflow:hidden;
}
.banner-name-text{
overflow:hidden;
text-overflow:ellipsis;
}
.banner-pin-toggle{
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
width:36px;
height:36px;
padding:0;
border:none;
background:transparent;
color:rgba(255,255,255,0.35);
border-radius:50%;
cursor:pointer;
transition:background 100ms ease,color 100ms ease;
}
.banner-pin-toggle svg{
width:26px;
height:26px;
fill:currentColor;
stroke:none;
}
.banner-pin-toggle:hover{
color:#fff;
background:rgba(255,255,255,0.08);
}
.banner-pin-toggle:active{
background:rgba(255,255,255,0.15);
}
.banner-pin-toggle.pinned{
color:rgba(255,255,255,0.95);
background:rgba(255,255,255,0.06);
}
.banner-pin-toggle.pinned:hover{
color:#fff;
background:rgba(255,255,255,0.12);
}
.banner-dark .banner-pin-toggle{
color:rgba(0,0,0,0.3);
background:transparent;
}
.banner-dark .banner-pin-toggle.pinned{
color:rgba(0,0,0,0.9);
background:rgba(0,0,0,0.06);
}
.banner-dark .banner-pin-toggle:hover{
color:var(--ooo);
background:rgba(0,0,0,0.08);
}
.banner-dark .banner-pin-toggle:active{
background:rgba(0,0,0,0.15);
}
.banner-upload-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
height:40px;
padding:0 14px;
border:none;
background:transparent;
color:rgba(255,255,255,0.55);
font-size:var(--fz4);
font-weight:600;
border-radius:999px;
cursor:pointer;
white-space:nowrap;
flex-shrink:0;
transition:background 120ms ease,color 120ms ease;
}
.banner-upload-btn:hover{
background:rgba(255,255,255,0.08);
}
.banner-upload-btn:active{
background:rgba(255,255,255,0.12);
}
.banner-upload-btn svg{
width:18px;
height:18px;
fill:currentColor;
stroke:none;
flex-shrink:0;
}
.banner-dark .banner-upload-btn{
color:rgba(0,0,0,0.55);
}
.banner-dark .banner-upload-btn:hover{
background:rgba(0,0,0,0.08);
}
.banner-dark .banner-upload-btn:active{
background:rgba(0,0,0,0.14);
}
.folder-banner-meta{
display:flex;
align-items:center;
gap:4px;
flex-shrink:0;
margin-left:auto;
}
.folder-banner-count{
font-size:var(--fz2);
color:rgba(255,255,255,0.5);
font-weight:500;
white-space:nowrap;
flex-shrink:0;
}
.toolbar-chk-input{
position:absolute;
opacity:0;
pointer-events:none;
}
.toolbar-toggle{
display:none;
}
.folder-banner-toolbar{
display:flex;
align-items:center;
gap:2px;
padding:0 var(--gt8);
height:38px;
flex-shrink:0;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
transition:height 0.12s ease;
}
.folder-banner-toolbar::-webkit-scrollbar{
display:none;
}
.folder-banner-toolbar:empty{
height:0;
}
.toolbar-btn{
display:inline-flex;
align-items:center;
gap:6px;
padding:0 12px;
height:28px;
border:none;
background:transparent;
color:rgba(255,255,255,0.45);
font-size:var(--fz5);
font-weight:600;
letter-spacing:0.3px;
border-radius:var(--br0);
cursor:pointer;
white-space:nowrap;
flex-shrink:0;
transition:background 80ms ease,color 80ms ease;
}
.toolbar-btn svg{
width:14px;
height:14px;
flex-shrink:0;
fill:currentColor;
stroke:none;
}
.toolbar-btn svg[stroke]{
fill:none;
stroke:currentColor;
stroke-width:2;
}
.toolbar-btn:hover{
background:rgba(255,255,255,0.08);
color:rgba(255,255,255,0.85);
}
.toolbar-btn:active{
background:rgba(255,255,255,0.12);
color:#fff;
}
.folder-banner-pinned .toolbar-btn[data-act="folder_pin"],
.folder-banner-shared .toolbar-btn[data-act="folder_share"],
.folder-banner-locked .toolbar-btn[data-act="folder_lock"]{
border:1px solid rgba(0,0,0,0.25);
background:rgba(0,0,0,0.1);
color:rgba(0,0,0,0.7);
}
.folder-banner-pinned .toolbar-btn[data-act="folder_pin"]:hover,
.folder-banner-shared .toolbar-btn[data-act="folder_share"]:hover,
.folder-banner-locked .toolbar-btn[data-act="folder_lock"]:hover{
background:rgba(0,0,0,0.15);
color:rgba(0,0,0,0.9);
}
.pin-icon-filled,
.pin-icon-outlined{
display:inline-flex;
}
.toolbar-btn[data-act="folder_pin"] .pin-icon-filled{
display:none;
}
.toolbar-btn[data-act="folder_pin"] .pin-icon-outlined{
display:inline-flex;
}
.toolbar-btn[data-act="folder_pin"]:hover .pin-icon-filled{
display:inline-flex;
}
.toolbar-btn[data-act="folder_pin"]:hover .pin-icon-outlined{
display:none;
}
.folder-banner-pinned .toolbar-btn[data-act="folder_pin"] .pin-icon-filled{
display:inline-flex;
}
.folder-banner-pinned .toolbar-btn[data-act="folder_pin"] .pin-icon-outlined{
display:none;
}
.folder-banner-pinned .toolbar-btn[data-act="folder_pin"]:hover .pin-icon-filled{
display:none;
}
.folder-banner-pinned .toolbar-btn[data-act="folder_pin"]:hover .pin-icon-outlined{
display:inline-flex;
}
.lock-tb-locked,.lock-tb-unlocked{
display:inline-flex;
}
.toolbar-btn[data-act="folder_lock"] .lock-tb-locked{display:none;}
.toolbar-btn[data-act="folder_lock"] .lock-tb-unlocked{display:inline-flex;}
.toolbar-btn[data-act="folder_lock"]:hover .lock-tb-locked{display:inline-flex;}
.toolbar-btn[data-act="folder_lock"]:hover .lock-tb-unlocked{display:none;}
.folder-banner-locked .toolbar-btn[data-act="folder_lock"] .lock-tb-locked{display:inline-flex;}
.folder-banner-locked .toolbar-btn[data-act="folder_lock"] .lock-tb-unlocked{display:none;}
.folder-banner-locked .toolbar-btn[data-act="folder_lock"]:hover .lock-tb-locked{display:none;}
.folder-banner-locked .toolbar-btn[data-act="folder_lock"]:hover .lock-tb-unlocked{display:inline-flex;}
.toolbar-btn[data-act="folder_del"],
.toolbar-btn[data-act="folder_empty_trash"],
.toolbar-btn[data-act="collab_leave"],
.toolbar-btn[data-act="collab_delete"]{
color:#ff5050;
}
.toolbar-btn[data-act="folder_del"]:hover,
.toolbar-btn[data-act="folder_empty_trash"]:hover,
.toolbar-btn[data-act="collab_leave"]:hover,
.toolbar-btn[data-act="collab_delete"]:hover{
background:rgba(255,80,80,0.1);
color:#ff5050;
}
.banner-dark .toolbar-btn{
color:rgba(0,0,0,0.55);
}
.banner-dark .toolbar-btn:hover{
background:rgba(0,0,0,0.08);
color:rgba(0,0,0,0.75);
}
.banner-dark .toolbar-btn:active{
background:rgba(0,0,0,0.14);
color:var(--ooo);
}
.banner-dark .toolbar-btn[data-act="folder_del"],
.banner-dark .toolbar-btn[data-act="folder_empty_trash"],
.banner-dark .toolbar-btn[data-act="collab_leave"],
.banner-dark .toolbar-btn[data-act="collab_delete"]{
color:rgba(0,0,0,0.55);
}
.banner-dark .toolbar-btn[data-act="folder_del"]:hover,
.banner-dark .toolbar-btn[data-act="folder_empty_trash"]:hover,
.banner-dark .toolbar-btn[data-act="collab_leave"]:hover,
.banner-dark .toolbar-btn[data-act="collab_delete"]:hover{
background:rgba(0,0,0,0.08);
color:rgba(0,0,0,0.8);
}
.folder-banner-bundle{
background-color:var(--ac2);
}
.folder-banner-shared,
.folder-banner-shared.folder-banner-pinned{
background-color:#3474d9;
}
.folder-banner-shared .folder-banner-top,
.folder-banner-shared.folder-banner-pinned .folder-banner-top{
background:transparent;
}
.folder-banner-collab,
.folder-banner-collab.folder-banner-pinned{
background-color:color-mix(in srgb,var(--ac3) 85%,#000);
}
.folder-banner-collab .folder-banner-top,
.folder-banner-collab.folder-banner-pinned .folder-banner-top{
background:transparent;
}
.folder-banner-pinned{
background-color:color-mix(in srgb,var(--ac2) 85%,#000);
}
.folder-banner-pinned .folder-banner-top{
background:transparent;
}
.folder-banner-locked:not(.folder-banner-pinned):not(.folder-banner-shared):not(.folder-banner-collab){
background-color:color-mix(in srgb,var(--ac2) 85%,#000);
}
.folder-banner-locked:not(.folder-banner-pinned):not(.folder-banner-shared):not(.folder-banner-collab) .folder-banner-top{
background:transparent;
}
.folder-banner-trash{
background-color:color-mix(in srgb,var(--ac1) 85%,#000);
}
.folder-banner-trash .folder-banner-top{
background:transparent;
}
.banner-dark .folder-banner-name{
color:var(--ooo);
}
.banner-dark .folder-banner-count{
color:rgba(0,0,0,0.55);
}
.banner-dark .folder-banner-icon svg{
fill:var(--ooo);
opacity:0.4;
}
.folder-banner-trash .folder-banner-icon svg{
fill:none;
stroke:var(--ooo);
opacity:0.5;
}
.banner-dd-btn{
display:none;
height:36px;
padding:0;
border:none;
background:transparent;
color:rgba(255,255,255,0.4);
font-size:var(--fz5);
font-weight:600;
letter-spacing:0.5px;
line-height:1;
border-radius:0 0 calc(var(--br1) - 2px) calc(var(--br1) - 2px);
cursor:pointer;
align-items:center;
justify-content:center;
gap:8px;
width:100%;
transition:background 100ms ease,color 100ms ease;
}
.banner-dd-btn .banner-dd-chevron{
display:inline-block;
font-size:var(--fz5);
transition:transform 150ms ease;
}
.banner-dd-btn.open .banner-dd-chevron{
transform:rotate(180deg);
}
.banner-dd-btn:hover{
color:rgba(255,255,255,0.7);
}
.banner-dark .banner-dd-btn{
background:rgba(0,0,0,0.06);
color:rgba(0,0,0,0.35);
}
.banner-dark .banner-dd-btn:hover{
color:rgba(0,0,0,0.6);
background:rgba(0,0,0,0.1);
}
.folder-banner-lock-icon{
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
}
.folder-banner-lock-icon svg{
width:22px;
height:22px;
fill:#fff;
stroke:none;
opacity:0.5;
}
.banner-dark .folder-banner-lock-icon svg{
fill:var(--ooo);
}
.folder-banner-pin-icon{
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
}
.folder-banner-pin-icon svg{
width:20px;
height:20px;
fill:#fff;
stroke:none;
opacity:0.35;
}
.banner-dark .folder-banner-pin-icon svg{
fill:var(--ooo);
}
.banner-ellipsis-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.55);
border-radius:999px;
cursor:pointer;
flex-shrink:0;
transition:background 120ms ease;
}
.banner-ellipsis-btn:hover{
background:rgba(255,255,255,0.08);
}
.banner-ellipsis-btn:active{
background:rgba(255,255,255,0.12);
}
.banner-ellipsis-btn svg{
width:24px;
height:24px;
}
.banner-dark .banner-ellipsis-btn{
color:rgba(0,0,0,0.55);
}
.banner-dark .banner-ellipsis-btn:hover{
background:rgba(0,0,0,0.08);
}
.banner-ellipsis-btn.banner-ellipsis-disabled{
opacity:0.35;
pointer-events:none;
cursor:default;
}
.filter-toggle-btn.banner-meta-disabled,
.sort-toggle-btn.banner-meta-disabled{
opacity:0.35;
pointer-events:none;
cursor:default;
}
.banner-ellipsis-menu{
display:none;
position:fixed;
z-index:9999;
min-width:220px;
background:rgba(30,30,30,0.92);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,0.08);
border-radius:14px;
padding:6px;
box-shadow:0 2px 4px rgba(0,0,0,0.5);
overflow:hidden;
}
.banner-menu-item{
display:flex;
align-items:center;
gap:12px;
width:100%;
padding:12px;
border:none;
background:transparent;
color:rgba(255,255,255,0.8);
font-size:var(--fz5);
font-weight:500;
cursor:pointer;
text-align:left;
white-space:nowrap;
border-radius:var(--br0);
transition:background 80ms ease;
}
.banner-menu-item:hover{
background:rgba(255,255,255,0.08);
color:#fff;
}
.banner-menu-item:active{
background:rgba(255,255,255,0.12);
}
.banner-menu-item svg{
width:18px;
height:18px;
flex-shrink:0;
fill:currentColor;
stroke:none;
}
.banner-menu-item[data-act="folder_del"]{
color:#ff5050;
}
.banner-menu-item[data-act="folder_del"]:hover{
background:rgba(255,80,80,0.1);
color:#ff5050;
}
.banner-menu-sep{
display:none;
}
.banner-menu-item-dis{
opacity:0.3;
pointer-events:none;
}
.toolbar-btn[disabled],
.folder-banner-locked .toolbar-btn[data-act="folder_del"]{
opacity:0.35;
pointer-events:none;
}