Optimize UI box shadows

VedaWebProject · Feb 5, 2025 · 28b6728 · 28b6728
1 parent fbbb9cf
commit 28b6728
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 7 deletions.
diff --git a/Tekst-Web/public/base.css b/Tekst-Web/public/base.css
@@ -27,10 +27,8 @@
   --font-size-gigantic: 26px;
 
   --border-radius: 4px;
-  --block-box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.04), 0 3px 6px 0 rgba(0, 0, 0, 0.03),
-    0 5px 12px 4px rgba(0, 0, 0, 0.04);
-  --fixed-box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.14), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
-    0 5px 12px 4px rgba(0, 0, 0, 0.1);
+  --block-box-shadow: 0 3px 6px 4px rgba(0, 0, 0, 0.04);
+  --affix-box-shadow: 0 5px 12px 4px rgba(0, 0, 0, 0.15);
 }
 
 /* For screens with a width of 900px and above, use slightly larger font sizes. */

diff --git a/Tekst-Web/src/components/TasksWidget.vue b/Tekst-Web/src/components/TasksWidget.vue
@@ -119,7 +119,7 @@ function handleTaskClick(id: string) {
 #tasks-widget .task-list {
   min-width: 280px;
   max-width: 80vw;
-  box-shadow: var(--fixed-box-shadow);
+  box-shadow: var(--affix-box-shadow);
   background-color: var(--base-color);
   border: 2px solid var(--accent-color);
   border-radius: var(--border-radius);

diff --git a/Tekst-Web/src/components/browse/BrowseToolbar.vue b/Tekst-Web/src/components/browse/BrowseToolbar.vue
@@ -139,12 +139,11 @@ const buttonSize = computed(() => (state.smallScreen ? 'small' : 'large'));
   /* width: 100vw; */
   left: 0px;
   z-index: 1801;
-  box-shadow: var(--fixed-box-shadow);
+  box-shadow: var(--affix-box-shadow);
 }
 
 .browse-toolbar {
   padding: var(--gap-sm);
-  box-shadow: var(--fixed-box-shadow);
 }
 
 .browse-toolbar-middle {