Roblox Tweaks by ceat-ceat

/* ==UserStyle==
@name           Roblox Tweaks
@namespace      github.com/ceat-ceat/userstyles
@version        1.8.0
@description    some tweaks to the roblox site
@preprocessor   stylus
@license        GPL-3.0-or-later
@author         ceat_ceat (https://ceat.neocities.org/)
@var            select   chartsText       "'Charts' display text"              ["'Charts'*", "'Discover'", "'Games'"]
@var            checkbox bringBackCatalog "'Catalog' instead of 'Marketplace'" 1
@var            checkbox showRec          "Show recommended games"             1
@var            checkbox showSponsored    "Show sponsored games (Home)"        1
@var            checkbox showBtrBlog      "Show BTRoblox blog feed"            1
@var            checkbox roundAvs         "Circular avatars"                   1
@var            checkbox noAvBg           "Transparent avatar backgrounds"     1
@var            checkbox robuxOnHover     "Show robux on hover"                1
==/UserStyle== */

@-moz-document domain("roblox.com") {
    :root {
        --home-rec-games-display: showRec ? blockblock : none;
        --home-sponsored-games-display: showSponsored ? blockblock : none;
        --btr-blog-display: showBtrBlog ? contents: none;
        --av-border-radius: roundAvs ? 50% : 16px;
        --av-border-radius-sm: roundAvs ? 50% : 8px;
        --av-border-radius-xs: roundAvs ? 50% : 4px;
    }

    .dark-theme {
        --content-bg: #232527;
        --left-nav-text-base: #bdbebe;
        --left-nav-text-hover: #fff;
        --left-nav-icon-hover: brightness(2);
        --item-card-thumb-border: #393b3d;
        --av-bg: noAvBg ? transparent : rgba(57, 59, 61, 0.5);
    }
    .light-theme {
        --content-bg: #f2f4f5;
        --left-nav-text-base: #606162;
        --left-nav-text-hover: #393b3d;
        --left-nav-icon-hover: brightness(0.5);
        --item-card-thumb-border: #d0d9e1;
        --av-bg: noAvBg ? transparent : #d4d4d4;
    }


    .avatar-card-image {
        background-color: var(--av-bg) !important;
        border-radius: var(--av-border-radius) !important;
    }
    .avatar-headshot-sm .avatar-card-image {
        border-radius: var(--av-border-radius-sm) !important;
    }
    .avatar-headshot-xs .avatar-card-image {
        border-radius: var(--av-border-radius-xs) !important;
    }
    #avatar-image {
       border-radius: var(--av-border-radius);
       img {
           background-color: var(--av-bg) !important;
       }
    }
    /*   covers avatars from places like the group page   */
    .avatar-container .avatar-card-image, .avatar-container img {
        background-color: var(--av-bg) !important;
    }
    .avatar .thumbnail-2d-container {
        background-color: var(--av-bg) !important;
        border-radius: var(--av-border-radius-xs) !important;
    }

    /* hide recommended games */
    .game-home-page-container div div[data-testid="home-page-game-grid"] {
        display: var(--home-rec-games-display);
    }

    /* show robux on hover */
    if robuxOnHover {
        #nav-robux-amount {
            display: none !important;
        }
        #nav-robux-icon:hover #nav-robux-amount {
            display: inline-block !important;
        }
    }


    /* condense sidebar*/
    #navigation {
        width: 50px;
        transition-duration: 0.25s;
        background-color: var(--content-bg);
        border: none;
        box-shadow: none;
        &:hover {
            width: 175px;
            box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.5);
            .rbx-left-col .font-header-2 {
                display: inline-block;
            }
        }
    }
    /* adjust content for new sidebar size */
    #container-main {
        margin-left: 45px;
    }
    /* move text slightly to the right to hide when condensed */
    .rbx-left-col .font-header-2 {
        transform: translate(10px, 0);
    }

    #header {
        background-color: var(--content-bg);
        border: none;
    }


    #btr-blogfeed-container {
       display: var(--btr-blog-display);
    }


    /* round stuff generally */
    .section-content:not(.section-content.remove-panel) {
        border-radius: 5px;
        box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.3);
    }
    .social-icon, .social-link-icon {
        border-radius: 10px;
    }


    /* reverse renaming of Discover to Charts */
    .nav-menu-title {
        &[href="/charts"]::after {
            visibility: visible;
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
            content: chartsText;
        }
        &[href="/charts"] {
            position: relative;
            visibility: hidden;
        }
    }

    /* reverse renaming of Catalog to Marketplace */
    if bringBackCatalog {
        .nav-menu-title {
            &[href="/catalog"]::after {
                visibility: visible;
                position: absolute;
                left: 50%;
                transform: translate(-50%, 0);
                content: "Catalog";
            }
            &[href="/catalog"] {
                position: relative;
                visibility: hidden;
            }
        }
    }


    /* back catalog item backgrounds transparent with a border */
    .item-card-thumb-container {
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
        border: 2px solid var(--item-card-thumb-border) !important;
        background-color: transparent !important;
        .thumbnail-2d-container {
            background-color: transparent !important;
        }
    }

    .menu-vertical {
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.5);
    }
    .nav-tabs {
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.5);
        border-radius: 4px;
    }

    .input-field {
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3) !important;
    }
    .game-card-thumb-container {
        box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.3) !important;
    }


    #left-navigation-container .left-col-list .text-nav .font-header-2 {
        color: var(--left-nav-text-base);
    }
    #left-navigation-container .text-nav:hover .font-header-2 {
        color: var(--left-nav-text-hover);
    }

    .btr-game-playbutton {
        background-color: #00b06f !important;
        border-color: #00b06f !important;
        color: white !important;
    }
}

