refactor(toast): migrate from tailwind to inline styles for shadow dom compatibility

commit: df232026d1628f74a0864ee9eec143c1406a1e82
author: bamen · 13mo ago · 2025-09-16 08:13 UTC
parent: c18691d
signature: unsigned

2 files · +48 -6

M gui/src/components/toast/Toast.svelte +30 -1


@@ -52,9 +52,38 @@
52	52		aria-label="Dismiss notification"
53	53		title="Click to dismiss"
54	54		>
55		-	<div class="w-full min-w-36 px-5 py-4 text-center text-white font-semibold text-sm rounded-xl shadow-2xl backdrop-blur-md border transition-all duration-250 {type === 'success' ? 'bg-gradient-to-br from-green-500/90 to-green-700/90 border-green-300/30' : type === 'error' ? 'bg-gradient-to-br from-red-500/90 to-red-700/90 border-red-300/30' : 'bg-gradient-to-br from-blue-500/90 to-blue-700/90 border-blue-300/30'}">
	55	+	<div class="toast-content">
56	56		{message \|\| 'Notification'}
57	57		</div>
	58	+	<style>
	59	+	.toast-content {
	60	+	width: 100%;
	61	+	min-width: 9rem; /* ~min-w-36 */
	62	+	padding: 1rem 1.25rem; /* px-5 py-4 */
	63	+	text-align: center;
	64	+	color: #fff;
	65	+	font-weight: 600;
	66	+	font-size: 0.875rem; /* text-sm */
	67	+	border-radius: 0.75rem; /* rounded-xl */
	68	+	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); /* shadow-2xl */
	69	+	backdrop-filter: blur(6px);
	70	+	border: 1px solid rgba(255,255,255,0.18);
	71	+	transition: all 250ms ease;
	72	+	}
	73	+
	74	+	.toast-success .toast-content {
	75	+	background: linear-gradient(135deg, rgba(34,197,94,0.9), rgba(21,128,61,0.9));
	76	+	border-color: rgba(134,239,172,0.3);
	77	+	}
	78	+	.toast-error .toast-content {
	79	+	background: linear-gradient(135deg, rgba(239,68,68,0.9), rgba(185,28,28,0.9));
	80	+	border-color: rgba(252,165,165,0.3);
	81	+	}
	82	+	.toast-info .toast-content {
	83	+	background: linear-gradient(135deg, rgba(59,130,246,0.9), rgba(29,78,216,0.9));
	84	+	border-color: rgba(147,197,253,0.3);
	85	+	}
	86	+	</style>
58	87		</button>
59	88
60	89		<style>


@@ -52,9 +52,38 @@
52		aria-label="Dismiss notification"	52		aria-label="Dismiss notification"
53		title="Click to dismiss"	53		title="Click to dismiss"
54		>	54		>
55	-	<div class="w-full min-w-36 px-5 py-4 text-center text-white font-semibold text-sm rounded-xl shadow-2xl backdrop-blur-md border transition-all duration-250 {type === 'success' ? 'bg-gradient-to-br from-green-500/90 to-green-700/90 border-green-300/30' : type === 'error' ? 'bg-gradient-to-br from-red-500/90 to-red-700/90 border-red-300/30' : 'bg-gradient-to-br from-blue-500/90 to-blue-700/90 border-blue-300/30'}">	55	+	<div class="toast-content">
56		{message \|\| 'Notification'}	56		{message \|\| 'Notification'}
57		</div>	57		</div>
			58	+	<style>
			59	+	.toast-content {
			60	+	width: 100%;
			61	+	min-width: 9rem; /* ~min-w-36 */
			62	+	padding: 1rem 1.25rem; /* px-5 py-4 */
			63	+	text-align: center;
			64	+	color: #fff;
			65	+	font-weight: 600;
			66	+	font-size: 0.875rem; /* text-sm */
			67	+	border-radius: 0.75rem; /* rounded-xl */
			68	+	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); /* shadow-2xl */
			69	+	backdrop-filter: blur(6px);
			70	+	border: 1px solid rgba(255,255,255,0.18);
			71	+	transition: all 250ms ease;
			72	+	}
			73	+
			74	+	.toast-success .toast-content {
			75	+	background: linear-gradient(135deg, rgba(34,197,94,0.9), rgba(21,128,61,0.9));
			76	+	border-color: rgba(134,239,172,0.3);
			77	+	}
			78	+	.toast-error .toast-content {
			79	+	background: linear-gradient(135deg, rgba(239,68,68,0.9), rgba(185,28,28,0.9));
			80	+	border-color: rgba(252,165,165,0.3);
			81	+	}
			82	+	.toast-info .toast-content {
			83	+	background: linear-gradient(135deg, rgba(59,130,246,0.9), rgba(29,78,216,0.9));
			84	+	border-color: rgba(147,197,253,0.3);
			85	+	}
			86	+	</style>
58		</button>	87		</button>
59			88
60		<style>	89		<style>

M gui/src/components/toast/ToastContainer.svelte +18 -5


@@ -124,7 +124,22 @@
124	124		});
125	125		</script>
126	126
127		-	<div class="fixed top-5 left-5 z-[2147483647] pointer-events-none flex flex-col gap-2 max-w-80 visible opacity-100 backdrop-blur-sm">
	127	+	<div
	128	+	class="toast-container"
	129	+	style="
	130	+	position: fixed;
	131	+	top: 20px;
	132	+	left: 20px;
	133	+	z-index: 2147483647;
	134	+	pointer-events: none;
	135	+	display: flex;
	136	+	flex-direction: column;
	137	+	gap: 8px;
	138	+	max-width: 320px;
	139	+	opacity: 1;
	140	+	backdrop-filter: blur(2px);
	141	+	"
	142	+	>
128	143		{#each toasts as toast (toast.id)}
129	144		<Toast
130	145		id={toast.id}

@@ -137,8 +152,6 @@
137	152		</div>
138	153
139	154		<style>
140		-	:global(.toast-base) {
141		-	pointer-events: auto;
142		-	will-change: transform, opacity;
143		-	}
	155	+	.toast-container { contain: layout style; }
	156	+	/* The Toast button handles its own pointer events */
144	157		</style>⏎̸

   });
 </script>
-<div class="fixed top-5 left-5 z-[2147483647] pointer-events-none flex flex-col gap-2 max-w-80 visible opacity-100 backdrop-blur-sm">
+<div
+  class="toast-container"
+  style="
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    z-index: 2147483647;
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-width: 320px;
+    opacity: 1;
+    backdrop-filter: blur(2px);
+  "
+>
   {#each toasts as toast (toast.id)}
     <Toast
       id={toast.id}
 </div>
 <style>
-  :global(.toast-base) {
+  .toast-container { contain: layout style; }
-    pointer-events: auto;
+  /* The Toast button handles its own pointer events */
-    will-change: transform, opacity;
-  }
 </style>⏎̸