🎨

packages/frontend/src/components/grid/MkGrid.vue

@@ -38,7 +38,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:setting="rowSetting"
 			:bus="bus"
 			:using="row.using"
-			:class="[lastLine === row.index ? 'last_row' : '']"
 			@operation:beginEdit="onCellEditBegin"
 			@operation:endEdit="onCellEditEnd"
 			@change:value="onChangeCellValue"
@@ -1301,8 +1300,6 @@ onMounted(() => {
 </style>
 
 <style lang="scss">
-$borderSetting: solid 0.5px var(--MI_THEME-divider);
-
 // 配下コンポーネントを含めて一括してコントロールするため、scopedもmoduleも使用できない
 .mk_grid_border {
 	--rootBorderSetting: none;
@@ -1310,66 +1307,39 @@ $borderSetting: solid 0.5px var(--MI_THEME-divider);
 
 	border-spacing: 0;
 
-	&.mk_grid_root_border {
-		--rootBorderSetting: #{$borderSetting};
-	}
-
 	&.mk_grid_root_rounded {
 		--borderRadius: var(--MI-radius);
 	}
 
 	.mk_grid_thead {
+		position: sticky;
+    z-index: 1;
+    left: 0;
+		top: 0;
+		-webkit-backdrop-filter: var(--MI-blur, blur(8px));
+		backdrop-filter: var(--MI-blur, blur(20px));
+		background: color(from var(--MI_THEME-bg) srgb r g b / 0.5);
+
 		.mk_grid_tr {
 			.mk_grid_th {
-				border-left: $borderSetting;
-				border-top: var(--rootBorderSetting);
 
-				&:first-child {
-					// 左上セル
-					border-left: var(--rootBorderSetting);
-					border-top-left-radius: var(--borderRadius);
-				}
-
-				&:last-child {
-					// 右上セル
-					border-top-right-radius: var(--borderRadius);
-					border-right: var(--rootBorderSetting);
-				}
 			}
 		}
 	}
 
 	.mk_grid_tbody {
 		.mk_grid_tr {
-			.mk_grid_td, .mk_grid_th {
+			&:nth-child(odd) {
-				border-left: $borderSetting;
+				background: var(--MI_THEME-panel);
-				border-top: $borderSetting;
+			}
-
+
-				&:first-child {
+			&:nth-child(even) {
-					// 左端の列
+				background: var(--MI_THEME-bg);
-					border-left: var(--rootBorderSetting);
-				}
-
-				&:last-child {
-					// 一番右端の列
-					border-right: var(--rootBorderSetting);
-				}
 			}
-		}
 
-		.last_row {
 			.mk_grid_td, .mk_grid_th {
-				// 一番下の行
+				&:hover {
-				border-bottom: var(--rootBorderSetting);
+					box-shadow: 0 0 0 1px var(--MI_THEME-divider) inset;
-
-				&:first-child {
-					// 左下セル
-					border-bottom-left-radius: var(--borderRadius);
-				}
-
-				&:last-child {
-					// 右下セル
-					border-bottom-right-radius: var(--borderRadius);
 				}
 			}
 		}