.multi-sel-bar{
position:fixed;
bottom:8px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:var(--msg);
background:#0d0d0d;
padding:var(--msg);
border-radius:333px;
z-index:9999;
border:var(--bw1) solid #000;
opacity:0;
pointer-events:none;
height:var(--gx3);
align-items:center;
box-shadow:0 0 3px #000;
}
.multi-sel-bar.act{
opacity:1;
pointer-events:all;
}
.action-btn{
position:relative;
background:#0a0a0a;
border:var(--bw1) solid #000;
color:#fff;
border-radius:50%;
width:var(--msh);
height:var(--msh);
display:flex;
align-items:center;
justify-content:center;
}
.action-btn:hover{
background:#000;
border-color:#fff;
cursor:pointer;
}
.action-btn:hover .tip{
opacity:1;
}
.action-btn svg{
width:28px;
height:28px;
transition:transform 200ms ease,opacity 200ms ease;
}
.action-btn path{
fill:#fff;
}
.action-btn.disabled{
opacity:0.35;
pointer-events:none;
}
.tip{
display:table;
background-color:rgba(0,0,0,.9);
padding:6px 12px;
border-radius:50px;
position:absolute;
top:calc(-50px - 8px);
left:50%;
transform:translateX(-50%);
font-size:18px;
font-weight:600;
color:#fff;
white-space:nowrap;
opacity:0;
pointer-events:none;
text-shadow:2px 2px 3px rgba(0,0,0,0.9),-1px -1px 3px rgba(0,0,0,0.9),
1px -1px 3px rgba(0,0,0,0.9),-1px 1px 3px rgba(0,0,0,0.9),0px 2px 4px rgba(0,0,0,0.9);
}
.sel-count{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
font-weight:600;
border-radius:50%;
}
.clear-btn svg{
opacity:0;
}
.clear-btn:hover .sel-count{
opacity:0;
}
.clear-btn:hover svg{
opacity:1;
transform:scale(1.14);
}
.pin-btn:hover svg,
.unpin-btn:hover svg{
transform:scale(1.14);
}
.invert-btn svg{
transition:transform 200ms ease-out;
}
.invert-btn:hover svg{
transform:rotate(90deg);
}
@keyframes spin-complete{
from{transform:rotate(90deg);}
to{transform:rotate(450deg);}
}
.invert-btn.spinning svg{
animation:spin-complete 350ms ease-in-out;
}
.del-btn{
background:#800;
border-color:#f00;
}
.del-btn:hover{
background:#c00;
border-color:#d00;
}
.del-btn:hover svg{
transform:scale(1.2);
}
.home-btn{
background:#0e0e0e;
}
.home-btn:hover{
background:#000;
border-color:#fff;
}
.sel-box{
position:fixed;
border:1px solid #99d1ff;
background:rgba(153,209,255,0.2);
pointer-events:none;
z-index:1000;
width:0;
height:0;
display:block;
border-radius:0;
}