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

Make Settings UI can be interacted using controller

Browse Source
This commit is contained in:
redphx 2023-07-19 09:03:36 +07:00
parent 2836eeb6ed
commit 89ea55774b
1 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
better-xcloud.user.js
View File

@ -193,7 +193,7 @@ function addCss() {
padding: 8px; padding: 8px;
} }
.better_xcloud_settings_button:hover, .better_xlcoud_settings_button:focus { .better_xcloud_settings_button:hover, .better_xcloud_settings_button:focus {
background-color: #515863; background-color: #515863;
} }
@ -225,11 +225,23 @@ function addCss() {
font-weight: bold; font-weight: bold;
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
color: #5dc21e;
}
@media (hover: hover) {
.better_xcloud_settings_wrapper a:hover {
color: #83f73a;
}
}
.better_xcloud_settings_wrapper a:focus {
color: #83f73a;
} }
.better_xcloud_settings_wrapper .setting_row { .better_xcloud_settings_wrapper .setting_row {
display: flex; display: flex;
margin-bottom: 8px; margin-bottom: 8px;
padding: 2px 4px;
} }
.better_xcloud_settings_wrapper .setting_row label { .better_xcloud_settings_wrapper .setting_row label {
@ -238,6 +250,12 @@ function addCss() {
margin-bottom: 0; margin-bottom: 0;
} }
@media not (hover: hover) {
.better_xcloud_settings_wrapper .setting_row:focus-within {
background-color: #242424;
}
}
.better_xcloud_settings_wrapper .setting_row input { .better_xcloud_settings_wrapper .setting_row input {
align-self: center; align-self: center;
} }
@ -263,6 +281,10 @@ function addCss() {
} }
} }
.better_xcloud_settings_wrapper .setting_button:focus {
background-color: #00753c;
}
.better_xcloud_settings_wrapper .setting_button:active { .better_xcloud_settings_wrapper .setting_button:active {
background-color: #00753c; background-color: #00753c;
} }
@ -592,6 +614,7 @@ function injectSettingsButton($parent) {
} }
let $control; let $control;
let labelAttrs = {};
if (setting.id === Preferences.SERVER_REGION) { if (setting.id === Preferences.SERVER_REGION) {
$control = CE('select', {id: 'xcloud_setting_' + setting.id}); $control = CE('select', {id: 'xcloud_setting_' + setting.id});
$control.addEventListener('change', e => { $control.addEventListener('change', e => {
@ -630,17 +653,19 @@ function injectSettingsButton($parent) {
setting.value = PREFS.get(setting.id); setting.value = PREFS.get(setting.id);
$control.checked = setting.value; $control.checked = setting.value;
labelAttrs = {'for': 'xcloud_setting_' + setting.id, 'tabindex': 0};
} }
const $elm = CE('div', {'class': 'setting_row'}, const $elm = CE('div', {'class': 'setting_row'},
CE('label', {'for': 'xcloud_setting_' + setting.id}, setting.label), CE('label', labelAttrs, setting.label),
$control $control
); );
$wrapper.appendChild($elm); $wrapper.appendChild($elm);
} }
const $reloadBtn = CE('button', {'class': 'setting_button'}, 'Reload page to reflect changes'); const $reloadBtn = CE('button', {'class': 'setting_button', 'tabindex': 0}, 'Reload page to reflect changes');
$reloadBtn.addEventListener('click', e => window.location.reload()); $reloadBtn.addEventListener('click', e => window.location.reload());
$wrapper.appendChild($reloadBtn); $wrapper.appendChild($reloadBtn);