.clip{
display:flex;
flex-direction:column;
position:relative;
border-radius:0;
margin-bottom:0;
height:auto;
min-height:var(--ch1);
overflow:visible;
}
.clip.ctrl-act,
.clip.shift-act{
pointer-events:none;
}
.pinned-pill{
background:rgba(255,165,0,0.9);
color:#000;
font-size:11px;
line-height:24px;
height:24px;
font-weight:620;
padding:0 8px;
border-radius:20px;
pointer-events:auto;
cursor:pointer;
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;
transition:background 111ms ease,box-shadow 111ms ease;
}
.pinned-pill:hover{
background:rgba(255,149,11,1);
}
.pinned-pill:active{
background:rgba(255,120,0,1);
}
.clip-sel-check{
position:absolute;
top:6px;
left:6px;
width:24px;
height:24px;
border-radius:50%;
background:rgba(0,0,0,0.6);
border:var(--bw1) solid rgba(255,255,255,0.5);
z-index:11;
cursor:pointer;
opacity:0;
transition:opacity 111ms ease,background 111ms ease,border-color 111ms 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 4px rgba(0,0,0,.6);
background-color:#111111;
}
.clip-img .move-handle,
.clip-vid .move-handle,
.clip-pdf .move-handle,
.clip-office .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:#111111;
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-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 111ms ease;
}
.clip-vid:hover .video-play-overlay svg{
opacity:0.75;
}
.pdf-overlay,
.office-overlay{
display:none;
}
.pill-container{
position:absolute;
top:6px;
left:6px;
display:flex;
align-items:center;
gap:4px;
z-index:10;
transition:left 111ms ease;
}
.clip:hover .pill-container,
.clip.sel .pill-container{
left:32px;
}
.file-type-pill{
background:rgba(229,57,53,0.9);
color:#fff;
font-size:10px;
line-height:24px;
height:24px;
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,
.file-type-pill.pill-csv{
background:rgba(33,115,70,0.9);
}
.file-type-pill.pill-powerpoint{
background:rgba(183,71,42,0.9);
}
.file-type-pill.pill-txt,
.file-type-pill.pill-json{
background:rgba(100,100,100,0.9);
}
.file-type-pill.pill-html,
.file-type-pill.pill-xml{
background:rgba(227,76,38,0.9);
}
.office-overlay-word svg rect{
fill:#2b579a;
}
.office-overlay-excel svg rect{
fill:#217346;
}
.office-overlay-powerpoint svg rect{
fill:#b7472a;
}
.clip-office.placeholder.uploading{
border-color:#2b579a;
}
.clip-office-word.placeholder.uploading{
border-color:#2b579a;
}
.clip-office-excel.placeholder.uploading{
border-color:#217346;
}
.clip-office-powerpoint.placeholder.uploading{
border-color:#b7472a;
}
.clip-office .upload-spinner circle{
stroke:#2b579a;
}
.clip-office-excel .upload-spinner circle{
stroke:#217346;
}
.clip-office-powerpoint .upload-spinner circle{
stroke:#b7472a;
}
.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{
color:#66b1ff;
background-color:#171b21;
}
.note-link:active,
.note-link:focus{
background-color:rgba(74,158,255,0.08);
}
.note-link span{
position:relative;
}
.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:14px;
z-index:10;
padding:4px 8px;
background-color:rgba(0,0,0,0.4);
}
.yt-overlay{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
opacity:0.9;
}
.yt-overlay svg{
width:68px;
height:48px;
opacity:0.44;
}
.yt-link:hover svg,
.yt-link:active svg{
opacity:0.88;
}
.img-link{
position:relative;
background-size:cover;
background-position:center center;
color:#fff;
text-shadow:0 1px 3px rgba(0,0,0,0.8),0 0 5px rgba(0,0,0,0.5);
overflow:hidden;
}
.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;
}
.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;
box-shadow:0 var(--bw1) 4px 0 rgba(0,0,0,0.4);
height:var(--ch1);
}
.note-content{
padding:10px;
white-space:pre-wrap;
overflow:hidden;
word-wrap:break-word;
outline:none;
background-color:rgba(0,0,0,0.24);
scrollbar-width:none;
font-size:0.9rem;
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-link,
.note-link-wrapper,
.move-handle{
cursor:default;
border-radius:var(--br1);
}