c

GovA11y · Sep 9, 2023 · 5e67bdf · 5e67bdf
1 parent 2f0a60b
commit 5e67bdf
Showing 1 changed file with 26 additions and 63 deletions.
diff --git a/assets/css/tech.css b/assets/css/tech.css
@@ -1,3 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
 #techCheckForm {
     margin-bottom: 20px;
     max-width: 500px;
@@ -8,7 +12,6 @@
 #techCheckForm label {
     display: block;
     margin-bottom: 5px;
-
 }
 
 #techCheckForm input {
@@ -22,25 +25,30 @@
 #techCheckForm button {
     padding: 10px 20px;
     border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
 
+#techCheckForm button:hover {
+    background-color: #2980b9;
 }
 
 #results, #urls {
     padding: 20px;
     margin-bottom: 20px;
     max-width: 800px;
     margin: 20px auto;
-    width: 100%
+    width: 100%;
 }
 
 #results div, #urls div {
     margin-bottom: 10px;
 }
 
-.result-card {
+.result-card, .tech-card {
     border: 1px solid #ccc;
     padding: 20px;
     margin-bottom: 20px;
+    transition: all 0.3s ease;
 }
 
 .result-card h3 {
@@ -67,26 +75,10 @@
   display: none; /* Hide initially */
 }
 
-.loader {
-  border: 16px solid #f3f3f3;
-  border-radius: 50%;
-  border-top: 16px solid #3498db;
-  width: 120px;
-  height: 120px;
-  animation: spin 2s linear infinite;
-  margin: 0 auto;
-}
-
 .category {
   margin-bottom: 20px;
 }
 
-.tech-card {
-  border: 1px solid #ccc;
-  padding: 10px;
-  margin: 10px 0;
-}
-
 .tech-header {
   display: flex;
   align-items: center;
@@ -103,28 +95,6 @@
   text-decoration: none;
 }
 
-.chart-container {
-  position: relative;
-  height: 20px;
-  background-color: #E1BC29;
-  border-radius: 5px;
-}
-
-.confidence-chart {
-  height: 100%;
-  background-color: #3BB273;
-  text-align: center;
-  line-height: 20px;
-  color: #fff;
-  border-radius: 5px;
-}
-
-.confidence-label {
-  text-align: center;
-  margin-top: 5px;
-  font-size: 0.8rem;
-}
-
 .more-info-btn {
   display: block;
   margin: 20px auto;
@@ -134,30 +104,23 @@
   text-align: center;
   text-decoration: none;
   border-radius: 5px;
-  width: 100px;
+  width: 30%;
+  transition: background-color 0.3s ease;
 }
 
-
-
-.confidence-chart {
-    border-radius: 50%;
-    background: conic-gradient(red, yellow, green);
-    width: 50px;
-    height: 50px;
-    line-height: 50px;
-    text-align: center;
-    font-weight: bold;
-    position: relative;
+.more-info-btn:hover {
+  background-color: #2980b9;
 }
-.confidence-chart::before {
-    content: '';
-    position: absolute;
-    width: 2px;
-    height: 25px;
-    background: black;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) rotate(calc(var(--percentage) * 1deg));
-    transform-origin: bottom center;
+
+:focus {
+  outline: 2px solid #3498db;
 }
 
+@media (max-width: 600px) {
+  #techCheckForm, #results, #urls {
+    width: 90%;
+  }
+  .more-info-btn {
+    width: 50%;
+  }
+}