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

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

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