diff --git a/grid-study/index.html b/grid-study/index.html
index a0dbaec..c3f267f 100644
--- a/grid-study/index.html
+++ b/grid-study/index.html
@@ -10,12 +10,23 @@

-
Coldin04 WorkSpace
+
Coldin04 的工作台
-
-
+
+
@@ -73,7 +84,7 @@
-
+
@@ -81,7 +92,7 @@
-
+
diff --git a/grid-study/styles.css b/grid-study/styles.css
index 80e0a9c..855d8dc 100644
--- a/grid-study/styles.css
+++ b/grid-study/styles.css
@@ -55,20 +55,27 @@ body {
}
.top-bar__button {
- padding: 8px 16px;
- border: 1px solid rgba(0, 0, 0, 0.1);
- border-radius: 8px;
- background-color: rgba(255, 255, 255, 0.5);
- backdrop-filter: blur(5px);
+ width: 40px;
+ height: 40px;
+ padding: 0;
+ border: none;
+ border-radius: 50%;
+ background-color: transparent;
cursor: pointer;
font-size: 14px;
transition: var(--transition);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #333;
+}
+
+.top-bar__button span {
+ display: none;
}
.top-bar__button:hover {
- background-color: rgba(255, 255, 255, 0.8);
- transform: translateY(-2px);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ background-color: rgba(0, 0, 0, 0.05);
}
.top-bar__button:active {
@@ -386,11 +393,44 @@ body {
}
.task-item input[type="checkbox"] {
- width: 18px;
- height: 18px;
+ appearance: none;
+ -webkit-appearance: none;
+ width: 20px;
+ height: 20px;
+ border: 2px solid #c7c7cc;
+ border-radius: 50%; /* 圆形复选框 */
margin: 0;
- accent-color: #0071e3;
+ outline: none;
cursor: pointer;
+ position: relative;
+ transition: all 0.2s ease;
+ flex-shrink: 0;
+}
+
+.task-item input[type="checkbox"]:checked {
+ background-color: #0071e3;
+ border-color: #0071e3;
+}
+
+.task-item input[type="checkbox"]:checked::after {
+ content: '';
+ position: absolute;
+ top: 45%;
+ left: 50%;
+ width: 9px;
+ height: 5px;
+ border-left: 2px solid white;
+ border-bottom: 2px solid white;
+ transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.task-item input[type="checkbox"]:hover {
+ border-color: #0071e3;
+ background-color: rgba(0, 113, 227, 0.05);
+}
+
+.task-item input[type="checkbox"]:checked:hover {
+ background-color: #0077ed;
}
.task-content {