ami/tl-vikunja
1
0
Fork 0
Code Activity

Migrate to bulma-css-variables and introduce dark mode (#954)

Browse Source 
Co-authored-by: Adrian Simmons <adrian@perlucida.co.uk>
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/954
Reviewed-by: dpschen <dpschen@noreply.kolaente.de>
Reviewed-by: konrad <k@knt.li>
Co-authored-by: adrinux <adrian@perlucida.co.uk>
Co-committed-by: adrinux <adrian@perlucida.co.uk>
This commit is contained in:
adrinux
2021-11-22 21:12:54 +00:00
committed by konrad
parent 4ef54f1bc2
commit 46fa43d67f
73 changed files with 605 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/views/tasks/TaskDetailView.vue
View File

@ -706,18 +706,18 @@ $flash-background-duration: 750ms;
// This is a workaround to hide the llama background from the top on the task detail page
margin-top: -1.5rem;
padding: 1rem;
background-color: $light-background;
background-color: var(--site-background);
@media screen and (max-width: $desktop) {
padding-bottom: 0;
}
.subtitle {
color: $grey-500;
color: var(--grey-500);
margin-bottom: 1rem;
a {
color: $grey-800;
color: var(--grey-800);
}
}
@ -726,7 +726,7 @@ $flash-background-duration: 750ms;
}
.icon.is-grey {
color: $grey-400;
color: var(--grey-400);
}
:deep(.heading) {
@ -754,7 +754,7 @@ $flash-background-duration: 750ms;
}
.title.task-id {
color: $grey-400;
color: var(--grey-400);
white-space: nowrap;
}
@ -765,7 +765,7 @@ $flash-background-duration: 750ms;
align-items: center;
a.remove {
color: $red;
color: var(--danger);
vertical-align: middle;
padding-left: .5rem;
line-height: 1;
@ -776,7 +776,7 @@ $flash-background-duration: 750ms;
width: 100%;
a.show {
color: $text;
color: var(--text);
padding: .25rem .5rem;
transition: background-color $transition;
border-radius: $radius;
@ -784,7 +784,7 @@ $flash-background-duration: 750ms;
margin: .1rem 0;
&:hover {
background: $white;
background: var(--white);
}
}
@ -800,7 +800,7 @@ $flash-background-duration: 750ms;
.detail-title {
display: block;
color: $grey-400;
color: var(--grey-400);
}
.none {
@ -837,21 +837,24 @@ $flash-background-duration: 750ms;
transition: all $transition-duration;
&::placeholder {
color: $text-light;
color: var(--text-light);
opacity: 1;
font-style: italic;
}
&:not(:disabled) {
&:hover, &:active {
background: $input-background-color;
border-color: $input-border-color;
&:hover,
&:active,
&:focus {
background: var(--scheme-main);
border-color: var(--border);
cursor: text;
}
&:focus {
background: $input-background-color;
border-color: $input-focus-border-color;
&:hover,
&:active {
cursor: text;
border-color: var(--link)
}
}
}
@ -883,18 +886,18 @@ $flash-background-duration: 750ms;
.created {
font-size: .75rem;
color: $grey-500;
color: var(--grey-500);
text-align: right;
}
.checklist-summary {
margin-left: .25rem;
}
}
}
.task-view-container {
padding-bottom: 1rem;
@media screen and (max-width: $desktop) {
padding-bottom: 0;
}
@ -917,6 +920,11 @@ $flash-background-duration: 750ms;
}
}
.task-view-container {
// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
}
.flash-background-enter-from,
.flash-background-enter-active {
animation: flash-background $flash-background-duration ease 1;
@ -924,7 +932,7 @@ $flash-background-duration: 750ms;
@keyframes flash-background {
0% {
background: lighten($primary, 30);
background: var(--primary-light);
}
100% {
background: transparent;

12
src/views/tasks/TaskDetailViewModal.vue
View File

@ -2,6 +2,7 @@
<modal
@close="close()"
variant="scrolling"
class="task-detail-view-modal"
>
<a @click="close()" class="close">
<icon icon="times"/>
@ -53,11 +54,18 @@ export default {
position: fixed;
top: 5px;
right: 26px;
color: $white;
color: var(--white);
font-size: 2rem;
@media screen and (max-width: $desktop) {
color: $dark;
color: var(--dark);
}
}
</style>
<style lang="scss">
// Close icon SVG uses currentColor, change the color to keep it visible
.dark .task-detail-view-modal .close {
color: var(--grey-900);
}
</style>