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

10
src/components/home/Logo.vue
View File

@ -7,5 +7,11 @@ const Logo = computed(() => new Date().getMonth() === 5 ? LogoFullPride : LogoFu
</script>
<template>
<Logo alt="Vikunja" />
</template>
<Logo alt="Vikunja" class="logo" />
</template>
<style lang="scss" scoped>
.logo {
color: var(--logo-text-color);
}
</style>

4
src/components/home/MenuButton.vue
View File

@ -43,7 +43,7 @@ $size: $lineWidth + 1rem;
width: $lineWidth;
left: 50%;
transform: $transformX;
background-color: $grey-400;
background-color: var(--grey-400);
border-radius: 2px;
transition: all $transition;
}
@ -62,7 +62,7 @@ $size: $lineWidth + 1rem;
&:focus {
&::before,
&::after {
background-color: $grey-600;
background-color: var(--grey-600);
}
&::before {

2
src/components/home/PoweredByLink.vue
View File

@ -10,7 +10,7 @@ import {POWERED_BY as poweredByUrl} from '@/urls'
<style lang="scss">
.menu-bottom-link {
color: $grey-300;
color: var(--grey-300);
text-align: center;
display: block;
padding-top: 1rem;

8
src/components/home/contentAuth.vue
View File

@ -144,7 +144,7 @@ export default {
justify-content: center;
align-items: center;
font-size: 2rem;
color: $grey-400;
color: var(--grey-400);
line-height: 1;
transition: all $transition;
@ -155,7 +155,7 @@ export default {
&:hover,
&:focus {
height: 1rem;
color: $grey-600;
color: var(--grey-600);
}
}
@ -191,7 +191,7 @@ export default {
}
.card {
background: $white;
background: var(--white);
}
}
}
@ -220,7 +220,7 @@ export default {
right: 1rem;
z-index: 4500; // The modal has a z-index of 4000
color: $grey-500;
color: var(--grey-500);
transition: color $transition;
@media screen and (max-width: $tablet) {

4
src/components/home/contentLinkShare.vue
View File

@ -57,11 +57,11 @@ export default {
}
.title {
text-shadow: 0 0 1rem $white;
text-shadow: 0 0 1rem var(--white);
}
// FIXME: this should be defined somewhere deep
.link-share-view .card {
background-color: $white;
background-color: var(--white);
}
</style>

22
src/components/home/navigation.vue
View File

@ -280,8 +280,8 @@ export default {
<style lang="scss" scoped>
$navbar-padding: 2rem;
$vikunja-nav-background: $light-background;
$vikunja-nav-color: $grey-700;
$vikunja-nav-background: var(--site-background);
$vikunja-nav-color: var(--grey-700);
$vikunja-nav-selected-width: 0.4rem;
.namespace-container {
@ -349,12 +349,12 @@ $vikunja-nav-selected-width: 0.4rem;
opacity: 0;
&:hover {
color: $orange;
color: var(--warning);
}
&.is-favorite {
opacity: 1;
color: $orange;
color: var(--warning);
}
}
@ -436,7 +436,7 @@ $vikunja-nav-selected-width: 0.4rem;
align-items: center;
&:hover {
background: $white;
background: var(--white);
}
:deep(.dropdown-trigger) {
@ -456,7 +456,7 @@ $vikunja-nav-selected-width: 0.4rem;
}
.ghost {
background: $grey-200;
background: var(--grey-200);
* {
opacity: 0;
@ -496,16 +496,16 @@ $vikunja-nav-selected-width: 0.4rem;
}
&.router-link-exact-active {
color: $primary;
border-left: $vikunja-nav-selected-width solid $primary;
color: var(--primary);
border-left: $vikunja-nav-selected-width solid var(--primary);
.icon {
color: $primary;
color: var(--primary);
}
}
&:hover {
border-left: $vikunja-nav-selected-width solid $primary;
border-left: $vikunja-nav-selected-width solid var(--primary);
}
}
}
@ -526,7 +526,7 @@ $vikunja-nav-selected-width: 0.4rem;
}
.icon {
color: $grey-400 !important;
color: var(--grey-400) !important;
}
}

15
src/components/home/topNavigation.vue
View File

@ -5,7 +5,7 @@
class="navbar main-theme is-fixed-top"
role="navigation"
>
<router-link :to="{name: 'home'}" class="navbar-item logo">
<router-link :to="{name: 'home'}" class="logo-link">
<Logo width="164" height="48"/>
</router-link>
<MenuButton class="menu-button"/>
@ -137,13 +137,18 @@ export default {
<style lang="scss" scoped>
$vikunja-nav-logo-full-width: 164px;
$user-dropdown-width-mobile: 5rem;
$hamburger-menu-icon-spacing: 1rem;
$hamburger-menu-icon-width: 28px;
.navbar {
z-index: 4 !important;
}
.logo {
.logo-link {
display: none;
padding: 0.5rem 0.75rem;
@media screen and (min-width: $tablet) {
align-self: stretch;
@ -164,7 +169,7 @@ $vikunja-nav-logo-full-width: 164px;
}
.navbar.main-theme {
background: $light-background;
background: var(--site-background);
z-index: 5 !important;
justify-content: space-between;
align-items: center;
@ -219,7 +224,7 @@ $vikunja-nav-logo-full-width: 164px;
:deep() {
.trigger-button {
cursor: pointer;
color: $grey-400;
color: var(--grey-400);
padding: .5rem;
font-size: 1.25rem;
position: relative;
@ -278,7 +283,7 @@ $vikunja-nav-logo-full-width: 164px;
}
:deep(.dropdown-trigger) {
color: $grey-400;
color: var(--grey-400);
margin-left: 1rem;
height: 1rem;
width: 1rem;

2
src/components/home/update.vue
View File

@ -57,7 +57,7 @@ export default {
padding: 0 0 0 .5rem;
border-radius: $radius;
font-size: .9rem;
color: $grey-900;
color: var(--grey-900);
justify-content: space-between;
@media screen and (max-width: $desktop) {

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);
}
}
}

20
src/components/list/partials/list-card.vue
View File

@ -86,11 +86,11 @@ export default {
cursor: pointer;
width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
height: $list-height;
background: $white;
background: var(--white);
margin: 0 $list-spacing $list-spacing 0;
padding: 1rem;
border-radius: $radius;
box-shadow: $shadow-sm;
box-shadow: var(--shadow-sm);
transition: box-shadow $transition;
display: flex;
@ -98,13 +98,13 @@ export default {
flex-wrap: wrap;
&:hover {
box-shadow: $shadow-md;
box-shadow: var(--shadow-md);
}
&:active,
&:focus,
&:focus:not(:active) {
box-shadow: $shadow-xs !important;
box-shadow: var(--shadow-xs) !important;
}
@media screen and (min-width: $widescreen) {
@ -158,7 +158,7 @@ export default {
font-family: $vikunja-font;
font-weight: 400;
font-size: 1.5rem;
color: $text;
color: var(--text);
width: 100%;
margin-bottom: 0;
max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
@ -171,7 +171,7 @@ export default {
}
&.has-light-text .title {
color: $light;
color: var(--light);
}
&.has-background {
@ -180,8 +180,8 @@ export default {
background-position: center;
.title {
text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
color: $white;
text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
color: var(--white);
}
}
@ -190,7 +190,7 @@ export default {
opacity: 0;
&:hover {
color: $orange;
color: var(--warning);
}
&.is-archived {
@ -200,7 +200,7 @@ export default {
&.is-favorite {
display: inline-block;
opacity: 1;
color: $orange;
color: var(--warning);
}
}

4
src/components/misc/Done.vue
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;

2
src/components/misc/api-config.vue
View File

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

10
src/components/misc/card.vue
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>

2
src/components/misc/legal.vue
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>

4
src/components/misc/no-auth-wrapper.vue
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>

6
src/components/misc/ready.vue
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);
}
}

4
src/components/misc/shortcut.vue
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;
}

18
src/components/notifications/notifications.vue
View File

@ -145,9 +145,9 @@ export default {
width: .75rem;
height: .75rem;
background: $primary;
background: var(--primary);
border-radius: 100%;
border: 2px solid $white;
border: 2px solid var(--white);
}
.notifications-list {
@ -157,12 +157,12 @@ export default {
max-height: 400px;
overflow-y: auto;
background: $white;
background: var(--white);
width: 350px;
max-width: calc(100vw - 2rem);
padding: .75rem .25rem;
border-radius: $radius;
box-shadow: $shadow-sm;
box-shadow: var(--shadow-sm);
font-size: .85rem;
@media screen and (max-width: $tablet) {
@ -183,14 +183,14 @@ export default {
transition: background-color $transition;
&:hover {
background: $grey-100;
background: var(--grey-100);
border-radius: $radius;
}
.read-indicator {
width: .35rem;
height: .35rem;
background: $primary;
background: var(--primary);
border-radius: 100%;
margin-left: .5rem;
@ -219,7 +219,7 @@ export default {
}
.created {
color: $grey-400;
color: var(--grey-400);
}
&:last-child {
@ -227,14 +227,14 @@ export default {
}
a {
color: $grey-800;
color: var(--grey-800);
}
}
.nothing {
text-align: center;
padding: 1rem 0;
color: $grey-500;
color: var(--grey-500);
.explainer {
font-size: .75rem;

9
src/components/quick-actions/quick-actions.vue
View File

@ -513,11 +513,11 @@ export default {
.results {
text-align: left;
width: 100%;
color: $grey-800;
color: var(--grey-800);
.result {
&-title {
background: $grey-50;
background: var(--grey-50);
padding: .5rem;
display: block;
font-size: .75rem;
@ -528,6 +528,7 @@ export default {
font-size: .9rem;
width: 100%;
background: transparent;
color: var(--grey-800);
text-align: left;
box-shadow: none;
border-radius: 0;
@ -539,12 +540,12 @@ export default {
cursor: pointer;
&:focus, &:hover {
background: $grey-50;
background: var(--grey-50);
box-shadow: none !important;
}
&:active {
background: $grey-100;
background: var(--grey-100);
}
}
}

2
src/components/tasks/edit-task.vue
View File

@ -167,7 +167,7 @@ ul.assingees {
a {
float: right;
color: $red;
color: var(--danger);
transition: all $transition;
}
}

30
src/components/tasks/gantt-component.vue
View File

@ -445,12 +445,12 @@ export default {
</script>
<style lang="scss" scoped>
$gantt-border: 1px solid $grey-200;
$gantt-vertical-border-color: $grey-100;
$gantt-border: 1px solid var(--grey-200);
$gantt-vertical-border-color: var(--grey-100);
.gantt-chart {
overflow-x: auto;
border-top: 1px solid $grey-200;
border-top: 1px solid var(--grey-200);
.dates {
display: flex;
@ -477,8 +477,8 @@ $gantt-vertical-border-color: $grey-100;
font-weight: normal;
&.today {
background: $primary;
color: $white;
background: var(--primary);
color: var(--white);
border-radius: 5px 5px 0 0;
font-weight: bold;
}
@ -507,7 +507,7 @@ $gantt-vertical-border-color: $grey-100;
.task {
display: inline-block;
border: 2px solid $primary;
border: 2px solid var(--primary);
font-size: 0.85rem;
margin: 0.5rem;
border-radius: 6px;
@ -520,30 +520,30 @@ $gantt-vertical-border-color: $grey-100;
user-select: none; // Non-prefixed version
&.is-current-edit {
border-color: $orange !important;
border-color: var(--warning) !important;
}
&.has-light-text {
color: $light;
color: var(--light);
&.done span:after {
border-top: 1px solid $light;
border-top: 1px solid var(--light);
}
.edit-toggle {
color: $light;
color: var(--light);
}
}
&.has-dark-text {
color: $text;
color: var(--text);
&.done span:after {
border-top: 1px solid $dark;
border-top: 1px solid var(--dark);
}
.edit-toggle {
color: $text;
color: var(--text);
}
}
@ -596,8 +596,8 @@ $gantt-vertical-border-color: $grey-100;
}
&.nodate {
border: 2px dashed $grey-300;
background: $grey-100;
border: 2px dashed var(--grey-300);
background: var(--grey-100);
}
&:active {

14
src/components/tasks/partials/attachments.vue
View File

@ -267,17 +267,17 @@ export default {
padding: .5rem;
&:hover {
background-color: $grey-200;
background-color: var(--grey-200);
}
.filename {
font-weight: bold;
margin-bottom: .25rem;
color: $text;
color: var(--text);
}
.info {
color: $grey-500;
color: var(--grey-500);
font-size: .9rem;
p {
@ -339,17 +339,17 @@ export default {
width: 100%;
font-size: 5rem;
height: auto;
text-shadow: $shadow-md;
text-shadow: var(--shadow-md);
animation: bounce 2s infinite;
}
.hint {
margin: .5rem auto 2rem;
border-radius: 2px;
box-shadow: $shadow-md;
background: $primary;
box-shadow: var(--shadow-md);
background: var(--primary);
padding: 1rem;
color: $white;
color: var(--white);
width: 100%;
max-width: 300px;
}

6
src/components/tasks/partials/checklist-summary.vue
View File

@ -39,7 +39,7 @@ export default {
<style scoped lang="scss">
.checklist-summary {
color: $grey-500;
color: var(--grey-500);
display: inline-flex;
align-items: center;
@ -49,10 +49,10 @@ export default {
margin-right: .25rem;
circle {
stroke: $grey-400;
stroke: var(--grey-400);
&:last-child {
stroke: $primary;
stroke: var(--primary);
}
}
}

8
src/components/tasks/partials/defer-task.vue
View File

@ -141,14 +141,14 @@ $defer-task-max-width: 350px + 100px;
width: 100%;
max-width: $defer-task-max-width;
border-radius: $radius;
border: 1px solid $grey-200;
border: 1px solid var(--grey-200);
padding: 1rem;
margin: 1rem;
background: $white;
color: $text;
background: var(--white);
color: var(--text);
cursor: default;
z-index: 10;
box-shadow: $shadow-lg;
box-shadow: var(--shadow-lg);
@media screen and (max-width: ($defer-task-max-width)) {
left: .5rem;

6
src/components/tasks/partials/editAssignees.vue
View File

@ -127,7 +127,7 @@ export default {
}
:deep(.user img) {
border: 2px solid $white;
border: 2px solid var(--white);
margin-right: 0;
}
@ -135,8 +135,8 @@ export default {
position: absolute;
top: 4px;
left: 2px;
color: $red;
background: $white;
color: var(--danger);
background: var(--white);
padding: 0 4px;
display: block;
border-radius: 100%;

18
src/components/tasks/partials/kanban-card.vue
View File

@ -117,13 +117,13 @@ export default {
</script>
<style lang="scss" scoped>
$task-background: $white;
$task-background: var(--white);
.task {
-webkit-touch-callout: none; // iOS Safari
user-select: none;
cursor: pointer;
box-shadow: $shadow-xs;
box-shadow: var(--shadow-xs);
display: block;
border: 3px solid transparent;
@ -163,7 +163,7 @@ $task-background: $white;
}
&.overdue {
color: $red;
color: var(--danger);
}
}
@ -219,7 +219,7 @@ $task-background: $white;
.footer .icon,
.due-date,
.priority-label {
background: $grey-100;
background: var(--grey-100);
border-radius: $radius;
padding: 0 .5rem;
}
@ -229,7 +229,7 @@ $task-background: $white;
}
.task-id {
color: $grey-500;
color: var(--grey-500);
font-size: .8rem;
margin-bottom: .25rem;
display: flex;
@ -244,21 +244,21 @@ $task-background: $white;
}
&.has-light-text {
color: $white;
color: var(--white);
.task-id {
color: $grey-200;
color: var(--grey-200);
}
.footer .icon,
.due-date,
.priority-label {
background: $grey-800;
background: var(--grey-800);
}
.footer {
.icon svg {
fill: $white;
fill: var(--white);
}
}
}

2
src/components/tasks/partials/listSearch.vue
View File

@ -70,6 +70,6 @@ export default {
<style lang="scss" scoped>
.list-namespace-title {
color: $grey-500;
color: var(--grey-500);
}
</style>

4
src/components/tasks/partials/priorityLabel.vue
View File

@ -54,7 +54,7 @@ export default {
}
span.high-priority {
color: $red;
color: var(--danger);
width: auto !important; // To override the width set in tasks
.icon {
@ -64,7 +64,7 @@ span.high-priority {
}
&.not-so-high {
color: $orange;
color: var(--warning);
}
}
</style>

10
src/components/tasks/partials/relatedTasks.vue
View File

@ -310,7 +310,7 @@ export default {
}
.different-list {
color: $grey-500;
color: var(--grey-500);
width: auto;
}
@ -332,21 +332,21 @@ export default {
border-radius: $radius;
&:hover {
background-color: $grey-200;
background-color: var(--grey-200);
}
a {
color: $text;
color: var(--text);
transition: color ease $transition-duration;
&:hover {
color: $grey-900;
color: var(--grey-900);
}
}
.remove {
text-align: center;
color: $red;
color: var(--danger);
opacity: 0;
transition: opacity $transition;
}

4
src/components/tasks/partials/reminders.vue
View File

@ -112,7 +112,7 @@ export default {
align-items: center;
&.overdue :deep(.datepicker a.show) {
color: $red;
color: var(--danger);
}
&:last-child {
@ -120,7 +120,7 @@ export default {
}
a.remove {
color: $red;
color: var(--danger);
padding-left: .5rem;
}
}

24
src/components/tasks/partials/singleTaskInList.vue
View File

@ -227,7 +227,7 @@ export default {
border: 2px solid transparent;
&:hover {
background-color: $grey-100;
background-color: var(--grey-100);
}
.tasktext,
@ -239,13 +239,13 @@ export default {
flex: 1 0 50%;
.overdue {
color: $red;
color: var(--danger);
}
}
.task-list {
width: auto;
color: $grey-400;
color: var(--grey-400);
font-size: .9rem;
white-space: nowrap;
}
@ -273,11 +273,11 @@ export default {
}
a {
color: $text;
color: var(--text);
transition: color ease $transition-duration;
&:hover {
color: $grey-900;
color: var(--grey-900);
}
}
@ -288,12 +288,12 @@ export default {
transition: opacity $transition, color $transition;
&:hover {
color: $orange;
color: var(--warning);
}
&.is-favorite {
opacity: 1;
color: $orange;
color: var(--warning);
}
}
@ -324,16 +324,16 @@ export default {
.tasktext.done {
text-decoration: line-through;
color: $grey-500;
color: var(--grey-500);
}
span.parent-tasks {
color: $grey-500;
color: var(--grey-500);
width: auto;
}
.remove {
color: $red;
color: var(--danger);
}
input[type="checkbox"] {
@ -351,8 +351,8 @@ export default {
left: calc(50% - 1rem);
width: 2rem;
height: 2rem;
border-left-color: $grey-300;
border-bottom-color: $grey-300;
border-left-color: var(--grey-300);
border-bottom-color: var(--grey-300);
}
}
</style>