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>