Tweak UI

src/client/components/form/base.vue

@@ -20,12 +20,16 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .rbusrurv {
+	// 他のCSSからも参照されるので消さないように
+	--formXPadding: 32px;
+	--formYPadding: 32px;
+
 	line-height: 1.4em;
 	background: var(--bg);
-	padding: 32px;
+	padding: var(--formYPadding) var(--formXPadding);
 
 	&:not(.wide).max-width_400px {
-		padding: 32px 0;
+		--formXPadding: 0px;
 
 		> ::v-deep(*) {
 			._formPanel {

src/client/components/form/form.scss

@@ -10,9 +10,17 @@
 }
 
 ._formLabel {
+	position: sticky;
+	top: var(--stickyTop, 0px);
+	background: var(--bg);
+	z-index: 2;
 	font-size: 80%;
-	padding: 0 16px 8px 16px;
-	opacity: 0.8;
+	margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1);
+	padding: 8px calc(16px + var(--formXPadding)) 8px calc(16px + var(--formXPadding));
+	color: var(--fgTransparentWeak);
+	background: var(--X17);
+	-webkit-backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
 
 	&:empty {
 		display: none;