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

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>