mirror of
https://github.com/redphx/better-xcloud.git
synced 2025-08-11 23:55:18 +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';
|
||||
|
||||
Reference in New Issue
Block a user