Tint the kanban inbox column lighter than the status columns
New --inbox-bg token (light and dark) applied via .kanban__col--inbox so the inbox reads as distinct from "To do" / "Doing" / "Done". Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -11,6 +11,8 @@
|
|||||||
--warn-bg: #fff4e5;
|
--warn-bg: #fff4e5;
|
||||||
--warn-border: #f0c48a;
|
--warn-border: #f0c48a;
|
||||||
--error: #b3261e;
|
--error: #b3261e;
|
||||||
|
/* Kanban inbox column: a touch lighter than a status column (var(--bg)). */
|
||||||
|
--inbox-bg: #fcfcfd;
|
||||||
color-scheme: light dark;
|
color-scheme: light dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -24,6 +26,7 @@
|
|||||||
--warn-bg: #2e2415;
|
--warn-bg: #2e2415;
|
||||||
--warn-border: #6b5220;
|
--warn-border: #6b5220;
|
||||||
--error: #f2b8b5;
|
--error: #f2b8b5;
|
||||||
|
--inbox-bg: #202027;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -406,6 +409,10 @@ h1 {
|
|||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.kanban__col--inbox {
|
||||||
|
background: var(--inbox-bg);
|
||||||
|
}
|
||||||
|
|
||||||
.kanban__head {
|
.kanban__head {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -344,7 +344,12 @@ async function onCreateInbox() {
|
|||||||
<p v-if="cards.loading && !cards.loaded" class="muted">Loading…</p>
|
<p v-if="cards.loading && !cards.loaded" class="muted">Loading…</p>
|
||||||
|
|
||||||
<div v-else class="kanban">
|
<div v-else class="kanban">
|
||||||
<section v-for="column in board" :key="column.key" class="kanban__col">
|
<section
|
||||||
|
v-for="column in board"
|
||||||
|
:key="column.key"
|
||||||
|
class="kanban__col"
|
||||||
|
:class="{ 'kanban__col--inbox': column.statusId === null }"
|
||||||
|
>
|
||||||
<header class="kanban__head">
|
<header class="kanban__head">
|
||||||
<span class="kanban__title">{{ column.title }}</span>
|
<span class="kanban__title">{{ column.title }}</span>
|
||||||
<span class="kanban__count">{{ column.cards.length }}</span>
|
<span class="kanban__count">{{ column.cards.length }}</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user