fix: box-shadow

gkd-kit · Mar 22, 2024 · 1087a4b · 1087a4b
1 parent 5e84a3b
commit 1087a4b
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -38,8 +38,17 @@ import ErrorDlg from './components/ErrorDlg.vue';
 .box-shadow-dim,
 [box-shadow-dim] {
   box-shadow:
-    rgba(0, 0, 0, 0.2) 0px 11px 15px -7px,
-    rgba(0, 0, 0, 0.14) 0px 24px 38px 3px,
-    rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+@media (prefers-color-scheme: dark) {
+  .box-shadow-dim,
+  [box-shadow-dim] {
+    box-shadow:
+      0 3px 6px -4px rgba(0, 0, 0, 0.24),
+      0 6px 12px 0 rgba(0, 0, 0, 0.16),
+      0 9px 18px 8px rgba(0, 0, 0, 0.1);
+  }
 }
 </style>
diff --git a/src/components/DraggableCard.vue b/src/components/DraggableCard.vue
@@ -9,6 +9,7 @@ const props = withDefaults(
       top?: number;
       bottom?: number;
     };
+    disabled?: boolean;
   }>(),
   { initialValue: () => ({}) },
 );
@@ -114,7 +115,7 @@ const updateTarget = (arg: unknown) => {
 };
 </script>
 <template>
-  <Teleport to="#app">
+  <Teleport to="#app" :disabled="disabled">
     <div
       fixed
       ref="box"

diff --git a/src/components/MultiFocusCard.vue b/src/components/MultiFocusCard.vue
@@ -29,6 +29,7 @@ const left = _1vw * 25.5;
     :initialValue="{ top: 215, left }"
     v-slot="{ onRef }"
     class="z-2 box-shadow-dim w-420px"
+    :disabled="!focusNodes"
   >
     <NCard v-if="focusNodes" size="small" closable @close="onClose">
       <template #header>

diff --git a/src/views/SnapshotPage.vue b/src/views/SnapshotPage.vue
@@ -165,7 +165,6 @@ watch(
       @updateTrack="track = $event"
     />
     <MultiFocusCard
-      v-show="mulitFocus"
       :focusNode="focusNode"
       :focusNodes="mulitFocus"
       @updateFocusNode="