@-moz-document url-prefix("https://www.roblox.com/home"), url-prefix("https://web.roblox.com/home") {
    /* hide sponsored games on home page */
    .game-sort-carousel-wrapper{
        &:has(.wide-game-tile-list), &:has(a[href*="Sponsored"]) {
            display: var(--home-sponsored-games-display);   
        }
    }
}
@-moz-document url-prefix("https://www.roblox.com/games"), url-prefix("https://web.roblox.com/games") {
    .game-details-carousel-container {
        border-radius: 5px;
    }
    .badge-row {
        border-radius: 4px;
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.5);
    }
}

@-moz-document url-prefix("https://www.roblox.com/catalog"), url-prefix("https://web.roblox.com/catalog") {
    .buy-robux {
        display: none !important;
    }
}

@-moz-document regexp("https://w(ww|eb)\\.roblox\\.com/users/\\d+/profile") {
    #nav-profile {
        color: var(--left-nav-text-hover);
        filter: var(--left-nav-icon-hover);
    }
}

@-moz-document regexp("https://w(ww|eb)\\.roblox\\.com/my/messages/#!/.*") {
    #nav-message {
        color: var(--left-nav-text-hover);
        filter: var(--left-nav-icon-hover);
    }
    .messages {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .roblox-message-row {
        border-radius: 8px;
        border: none;
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.5);
    }
}

@-moz-document regexp("https://w(ww|eb)\\.roblox\\.com/users/friends#!/.+") {
    #nav-friends {
        color: var(--left-nav-text-hover);
        filter: var(--left-nav-icon-hover);
    }
    .avatar-card-container {
        border-radius: 4px;
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.5);
    }
    .avatar-card-btns, .avatar-card-content {
        background: none !important;
    }
}

@-moz-document regexp("https://w(ww|eb)\\.roblox\\.com/my/avatar") {
    #nav-character {
        color: var(--left-nav-text-hover);
        filter: var(--left-nav-icon-hover);
    }
    .avatar-back {
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.5);
        border-radius: 8px;
    }
}

@-moz-document regexp("https://w(ww|eb)\\.roblox\\.com/users/\\d+/inventory#!/.+") {
    #nav-inventory {
        color: var(--left-nav-text-hover);
        filter: var(--left-nav-icon-hover);
    }
}

@-moz-document regexp("https://w(ww|eb)\\.roblox\\.com/trades") {
    #nav-trade {
        color: var(--left-nav-text-hover);
        filter: var(--left-nav-icon-hover);
    }
}

@-moz-document regexp("https://w(ww|eb)\\.roblox\\.com/search/(groups|communities)"), regexp("https://w(ww|eb)\\.roblox\\.com/(groups|communities)/.+") {
    #nav-group {
        color: var(--left-nav-text-hover);
        filter: var(--left-nav-icon-hover);
    }
    .group-cards {
        border-radius: 4px;
    }
}

@-moz-document regexp("https://w(ww|eb)\\.roblox\\.com/premium/membership") {
    #nav-premium {
        color: var(--left-nav-text-hover);
        filter: var(--left-nav-icon-hover);
    }
}