feat(gamepad-tester): add gamepad visuals (#413)

Author: ReenigneArcher

_sass/styles.scss

@@ -239,6 +239,143 @@ table tr:nth-child(2n) {
   color: var(--text-col);
 }
 
+/* Controller visualization */
+.gamepad-visual {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-height: 16rem;
+  position: relative;
+}
+
+.gamepad-visual > .text-muted {
+  grid-column: 1 / -1;
+}
+
+.gamepad-visual-svg {
+  display: block;
+  height: auto;
+  max-height: 28rem;
+  max-width: 64rem;
+  overflow: visible;
+  width: 100%;
+}
+
+.gamepad-visual-control {
+  fill: var(--bs-primary);
+  fill-opacity: 0;
+  pointer-events: none;
+  transition: fill-opacity 50ms linear;
+}
+
+.gamepad-visual-control.active {
+  filter: drop-shadow(0 0 1.25rem var(--bs-primary));
+}
+
+.gamepad-trigger-visual {
+  --gamepad-trigger-value: 0%;
+  align-items: center;
+  background-color: var(--footer-col);
+  border: 2px solid var(--navbar-border-col);
+  border-radius: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  isolation: isolate;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0.5rem;
+  position: absolute;
+  top: 2.5rem;
+  transition: border-color 50ms linear, box-shadow 50ms linear;
+  width: 6rem;
+  z-index: 1;
+}
+
+.gamepad-trigger-visual:first-child {
+  left: max(calc(50% - 28rem), 0.5rem);
+}
+
+.gamepad-trigger-visual:last-child {
+  right: max(calc(50% - 28rem), 0.5rem);
+}
+
+.gamepad-trigger-visual.active {
+  border-color: var(--bs-primary);
+  box-shadow: 0 0 1rem rgba(var(--bs-primary-rgb), 0.55);
+}
+
+.gamepad-trigger-fill {
+  background-color: rgba(var(--bs-primary-rgb), 0.45);
+  bottom: 0;
+  height: var(--gamepad-trigger-value);
+  left: 0;
+  position: absolute;
+  transition: height 50ms linear;
+  width: 100%;
+  z-index: -1;
+}
+
+.gamepad-trigger-image {
+  display: block;
+  height: auto;
+  max-height: 3rem;
+  max-width: 100%;
+  width: 4rem;
+}
+
+.gamepad-trigger-name {
+  display: none;
+  font-weight: 700;
+  line-height: 3rem;
+}
+
+.gamepad-trigger-name.visible {
+  display: block;
+}
+
+.gamepad-trigger-value {
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  margin-top: 0.35rem;
+}
+
+.gamepad-stick-indicator {
+  fill: var(--bs-primary);
+  pointer-events: none;
+  stroke: var(--page-col);
+  stroke-width: 10;
+  transition: transform 50ms linear;
+}
+
+@media (max-width: 575.98px) {
+  .gamepad-visual {
+    display: grid;
+    gap: 0.35rem;
+    grid-template-columns: 3rem minmax(0, 1fr) 3rem;
+    min-height: 10rem;
+  }
+
+  .gamepad-trigger-visual {
+    align-self: start;
+    left: auto;
+    margin-top: 1rem;
+    padding: 0.25rem;
+    position: relative;
+    right: auto;
+    top: auto;
+    width: auto;
+  }
+
+  .gamepad-trigger-image {
+    max-height: 2rem;
+  }
+
+  .gamepad-trigger-value {
+    font-size: 0.65rem;
+  }
+}
+
 /* Stick visualization */
 .stick-circle {
   width: 120px;