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

Controller customization feature

Browse Source
This commit is contained in:
redphx
2024-12-22 17:17:03 +07:00
parent 8ef5a95c88
commit 7b60ba3a3e
89 changed files with 3286 additions and 1188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/assets/css/controller.styl Normal file
View File

@@ -0,0 +1,71 @@
.bx-controller-customizations-container {
.bx-btn-detect {
display: block;
margin-bottom: 20px;
&.bx-monospaced {
background: none;
font-weight: bold;
font-size: 12px;
}
}
.bx-buttons-grid {
display: grid;
grid-template-columns: auto auto;
column-gap: 20px;
row-gap: 10px;
margin-bottom: 20px;
}
}
.bx-controller-key-row {
display: flex;
align-items: stretch;
> label {
margin-bottom: 0;
font-family: var(--bx-promptfont-font);
font-size: 32px;
text-align: center;
min-width: 50px;
flex-shrink: 0;
display: flex;
align-self: center;
&::after {
content: '❯';
margin: 0 12px;
font-size: 16px;
align-self: center;
}
}
.bx-select {
width: 100% !important;
> div {
min-width: 50px;
}
label {
font-family: var(--bx-promptfont-font), var(--bx-normal-font);
font-size: 32px;
text-align: center;
margin-bottom: 6px;
height: 40px;
line-height: 40px;
}
}
&:hover {
> label {
color: #ffe64b;
&::after {
color: #fff;
}
}
}
}

49
src/assets/css/navigation-dialog.styl
View File

@@ -17,6 +17,21 @@
border-radius: 4px;
padding: 0 5px;
}
.bx-focusable {
&::after {
border-radius: 4px;
}
&:focus::after {
offset = 0;
top: offset;
left: offset;
right: offset;
bottom: offset;
}
}
}
.bx-navigation-dialog-overlay {
@@ -42,7 +57,7 @@
color: white;
background: #1a1b1e;
border-radius: 10px;
width: 450px;
min-width: @css{ min(calc(100vw - 20px), 500px) };
max-width: calc(100vw - 20px);
margin: 0 0 0 auto;
padding: 16px;
@@ -74,11 +89,9 @@
.bx-dialog-content {
flex: 1;
padding: 6px;
overflow: auto;
overflow-x: hidden;
> div {
}
}
.bx-dialog-preset-tools {
@@ -86,8 +99,9 @@
margin-bottom: 12px;
gap: 6px;
select {
flex: 1;
button {
align-self: center;
min-height: 50px;
}
}
@@ -164,29 +178,6 @@
letter-spacing: 6px;
}
}
.bx-shortcut-actions {
flex: 1;
position: relative;
select {
width: 100%;
height: 100%;
min-height: 38px;
display: block;
&:first-of-type {
position: absolute;
top: 0;
left: 0;
}
&:last-of-type {
opacity: 0;
z-index: calc(var(--bx-settings-z-index) + 1);
}
}
}
}
select:disabled {

91
src/assets/css/number-stepper.styl
View File

@@ -10,6 +10,7 @@
display: inline-block;
min-width: 40px;
font-family: var(--bx-monospaced-font);
white-space: pre;
font-size: 13px;
margin: 0 4px;
}
@@ -44,7 +45,7 @@
}
}
input[type="range"] {
input[type=range] {
display: block;
margin: 8px 0 2px auto;
min-width: 180px;
@@ -62,3 +63,91 @@
}
}
}
.bx-dual-number-stepper {
> span {
display: block;
font-family: var(--bx-monospaced-font);
font-size: 13px;
white-space: pre;
margin: 0 4px;
text-align: center;
}
> div {
input[type=range] {
display: block;
width: 100%;
min-width: 180px;
background: transparent;
color: #959595 !important;
appearance: none;
padding: 8px 0;
range-track() {
background: linear-gradient(90deg, #fff var(--from), var(--bx-primary-button-color) var(--from) var(--to), #fff var(--to) 100%);
height: 8px;
border-radius: 2px;
}
range-track-hover() {
background: linear-gradient(90deg, #fff var(--from), #006635 var(--from) var(--to), #fff var(--to) 100%);
}
thumb() {
margin-top: -4px;
appearance: none;
width: 4px;
height: 16px;
background: #00b85f;
border: none;
border-radius: 2px;
}
thumb-hover() {
background: #fb3232;
}
&::-webkit-slider-runnable-track {
range-track()
}
&::-moz-range-track {
range-track()
}
&::-webkit-slider-thumb {
thumb();
}
&::-moz-range-thumb {
thumb();
}
&:hover, &&:active, &:focus {
&::-webkit-slider-runnable-track {
range-track-hover();
}
&::-moz-range-track {
range-track-hover();
}
&::-webkit-slider-thumb {
thumb-hover();
}
&::-moz-range-thumb {
thumb-hover();
}
}
}
}
&[data-disabled=true], &[disabled=true] {
input[type=range] {
display: none;
}
}
}

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

@@ -47,6 +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;
}
/* Fix Stream menu buttons not hiding */
@@ -73,6 +74,10 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
height: 100% !important;
}
.bx-auto-height {
height: auto !important;
}
.bx-no-scroll {
overflow: hidden !important;
}
@@ -125,6 +130,10 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
font-family: var(--bx-promptfont-font) !important;
}
.bx-monospaced {
font-family: var(--bx-monospaced-font) !important;
}
.bx-line-through {
text-decoration: line-through !important;
}
@@ -270,3 +279,15 @@ div[class*=SupportedInputsBadge] {
opacity: 0;
}
}
.bx-horizontal-shaking {
animation: bx-horizontal-shaking .4s ease-in-out 2;
}
@keyframes bx-horizontal-shaking {
0% { transform: translateX(0) }
25% { transform: translateX(5px) }
50% { transform: translateX(-5px) }
75% { transform: translateX(5px) }
100% { transform: translateX(0) }
}

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

