From 4af18e76f63fd15fa21932ee1dfe7d695d0bfa5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20G=C3=B6bel?= <dgoebel@techfak.uni-bielefeld.de>
Date: Wed, 10 Jul 2024 09:38:23 +0000
Subject: [PATCH] Improve shadows in dark mode
#139
---
src/assets/base.css | 78 ++++++++++---------
src/assets/main.css | 4 +-
src/components/AppHeader.vue | 14 +++-
src/components/resources/ResourceCard.vue | 2 +-
src/components/workflows/WorkflowCard.vue | 2 +-
.../workflows/WorkflowWithVersionsCard.vue | 2 +-
6 files changed, 59 insertions(+), 43 deletions(-)
diff --git a/src/assets/base.css b/src/assets/base.css
index c797992..1caebaa 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,58 +1,66 @@
/* 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
diff --git a/src/assets/main.css b/src/assets/main.css
index f1af970..78974d4 100644
--- a/src/assets/main.css
+++ b/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;
}
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index eba6070..ed12d76 100644
--- a/src/components/AppHeader.vue
+++ b/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>
diff --git a/src/components/resources/ResourceCard.vue b/src/components/resources/ResourceCard.vue
index 7c148c9..50b1b76 100644
--- a/src/components/resources/ResourceCard.vue
+++ b/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) {
diff --git a/src/components/workflows/WorkflowCard.vue b/src/components/workflows/WorkflowCard.vue
index f8f9d6e..451a29b 100644
--- a/src/components/workflows/WorkflowCard.vue
+++ b/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 {
diff --git a/src/components/workflows/WorkflowWithVersionsCard.vue b/src/components/workflows/WorkflowWithVersionsCard.vue
index a5a95f2..0e76c9d 100644
--- a/src/components/workflows/WorkflowWithVersionsCard.vue
+++ b/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 {
--
GitLab