Game-specific settings (#623)

src/assets/css/button.styl

@@ -37,6 +37,7 @@
     &:disabled {
         cursor: default;
         background-color: unquote('rgb(var(--button-disabled-rgb))');
+        opacity: 0.5;
     }
 
     &.bx-ghost {

src/assets/css/root.styl

@@ -25,7 +25,7 @@ button_color(name, normal, hover, active, disabled)
     button_color('default', #2d3036, #515863, #222428, #8e8e8e);
     button_color('primary', #008746, #04b358, #044e2a, #448262);
     button_color('warning', #c16e04, #fa9005, #965603, #a2816c);
-    button_color('danger', #c10404, #e61d1d, #a26c6c, #df5656);
+    button_color('danger', #c10404, #e61d1d, #a26c6c, #bd8282);
 
     --bx-fullscreen-text-z-index: 9999;
     --bx-toast-z-index: 6000;
@@ -47,7 +47,7 @@ button_color(name, normal, hover, active, disabled)
 @font-face {
     font-family: 'promptfont';
     src: url('https://redphx.github.io/better-xcloud/fonts/promptfont.otf');
-    unicode-range: U+2196-E011;
+    unicode-range: U+2196-E011, U+27F6, U+FF31;
 }
 
 /* Fix Stream menu buttons not hiding */

src/assets/css/settings-dialog.styl

@@ -98,10 +98,8 @@
     tabsWidth = 48px;
 
     flex-direction: column;
-    padding: 10px;
     margin-left: tabsWidth;
     width: 450px;
-    max-width: calc(100vw - tabsWidth);
     background: #1a1b1e;
     color: #fff;
     font-weight: 400;
@@ -112,13 +110,6 @@
     overflow: overlay;
     z-index: 1;
 
-    > div[data-tab-group=mkb] {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        overflow: hidden;
-    }
-
     .bx-top-buttons {
         display: flex;
         flex-direction: column;
@@ -284,7 +275,8 @@
     color: #828282;
 }
 
-.bx-settings-tab-contents {
+.bx-settings-tab-content {
+    padding: 10px;
     border-radius-size = 6px;
 
     > div {
@@ -307,6 +299,14 @@
             border-radius: border-radius-size;
         }
     }
+
+    &:not([data-game-id="-1"]) {
+        .bx-settings-row[data-override=true], .bx-settings-row:has(*[data-override=true]) {
+            border-left: 4px solid orange !important;
+            border-top-left-radius: 0 !important;
+            border-bottom-left-radius: 0 !important;
+        }
+    }
 }
 
 .bx-suggest-toggler {
@@ -533,3 +533,53 @@
         flex: 1;
     }
 }
+
+.bx-stream-settings-selection {
+    margin-bottom: 8px;
+    position: sticky;
+    z-index: 1000;
+    top: 0;
+
+    > div {
+        display: flex;
+        gap: 8px;
+        background: #222222;
+        padding: 10px;
+        border-bottom: 4px solid #353638;
+        box-shadow: 0 0 6px #000;
+        position: relative;
+        z-index: 1;
+
+        .bx-select {
+            flex: 1;
+
+            label {
+                font-weight: bold;
+                font-size: 1.1rem;
+                line-height: initial;
+
+                span {
+                    line-height: initial;
+                }
+            }
+
+            .bx-select-indicators {
+                display: none;
+            }
+        }
+    }
+
+    p {
+        font-family: var(--bx-promptfont-font), var(--bx-normal-font);
+        margin: 0;
+        font-size: 13px;
+        background: #505050f2;
+        height: 25px;
+        line-height: 23px;
+        position: absolute;
+        bottom: -25px;
+        left: 0;
+        right: 0;
+        text-shadow: 0 1px #000;
+    }
+}