@@ -8,21 +8,6 @@
user-select: none;
-webkit-user-select: none;
.bx-focusable {
&::after {
border-radius: 4px;
}
&:focus::after {
offset = 0;
top: offset;
left: offset;
right: offset;
bottom: offset;
}
}
.bx-settings-reload-note {
font-size: 0.8rem;
display: block;

1
src/assets/css/styles.styl
View File

@@ -16,4 +16,5 @@
@import 'game-bar.styl';
@import 'stream-stats.styl';
@import 'mkb.styl';
@import 'controller.styl';
@import 'misc.styl';

78
src/assets/css/web-components.styl
View File

@@ -4,17 +4,11 @@ select.bx-select {
div.bx-select {
display: flex;
align-items: center;
align-items: stretch;
flex: 0 1 auto;
gap: 8px;
select {
// Render offscreen instead of "display: none" so we could get its size
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
visibility: hidden !important;
&:disabled {
& ~ button {
display: none;
@@ -48,7 +42,6 @@ div.bx-select {
> div {
min-height: 24px;
box-sizing: content-box;
input {
display: inline-block;
@@ -69,7 +62,7 @@ div.bx-select {
font-size: 10px;
font-weight: bold;
text-align: left;
line-height: initial;
line-height: 20px;
white-space: pre;
min-height: 15px;
align-content: center;
@@ -115,10 +108,9 @@ div.bx-select {
button.bx-button {
border: none;
height: 24px;
width: 24px;
height: auto;
padding: 0;
line-height: 24px;
color: #fff;
border-radius: 4px;
font-weight: bold;
@@ -130,6 +122,68 @@ div.bx-select {
line-height: unset;
}
}
&[data-controller-friendly=true] {
> div {
box-sizing: content-box;
}
select {
// Render offscreen instead of "display: none" so we could get its size
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
visibility: hidden !important;
}
}
&[data-controller-friendly=false] {
position: relative;
> div {
box-sizing: border-box;
label {
margin-right: 24px;
}
}
select {
&:disabled {
display: none;
}
&:not(:disabled) {
cursor: pointer;
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: block;
opacity: 0;
z-index: calc(var(--bx-settings-z-index) + 1);
&:hover {
+ div {
background: #f0f0f0;
}
}
+ div {
label {
&::after {
content: '▾';
font-size: 14px;
position: absolute;
right: 8px;
pointer-events: none;
}
}
}
}
}
}
}
.bx-select-indicators {
@@ -144,9 +198,11 @@ div.bx-select {
flex: 1;
background: #cfcfcf;
border-radius: 4px;
min-width: 1px;
&[data-highlighted] {
background: #9c9c9c;
min-width: 6px;
}
&[data-selected] {