Johan Dahlin
ffe0b5c693
All checks were successful
Deploy Quartz site to GitHub Pages / build (push) Successful in 1m44s
82 lines
1.9 KiB
CSS
82 lines
1.9 KiB
CSS
[data-type="file-explorer"] {
|
|
&:has([data-drag-active]) {
|
|
.tree-item { position: relative;}
|
|
|
|
.tree-item.temp-child { height: 15px; }
|
|
|
|
.tree-item:not(.nav-folder:has(> [data-is-being-dragged]) .tree-item) {
|
|
&::after, &:where(:nth-child(1 of .tree-item))::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
translate: -52% -2px;
|
|
height: 2px;
|
|
width: 80%;
|
|
left: 50%;
|
|
background-image: linear-gradient(90deg, #8888881a 50%, transparent 50%);
|
|
background-size: 8px 2px;
|
|
background-repeat: repeat-x;
|
|
border-radius: 100px;
|
|
}
|
|
}
|
|
|
|
.tree-item[data-drop-position="before"]::before,
|
|
.tree-item[data-drop-position="after"]::after {
|
|
background-image: linear-gradient(90deg, var(--color-accent) 50%, transparent 50%) !important;
|
|
mask-image: linear-gradient(90deg, transparent 0%, black 50%, black 50%, transparent 100%);
|
|
animation: dash-flow 0.5s linear infinite;
|
|
}
|
|
|
|
.nav-folder.is-drop-target {
|
|
background: hsla(var(--interactive-accent-hsl), 0.05) !important;
|
|
border-radius: var(--radius-s);
|
|
|
|
> .nav-folder-title {
|
|
color: var(--nav-item-color-highlighted) !important;
|
|
}
|
|
}
|
|
|
|
.nav-folder.is-being-dragged-over {
|
|
background-color: transparent;
|
|
> .nav-folder-title {
|
|
color: var(--nav-item-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
.tree-item-self:not(.temp)::after {
|
|
content: "⋮⋮";
|
|
position: absolute;
|
|
rotate: 90deg;
|
|
right: 12px;
|
|
align-self: center;
|
|
font-size: calc(var(--nav-item-size) + 2px);
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes dash-flow {
|
|
from { background-position: 0 0; }
|
|
to { background-position: 8px 0; }
|
|
}
|
|
|
|
.menu-item[data-section="custom"] {
|
|
.menu-item-icon:first-child { display: flex; }
|
|
|
|
.dragging-enabled-checkbox {
|
|
margin-bottom: -2px;
|
|
input { margin: 0; }
|
|
}
|
|
|
|
.svg-icon.lucide-pin {
|
|
transform: rotate(45deg);
|
|
margin-bottom: -2px;
|
|
}
|
|
}
|
|
|
|
.manual-sorting-modal .modal-buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
} |