Update style of the show/hide touch control button

This commit is contained in:
redphx 2024-05-11 21:12:14 +07:00
parent 0092417a6e
commit 5c9202119b
2 changed files with 16 additions and 4 deletions

View File

@ -50,6 +50,7 @@
button {
width: 60px;
height: 60px;
border-radius: 0;
svg {
width: 28px;
@ -66,6 +67,14 @@
transform: scale(0.75);
}
}
&.bx-activated {
background-color: white;
svg {
filter: invert(1);
}
}
}
/* Touch controller buttons */
@ -75,16 +84,16 @@
}
}
/* Show disable button */
/* Show enabled button */
div[data-enabled='true'] {
button:last-of-type {
button:first-of-type {
display: block;
}
}
/* Show enable button */
div[data-enabled='false'] {
button:first-of-type {
button:last-of-type {
display: block;
}
}

View File

@ -26,6 +26,7 @@ export class TouchControlAction extends BaseGameBarAction {
icon: BxIcon.TOUCH_CONTROL_ENABLE,
title: t('show-touch-controller'),
onClick: onClick,
classes: ['bx-activated'],
});
const $btnDisable = createButton({
@ -35,10 +36,12 @@ export class TouchControlAction extends BaseGameBarAction {
onClick: onClick,
});
this.$content = CE('div', {'data-enabled': 'true'},
this.$content = CE('div', {},
$btnEnable,
$btnDisable,
);
this.reset();
}
render(): HTMLElement {