diff --git a/css/style.css b/css/style.css index 1f132e0..3495776 100644 --- a/css/style.css +++ b/css/style.css @@ -645,6 +645,105 @@ nav { .prediction-desc { font-size: 18px; } +/* ... existing styles ... */ + +/* New styles for City Header and Bookmark Icon */ +.city-header { + display: flex; + align-items: center; + gap: 15px; /* Spacing between city name and icon */ +} + +#bookmark-icon { + font-size: 24px; + cursor: pointer; + color: var(--PRIMARY-TEXT-COLOR); /* Default color */ + transition: 0.2s all; +} + +#bookmark-icon.bookmarked { + color: gold; /* Filled star color */ + /* Use a filled star icon when bookmarked in JS: fa-solid fa-star */ +} + +/* Dark Mode adjustment for the bookmark icon */ +.dark-mode .location #bookmark-icon { + color: var(--LIGHT-BG-COLOR); +} + +.dark-mode .location #bookmark-icon.bookmarked { + color: gold; +} + +/* || BOOKMARKED CITIES SECTION */ +.bookmarked-cities { + margin-block: 20px; + padding: 10px; +} + +.bookmarked-cities h3 { + font-size: 26px; + white-space: nowrap; + text-align: center; + padding-bottom: 10px; + border-bottom: 1px solid rgba(10, 35, 72, 0.1); /* Subtle separator */ +} + +#bookmarked-cities-list { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 15px; +} + +.bookmarked-city-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 15px; + border-radius: var(--STANDERED-RADIUS); + background-color: var(--LIGHT-BG-COLOR); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + cursor: pointer; + transition: background-color 0.2s, transform 0.1s; +} + +.bookmarked-city-item:hover { + background-color: #e3e4e5; /* Slight hover effect */ + transform: translateY(-1px); +} + +.bookmarked-city-item .city-name { + font-weight: 600; + font-size: 16px; +} + +.remove-bookmark-icon { + color: #d43114; /* Red color for remove icon */ + font-size: 18px; + cursor: pointer; + padding: 5px; /* Increase click area */ +} + +/* Dark Mode styles for Bookmarked Cities */ +.dark-mode .bookmarked-cities h3 { + color: var(--PRIMARY-TEXT-COLOR); + border-bottom-color: rgba(255, 255, 255, 0.1); +} + +.dark-mode .bookmarked-city-item { + background-color: var(--SECONDARY-BG-COLOR); + color: var(--PRIMARY-TEXT-COLOR); + box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1); +} + +.dark-mode .bookmarked-city-item:hover { + background-color: #3f3f3f; +} + +.dark-mode .bookmarked-city-item .city-name { + color: var(--PRIMARY-TEXT-COLOR); +} /* || FOOTER */ /* footer { diff --git a/index.html b/index.html index e36a1dd..281a6e2 100644 --- a/index.html +++ b/index.html @@ -13,22 +13,13 @@ - -