better-xcloud/src/assets/css/root.styl

:root {
    --bx-title-font: Bahnschrift, Arial, Helvetica, sans-serif;
    --bx-title-font-semibold: Bahnschrift Semibold, Arial, Helvetica, sans-serif;
    --bx-normal-font: "Segoe UI", Arial, Helvetica, sans-serif;
    --bx-monospaced-font: Consolas, "Courier New", Courier, monospace;
    --bx-promptfont-font: promptfont;

    --bx-button-height: 36px;

    --bx-default-button-color: #2d3036;
    --bx-default-button-hover-color: #515863;
    --bx-default-button-disabled-color: #8e8e8e;

    --bx-primary-button-color: #008746;
    --bx-primary-button-hover-color: #04b358;
    --bx-primary-button-disabled-color: #448262;

    --bx-danger-button-color: #c10404;
    --bx-danger-button-hover-color: #e61d1d;
    --bx-danger-button-disabled-color: #a26c6c;

    --bx-toast-z-index: 9999;
    --bx-dialog-z-index: 9101;
    --bx-dialog-overlay-z-index: 9100;
    --bx-remote-play-popup-z-index: 9090;
    --bx-stats-bar-z-index: 9010;
    --bx-stream-settings-z-index: 9001;
    --bx-mkb-pointer-lock-msg-z-index: 9000;
    --bx-stream-settings-overlay-z-index: 8999;
    --bx-game-bar-z-index: 8888;
    --bx-wait-time-box-z-index: 100;
    --bx-screenshot-animation-z-index: 1;
}

@font-face {
    font-family: 'promptfont';
    src: url('https://redphx.github.io/better-xcloud/fonts/promptfont.otf');
}

/* Fix Stream menu buttons not hiding */
div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module__hiddenContainer]) {
    opacity: 0;
    pointer-events: none !important;
    position: absolute;
    top: -9999px;
    left: -9999px;
}

/* Remove the "Cloud Gaming" text in header when the screen is too small */
@media screen and (max-width: 600px) {
    header a[href="/play"] {
        display: none;
    }
}

.bx-full-width {
    width: 100% !important;
}

.bx-full-height {
    height: 100% !important;
}

.bx-no-scroll {
    overflow: hidden !important;
}

.bx-gone {
    display: none !important;
}

.bx-offscreen {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    visibility: hidden !important;
}

.bx-hidden {
    visibility: hidden !important;
}

.bx-invisible {
    opacity: 0;
}

.bx-unclickable {
    pointer-events: none;
}

.bx-pixel {
    width: 1px !important;
    height: 1px !important;
}

.bx-no-margin {
    margin: 0 !important;
}

.bx-no-padding {
    padding: 0 !important;
}

.bx-prompt {
    font-family: var(--bx-promptfont-font);
}

select[multiple] {
    overflow: auto;
}

/* Hide UI elements */
#headerArea, #uhfSkipToMain, .uhf-footer {
    display: none;
}

div[class*=NotFocusedDialog] {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0px !important;
    height: 0px !important;
}

#game-stream video:not([src]) {
    visibility: hidden;
}

/* Hide Controller icon in Game tiles */
div[class*=SupportedInputsBadge] {
    &:not(:has(:nth-child(2))), svg:first-of-type {
        display: none;
    }
}


.bx-game-tile-wait-time {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: #0000008c;
    display: none;
    border-radius: 0 0 4px 0;
    align-items: center;
    padding: 4px 8px;

    a[class^=BaseItem-module__container]:focus &,
    button[class^=BaseItem-module__container]:focus & {
        display: flex;
    }

    svg {
        width: 14px;
        height: 16px;
        margin-right: 2px;
    }

    span {
        display: inline-block;
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        font-weight: bold;
    }
}