refactor(frontend): scss deprecated 警告に対応 (#14513)

packages/frontend/src/components/MkModalWindow.vue

@@ -94,12 +94,12 @@ defineExpose({
 
 	--root-margin: 24px;
 
+	--headerHeight: 46px;
+	--headerHeightNarrow: 42px;
+
 	@media (max-width: 500px) {
 		--root-margin: 16px;
 	}
-
-	--headerHeight: 46px;
-	--headerHeightNarrow: 42px;
 }
 
 .header {

packages/frontend/src/components/MkSuperMenu.vue

@@ -100,14 +100,14 @@ defineProps<{
 
 	&.grid {
 		> .group {
+			margin-left: 0;
+			margin-right: 0;
+
 			& + .group {
 				padding-top: 0;
 				border-top: none;
 			}
 
-			margin-left: 0;
-			margin-right: 0;
-
 			> .title {
 				font-size: 1em;
 				opacity: 0.7;

packages/frontend/src/components/MkWindow.vue

@@ -508,10 +508,6 @@ defineExpose({
 .header {
 	--height: 39px;
 
-	&.mini {
-		--height: 32px;
-	}
-
 	display: flex;
 	position: relative;
 	z-index: 1;
@@ -524,6 +520,10 @@ defineExpose({
 	//border-bottom: solid 1px var(--divider);
 	font-size: 90%;
 	font-weight: bold;
+
+	&.mini {
+		--height: 32px;
+	}
 }
 
 .headerButton {

packages/frontend/src/pages/admin/overview.users.vue

@@ -47,14 +47,14 @@ useInterval(fetch, 1000 * 60, {
 .root {
 	&:global {
 		> .users {
-			.chart-move {
-				transition: transform 1s ease;
-			}
-
 			display: grid;
 			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 			grid-gap: 12px;
 
+			.chart-move {
+				transition: transform 1s ease;
+			}
+
 			> .user:hover {
 				text-decoration: none;
 			}

packages/frontend/src/pages/page.vue

@@ -433,13 +433,12 @@ definePageMetadata(() => ({
 		.pageBannerTitleUser {
 			--height: 32px;
 			flex-shrink: 0;
+			line-height: var(--height);
 
 			.avatar {
 				height: var(--height);
 				width: var(--height);
 			}
-
-			line-height: var(--height);
 		}
 
 		.pageBannerTitleSubActions {

packages/frontend/src/style.scss

@@ -17,10 +17,6 @@
 	--minBottomSpacingMobile: calc(72px + max(12px, env(safe-area-inset-bottom, 0px)));
 	--minBottomSpacing: var(--minBottomSpacingMobile);
 
-	@media (max-width: 500px) {
-		--margin: var(--marginHalf);
-	}
-
 	//--ad: rgb(255 169 0 / 10%);
 	--eventFollow: #36aed2;
 	--eventRenote: #36d298;
@@ -29,6 +25,10 @@
 	--eventReaction: #e99a0b;
 	--eventAchievement: #cb9a11;
 	--eventOther: #88a6b7;
+
+	@media (max-width: 500px) {
+		--margin: var(--marginHalf);
+	}
 }
 
 ::selection {

packages/frontend/src/ui/_common_/statusbars.vue

@@ -40,6 +40,14 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
 	--nameMargin: 10px;
 	font-size: 0.85em;
 
+	display: flex;
+	vertical-align: bottom;
+	width: 100%;
+	line-height: var(--height);
+	height: var(--height);
+	overflow: clip;
+	contain: strict;
+
 	&.verySmall {
 		--nameMargin: 7px;
 		--height: 16px;
@@ -64,14 +72,6 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
 		font-size: 0.9em;
 	}
 
-	display: flex;
-	vertical-align: bottom;
-	width: 100%;
-	line-height: var(--height);
-	height: var(--height);
-	overflow: clip;
-	contain: strict;
-
 	&.black {
 		background: #000;
 		color: #fff;

packages/frontend/src/ui/deck/column.vue

@@ -324,11 +324,11 @@ function onDrop(ev) {
 
 		> .body {
 			background: transparent !important;
+			scrollbar-color: var(--scrollbarHandle) transparent;
 
 			&::-webkit-scrollbar-track {
 				background: transparent;
 			}
-			scrollbar-color: var(--scrollbarHandle) transparent;
 		}
 	}
 
@@ -338,11 +338,11 @@ function onDrop(ev) {
 		> .body {
 			background: var(--bg) !important;
 			overflow-y: scroll !important;
+			scrollbar-color: var(--scrollbarHandle) transparent;
 
 			&::-webkit-scrollbar-track {
 				background: inherit;
 			}
-			scrollbar-color: var(--scrollbarHandle) transparent;
 		}
 	}
 }
@@ -423,10 +423,10 @@ function onDrop(ev) {
 	box-sizing: border-box;
 	container-type: size;
 	background-color: var(--bg);
+	scrollbar-color: var(--scrollbarHandle) var(--panel);
 
 	&::-webkit-scrollbar-track {
 		background: var(--panel);
 	}
-	scrollbar-color: var(--scrollbarHandle) var(--panel);
 }
 </style>