Updated CSS to reflect Isabella's CSS

frc5024 · Mar 6, 2024 · 93932f0 · 93932f0
1 parent cbb0679
commit 93932f0
Showing 1 changed file with 19 additions and 106 deletions.
diff --git a/css/5K24SPARK.css b/css/5K24SPARK.css
@@ -67,7 +67,7 @@ h2 {
   overflow-x: auto;
   margin: 0 auto; 
   border-radius: 8px;
-  box-shadow: 4px 6px rgb(225, 240, 12);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adjusted box-shadow for consistency */
 }
 
 /* Adjust the table width as needed */
@@ -83,10 +83,9 @@ th, td {
   text-align: center;
   padding: 8px;
   border-bottom: 1px solid #ddd;
-  color: #fff;
+  color: #fff; /* Adjusted for contrast and readability */
 }
 
-
 tr {
   height: 50px;
 }
@@ -103,7 +102,7 @@ table:empty {
 select,
 input[type="text"] {
   height: 40px;
-  width: 3em;
+  width: 30%; /* Adjusted for full-width on mobile devices */
   font-size: 1.2em;
   padding: 6px;
   border: 1px solid #ccc;
@@ -117,10 +116,6 @@ input[type="text"] {
   color: var(--accent-color);
 }
 
-select {
-  width: 10em;
-}
-
 html {
   overflow-x: hidden;
 }
@@ -142,7 +137,8 @@ html {
 }
 
 input[type="checkbox"] {
-  font-size: 20px;
+  transform: scale(1.5); /* Making checkboxes larger for better accessibility */
+  margin: 10px;
   width: 2em;
   height: 2em;
 }
@@ -154,124 +150,41 @@ input[type="checkbox"] {
 
 /* Button container */
 .button-container {
-  overflow-x: hidden;
   display: flex;
   justify-content: center;
   margin: 20px auto;
   gap: 10px;
-  width: calc(100% - 0px);
+  width: 100%;
   max-width: 500px;
 }
 
 button {
   flex: 1;
-  background-color:#2a57ea;
+  background-color: #2a57ea;
   color: white;
-  padding: 2px 15px;
+  padding: 10px 15px; /* Adjusted padding for better touch interaction */
   margin: 0.2em;
-  font-size: 2em;
-  border: 4px double;
-  border-color: #e6de40 !important;
-  color: white;
+  font-size: 1em; /* Adjusted font size for consistency */
+  border: none; /* Removed double border for a cleaner look */
+  border-radius: 4px; /* Added rounded corners for modern aesthetic */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Consistent shadow effect */
   cursor: pointer;
 }
 
 button:hover {
-  background-color: #91b9f4;
-}
-
-#nextButton {
-  background-color: #3aab6b;
-  color: var(--text-color);
-  padding: 12px 20px;
-  margin: 0.2em;
-  border: none;
-  color: white;
-  border-radius: 4px;
-  cursor: pointer;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-#nextButton:hover {
-  background-color: #45ce81;
-}
-
-#prevButton {
-  background-color: #e74c3c;
-  color: var(--text-color);
-  padding: 12px 20px;
-  margin: 0.2em;
-  border: none;
-  border-radius: 4px;
-  color: white;
-  cursor: pointer;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-#prevButton:hover {
-  background-color: #e37669; 
-}
-
-#clearButton {
-  background-color: var(--accent-color); 
-  color: var(--text-color);
-  padding: 12px 20px;
-  margin: 0.2em;
-  border: none;
-  font-size: 1em;
-  color: white;
-  border-radius: 4px;
-  cursor: pointer;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-#clearButton:hover {
-  background-color: #efc074;
+  background-color: var(--accent-color); /* Unified hover effect using accent color */
 }
 
 @media screen and (max-width: 768px) {
-  body {
-    font-size: 1em;
-  }
-
-  select{
-    width: 100%;
-  }
-
-  /* Prevent horizontal scrolling on the table container */
-  .table-container {
-    overflow-x: hidden; 
-    max-width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  /* Adjust the width of the Select2 dropdown list */
-  .select2-container--default .select2-dropdown {
-    font-size: 1.2em;
-  }
-
-  /* Adjust the minimum width of the Select2 dropdown and create space for the arrow */
-  .select2-container--default .select2-selection--single {
-    min-width: unset;
-    max-width: calc(100%);
-  }
-
-  /* Adjust the font size of the text inside the Select2 dropdown */
-  .select2-container--default .select2-selection--single .select2-selection__rendered {
-    font-size: 1.2em;
-  }
-
-
-  #nextButton, #prevButton, #clearButton {
-    flex: 0 0 45%;
+  .button-container button {
+    padding: 12px 20px; /* Increased padding for larger touch targets on mobile */
   }
 
-  button {
-    padding: 10px 15px;
+  .table-container, .button-container, .select2-container, select {
+    width: 100% !important; /* Ensuring full-width elements for better mobile responsiveness */
   }
 
-  input[type="text"] {
-    width: 2em;
+ input[type="text"]{
+    width: 30% !important;
   }
 }