refactor(frontend): prefix css variables (UI) (#14739)

* refactor(frontend): prefix css variables

* `MI_UI` -> `MI`

* fix

* `stickyBottom`

* stickyTop

11 files changed, 27 insertions, 27 deletions

diff --git a/packages/frontend-embed/src/components/EmMediaBanner.vue b/packages/frontend-embed/src/components/EmMediaBanner.vue
index 3e3dfd95b2..cf4a4c53b5 100644
--- a/packages/frontend-embed/src/components/EmMediaBanner.vue
+++ b/packages/frontend-embed/src/components/EmMediaBanner.vue
@@ -31,10 +31,10 @@ defineProps<{
 	display: flex;
 	align-items: center;
 	width: 100%;
-	padding: var(--margin);
+	padding: var(--MI-margin);
 	margin-top: 4px;
 	border: 1px solid var(--MI_THEME-inputBorder);
-	border-radius: var(--radius);
+	border-radius: var(--MI-radius);
 	background-color: var(--MI_THEME-panel);
 	transition: background-color .1s, border-color .1s;
 
diff --git a/packages/frontend-embed/src/components/EmMediaVideo.vue b/packages/frontend-embed/src/components/EmMediaVideo.vue
index 5ca0b92d43..e2779bdee4 100644
--- a/packages/frontend-embed/src/components/EmMediaVideo.vue
+++ b/packages/frontend-embed/src/components/EmMediaVideo.vue
@@ -29,9 +29,9 @@ defineProps<{
 	width: 100%;
 	height: auto;
 	aspect-ratio: 16 / 9;
-	padding: var(--margin);
+	padding: var(--MI-margin);
 	border: 1px solid var(--MI_THEME-divider);
-	border-radius: var(--radius);
+	border-radius: var(--MI-radius);
 	background-color: #000;
 
 	&:hover {
diff --git a/packages/frontend-embed/src/components/EmNote.vue b/packages/frontend-embed/src/components/EmNote.vue
index 7eeeda1797..d4b4827c90 100644
--- a/packages/frontend-embed/src/components/EmNote.vue
+++ b/packages/frontend-embed/src/components/EmNote.vue
@@ -190,7 +190,7 @@ const isDeleted = ref(false);
 			width: calc(100% - 8px);
 			height: calc(100% - 8px);
 			border: dashed 2px var(--MI_THEME-focus);
-			border-radius: var(--radius);
+			border-radius: var(--MI-radius);
 			box-sizing: border-box;
 		}
 	}
@@ -356,7 +356,7 @@ const isDeleted = ref(false);
 	width: 58px;
 	height: 58px;
 	position: sticky !important;
-	top: calc(22px + var(--stickyTop, 0px));
+	top: calc(22px + var(--MI-stickyTop, 0px));
 	left: 0;
 }
 
@@ -377,7 +377,7 @@ const isDeleted = ref(false);
 	width: 100%;
 	margin-top: 14px;
 	position: sticky;
-	bottom: calc(var(--stickyBottom, 0px) + 14px);
+	bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
 }
 
 .showLessLabel {
@@ -430,7 +430,7 @@ const isDeleted = ref(false);
 
 .translation {
 	border: solid 0.5px var(--MI_THEME-divider);
-	border-radius: var(--radius);
+	border-radius: var(--MI-radius);
 	padding: 12px;
 	margin-top: 8px;
 }
@@ -550,7 +550,7 @@ const isDeleted = ref(false);
 		margin: 0 10px 0 0;
 		width: 46px;
 		height: 46px;
-		top: calc(14px + var(--stickyTop, 0px));
+		top: calc(14px + var(--MI-stickyTop, 0px));
 	}
 }
 
diff --git a/packages/frontend-embed/src/components/EmNoteDetailed.vue b/packages/frontend-embed/src/components/EmNoteDetailed.vue
index ccd723d7d2..b39b47c065 100644
--- a/packages/frontend-embed/src/components/EmNoteDetailed.vue
+++ b/packages/frontend-embed/src/components/EmNoteDetailed.vue
@@ -364,7 +364,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
 	width: 100%;
 	margin-top: 14px;
 	position: sticky;
-	bottom: calc(var(--stickyBottom, 0px) + 14px);
+	bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
 }
 
 .showLessLabel {
diff --git a/packages/frontend-embed/src/components/EmNoteSimple.vue b/packages/frontend-embed/src/components/EmNoteSimple.vue
index 704a876e59..b9aaf3fa4a 100644
--- a/packages/frontend-embed/src/components/EmNoteSimple.vue
+++ b/packages/frontend-embed/src/components/EmNoteSimple.vue
@@ -53,7 +53,7 @@ const showContent = ref(false);
 	height: 34px;
 	border-radius: 8px;
 	position: sticky !important;
-	top: calc(16px + var(--stickyTop, 0px));
+	top: calc(16px + var(--MI-stickyTop, 0px));
 	left: 0;
 }
 
