Merge pull request #368 from Jasleen1210/hoverstyles

Hover styles on main form improved
sk66641 · Jul 1, 2024 · 8c06e74 · 8c06e74
2 parents 2f48da3 + 09ebb42
commit 8c06e74
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/css/style.css b/css/style.css
@@ -118,7 +118,7 @@ body {
   text-shadow: 2px 2px white;
 }
 
-#youtubeUrlInput:hover,
+/* #youtubeUrlInput:hover,
 #unit:hover,
 #time:hover,
 #color:hover,
@@ -127,10 +127,17 @@ body {
 #sound:hover,
 #music-url:hover,
 #music-file:hover {
-  background-color: lightyellow;
-  color: black;
+ 
+  /* color: black; 
+  
+} */
+.form input:hover{
+  background-color: #4a1234;
+}
+.light-mode .form input:hover{
+  background-color: #d6cccc;
+  border: 1.5px solid #f09819;
 }
-
 #unit:hover,
 #view:hover,
 #sound:hover,
@@ -277,7 +284,7 @@ input {
 
 input:focus {
   outline: none;
-  width: 4rem;
+  /* width: 4rem; */
   border: none;
 }
 

diff --git a/index.html b/index.html
@@ -102,6 +102,7 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
             Light Simulator
           </span>
         </h1>
+        <div class="form">
 
         <div>
           <!-- <form action="#"> -->
@@ -177,7 +178,7 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
           <!-- <button id="stop_resume">Stop</button> -->
 
         </div>
-
+      </div>
         <div id="error" aria-live="polite"></div>
         <div style="display: flex; justify-content: center; align-items: center;">
           <div id="randomize" aria-label="Randomize">