💄 Add box-shadow to titlebar and bottomnav

src/assets/base.css

@@ -9,10 +9,12 @@
   --font-family: "sourcesanspro";
   --titlebar-color: #212121;
   --titlebar-element-active-color: #466439;
+  --titlebar-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
   --bottomnav-color: #555555;
   --bottomnav-icon-color: #c7c7c7;
   --bottomnav-icon-active-color: #456c47;
   --bottomnav-active-color: #7ca74b;
+  --bottomnav-shadow: 5px 7px 19px 0px rgba(0, 0, 0, 0.25);
   --loader-color: #7ca74b;
   --substitution-background-change: #14587e;
   --substitution-background-cancellation: #7d2b2d;

src/components/bottom-navbar.vue

@@ -44,6 +44,7 @@ import { RouterLink } from "vue-router";
   padding: 0px 20px;
   max-width: 800px;
   z-index: 100;
+  box-shadow: var(--bottomnav-shadow);
 }
 
 .entry {

src/components/titlebar-element.vue

@@ -38,6 +38,7 @@ function goBack() {
   flex-direction: row;
   align-items: center;
   z-index: 10;
+  box-shadow: var(--titlebar-shadow);
 }
 
 .title {