update css

gdxxp · Dec 21, 2023 · b22f0cf · b22f0cf
1 parent 92506e5
commit b22f0cf
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/src/components/SavefileList.vue b/src/components/SavefileList.vue
@@ -228,16 +228,16 @@ onBeforeUnmount(() => {
 .middle {
     margin-top: 2%;
     margin-left: 3%;
-    width: 80%;
+    width: 80vw;
     height: 90%;
-    .form-container {  
+    .form-container {
     height: 100%;
+    width: 100%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     background-color: #ebe2cd;
-    border-radius: 10px;
-    overflow-y: auto;
+    overflow-y: scroll;
     overflow-x: hidden;
         .form-item {
         margin: 5px;

diff --git a/src/styles.css b/src/styles.css
@@ -1,4 +1,27 @@
 * {
   margin: 0;
   box-sizing: border-box;
+}
+
+/* Defines the width and height of the scrollbar, corresponding to the size of the vertical and horizontal scrollbars */
+::-webkit-scrollbar {
+  width: 6px; /* Width of the vertical scrollbar */
+  height: 8px;/* Height of the horizontal scrollbar */
+}
+
+/* The track of the scrollbar */
+::-webkit-scrollbar-track {
+  background: #F5ECD7;
+  border-radius: 2px;
+}
+
+/* The handle of the scrollbar */
+::-webkit-scrollbar-thumb {
+  background: #c2baa6;
+  border-radius: 4px;
+}
+
+/* Hover effect for the scrollbar handle */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
 }