From f68f05eb81297b703279393b5987befaa11a6487 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 2 Nov 2024 20:46:51 +0900
Subject: [PATCH] =?UTF-8?q?enh(frontend):=20=E6=96=9C=E7=B7=9A=E3=83=87?=
 =?UTF-8?q?=E3=82=B6=E3=82=A4=E3=83=B3=E3=81=AE=E8=AA=BF=E6=95=B4,=20Mk.*C?=
 =?UTF-8?q?ardMini=E3=81=AE=E6=94=B9=E4=BF=AE=20(taiyme#289)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 idea/MkDisableSection.vue                     | 11 +++++---
 .../MkCustomEmojiDetailedDialog.vue           | 27 ++++++++++++++-----
 .../src/components/MkEmbedCodeGenDialog.vue   | 11 +++++---
 .../src/components/MkFlashPreview.vue         | 10 ++++---
 packages/frontend/src/components/MkFolder.vue |  9 +++++--
 .../frontend/src/components/MkPostForm.vue    | 21 ++++++++++-----
 packages/frontend/src/style.scss              | 17 +++++++-----
 7 files changed, 75 insertions(+), 31 deletions(-)

diff --git a/idea/MkDisableSection.vue b/idea/MkDisableSection.vue
index 360705071b..b9e964c400 100644
--- a/idea/MkDisableSection.vue
+++ b/idea/MkDisableSection.vue
@@ -34,8 +34,13 @@ defineProps<{
 	width: 100%;
 	height: 100%;
 	cursor: not-allowed;
-	--color: color(from var(--MI_THEME-error) srgb r g b / 0.25);
-	background-size: auto auto;
-	background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, var(--color) 4px, var(--color) 14px);
+	background-image: repeating-linear-gradient(
+		135deg,
+		transparent,
+		transparent 10px,
+		var(--c) 6px,
+		var(--c) 16px
+	);
+	--c: color(from var(--MI_THEME-error) srgb r g b / 0.25);
 }
 </style>
diff --git a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
index ecbee864dc..57dd5257df 100644
--- a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
+++ b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
@@ -83,12 +83,27 @@ function cancel() {
 
 <style lang="scss" module>
 .emojiImgWrapper {
-  max-width: 100%;
-  height: 40cqh;
-  background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--MI_THEME-X5) 8px, var(--MI_THEME-X5) 14px);
-  border-radius: var(--MI-radius);
-  margin: auto;
-  overflow-y: hidden;
+	max-width: 100%;
+	height: 40cqh;
+	border-radius: var(--MI-radius);
+	margin: auto;
+	overflow-y: hidden;
+	background-image: repeating-linear-gradient(
+		135deg,
+		transparent,
+		transparent 10px,
+		var(--c) 6px,
+		var(--c) 16px
+	);
+
+	&,
+	html[data-color-scheme=light] & {
+		--c: rgb(0 0 0 / 0.02);
+	}
+
+	html[data-color-scheme=dark] & {
+		--c: rgb(255 255 255 / 0.02);
+	}
 }
 
 .aliases {
diff --git a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
index 6e9eb75920..a0d669edbc 100644
--- a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
+++ b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
@@ -306,9 +306,14 @@ onUnmounted(() => {
 
 .embedCodeGenPreviewRoot {
 	position: relative;
-	background-color: var(--MI_THEME-bg);
-	background-size: auto auto;
-	background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--MI_THEME-panel) 6px, var(--MI_THEME-panel) 12px);
+	background-color: var(--bg);
+	background-image: repeating-linear-gradient(
+		135deg,
+		transparent,
+		transparent 10px,
+		var(--panel) 6px,
+		var(--panel) 16px
+	);
 	cursor: not-allowed;
 }
 
diff --git a/packages/frontend/src/components/MkFlashPreview.vue b/packages/frontend/src/components/MkFlashPreview.vue
index b7278ac742..b5e02192c2 100644
--- a/packages/frontend/src/components/MkFlashPreview.vue
+++ b/packages/frontend/src/components/MkFlashPreview.vue
@@ -91,9 +91,13 @@ const props = defineProps<{
 	}
 
 	&:global(.gray) {
-		--c: var(--MI_THEME-bg);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
-		background-size: 16px 16px;
+		background-image: repeating-linear-gradient(
+			135deg,
+			transparent,
+			transparent 10px,
+			var(--MI_THEME-bg) 6px,
+			var(--MI_THEME-bg) 16px
+		);
 	}
 
 	@media (max-width: 700px) {
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index 7bdc06a8b4..9e26f84a48 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -238,8 +238,13 @@ onMounted(() => {
 	background: var(--MI_THEME-acrylicBg);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
-	background-size: auto auto;
-	background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--MI_THEME-panel) 5px, var(--MI_THEME-panel) 10px);
+	background-image: repeating-linear-gradient(
+		135deg,
+		transparent,
+		transparent 10px,
+		var(--MI_THEME-panel) 6px,
+		var(--MI_THEME-panel) 16px
+	);
 	border-radius: 0 0 6px 6px;
 }
 </style>
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index f2fe048449..947848b7f4 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -1197,15 +1197,22 @@ defineExpose({
 	min-height: 75px;
 	max-height: 150px;
 	overflow: auto;
-	background-size: auto auto;
-}
+	background-image: repeating-linear-gradient(
+		135deg,
+		transparent,
+		transparent 10px,
+		var(--c) 6px,
+		var(--c) 16px
+	);
 
-html[data-color-scheme=dark] .preview {
-	background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, #0004 5px, #0004 10px);
-}
+	&,
+	html[data-color-scheme=light] & {
+		--c: rgb(0 0 0 / 0.02);
+	}
 
-html[data-color-scheme=light] .preview {
-	background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, #00000005 5px, #00000005 10px);
+	html[data-color-scheme=dark] & {
+		--c: rgb(255 255 255 / 0.02);
+	}
 }
 
 .targetNote {
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 4204c5af59..77ff0741b2 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -444,14 +444,17 @@ rt {
 	box-shadow: 0 6px 16px #0007, 0 0 1px 1px #693410, inset 0 0 2px 1px #ce8a5c;
 	border-radius: 10px;
 
-	--MI_THEME-bg: #F1E8DC;
-	--MI_THEME-fg: #693410;
-}
+	&,
+	html[data-color-scheme=light] & {
+		--bg: #F1E8DC;
+		--fg: #693410;
+	}
 
-html[data-color-scheme=dark] ._woodenFrame {
-	--MI_THEME-bg: #1d0c02;
-	--MI_THEME-fg: #F1E8DC;
-	--MI_THEME-panel: #192320;
+	html[data-color-scheme=dark] & {
+		--bg: #1d0c02;
+		--fg: #F1E8DC;
+		--panel: #192320;
+	}
 }
 
 ._woodenFrameH {