refactor(frontend): refactor divider of panel style

16 files changed, 12 insertions, 16 deletions

diff --git a/packages/frontend-shared/themes/_dark.json5 b/packages/frontend-shared/themes/_dark.json5
index cefc5edb72..022e567113 100644
--- a/packages/frontend-shared/themes/_dark.json5
+++ b/packages/frontend-shared/themes/_dark.json5
@@ -26,7 +26,6 @@
 		panelHighlight: ':lighten<3<@panel',
 		panelHeaderBg: ':lighten<3<@panel',
 		panelHeaderFg: '@fg',
-		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
 		windowHeader: ':alpha<0.85<@panel',
 		popup: ':lighten<3<@panel',
diff --git a/packages/frontend-shared/themes/_light.json5 b/packages/frontend-shared/themes/_light.json5
index 25e6e5ab7f..9738ee5d5f 100644
--- a/packages/frontend-shared/themes/_light.json5
+++ b/packages/frontend-shared/themes/_light.json5
@@ -26,7 +26,6 @@
 		panelHighlight: ':darken<3<@panel',
 		panelHeaderBg: ':lighten<3<@panel',
 		panelHeaderFg: '@fg',
-		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--MI_THEME-divider)',
 		windowHeader: ':alpha<0.85<@panel',
 		popup: ':lighten<3<@panel',
diff --git a/packages/frontend-shared/themes/d-astro.json5 b/packages/frontend-shared/themes/d-astro.json5
index 5e721534d3..6d34665528 100644
--- a/packages/frontend-shared/themes/d-astro.json5
+++ b/packages/frontend-shared/themes/d-astro.json5
@@ -46,7 +46,6 @@
 		fgOnWhite: '@accent',
 		panelHighlight: ':lighten<3<@panel',
 		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
-		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
 	},
 }
diff --git a/packages/frontend-shared/themes/d-botanical.json5 b/packages/frontend-shared/themes/d-botanical.json5
index 507880aab1..5a57a14f13 100644
--- a/packages/frontend-shared/themes/d-botanical.json5
+++ b/packages/frontend-shared/themes/d-botanical.json5
@@ -14,7 +14,6 @@
 		fgOnWhite: '@accent',
 		divider: 'rgba(255, 255, 255, 0.14)',
 		panel: 'rgb(47, 47, 44)',
-		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		header: ':alpha<0.7<@panel',
 		navBg: '#363636',
 		renote: '@accent',
diff --git a/packages/frontend-shared/themes/d-dark.json5 b/packages/frontend-shared/themes/d-dark.json5
index ae4f7d53f5..67d49aa861 100644
--- a/packages/frontend-shared/themes/d-dark.json5
+++ b/packages/frontend-shared/themes/d-dark.json5
@@ -14,7 +14,6 @@
 		fgOnWhite: '@accent',
 		divider: 'rgba(255, 255, 255, 0.14)',
 		panel: '#2d2d2d',
-		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		header: ':alpha<0.7<@panel',
 		navBg: '#363636',
 		renote: '@accent',
diff --git a/packages/frontend-shared/themes/d-future.json5 b/packages/frontend-shared/themes/d-future.json5
index f2c1f3eb86..6a66f2eca9 100644
--- a/packages/frontend-shared/themes/d-future.json5
+++ b/packages/frontend-shared/themes/d-future.json5
@@ -15,7 +15,6 @@
 		fgOnWhite: '@accent',
 		divider: 'rgba(255, 255, 255, 0.1)',
 		panel: '#18181c',
-		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		renote: '@accent',
 		mention: '#f2c97d',
 		mentionMe: '@accent',
diff --git a/packages/frontend-shared/themes/d-green-lime.json5 b/packages/frontend-shared/themes/d-green-lime.json5
index ca4e688fdb..fcd6651197 100644
--- a/packages/frontend-shared/themes/d-green-lime.json5
+++ b/packages/frontend-shared/themes/d-green-lime.json5
@@ -15,7 +15,6 @@
 		fgOnWhite: '@accent',
 		divider: '#e7fffb24',
 		panel: '#192320',
-		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		popup: '#293330',
 		renote: '@accent',
 		mentionMe: '#ffaa00',
diff --git a/packages/frontend-shared/themes/d-green-orange.json5 b/packages/frontend-shared/themes/d-green-orange.json5
index c2539816e2..aef3897329 100644
--- a/packages/frontend-shared/themes/d-green-orange.json5
+++ b/packages/frontend-shared/themes/d-green-orange.json5
@@ -15,7 +15,6 @@
 		fgOnWhite: '@accent',
 		divider: '#e7fffb24',
 		panel: '#192320',
-		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		popup: '#293330',
 		renote: '@accent',
 		mentionMe: '#b4e900',
