From 747c0a1bc8d6767f59d2426f248ffe5bcc3ec0e6 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 10 Mar 2024 23:36:37 -0300
Subject: [PATCH] style: add edge glow effect in some dialogs

---
 src/components/Dock/Dock.vue                       |  4 ++--
 src/components/Settings/Settings.vue               | 14 ++++++++++----
 .../Settings/components/ChildSettingsDialog.vue    |  7 +++++--
 src/styles/variables.scss                          |  6 ++++++
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index e0b18388..ce2f2b6c 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -312,7 +312,7 @@ function toggleDockHide(hide: boolean) {
     hover:bg-$bew-fill-3 dark-hover:bg-$bew-fill-3 hover:scale-110
     active:important-scale-100;
 
-  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--bew-shadow-edge-glow-1), 0 4px 12px rgba(0, 0, 0, 0.08);
 
   &.active {
     --at-apply: bg-$bew-theme-color-auto text-$bew-text-auto
@@ -326,6 +326,6 @@ function toggleDockHide(hide: boolean) {
 }
 
 .dark .dock-item {
-  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--bew-shadow-edge-glow-1), 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 </style>
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 45920b40..e706a537 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -124,8 +124,11 @@ function setCurrentTitle() {
         shrink-0 p="x-4" pos="absolute left--84px" z-2
       >
         <ul
-          style="backdrop-filter: var(--bew-filter-glass-2)"
-          flex="~ gap-2 col" rounded="30px hover:25px" bg="$bew-elevated-1 hover:$bew-elevated-2" p-2 shadow="$bew-shadow-3"
+          style="
+            --un-shadow: var(--bew-shadow-4), var(--bew-shadow-edge-glow-2);
+            backdrop-filter: var(--bew-filter-glass-2);
+          "
+          flex="~ gap-2 col" rounded="30px hover:25px" bg="$bew-elevated-1 hover:$bew-elevated-2" p-2 shadow
           scale="group-hover:105" duration-300 overflow-hidden antialiased
           border="1 $bew-border-color"
         >
@@ -158,9 +161,12 @@ function setCurrentTitle() {
 
       <div
         class="settings-content"
-        style="backdrop-filter: var(--bew-filter-glass-2);"
+        style="
+          --un-shadow: var(--bew-shadow-4), var(--bew-shadow-edge-glow-2);
+          backdrop-filter: var(--bew-filter-glass-2);
+        "
         relative overflow="x-hidde" w-full h-full bg="$bew-elevated-1"
-        shadow="$bew-shadow-4" rounded="$bew-radius"
+        shadow rounded="$bew-radius"
       >
         <OverlayScrollbarsComponent ref="scrollbarRef" element="div" h-inherit defer>
           <header
diff --git a/src/components/Settings/components/ChildSettingsDialog.vue b/src/components/Settings/components/ChildSettingsDialog.vue
index 16f7a958..c2ea6d19 100644
--- a/src/components/Settings/components/ChildSettingsDialog.vue
+++ b/src/components/Settings/components/ChildSettingsDialog.vue
@@ -20,9 +20,12 @@ function handleClose() {
       @click="handleClose"
     />
     <div
-      style="backdrop-filter: var(--bew-filter-glass-2)"
+      style="
+        --un-shadow: var(--bew-shadow-3) var(--bew-shadow-edge-glow-2);
+        backdrop-filter: var(--bew-filter-glass-2);
+      "
       pos="fixed top-1/2 left-1/2" bg="$bew-elevated-1" rounded="$bew-radius"
-      transform="translate--1/2" z-2 shadow="$bew-shadow-3" overflow="x-hidden y-overlay" w="$b-dialog-width"
+      transform="translate--1/2" z-2 shadow overflow="x-hidden y-overlay" w="$b-dialog-width"
       h="$b-dialog-height" antialiased
     >
       <header
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3d498558..962d8a55 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -20,6 +20,9 @@
     0 8px 10px -6px rgb(0 0 0 / 0.12);
   --bew-shadow-4: 0 34px 50px -20px rgb(0 0 0 / 0.16),
     0 32px 45px -12px rgb(0 0 0 / 0.14), 0 30px 40px -8px rgb(0 0 0 / 0.12);
+
+  --bew-shadow-edge-glow-1: inset 0 0 4px rgba(0, 0, 0, 0.04);
+  --bew-shadow-edge-glow-2: inset 0 0 8px rgba(0, 0, 0, 0.06);
   // #endregion
 
   --bew-logo-color: var(--bew-theme-color);
@@ -161,6 +164,9 @@
     0 8px 10px -6px rgb(0 0 0 / 0.16);
   --bew-shadow-4: 0 34px 50px -20px rgb(0 0 0 / 0.44),
     0 32px 45px -12px rgb(0 0 0 / 0.3), 0 30px 40px -8px rgb(0 0 0 / 0.18);
+
+  --bew-shadow-edge-glow-1: inset 0 0 4px rgba(255, 255, 255, 0.06);
+  --bew-shadow-edge-glow-2: inset 0 0 8px rgba(255, 255, 255, 0.1);
   // #endregion
 
   --bew-logo-color: var(--bew-text-1);