全局滚动条美化

src/style.css

@@ -56,11 +56,6 @@ button:focus-visible {
   padding: 2em;
 }
 
-#app {
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
 
 @media (prefers-color-scheme: light) {
   :root {
@@ -74,3 +69,22 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+/* 全局滚动条美化 */
+::-webkit-scrollbar {
+  width: 4px; /* 垂直滚动条的宽度 */
+  height: 4px; /* 水平滚动条的高度 */
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1; /* 滚动条轨道背景色 */
+}
+
+::-webkit-scrollbar-thumb {
+  background: #bbb; /* 滚动条颜色 */
+  border-radius: 6px; /* 滚动条圆角 */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #aaa; /* 滚动条hover颜色 */
+}