From 4ee27a335674c1d57651fe0e5b1667507e1d9b4f Mon Sep 17 00:00:00 2001 From: Prisha Mehta Date: Wed, 23 Oct 2024 18:36:32 +0530 Subject: [PATCH 1/2] Changed UI for icons --- styles/styles.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/styles/styles.css b/styles/styles.css index e8b0725..caf343f 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -146,8 +146,14 @@ input[type='search']::placeholder { height: 52px; border-radius: 4px; margin-left: 15px; + background-color: var(--primary-color); + color: white; + transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition */ } + + + #search-btn:focus, input[type='search']:focus { box-shadow: 0 0 3px 0 #1183d6; From 02eb7ad6dea7766b80fe2ab625c70a486371ccf0 Mon Sep 17 00:00:00 2001 From: Prisha Mehta Date: Wed, 23 Oct 2024 18:37:41 +0530 Subject: [PATCH 2/2] Made fav,home,search and toggle icons dynamic on hover --- styles/styles.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/styles/styles.css b/styles/styles.css index caf343f..98eda4c 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -151,7 +151,14 @@ input[type='search']::placeholder { transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition */ } - +#search-btn:hover, +#toggle:hover, +#fav-btn:hover, +#home-btn:hover { + background-color: var(--accent-color); + transform: scale(1.1); /* Slightly enlarge on hover */ + color: #fff; +} #search-btn:focus,