Fix style of messaging form, use css module (#9602)

* Fix style of messaging form, use css module

* clean up

packages/frontend/src/pages/messaging/messaging-room.form.vue

@@ -1,10 +1,12 @@
 <template>
 <div
-	class="pemppnzi"
+	:class="$style['root']"
 	@dragover.stop="onDragover"
 	@drop.stop="onDrop"
 >
 	<textarea
+		:class="$style['textarea']"
+		class="_acrylic"
 		ref="textEl"
 		v-model="text"
 		:placeholder="i18n.ts.inputMessageHere"
@@ -12,17 +14,17 @@
 		@compositionupdate="onCompositionUpdate"
 		@paste="onPaste"
 	></textarea>
-	<footer>
+	<footer :class="$style['footer']">
-		<div v-if="file" class="file" @click="file = null">{{ file.name }}</div>
+		<div v-if="file" :class="$style['file']" @click="file = null">{{ file.name }}</div>
-		<div class="buttons">
+		<div :class="$style['buttons']">
-			<button class="_button" @click="chooseFile"><i class="ti ti-photo-plus"></i></button>
+			<button class="_button" :class="$style['button']" @click="chooseFile"><i class="ti ti-photo-plus"></i></button>
-			<button class="_button" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
+			<button class="_button" :class="$style['button']" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
-			<button class="send _button" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send">
+			<button class="_button" :class="[$style['button'], $style['send']]" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send">
 				<template v-if="!sending"><i class="ti ti-send"></i></template><template v-if="sending"><MkLoading :em="true"/></template>
 			</button>
 		</div>
 	</footer>
-	<input ref="fileEl" type="file" @change="onChangeFile"/>
+	<input :class="$style['file-input']" ref="fileEl" type="file" @change="onChangeFile"/>
 </div>
 </template>
 
@@ -236,131 +238,129 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.pemppnzi {
+.root {
 	position: relative;
+}
 
-	> textarea {
+.textarea {
-		cursor: auto;
+	cursor: auto;
+	display: block;
+	width: 100%;
+	min-width: 100%;
+	max-width: 100%;
+	min-height: 80px;
+	margin: 0;
+	padding: 16px 16px 0 16px;
+	resize: none;
+	font-size: 1em;
+	font-family: inherit;
+	outline: none;
+	border: none;
+	border-radius: 0;
+	box-shadow: none;
+	box-sizing: border-box;
+	color: var(--fg);
+}
+
+.footer {
+	position: sticky;
+	bottom: 0;
+	background: var(--panel);
+}
+
+.file {
+	padding: 8px;
+	color: var(--fg);
+	background: transparent;
+	cursor: pointer;
+}
+/*
+.files {
+	display: block;
+	margin: 0;
+	padding: 0 8px;
+	list-style: none;
+
+	&:after {
+		content: '';
 		display: block;
-		width: 100%;
+		clear: both;
-		min-width: 100%;
-		max-width: 100%;
-		min-height: 80px;
-		margin: 0;
-		padding: 16px 16px 0 16px;
-		resize: none;
-		font-size: 1em;
-		font-family: inherit;
-		outline: none;
-		border: none;
-		border-radius: 0;
-		box-shadow: none;
-		box-sizing: border-box;
-		color: var(--fg);
-		background: rgba(12, 18, 16, 0.85);
-		backdrop-filter: var(--blur, blur(15px));
 	}
 
-	footer {
+	> li {
-		position: sticky;
-		bottom: 0;
-		background: var(--panel);
-
-		> .file {
-			padding: 8px;
-			color: var(--fg);
-			background: transparent;
-			cursor: pointer;
-		}
-	}
-
-	.files {
 		display: block;
-		margin: 0;
+		float: left;
-		padding: 0 8px;
+		margin: 4px;
-		list-style: none;
+		padding: 0;
-
+		width: 64px;
-		&:after {
+		height: 64px;
-			content: '';
+		background-color: #eee;
-			display: block;
+		background-repeat: no-repeat;
-			clear: both;
+		background-position: center center;
-		}
+		background-size: cover;
-
+		cursor: move;
-		> li {
-			display: block;
-			float: left;
-			margin: 4px;
-			padding: 0;
-			width: 64px;
-			height: 64px;
-			background-color: #eee;
-			background-repeat: no-repeat;
-			background-position: center center;
-			background-size: cover;
-			cursor: move;
-
-			&:hover {
-				> .remove {
-					display: block;
-				}
-			}
 
+		&:hover {
 			> .remove {
-				display: none;
+				display: block;
-				position: absolute;
-				right: -6px;
-				top: -6px;
-				margin: 0;
-				padding: 0;
-				background: transparent;
-				outline: none;
-				border: none;
-				border-radius: 0;
-				box-shadow: none;
-				cursor: pointer;
 			}
 		}
 	}
-
+}
-	.buttons {
+
-		display: flex;
+.file-remove {
-
+	display: none;
-		._button {
+	position: absolute;
-			margin: 0;
+	right: -6px;
-			padding: 16px;
+	top: -6px;
-			font-size: 1em;
+	margin: 0;
-			font-weight: normal;
+	padding: 0;
-			text-decoration: none;
+	background: transparent;
-			transition: color 0.1s ease;
+	outline: none;
-
+	border: none;
-			&:hover {
+	border-radius: 0;
-				color: var(--accent);
+	box-shadow: none;
-			}
+	cursor: pointer;
-
+}
-			&:active {
+*/
-				color: var(--accentDarken);
+
-				transition: color 0s ease;
+.buttons {
-			}
+	display: flex;
-		}
+}
-
+
-		> .send {
+.button {
-			margin-left: auto;
+	margin: 0;
-			color: var(--accent);
+	padding: 16px;
-
+	font-size: 1em;
-			&:hover {
+	font-weight: normal;
-				color: var(--accentLighten);
+	text-decoration: none;
-			}
+	transition: color 0.1s ease;
-
+
-			&:active {
+	&:hover {
-				color: var(--accentDarken);
+		color: var(--accent);
-				transition: color 0s ease;
+	}
-			}
+
-		}
+	&:active {
-	}
+		color: var(--accentDarken);
-
+		transition: color 0s ease;
-	input[type=file] {
+	}
-		display: none;
+}
-	}
+.send {
+	margin-left: auto;
+	color: var(--accent);
+
+	&:hover {
+		color: var(--accentLighten);
+	}
+
+	&:active {
+		color: var(--accentDarken);
+		transition: color 0s ease;
+	}
+}
+
+.file-input {
+	display: none;
 }
 </style>