From da311fce9ebe3261b74b2f159e01d00a1284133e Mon Sep 17 00:00:00 2001 From: kolaente Date: Sun, 21 Jan 2024 00:10:05 +0100 Subject: [PATCH] fix(kanban): ensure text and icon color only depends on the card background, not on the color scheme Related https://github.com/go-vikunja/frontend/issues/135#issuecomment-1900701258 --- src/components/tasks/partials/kanban-card.vue | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue index 0def5dd00..d56ca2b18 100644 --- a/src/components/tasks/partials/kanban-card.vue +++ b/src/components/tasks/partials/kanban-card.vue @@ -220,6 +220,7 @@ $task-background: var(--white); align-items: center; :deep(.tag), + :deep(.checklist-summary), .assignees, .icon, .priority-label { @@ -227,6 +228,10 @@ $task-background: var(--white); margin-right: .25rem; } + :deep(.checklist-summary) { + padding-left: 0; + } + .assignees { display: flex; @@ -295,22 +300,27 @@ $task-background: var(--white); } &.has-light-text { + --white: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a)) !important; color: var(--white); .task-id { - color: var(--grey-200); + color: hsl(220, 13%, 91%); // grey-200; } .footer .icon, .due-date, .priority-label { - background: var(--grey-800); + background: hsl(215, 27.9%, 16.9%); // grey-800 } .footer { .icon svg { fill: var(--white); } + + :deep(.checklist-summary) { + color: hsl(217.9, 10.6%, 64.9%); // grey-400 + } } } }