🎨

src/client/style.scss

@@ -239,8 +239,7 @@ hr {
 ._panel {
 	background: var(--panel);
 	border-radius: var(--radius);
-	//border: var(--panelBorder);
+	border: var(--panelBorder);
-	box-shadow: var(--panelShadow);
 	overflow: clip;
 }
 
@@ -357,7 +356,7 @@ hr {
 ._flat_ {
 	--root-margin: 0px;
 	--baseContentWidth: 100%;
-	--panelShadow: none;
+	--panelBorder: none;
 
 	._block {
 		//border-top: solid 0.5px var(--divider);

src/client/themes/_dark.json5

@@ -26,8 +26,7 @@
 		panelHeaderBg: ':lighten<3<@panel',
 		panelHeaderFg: '@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
-		panelBorder: 'rgba(0, 0, 0, 0)',
+		panelBorder: '" solid 1px var(--divider)',
-		panelShadow: '" 0 8px 24px rgba(0, 0, 0, 0.12)',
 		acrylicPanel: ':alpha<0.5<@panel',
 		shadow: 'rgba(0, 0, 0, 0.3)',
 		header: ':alpha<0.7<@panel',

src/client/themes/_light.json5

@@ -26,8 +26,7 @@
 		panelHeaderBg: ':lighten<3<@panel',
 		panelHeaderFg: '@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
-		panelBorder: 'rgba(0, 0, 0, 0)',
+		panelBorder: '" solid 1px var(--divider)',
-		panelShadow: '" 0 8px 24px rgb(21 43 75 / 8%)',
 		acrylicPanel: ':alpha<0.5<@panel',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: ':alpha<0.7<@panel',

src/client/themes/d-astro.json5

@@ -39,8 +39,7 @@
 		navHoverFg: ':lighten<17<@fg',
 		dateLabelFg: '@fg',
 		inputBorder: '#959da2',
-		panelBorder: 'rgba(0, 0, 0, 0)',
+		panelBorder: '" solid 1px var(--divider)',
-		panelShadow: '" 0 8px 24px rgba(0, 0, 0, 0.12)',
 		accentDarken: ':darken<10<@accent',
 		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@accent',

src/client/themes/d-black.json5

@@ -11,7 +11,6 @@
 		panel: '#131313',
 		panelHeaderBg: '@panel',
 		panelHeaderDivider: '@divider',
-		panelShadow: '" 0 8px 24px rgb(0 0 0 / 25%)',
 		shadow: 'rgba(255, 255, 255, 0.05)',
 		modalBg: 'rgba(255, 255, 255, 0.1)',
 		messageBg: '#1d1d1d',

src/client/themes/d-dark.json5

@@ -13,7 +13,6 @@
 		fgHighlighted: '#fff',
 		divider: 'rgba(255, 255, 255, 0.14)',
 		panel: '#2d2d2d',
-		panelShadow: '" 0 8px 24px rgb(0 0 0 / 25%)',
 		panelHeaderBg: '@panel',
 		panelHeaderDivider: '@divider',
 		header: ':alpha<0.7<@panel',

src/client/themes/d-persimmon.json5

@@ -13,7 +13,6 @@
 		fgHighlighted: '#fff',
 		divider: 'rgba(255, 255, 255, 0.14)',
 		panel: 'rgb(41, 43, 41)',
-		panelShadow: '" 0 8px 24px rgb(0 0 0 / 25%)',
 		infoFg: '@fg',
 		infoBg: '#333c3b',
 		navBg: '#141714',

src/client/themes/l-light.json5

@@ -14,7 +14,6 @@
 		header: ':alpha<0.7<@panel',
 		navBg: '#fff',
 		panel: '#fff',
-		panelShadow: '" 0 8px 24px rgb(21 43 75 / 8%)',
 		panelHeaderDivider: '@divider',
 		messageBg: '#dedede',
 	},

src/client/themes/l-vivid.json5

@@ -42,8 +42,7 @@
 		navHoverFg: ':darken<17<@fg',
 		dateLabelFg: '@fg',
 		inputBorder: '#dae0e4',
-		panelBorder: 'rgba(0, 0, 0, 0)',
+		panelBorder: '" solid 1px var(--divider)',
-		panelShadow: '" 0 8px 24px rgb(21 43 75 / 8%)',
 		accentDarken: ':darken<10<@accent',
 		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@accent',

src/client/ui/deck/widgets-column.vue

@@ -64,7 +64,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .wtdtxvec {
 	--margin: 8px;
-	--panelShadow: none;
+	--panelBorder: none;
 
 	padding: 0 var(--margin);
 }

src/client/ui/default.vue

@@ -143,7 +143,7 @@ export default defineComponent({
 		},
 
 		attachSticky(ref) {
-			const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 1 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
+			const sticky = new StickySidebar(this.$refs[ref], this.$store.state.menuDisplay === 'top' ? 0 : 16, this.$store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
 			window.addEventListener('scroll', () => {
 				sticky.calc(window.scrollY);
 			}, { passive: true });
@@ -230,8 +230,6 @@ export default defineComponent({
 	$widgets-hide-threshold: 1200px;
 	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
 
-	--panelShadow: 0 0 0 1px var(--divider);
-
 	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 	min-height: calc(var(--vh, 1vh) * 100);
 	box-sizing: border-box;
@@ -290,7 +288,6 @@ export default defineComponent({
 			width: 750px;
 			margin: 0 16px 0 0;
 			background: var(--bg);
-			box-shadow: 0 0 0 1px var(--divider);
 			border-radius: 0;
 			--margin: 12px;
 
@@ -321,7 +318,7 @@ export default defineComponent({
 		}
 
 		> .widgets {
-			//--panelShadow: none;
+			//--panelBorder: none;
 			width: 300px;
 			margin-top: 16px;
 
@@ -342,14 +339,13 @@ export default defineComponent({
 			--globalHeaderHeight: 60px; // TODO: 60pxと決め打ちしているのを直す
 
 			> .main {
-				margin-top: 1px;
+				margin-top: 0;
 				border-radius: var(--radius);
-				box-shadow: 0 0 0 1px var(--divider);
 			}
 
 			> .widgets {
 				--stickyTop: var(--globalHeaderHeight);
-				margin-top: 1px;
+				margin-top: 0;
 			}
 		}