change dashboard card colors and input background colors

This commit is contained in:
Gregor Vostrak
2026-01-09 01:16:23 +01:00
parent 00d9d1488e
commit 5a05ee35e0
8 changed files with 11 additions and 12 deletions
@@ -1,8 +1,7 @@
<template>
<section class="flex flex-col">
<CardTitle :title="title" :icon="icon"></CardTitle>
<div
class="rounded-lg bg-card-background border border-card-border flex-1 flex items-stretch shadow-card">
<div class="rounded-lg border border-card-border flex-1 flex items-stretch">
<div class="w-full flex flex-col">
<slot></slot>
</div>
+1 -1
View File
@@ -35,7 +35,7 @@ const refreshDashboardData = () => {
</MainContainer>
<MainContainer
class="grid gap-5 sm:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pt-3 sm:pt-5 pb-4 sm:pb-6 border-b border-default-background-separator items-stretch">
class="grid gap-2 sm:gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pt-3 sm:pt-5 pb-4 sm:pb-6 border-b border-default-background-separator items-stretch">
<RecentlyTrackedTasksCard></RecentlyTrackedTasksCard>
<LastSevenDaysCard></LastSevenDaysCard>
<ActivityGraphCard></ActivityGraphCard>
@@ -548,7 +548,7 @@ onUnmounted(() => {
}
.fullcalendar :deep(.fc-day-today.fc-col-header-cell) {
background-color: var(--color-accent-default);
background-color: var(--color-bg-secondary);
}
.fullcalendar :deep(.fc-day-today) {
@@ -52,7 +52,7 @@ watch(open, (value) => {
</PopoverTrigger>
<PopoverContent
:align="align"
class="rounded-lg overflow-hidden relative border border-card-border overflow-none shadow-dropdown bg-card-background"
class="rounded-lg overflow-hidden relative border border-card-border overflow-none shadow-dropdown bg-secondary"
@open-auto-focus="handleAutofocus"
@click="onContentClick">
<slot name="content" />
@@ -1,7 +1,7 @@
<script setup lang="ts"></script>
<template>
<div class="px-3 sm:px-4 lg:px-8 3xl:px-12 mx-auto">
<div class="px-3 sm:px-4 lg:px-6 mx-auto">
<slot></slot>
</div>
</template>
@@ -207,7 +207,7 @@ useSelectEvents(
<template>
<div class="flex items-center relative @container" data-testid="dashboard_timer">
<div
class="flex flex-col @2xl:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
class="flex flex-col @2xl:flex-row w-full justify-between rounded-lg bg-secondary border-card-border border transition shadow-card">
<div class="flex flex-1 items-center pr-6 relative">
<input
ref="currentTimeEntryDescriptionInput"
@@ -154,7 +154,7 @@ function closeAndFocusInput() {
v-model="currentTime"
placeholder="00:00:00"
data-testid="time_entry_time"
class="w-[110px] lg:w-[130px] h-full text-text-primary py-2.5 rounded-lg border-border-secondary border text-center px-4 text-base lg:text-lg font-semibold bg-card-background border-none placeholder-text-tertiary focus:ring-0 transition"
class="w-[110px] lg:w-[130px] h-full text-text-primary py-2.5 rounded-lg border-border-secondary border text-center px-4 text-base lg:text-lg font-semibold bg-secondary border-none placeholder-text-tertiary focus:ring-0 transition"
type="text"
@focusin="openModalOnTab"
@click="openModalOnClick"
+4 -4
View File
@@ -33,7 +33,7 @@
--theme-color-chart: var(--color-accent-200);
--theme-color-menu-active: var(--color-bg-secondary);
--theme-color-card-background: var(--color-bg-secondary);
--theme-color-card-background: var(--color-bg-primary);
--theme-shadow-card: 0 4px 7px 0px rgb(0 0 0 / 15%);
--theme-shadow-dropdown: 0 4px 7px 0px rgb(0 0 0 / 40%);
@@ -51,7 +51,7 @@
--theme-color-button-primary-border: rgba(var(--color-accent-300), 0.2);
--theme-color-button-primary-text: var(--color-text-primary);
--theme-color-input-background: var(--color-bg-secondary);
--theme-color-input-background: transparent;
--theme-color-input-select-active: rgb(var(--color-accent-300));
--theme-color-input-select-active-hover: rgb(var(--color-accent-200));
@@ -98,7 +98,7 @@
--theme-color-button-primary-border: rgba(var(--color-accent-600), 1);
--theme-color-button-primary-text: #ffffff;
--theme-color-input-background: var(--color-bg-primary);
--theme-color-input-background: transparent;
--theme-color-input-select-active: rgb(var(--color-accent-400));
--theme-color-input-select-active-hover: rgb(var(--color-accent-500));
@@ -187,7 +187,7 @@ body {
--foreground: var(--color-text-primary);
--card: var(--theme-color-card-background);
--card-foreground: var(--color-text-primary);
--popover: var(--theme-color-card-background);
--popover: var(--color-bg-tertiary);
--popover-foreground: var(--color-text-primary);
--primary: var(--color-bg-primary);
--primary-foreground: var(--color-text-primary);