.search-bar{
position:relative;
background:var(--ooo);
border:2px solid #333;
border-radius:var(--br1);
height:var(--gt2);
transition:border-color 200ms;
grid-column:1 / -1;
}
.search-bar:focus-within{
border-color:var(--ac1);
}
.search-bar-icon{
position:absolute;
left:calc(var(--gap) * 0.8 - 2px);
top:50%;
transform:translateY(-50%);
width:22px;
height:22px;
color:#666;
pointer-events:none;
}
.search-bar-icon svg{
width:100%;
height:100%;
}
.search-bar-input{
display:block;
width:100%;
height:100%;
border:none;
background:transparent;
color:var(--cl1);
font-size:var(--fz2);
font-family:var(--ff1);
font-weight:var(--fw1);
line-height:var(--gt2);
padding:0 calc(var(--gap) * 0.8 + 36px + 16px) 0 calc(var(--gap) * 0.8 + 22px + 12px);
min-width:0;
border-radius:var(--br1);
-webkit-user-select:text;
user-select:text;
cursor:text;
}
.search-bar-input::placeholder{
color:#555;
}
.search-bar-hint{
position:absolute;
right:calc(var(--gap) * 0.8 + 36px + 8px);
top:50%;
transform:translateY(-50%);
pointer-events:none;
}
.search-bar-hint kbd{
font-family:var(--ff1);
font-size:var(--fz5);
color:#555;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.08);
border-radius:5px;
padding:2px 8px;
line-height:1.6;
}
.search-folder-label{
grid-column:1 / -1;
display:flex;
align-items:center;
gap:10px;
padding:16px 4px 6px 4px;
cursor:pointer;
border-radius:var(--br2);
transition:background 100ms;
width:fit-content;
}
.search-folder-label:first-child{
padding-top:6px;
}
.search-folder-label:hover{
background:rgba(255,255,255,0.03);
}
.search-folder-name{
font-size:var(--fz4);
font-weight:700;
font-family:var(--ff1);
color:var(--cl1);
opacity:0.7;
}
.search-folder-label:hover .search-folder-name{
opacity:1;
}
.search-folder-count{
font-size:var(--fz5);
color:#555;
font-weight:var(--fw1);
}
.search-empty-area{
opacity:0.6;
}
.nav-search-btn{
width:var(--nbz);
height:var(--nbz);
border:var(--bt1) solid #000;
background:var(--ooo);
border-radius:var(--br1);
box-shadow:0 0 3px #000;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:background 100ms;
flex-shrink:0;
}
.nav-search-btn:hover{
background:rgba(255,255,255,0.05);
}
.nav-search-btn svg{
width:30px;
height:30px;
stroke:#aaa;
stroke-width:2;
fill:none;
}
body.search-active .nav-center-in,
body.search-active .note-plus-icon,
body.search-active .menu-panel,
body.search-active .note-exp-top{
display:none;
}
body.search-active .nav-center:focus-within{
border-color:var(--ac1);
}
body.search-active .nav-search-btn svg{
width:24px;
height:24px;
stroke:#999;
stroke-width:2.5;
}
body.search-active .nav-search-btn:hover svg{
stroke:#ddd;
}
body.search-active .search-bar{
width:100%;
height:100%;
box-sizing:border-box;
background:none;
border:none;
border-radius:var(--br1);
box-shadow:none;
}
body.search-active .search-bar-icon{
display:none;
}
body.search-active .search-bar-input{
padding:0 calc((var(--gt2) - 36px) / 2 + 36px + 8px) 0 var(--gap);
}
body.search-active .search-bar-hint{
display:none;
}
.search-bar-clear{
position:absolute;
right:calc(var(--gap) * 0.8);
top:50%;
transform:translateY(-50%);
width:36px;
height:36px;
border:none;
background:rgba(255,255,255,0.06);
border-radius:var(--br1);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
color:#999;
font-size:24px;
line-height:36px;
transition:background 100ms,color 100ms;
z-index:1;
}
body.search-active .search-bar-clear{
right:calc((var(--gt2) - 36px) / 2);
}
.search-bar-clear:hover{
background:rgba(255,255,255,0.12);
color:#ddd;
}
body.search-active .gal{
padding-top:var(--gap);
}
body.search-active .folder-list{
display:none;
}
body.search-active .gal .clip{
cursor:default;
}
body.search-active .gal .move-handle,
body.search-active .gal .note-link-wrapper{
cursor:default;
-webkit-user-drag:none;
}
body.search-active .gal .clip-sel-check{
display:none;
}
.search-sort-bar{
grid-column:1 / -1;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:6px 4px;
}
.search-sort-count{
font-size:var(--fz5);
color:#555;
font-weight:500;
white-space:nowrap;
flex-shrink:0;
}
.search-sort-pills{
display:flex;
gap:4px;
overflow-x:auto;
scrollbar-width:none;
-ms-overflow-style:none;
}
.search-sort-pills::-webkit-scrollbar{
display:none;
}
.search-sort-pill{
flex-shrink:0;
display:inline-flex;
align-items:center;
justify-content:center;
height:32px;
padding:0 14px;
border:none;
border-radius:var(--br2);
background:rgba(255,255,255,0.05);
color:rgba(255,255,255,0.45);
font-size:var(--fz5);
font-weight:600;
cursor:pointer;
white-space:nowrap;
transition:background 120ms ease,color 120ms ease,transform 60ms ease;
user-select:none;
-webkit-user-select:none;
}
.search-sort-pill:hover{
background:rgba(255,255,255,0.1);
color:rgba(255,255,255,0.8);
}
.search-sort-pill:active{
transform:scale(0.97);
}
.search-sort-pill.active{
background:var(--ac2);
color:var(--ooo);
font-weight:700;
}
.search-sort-pill.active:hover{
background:var(--ac2-light);
}
@media(max-width:700px){
.search-sort-bar{
flex-direction:column;
align-items:flex-start;
gap:6px;
}
.search-sort-pill{
height:30px;
padding:0 12px;
}
}