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

Update styling of the Remote Play button

Browse Source
This commit is contained in:
redphx 2024-01-08 16:56:57 +07:00
parent 1b7fe7f7d0
commit 73b1142c1e
1 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
better-xcloud.user.js
View File

@ -6670,13 +6670,12 @@ setTimeout(() => { window.dispatchEvent(new Event('${BxEvent.JUMP_BACK_IN_READY}
$button.removeAttribute('aria-labelledby'); $button.removeAttribute('aria-labelledby');
$button.setAttribute('aria-label', __('remote-play')); $button.setAttribute('aria-label', __('remote-play'));
// Change card's name // Remove card's info
$button.querySelector('div[class^=GameCard-module__gameTitle___]').textContent = __('remote-play'); const $cardInfo = $button.querySelector('div[class^=BaseItem]');
$cardInfo.parentElement.removeChild($cardInfo);
// Rmove icons
$button.querySelector('div[class^=GameCard-module__children]').innerHTML = '';
const $images = $button.querySelector('div[class^=WrappedResponsiveImage]'); const $images = $button.querySelector('div[class^=WrappedResponsiveImage]');
$images.classList.add('bx-remote-play-icon-wrapper');
$images.innerHTML = ''; $images.innerHTML = '';
$images.appendChild(createSvgIcon(Icon.REMOTE_PLAY), 2); $images.appendChild(createSvgIcon(Icon.REMOTE_PLAY), 2);
@ -7145,18 +7144,28 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
} }
.bx-jump-in-li button { .bx-jump-in-li button {
width: 160px; width: 60px;
box-shadow: none !important;
} }
.bx-jump-in-li div[class^=WrappedResponsiveImage-module__imageWrapper] { .bx-jump-in-li button:not(:focus) .bx-remote-play-icon-wrapper {
background: linear-gradient(#005b2f, #001c0f); background: transparent;
} }
.bx-jump-in-li div[class^=WrappedResponsiveImage-module__imageWrapper] svg {
padding: 40px; .bx-remote-play-icon-wrapper, .bx-jump-in-li button:hover .bx-remote-play-icon-wrapper {
background: #7b7b7b1a;
}
.bx-remote-play-icon-wrapper svg {
padding: 10px;
height: 100%; height: 100%;
opacity: 80%; filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5));
filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.8)); opacity: 0.7;
}
.bx-jump-in-li button:hover .bx-remote-play-icon-wrapper svg, .bx-jump-in-li button:focus .bx-remote-play-icon-wrapper svg {
opacity: 1;
} }
a.bx-button { a.bx-button {