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

14
src/views/list/ShowList.vue
View File

@ -166,11 +166,11 @@ export default {
}
.switch-view {
background: $white;
background: var(--white);
display: inline-flex;
border-radius: $radius;
font-size: .75rem;
box-shadow: $shadow-sm;
box-shadow: var(--shadow-sm);
height: $switch-view-height;
margin-bottom: 1rem;
padding: .5rem;
@ -187,18 +187,18 @@ export default {
}
&.is-active,
&:hover {
color: $white;
&:hover {
color: var(--switch-view-color);
}
&.is-active {
background: $primary;
background: var(--primary);
font-weight: bold;
box-shadow: $shadow-xs;
box-shadow: var(--shadow-xs);
}
&:hover {
background: $primary;
background: var(--primary);
}
}
}

4
src/views/list/settings/background.vue
View File

@ -167,7 +167,7 @@ export default {
font-size: .8rem;
a {
color: $grey-800;
color: var(--grey-800);
}
}
@ -224,7 +224,7 @@ export default {
background: rgba(0, 0, 0, 0.5);
font-size: .75rem;
font-weight: bold;
color: $white;
color: var(--white);
transition: opacity $transition;
}

11
src/views/list/views/Kanban.vue
View File

@ -581,7 +581,6 @@ export default {
</script>
<style lang="scss">
$bucket-background: $grey-100;
$ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
$bucket-width: 300px;
$bucket-header-height: 60px;
@ -615,7 +614,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
.ghost {
background: transparent !important;
border: 3px dashed $grey-300 !important;
border: 3px dashed var(--grey-300) !important;
box-shadow: none !important;
* {
@ -624,7 +623,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
}
.bucket {
background-color: $bucket-background;
background-color: var(--grey-100);
border-radius: $radius;
position: relative;
@ -672,7 +671,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
padding-right: 1rem;
.button {
background: $bucket-background;
background: var(--grey-100);
width: 100%;
}
}
@ -706,7 +705,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
font-weight: bold;
&.is-max {
color: $red;
color: var(--danger);
}
}
@ -730,7 +729,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
background-color: transparent;
&:hover {
background-color: $white;
background-color: var(--white);
}
}
}

4
src/views/list/views/List.vue
View File

@ -327,8 +327,8 @@ export default {
.ghost {
border-radius: $radius;
background: $grey-100;
border: 2px dashed $grey-300;
background: var(--grey-100);
border: 2px dashed var(--grey-300);
* {
opacity: 0;