.clip .move-handle,
.clip .note-content,
.clip .note-link-wrapper{
transition:filter 150ms ease;
position:relative;
}
.clip .move-handle::before,
.clip .note-content::before,
.clip .note-link-wrapper::before{
content:'';
position:absolute;
inset:0;
border-radius:var(--br1);
box-shadow:inset 0 0 0 2px rgba(240,85,51,0.66);
opacity:0;
transition:opacity 150ms ease,box-shadow 150ms ease;
pointer-events:none;
z-index:5;
}
.clip:hover .move-handle::before,
.clip:hover .note-content::before,
.clip:hover .note-link-wrapper::before{
opacity:1;
}
.clip.pinned .move-handle::before,
.clip.pinned .note-content::before,
.clip.pinned .note-link-wrapper::before{
box-shadow:inset 0 0 0 2px rgba(255,165,0,0.66);
}
.clip.pinned:hover .move-handle::before,
.clip.pinned:hover .note-content::before,
.clip.pinned:hover .note-link-wrapper::before{
opacity:1;
box-shadow:inset 0 0 0 2px rgba(255,165,0,0.66);
}
.clip.sortable-chosen:not(.dragging):not(.drag-ready) .move-handle::before,
.clip.sortable-chosen:not(.dragging):not(.drag-ready) .note-content::before,
.clip.sortable-chosen:not(.dragging):not(.drag-ready) .note-link-wrapper::before{
opacity:1;
box-shadow:inset 0 0 0 2px rgba(240,85,51,0.9);
}
.clip.pinned.sortable-chosen:not(.dragging):not(.drag-ready) .move-handle::before,
.clip.pinned.sortable-chosen:not(.dragging):not(.drag-ready) .note-content::before,
.clip.pinned.sortable-chosen:not(.dragging):not(.drag-ready) .note-link-wrapper::before{
opacity:1;
box-shadow:inset 0 0 0 2px rgba(255,165,0,0.9);
}
.sel-mode .clip.sel .move-handle,
.sel-mode .clip.sel .note-content,
.sel-mode .clip.sel .note-link-wrapper{
position:relative;
}
.sel-mode .clip.sel .move-handle::before,
.sel-mode .clip.sel .note-content::before,
.sel-mode .clip.sel .note-link-wrapper::before{
opacity:1;
box-shadow:inset 0 0 0 2px rgba(255,87,34,0.9);
}
.sel-mode .clip.sel.pinned .move-handle::before,
.sel-mode .clip.sel.pinned .note-content::before,
.sel-mode .clip.sel.pinned .note-link-wrapper::before{
opacity:1;
box-shadow:inset 0 0 0 2px rgba(255,165,0,0.9);
}
.sel-mode .clip.sel .move-handle::after,
.sel-mode .clip.sel .note-content::after,
.sel-mode .clip.sel .note-link-wrapper::after{
content:'';
position:absolute;
inset:0;
background:rgba(255,87,34,0.2);
pointer-events:none;
z-index:1;
border-radius:var(--br1);
transition:background 150ms ease;
}
.sel-mode .clip.sel.pinned .move-handle::after,
.sel-mode .clip.sel.pinned .note-content::after,
.sel-mode .clip.sel.pinned .note-link-wrapper::after{
background:rgba(255,165,0,0.2);
}
.sel-mode .clip.sel:hover .move-handle::after,
.sel-mode .clip.sel:hover .note-content::after,
.sel-mode .clip.sel:hover .note-link-wrapper::after{
background:rgba(255,87,34,0.28);
}
.sel-mode .clip.sel.pinned:hover .move-handle::after,
.sel-mode .clip.sel.pinned:hover .note-content::after,
.sel-mode .clip.sel.pinned:hover .note-link-wrapper::after{
background:rgba(255,165,0,0.28);
}