RGU Pen - Alpha by Chplayz

/* ==UserStyle==
@name           RGU Pen - Alpha 
@namespace      roblox.com While using Rogold Ultimate
@version        0.0.1.0
@description    RGU Pen is a way to enhance your Rgu theming experience and more.
Made by former RGU Stylex dev.
This user style is meant to pair with Rogold Ultimate, so it will bug out if you don't have it.
@author         Chplayz
@advanced dropdown betterThemeing " Better Themeing *Early Alpha* " {
betterThemeingOff " Off " <<<EOT
.dark-theme .avatar-container .avatar-card-image, .dark-theme .avatar-container img {
background: var(--backgroundColor);
}
.dark-theme .thumbnail-2d-container {
background: var(--transparentThemeBase) !important;
}
#profile-header-dropdown-menu > div.MuiPaper-root.MuiMenu-paper.web-blox-css-tss-nkarex-Menu-paper.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation8.MuiPopover-paper.web-blox-css-mui-hjn929 {
background: var(--accentColor) !important;
}

EOT;
betterThemingOn " On *Early Alpha* " <<<EOT
.rank-num {
color: var(--accentColor) !important;
}
.rank-num {
color: var(--accentColor) !important;
}
.dark-theme .avatar-container .avatar-card-image, .dark-theme .avatar-container img {
background: var(--backgroundColor);
}
.dark-theme .thumbnail-2d-container {
background: var(--transparentThemeBase) !important;
}
.creator-preview {
background: var(--primaryColor) !important;
box-shadow: 0 0 10px var(--primaryColor, var(--third));
}
#profile-header-dropdown-menu > div.MuiPaper-root.MuiMenu-paper.web-blox-css-tss-nkarex-Menu-paper.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation8.MuiPopover-paper.web-blox-css-mui-hjn929 {
background: var(--primaryColor) !important;
}



EOT;
}
@advanced dropdown darkOrLight " Theme Base " {
darkTheme " Dark " <<<EOT
:root {
--transparentThemeBase: rgba(0, 0, 0, 0.35);
--solidThemeBase: rgb(0, 0, 0)
}
EOT;
lightTheme " Light " <<<EOT
:root {
--transparentThemeBase: rgba(255, 255, 255, 0.35);
--solidThemeBase: rgb(255, 255, 255)
}
EOT;
}
@advanced dropdown avatarImageStatus " Avatar Image " {
avatarImageOff " Off " <<<EOT
EOT;
avatarImageOn " On " <<<EOT
#home-header > div.home-userinfo-upsell-container > div.avatar.avatar-headshot-lg.card-plain.profile-avatar-image.avatar-color > span > div > span > img {
    padding: 50px;
    background-image: var(--avatarImage) !important;
    background-size: cover !important;
    }
    #navigation > ul > li:nth-child(1) > a > span > span > img {
     padding: 20px;
    background-image: var(--avatarImage) !important;
    background-size: cover !important;   
    }
EOT;
}
@advanced text avatarImage " Avatar Image link " ""
@advanced dropdown floatingStatus " Floating Sidebar & Topbar " {
floatingOff " Off " <<<EOT
EOT;
floatingOn " On " <<<EOT
#wrap #navigation.rbx-left-col {
    border-radius: 10px !important;
    min-height: 400px;
    padding-top: 50px;
    margin-top: var(--sidebarMargin);
    margin-left: var(--sidebarMargin2);
    animation-name: sidebarSwoop;
    animation-duration: 0.8s;
    height: var(--sidebarHeight)!important;
    top: 40px !important;
    left: 0px !important;
}
   @keyframes sidebarSwoop {
        from {
            margin-left: -100px;
            opacity: 0;
        }
        to {
            margin-left: var(--sidebarMargin2);
            opacity: 1;
        }
    }
.games-navigate.navigate-left {
margin-left: 0px !important;
}
.games-navigate.navigate-right {
margin-right: 0px;
}
#wrap #header.rbx-header {
        border-radius: 8px !important;
        width: calc(100% - var(--topbarWidth) * 2) !important;
        left: var(--topbarWidth);
        top: var(--topbarMargin);
        box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
        animation-name: topbarSwoop;
        animation-duration: 0.8s;
    }
     @keyframes topbarSwoop {
        from {
            margin-top: -100px;
            opacity: 0;
        }
        to {
            margin-top: var(--topbarMargin);
            opacity: 1;
        }
    }

EOT;
}
@advanced dropdown extraFloating " Extra Floating Ui " {
extraFloatingOff " Off " <<<EOT

EOT;
extraFloatingOn " On " <<<EOT
#chat-header {
bottom: 10px;
right: 10px;
}
#chat-main {
background: transparent;
}
.chat-container:not(.collapsed) .chat-main {
background: var(--secondaryColor) !important;
bottom: 10px !important;
right: 10px !important;
border-radius: 10px !important;
}
.dark-theme .dialogs .dialog-container .dialog-header {
border-radius: 10px !important;
}
.dark-theme .dialogs .dialog-container .dialog-body {
background: transparent !important;
}
.dialog-container.dialog-visible {
bottom: 5px;
border-radius: 10px !important;
}
#mCSB_1 {
height: 300px;
}
        #home-header > div.profile-banner.profile-banner-long > div {
    border-radius: 14px !important;
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
}
#home-header .profile-banner .badges-holder, #profile-header-container .profile-banner .badges-holder {
   border-radius: 14px !important;
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
}
#chat-main {
    box-shadow: -2px 0px 10px 1px 
color-mix(in srgb, rgb(255 255 255 / 0%), #00000000 20%) !important;
}
EOT;
}
@advanced dropdown roundedUi " Extra Rounded UI " {
roundedUiOff " Off " <<<EOT

EOT;
roundedUiOn " On " <<<EOT
#game-details-play-button-container > button {
border-radius: 360px !important;
}
#game-detail-page #voting-section {
    border-radius: 360px !important;
}
.fav-buttons {
border-radius: 360px !important;
}
.carousel-controls.btn-primary-md {
border-radius: 360px !important;
}
.leaderboard-btn, .rewards-btn {
border-radius: 360px !important;
}
.quick-play:not(.quick-edit) {
border-radius: 360px !important;
}
#rogold-badges-container .badge-filter-controls {
border-radius: 25px !important;
}
#rogold-badges-container .rogold-badge-item {
border-radius: 50px !important;
}
#rogold-badges-container .badge-search input {
border-radius: 50px !important;
}
#rogold-badges-container .badge-filter-dropdown select {
border-radius: 50px !important;
}
#rogold-badges-container .badge-sort-toggle button, #rogold-badges-container .badge-view-toggle button {
border-radius: 50px !important;
}
#rogold-badges-container .badge-pagination .pagination-button {
border-radius: 50px !important;
}
#rogold-badges-container .badge-pagination .pagination-info {
border-radius: 50px !important;
}
EOT;
}
@advanced dropdown themedAvatarEffects " Themed Avatar Effects " {
themedAvatarEffectsOff " Off " <<<EOT

EOT;
themedAvatarEffectsOn " On " <<<EOT
    .effect2:before {
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    overflow: visible;
    background: radial-gradient(circle, var(--avatarEffectColor) 0%, var(--accentColor) 100%) 0% 0% / 400%;
    animation: 20s linear 0s infinite normal none running gradientanimate;
} 
.effect2:after {
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    overflow: visible;
    background: radial-gradient(circle, var(--avatarEffectColor) 0%, var(--accentColor) 100%) 0% 0% / 400%;
    animation: 20s linear 0s infinite normal none running gradientanimate;
}
.effect2 {
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    overflow: visible;
    background: radial-gradient(circle, var(--avatarEffectColor) 0%, var(--accentColor) 100%) 0% 0% / 400%;
    animation: 20s linear 0s infinite normal none running gradientanimate;
}
     .effect4 {
    background: linear-gradient(45deg, var(--accentColor) 0%, var(--avatarEffectColor) 100%) !important;
    }
    .effect5 {
        box-shadow: 0 0 10px var(--avatarEffectColor), 0 0 20px var(--avatarEffectColor), 0 0 30px var(--avatarEffectColor), 0 0 40px var(--avatarEffectColor) !important;
        border: 3px solid 0% var(--avatarEffectColor) !important;
    }
    0% {
    box-shadow: 0 0 5px var(--avatarEffectColor), 0 0 10px var(--avatarEffectColor), 0 0 15px var(--avatarEffectColor), 0 0 20px var(--avatarEffectColor);
}
    100% {
    box-shadow: 0 0 5px var(--avatarEffectColor), 0 0 10px var(--avatarEffectColor), 0 0 20px var(--avatarEffectColor), 0 0 30px var(--avatarEffectColor), 0 0 35px var(--avatarEffectColor);
}
    .effect1 {
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    background-color: transparent !important;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    border-top: 3px dashed var(--avatarEffectColor) !important;
    border-right: 3px dashed var(--avatarEffectColor) !important;
    border-left: 3px dashed var(--theme-color-primary) !important;
    border-bottom: 3px dashed var(--theme-color-primary) !important;
    animation: 10s linear 0s infinite normal none running spin;
}
       .spin {
    z-index: 0;
    position: absolute;
    width: 111px;
    height: 111px;
    background: #ffffff00;
    border-radius: 50%;
    }
    .effect3 {
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 0 2px var(--avatarEffectColor), 0 0 5px #000, inset 0 0 5px #000;
    }
      .effect3::before {
    content: "";
    position: absolute;
    width: 150%;
    height: 150%;
    background: repeating-linear-gradient( White 0%, White 7.5px, var(--avatarEffectColor) 7.5px, var(--avatarEffectColor) 15px, White 15px, White 22.5px, var(--avatarEffectColor) 22.5px, var(--avatarEffectColor) 30px);
    transform: translateX(-20%) translateY(-20%) rotate(-45deg);
    animation: stripe 20s linear inf...