.clip-preview-overlay.modal-overlay{
overflow:hidden;
}
.clip-preview-panel{
max-width:550px;
padding:0;
max-height:calc(100vh - var(--gap) * 2);
overflow:hidden;
}
.clip-preview-panel .img-preview-con{
position:relative;
display:flex;
align-items:center;
justify-content:center;
border-radius:20px 20px 0 0;
flex-shrink:1;
min-height:0;
max-height:none;
overflow:hidden;
background:none;
}
.img-preview-wrap{
position:relative;
display:inline-block;
max-width:100%;
}
.clip-preview-panel .img-preview{
display:block;
width:auto;
height:auto;
max-width:100%;
object-fit:contain;
}
.clip-preview-panel .img-preview-con.loading-thumb{
width:100%;
align-self:center;
border-radius:0;
}
.clip-preview-panel .loading-thumb .img-preview-wrap{
display:block;
width:100%;
}
.clip-preview-panel .loading-thumb .img-preview{
width:100%;
height:auto;
}
.clip-preview-img-stats{
position:absolute;
bottom:8px;
left:8px;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:5px;
font-size:var(--fz5);
color:rgba(255,255,255,0.85);
padding:6px 8px;
background:rgba(0,0,0,0.55);
border-radius:var(--br0);
opacity:0;
pointer-events:none;
line-height:1.5rem;
}
.doc-preview-con:hover .clip-preview-img-stats{
opacity:1;
}
.clip-preview-type-pill{
display:inline-flex;
align-items:center;
justify-content:center;
height:20px;
padding:0 8px;
border-radius:10px;
font-size:inherit;
font-weight:620;
letter-spacing:0.5px;
text-transform:uppercase;
color:#fff;
background:rgba(229,57,53,0.9);
}
.clip-preview-type-pill.pill-word{
background:rgba(43,87,154,0.9);
}
.clip-preview-type-pill.pill-excel{
background:rgba(33,115,70,0.9);
}
.clip-preview-type-pill.pill-powerpoint{
background:rgba(183,71,42,0.9);
}
.clip-preview-size{
color:inherit;
}
.clip-preview-pages{
color:inherit;
}
.clip-preview-source{
color:inherit;
max-width:200px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.status-copy-btn{
width:var(--pbz);
height:var(--pbz);
background:rgba(255,255,255,0.06);
border:var(--bt1) solid rgba(255,255,255,0.12);
border-radius:50%;
color:rgba(255,255,255,0.5);
cursor:pointer;
font-size:var(--fz5);
font-weight:700;
transition:all 100ms ease;
display:flex;
align-items:center;
justify-content:center;
padding:0;
flex-shrink:0;
}
.status-copy-btn:hover{
background:rgba(255,255,255,0.12);
border-color:rgba(255,255,255,0.2);
color:rgba(255,255,255,0.8);
}
.status-copy-btn:active{
transform:scale(0.92);
}
.status-copy-btn.copied{
background:rgba(80,200,120,0.15);
border-color:rgba(80,200,120,0.3);
color:rgba(80,200,120,0.9);
}
.clip-preview-panel .preview-status-bar{
flex-shrink:0;
}
.clip-preview-title-row{
display:flex;
align-items:center;
background:var(--panel-bg);
padding:0 var(--gd2) 0 0;
}
.clip-preview-title-input{
flex:1;
min-width:0;
background:transparent;
border:none;
outline:none;
color:var(--cl1,#fff);
font-size:var(--fz1);
font-weight:640;
padding:var(--gap);
caret-color:var(--cl1);
}
.clip-preview-title-input::placeholder{
color:rgba(255,255,255,0.25);
}
.clip-preview-title-input::selection{
background-color:rgba(61,127,242,0.8);
}
.clip-preview-desc-toggle{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
background:none;
border:none;
border-radius:10px;
color:rgba(255,255,255,0.25);
cursor:pointer;
flex-shrink:0;
padding:0;
transition:color 100ms ease,background 100ms ease;
}
.clip-preview-desc-toggle svg{
width:20px;
height:20px;
}
.clip-preview-desc-toggle:hover{
color:rgba(255,255,255,0.6);
background:rgba(255,255,255,0.06);
}
.clip-preview-desc-toggle.active{
color:var(--ac1);
}
.clip-preview-desc-toggle.active:hover{
color:var(--ac2);
background:rgba(255,255,255,0.06);
}
.clip-preview-panel .preview-content.clip-preview-desc{
padding:0 var(--gap) var(--gap);
background:var(--panel-bg);
font-size:var(--fz4);
color:rgba(255,255,255,0.7);
outline:none;
line-height:1.45;
min-height:0;
}
.clip-preview-panel .preview-content.clip-preview-desc:empty:before{
content:attr(data-placeholder);
color:rgba(255,255,255,0.25);
pointer-events:none;
}
.clip-preview-panel .preview-content.clip-preview-desc.desc-hidden{
display:none;
}
.clip-preview-panel .video-preview-con{
background:#000;
}
.clip-preview-panel .video-preview{
display:block;
width:100%;
max-height:60vh;
outline:none;
background:#000;
}
.status-expand-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-expand-btn svg{
width:20px;
height:20px;
display:block;
flex-shrink:0;
}
.status-expand-btn:hover{
background:rgba(255,255,255,0.12);
border-color:rgba(255,255,255,0.22);
color:rgba(255,255,255,0.8);
}
.status-expand-btn:active{
transform:scale(0.92);
}
.clip-preview-title-row.edit-hidden{
display:none;
}
.clip-preview-desc.edit-hidden{
display:none;
}
.status-edit-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-edit-btn svg{
width:18px;
height:18px;
display:block;
flex-shrink:0;
}
.status-edit-btn:hover{
background:rgba(255,255,255,0.12);
border-color:rgba(255,255,255,0.22);
color:rgba(255,255,255,0.8);
}
.status-edit-btn.active{
color:var(--ac1);
border-color:rgba(61,127,242,0.3);
}
.status-edit-btn:active{
transform:scale(0.92);
}
.expanded-overlay.modal-overlay{
overflow:auto;
}
.preview-expanded{
max-width:var(--mxw)!important;
max-height:var(--mxh)!important;
width:var(--mxw);
height:var(--mxh);
transition:width 150ms ease,height 150ms ease;
}
.preview-expanded .img-preview-con{
max-height:calc(var(--mxh) - 200px)!important;
}
.preview-expanded .img-preview{
max-height:calc(var(--mxh) - 200px)!important;
}
.preview-expanded .video-preview{
max-height:calc(var(--mxh) - 200px)!important;
}
.preview-expanded .preview-content{
flex:1;
min-height:200px;
}
.preview-expanded .preview-title-con{
display:flex;
align-items:center;
padding:var(--gd2);
padding-left:32px;
cursor:text;
}
.preview-expanded .preview-title-con .preview-title{
flex:1;
min-width:0;
padding:0;
}
.preview-exp-close{
width:var(--pbz);
height:var(--pbz);
background:rgba(255,255,255,0.06);
border:0;
border-radius:50%;
color:rgba(255,255,255,0.4);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
padding:0;
flex-shrink:0;
transition:background-color 100ms ease,color 100ms ease;
}
.preview-exp-close svg{
width:26px;
height:26px;
display:block;
flex-shrink:0;
}
.preview-exp-close:hover{
background:rgba(255,255,255,0.12);
color:rgba(255,255,255,0.8);
}
.preview-exp-close:active{
transform:scale(0.92);
}
@media(max-width:600px){
.clip-preview-panel{
max-width:100%;
border-radius:16px;
}
.clip-preview-panel .img-preview-con{
border-radius:16px 16px 0 0;
}
.clip-preview-panel .preview-status-bar{
border-radius:0 0 16px 16px;
}
.preview-expanded{
max-width:100vw!important;
width:100vw;
max-height:100vh!important;
height:100vh;
}
}.archive-preview-con{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
padding:40px 20px;
background:linear-gradient(135deg,#2d1b4e 0%,#1a1a2e 50%,#2d1b4e 100%);
border-radius:var(--radius, 12px);
}
.archive-preview-label{
font-size:28px;
font-weight:700;
letter-spacing:3px;
color:rgba(180,140,220,0.8);
}
.archive-preview-size{
color:var(--text-secondary, #888);
font-size:13px;
}
.archive-preview-dl{
display:inline-flex;
align-items:center;
gap:6px;
margin-top:4px;
color:rgba(180,140,220,0.9);
font-size:13px;
text-decoration:none;
transition:color .2s;
}
.archive-preview-dl:hover{
color:#b88cdc;
}
.archive-preview-dl svg{
width:14px;
height:14px;
}