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

8
src/components/input/button.vue
View File

@ -82,11 +82,11 @@ export default {
font-size: 0.85rem;
font-weight: bold;
height: $button-height;
box-shadow: $shadow-sm;
box-shadow: var(--shadow-sm);
&.is-hovered,
&:hover {
box-shadow: $shadow-md;
box-shadow: var(--shadow-md);
}
&.fullheight {
@ -99,11 +99,11 @@ export default {
&:active,
&:focus,
&:focus:not(:active) {
box-shadow: $shadow-xs !important;
box-shadow: var(--shadow-xs) !important;
}
&.is-primary.is-outlined:hover {
color: $white;
color: var(--white);
}
&.is-small {

2
src/components/input/colorPicker.vue
View File

@ -134,7 +134,7 @@ export default {
height: $PICKER_SIZE;
overflow: hidden;
border-radius: 100%;
border: $BORDER_WIDTH solid $grey-300;
border: $BORDER_WIDTH solid var(--grey-300);
box-shadow: $shadow;
& > * {

8
src/components/input/datepicker.vue
View File

@ -258,7 +258,7 @@ export default {
position: absolute;
z-index: 99;
width: 320px;
background: $white;
background: var(--white);
border-radius: $radius;
box-shadow: $shadow;
@ -272,7 +272,7 @@ export default {
padding: 0 .5rem;
width: 100%;
height: 2.25rem;
color: $text;
color: var(--text);
transition: all $transition;
&:first-child {
@ -280,7 +280,7 @@ export default {
}
&:hover {
background: $light;
background: var(--light);
}
.text {
@ -291,7 +291,7 @@ export default {
padding-right: .25rem;
.weekday {
color: $text-light;
color: var(--text-light);
text-transform: capitalize;
}
}

9
src/components/input/editor.vue
View File

@ -338,13 +338,14 @@ $editor-border-color: #ddd;
.CodeMirror {
padding: .5rem;
border: 1px solid $editor-border-color;
background: var(--white);
&-lines pre {
margin: 0 !important;
}
&-placeholder {
color: $grey-400 !important;
color: var(--grey-400) !important;
font-style: italic;
}
}
@ -383,7 +384,7 @@ $editor-border-color: #ddd;
pre.CodeMirror-line {
margin-bottom: 0 !important;
color: $grey-700 !important;
color: var(--grey-700) !important;
}
.cm-header {
@ -409,10 +410,10 @@ ul.actions {
}
&, a {
color: $grey-500;
color: var(--grey-500);
&.done-edit {
color: $primary;
color: var(--primary);
}
}

4
src/components/input/fancycheckbox.vue
View File

@ -106,7 +106,7 @@ svg {
}
.check:hover svg {
stroke: $primary;
stroke: var(--primary);
}
.is-disabled .check:hover svg {
@ -125,7 +125,7 @@ polyline {
input[type=checkbox]:checked + .check {
svg {
stroke: $primary;
stroke: var(--primary);
}
path {

26
src/components/input/multiselect.vue
View File

@ -380,23 +380,23 @@ export default {
&.has-search-results .input-wrapper {
border-radius: $radius $radius 0 0;
border-color: $primary !important;
background: $white !important;
border-color: var(--primary) !important;
background: var(--white) !important;
&, &:focus-within {
border-bottom-color: $grey-200 !important;
border-bottom-color: var(--grey-200) !important;
}
}
.input-wrapper {
padding: 0;
background: $white !important;
border-color: $grey-200 !important;
background: var(--white) !important;
border-color: var(--grey-200) !important;
flex-wrap: wrap;
height: auto;
&:hover {
border-color: $grey-300 !important;
border-color: var(--grey-300) !important;
}
.input {
@ -422,8 +422,8 @@ export default {
}
&:focus-within {
border-color: $primary !important;
background: $white !important;
border-color: var(--primary) !important;
background: var(--white) !important;
}
.loader {
@ -432,9 +432,9 @@ export default {
}
.search-results {
background: $white;
background: var(--white);
border-radius: 0 0 $radius $radius;
border: 1px solid $primary;
border: 1px solid var(--primary);
border-top: none;
max-height: 50vh;
@ -481,16 +481,16 @@ export default {
}
&:focus, &:hover {
background: $grey-100;
background: var(--grey-100);
box-shadow: none !important;
.hint-text {
color: $text;
color: var(--text);
}
}
&:active {
background: $grey-200;
background: var(--grey-200);
}
}
}