marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-08-01 19:06:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add "Suggest settings" feature

Browse Source
This commit is contained in:
redphx
2024-08-26 17:27:34 +07:00
parent 070113b764
commit 4f7e0a4f7f
23 changed files with 880 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/css/root.styl
View File

@@ -59,7 +59,7 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
}
/* Remove the "Cloud Gaming" text in header when the screen is too small */
@media screen and (max-width: 600px) {
@media screen and (max-width: 640px) {
header a[href="/play"] {
display: none;
}

235
src/assets/css/settings-dialog.styl
View File

@@ -31,6 +31,42 @@
font-weight: normal;
height: var(--bx-button-height);
}
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;
}
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);
}
}
a {
color: #5dc21e;
text-decoration: none;
&:hover, &:focus {
color: #128112;
}
}
}
.bx-settings-tabs-container {
@@ -258,13 +294,6 @@
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;
@@ -282,26 +311,6 @@
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 {
@@ -335,15 +344,6 @@
line-height: 20px;
font-size: 14px;
margin-top: 10px;
color: #5dc21e;
&:hover {
color: #6dd72b;
}
&:focus {
text-decoration: underline;
}
}
.bx-debug-info {
@@ -404,3 +404,166 @@
}
}
}
.bx-suggest-toggler {
text-align: left;
display: flex;
border-radius: 4px;
overflow: hidden;
background: #003861;
label {
flex: 1;
margin-bottom: 0;
padding: 10px;
background: #004f87;
}
span {
display: inline-block;
align-self: center;
padding: 10px;
width: 40px;
text-align: center;
}
&:hover, &:focus {
cursor: pointer;
background: #005da1;
label {
background: #006fbe;
}
}
&[bx-open] {
span {
transform: rotate(90deg);
}
&+ .bx-suggest-box {
display: block;
}
}
}
.bx-suggest-box {
display: none;
background: #161616;
padding: 10px;
box-shadow: 0px 0px 12px #0f0f0f inset;
border-radius: 10px;
}
.bx-suggest-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
margin: 10px;
}
.bx-suggest-note {
font-size: 11px;
color: #8c8c8c;
font-style: italic;
font-weight: 100;
}
.bx-suggest-link {
font-size: 12px;
display: inline-block;
margin-top: 10px;
}
.bx-suggest-row {
display: flex;
flex-direction: row;
gap: 10px;
label {
flex: 1;
overflow: overlay;
border-radius: 4px;
.bx-suggest-label {
background: #323232;
padding: 4px 10px;
font-size: 12px;
text-align: left;
}
.bx-suggest-value {
padding: 6px;
font-size: 14px;
&.bx-suggest-change {
background-color: var(--bx-warning-color);
}
}
}
&.bx-suggest-ok {
input {
visibility: hidden;
}
.bx-suggest-label {
background-color: #008114;
}
.bx-suggest-value {
background-color: #13a72a;
}
}
&.bx-suggest-change {
.bx-suggest-label {
background-color: #a65e08;
}
.bx-suggest-value {
background-color: #d57f18;
}
&:hover {
label {
cursor: pointer;
}
.bx-suggest-label {
background-color: #995707;
}
.bx-suggest-value {
background-color: #bd7115;
}
}
// Unchecked setting
input:not(:checked) + label {
opacity: 0.5;
.bx-suggest-label {
background-color: #2a2a2a;
}
.bx-suggest-value {
background-color: #393939;
}
}
&:hover {
input:not(:checked) + label {
opacity: 1;
.bx-suggest-label {
background-color: #202020;
}
.bx-suggest-value {
background-color: #303030;
}
}
}
}
}