Fix Darkmode Dashboard
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user