Skip to content
Snippets Groups Projects
Commit 0ba2bda2 authored by Daniel Göbel's avatar Daniel Göbel
Browse files

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

Resolve "Improve dark mode shadows"

Closes #139

See merge request !137
parents 99353d95 4af18e76
No related branches found
No related tags found
1 merge request!137Resolve "Improve dark mode shadows"
Hide whitespace changes
Inline Side-by-side
src/assets/base.css
+ 43
− 35
View file @ 0ba2bda2
/* 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
+ 3
− 1
View file @ 0ba2bda2
......@@ -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
+ 10
− 4
View file @ 0ba2bda2
......@@ -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
+ 1
− 1
View file @ 0ba2bda2
......@@ -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
+ 1
− 1
View file @ 0ba2bda2
......@@ -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
+ 1
− 1
View file @ 0ba2bda2
......@@ -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 {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment