.clip{
display:flex;
flex-direction:column;
position:relative;
border-radius:0;
margin-bottom:0;
height:auto;
min-height:var(--ch1);
overflow:visible;
}
.pinned-pill{
width:26px;
height:26px;
pointer-events:auto;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.pinned-pill svg{
width:22px;
height:22px;
fill:var(--ac2);
transition:fill 100ms ease;
display:block;
}
.pinned-pill:hover svg{
fill:var(--ac2);
}
.pinned-pill:active svg{
fill:var(--ac2);
}
.clip-sel-check{
position:absolute;
top:var(--ip1);
left:var(--ip1);
width:26px;
height:26px;
border-radius:50%;
background:rgba(0,0,0,0.6);
border:var(--bt1) solid rgba(255,255,255,0.5);
z-index:11;
cursor:pointer;
opacity:0;
transition:opacity 100ms ease,background 100ms ease,border-color 100ms ease;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
}
.clip:hover .clip-sel-check{
opacity:1;
}
.clip-sel-check:hover{
background:rgba(0,0,0,0.8);
border-color:rgba(255,255,255,0.8);
}
.clip.sel .clip-sel-check{
opacity:1;
background:#ff5722;
border-color:#ff5722;
}
.clip.sel .clip-sel-check:hover{
background:#ff6a3c;
border-color:#ff6a3c;
}
.clip-sel-check::after{
content:'';
display:block;
width:8px;
height:4px;
border-left:2px solid white;
border-bottom:2px solid white;
transform:rotate(-45deg) translate(0,-1px);
opacity:0;
}
.clip.sel .clip-sel-check::after{
opacity:1;
}
.move-handle{
box-shadow:0 1px 3px rgba(0,0,0,.5);
background-color:var(--ooo);
border-radius:var(--br1);
}
.clip-img .move-handle,
.clip-vid .move-handle,
.clip-pdf .move-handle,
.clip-office .move-handle,
.clip-archive .move-handle{
display:block;
width:100%;
height:var(--ch1);
}
.clip-img .move-handle img,
.clip-vid .move-handle img,
.clip-pdf .move-handle img,
.clip-office .move-handle img{
width:100%;
height:100%;
object-fit:contain;
background-color:var(--ooo);
display:block;
pointer-events:none;
border-radius:var(--br1);
}
.clip-img .move-handle img.near-square,
.clip-vid .move-handle img.near-square,
.clip-pdf .move-handle img.near-square,
.clip-office .move-handle img.near-square{
object-fit:cover;
}
.clip-pdf .move-handle img,
.clip-office .move-handle img{
object-fit:cover;
object-position:top;
}
.video-play-overlay{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
z-index:4;
background:transparent;
border-radius:var(--br1);
}
.video-play-overlay svg{
width:64px;
height:64px;
opacity:0.45;
filter:drop-shadow(0 2px 8px rgba(0,0,0,0.7));
color:rgba(255,255,255,0.85);
fill:rgba(255,255,255,0.85);
transition:opacity 100ms ease;
}
.clip-vid:hover .video-play-overlay svg{
opacity:0.75;
}
.pill-container{
position:absolute;
top:var(--ip1);
left:var(--ip1);
display:flex;
align-items:center;
gap:4px;
z-index:10;
transition:left 100ms ease;
}
.clip:hover .pill-container,
.clip.sel .pill-container{
left:34px;
}
.file-type-pill{
background:rgba(229,57,53,0.9);
color:#fff;
font-size:var(--fz5);
line-height:26px;
height:26px;
font-weight:620;
padding:0 8px;
border-radius:20px;
pointer-events:none;
text-transform:uppercase;
letter-spacing:0.5px;
box-shadow:0 1px 3px rgba(0,0,0,0.4);
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
}
.file-type-pill.pill-word{
background:rgba(43,87,154,0.9);
}
.file-type-pill.pill-excel{
background:rgba(33,115,70,0.9);
}
.file-type-pill.pill-powerpoint{
background:rgba(183,71,42,0.9);
}
.file-type-pill.pill-archive{
background:rgba(120,80,160,0.9);
}
.clip-archive .move-handle.archive-card-bg{
display:flex;
align-items:center;
justify-content:center;
background:#2d1b4e;
border-radius:var(--br1);
width:100%;
height:var(--ch1);
overflow:hidden;
}
.archive-card-label{
font-size:22px;
font-weight:700;
letter-spacing:2px;
color:rgba(180,140,220,0.7);
pointer-events:none;
user-select:none;
}
.open-orig{
display:inline-flex;
align-items:center;
justify-content:center;
width:14px;
height:14px;
vertical-align:middle;
margin-left:0;
opacity:0.7;
position:relative;
top:-1px;
}
.open-orig:hover{
opacity:1;
}
.open-orig svg{
width:14px;
height:14px;
}
.note-link{
position:relative;
overflow:hidden;
}
.note-link:hover{
background-color:#171b21;
}
.note-link:active,
.note-link:focus{
background-color:rgba(74,158,255,0.08);
}
.note-link span{
position:relative;
}
.note-link>span{
color:var(--lnk);
text-decoration:none;
}
.note-link:hover>span{
text-decoration:underline;
text-decoration-color:var(--lnk);
text-decoration-thickness:1px;
text-underline-offset:2px;
}
.yt-link{
padding-top:56.25%;
overflow:hidden;
background-size:cover;
background-position:center center;
}
.yt-link span.yt-title{
position:absolute;
bottom:10px;
left:10px;
right:10px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#fff;
text-shadow:0 1px 2px rgba(0,0,0,0.8),0 0 4px rgba(0,0,0,0.6);
font-weight:500;
font-size:var(--fz4);
z-index:10;
padding:4px 8px;
background-color:rgba(0,0,0,0.4);
}
.yt-overlay,
.tiktok-overlay{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
}
.yt-overlay{
opacity:0.9;
}
.yt-overlay svg{
width:68px;
height:48px;
opacity:0.44;
}
.yt-link:hover svg,
.yt-link:active svg{
opacity:0.88;
}
.tiktok-link{
padding-top:125%;
overflow:hidden;
background-size:cover;
background-position:center center;
background-color:#010101;
}
.tiktok-overlay svg{
width:48px;
height:48px;
opacity:0.6;
filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.tiktok-link:hover .tiktok-overlay svg{
opacity:0.95;
}
.tiktok-author{
position:absolute;
bottom:8px;
left:8px;
right:8px;
color:#fff;
font-size:var(--fz5);
font-weight:600;
z-index:10;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:0 1px 3px rgba(0,0,0,0.8);
}
.link-bg-overlay{
position:absolute;
inset:0;
background:linear-gradient(to bottom,rgba(0,0,0,0.1),rgba(0,0,0,0.7));
z-index:1;
}
.clip-favicon{
position:absolute;
bottom:var(--ip1);
right:var(--ip1);
width:26px;
height:26px;
border-radius:var(--br2);
z-index:11;
pointer-events:none;
opacity:0.9;
box-shadow:none;
}
.clip-favicon-svg{
background:none;
display:flex;
align-items:center;
justify-content:center;
padding:0;
box-sizing:border-box;
box-shadow:none;
}
.clip-favicon-svg svg{
width:100%;
height:100%;
fill:rgba(255,255,255,0.55);
}
.center-link-icon{
position:absolute;
bottom:2px;
left:2px;
display:none;
align-items:center;
justify-content:center;
width:36px;
height:36px;
z-index:11;
opacity:0.08;
pointer-events:none;
}
.center-link-icon svg{
width:36px;
height:36px;
color:#fff;
}
.note-link-wrapper:hover svg{
display:block;
}
.note-content,
.note-link-wrapper{
position:relative;
height:var(--ch1);
}
.note-link-wrapper{
text-decoration:none;
}
.note-content{
padding:10px;
white-space:pre-wrap;
overflow:hidden;
word-wrap:break-word;
outline:none;
background-color:rgba(19,19,19,1);
scrollbar-width:none;
font-size:var(--fz5);
line-height:1.15rem;
}
.note-content:focus{
overflow-y:auto;
background-color:rgba(0,0,0,0.32);
}
.note-content::-webkit-scrollbar{
display:none;
}
.note-content:focus::-webkit-scrollbar{
display:block;
width:6px;
}
.note-content:focus::-webkit-scrollbar-track{
background:var(--bg1);
}
.note-content:focus::-webkit-scrollbar-thumb{
background:var(--bc1);
border-radius:var(--br0);
}
.clip-note,
.clip-yt,
.clip-tiktok,
.clip-link,
.note-link-wrapper,
.move-handle{
cursor:default;
border-radius:var(--br1);
}
.has-touch .clip{
-webkit-touch-callout:none;
-webkit-user-select:none;
user-select:none;
}
.has-touch .clip:hover .clip-sel-check{
opacity:0;
}
.has-touch .clip.sel .clip-sel-check,
.has-touch .clip.touch-drag-ready .clip-sel-check,
.has-touch .clip.dragging .clip-sel-check{
opacity:1;
}
.has-touch .clip.sortable-chosen:not(.dragging):not(.drag-ready):not(.touch-drag-ready) .clip-sel-check{
opacity:0;
}
.has-touch .clip:hover .pill-container{
left:var(--ip1);
}
.has-touch .clip.sel .pill-container,
.has-touch .clip.touch-drag-ready .pill-container,
.has-touch .clip.dragging .pill-container{
left:34px;
}
.has-touch .clip.sortable-chosen:not(.dragging):not(.drag-ready):not(.touch-drag-ready) .pill-container{
left:var(--ip1);
}
.tiktok-embed-panel,
.yt-embed-panel{
padding:0;
background:#000;
border-color:#000;
}
.tiktok-embed-panel{
max-width:380px;
max-height:calc(100vh - var(--gap,26px) * 2);
}
.yt-embed-panel{
max-width:800px;
width:calc(100vw - var(--gap,26px) * 2);
}
.tiktok-embed-clip,
.yt-embed-clip{
overflow:hidden;
border-radius:20px 20px 0 0;
background:#000;
}
.tiktok-embed-clip{
height:calc(100vh - var(--gap,26px) * 2 - 50px);
max-height:740px;
}
.yt-embed-clip{
aspect-ratio:16/9;
}
.tiktok-embed-iframe,
.yt-embed-iframe{
display:block;
width:100%;
border:none;
background:#000;
}
.tiktok-embed-iframe{
height:calc(100% + 140px);
}
.yt-embed-iframe{
height:100%;
}
.preview-status-bar.tiktok-embed-bar,
.preview-status-bar.yt-embed-bar{
flex-shrink:0;
}
@media(max-width:600px){
.tiktok-embed-panel,
.yt-embed-panel{
max-width:100%;
border-radius:16px;
}
.tiktok-embed-clip,
.yt-embed-clip{
border-radius:16px 16px 0 0;
}
.tiktok-embed-bar,
.yt-embed-bar{
border-radius:0 0 16px 16px;
}
}.clip-no-thumb{
display:flex;
align-items:center;
justify-content:center;
width:100%;
aspect-ratio:1;
background:rgba(255,255,255,0.03);
border-radius:var(--br2);
padding:var(--gap);
box-sizing:border-box;
}