🎨

src/client/app.vue

@@ -932,6 +932,7 @@ export default Vue.extend({
 
 		&.wallpaper {
 			background: var(--wallpaperOverlay);
+			backdrop-filter: blur(4px);
 		}
 
 		> main {

src/client/components/ui/container.vue

@@ -109,8 +109,10 @@ export default Vue.extend({
 
 	> header {
 		position: relative;
-		box-shadow: 0 1px 0 0 var(--divider);
+		box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
 		z-index: 1;
+		background: var(--panelHeaderBg);
+		color: var(--panelHeaderFg);
 
 		> .title {
 			margin: 0;

src/client/style.scss

@@ -279,6 +279,8 @@ hr {
 	position: relative;
 	background: var(--panel);
 	border-radius: var(--radius);
+	box-shadow: 0 0 0 1px var(--panelBorder);
+	overflow: hidden;
 }
 
 ._widget ._list_ ._panel {
@@ -324,8 +326,10 @@ hr {
 		margin: 0;
 		padding: 22px 32px;
 		font-size: 1.1em;
-		border-bottom: solid 1px var(--divider);
+		border-bottom: solid 1px var(--panelHeaderDivider);
 		font-weight: bold;
+		background: var(--panelHeaderBg);
+		color: var(--panelHeaderFg);
 
 		@media (max-width: 500px) {
 			padding: 16px;
@@ -381,7 +385,7 @@ hr {
 }
 
 ._fullinfo {
-	padding: 32px;
+	padding: 64px 32px;
 	text-align: center;
 
 	> img {

src/client/themes/_dark.json5

@@ -16,8 +16,13 @@
 		fg: '#c7d1d8',
 		fgHighlighted: ':lighten<3<@fg',
 		html: '@bg',
+		divider: 'rgba(255, 255, 255, 0.1)',
 		indicator: '@accent',
 		panel: '#000',
+		panelHeaderBg: ':lighten<3<@panel',
+		panelHeaderFg: '@fg',
+		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
+		panelBorder: 'rgba(0, 0, 0, 0)',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: 'rgba(20, 20, 20, 0.75)',
 		navBg: '@panel',
@@ -31,7 +36,6 @@
 		mentionMe: '@mention',
 		renote: '#229e82',
 		modalBg: 'rgba(0, 0, 0, 0.5)',
-		divider: 'rgba(255, 255, 255, 0.1)',
 		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
 		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
 		dateLabelFg: '@fg',

src/client/themes/_light.json5

@@ -16,8 +16,13 @@
 		fg: '#5c6a73',
 		fgHighlighted: ':darken<3<@fg',
 		html: '@bg',
+		divider: 'rgba(0, 0, 0, 0.1)',
 		indicator: '@accent',
 		panel: '#fff',
+		panelHeaderBg: ':lighten<3<@panel',
+		panelHeaderFg: '@fg',
+		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
+		panelBorder: 'rgba(0, 0, 0, 0)',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: 'rgba(255, 255, 255, 0.75)',
 		navBg: '@panel',
@@ -31,7 +36,6 @@
 		mentionMe: '@mention',
 		renote: '#229e82',
 		modalBg: 'rgba(0, 0, 0, 0.3)',
-		divider: 'rgba(0, 0, 0, 0.1)',
 		scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
 		scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
 		dateLabelFg: '@fg',

src/client/themes/black.json5

@@ -9,6 +9,9 @@
 
 	props: {
 		divider: '#2d2d2d',
+		panelHeaderBg: '@panel',
+		panelHeaderDivider: '@divider',
+		panelBorder: '@divider',
 		messageBg: '#1d1d1d',
 	},
 }

src/client/themes/white.json5

@@ -8,6 +8,7 @@
 	base: 'light',
 
 	props: {
+		panelHeaderDivider: '@divider',
 		messageBg: '#dedede',
 	},
 }