Prettier game launcher for Roblox

prettierlauncher.user.css

/* ==UserStyle==
@name           Prettier game launcher for Roblox
@namespace      https://gist.github.com/nexpid
@author         nexpid
@version        2024.16.7.1
@description    Makes the Roblox game launching modal look like the Roblox Creator Hub Studio launcher
@homepageURL    https://gist.github.com/nexpid/858f9d9d01c626a646dd8f1e7df0c5f4
@supportURL     https://gist.github.com/nexpid/858f9d9d01c626a646dd8f1e7df0c5f4
==/UserStyle== */
@-moz-document domain("roblox.com") {
    .modal-message {
        padding-bottom: 0 !important;
    }

    .modal-message .icon-logo-r-95 {
        width: 80px;
        height: 80px;
        background-size: 80px 80px;
    }

    .modal-message p {
        line-height: 140% !important;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .modal-content {
        box-shadow: rgba(0, 0, 0, 0.16) 0px 6px 20px 0px, rgba(0, 0, 0, 0.12) 0px 4px 16px 0px;
        border-radius: 12px !important;
        background-color: rgb(37, 39, 44) !important;
        min-width: 400px;
        padding: 20px 0 20px 0;
    }

    .modal-header {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 100%;
        height: 50%;
    }

    .modal-header .close {
        position: absolute;
        right: 4px;
        top: 4px;
        transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
        padding: 12px;
        border-radius: 50%;
        z-index: 10;
    }

    .modal-header .close:hover {
        background-color: rgba(229, 229, 230, 0.08);
    }

    .modal-header .close span {
        display: block;
    }

    .modal-header .close span .icon-close {
        width: 20px !important;
        height: 20px !important;
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjgzMzMgNS4zNDE2NkwxNC42NTgzIDQuMTY2NjZMOS45OTk5NiA4LjgyNDk5TDUuMzQxNjMgNC4xNjY2Nkw0LjE2NjYzIDUuMzQxNjZMOC44MjQ5NiA5Ljk5OTk5TDQuMTY2NjMgMTQuNjU4M0w1LjM0MTYzIDE1LjgzMzNMOS45OTk5NiAxMS4xNzVMMTQuNjU4MyAxNS44MzMzTDE1LjgzMzMgMTQuNjU4M0wxMS4xNzUgOS45OTk5OUwxNS44MzMzIDUuMzQxNjZaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K) !important;
    }

    .modal-btns #confirm-btn {
        font-weight: 700;
        line-height: 100%;
        padding: 10px 16px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .modal-btns #confirm-btn:hover {
        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
        background-color: #eee;
    }

    .modal-footer {
        display: none !important;
    }

    .modal-message .spinner-default {
        position: relative;
        overflow: hidden;
        display: block;
        height: 4px;
        z-index: 0;
        background-color: rgb(21, 88, 127);
        width: calc(100% - 20px);
        background-image: unset;
    }

    .modal-message .spinner-default:before {
        content: "";
        position: absolute;
        left: 0px;
        bottom: 0px;
        top: 0px;
        transition: transform 0.2s linear;
        transform-origin: left center 0px;
        background-color: rgb(43, 177, 255);
        width: auto;
        animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite animation-before;
    }

    .modal-message .spinner-default:after {
        content: "";
        position: absolute;
        left: 0px;
        bottom: 0px;
        top: 0px;
        transition: transform 0.2s linear;
        transform-origin: left center 0px;
        background-color: rgb(43, 177, 255);
        width: auto;
        animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite animation-after;
    }

    @keyframes animation-before {
        0% {
            left: -35%;
            right: 100%;
        }

        60% {
            left: 100%;
            right: -90%;
        }

        100% {
            left: 100%;
            right: -90%;
        }
    }

    @keyframes animation-after {
        0% {
            left: -200%;
            right: 100%;
        }

        60% {
            left: 107%;
            right: -8%;
        }

        100% {
            left: 107%;
            right: -8%;
        }
    }
}