.nav-center{
position:relative;
width:100%;
height:var(--gx2);
background-color:#0f0f0f;
border:var(--bw1) 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;
cursor:pointer;
border-radius:var(--br1);
}
.nav-center.exp{
height:auto;
min-height:var(--gx2);
max-height:80vh;
flex-direction:column;
border-top-color:transparent;
}
.nav-center.exp .nav-center-in,
.nav-center.exp .note-plus-icon{
display:none;
}
.note-exp-header{
display:none;
align-items:center;
justify-content:space-between;
height:var(--gx2);
padding:0 20px;
cursor:pointer;
border-radius:var(--br1);
transition:background-color 100ms ease;
flex-shrink:0;
}
.nav-center.exp .note-exp-header{
display:flex;
background-color:#090909;
border:var(--bw1) solid #000;
box-shadow:0 1px 3px #000;
margin:calc(-1 * var(--bw1)) calc(-1 * var(--bw1)) 0 calc(-1 * var(--bw1));
width:calc(100% + var(--bw1) * 2);
max-width:calc(100% + var(--bw1) * 2);
height:calc(var(--gx2) + var(--bw1));
border-radius:var(--br1);
}
.note-exp-header:hover{
background-color:rgba(255,255,255,0.03);
}
.note-exp-header-left{
display:flex;
align-items:center;
gap:12px;
}
.note-exp-header-icon{
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
}
.note-exp-header-icon svg{
width:28px;
height:28px;
fill:none;
stroke:var(--ac1);
stroke-width:2px;
}
.note-exp-header-text{
font-size:var(--fz2);
font-weight:var(--fw1);
color:#888;
}
.note-exp-header-close{
font-size:12px;
color:#555;
text-transform:uppercase;
letter-spacing:0.5px;
}
.note-btn-content{
display:flex;
align-items:center;
gap:12px;
pointer-events:none;
width:100%;
padding-left:45px;
}
.note-plus-icon{
position:absolute;
left:20px;
top:50%;
transform:translateY(-50%);
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
}
.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-text{
font-size:var(--fz2);
font-weight:var(--fw1);
color:#888;
white-space:nowrap;
}
.note-upload-btn{
position:absolute;
right:8px;
top:50%;
transform:translateY(-50%);
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
border-radius:var(--br0);
transition:background-color 100ms ease;
z-index:2;
}
.note-upload-btn:hover{
background-color:rgba(255,255,255,0.08);
}
.note-upload-btn:hover .note-upload-btn-icon svg{
fill:var(--ac1);
}
.note-upload-btn-icon{
width:24px;
height:24px;
display:flex;
align-items:center;
justify-content:center;
}
.note-upload-btn-icon svg{
width:24px;
height:24px;
fill:#666;
transition:fill 100ms ease;
}
.nav-center.exp .note-upload-btn{
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:1.4rem;
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:16px;
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;
justify-content:center;
padding:15px var(--gap);
cursor:text;
flex-shrink:0;
}
.note-bottom-left{
display:flex;
align-items:center;
gap:8px;
}
.note-bottom-right{
display:flex;
align-items:center;
justify-content:center;
}
.note-upload-icon{
width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
}
.note-upload-icon svg{
width:20px;
height:20px;
fill:#666;
transition:fill 100ms ease;
}
.preview-status-bar{
display:flex;
justify-content:space-between;
align-items:center;
padding:6px 20px;
border-top:var(--bw1) solid rgba(255,255,255,0.08);
background:rgba(0,0,0,0.15);
font-size:12px;
color:rgba(255,255,255,0.5);
gap:16px;
margin-top:auto;
}
.status-left,
.status-right{
display:flex;
align-items:center;
gap:16px;
flex-wrap:wrap;
}
.status-item{
display:flex;
align-items:center;
gap:5px;
}
.status-label{
color:rgba(255,255,255,0.35);
font-weight:500;
text-transform:uppercase;
font-size:10px;
letter-spacing:0.5px;
}
.status-value{
color:rgba(255,255,255,0.7);
font-weight:600;
font-variant-numeric:tabular-nums;
}
.status-tag{
background:rgba(255,255,255,0.1);
padding:2px 6px;
border-radius:4px;
font-size:10px;
font-weight:600;
}
.status-source .status-tag{
background:rgba(100,200,255,0.15);
color:rgba(100,200,255,0.9);
}
.status-category .status-tag{
background:rgba(180,130,255,0.15);
color:rgba(180,130,255,0.9);
}
.status-del-btn{
padding:4px 10px;
margin-left:8px;
background:rgba(255,80,80,0.1);
border:var(--bw1) solid rgba(255,80,80,0.2);
border-radius:6px;
color:rgba(255,100,100,0.7);
cursor:pointer;
font-size:11px;
font-weight:600;
transition:all 100ms ease;
}
.status-del-btn:hover{
background:rgba(255,80,80,0.25);
border-color:rgba(255,80,80,0.4);
color:rgba(255,120,120,1);
}
.preview-panel{
display:flex;
flex-direction:column;
}
.preview-content-con{
flex:1;
overflow-y:auto;
min-height:100px;
cursor:text;
}
.preview-content{
padding:15px 20px;
min-height:150px;
cursor:text;
outline:none;
}
.preview-content:empty::before{
content:attr(data-placeholder);
color:rgba(255,255,255,0.3);
pointer-events:none;
}