diff --git a/assets/css/tech.css b/assets/css/tech.css index 3972b18..ad6393a 100644 --- 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,7 +25,11 @@ #techCheckForm button { padding: 10px 20px; border-radius: 5px; + transition: background-color 0.3s ease; +} +#techCheckForm button:hover { + background-color: #2980b9; } #results, #urls { @@ -30,17 +37,18 @@ 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%; + } +}