fix(control): use correct colors and include edge cases in select all displays button

control/frontend/src/routes/DisplayView.svelte

@@ -13,6 +13,7 @@
 		change_height,
 		current_height,
 		dnd_flip_duration_ms,
+		get_selectable_color_classes,
 		is_display_drag,
 		is_group_drag,
 		next_height_step_size,
@@ -57,7 +58,7 @@
 	$effect(() => {
 		const d = $display_groups;
 		const sdi = $selected_display_ids;
-		all_groups_selected = liveQuery(() => all_selected(d || [], sdi));
+		all_groups_selected = liveQuery(() => d.length !== 0 && all_selected(d || [], sdi));
 	});
 
 	let last_pinned_pane_size: number = 45;
@@ -217,11 +218,22 @@
 					</span>
 					<div class="flex flex-row gap-1">
 						<button
-							class="min-w-40 px-4 rounded-xl cursor-pointer duration-200 transition-colors bg-stone-600"
+							disabled={$display_groups?.length === 0}
+							class="min-w-40 px-4 rounded-xl duration-200 transition-colors {$display_groups?.length ===
+				0
+					? 'text-stone-500 cursor-not-allowed'
+					: 'cursor-pointer'} {get_selectable_color_classes($all_groups_selected || false, {
+					bg: true,
+					hover: $display_groups?.length !== 0,
+					active: $display_groups?.length !== 0,
+					text: true
+				})}"
 							onclick={async () => await toggle_all_selected_displays($display_groups)}
 						>
 							<span>{$all_groups_selected || false ? 'Alle Abwählen' : 'Alle Auswählen'}</span>
 						</button>
+
+
 						<div class="flex flex-row">
 							<Button
 								title="Bildschirme größer darstellen"