保存进度！

code/web/car_dealer/css/todo-list/to-list.css

@@ -2,47 +2,55 @@
  * @Author: Kane
  * @Date: 2022-10-21 16:39:27
  * @LastEditors: Kane
- * @LastEditTime: 2022-10-21 18:56:19
+ * @LastEditTime: 2022-10-22 01:23:49
  * @FilePath: \car_dealer\css\todo-list\to-list.css
  * @Description: 用于待办事项页面的css！
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
  */
 
- html {
+html {
     --border-color: #cfcfcf;
+    --hr-color: #efefef;
     --backupground-color: #f7f7f7;
     --btn-color-blue: #307dbe;
     --btn-color-yellow: #f7b24d;
     --btn-color-green: #5bad60;
     --btn-color-red: #e56651;
     --btn-font-color: #fff;
- }
 
- .border {
+    --light-shadow: #cfcfcf;
+    --dark-shadow: #afafaf;
+}
+
+.border {
     border: 2px solid var(--border-color);
     border-radius: 5px;
     width: 30rem;
     padding: 1em;
- }
+    box-shadow: 0px 0px 10px var(--light-shadow);
+}
 
- .border > .add_todo {
+.border:hover {
+    box-shadow: 0px 0px 10px var(--dark-shadow);
+    transition: box-shadow 1;
+}
+
+.border > .add_todo {
     display: flex;
     align-items: center;
     justify-content: center;
- }
-
- .border > .add_todo > button {
+}
 
+.border > .add_todo > button {
     margin-left: 5px;
     flex-basis: 4rem;
     flex-grow: 0;
     font-size: 1rem;
     height: 2.3rem;
-    
- }
+}
 
- .border > .add_todo > input {
+.border > .add_todo > input {
     flex-shrink: auto;
     flex-grow: 1;
     font-size: 1rem;
@@ -50,59 +58,87 @@
     padding: 0 5px;
     margin: 0px;
     outline-color: var(--border-color);
- }
+}
 
- hr {
+hr {
     border: none;
-    margin-top: 15px;
+    margin-top: 1rem;
     background-color: var(--border-color);
     height: 2px;
- }
+}
 
- .border > .todo_list {
-    margin-top: 15px;
- }
+.border > .todo_list {
+    margin-top: 1rem;
+    height: 12.2rem;
+    overflow-y: auto;
+}
 
- .border > .todo_list > *+* {
-    margin-top:5px;
- }
+.todo_list::-webkit-scrollbar {
+    width: 10px;
+    height: 100px;
+}
 
- .border > .todo_list div {
+.todo_list::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #535353;
+}
+
+.todo_list::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 5px var(--backupground-color);
+    border-radius: 10px;
+    background: #ededed;
+}
+
+.border > .todo_list > * + * {
+    margin-top: 5px;
+}
+
+.border > .todo_list div {
     display: flex;
     align-items: center;
     justify-content: center;
- }
+}
 
- .border > .todo_list div > input[type=checkbox] {
+.border > .todo_list div > input[type="checkbox"] {
     flex-grow: 0;
- }
+}
 
- .border > .todo_list div *+* {
+.border > .todo_list div * + * {
     margin-left: 5px;
- }
+}
 
- .border > .todo_list span {
+.border > .todo_list span {
     flex-grow: 1;
     border-bottom: 1px solid var(--border-color);
     height: 1.25rem;
     vertical-align: center;
- }
+}
 
- .border > .todo_list input {
+.border > .todo_list input {
     flex-grow: 1;
     font-size: 1rem;
     line-height: 2rem;
     padding: 0 5px;
     margin: 0px;
     outline-color: var(--border-color);
- }
+}
 
- .border > .todo_list button {
+.border > .todo_list button {
     flex-grow: 0;
     font-size: 1rem;
     width: 4rem;
- }
+}
 
- .border > .todo_list input {
+.border > .todo_list input {
     outline: 1px solid var(--border-color);
- }
+}
+
+.border > .tools {
+    margin-top: 1rem;
+}
+
+.border > .tools > p {
+    text-align: right;
+    margin: 0px 1rem;
+}