Merge branch 'feature/139-improve-dark-mode-shadows' into 'main'

Resolve "Improve dark mode shadows"

Closes #139

See merge request !137

src/assets/base.css

 /* color palette from <https://github.com/vuejs/theme> */
 :root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
+    --vt-c-white: #ffffff;
+    --vt-c-white-soft: #f8f8f8;
+    --vt-c-white-mute: #f2f2f2;
 
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
+    --vt-c-black: #181818;
+    --vt-c-black-soft: #222222;
+    --vt-c-black-mute: #282828;
 
-  --vt-c-indigo: #2c3e50;
+    --vt-c-indigo: #2c3e50;
 
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+    --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+    --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+    --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+    --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
 
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+    --vt-c-text-light-1: var(--vt-c-indigo);
+    --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+    --vt-c-text-dark-1: var(--vt-c-white);
+    --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
 }
 
 /* semantic color variables for this project */
 :root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
+    --color-background: var(--vt-c-white);
+    --color-background-soft: var(--vt-c-white-soft);
+    --color-background-mute: var(--vt-c-white-mute);
 
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
+    --color-border: var(--vt-c-divider-light-2);
+    --color-border-hover: var(--vt-c-divider-light-1);
 
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
+    --color-heading: var(--vt-c-text-light-1);
+    --color-text: var(--vt-c-text-light-1);
 
-  --section-gap: 160px;
+    --section-gap: 160px;
 }
 
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  font-weight: normal;
+    box-sizing: border-box;
+    margin: 0;
+    position: relative;
+    font-weight: normal;
 }
 
 body {
-  min-height: 100vh;
-  transition: color 0.5s, background-color 0.5s;
-  line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    min-height: 100vh;
+    transition: color 0.5s, background-color 0.5s;
+    line-height: 1.6;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
     Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    font-size: 15px;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
+
+
+[data-bs-theme="dark"] {
+    --bs-box-shadow: 0 .5rem 1rem rgba(150, 150, 150, .55);
+    --bs-box-shadow-sm: 0 .125rem .25rem rgba(150, 150, 150, .475);
+    --bs-box-shadow-lg: 0 1rem 3rem rgba(150, 150, 150, .575);
+    --bs-box-shadow-inset: inset 0 1px 2px rgba(150, 150, 150, .475);
+}
\ No newline at end of file

src/assets/main.css

@@ -24,8 +24,9 @@ pre {
 .hover-shadow {
     transition: transform 0.2s ease-out;
 }
+
 .hover-shadow:hover {
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+    box-shadow: var(--bs-box-shadow) !important;
     transform: translateY(-2px);
     backdrop-filter: brightness(0.95);
 }
@@ -33,6 +34,7 @@ pre {
 .hover-info:hover {
     color: var(--bs-info) !important;
 }
+
 .hover-danger:hover {
     color: var(--bs-danger) !important;
 }

src/components/AppHeader.vue

@@ -73,7 +73,7 @@ watch(
             <a
               class="nav-link dropdown-toggle"
               id=""
-              :class="{ 'text-black': objectStorageActive }"
+              :class="{ 'text-light': objectStorageActive }"
               href="#"
               role="button"
               data-bs-toggle="dropdown"
@@ -108,7 +108,7 @@ watch(
           <li class="nav-item dropdown">
             <a
               class="nav-link dropdown-toggle"
-              :class="{ 'text-black': workflowActive }"
+              :class="{ 'text-light': workflowActive }"
               id="workflowDropdown"
               href="#"
               role="button"
@@ -162,7 +162,7 @@ watch(
           <li class="nav-item dropdown">
             <a
               class="nav-link dropdown-toggle"
-              :class="{ 'text-black': resourceActive }"
+              :class="{ 'text-light': resourceActive }"
               id="resourceDropdown"
               href="#"
               role="button"
@@ -211,7 +211,7 @@ watch(
           <li v-if="userRepository.admin">
             <a
               class="nav-link dropdown-toggle"
-              :class="{ 'text-black': adminActive }"
+              :class="{ 'text-light': adminActive }"
               id="adminDropdown"
               href="#"
               role="button"
@@ -370,4 +370,10 @@ watch(
 header {
   background: rgb(255, 177, 45);
 }
+
+ul {
+  --bs-navbar-color: rgba(255, 255, 255, 0.65) !important;
+  --bs-navbar-hover-color: rgba(255, 255, 255, 0.8) !important;
+  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.3) !important;
+}
 </style>

src/components/resources/ResourceCard.vue

@@ -411,7 +411,7 @@ onMounted(() => {
 
 .card-hover:hover {
   transform: translate(0, -5px);
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+  box-shadow: var(--bs-box-shadow) !important;
 }
 
 .accordion-body > div:not(:last-child) {

src/components/workflows/WorkflowCard.vue

@@ -109,7 +109,7 @@ onMounted(() => {
 
 .card-hover:hover {
   transform: translate(0, -5px);
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+  box-shadow: var(--bs-box-shadow) !important;
 }
 
 .icon {

src/components/workflows/WorkflowWithVersionsCard.vue

@@ -401,7 +401,7 @@ onMounted(() => {
 }
 
 .card-hover:hover {
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+  box-shadow: var(--bs-box-shadow) !important;
 }
 
 td > img {