diff --git a/packages/frontend-shared/themes/d-u0.json5 b/packages/frontend-shared/themes/d-u0.json5
index ddce06649c..b0c27edc35 100644
--- a/packages/frontend-shared/themes/d-u0.json5
+++ b/packages/frontend-shared/themes/d-u0.json5
@@ -59,7 +59,6 @@
 		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
 		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
 		fgTransparentWeak: ':alpha<0.75<@fg',
-		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
 		deckBg: '#142022',
 	},
diff --git a/packages/frontend-shared/themes/l-botanical.json5 b/packages/frontend-shared/themes/l-botanical.json5
index 4ad539e8a0..2fbae4fbae 100644
--- a/packages/frontend-shared/themes/l-botanical.json5
+++ b/packages/frontend-shared/themes/l-botanical.json5
@@ -15,7 +15,6 @@
 		divider: '#cfcfcf',
 		panel: '#ebe7e5',
 		panelHeaderBg: '@panel',
-		panelHeaderDivider: '@divider',
 		header: ':alpha<0.7<@panel',
 		navBg: '#ebe7e5',
 		renote: '#229e92',
diff --git a/packages/frontend-shared/themes/l-light.json5 b/packages/frontend-shared/themes/l-light.json5
index 63c2e6d278..55f2d2f004 100644
--- a/packages/frontend-shared/themes/l-light.json5
+++ b/packages/frontend-shared/themes/l-light.json5
@@ -15,7 +15,6 @@
 		header: ':alpha<0.7<@panel',
 		navBg: '#fff',
 		panel: '#fff',
-		panelHeaderDivider: '@divider',
 		mentionMe: 'rgb(0, 179, 70)',
 	},
 }
diff --git a/packages/frontend-shared/themes/l-rainy.json5 b/packages/frontend-shared/themes/l-rainy.json5
index e7d1d5af00..d7c31bda8d 100644
--- a/packages/frontend-shared/themes/l-rainy.json5
+++ b/packages/frontend-shared/themes/l-rainy.json5
@@ -13,7 +13,6 @@
 		fgOnWhite: '@accent',
 		panel: '#fff',
 		divider: 'rgb(230 233 234)',
-		panelHeaderDivider: '@divider',
 		renote: '@accent',
 		link: '@accent',
 		mention: '@accent',
diff --git a/packages/frontend-shared/themes/l-u0.json5 b/packages/frontend-shared/themes/l-u0.json5
index d8e403c961..5ce736be37 100644
--- a/packages/frontend-shared/themes/l-u0.json5
+++ b/packages/frontend-shared/themes/l-u0.json5
@@ -61,7 +61,6 @@
 		scrollbarHandle: '#74747433',
 		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
 		fgTransparentWeak: ':alpha<0.75<@fg',
-		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
 	},
 }
diff --git a/packages/frontend-shared/themes/l-vivid.json5 b/packages/frontend-shared/themes/l-vivid.json5
index d69f024a6b..2a95b37b57 100644
--- a/packages/frontend-shared/themes/l-vivid.json5
+++ b/packages/frontend-shared/themes/l-vivid.json5
@@ -49,7 +49,6 @@
 		panelHighlight: ':darken<3<@panel',
 		scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
 		fgTransparentWeak: ':alpha<0.75<@fg',
-		panelHeaderDivider: '@divider',
 		scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
 	},
 }
diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index 29165d7b71..1993991106 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -181,11 +181,16 @@ onUnmounted(() => {
 	left: 0;
 	color: var(--MI_THEME-panelHeaderFg);
 	background: var(--MI_THEME-panelHeaderBg);
-	border-bottom: solid 0.5px var(--MI_THEME-panelHeaderDivider);
 	z-index: 2;
 	line-height: 1.4em;
 }
 
+@container style(--MI_THEME-panelHeaderBg: var(--MI_THEME-panel)) {
+	.header {
+		box-shadow: 0 0.5px 0 0 light-dark(#0002, #fff2);
+	}
+}
+
 .title {
 	margin: 0;
 	padding: 12px 16px;
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 3d359b05c2..6c9d001db6 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -413,11 +413,16 @@ function onDrop(ev) {
 	font-size: 0.9em;
 	color: var(--MI_THEME-panelHeaderFg);
 	background: var(--MI_THEME-panelHeaderBg);
-	box-shadow: 0 0.5px 0 0 var(--MI_THEME-panelHeaderDivider);
 	cursor: pointer;
 	user-select: none;
 }
 
+@container style(--MI_THEME-panelHeaderBg: var(--MI_THEME-panel)) {
+	.header {
+		box-shadow: 0 0.5px 0 0 light-dark(#0002, #fff2);
+	}
+}
+
 .color {
 	position: absolute;
 	top: 12px;