@media(max-width:1200px){
nav{
display:flex;
justify-content:center;
gap:var(--gap);
}
.nav-left,
.nav-right{
padding:0;
}
}
@media(max-width:600px){
.top-bar{
padding:0 var(--gd2);
}
nav{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
width:var(--pw2);
max-width:var(--max);
margin:var(--gap) auto 0 auto;
}
.nav-center{
order:0;
flex:0 0 var(--gt2);
width:var(--gt2);
max-width:var(--gt2);
height:var(--gt2);
min-height:var(--gt2);
max-height:var(--gt2);
padding:0;
margin:0;
cursor:pointer;
position:fixed;
bottom:var(--gap);
right:var(--gap);
z-index:900;
border-radius:50%;
background:var(--ac1);
box-shadow:0 2px 4px rgba(0,0,0,0.3);
}
.nav-center.exp{
display:none;
}
.nav-center .nav-center-in{
width:var(--gt2);
height:var(--gt2);
padding:0;
justify-content:center;
align-items:center;
pointer-events:none;
}
.nav-center .note-btn-content,
.nav-center .note-btn-text{
display:none;
}
.nav-center .note-exp-top,
.nav-center.exp .note-exp-top{
display:none;
}
.nav-center .note-plus-icon{
position:absolute;
left:50%;
top:50%;
right:auto;
transform:translate(-50%,-50%);
margin:0;
pointer-events:none;
}
.nav-center .note-plus-icon svg line{
stroke:#000;
}
.nav-center.exp .nav-center-in{
display:flex;
}
.nav-center.exp .note-plus-icon{
display:flex;
}
.nav-center.exp .note-plus-icon svg{
display:none;
}
.nav-center.exp .note-plus-icon::before{
content:'';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:20px;
height:2px;
background:var(--ac1);
border-radius:2px;
}
.nav-left{
display:flex;
justify-content:center;
flex:1;
}
.nav-right{
display:none;
}
.nav-search-btn{
flex:0 0 auto;
height:var(--nbz);
}
.mobile-note-area{
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background:var(--ooo);
flex-direction:column;
z-index:9999;
overflow:hidden;
}
.mobile-note-area .note-input.at-max{
overflow-y:auto;
}
.mobile-note-area .note-checklist{
padding:0 var(--gap) var(--gap);
flex:1;
overflow-y:auto;
}
.mobile-note-area .note-checklist-item{
padding:10px 0;
}
.mobile-note-area .note-checklist-text{
font-size:var(--fz4);
}
.mobile-note-area .note-checklist-item .checklist-remove{
opacity:1;
}
.mobile-note-area.act{
display:flex;
}
.mobile-note-close{
position:absolute;
top:var(--gap);
right:var(--gap);
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.06);
border:2px solid rgba(255,255,255,0.1);
border-radius:50%;
cursor:pointer;
color:#aaa;
font-size:var(--fz1);
line-height:1;
z-index:2;
transition:background 100ms,color 100ms;
}
.mobile-note-close:hover{
background:rgba(255,255,255,0.12);
color:#fff;
}
.mobile-note-area .note-title-input{
padding:calc(var(--gap) + 10px) var(--gap) var(--gd2);
padding-right:calc(var(--gap) + 60px);
font-size:var(--fz1);
font-weight:640;
background:transparent;
border:0;
color:var(--cl1);
width:100%;
box-sizing:border-box;
outline:none;
}
.mobile-note-area .note-title-input::placeholder,
.mobile-note-area .note-input::placeholder{
color:#aaa;
}
.mobile-note-area .note-input{
overflow:hidden;
padding:var(--gd2) var(--gap) var(--gap);
resize:none;
min-height:120px;
flex:1;
font-size:var(--fz1);
background:transparent;
border:0;
color:var(--cl1);
width:100%;
box-sizing:border-box;
outline:none;
}
.mobile-note-area .note-bottom-area{
width:100%;
display:flex;
align-items:center;
padding:var(--gd2) var(--gap);
box-sizing:border-box;
flex-shrink:0;
}
.mobile-note-area .add-note-btn{
padding:12px 24px;
font-size:var(--fz4);
font-weight:600;
border-radius:var(--br1);
}
.toast{
right:auto;
left:var(--gap);
max-width:calc(100vw - var(--gt2) - var(--gap) * 3);
}
.folder-list{
display:none;
}
body.search-active .nav-center{
display:none;
}
body.search-active .nav-left{
visibility:hidden;
}
body.search-active .search-bar{
position:static;
width:auto;
max-width:none;
margin:0;
}
.banner-row{
display:flex;
flex-direction:column;
align-items:stretch;
gap:0;
width:var(--pw2);
max-width:var(--max);
margin:var(--gap) auto;
border:2px solid #000;
border-radius:var(--br1);
overflow:hidden;
}
.folder-banner{
flex-direction:row;
flex-wrap:wrap;
overflow:hidden;
flex:none;
width:auto;
max-width:none;
margin:0;
border:none;
border-radius:0;
box-shadow:none;
}
.folder-banner-top{
flex:1 1 0;
min-width:0;
overflow:hidden;
border-radius:0;
}
.folder-banner-toolbar{
order:2;
width:100%;
overflow:hidden;
}
.banner-row > .banner-dd-btn{
display:flex;
align-items:center;
justify-content:center;
position:relative;
width:100%;
height:40px;
padding:0;
border-radius:0;
flex-shrink:0;
font-size:0;
line-height:0;
gap:0;
background:rgba(255,255,255,0.08);
border:none;
border-top:1px solid rgba(255,255,255,0.06);
box-shadow:none;
color:rgba(255,255,255,0.6);
}
.banner-row > .banner-dd-btn:hover{
background:rgba(255,255,255,0.15);
border-color:transparent;
border-top-color:rgba(255,255,255,0.1);
color:#fff;
}
.folder-banner-shared ~ .banner-dd-btn,
.folder-banner-pinned ~ .banner-dd-btn,
.folder-banner-trash ~ .banner-dd-btn{
background:rgba(0,0,0,0.08);
color:rgba(0,0,0,0.4);
border-color:transparent;
border-top-color:rgba(0,0,0,0.1);
}
.folder-banner-shared ~ .banner-dd-btn:hover,
.folder-banner-pinned ~ .banner-dd-btn:hover,
.folder-banner-trash ~ .banner-dd-btn:hover{
background:rgba(0,0,0,0.15);
color:rgba(0,0,0,0.7);
border-color:transparent;
border-top-color:rgba(0,0,0,0.15);
}
.banner-row > .banner-dd-btn .banner-dd-chevron{
display:flex;
align-items:center;
justify-content:center;
font-size:var(--fz5);
line-height:1;
width:100%;
height:40px;
position:static;
}
.overflow-dd{
width:var(--pw2);
max-width:var(--max);
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
.gal{
grid-template-columns:1fr;
}
body.search-active .gal .empty-folder-container{
align-items:flex-start;
}
body.search-active .gal .search-empty-area{
justify-content:flex-start;
padding-top:var(--gap);
}
.sortable-chosen,
.clip.dragging,
.clip.dragging .note,
.clip.dragging .img-wrap,
.clip.dragging .note-content,
.clip.dragging.clip-note .note,
.clip.dragging.clip-note .note-content{
height:auto;
min-height:0;
max-height:none;
}
.clip{
overflow:hidden;
min-height:0;
}
.clip .move-handle{
height:auto;
}
.clip .move-handle img{
height:auto;
max-width:100%;
}
.clip .note-content{
height:auto;
min-height:80px;
max-height:200px;
overflow:hidden;
}
.clip .note-link-wrapper{
height:auto;
}
}