Merge branch 'develop'

9 files changed, 88 insertions, 18 deletions

diff --git a/src/client/components/form/base.vue b/src/client/components/form/base.vue
index 249b49c675..84438a5b32 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 {
-	line-height: 1.4em;
+	// 他のCSSからも参照されるので消さないように
+	--formXPadding: 32px;
+	--formYPadding: 32px;
+
+	line-height: 1.3em;
 	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..8c01fad727 100644
--- a/src/client/components/form/form.scss
+++ b/src/client/components/form/form.scss
@@ -1,32 +1,48 @@
 ._formPanel {
 	background: var(--panel);
 	border-radius: var(--radius);
+	transition: background 0.2s ease;
 
 	&._formClickable {
 		&:hover {
 			//background: var(--panelHighlight);
 		}
+
+		&:active {
+			background: var(--panelHighlight);
+			transition: background 0s;
+		}
 	}
 }
 
-._formLabel {
+._formLabel,
+._formCaption {
 	font-size: 80%;
-	padding: 0 16px 8px 16px;
-	opacity: 0.8;
+	color: var(--fgTransparentWeak);
 
 	&:empty {
 		display: none;
 	}
 }
 
+._formLabel {
+	position: sticky;
+	top: var(--stickyTop, 0px);
+	z-index: 2;
+	margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1);
+	padding: 8px calc(16px + var(--formXPadding)) 8px calc(16px + var(--formXPadding));
+	background: var(--X17);
+	-webkit-backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
+}
+
+._themeChanging_ ._formLabel {
+	transition: none !important;
+	background: transparent;
+}
+
 ._formCaption {
-	font-size: 80%;
 	padding: 8px 16px 0 16px;
-	opacity: 0.8;
-
-	&:empty {
-		display: none;
-	}
 }
 
 ._formItem {
diff --git a/src/client/components/form/info.vue b/src/client/components/form/info.vue
new file mode 100644
index 0000000000..a9224c7e65
--- /dev/null
+++ b/src/client/components/form/info.vue
@@ -0,0 +1,49 @@
+<template>
+<div class="fzenkabp _formItem">
+	<div class="_formPanel" :class="{ warn }">
+		<i v-if="warn"><Fa :icon="faExclamationTriangle"/></i>
+		<i v-else><Fa :icon="faInfoCircle"/></i>
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faInfoCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+
+export default defineComponent({
+	props: {
+		warn: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+	},
+	data() {
+		return {
+			faInfoCircle, faExclamationTriangle
+		};
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.fzenkabp {
+	> div {
+		padding: 14px 16px;
+		font-size: 90%;
+		background: var(--infoBg);
+		color: var(--infoFg);
+
+		&.warn {
+			background: var(--infoWarnBg);
+			color: var(--infoWarnFg);
+		}
+
+		> i {
+			margin-right: 4px;
+		}
+	}
+}
+</style>
diff --git a/src/client/components/form/input.vue b/src/client/components/form/input.vue
index f0aa6b0534..c0fa3e716e 100644
--- a/src/client/components/form/input.vue
+++ b/src/client/components/form/input.vue
@@ -215,7 +215,7 @@ export default defineComponent({
 	}
 
 	> .input {
-		$height: 52px;
+		$height: 48px;
 		position: relative;
 
 		> input {
diff --git a/src/client/components/form/link.vue b/src/client/components/form/link.vue
index 2efc6b58c9..af36bcf22c 100644
--- a/src/client/components/form/link.vue
+++ b/src/client/components/form/link.vue
@@ -66,6 +66,7 @@ export default defineComponent({
 
 		&.active {
 			color: var(--accent);
+			background: var(--panelHighlight);
 		}
 
 		> .icon {
diff --git a/src/client/components/form/radios.vue b/src/client/components/form/radios.vue
index 4561df32e1..3daa7e5bbd 100644
--- a/src/client/components/form/radios.vue
+++ b/src/client/components/form/radios.vue
@@ -69,8 +69,8 @@ export default defineComponent({
 			display: inline-block;
 			vertical-align: bottom;
 			position: relative;
-			width: 20px;
-			height: 20px;
+			width: 16px;
+			height: 16px;
 			margin-right: 8px;
 			background: none;
 			border: 2px solid var(--inputBorder);
diff --git a/src/client/components/form/range.vue b/src/client/components/form/range.vue
index 3452184c55..65d665c70a 100644
--- a/src/client/components/form/range.vue
+++ b/src/client/components/form/range.vue
@@ -69,7 +69,7 @@ export default defineComponent({
 	position: relative;
 
 	> .main {
-		padding: 24px 16px;
+		padding: 22px 16px;
 
 		> input {
 			display: block;
diff --git a/src/client/components/form/select.vue b/src/client/components/form/select.vue
index b865372f56..01f28587dc 100644
--- a/src/client/components/form/select.vue
+++ b/src/client/components/form/select.vue
@@ -97,7 +97,7 @@ export default defineComponent({
 			font: inherit;
 			font-weight: normal;
 			font-size: 1em;
-			height: 52px;
+			height: 48px;
 			background: none;
 			border: none;
 			border-radius: 0;
diff --git a/src/client/components/form/switch.vue b/src/client/components/form/switch.vue
index a2941c5996..e7ef714c49 100644
--- a/src/client/components/form/switch.vue
+++ b/src/client/components/form/switch.vue
@@ -57,7 +57,7 @@ export default defineComponent({
 	> .main {
 		position: relative;
 		display: flex;
-		padding: 16px;
+		padding: 14px 16px;
 		cursor: pointer;
 
 		> * {