Tweak dnd-target visual effect

Also fixed missing dnd-target effect in collections tree (regression in 1.5.0)
zotero · Aug 5, 2024 · c09391d · c09391d
1 parent 8783c0b
commit c09391d
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 35 deletions.
diff --git a/src/scss/abstracts/_mixins.scss b/src/scss/abstracts/_mixins.scss
@@ -9,5 +9,4 @@
 @import "mixins/selectors";
 @import "mixins/hairline";
 @import "mixins/button";
-@import "mixins/dnd-target";
 @import "mixins/theme";
diff --git a/src/scss/abstracts/mixins/_dnd-target.scss b/src/scss/abstracts/mixins/_dnd-target.scss
diff --git a/src/scss/abstracts/mixins/_theme.scss b/src/scss/abstracts/mixins/_theme.scss
@@ -29,9 +29,8 @@
 	--color-shade-10-50: #{transparentize(map.get($colors, "color-shade-10"), 0.5)};
 	--color-shade-2-50: #{transparentize(map.get($colors, "color-shade-2"), 0.5)};
 
-	--color-text-selection-bg: rgba(map.get($colors, "accent-blue"), 0.2);
-	--color-text-selection-bg: rgba(map.get($colors, "accent-blue"), 0.2);
-	--color-dnd-target: rgba(map.get($colors, "accent-blue"), 0.25);
+	--color-text-selection-bg: #{rgba(map.get($colors, "accent-blue"), 0.2)};
+	--color-text-selection-bg: #{rgba(map.get($colors, "accent-blue"), 0.2)};
 
 	// composite (opaque) colors
 	--color-quinary-on-background: #{color.mix(

diff --git a/src/scss/components/_collection-tree.scss b/src/scss/components/_collection-tree.scss
@@ -150,7 +150,8 @@
 
 		@include state(".item-container.dnd-target", "li.selected > .item-container.dnd-target") {
 			@include mouse-and-bp-up(md) {
-				@include dnd-target;
+				color: var(--material-background);
+				background: var(--fill-secondary);
 			}
 		}
 
@@ -218,6 +219,9 @@
 					@include state("li.picked > .item-container") {
 						color: var(--primary-on-accent);
 					}
+					@include state(".item-container.dnd-target", "li.selected > .item-container.dnd-target") {
+						color: var(--material-background);
+					}
 				}
 			}
 		}

diff --git a/src/scss/components/attachment/_pane.scss b/src/scss/components/attachment/_pane.scss
@@ -22,7 +22,8 @@
 
 	&.dnd-target {
 		position: relative;
-		@include dnd-target;
+		color: var(--material-background);
+		background: var(--fill-secondary);
 	}
 
 	> .toolbar {

diff --git a/src/scss/components/item/_table.scss b/src/scss/components/item/_table.scss
@@ -21,13 +21,15 @@
 	}
 
 	&.dnd-target {
-		@include dnd-target;
-
 		&::after {
+			content: "";
+			position: absolute;
+			inset: 0;
 			pointer-events: none;
 			background-color: transparent;
-			outline: 3px solid var(--color-dnd-target-outline);
-			outline-offset: -3px;
+			outline: 2px solid var(--fill-secondary);
+			outline-offset: -2px;
+			opacity: 0.5;
 		}
 	}
 }
@@ -234,16 +236,17 @@
 			}
 		}
 
-		&.dnd-target {
-			@include dnd-target;
+		&.dnd-target:not(.specifity) {
+			color: var(--material-background);
+			background: var(--fill-secondary);
 		}
 
 		&.dnd-target-top, &.dnd-target-bottom + .item {
 			overflow: visible !important;
 
 			&::before {
 				content: "";
-				background: $item-table-dnd-target-bg;
+				background: var(--fill-secondary);
 				position: absolute;
 				top: -1px;
 				width: 80px;

diff --git a/src/scss/components/tag/_selector.scss b/src/scss/components/tag/_selector.scss
@@ -110,7 +110,8 @@
 			}
 
 			&.dnd-target {
-				background-color: $dnd-target-color;
+				color: var(--material-background);
+				background: var(--fill-secondary);
 			}
 
 			.tag-label {

diff --git a/src/scss/themes/_common.scss b/src/scss/themes/_common.scss
@@ -87,7 +87,6 @@ $item-table-head-active-bg: $shade-1;
 $item-table-odd-bg: var(--color-shade-1-darker);
 $item-table-active-bg: $shade-3;
 $sort-indicator: var(--accent-blue);
-$item-table-dnd-target-bg: $shade-5;
 
 // Item details
 $item-details-border-1x: $shade-3;
@@ -147,7 +146,6 @@ $btn-icon-separator-color: $shade-3;
 $twisty-color: $shade-6;
 $twisty-focus-color: var(--accent-asphalt);
 $twisty-selected-color: $shade-7;
-$twisty-dnd-target-color: $shade-0;
 
 // Forms
 $form-bg-touch: $shade-1;
@@ -248,9 +246,6 @@ $popover-arrow-outer-color: rgba(0, 0, 0, 0.2);
 $ongoing-border-color: $shade-3;
 $ongoing-color: $shade-8;
 
-// Drag and drop target
-$dnd-target-color: var(--color-dnd-target);
-
 // Identifier picker
 $result-border-color: $shade-2;
 $result-hover-color: $shade-0;