diff --git a/src/assets/base.css b/src/assets/base.css
index c797992b2ac10ceba1399cfc918fc09cf7276cf5..1caebaaad3c1da4c77057a6efaf660ce4569c1dd 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 f1af97064df68db067a693fa69f9427d4ede6f16..78974d49d17a8fe984d9746478ee8462aac507a7 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 eba6070a2ea3d6855e946fb354bbb97c962356bd..ed12d762a078325c086c276a087e9dfbe014bb13 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 7c148c9c854a71f733cb7906fa9126eda44bb5ea..50b1b76d9a82a8ef4c6e7c6e5a0e92633f930b1c 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 f8f9d6eaeef4a623423c62fe834fb220990781f1..451a29b3c1f517014bb77c37a476df62a72c83c1 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 a5a95f24109f68fb3f4c60b53ae6c9cb65df622d..0e76c9df5fc33f74678d4a5a713ab70183949272 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 {