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

2
src/styles/theme/background.scss
View File

@ -8,7 +8,7 @@
// FIXME: move to pagination component
.pagination-link:not(.is-current) {
background: $light-background;
background: var(--grey-100);
}
.box,

2
src/styles/theme/content.scss
View File

@ -6,7 +6,7 @@
}
.table.has-actions {
border-top: 1px solid $grey-100;
border-top: 1px solid var(--grey-100);
border-radius: 4px;
overflow: hidden;

6
src/styles/theme/scrollbars.scss
View File

@ -1,7 +1,7 @@
$scrollbar-height: 8px;
$scrollbar-track-color: $grey-200;
$scrollbar-thumb-color: $grey-300;
$scrollbar-hover-color: $grey-500;
$scrollbar-track-color: var(--grey-200);
$scrollbar-thumb-color: var(--grey-300);
$scrollbar-hover-color: var(--grey-500);
// Chrome
::-webkit-scrollbar {

18
src/styles/theme/theme.scss
View File

@ -6,7 +6,7 @@
}
:focus {
box-shadow: 0 0 0 2px rgba($primary, 0.5);
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
}
:focus:not(:focus-visible) {
@ -15,11 +15,11 @@
:focus-visible,
:-moz-focusring {
box-shadow: 0 0 0 2px rgba($primary, 0.5);
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
}
body {
background: $light-background;
background: var(--site-background);
min-height: 100vh;
}
@ -45,7 +45,7 @@ h6 {
&::-moz-progress-bar,
&::-webkit-progress-value {
background: $grey-500;
background: var(--grey-500);
}
@media screen and (max-width: $tablet) {
@ -94,11 +94,11 @@ button.table {
}
.icon:not(.has-text-success) {
color: $grey-300 !important;
color: var(--grey-300) !important;
}
&.has-text-danger .icon {
color: $danger !important;
color: var(--danger) !important;
}
&.is-disabled {
@ -140,7 +140,7 @@ button.table {
}
.dropdown-menu .dropdown-content {
box-shadow: $shadow-md;
box-shadow: var(--shadow-md);
}
.is-strikethrough {
@ -156,6 +156,6 @@ button.table {
}
.box {
border: 1px solid $grey-200;
box-shadow: $shadow-sm;
border: 1px solid var(--grey-200);
box-shadow: var(--shadow-sm);
}