From ed3204448097ec6f83facec0795c9ab16b162cf8 Mon Sep 17 00:00:00 2001
From: redphx <96280+redphx@users.noreply.github.com>
Date: Sat, 15 Jul 2023 20:53:28 +0700
Subject: [PATCH] Update Video settings UI

---
 better-xcloud.user.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/better-xcloud.user.js b/better-xcloud.user.js
index e2f44ce..8052911 100644
--- a/better-xcloud.user.js
+++ b/better-xcloud.user.js
@@ -834,7 +834,7 @@ function numberPicker(key) {
     const CE = createElement;
     const $wrapper = CE('div', {},
                         $decBtn = CE('button', {'data-type': 'dec'}, '-'),
-                        $text = CE('span', {}, value),
+                        $text = CE('span', {}, value + '%'),
                         $incBtn = CE('button', {'data-type': 'inc'}, '+'),
                     );
 
@@ -856,7 +856,7 @@ function numberPicker(key) {
             value = (value >= MAX) ? MAX : value + 1;
         }
 
-        $text.textContent = value;
+        $text.textContent = value + '%';
         PREFS.set(key, value);
         updateVideoPlayerCss();
 
@@ -949,8 +949,9 @@ function setupVideoSettingsBar() {
 }
 
 .better_xcloud_quick_settings_bar label {
-    font-size: 24px;
+    font-size: 20px;
     display: block;
+    margin-bottom: 8px;
 }
 
 .better_xcloud_quick_settings_bar input {
@@ -964,8 +965,9 @@ function setupVideoSettingsBar() {
     height: 24px;
     margin: 0 8px;
     line-height: 24px;
-    background-color: #fff;
-    color: #000;
+    background-color: #515151;
+    color: #fff;
+    border-radius: 4px;
 }
 
 @media (hover: hover) {
@@ -982,7 +984,9 @@ function setupVideoSettingsBar() {
 
 .better_xcloud_quick_settings_bar span {
     display: inline-block;
-    width: 26px;
+    width: 40px;
+    font-weight: bold;
+    font-family: Consolas, "Courier New", Courier, monospace;
 }
 `);