diff --git a/style.css b/style.css index 5a624c39..a9121794 100644 --- a/style.css +++ b/style.css @@ -72,9 +72,9 @@ button { cursor: pointer; transition: background 0.6s ease-in-out; } -#btn:hover{ - background-color: rgb(1, 20, 27); - box-shadow: 0 0 10px lightblue, 0 0 20px lightblue; +#btn:hover { + background-color: rgb(1, 20, 27); + box-shadow: 0 0 10px lightblue, 0 0 20px lightblue; } /**** MAIN PAGE ****/ @@ -683,11 +683,81 @@ body.dark-mode { border-color: #ccc; } -.dark-mode .review-item { - border-color: black; /* Dark border in dark mode */ +/* Dark Mode Styles for Reviews Section */ +.dark-mode .reviews-section { + background-color: #121212; /* Dark background */ + color: white; /* White text */ } -.cab-booking-section input, .cab-booking-section select { +.dark-mode .review { + background-color: #1e1e1e; /* Dark background for review cards */ + color: white; /* White text for review content */ + border: 1px solid #333; /* Darker border */ +} + +.dark-mode .review h4 { + color: #ffa500; /* Optional: Highlight the reviewer's name */ +} + +.dark-mode .review p { + color: white; /* White text for review paragraphs */ +} + +/* Adjusting rating stars color in dark mode */ +.dark-mode .rating { + color: #ffcc00; /* Bright yellow stars for dark mode */ +} + +/* Dark Mode Styles for Review Form */ +.review-form { + background-color: #121212; /* Dark background for the review form */ + color: white; /* White text color */ + padding: 20px; /* Padding for inner spacing */ + border-radius: 5px; /* Rounded corners */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Optional: shadow for depth */ +} + +.review-form h1 { + margin-bottom: 10px; /* Space below heading */ +} + +.review-form label { + margin-top: 10px; /* Space above labels */ + display: block; /* Makes the label block-level for better spacing */ +} + +.review-form input, +.review-form select, +.review-form textarea { + width: 100%; /* Full width */ + padding: 10px; /* Padding inside fields */ + background-color: #1e1e1e; /* Dark background for inputs */ + color: white; /* White text */ + border: 1px solid #333; /* Dark border */ + border-radius: 4px; /* Slightly rounded corners */ + margin-bottom: 10px; /* Space between fields */ +} + +.review-form input::placeholder, +.review-form textarea::placeholder { + color: #aaa; /* Lighter placeholder text */ +} + +.review-form button { + background-color: #333; /* Dark button background */ + color: white; /* White button text */ + border: none; /* No border */ + padding: 10px 15px; /* Padding inside button */ + border-radius: 4px; /* Rounded corners */ + cursor: pointer; /* Pointer on hover */ +} + +.review-form button:hover { + background-color: #444; /* Slightly lighter on hover */ +} + +.cab-booking-section input, +.cab-booking-section select { width: 100%; font-weight: 600; padding: 20px;