ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Enhance dark mode (fix #5034)

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2023-08-22 09:54:30 +02:00
parent 27a1e7eb83
commit 08bc7b163b
2 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/cards/CardItem.vue
View File

@@ -200,27 +200,28 @@ export default {
@import './../../css/animations';
@import './../../css/variables';
@mixin dark-card {
border: 2px solid var(--color-border-dark);
box-shadow: none;
}
.card {
transition: box-shadow 0.1s ease-in-out;
box-shadow: 0 0 2px 0 var(--color-box-shadow);
transition: border 0.1s ease-in-out;
border-radius: var(--border-radius-large);
font-size: 100%;
background-color: var(--color-main-background);
margin-bottom: $card-spacing;
border: 2px solid var(--color-border);
&:deep(*) {
cursor: pointer;
}
body.dark &, body.theme--dark & {
border: 2px solid var(--color-border);
}
&:hover {
box-shadow: 0 0 5px 0 var(--color-box-shadow);
border: 2px solid var(--color-border-dark);
}
&.current-card {
box-shadow: 0 0 5px 1px var(--color-box-shadow);
border: 2px solid var(--color-primary-element);
}
.card-upper {
@@ -326,4 +327,11 @@ export default {
color: transparent;
}
}
@media (prefers-color-scheme: dark) {
.card {
@include dark-card;
}
}
</style>

12
src/components/cards/badges/DueDate.vue
View File

@@ -75,12 +75,10 @@ export default {
border-radius: 3px;
margin-top: 9px;
margin-bottom: 9px;
padding: 3px 4px;
padding-right: 0;
padding: 3px 0 3px 4px;
font-size: 90%;
display: flex;
align-items: center;
opacity: .5;
flex-shrink: 1;
z-index: 2;
@@ -89,19 +87,15 @@ export default {
}
&.overdue {
background-color: var(--color-error);
color: var(--color-primary-element-text);
opacity: .7;
color: var(--color-error-text);
padding: 3px 4px;
}
&.now {
background-color: var(--color-warning);
opacity: .7;
color: var(--color-warning-text);
padding: 3px 4px;
}
&.next {
background-color: var(--color-background-dark);
opacity: .7;
padding: 3px 4px;
}