mirror of
https://github.com/redphx/better-xcloud.git
synced 2025-06-04 22:57:19 +02:00
Update stylings of global settings UI
This commit is contained in:
redphx
parent
e45ed6f9ea
commit
d07d6127df
@ -98,34 +98,56 @@
|
||||
|
||||
.bx-settings-row {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
padding: 2px 4px;
|
||||
padding: 6px 12px;
|
||||
position: relative;
|
||||
|
||||
label {
|
||||
flex: 1;
|
||||
align-self: center;
|
||||
margin-bottom: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
&:focus-within {
|
||||
@media (hover: none) {
|
||||
background-color: #242424;
|
||||
}
|
||||
&: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;
|
||||
select {
|
||||
&:disabled {
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
text-align-last: right;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
&::before {
|
||||
content: ' ';
|
||||
border-radius: 4px;
|
||||
border: 2px solid #fff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -161,6 +183,10 @@
|
||||
&:hover {
|
||||
color: #6dd72b;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.bx-settings-custom-user-agent {
|
||||
|
||||
@ -131,7 +131,12 @@ export function setupSettingsUi() {
|
||||
'href': SCRIPT_HOME,
|
||||
'target': '_blank',
|
||||
}, 'Better xCloud ' + SCRIPT_VERSION),
|
||||
createButton({icon: BxIcon.QUESTION, label: t('help'), url: 'https://better-xcloud.github.io/features/'}),
|
||||
createButton({
|
||||
icon: BxIcon.QUESTION,
|
||||
style: ButtonStyle.FOCUSABLE,
|
||||
label: t('help'),
|
||||
url: 'https://better-xcloud.github.io/features/',
|
||||
}),
|
||||
)
|
||||
);
|
||||
$updateAvailable = CE('a', {
|
||||
@ -238,7 +243,9 @@ export function setupSettingsUi() {
|
||||
|
||||
let $control: any;
|
||||
let $inpCustomUserAgent: HTMLInputElement;
|
||||
let labelAttrs = {};
|
||||
let labelAttrs: any = {
|
||||
tabindex: '-1',
|
||||
};
|
||||
|
||||
if (settingId === PrefKey.USER_AGENT_PROFILE) {
|
||||
let defaultUserAgent = (window.navigator as any).orgUserAgent || window.navigator.userAgent;
|
||||
@ -271,7 +278,7 @@ export function setupSettingsUi() {
|
||||
} else if (settingId === PrefKey.SERVER_REGION) {
|
||||
let selectedValue;
|
||||
|
||||
$control = CE<HTMLSelectElement>('select', {id: `bx_setting_${settingId}`});
|
||||
$control = CE<HTMLSelectElement>('select', {id: `bx_setting_${settingId}`, tabindex: 0});
|
||||
$control.name = $control.id;
|
||||
|
||||
$control.addEventListener('change', (e: Event) => {
|
||||
@ -317,7 +324,7 @@ export function setupSettingsUi() {
|
||||
} else {
|
||||
$control = toPrefElement(settingId, onChange);
|
||||
}
|
||||
labelAttrs = {'for': $control.id, 'tabindex': 0};
|
||||
labelAttrs['for'] = $control.id;
|
||||
}
|
||||
|
||||
// Disable unsupported settings
|
||||
@ -325,14 +332,19 @@ export function setupSettingsUi() {
|
||||
($control as HTMLInputElement).disabled = true;
|
||||
}
|
||||
|
||||
// Make disabled control elements un-focusable
|
||||
if ($control.disabled && !!$control.getAttribute('tabindex')) {
|
||||
$control.setAttribute('tabindex', -1);
|
||||
}
|
||||
|
||||
const $label = CE('label', labelAttrs, settingLabel);
|
||||
if (settingNote) {
|
||||
$label.appendChild(CE('b', {}, settingNote));
|
||||
}
|
||||
const $elm = CE<HTMLElement>('div', {'class': 'bx-settings-row'},
|
||||
$label,
|
||||
$control
|
||||
);
|
||||
$label,
|
||||
$control,
|
||||
);
|
||||
|
||||
$wrapper.appendChild($elm);
|
||||
|
||||
@ -361,7 +373,12 @@ export function setupSettingsUi() {
|
||||
$wrapper.appendChild($reloadBtnWrapper);
|
||||
|
||||
// Donation link
|
||||
const $donationLink = CE('a', {'class': 'bx-donation-link', href: 'https://ko-fi.com/redphx', target: '_blank'}, `❤️ ${t('support-better-xcloud')}`);
|
||||
const $donationLink = CE('a', {
|
||||
'class': 'bx-donation-link',
|
||||
href: 'https://ko-fi.com/redphx',
|
||||
target: '_blank',
|
||||
tabindex: 0,
|
||||
}, `❤️ ${t('support-better-xcloud')}`);
|
||||
$wrapper.appendChild($donationLink);
|
||||
|
||||
// Show Game Pass app version
|
||||
|
||||
@ -26,7 +26,7 @@ export enum SettingElementType {
|
||||
|
||||
export class SettingElement {
|
||||
static #renderOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
|
||||
const $control = CE<HTMLSelectElement>('select') as HTMLSelectElement;
|
||||
const $control = CE<HTMLSelectElement>('select', {tabindex: 0}) as HTMLSelectElement;
|
||||
for (let value in setting.options) {
|
||||
const label = setting.options[value];
|
||||
|
||||
@ -50,7 +50,7 @@ export class SettingElement {
|
||||
}
|
||||
|
||||
static #renderMultipleOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any, params: MultipleOptionsParams={}) {
|
||||
const $control = CE<HTMLSelectElement>('select', {'multiple': true});
|
||||
const $control = CE<HTMLSelectElement>('select', {multiple: true, tabindex: 0});
|
||||
if (params && params.size) {
|
||||
$control.setAttribute('size', params.size.toString());
|
||||
}
|
||||
@ -93,7 +93,7 @@ export class SettingElement {
|
||||
}
|
||||
|
||||
static #renderNumber(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
|
||||
const $control = CE('input', {'type': 'number', 'min': setting.min, 'max': setting.max}) as HTMLInputElement;
|
||||
const $control = CE('input', {'tabindex': 0, 'type': 'number', 'min': setting.min, 'max': setting.max}) as HTMLInputElement;
|
||||
$control.value = currentValue;
|
||||
onChange && $control.addEventListener('change', (e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
@ -108,7 +108,7 @@ export class SettingElement {
|
||||
}
|
||||
|
||||
static #renderCheckbox(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
|
||||
const $control = CE('input', {'type': 'checkbox'}) as HTMLInputElement;
|
||||
const $control = CE('input', {'type': 'checkbox', 'tabindex': 0}) as HTMLInputElement;
|
||||
$control.checked = currentValue;
|
||||
|
||||
onChange && $control.addEventListener('change', e => {
|
||||
@ -149,13 +149,21 @@ export class SettingElement {
|
||||
};
|
||||
|
||||
const $wrapper = CE('div', {'class': 'bx-number-stepper'},
|
||||
$decBtn = CE('button', {'data-type': 'dec'}, '-') as HTMLButtonElement,
|
||||
$text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement,
|
||||
$incBtn = CE('button', {'data-type': 'inc'}, '+') as HTMLButtonElement,
|
||||
);
|
||||
$decBtn = CE('button', {'data-type': 'dec', tabindex: -1}, '-') as HTMLButtonElement,
|
||||
$text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement,
|
||||
$incBtn = CE('button', {'data-type': 'inc', tabindex: -1}, '+') as HTMLButtonElement,
|
||||
);
|
||||
|
||||
if (!options.disabled && !options.hideSlider) {
|
||||
$range = CE('input', {'type': 'range', 'min': MIN, 'max': MAX, 'value': value, 'step': STEPS}) as HTMLInputElement;
|
||||
$range = CE('input', {
|
||||
type: 'range',
|
||||
min: MIN,
|
||||
max: MAX,
|
||||
value: value,
|
||||
step: STEPS,
|
||||
tabindex: 0,
|
||||
}) as HTMLInputElement;
|
||||
|
||||
$range.addEventListener('input', e => {
|
||||
value = parseInt((e.target as HTMLInputElement).value);
|
||||
$text.textContent = renderTextValue(value);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user