From 4eab58177a15c12b48fd04adc5d7a201e4ad5063 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Tue, 12 Aug 2025 11:41:14 +0200
Subject: [PATCH] update(disabled widget background): updates the background of
 disabled widgets in the dashboard by giving them more opacity

---
 public/css/components/dashboard.css    | 11 +++++++++++
 public/css/theme/default.css           |  4 +++-
 public/js/components/Dashboard/Item.js |  2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/public/css/components/dashboard.css b/public/css/components/dashboard.css
index 8dc19128d..88d136b55 100644
--- a/public/css/components/dashboard.css
+++ b/public/css/components/dashboard.css
@@ -203,3 +203,14 @@
 	}
 
 }
+
+.hiddenWidget{
+	background: var(--fhc-disabled-background);
+	opacity: 40%;
+}
+
+.hiddenWidget .card,
+.hiddenWidget .card-body,
+.hiddenWidget .card-body *{
+	background: inherit !important;
+}
diff --git a/public/css/theme/default.css b/public/css/theme/default.css
index ba6493542..a0f366174 100644
--- a/public/css/theme/default.css
+++ b/public/css/theme/default.css
@@ -89,7 +89,8 @@
 	--fhc-link: var(--fhc-blue-10);
 
 	/* disabled */
-	--fhc-disabled: var(--fhc-gray-10);
+	--fhc-disabled: var(--fhc-gray-90);
+	--fhc-disabled-background: var(--fhc-gray-30);
 
 	/* status colors */
 	--fhc-danger: var(--fhc-red-10);
@@ -135,6 +136,7 @@
 
 	/* disabled */
 	--fhc-disabled: var(--fhc-gray-10);
+	--fhc-disabled-background: var(--fhc-gray-120);
 
 	/* status colors */
 	--fhc-danger: var(--fhc-red-10);
diff --git a/public/js/components/Dashboard/Item.js b/public/js/components/Dashboard/Item.js
index eccc8242e..d2ad4ae75 100644
--- a/public/js/components/Dashboard/Item.js
+++ b/public/js/components/Dashboard/Item.js
@@ -156,7 +156,7 @@ export default {
 			<i class="fa-solid fa-spinner fa-pulse fa-3x"></i>
 		</div>
 	</div>
-	<div v-else-if="!hidden || editMode" :id="widgetID" class="dashboard-item card overflow-hidden h-100 position-relative" :class="{'draggedItem':dragstate, 'dashboard-item-overlay':resizeOverlay, [arguments?.className]:arguments && arguments.className}">
+	<div v-else-if="!hidden || editMode" :id="widgetID" class="dashboard-item card overflow-hidden h-100 position-relative" :class="{'hiddenWidget':hidden, 'draggedItem':dragstate, 'dashboard-item-overlay':resizeOverlay, [arguments?.className]:arguments && arguments.className}">
 	<div v-show="!dragstate" class="h-100 card border-0">
 		<div v-if="widget" class="card-header d-flex ps-0 pe-2 align-items-center">
 			<Transition>