diff --git a/styles.css b/styles.css index 74522d4..7c867af 100644 --- 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 {