.nav-center{
position:relative;
width:500px;
height:var(--gt2);
background-color:var(--ooo);
border:var(--bt1) solid #000;
border-radius:var(--br1);
box-shadow:0 0 3px #000;
display:flex;
}
.nav-center-in{
display:flex;
align-items:center;
flex:1;
min-width:0;
height:100%;
padding:0 20px 0 var(--gt6);
cursor:pointer;
border-radius:var(--br1);
}
.nav-center.exp{
height:auto;
min-height:var(--gt2);
max-height:80vh;
flex-direction:column;
}
.nav-center.exp .nav-center-in,
.nav-center.exp .note-plus-icon{
display:none;
}
.note-exp-top{
display:none;
align-items:center;
padding:0;
flex-shrink:0;
cursor:text;
}
.nav-center.exp .note-exp-top{
display:flex;
}
.note-exp-top .note-title-input{
flex:1;
min-width:0;
padding:var(--gd2) var(--gd2) var(--gd2) var(--gap);
}
.note-exp-close{
display:none;
}
.note-btn-content{
display:flex;
align-items:center;
gap:12px;
pointer-events:none;
width:100%;
}
.note-plus-icon{
position:absolute;
right:8px;
top:50%;
transform:translateY(-50%);
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
border-radius:var(--br0);
}
.note-plus-icon svg{
width:30px;
height:30px;
fill:none;
stroke-width:2px;
stroke-linecap:round;
stroke-linejoin:round;
}
.note-plus-icon svg line{
stroke:var(--ac1);
}
.note-btn-icon{
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.note-btn-icon svg{
width:18px;
height:18px;
stroke:#888;
fill:none;
}
.note-btn-text{
font-size:var(--fz2);
font-weight:var(--fw1);
color:#888;
white-space:nowrap;
}
.note-toolbar{
display:none;
}
.note-toolbar-btn{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
border-radius:var(--br0);
transition:background-color 100ms ease;
flex-shrink:0;
}
.note-bottom-left .note-toolbar-btn{
width:38px;
height:38px;
}
.note-toolbar-btn:hover{
background-color:rgba(255,255,255,0.08);
}
.note-toolbar-btn:hover svg{
fill:var(--ac1);
}
.note-toolbar-btn svg{
width:26px;
height:26px;
fill:#666;
transition:fill 100ms ease;
}
.note-bottom-left .note-toolbar-btn svg{
width:22px;
height:22px;
}
.note-pasted-image{
position:relative;
width:fit-content;
flex-shrink:0;
padding:12px 12px 0 12px;
}
.note-pasted-image img{
display:block;
width:120px;
height:120px;
object-fit:cover;
border-radius:var(--br1);
background:#111;
border:var(--bt1) solid rgba(255,255,255,0.08);
}
.note-pasted-image.uploading img{
opacity:0.5;
}
.note-pasted-image-spinner{
position:absolute;
top:50%;
left:50%;
transform:translate(calc(-50% + 6px), calc(-50% + 6px));
width:28px;
height:28px;
border:3px solid rgba(255,255,255,0.15);
border-top-color:var(--ac1);
border-radius:50%;
animation:note-img-spin 0.7s linear infinite;
}
@keyframes note-img-spin{
to{transform:translate(calc(-50% + 6px), calc(-50% + 6px)) rotate(360deg);}
}
.note-pasted-image-remove{
position:absolute;
top:4px;
right:4px;
width:28px;
height:28px;
border-radius:50%;
background:rgba(0,0,0,0.75);
border:1px solid rgba(255,255,255,0.15);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:var(--fz4);
line-height:1;
transition:background-color 100ms ease;
z-index:2;
}
.note-pasted-image-remove:hover{
background:rgba(255,60,60,0.8);
}
.note-pasted-image-status{
display:none;
}
.note-input,
.note-title-input{
background-color:transparent;
color:var(--cl1);
width:100%;
border:0;
caret-color:var(--cl1);
outline:none;
}
.nav-center:not(.exp) .note-input{
display:none;
}
.note-input{
padding:var(--gd2) var(--gap) var(--gap);
resize:none;
min-height:100px;
font-size:var(--fz1);
overflow:hidden;
}
.nav-center.exp .note-input{
display:block;
white-space:pre-wrap;
}
.nav-center.exp .note-input.at-max{
overflow-y:auto;
}
.nav-center.exp .note-input::placeholder{
color:#aaa;
}
.note-title-input{
padding:var(--gap) var(--gap) var(--gd2);
font-size:var(--fz1);
font-weight:640;
flex-shrink:0;
}
.note-title-input::placeholder{
color:#aaa;
}
.nav-center.exp .note-input::selection,
.note-title-input::selection{
background-color:rgba(61,127,242,0.8);
}
.add-note-btn{
background-color:var(--ac1);
color:#000;
font-size:var(--fz4);
border:none;
padding:8px 20px;
border-radius:var(--br0);
cursor:pointer;
display:none;
}
.add-note-btn.act{
display:block;
}
.add-note-btn:hover{
background-color:var(--ac2);
}
.note-bottom-area{
width:100%;
display:flex;
align-items:center;
padding:10px var(--gd2);
flex-shrink:0;
gap:8px;
}
.note-bottom-left{
display:flex;
align-items:center;
gap:2px;
}
.note-bottom-right{
display:flex;
align-items:center;
gap:8px;
margin-left:auto;
}
.note-close-btn{
background:rgba(255,255,255,0.06);
color:rgba(255,255,255,0.5);
border:none;
padding:8px 18px;
border-radius:var(--br0);
cursor:pointer;
font-size:var(--fz4);
font-weight:500;
transition:background 100ms ease,color 100ms ease;
}
.note-close-btn:hover{
background:rgba(255,255,255,0.1);
color:rgba(255,255,255,0.8);
}
.preview-status-bar{
display:flex;
justify-content:space-between;
align-items:center;
padding:var(--gd2);
background:var(--panel-bg);
font-size:var(--fz4);
color:rgba(255,255,255,0.5);
gap:var(--gd2);
margin-top:auto;
}
.status-left,
.status-right{
display:flex;
align-items:center;
gap:var(--gd2);
flex-wrap:wrap;
}
.status-item{
display:flex;
align-items:flex-end;
gap:5px;
}
.status-value{
color:rgba(255,255,255,0.7);
font-weight:600;
font-variant-numeric:tabular-nums;
}
.status-dl-btn:active{
transform:scale(0.92);
}
.status-more-delete{
color:rgba(255,100,100,0.85);
}
.status-more-delete:hover{
background:rgba(255,80,80,0.15);
color:rgba(255,120,120,1);
}
.status-more-wrap{
position:relative;
}
.status-more-btn{
width:var(--pbz);
height:var(--pbz);
background:rgba(255,255,255,0.06);
border:0;
border-radius:50%;
color:rgba(255,255,255,0.45);
cursor:pointer;
transition:all 100ms ease;
display:flex;
align-items:center;
justify-content:center;
padding:0;
flex-shrink:0;
}
.status-more-btn svg{
width:26px;
height:26px;
display:block;
flex-shrink:0;
}
.status-more-btn:active{
transform:scale(0.92);
}
.status-more-btn:hover,
.status-more-btn.active{
background:rgba(255,255,255,0.12);
border-color:rgba(255,255,255,0.22);
color:rgba(255,255,255,0.8);
}
.status-more-menu{
position:fixed;
background:var(--panel-bg);
border:1px solid rgba(255,255,255,0.12);
border-radius:12px;
padding:6px;
min-width:180px;
display:none;
z-index:9999;
box-shadow:0 2px 4px rgba(0,0,0,0.3);
}
.status-more-menu button{
width:100%;
height:auto;
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
background:none;
border:none;
border-radius:8px;
color:rgba(255,255,255,0.7);
font-size:var(--fz5);
font-weight:500;
cursor:pointer;
transition:background 100ms ease;
white-space:nowrap;
}
.status-more-menu button:hover{
background:rgba(255,255,255,0.08);
color:rgba(255,255,255,0.95);
}
.status-more-menu button svg{
width:16px;
height:16px;
flex-shrink:0;
opacity:0.6;
}
.status-more-menu button:hover svg{
opacity:1;
}
.preview-status-bar button{
width:var(--pbz);
height:var(--pbz);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
padding:0;
flex-shrink:0;
}
.preview-panel{
display:flex;
flex-direction:column;
}
.preview-content{
flex:1;
padding:15px 32px;
min-height:100px;
overflow-y:auto;
cursor:text;
outline:none;
}
.preview-content:empty::before{
content:attr(data-placeholder);
color:rgba(255,255,255,0.3);
pointer-events:none;
}
.note-toolbar-btn.active svg{
fill:var(--ac1);
}
.note-fullsize-overlay{
position:fixed;
inset:0;
z-index:9998;
background:rgba(0,0,0,0.7);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
display:flex;
align-items:center;
justify-content:center;
padding:var(--gap);
box-sizing:border-box;
opacity:0;
visibility:hidden;
transition:opacity 100ms ease,visibility 100ms ease;
}
.note-fullsize-overlay.act{
opacity:1;
visibility:visible;
}
.note-fullsize-panel{
width:100%;
max-width:var(--pw2);
height:calc(100vh - var(--gap) * 2);
background:var(--ooo);
border:var(--bt1) solid #000;
border-radius:var(--br1);
box-shadow:0 0 3px #000;
display:flex;
flex-direction:column;
overflow:hidden;
transform:scale(0.96);
opacity:0;
transition:transform 100ms ease,opacity 100ms ease;
}
.note-fullsize-overlay.act .note-fullsize-panel{
transform:scale(1);
opacity:1;
}
.note-fullsize-top{
display:flex;
align-items:center;
flex-shrink:0;
}
.note-fullsize-title{
flex:1;
min-width:0;
padding:var(--gap) var(--gd2) var(--gd2) var(--gap);
font-size:var(--fz1);
font-weight:640;
background:transparent;
color:var(--cl1);
border:0;
outline:none;
caret-color:var(--cl1);
}
.note-fullsize-title::placeholder{
color:#aaa;
}
.note-fullsize-close{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
border-radius:var(--br0);
background:none;
border:none;
color:rgba(255,255,255,0.4);
font-size:22px;
flex-shrink:0;
margin-right:var(--gd2);
transition:background-color 100ms ease,color 100ms ease;
}
.note-fullsize-close:hover{
background:rgba(255,255,255,0.08);
color:rgba(255,255,255,0.8);
}
.note-fullsize-content{
flex:1;
padding:var(--gd2) var(--gap) var(--gap);
font-size:var(--fz1);
line-height:1.5;
color:var(--cl1);
outline:none;
overflow-y:auto;
white-space:pre-wrap;
overflow-wrap:break-word;
word-break:break-word;
caret-color:var(--cl1);
scrollbar-color:#333 transparent;
}
.note-fullsize-content:empty::before{
content:attr(data-placeholder);
color:rgba(255,255,255,0.3);
pointer-events:none;
}
.note-fullsize-content::selection{
background-color:rgba(61,127,242,0.8);
}
.note-fullsize-content::-webkit-scrollbar{
width:6px;
}
.note-fullsize-content::-webkit-scrollbar-track{
background:transparent;
}
.note-fullsize-content::-webkit-scrollbar-thumb{
background:#333;
border-radius:3px;
}
.note-fullsize-content b,.note-fullsize-content strong{
font-weight:700;
color:#fff;
}
.note-fullsize-content i,.note-fullsize-content em{
font-style:italic;
}
.note-fullsize-bottom{
display:flex;
align-items:center;
justify-content:space-between;
padding:var(--gd2) var(--gap) var(--gap);
flex-shrink:0;
}
.note-fullsize-bottom .format-bar{
padding:0;
flex-shrink:0;
}
.note-fullsize-bottom-right{
display:flex;
align-items:center;
gap:8px;
margin-left:auto;
}
.note-fullsize-collapse{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
border-radius:var(--br0);
background:none;
border:none;
color:rgba(255,255,255,0.4);
transition:background-color 100ms ease,color 100ms ease;
}
.note-fullsize-collapse:hover{
background:rgba(255,255,255,0.08);
color:rgba(255,255,255,0.8);
}
.note-fullsize-collapse svg{
width:22px;
height:22px;
fill:currentColor;
}
.note-fullsize-save{
background-color:var(--ac1);
color:#000;
font-size:var(--fz4);
font-weight:600;
border:none;
padding:10px 24px;
border-radius:var(--br0);
cursor:pointer;
display:none;
}
.note-fullsize-save:hover{
background-color:var(--ac2);
}
.note-checklist{
list-style:none;
margin:0;
padding:0 var(--gap) var(--gap);
flex:1;
overflow-y:auto;
min-height:100px;
cursor:text;
}
.note-checklist-item{
display:flex;
align-items:center;
gap:10px;
padding:4px 4px;
margin:0 -4px;
border-radius:6px;
cursor:text;
transition:background 150ms ease;
}
.note-checklist-item:hover,
.preview-checklist-item:hover{
background:rgba(255,255,255,0.05);
}
.note-checklist-item input[type="checkbox"],
.preview-checklist-item input[type="checkbox"]{
appearance:none;
-webkit-appearance:none;
border:2px solid rgba(255,255,255,0.3);
border-radius:50%;
background:transparent;
cursor:pointer;
position:relative;
transition:border-color 150ms ease,background 150ms ease;
}
.note-checklist-item input[type="checkbox"]{
width:20px;
height:20px;
min-width:20px;
}
.note-checklist-item input[type="checkbox"]:checked,
.preview-checklist-item input[type="checkbox"]:checked{
background:var(--ac1);
border-color:var(--ac1);
}
.note-checklist-item input[type="checkbox"]:checked::after,
.preview-checklist-item input[type="checkbox"]:checked::after{
content:'';
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
border:none;
}
.note-checklist-item input[type="checkbox"]:checked::after{
background:url("/svg/checkbox-check.svg") center/14px no-repeat;
}
.note-checklist-item input[type="checkbox"]:hover,
.preview-checklist-item input[type="checkbox"]:hover{
border-color:rgba(255,255,255,0.5);
}
.note-checklist-item input[type="checkbox"]:checked:hover,
.preview-checklist-item input[type="checkbox"]:checked:hover{
background:var(--ac2);
border-color:var(--ac2);
}
.note-checklist-text{
flex:1;
min-width:0;
font-size:var(--fz1);
color:var(--cl1);
background:transparent;
border:none;
outline:none;
padding:0;
line-height:22px;
caret-color:var(--cl1);
}
.note-checklist-text::placeholder,
.preview-checklist-text::placeholder{
color:rgba(255,255,255,0.25);
}
.note-checklist-item.checked .note-checklist-text{
text-decoration:line-through;
color:rgba(255,255,255,0.3);
}
.note-checklist-item .checklist-remove,
.preview-checklist-item .checklist-remove{
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
opacity:0;
color:rgba(255,255,255,0.3);
line-height:1;
border-radius:4px;
transition:opacity 100ms ease,color 100ms ease;
flex-shrink:0;
}
.note-checklist-item .checklist-remove{
width:22px;
height:22px;
font-size:var(--fz4);
}
.note-checklist-item:hover .checklist-remove,
.preview-checklist-item:hover .checklist-remove{
opacity:1;
}
.note-checklist-item .checklist-remove:hover,
.preview-checklist-item .checklist-remove:hover{
color:rgba(255,80,80,0.8);
}
.checklist-ghost{
opacity:0.35;
}
.checklist-ghost .note-checklist-text,
.checklist-ghost .preview-checklist-text{
cursor:text;
}
.ghost-check{
width:20px;
height:20px;
min-width:20px;
border:2px solid currentColor;
border-radius:50%;
flex-shrink:0;
}
.preview-checklist-item.checklist-ghost .ghost-check{
width:22px;
height:22px;
min-width:22px;
}
.note-content.note-checklist-card{
padding:6px 10px;
}
.note-checklist-card-item{
display:flex;
align-items:center;
gap:7px;
padding:2px 0;
font-size:var(--fz5);
line-height:1.25rem;
}
.note-checklist-card-item .cl-check{
width:14px;
height:14px;
min-width:14px;
border:1.5px solid rgba(255,255,255,0.25);
border-radius:50%;
position:relative;
flex-shrink:0;
}
.note-checklist-card-item.checked .cl-check{
background:var(--ac1);
border-color:var(--ac1);
}
.note-checklist-card-item.checked .cl-check::after{
content:'';
position:absolute;
inset:0;
width:100%;
height:100%;
border:none;
background:url("/svg/checkbox-check.svg") center/10px no-repeat;
}
.note-checklist-card-item.checked .cl-text{
text-decoration:line-through;
color:rgba(255,255,255,0.3);
}
.cl-text{
flex:1;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
}
.preview-checklist{
list-style:none;
margin:0;
padding:15px 32px;
flex:1;
overflow-y:auto;
min-height:100px;
cursor:text;
background:var(--panel-bg);
}
.preview-checklist-item{
display:flex;
align-items:center;
gap:12px;
padding:4px 6px;
margin:0 -6px;
border-radius:6px;
cursor:text;
transition:background 150ms ease;
}
.preview-checklist-item input[type="checkbox"]{
width:22px;
height:22px;
min-width:22px;
}
.preview-checklist-item input[type="checkbox"]:checked::after{
background:url("/svg/checkbox-check.svg") center/16px no-repeat;
}
.preview-checklist-text{
flex:1;
min-width:0;
font-size:var(--fz4);
color:var(--cl1);
background:transparent;
border:none;
outline:none;
padding:0;
line-height:26px;
caret-color:var(--cl1);
}
.preview-checklist-item.checked .preview-checklist-text{
text-decoration:line-through;
color:rgba(255,255,255,0.35);
}
.preview-checklist-item .checklist-remove{
width:26px;
height:26px;
font-size:var(--fz2);
}
.item-details-view{
display:flex;
flex-direction:column;
height:100%;
max-height:calc(100vh - var(--gap,26px) * 2);
overflow:hidden;
}
.item-details-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 16px;
border-bottom:1px solid rgba(255,255,255,0.08);
flex-shrink:0;
}
.item-details-header-left{
display:flex;
align-items:center;
gap:8px;
}
.item-details-back,
.item-details-close{
width:42px;
height:42px;
background:rgba(255,255,255,0.06);
border:none;
border-radius:50%;
color:rgba(255,255,255,0.5);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
padding:0;
transition:all 100ms ease;
flex-shrink:0;
}
.item-details-back:hover,
.item-details-close:hover{
background:rgba(255,255,255,0.12);
color:rgba(255,255,255,0.8);
}
.item-details-title{
font-size:var(--fz4);
font-weight:700;
color:rgba(255,255,255,0.85);
letter-spacing:0.3px;
}
.item-details-body{
flex:1;
overflow-y:auto;
padding:0;
}
.item-details-row{
display:flex;
align-items:center;
padding:7px 20px;
gap:16px;
min-height:0;
transition:background 80ms ease;
}
.item-details-row:hover{
background:rgba(255,255,255,0.03);
}
.item-details-body,
.item-details-body *{
user-select:text;
-webkit-user-select:text;
cursor:default;
}
.item-details-label{
width:110px;
flex-shrink:0;
font-size:var(--fz5);
font-weight:600;
color:rgba(255,255,255,0.35);
text-transform:uppercase;
letter-spacing:0.4px;
}
.item-details-value{
flex:1;
font-size:var(--fz5);
color:rgba(255,255,255,0.75);
word-break:break-all;
line-height:1.5;
}
.item-details-footer{
display:flex;
align-items:center;
justify-content:center;
padding:10px 16px;
border-top:1px solid rgba(255,255,255,0.08);
flex-shrink:0;
}
.item-details-footer-text{
font-size:var(--fz5);
font-weight:600;
color:rgba(255,255,255,0.2);
letter-spacing:0.3px;
text-transform:uppercase;
user-select:text;
-webkit-user-select:text;
}
.item-details-muted{
color:rgba(255,255,255,0.2);
font-style:italic;
}
.item-details-link{
color:rgba(100,180,255,0.85);
text-decoration:none;
font-weight:500;
transition:color 100ms ease;
display:inline-flex;
align-items:center;
user-select:text;
-webkit-user-select:text;
cursor:pointer;
}
.item-details-link:hover{
color:rgba(130,200,255,1);
text-decoration:underline;
}
.item-details-file-size{
font-size:var(--fz5);
color:rgba(255,255,255,0.35);
margin-top:2px;
user-select:text;
-webkit-user-select:text;
cursor:text;
}
.item-details-link-icon{
display:inline-flex;
align-items:center;
margin-left:4px;
opacity:0.6;
}
.item-details-link:hover .item-details-link-icon{
opacity:1;
}
.item-details-value.details-val-collapsed{
max-height:calc(1.5em * 5);
overflow:hidden;
position:relative;
}
.item-details-value.details-val-collapsed::after{
content:'';
position:absolute;
bottom:0;
left:0;
right:0;
height:2em;
background:linear-gradient(transparent,var(--panel-bg));
pointer-events:none;
}
.item-details-row{
position:relative;
}
.details-val-toggle{
position:absolute;
bottom:2px;
right:8px;
width:24px;
height:24px;
background:rgba(255,255,255,0.08);
border:none;
border-radius:50%;
color:rgba(255,255,255,0.5);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
padding:0;
transition:all 150ms ease;
z-index:1;
}
.details-val-toggle svg{
width:14px;
height:14px;
}
.details-val-toggle:hover{
background:rgba(255,255,255,0.15);
color:rgba(255,255,255,0.8);
}
.details-val-toggle.details-val-expanded{
transform:rotate(180deg);
}
.details-transcription-more{
display:block;
margin-top:6px;
padding:4px 10px;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.15);
border-radius:6px;
color:rgba(255,255,255,0.7);
font-size:12px;
cursor:pointer;
transition:background 0.15s,color 0.15s;
}
.details-transcription-more:hover{
background:rgba(255,255,255,0.14);
color:rgba(255,255,255,0.9);
}
.details-transcription-more:disabled{
cursor:default;
opacity:0.6;
}