outline

frontend/src/styles/documents/drag-preview.css

@@ -0,0 +1,76 @@
+.document-drag-preview {
+  position: fixed;
+  pointer-events: none;
+  top: -9999px;
+  left: -9999px;
+  width: var(--drag-preview-size, 96px);
+  height: var(--drag-preview-size, 96px);
+  z-index: 9999;
+}
+
+.document-drag-preview__item {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 64px;
+  height: 64px;
+  border-radius: 6px;
+  box-shadow: 0 6px 12px var(--shadow-pop);
+  overflow: hidden;
+  background-color: var(--overlay-dim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  transform: translate(-50%, -50%) rotate(var(--rotation-deg, 0deg));
+  transform-origin: center;
+}
+
+.document-drag-preview__item--folder {
+  background: transparent;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+.document-drag-preview__item--image {
+  background-color: #000;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+
+.document-drag-preview__item .document-thumbnail,
+.document-drag-preview__item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+
+.document-drag-preview__item .thumb-placeholder,
+.document-drag-preview__item .thumb-placeholder * {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.document-drag-preview__folder-thumb {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.document-drag-preview__folder-thumb svg {
+  width: 48px;
+  height: 48px;
+  color: var(--accent-strong, var(--accent));
+}

frontend/src/styles/documents/listing.css

@@ -13,8 +13,28 @@
   min-height: 0;
 }
 
-.folder-row.is-drop-target {
-  outline: 2px dashed var(--accent);
+
+
+.documents-panel tr.folder.is-drop-target {
+  outline: 2px dashed var(--accent-strong, var(--accent));
+  outline-offset: -2px;
+}
+
+.folder-row__columns {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 7rem 7rem;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.folder-row__meta {
+  font-variant-numeric: tabular-nums;
+  color: var(--muted);
+  text-align: left;
+}
+
+.documents-grid .folder-card.is-drop-target {
+  outline: 2px dashed var(--accent-strong, var(--accent));
   outline-offset: 2px;
 }
 

frontend/src/styles/documents/viewer.css

@@ -63,6 +63,12 @@
   pointer-events: none;
 }
 
+.document-drag-preview__item--folder {
+  background: transparent;
+  box-shadow: none;
+  border-radius: 0;
+}
+
 .document-drag-preview__folder-thumb {
   width: 100%;
   height: 100%;

frontend/src/styles/index.css

@@ -6,6 +6,7 @@
 @import './documents/controls.css';
 @import './layout/structure.css';
 @import './documents/viewer.css';
+@import './documents/drag-preview.css';
 @import './documents/tags-correspondents.css';
 @import './documents/panel-sections.css';
 @import './sidebar/sidebar.css';

frontend/src/styles/sidebar/sidebar.css

@@ -23,6 +23,11 @@
   -webkit-user-select: none;
 }
 
+.sidebar .folder-row.is-drop-target {
+  outline: 2px dashed var(--accent-strong, var(--accent));
+  outline-offset: 2px;
+}
+
 .folder-row .name-wrap {
   display: inline-flex;
   align-items: center;