Input.css

Todo/src/Components/Input.css

@@ -47,7 +47,9 @@ li {
   margin-bottom: 0.5rem;
   box-shadow: 0 1px rgb(217, 217, 217);
 }
-
+ul li:last-child {
+  box-shadow: none;
+}
 .todo {
   display: flex;
   justify-content: space-between;
@@ -59,14 +61,15 @@ li {
   align-items: center;
   gap: 12px;
   flex: 1;
-  min-width: 0; /* Added to prevent overflow */
+  min-width: 0;
 }
 
-/* Added to prevent checkbox shrinking */
 .check input[type="checkbox"] {
   flex-shrink: 0;
 }
-
+.check input {
+  border: 2px solid #888;
+}
 .task {
   flex: 1;
   cursor: text;
@@ -76,6 +79,8 @@ li {
   word-break: break-word;
   margin-left: 1rem;
   transition: all 0.3s ease;
+  font-size: 1.5rem;
+  color: #434343;
 }
 
 .task[contenteditable="true"] {
@@ -83,16 +88,9 @@ li {
   border-bottom: 1px dashed #aaa;
   padding: 4px;
   display: inline-block;
-  min-width: 0; /* Changed from 100% to prevent expansion */
-  width: auto; /* Changed from 0 to allow natural width */
-  flex-grow: 1; /* Added to take available space */
-}
-
-.task[contenteditable="true"]:focus {
-  user-select: text;
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
+  min-width: 0;
+  width: auto;
+  flex-grow: 1;
 }
 
 input[type="checkbox"] {
@@ -101,7 +99,6 @@ input[type="checkbox"] {
   appearance: none;
   width: 20px;
   height: 20px;
-  border: 1px solid #ddd;
   border-radius: 4px;
   outline: none;
   cursor: pointer;
@@ -121,10 +118,10 @@ input[type="checkbox"]:checked {
 input[type="checkbox"]:checked::after {
   content: "";
   position: absolute;
-  left: 6px;
+  left: 3px;
   top: 2px;
-  width: 6px;
-  height: 12px;
+  width: 4px;
+  height: 8px;
   border: solid #333;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
@@ -140,13 +137,13 @@ input[type="checkbox"]:checked::after {
   transition: color 0.2s ease;
 }
 
-.delete:hover {
-  color: #ff4444;
-}
-
 .delete svg {
-  height: 20px;
-  width: 20px;
+  height: 33px;
+  width: 28px;
+  color: rgba(204, 204, 204, 255);
+}
+.delete svg:hover {
+  color: #ff4444;
 }
 
 .merge {
@@ -157,11 +154,11 @@ input[type="checkbox"]:checked::after {
 
 .input {
   flex: 1;
-  padding: 10px 12px;
   border: 1px solid #ddd;
   border-radius: 6px;
-  font-size: 1rem;
+  font-size: 1.2rem;
   transition: border 0.2s ease;
+  color: #a0a0a0;
 }
 
 .input:focus {
@@ -181,7 +178,7 @@ input[type="checkbox"]:checked::after {
 }
 .todo.completed .task {
   text-decoration: line-through;
-  color: #888;
+  color: #434343;
   opacity: 0.8;
 }
 .error-fallback {
@@ -195,7 +192,7 @@ input[type="checkbox"]:checked::after {
     padding: 15px;
   }
   .task {
-    padding: 4px 0 10px;
+    padding: 3px 0 10px;
   }
   .merge {
     flex-direction: column;
@@ -208,8 +205,8 @@ input[type="checkbox"]:checked::after {
   }
 
   input[type="checkbox"] {
-    width: 20px;
-    height: 20px;
+    width: 10px;
+    height: 0px;
   }
 }
 
@@ -224,7 +221,12 @@ button {
   text-align: center;
   padding: 2px;
 }
-
+.task {
+  font-size: 1.2rem;
+}
+input[type="checkbox"]:checked::after {
+  top: 1px;
+}
 ul {
   word-break: break-word;
   max-width: 340px;
@@ -247,10 +249,16 @@ span[contenteditable] {
 
 @media (min-width: 768px) {
   .check input {
-    height: 1.5rem;
-    width: 1.5rem;
+    height: 1rem;
+    width: 1rem;
   }
   .todo {
     padding: 0 1.3rem 0;
   }
+  input[type="checkbox"]:checked::after {
+    left: 3px;
+    top: 1px;
+    width: 4px;
+    height: 8px;
+  }
 }