fix(gamepad-tester): redesign interface (#414)

Author: ReenigneArcher

_sass/circular-progress.scss

@@ -1,22 +1,20 @@
 .circular-button {
-  position: relative;
-  width: 70px;
-  height: 70px;
-  line-height: 70px;
+  align-items: center;
   background: none;
-  margin-right: 8px;
-  margin-bottom: 8px;
   display: flex;
+  height: 4.5rem;
   justify-content: center;
-  align-items: center;
+  line-height: 4.5rem;
+  position: relative;
+  width: 4.5rem;
 }
 
 .circular-button:after {
   content: "";
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  border: 5px solid var(--circular-progress-border);
+  border: 0.3rem solid var(--circular-progress-border);
   position: absolute;
   top: 0;
   left: 0;
@@ -43,58 +41,64 @@
   width: 100%;
   height: 100%;
   background: none;
-  border-color: #0d6efd;
-  border-width: 5px;
+  border-color: var(--bs-primary);
+  border-width: 0.3rem;
   border-style: solid;
   position: absolute;
   top: 0;
 }
 
 .circular-button .progress-left .progress-bar {
   left: 100%;
-  border-top-right-radius: 35px;
-  border-bottom-right-radius: 35px;
+  border-top-right-radius: 2.25rem;
+  border-bottom-right-radius: 2.25rem;
   border-left: 0;
   transform-origin: center left;
 }
 
 .circular-button .progress-right .progress-bar {
   left: -100%;
-  border-top-left-radius: 35px;
-  border-bottom-left-radius: 35px;
+  border-top-left-radius: 2.25rem;
+  border-bottom-left-radius: 2.25rem;
   border-right: 0;
   transform-origin: center right;
 }
 
 .circular-button .button-content {
-  width: 80%;
-  height: 80%;
+  width: 82%;
+  height: 82%;
   border-radius: 50%;
   background: var(--circular-progress-bg);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   position: absolute;
-  top: 10%;
-  left: 10%;
+  top: 9%;
+  left: 9%;
   z-index: 2;
   text-align: center;
 }
 
 .circular-button .button-name {
+  font-size: 0.72rem;
   font-weight: bold;
   margin-bottom: 2px;
   line-height: 1.2;
 }
 
 .circular-button .button-value {
-  font-size: 0.85rem;
-  line-height: 0.5;
+  color: var(--footer-text-col);
+  font-family: var(--bs-font-monospace);
+  font-size: 0.68rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  margin-top: 0.2rem;
 }
 
 .circular-button.active .button-content {
-  box-shadow: 0 0 10px 3px rgba(13, 110, 253, 0.5);
+  background-color: var(--card-primary-bg);
+  box-shadow: 0 0 0.8rem 0.2rem rgba(var(--bs-primary-rgb), 0.35);
 }
 
 .circular-button .button-image-container {
@@ -106,8 +110,8 @@
 }
 
 .circular-button .button-image {
-  max-width: 2.5rem;
-  max-height: 2.5rem;
+  max-width: 2.15rem;
+  max-height: 2.15rem;
   width: auto;
   height: auto;
 }