Make readjustment to modal UI

VHadyak · May 7, 2024 · 2ebce06 · 2ebce06
1 parent 84b5574
commit 2ebce06
Showing 1 changed file with 26 additions and 21 deletions.
diff --git a/styles.css b/styles.css
@@ -81,8 +81,8 @@ svg {
 }
 
 dialog {
-  border: 1px solid rgb(121, 135, 227);
-  background-color: rgb(0, 0, 0);
+  border: 2px solid rgb(15, 102, 157);
+  background-color: rgb(192, 237, 255);
   border-radius: 10px;
   padding: 30px;
   position: fixed;
@@ -97,11 +97,11 @@ form {
 }
 
 input {
-  background-color: black;
+  background-color: rgb(192, 237, 255);
   border: none;
-  border-bottom: 1px solid rgb(121, 135, 227);
+  border-bottom: 1px solid rgb(0, 0, 0);
   outline: none;
-  color: white;
+  color: rgba(0, 0, 0, 0.881);
   padding: 0;
   padding-bottom: 2px;
   font-size: 1rem;
@@ -120,12 +120,12 @@ select {
 }
 
 #genre {
-  background-color: black;
+  background-color: rgb(192, 237, 255);
   border: none;
-  border-bottom: 1px solid rgb(121, 135, 227);
+  border-bottom: 1px solid rgb(0, 0, 0);
   outline: none;
   cursor: pointer;
-  color: white;
+  color: rgb(0, 0, 0);
 }
 
 label[for="isRead"] {
@@ -142,19 +142,24 @@ input[type="checkbox"] {
 .custom-checkbox {
   width: 17px;
   height: 17px;
-  border: 1px solid rgb(121, 135, 227);
-  background-color: rgb(18, 17, 17);
+  border: 1px solid rgb(0, 0, 0);
+  background-color: rgb(192, 237, 255);
   position: relative;
   border-radius: 3px;
 }
 
+.custom-checkbox:hover {
+  background-color: rgb(157, 219, 244);
+}
+
 .checkmark::before {
   content: '\2713'; 
-  color: white; 
-  font-size: 14px; 
+  color: rgb(0, 0, 0); 
+  font-size: 16px; 
   position: absolute;
+  font-weight: bold;
   top: 50%;
-  left: 50%;
+  left: 45%;
   transform: translate(-50%, -50%);
   display: none;
 }
@@ -165,7 +170,7 @@ input[type="checkbox"]:checked + .custom-checkbox .checkmark::before {
 
 label {
   margin-bottom: -12px;
-  color: rgba(255, 255, 255, 0.721);
+  color: rgb(13, 74, 107);
   font-size: 1rem;
 }
 
@@ -178,9 +183,9 @@ label {
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid rgba(121, 135, 227, 0.702);
-  background-color: black;
-  color: rgba(254, 254, 254, 0.72);
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  background-color: rgb(192, 237, 255);
+  color: rgba(0, 0, 0, 0.69);
   padding-bottom: 3px;
   border-radius: 5px;
   margin-bottom: 15px;
@@ -193,14 +198,14 @@ label {
 }
 
 #cancel:hover {
-  background-color: rgb(53, 18, 86);
+  background-color: rgb(157, 219, 244);
 }
 
 #submit-btn {
   margin-top: 15px;
-  border: 1px solid rgb(121, 135, 227);
+  border: 1px solid rgb(0, 0, 0);
   background-color: transparent;
-  color: white;
+  color: rgb(0, 0, 0);
   font-size: 1rem;
   padding-top: 8px;
   padding-bottom: 8px;
@@ -209,7 +214,7 @@ label {
 }
 
 #submit-btn:hover {
-  background-color: rgb(53, 18, 86);
+  background-color: rgb(157, 219, 244);
 }
 
 .header > button {