1
0

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

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

View File

@ -40,8 +40,8 @@ export default {
<style lang="scss" scoped>
.is-done {
background: $green;
color: $white;
background: var(--success);
color: var(--white);
padding: .5rem;
font-weight: bold;
line-height: 1;

View File

@ -128,6 +128,6 @@ export default {
}
.url {
border-bottom: 1px dashed $primary;
border-bottom: 1px dashed var(--primary);
}
</style>

View File

@ -63,22 +63,22 @@ export default {
<style lang="scss" scoped>
.card {
background-color: $white;
background-color: var(--white);
border-radius: $radius;
margin-bottom: 1rem;
border: 1px solid $grey-200;
box-shadow: $shadow-sm;
border: 1px solid var(--card-border-color);
box-shadow: var(--shadow-sm);
}
.card-header {
box-shadow: none;
border-bottom: 1px solid $grey-200;
border-bottom: 1px solid var(--card-border-color);
border-radius: $radius $radius 0 0;
}
// FIXME: should maybe be merged somehow with modal
:deep(.modal-card-foot) {
background-color: $grey-50;
background-color: var(--grey-50);
border-top: 0;
}
</style>

View File

@ -22,7 +22,7 @@ export default {
.legal-links {
margin-top: 1rem;
text-align: right;
color: $grey-300;
color: var(--grey-300);
font-size: 1rem;
}
</style>

View File

@ -26,7 +26,7 @@ const motd = computed(() => store.state.config.motd)
<style lang="scss" scoped>
.no-auth-wrapper {
background: url('@/assets/llama.svg') no-repeat bottom left fixed $light-background;
background: url('@/assets/llama.svg') no-repeat bottom left fixed var(--site-background);
min-height: 100vh;
}
@ -38,6 +38,6 @@ const motd = computed(() => store.state.config.motd)
}
.logo {
max-width: 100%;
color: var(--logo-text-color);
}
</style>

View File

@ -98,7 +98,7 @@ export default {
left: 0;
bottom: 0;
right: 0;
background: $grey-100;
background: var(--grey-100);
z-index: 99;
}
@ -112,8 +112,8 @@ export default {
margin-right: 1rem;
&.is-loading::after {
border-left-color: $grey-400;
border-bottom-color: $grey-400;
border-left-color: var(--grey-400);
border-bottom-color: var(--grey-400);
}
}

View File

@ -35,8 +35,8 @@ export default {
kbd {
padding: .1rem .35rem;
border: 1px solid $grey-300;
background: $grey-100;
border: 1px solid var(--grey-300);
background: var(--grey-100);
border-radius: 3px;
font-size: .75rem;
}