Fix regression: modals lack backdrop

zotero · Apr 25, 2024 · 4cb0097 · 4cb0097
1 parent d1a5966
commit 4cb0097
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 4 deletions.
diff --git a/src/scss/components/_library.scss b/src/scss/components/_library.scss
@@ -53,7 +53,7 @@
 			right: 0;
 			bottom: 0;
 			left: 0;
-			background-color: $modal-backdrop-bg;
+			background-color: var(--color-backdrop);
 			z-index: $z-index-search-backdrop
 		}
 

diff --git a/src/scss/components/modal/_react-modal.scss b/src/scss/components/modal/_react-modal.scss
@@ -12,7 +12,7 @@
 	right: 0;
 	bottom: 0;
 	left: 0;
-	background-color: $modal-backdrop-bg;
+	background-color: var(--color-backdrop);
 	overflow-y: auto;
 	-webkit-overflow-scrolling: touch; // Momentum scrolling for iOS 10–
 	z-index: $z-index-modal;
@@ -39,6 +39,8 @@
 }
 
 .modal {
+	border: var(--material-border-quarternary);
+
 	@include bp-up(sm) {
 		width: $modal-md;
 		margin: $space-xl auto;

diff --git a/src/scss/themes/_common.scss b/src/scss/themes/_common.scss
@@ -222,12 +222,11 @@ $menu-devider: $shade-2;
 $menu-no-results-color: $shade-5;
 
 // Drag layer
-$creator-drag-preview-shadow: rgba($shade-10, 0.2);
+$creator-drag-preview-shadow: var(--color-drag-preview-shadow);
 $items-drag-indicator-color: $item-active-color;
 $items-drag-indicator-bg: var(--accent-blue-lighter);
 
 // Modal
-$modal-backdrop-bg: rgba($shade-10, 0.4);
 $modal-content-bg: $body-bg;
 $modal-content-bg-touch: $shade-1;
 $modal-header-bg: $shade-0;

diff --git a/src/scss/themes/_dark.scss b/src/scss/themes/_dark.scss
@@ -77,10 +77,12 @@ $-colors: (
 	color-button-active-bg: #f0f0f0,
 	color-button-shadow: rgba(0, 0, 0, 0.2),
 	color-button-shadow-lighter: rgba(0, 0, 0, 0.06),
+	color-drag-preview-shadow: rgba(0, 0, 0, 0.2),
 	tag-color-border: rgba(0, 0, 0, 0.08),
 	color-text-disabled: #9a9a9a,
 	color-nav-sidebar-border: #252525,
 	color-identifier-badge-hover-border: #b9b8b5,
+	color-backdrop: rgba(0, 0, 0, 0.6),
 );
 
 @media (prefers-color-scheme: dark) {

diff --git a/src/scss/themes/_light.scss b/src/scss/themes/_light.scss
@@ -79,10 +79,12 @@ $-colors: (
 	color-button-active-bg: #f0f0f0,
 	color-button-shadow: rgba(0, 0, 0, 0.2),
 	color-button-shadow-lighter: rgba(0, 0, 0, 0.06),
+	color-drag-preview-shadow: rgba(0, 0, 0, 0.2),
 	tag-color-border: rgba(0, 0, 0, 0.08),
 	color-text-disabled: #656565, // lighten($text-color, 33%);
 	color-nav-sidebar-border: #252525,
 	color-identifier-badge-hover-border: #b9b8b5,
+	color-backdrop: rgba(0, 0, 0, 0.4),
 );
 
 @media (prefers-color-scheme: light) {