fix(styles): resolve Sonar CSS cascade and transition findings

Author: ReenigneArcher

_sass/styles.scss

@@ -70,11 +70,11 @@ body {
 
 .card-body, .card-custom, .card-footer, .card-img-top, .cr-picker-button, .cr-picker-submenu {
     --bs-bg-opacity: 1;
-    background-color: var(--navbar-col) !important;
+    background-color: var(--navbar-col);
 }
 
 .modal-content {
-    background-color: var(--footer-col) !important;
+    background-color: var(--footer-col);
 }
 
 /* in line code */
@@ -101,11 +101,11 @@ code {
 /* shrink logo when navbar shrinks, instead of hiding it */
 .navbar-custom.top-nav-short .avatar-container {
   width: 3.125rem;
-  opacity: 1 !important;
-  visibility: visible !important;
-  transition: none !important;
-  -webkit-transition: none !important;
-  -moz-transition: none !important;
+  opacity: 1;
+  visibility: visible;
+  transition: none;
+  -webkit-transition: none;
+  -moz-transition: none;
 }
 
 /* hide search button */
@@ -118,7 +118,7 @@ code {
     overflow: hidden;
 }
 .hover-zoom img {
-    transition: all 1.5s ease;
+    transition: transform 1.5s ease;
 }
 .hover-zoom:hover img {
     transform: scale(1.1);
@@ -250,12 +250,35 @@ table tr:nth-child(2n) {
 }
 
 /* Gamepad tester */
+.gamepad-tester,
+.mouse-tester {
+  padding-bottom: 1.5rem;
+  padding-top: 1.5rem;
+}
+
+@media (min-width: 992px) {
+  .gamepad-tester,
+  .mouse-tester {
+    padding-bottom: 3rem;
+    padding-top: 3rem;
+  }
+}
+
 .gamepad-tester .container {
   max-width: 82rem;
 }
 
 .gamepad-tester-header {
   max-width: 52rem;
+  text-align: center;
+}
+
+.gamepad-tester-header > h2 {
+  margin-bottom: 0.5rem;
+}
+
+#gamepad-info {
+  margin-top: 0;
 }
 
 .gamepad-kicker,
@@ -282,6 +305,7 @@ table tr:nth-child(2n) {
   color: var(--text-col);
   display: flex;
   gap: 0.75rem;
+  margin-bottom: 0.5rem;
   margin-inline: auto;
   max-width: 46rem;
   padding: 0.8rem 1rem;
@@ -333,6 +357,10 @@ table tr:nth-child(2n) {
   font-size: 0.78rem;
 }
 
+.gamepad-selector-panel {
+  margin-top: 1.5rem;
+}
+
 .gamepad-selector-panel,
 .gamepad-panel {
   background-color: var(--navbar-col);
@@ -725,6 +753,7 @@ table tr:nth-child(2n) {
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem;
+  margin-bottom: 1rem;
   min-height: 1.5rem;
 }
 
@@ -780,6 +809,7 @@ table tr:nth-child(2n) {
 
 .gamepad-browser-warning {
   margin-inline: auto;
+  margin-top: 1rem;
   max-width: 46rem;
 }
 
@@ -870,16 +900,16 @@ table tr:nth-child(2n) {
 /* Fit the complete tester workspace into a typical desktop viewport. */
 @media (min-width: 1200px) {
   .gamepad-tester.has-gamepad {
-    padding-bottom: 1.25rem !important;
-    padding-top: 1.25rem !important;
+    padding-bottom: 1.25rem;
+    padding-top: 1.25rem;
   }
 
   .gamepad-tester.has-gamepad .gamepad-tester-header {
     align-items: center;
     display: flex;
     gap: 1rem;
     max-width: none;
-    text-align: left !important;
+    text-align: left;
   }
 
   .gamepad-tester.has-gamepad .gamepad-kicker,
@@ -891,26 +921,26 @@ table tr:nth-child(2n) {
   .gamepad-tester.has-gamepad .gamepad-tester-header > h2 {
     flex: 0 0 auto;
     font-size: 1.65rem;
-    margin-bottom: 0 !important;
+    margin-bottom: 0;
   }
 
   .gamepad-tester.has-gamepad .gamepad-status {
     flex: 1 1 auto;
-    margin: 0 !important;
+    margin: 0;
     max-width: none;
     padding: 0.65rem 0.85rem;
   }
 
   .gamepad-tester.has-gamepad .gamepad-browser-warning {
-    margin-top: 0.75rem !important;
+    margin-top: 0.75rem;
     max-width: none;
     padding: 0.55rem 0.75rem;
   }
 
   .gamepad-tester.has-gamepad .gamepad-selector-panel {
     display: grid;
     grid-template-columns: 13rem minmax(0, 1fr);
-    margin-top: 0.85rem !important;
+    margin-top: 0.85rem;
   }
 
   .gamepad-tester.has-gamepad .gamepad-selector-heading {
@@ -945,7 +975,7 @@ table tr:nth-child(2n) {
     display: grid;
     gap: 0.75rem;
     grid-template-columns: repeat(12, minmax(0, 1fr));
-    margin: 0.75rem 0 0 !important;
+    margin: 0.75rem 0 0;
   }
 
   .gamepad-tester.has-gamepad #gamepad-info > [class*="col-"] {
@@ -1079,7 +1109,7 @@ table tr:nth-child(2n) {
   }
 
   .gamepad-tester.has-gamepad .gamepad-capability {
-    margin-bottom: 0.5rem !important;
+    margin-bottom: 0.5rem;
   }
 
   .gamepad-tester.has-gamepad .gamepad-range-control {
@@ -1177,6 +1207,11 @@ table tr:nth-child(2n) {
 
 .mouse-tester-header {
   max-width: 52rem;
+  text-align: center;
+}
+
+.mouse-tester-header > h2 {
+  margin-bottom: 0.5rem;
 }
 
 .mouse-kicker,
@@ -1203,6 +1238,7 @@ table tr:nth-child(2n) {
   color: var(--text-col);
   display: flex;
   gap: 0.75rem;
+  margin-bottom: 0.5rem;
   margin-inline: auto;
   max-width: 46rem;
   padding: 0.8rem 1rem;
@@ -1267,6 +1303,7 @@ table tr:nth-child(2n) {
 
 .mouse-browser-warning {
   margin-inline: auto;
+  margin-top: 1rem;
   max-width: 46rem;
 }
 
@@ -1281,7 +1318,7 @@ table tr:nth-child(2n) {
 }
 
 .mouse-workspace {
-  margin-top: 1.5rem !important;
+  margin-top: 1.5rem;
 }
 
 .mouse-panel {
@@ -1648,16 +1685,16 @@ table tr:nth-child(2n) {
 
 @media (min-width: 1200px) {
   .mouse-tester {
-    padding-bottom: 1.25rem !important;
-    padding-top: 1.25rem !important;
+    padding-bottom: 1.25rem;
+    padding-top: 1.25rem;
   }
 
   .mouse-tester-header {
     align-items: center;
     display: flex;
     gap: 1rem;
     max-width: none;
-    text-align: left !important;
+    text-align: left;
   }
 
   .mouse-tester-header .mouse-kicker,
@@ -1669,22 +1706,22 @@ table tr:nth-child(2n) {
   .mouse-tester-header > h2 {
     flex: 0 0 auto;
     font-size: 1.65rem;
-    margin-bottom: 0 !important;
+    margin-bottom: 0;
   }
 
   .mouse-status {
     flex: 1 1 auto;
-    margin: 0 !important;
+    margin: 0;
     max-width: none;
     padding: 0.65rem 0.85rem;
   }
 
   .mouse-workspace {
-    margin-top: 0.75rem !important;
+    margin-top: 0.75rem;
   }
 
   .mouse-browser-warning {
-    margin-top: 0.75rem !important;
+    margin-top: 0.75rem;
     max-width: none;
     padding: 0.55rem 0.75rem;
   }
@@ -1825,15 +1862,16 @@ table tr:nth-child(2n) {
 
 .commit-bar-active {
   background-color: rgb(64, 196, 99);
+  opacity: var(--commit-bar-opacity, 1);
 }
 
 .commit-bar-active:hover {
-  opacity: 1 !important;
+  opacity: 1;
 }
 
-/* Override Bootstrap's text-muted to use theme colors */
+/* Supply Bootstrap's text-muted utility with the theme color. */
 .text-muted {
-  color: var(--footer-text-col) !important;
+  --bs-secondary-color: var(--footer-text-col);
 }
 
 /* Theme-aware outline button: dark border/text in light mode, light in dark mode */

assets/js/projects.js

@@ -112,7 +112,7 @@ function loadCommitActivity(repo, card_footer) {
                     height: ${Math.max(height, 10)}%;
                     border-radius: 1px;
                     transition: all 0.2s ease;
-                    opacity: ${week.total === 0 ? 1 : intensity};
+                    --commit-bar-opacity: ${intensity};
                 `
                 bar.title = `${week.total} commits this week`
                 activity_container.appendChild(bar)

gamepad-tester.html

@@ -17,16 +17,16 @@
 </script>
 
 <!-- Gamepad Tester section -->
-<section class="gamepad-tester py-4 py-lg-5" id="GamepadTester">
+<section class="gamepad-tester" id="GamepadTester">
     <div class="container">
-        <header class="gamepad-tester-header mx-auto text-center">
+        <header class="gamepad-tester-header mx-auto">
             <div class="gamepad-kicker mb-2">
                 <i class="fas fa-gamepad" aria-hidden="true"></i>
                 Browser controller diagnostics
             </div>
-            <h2 class="display-6 fw-bolder mb-2">Gamepad Tester</h2>
+            <h2 class="display-6 fw-bolder">Gamepad Tester</h2>
             <p class="lead text-muted mb-4">Check buttons, sticks, triggers, axes, and vibration in real time.</p>
-            <div id="gamepad-status" class="alert alert-warning gamepad-status mb-2">
+            <div id="gamepad-status" class="alert alert-warning gamepad-status">
                 <span class="gamepad-status-indicator" aria-hidden="true"></span>
                 <output id="gamepad-status-message" aria-live="polite">No gamepad detected. Connect a gamepad and press any button.</output>
             </div>
@@ -36,7 +36,7 @@ <h2 class="display-6 fw-bolder mb-2">Gamepad Tester</h2>
             </p>
         </header>
 
-        <div id="firefox-switch-warning" class="gamepad-browser-warning gamepad-inline-notice mt-3" aria-live="polite" hidden>
+        <div id="firefox-switch-warning" class="gamepad-browser-warning gamepad-inline-notice" aria-live="polite" hidden>
             <i class="fas fa-triangle-exclamation mt-1" aria-hidden="true"></i>
             <span>
                 Firefox versions before 155 can report incorrect buttons and axes for Nintendo Switch controllers.
@@ -45,7 +45,7 @@ <h2 class="display-6 fw-bolder mb-2">Gamepad Tester</h2>
             </span>
         </div>
 
-        <section class="gamepad-selector-panel mt-4" id="gamepad-selector-container" style="display: none;" aria-labelledby="gamepad-selector-heading">
+        <section class="gamepad-selector-panel" id="gamepad-selector-container" style="display: none;" aria-labelledby="gamepad-selector-heading">
             <div class="gamepad-selector-heading">
                 <div>
                     <span class="gamepad-panel-eyebrow">Devices</span>
@@ -56,7 +56,7 @@ <h3 class="h5 mb-0" id="gamepad-selector-heading">Connected controllers</h3>
             <div class="gamepad-selector-grid" id="gamepad-selector"></div>
         </section>
 
-        <div class="row g-4 mt-0" id="gamepad-info" style="display: none;">
+        <div class="row g-4" id="gamepad-info" style="display: none;">
             <div class="col-12">
                 <section class="gamepad-panel gamepad-visual-panel" aria-labelledby="controller-visual-heading">
                     <div class="gamepad-panel-header">
@@ -148,7 +148,7 @@ <h3 class="h5 mb-0" id="vibration-heading">Vibration</h3>
                         </div>
                     </div>
                     <div class="gamepad-panel-body">
-                        <div id="vibration-status" class="gamepad-capability mb-3"></div>
+                        <div id="vibration-status" class="gamepad-capability"></div>
 
                         <div id="dual-rumble-controls" class="d-none">
                             <div class="gamepad-range-control">

mouse-tester.html

@@ -10,16 +10,16 @@
 ---
 
 <!-- Mouse Tester section -->
-<section class="mouse-tester py-4 py-lg-5" id="MouseTester">
+<section class="mouse-tester" id="MouseTester">
     <div class="container">
-        <header class="mouse-tester-header mx-auto text-center">
+        <header class="mouse-tester-header mx-auto">
             <div class="mouse-kicker mb-2">
                 <i class="fas fa-computer-mouse" aria-hidden="true"></i>
                 Browser mouse diagnostics
             </div>
-            <h2 class="display-6 fw-bolder mb-2">Mouse Tester</h2>
+            <h2 class="display-6 fw-bolder">Mouse Tester</h2>
             <p class="lead text-muted mb-4">Check buttons, movement, and scrolling in real time.</p>
-            <div id="mouse-status" class="alert alert-warning mouse-status mb-2">
+            <div id="mouse-status" class="alert alert-warning mouse-status">
                 <span class="mouse-status-indicator" aria-hidden="true"></span>
                 <output id="mouse-status-message" aria-live="polite">Move, click, or scroll inside the test area to begin.</output>
             </div>
@@ -29,7 +29,7 @@ <h2 class="display-6 fw-bolder mb-2">Mouse Tester</h2>
             </p>
         </header>
 
-        <div id="firefox-mouse-buttons-warning" class="mouse-browser-warning mouse-inline-notice mt-3" aria-live="polite" hidden>
+        <div id="firefox-mouse-buttons-warning" class="mouse-browser-warning mouse-inline-notice" aria-live="polite" hidden>
             <i class="fas fa-triangle-exclamation mt-1" aria-hidden="true"></i>
             <span>
                 Firefox may use Back and Forward mouse buttons for browser navigation even when this tester detects the button press.
@@ -38,7 +38,7 @@ <h2 class="display-6 fw-bolder mb-2">Mouse Tester</h2>
             </span>
         </div>
 
-        <div class="row g-4 mt-0 mouse-workspace">
+        <div class="row g-4 mouse-workspace">
             <div class="col-xl-7">
                 <section class="mouse-panel mouse-visual-panel h-100" aria-labelledby="mouse-visual-heading">
                     <div class="mouse-panel-header">