diff --git a/packages/frontend-embed/src/components/EmSubNoteContent.vue b/packages/frontend-embed/src/components/EmSubNoteContent.vue
index dcaa1ec914..61815ddfd8 100644
--- a/packages/frontend-embed/src/components/EmSubNoteContent.vue
+++ b/packages/frontend-embed/src/components/EmSubNoteContent.vue
@@ -100,7 +100,7 @@ const collapsed = ref(isLong);
 	width: 100%;
 	margin-top: 14px;
 	position: sticky;
-	bottom: calc(var(--stickyBottom, 0px) + 14px);
+	bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
 }
 
 .showLessLabel {
diff --git a/packages/frontend-embed/src/pages/clip.vue b/packages/frontend-embed/src/pages/clip.vue
index d805cb3e4f..f4d4e8cf6f 100644
--- a/packages/frontend-embed/src/pages/clip.vue
+++ b/packages/frontend-embed/src/pages/clip.vue
@@ -100,7 +100,7 @@ function top(ev: MouseEvent) {
 	display: flex;
 	min-width: 0;
 	align-items: center;
-	gap: var(--margin);
+	gap: var(--MI-margin);
 	overflow: hidden;
 
 	.headerClipIconRoot {
diff --git a/packages/frontend-embed/src/pages/tag.vue b/packages/frontend-embed/src/pages/tag.vue
index 78049e4041..4b00ae7c2d 100644
--- a/packages/frontend-embed/src/pages/tag.vue
+++ b/packages/frontend-embed/src/pages/tag.vue
@@ -83,7 +83,7 @@ function top(ev: MouseEvent) {
 	display: flex;
 	min-width: 0;
 	align-items: center;
-	gap: var(--margin);
+	gap: var(--MI-margin);
 	overflow: hidden;
 
 	.headerClipIconRoot {
diff --git a/packages/frontend-embed/src/pages/user-timeline.vue b/packages/frontend-embed/src/pages/user-timeline.vue
index 85e6f52d50..348b1a7622 100644
--- a/packages/frontend-embed/src/pages/user-timeline.vue
+++ b/packages/frontend-embed/src/pages/user-timeline.vue
@@ -117,7 +117,7 @@ function top(ev: MouseEvent) {
 	display: flex;
 	min-width: 0;
 	align-items: center;
-	gap: var(--margin);
+	gap: var(--MI-margin);
 	overflow: hidden;
 
 	.avatarLink {
diff --git a/packages/frontend-embed/src/style.scss b/packages/frontend-embed/src/style.scss
index 1569de01f8..2e43cfd20a 100644
--- a/packages/frontend-embed/src/style.scss
+++ b/packages/frontend-embed/src/style.scss
@@ -7,11 +7,11 @@
  */
 
 :root {
-	--radius: 12px;
-	--marginFull: 14px;
-	--marginHalf: 10px;
+	--MI-radius: 12px;
+	--MI-marginFull: 14px;
+	--MI-marginHalf: 10px;
 
-	--margin: var(--marginFull);
+	--MI-margin: var(--MI-marginFull);
 }
 
 html {
@@ -218,12 +218,12 @@ rt {
 
 ._panel {
 	background: var(--MI_THEME-panel);
-	border-radius: var(--radius);
+	border-radius: var(--MI-radius);
 	overflow: clip;
 }
 
 ._margin {
-	margin: var(--margin) 0;
+	margin: var(--MI-margin) 0;
 }
 
 ._gaps_m {
@@ -241,7 +241,7 @@ rt {
 ._gaps {
 	display: flex;
 	flex-direction: column;
-	gap: var(--margin);
+	gap: var(--MI-margin);
 }
 
 ._buttons {
@@ -264,7 +264,7 @@ rt {
 	box-sizing: border-box;
 	text-align: center;
 	border: solid 0.5px var(--MI_THEME-divider);
-	border-radius: var(--radius);
+	border-radius: var(--MI-radius);
 
 	&:active {
 		border-color: var(--MI_THEME-accent);
@@ -273,14 +273,14 @@ rt {
 
 ._popup {
 	background: var(--MI_THEME-popup);
-	border-radius: var(--radius);
+	border-radius: var(--MI-radius);
 	contain: content;
 }
 
 ._acrylic {
 	background: var(--MI_THEME-acrylicPanel);
-	-webkit-backdrop-filter: var(--blur, blur(15px));
-	backdrop-filter: var(--blur, blur(15px));
+	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
+	backdrop-filter: var(--MI-blur, blur(15px));
 }
 
 ._fullinfo {
diff --git a/packages/frontend-embed/src/ui.vue b/packages/frontend-embed/src/ui.vue
index 2ed2f58376..4ba5968a91 100644
--- a/packages/frontend-embed/src/ui.vue
+++ b/packages/frontend-embed/src/ui.vue
@@ -95,7 +95,7 @@ onUnmounted(() => {
 	height: auto;
 
 	&.rounded {
-		border-radius: var(--radius);
+		border-radius: var(--MI-radius);
 	}
 
 	&.noBorder {