From a88e486468b53145d7745411db02fe507ddffb78 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 11 Apr 2021 21:09:35 +0900
Subject: Tweak UI

---
 src/client/components/form/base.vue  |  8 ++++++--
 src/client/components/form/form.scss | 12 ++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

(limited to 'src/client/components/form')

diff --git a/src/client/components/form/base.vue b/src/client/components/form/base.vue
index 249b49c675..b2e429d6bf 100644
--- a/src/client/components/form/base.vue
+++ b/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 {
diff --git a/src/client/components/form/form.scss b/src/client/components/form/form.scss
index c7f4373544..d9486430be 100644
--- a/src/client/components/form/form.scss
+++ b/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;
-- 
cgit v1.2.3-freya