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-h="widget.minH"
>
<div class="grid-stack-item-content dashboard-grid-item">
<div class="dashboard-widget-card">
<div class="dashboard-widget-header">
<div class="grid-stack-item-content dashboard-grid-item">
<div class="dashboard-widget-card border border-gray-200 dark:border-gray-800">
<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="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 }}
</div>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
<p class="mt-1 text-sm">
{{ widget.description }}
</p>
</div>
@@ -430,8 +430,8 @@ onBeforeUnmount(() => {
</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">
<p class="text-sm text-gray-500 dark:text-gray-400">
<div class="rounded-xl border border-dashed border-gray-300 dark:border-gray-700 p-10 text-center">
<p class="text-sm">
Es sind aktuell keine Dashboard-Karten sichtbar.
</p>
<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>
<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.
</p>
</div>
@@ -459,11 +459,11 @@ onBeforeUnmount(() => {
<div
v-for="definition in DASHBOARD_WIDGETS"
: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>
<p class="font-medium text-gray-900 dark:text-white">{{ definition.title }}</p>
<p class="text-sm text-gray-500 dark:text-gray-400">{{ definition.description }}</p>
<p class="font-medium">{{ definition.title }}</p>
<p class="text-sm">{{ definition.description }}</p>
</div>
<UButton
@@ -508,14 +508,11 @@ onBeforeUnmount(() => {
flex-direction: column;
overflow: hidden;
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);
}
.dashboard-widget-header {
flex: 0 0 auto;
border-bottom: 1px solid rgb(229 231 235);
padding: 1rem 1rem 0.875rem;
}
@@ -553,12 +550,4 @@ onBeforeUnmount(() => {
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>