mirror of
https://github.com/redphx/better-xcloud.git
synced 2025-08-05 20:58:27 +02:00
Merge Global settings and Stream settings into one dialog
This commit is contained in:
redphx
@@ -1,5 +1,10 @@
|
||||
.bx-button {
|
||||
background-color: var(--bx-default-button-color);
|
||||
--button-rgb: var(--bx-default-button-rgb);
|
||||
--button-hover-rgb: var(--bx-default-button-hover-rgb);
|
||||
--button-active-rgb: var(--bx-default-button-active-rgb);
|
||||
--button-disabled-rgb: var(--bx-default-button-disabled-rgb);
|
||||
|
||||
background-color: unquote('rgb(var(--button-rgb))');
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
color: #fff;
|
||||
@@ -14,55 +19,97 @@
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
&:not([disabled]):active {
|
||||
background-color: unquote('rgb(var(--button-active-rgb))');
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
&:hover, &.bx-focusable:focus {
|
||||
background-color: var(--bx-default-button-hover-color);
|
||||
&:not([disabled]):not(:active) {
|
||||
&:hover, &.bx-focusable:focus {
|
||||
background-color: unquote('rgb(var(--button-hover-rgb))');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
background-color: var(--bx-default-button-disabled-color);
|
||||
background-color: unquote('rgb(var(--button-disabled-rgb))');
|
||||
}
|
||||
|
||||
&.bx-ghost {
|
||||
background-color: transparent;
|
||||
|
||||
&:hover, &.bx-focusable:focus {
|
||||
background-color: var(--bx-default-button-hover-color);
|
||||
&:not([disabled]):not(:active) {
|
||||
&:hover, &.bx-focusable:focus {
|
||||
background-color: unquote('rgb(var(--button-hover-rgb))');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bx-primary {
|
||||
background-color: var(--bx-primary-button-color);
|
||||
--button-rgb: var(--bx-primary-button-rgb);
|
||||
|
||||
&:hover, &.bx-focusable:focus {
|
||||
background-color: var(--bx-primary-button-hover-color);
|
||||
&:not([disabled]):active {
|
||||
--button-active-rgb: var(--bx-primary-button-active-rgb);
|
||||
}
|
||||
|
||||
&:not([disabled]):not(:active) {
|
||||
&:hover, &.bx-focusable:focus {
|
||||
--button-hover-rgb: var(--bx-primary-button-hover-rgb);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--bx-primary-button-disabled-color);
|
||||
--button-disabled-rgb: var(--bx-primary-button-disabled-rgb);
|
||||
}
|
||||
}
|
||||
|
||||
&.bx-danger {
|
||||
background-color: var(--bx-danger-button-color);
|
||||
--button-rgb: var(--bx-danger-button-rgb);
|
||||
|
||||
&:hover, &.bx-focusable:focus {
|
||||
background-color: var(--bx-danger-button-hover-color);
|
||||
&:not([disabled]):active {
|
||||
--button-active-rgb: var(--bx-danger-button-active-rgb);
|
||||
}
|
||||
|
||||
&:not([disabled]):not(:active) {
|
||||
&:hover, &.bx-focusable:focus {
|
||||
--button-hover-rgb: var(--bx-danger-button-hover-rgb);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--bx-danger-button-disabled-color);
|
||||
--button-disabled-rgb: var(--bx-danger-button-disabled-rgb);
|
||||
}
|
||||
}
|
||||
|
||||
&.bx-frosted {
|
||||
--button-alpha: 0.2;
|
||||
background-color: unquote('rgba(var(--button-rgb), var(--button-alpha))');
|
||||
backdrop-filter: blur(4px) brightness(1.5);
|
||||
|
||||
&:not([disabled]):not(:active) {
|
||||
&:hover, &.bx-focusable:focus {
|
||||
background-color: unquote('rgba(var(--button-hover-rgb), var(--button-alpha))');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bx-drop-shadow {
|
||||
box-shadow: 0 0 4px #00000080;
|
||||
}
|
||||
|
||||
&.bx-tall {
|
||||
height: calc(var(--bx-button-height) * 1.5) !important;
|
||||
}
|
||||
|
||||
&.bx-circular {
|
||||
border-radius: var(--bx-button-height);
|
||||
height: var(--bx-button-height);
|
||||
}
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
@@ -87,20 +134,29 @@
|
||||
|
||||
.bx-focusable {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
|
||||
&::after {
|
||||
border: 2px solid transparent;
|
||||
border-radius: 4px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&:focus::after {
|
||||
&:focus-visible::after {
|
||||
offset = -6px;
|
||||
|
||||
content: '';
|
||||
border-color: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: offset;
|
||||
left: offset;
|
||||
right: offset;
|
||||
bottom: offset;
|
||||
}
|
||||
|
||||
&.bx-circular {
|
||||
&::after {
|
||||
border-radius: var(--bx-button-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -121,6 +177,7 @@ button.bx-inactive {
|
||||
.bx-button-shortcut {
|
||||
max-width: max-content;
|
||||
margin: 10px 0 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 568px) and (max-height: 480px) {
|
||||
|
||||
@@ -1,226 +0,0 @@
|
||||
.bx-settings-reload-button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.bx-settings-container {
|
||||
background-color: #151515;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
color: #fff;
|
||||
font-family: var(--bx-normal-font);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.bx-settings-wrapper a.bx-settings-title:hover {
|
||||
color: #83f73a;
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-wrapper {
|
||||
min-width: 450px;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
padding: 12px 6px;
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
min-width: unset;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.bx-top-buttons {
|
||||
.bx-button {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-title-wrapper {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a.bx-settings-title {
|
||||
font-family: var(--bx-title-font);
|
||||
font-size: 1.4rem;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
flex: 1;
|
||||
text-transform: none;
|
||||
margin-right: 10px;
|
||||
|
||||
span {
|
||||
color: #5dc21e !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
span {
|
||||
color: #83f73a !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.bx-settings-update {
|
||||
display: block;
|
||||
color: #ff834b;
|
||||
text-decoration: none;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
background: #222;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: #ff9869;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: #ff9869;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-group-label {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
|
||||
.bx-settings-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 6px 12px;
|
||||
position: relative;
|
||||
|
||||
label {
|
||||
align-self: center;
|
||||
margin: 0 4px 0;
|
||||
}
|
||||
|
||||
.bx-setting-control {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
|
||||
&:hover, &:focus-within {
|
||||
background-color: #242424;
|
||||
}
|
||||
|
||||
input {
|
||||
align-self: center;
|
||||
accent-color: var(--bx-primary-button-color);
|
||||
|
||||
&:focus {
|
||||
accent-color: var(--bx-danger-button-color);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
&:disabled {
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
text-align-last: right;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=checkbox],
|
||||
select {
|
||||
&:focus {
|
||||
filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:has(input:focus), &:has(select:focus), &:has(button:focus) {
|
||||
&::before {
|
||||
content: ' ';
|
||||
border-radius: 4px;
|
||||
border: 2px solid #fff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-group-label b, .bx-settings-row label b {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
color: #828282;
|
||||
}
|
||||
|
||||
.bx-settings-group-label b {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.bx-settings-app-version {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
color: #747474;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bx-donation-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
color: #5dc21e;
|
||||
|
||||
&:hover {
|
||||
color: #6dd72b;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-custom-user-agent {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bx-debug-info {
|
||||
button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 10px;
|
||||
cursor: copy;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
border: 1px solid #2d2d2d;
|
||||
background: #212121;
|
||||
white-space: break-spaces;
|
||||
|
||||
&:hover {
|
||||
background: #272727;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 46px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
18
src/assets/css/navigation-dialog.styl
Normal file
18
src/assets/css/navigation-dialog.styl
Normal file
@@ -0,0 +1,18 @@
|
||||
.bx-navigation-dialog {
|
||||
position: absolute;
|
||||
z-index: var(--bx-navigation-dialog-z-index);
|
||||
}
|
||||
|
||||
.bx-navigation-dialog-overlay {
|
||||
position: fixed;
|
||||
background: #0b0b0be3;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: var(--bx-navigation-dialog-overlay-z-index);
|
||||
|
||||
&[data-is-playing="true"] {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,18 @@
|
||||
button_color(name, normal, hover, active, disabled)
|
||||
prefix = unquote('--bx-' + name + '-button');
|
||||
{prefix + '-color'}: normal;
|
||||
{prefix + '-rgb'}: red(normal), green(normal), blue(normal);
|
||||
|
||||
{prefix + '-hover-color'}: hover;
|
||||
{prefix + '-hover-rgb'}: red(hover), green(hover), blue(hover);
|
||||
|
||||
{prefix + '-active-color'}: active;
|
||||
{prefix + '-active-rgb'}: red(active), green(active), blue(active);
|
||||
|
||||
{prefix + '-disabled-color'}: disabled;
|
||||
{prefix + '-disabled-rgb'}: red(disabled), green(disabled), blue(disabled);
|
||||
|
||||
|
||||
:root {
|
||||
--bx-title-font: Bahnschrift, Arial, Helvetica, sans-serif;
|
||||
--bx-title-font-semibold: Bahnschrift Semibold, Arial, Helvetica, sans-serif;
|
||||
@@ -7,27 +22,22 @@
|
||||
|
||||
--bx-button-height: 40px;
|
||||
|
||||
--bx-default-button-color: #2d3036;
|
||||
--bx-default-button-hover-color: #515863;
|
||||
--bx-default-button-disabled-color: #8e8e8e;
|
||||
|
||||
--bx-primary-button-color: #008746;
|
||||
--bx-primary-button-hover-color: #04b358;
|
||||
--bx-primary-button-disabled-color: #448262;
|
||||
|
||||
--bx-danger-button-color: #c10404;
|
||||
--bx-danger-button-hover-color: #e61d1d;
|
||||
--bx-danger-button-disabled-color: #a26c6c;
|
||||
button_color('default', #2d3036, #515863, #222428, #8e8e8e);
|
||||
button_color('primary', #008746, #04b358, #044e2a, #448262);
|
||||
button_color('danger', #c10404, #e61d1d, #a26c6c, #df5656);
|
||||
|
||||
--bx-toast-z-index: 9999;
|
||||
--bx-dialog-z-index: 9101;
|
||||
--bx-dialog-overlay-z-index: 9100;
|
||||
--bx-remote-play-popup-z-index: 9090;
|
||||
--bx-stats-bar-z-index: 9010;
|
||||
--bx-stream-settings-z-index: 9001;
|
||||
--bx-mkb-pointer-lock-msg-z-index: 9000;
|
||||
--bx-stream-settings-overlay-z-index: 8999;
|
||||
--bx-game-bar-z-index: 8888;
|
||||
|
||||
--bx-navigation-dialog-z-index: 8999;
|
||||
--bx-navigation-dialog-overlay-z-index: 8998;
|
||||
|
||||
--bx-remote-play-popup-z-index: 2000;
|
||||
|
||||
--bx-game-bar-z-index: 1000;
|
||||
--bx-wait-time-box-z-index: 100;
|
||||
--bx-screenshot-animation-z-index: 1;
|
||||
}
|
||||
@@ -65,6 +75,14 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.bx-hide-scroll-bar {
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bx-gone {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -106,7 +124,11 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
|
||||
}
|
||||
|
||||
.bx-line-through {
|
||||
text-decoration: line-through
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
|
||||
.bx-normal-case {
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
|
||||
@@ -1,41 +1,82 @@
|
||||
.bx-stream-settings-dialog {
|
||||
.bx-settings-dialog {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: var(--bx-stream-settings-z-index);
|
||||
opacity: 0.98;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.bx-stream-settings-overlay {
|
||||
position: fixed;
|
||||
background: #0b0b0be3;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: var(--bx-stream-settings-overlay-z-index);
|
||||
.bx-focusable {
|
||||
&::after {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&[data-is-playing="true"] {
|
||||
background: transparent;
|
||||
&:focus::after {
|
||||
offset = 0;
|
||||
|
||||
top: offset;
|
||||
left: offset;
|
||||
right: offset;
|
||||
bottom: offset;
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-reload-note {
|
||||
font-size: 0.8rem;
|
||||
display: block;
|
||||
padding: 8px;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
height: var(--bx-button-height);
|
||||
}
|
||||
}
|
||||
|
||||
.bx-stream-settings-tabs {
|
||||
display: flex;
|
||||
.bx-settings-tabs-container {
|
||||
position: fixed;
|
||||
width: 48px;
|
||||
max-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> div:last-of-type {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
|
||||
button {
|
||||
flex-shrink: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-top: 8px;
|
||||
height: unset;
|
||||
padding: 8px 10px;
|
||||
|
||||
svg {
|
||||
size = 16px;
|
||||
|
||||
width: size;
|
||||
height: size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 0 0 0 8px;
|
||||
box-shadow: 0px 0px 6px #000;
|
||||
overflow: clip;
|
||||
box-shadow: 0 0 6px #000;
|
||||
overflow: overlay;
|
||||
flex: 1;
|
||||
|
||||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
size = 24px;
|
||||
width: size;
|
||||
height: size;
|
||||
padding: 10px;
|
||||
flex-shrink: 0;
|
||||
box-sizing: content-box;
|
||||
background: #131313;
|
||||
cursor: pointer;
|
||||
@@ -55,14 +96,28 @@
|
||||
border-color: #fff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&[data-group=global] {
|
||||
&[data-need-refresh=true] {
|
||||
background: var(--bx-danger-button-color) !important;
|
||||
|
||||
&:hover {
|
||||
background: var(--bx-danger-button-hover-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bx-stream-settings-tab-contents {
|
||||
.bx-settings-tab-contents {
|
||||
tabsWidth = 48px;
|
||||
|
||||
flex-direction: column;
|
||||
padding: 14px 14px 0;
|
||||
width: 420px;
|
||||
padding: 10px;
|
||||
margin-left: tabsWidth;
|
||||
width: 450px;
|
||||
max-width: calc(100vw - tabsWidth);
|
||||
background: #1a1b1e;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
@@ -71,7 +126,6 @@
|
||||
text-align: center;
|
||||
box-shadow: 0px 0px 6px #000;
|
||||
overflow: overlay;
|
||||
margin-left: 56px;
|
||||
z-index: 1;
|
||||
|
||||
> div[data-tab-group=mkb] {
|
||||
@@ -81,99 +135,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
*:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-item: center;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
height: var(--bx-button-height);
|
||||
line-height: calc(var(--bx-button-height) + 4px);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.bx-stream-settings-tab-contents {
|
||||
width: calc(100vw - 56px);
|
||||
}
|
||||
}
|
||||
|
||||
.bx-stream-settings-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border-bottom: 1px solid #40404080;
|
||||
padding: 16px 8px;
|
||||
border-left: 2px solid transparent;
|
||||
|
||||
&:hover, &:focus-within {
|
||||
background-color: #242424;
|
||||
}
|
||||
|
||||
input[type=checkbox],
|
||||
select {
|
||||
&:focus {
|
||||
filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
|
||||
}
|
||||
}
|
||||
|
||||
&:has(input:focus), &:has(select:focus), &:has(button:focus) {
|
||||
border-left-color: white;
|
||||
}
|
||||
|
||||
> label {
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
align-self: center;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
input {
|
||||
accent-color: var(--bx-primary-button-color);
|
||||
|
||||
&:focus {
|
||||
accent-color: var(--bx-danger-button-color);
|
||||
}
|
||||
}
|
||||
|
||||
select:disabled {
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
text-align-last: right;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
select option:disabled {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bx-stream-settings-dialog-note {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: lighter;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.bx-stream-settings-tab-contents {
|
||||
div[data-tab-group="shortcuts"] {
|
||||
> div[data-tab-group=shortcuts] {
|
||||
> div {
|
||||
&[data-has-gamepad=true] {
|
||||
> div:first-of-type {
|
||||
@@ -229,10 +191,191 @@
|
||||
|
||||
&:last-of-type {
|
||||
opacity: 0;
|
||||
z-index: calc(var(--bx-stream-settings-z-index) + 1);
|
||||
z-index: calc(var(--bx-settings-z-index) + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
*:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.bx-top-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.bx-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 16px 0 8px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.bx-settings-tab-contents {
|
||||
width: calc(100vw - 48px);
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
border-bottom: 1px solid #2c2c2e;
|
||||
padding: 16px 8px;
|
||||
margin: 0;
|
||||
border-left: 2px solid transparent;
|
||||
|
||||
&:hover, &:focus-within {
|
||||
background-color: #242424;
|
||||
}
|
||||
|
||||
&:not(:has(> input[type=checkbox])) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
input[type=checkbox],
|
||||
select {
|
||||
&:focus {
|
||||
filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
|
||||
}
|
||||
}
|
||||
|
||||
&:has(input:focus), &:has(select:focus), &:has(button:focus) {
|
||||
border-left-color: white;
|
||||
}
|
||||
|
||||
> span.bx-settings-label {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
text-align: left;
|
||||
align-self: center;
|
||||
margin-bottom: 0 !important;
|
||||
|
||||
+ * {
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
accent-color: var(--bx-primary-button-color);
|
||||
|
||||
&:focus {
|
||||
accent-color: var(--bx-danger-button-color);
|
||||
}
|
||||
}
|
||||
|
||||
select:disabled {
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
text-align-last: right;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
select option:disabled {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-dialog-note {
|
||||
display: block;
|
||||
color: #afafb0;
|
||||
font-size: 12px;
|
||||
font-weight: lighter;
|
||||
font-style: italic;
|
||||
|
||||
&:not(:has(a)) {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-custom-user-agent {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.bx-donation-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
color: #5dc21e;
|
||||
|
||||
&:hover {
|
||||
color: #6dd72b;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.bx-debug-info {
|
||||
button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 10px;
|
||||
cursor: copy;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
border: 1px solid #2d2d2d;
|
||||
background: #212121;
|
||||
white-space: break-spaces;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
background: #272727;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-app-version {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
color: #747474;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bx-note-unsupported {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
color: #828282;
|
||||
}
|
||||
@@ -2,8 +2,9 @@
|
||||
|
||||
@import 'button.styl';
|
||||
@import 'header.styl';
|
||||
@import 'global-settings.styl';
|
||||
@import 'dialog.styl';
|
||||
@import 'navigation-dialog.styl';
|
||||
@import 'settings-dialog.styl';
|
||||
@import 'toast.styl';
|
||||
@import 'loading-screen.styl';
|
||||
@import 'remote-play.styl';
|
||||
@@ -13,5 +14,4 @@
|
||||
@import 'number-stepper.styl';
|
||||
@import 'game-bar.styl';
|
||||
@import 'stream-stats.styl';
|
||||
@import 'stream-settings.styl';
|
||||
@import 'mkb.styl';
|
||||
|
||||
@@ -12,4 +12,4 @@
|
||||
// @updateURL https://raw.githubusercontent.com/redphx/better-xcloud/typescript/dist/better-xcloud.meta.js
|
||||
// @downloadURL https://github.com/redphx/better-xcloud/releases/latest/download/better-xcloud.user.js
|
||||
// ==/UserScript==
|
||||
'use strict';
|
||||
"use strict";
|
||||
|
||||
4
src/assets/svg/better-xcloud.svg
Normal file
4
src/assets/svg/better-xcloud.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='2' stroke-width='2' viewBox='0 0 32 32'>
|
||||
<path d='M16.001 7.236h-2.328c-.443 0-1.941-.851-2.357-.905-.824-.106-1.684 0-2.489.176a13.04 13.04 0 0 0-3.137 1.14c-.392.275-.677.668-.866 1.104v.03l-3.302 8.963-.015.015c-.288.867-.553 3.75-.5 4.279a4.89 4.89 0 0 0 1.022 2.55c.654.823 3.71 1.364 4.057 1.016l4.462-4.475c.185-.186 1.547-.706 2.01-.706h6.884c.463 0 1.825.52 2.01.706l4.462 4.475c.347.348 3.403-.193 4.057-1.016a4.89 4.89 0 0 0 1.022-2.55c.053-.529-.212-3.412-.5-4.279l-.015-.015-3.302-8.963v-.03c-.189-.436-.474-.829-.866-1.104a13.04 13.04 0 0 0-3.137-1.14c-.805-.176-1.665-.282-2.489-.176-.416.054-1.914.905-2.357.905h-2.328' fill='none' stroke='#fff'/>
|
||||
<path d='M8.172 12.914H6.519c-.235 0-.315.267-.335.452l-.052.578c0 .193.033.384.054.576.023.202.091.511.355.511h1.631l-.001 1.652c0 .234.266.315.452.335l.578.052c.193 0 .384-.033.576-.054.203-.023.511-.091.511-.355V15.03l1.652.001c.234 0 .315-.266.335-.452l.052-.578c-.001-.193-.033-.385-.055-.577-.022-.202-.09-.51-.354-.51h-1.632v-1.652c0-.234-.266-.315-.453-.335l-.577-.052c-.193 0-.385.033-.577.054-.202.023-.51.091-.51.355v1.631m16.546 2.994h-3.487c-.206 0-.413-.043-.604-.121-.177-.072-.339-.183-.476-.316-.149-.144-.259-.315-.341-.504-.156-.361-.172-.788-.032-1.157a1.57 1.57 0 0 1 .459-.641c.106-.089.223-.164.349-.222a1.52 1.52 0 0 1 .423-.123c.167-.024.338-.02.504.012a1.83 1.83 0 0 1 .455-.482 1.62 1.62 0 0 1 .522-.252c.307-.089.651-.09.959-.003a1.75 1.75 0 0 1 1.009.764 1.83 1.83 0 0 1 .251.721c.156 0 .312.031.456.09a1.24 1.24 0 0 1 .372.248c.091.087.165.19.221.302a1.19 1.19 0 0 1-.173 1.299c-.119.132-.276.239-.441.305a1.17 1.17 0 0 1-.426.08z' fill='#fff' stroke='none'/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
4
src/assets/svg/close.svg
Normal file
4
src/assets/svg/close.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
|
||||
<path d='M29.928,2.072L2.072,29.928'/>
|
||||
<path d='M29.928,29.928L2.072,2.072'/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 264 B |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
|
||||
<path d="M13.253 3.639c0-.758-.615-1.373-1.373-1.373H3.639c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V3.639zm0 16.481c0-.758-.615-1.373-1.373-1.373H3.639c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V20.12zm16.481 0c0-.758-.615-1.373-1.373-1.373H20.12c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V20.12zM19.262 7.76h9.957"/>
|
||||
<path d="M24.24 2.781v9.957"/>
|
||||
<path d='M13.253 3.639c0-.758-.615-1.373-1.373-1.373H3.639c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V3.639zm0 16.481c0-.758-.615-1.373-1.373-1.373H3.639c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V20.12zm16.481 0c0-.758-.615-1.373-1.373-1.373H20.12c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V20.12zM19.262 7.76h9.957'/>
|
||||
<path d='M24.24 2.781v9.957'/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 711 B After Width: | Height: | Size: 711 B |
@@ -1,10 +1,10 @@
|
||||
<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
|
||||
<g stroke-width="2.1">
|
||||
<path d="m15.817 6h-10.604c-2.215 0-4.013 1.798-4.013 4.013v12.213c0 2.215 1.798 4.013 4.013 4.013h11.21"/>
|
||||
<path d="m5.698 20.617h1.124m-1.124-4.517h7.9m-7.881-4.5h7.9m-2.3 9h2.2"/>
|
||||
<g stroke-width='2.1'>
|
||||
<path d='m15.817 6h-10.604c-2.215 0-4.013 1.798-4.013 4.013v12.213c0 2.215 1.798 4.013 4.013 4.013h11.21'/>
|
||||
<path d='m5.698 20.617h1.124m-1.124-4.517h7.9m-7.881-4.5h7.9m-2.3 9h2.2'/>
|
||||
</g>
|
||||
<g stroke-width="2.13">
|
||||
<path d="m30.805 13.1c0-3.919-3.181-7.1-7.1-7.1s-7.1 3.181-7.1 7.1v6.4c0 3.919 3.182 7.1 7.1 7.1s7.1-3.181 7.1-7.1z"/>
|
||||
<path d="m23.705 14.715v-4.753"/>
|
||||
<g stroke-width='2.13'>
|
||||
<path d='m30.805 13.1c0-3.919-3.181-7.1-7.1-7.1s-7.1 3.181-7.1 7.1v6.4c0 3.919 3.182 7.1 7.1 7.1s7.1-3.181 7.1-7.1z'/>
|
||||
<path d='m23.705 14.715v-4.753'/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 619 B After Width: | Height: | Size: 619 B |
@@ -1,11 +1,11 @@
|
||||
<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
|
||||
<g stroke-width="2.06">
|
||||
<path d="M8.417 13.218h4.124"/>
|
||||
<path d="M10.479 11.155v4.125"/>
|
||||
<path d="M12.787 19.404L7.36 25.565a3.61 3.61 0 0 1-2.551 1.056A3.63 3.63 0 0 1 1.2 23.013c0-.21.018-.42.055-.626l2.108-10.845C3.923 8.356 6.714 6.007 9.949 6h5.192"/>
|
||||
<g stroke-width='2.06'>
|
||||
<path d='M8.417 13.218h4.124'/>
|
||||
<path d='M10.479 11.155v4.125'/>
|
||||
<path d='M12.787 19.404L7.36 25.565a3.61 3.61 0 0 1-2.551 1.056A3.63 3.63 0 0 1 1.2 23.013c0-.21.018-.42.055-.626l2.108-10.845C3.923 8.356 6.714 6.007 9.949 6h5.192'/>
|
||||
</g>
|
||||
<g stroke-width="2.11">
|
||||
<path d="M30.8 13.1c0-3.919-3.181-7.1-7.1-7.1s-7.1 3.181-7.1 7.1v6.421c0 3.919 3.181 7.1 7.1 7.1s7.1-3.181 7.1-7.1V13.1z"/>
|
||||
<path d="M23.7 14.724V9.966"/>
|
||||
<g stroke-width='2.11'>
|
||||
<path d='M30.8 13.1c0-3.919-3.181-7.1-7.1-7.1s-7.1 3.181-7.1 7.1v6.421c0 3.919 3.181 7.1 7.1 7.1s7.1-3.181 7.1-7.1V13.1z'/>
|
||||
<path d='M23.7 14.724V9.966'/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 680 B After Width: | Height: | Size: 680 B |
Reference in New Issue
Block a user