Fix Darkmode Dashboard
All checks were successful
Build and Push Docker Images / build-backend (push) Successful in 14s
Build and Push Docker Images / build-frontend (push) Successful in 52s

This commit is contained in:
2026-03-18 18:47:02 +01:00
parent 05d99e9e7d
commit 55bb2589a4

View File

@@ -385,15 +385,15 @@ onBeforeUnmount(() => {
:gs-min-w="widget.minW" :gs-min-w="widget.minW"
:gs-min-h="widget.minH" :gs-min-h="widget.minH"
> >
<div class="grid-stack-item-content dashboard-grid-item"> <div class="grid-stack-item-content dashboard-grid-item">
<div class="dashboard-widget-card"> <div class="dashboard-widget-card border border-gray-200 dark:border-gray-800">
<div class="dashboard-widget-header"> <div class="dashboard-widget-header border-b border-gray-200 dark:border-gray-800">
<div class="flex items-start justify-between gap-3"> <div class="flex items-start justify-between gap-3">
<div class="min-w-0"> <div class="min-w-0">
<div :class="['dashboard-widget-drag-handle font-semibold text-gray-900 dark:text-white', isEditMode ? 'cursor-move' : 'cursor-default']"> <div :class="['dashboard-widget-drag-handle font-semibold', isEditMode ? 'cursor-move' : 'cursor-default']">
{{ widget.title }} {{ widget.title }}
</div> </div>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400"> <p class="mt-1 text-sm">
{{ widget.description }} {{ widget.description }}
</p> </p>
</div> </div>
@@ -430,8 +430,8 @@ onBeforeUnmount(() => {
</div> </div>
</div> </div>
<div v-else class="rounded-xl border border-dashed border-gray-300 bg-white p-10 text-center dark:border-gray-700 dark:bg-gray-900"> <div class="rounded-xl border border-dashed border-gray-300 dark:border-gray-700 p-10 text-center">
<p class="text-sm text-gray-500 dark:text-gray-400"> <p class="text-sm">
Es sind aktuell keine Dashboard-Karten sichtbar. Es sind aktuell keine Dashboard-Karten sichtbar.
</p> </p>
<UButton v-if="isEditMode" class="mt-4" icon="i-heroicons-plus" @click="manageCardsOpen = true"> <UButton v-if="isEditMode" class="mt-4" icon="i-heroicons-plus" @click="manageCardsOpen = true">
@@ -445,7 +445,7 @@ onBeforeUnmount(() => {
<div class="flex items-center justify-between gap-3"> <div class="flex items-center justify-between gap-3">
<div> <div>
<h2 class="font-semibold">Dashboard-Karten</h2> <h2 class="font-semibold">Dashboard-Karten</h2>
<p class="text-sm text-gray-500 dark:text-gray-400"> <p class="text-sm">
Karten ein- oder ausblenden und bei Bedarf auf das Standardlayout zurücksetzen. Karten ein- oder ausblenden und bei Bedarf auf das Standardlayout zurücksetzen.
</p> </p>
</div> </div>
@@ -459,11 +459,11 @@ onBeforeUnmount(() => {
<div <div
v-for="definition in DASHBOARD_WIDGETS" v-for="definition in DASHBOARD_WIDGETS"
:key="definition.id" :key="definition.id"
class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 px-4 py-3 dark:border-gray-800" class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 dark:border-gray-800 px-4 py-3"
> >
<div> <div>
<p class="font-medium text-gray-900 dark:text-white">{{ definition.title }}</p> <p class="font-medium">{{ definition.title }}</p>
<p class="text-sm text-gray-500 dark:text-gray-400">{{ definition.description }}</p> <p class="text-sm">{{ definition.description }}</p>
</div> </div>
<UButton <UButton
@@ -508,14 +508,11 @@ onBeforeUnmount(() => {
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
border-radius: 0.75rem; border-radius: 0.75rem;
border: 1px solid rgb(229 231 235);
background: white;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
} }
.dashboard-widget-header { .dashboard-widget-header {
flex: 0 0 auto; flex: 0 0 auto;
border-bottom: 1px solid rgb(229 231 235);
padding: 1rem 1rem 0.875rem; padding: 1rem 1rem 0.875rem;
} }
@@ -553,12 +550,4 @@ onBeforeUnmount(() => {
display: none; display: none;
} }
:deep(.dark .dashboard-widget-card) {
border-color: rgb(31 41 55);
background: rgb(17 24 39);
}
:deep(.dark .dashboard-widget-header) {
border-color: rgb(31 41 55);
}
</style> </style>