A custom glassmorphism based theme for RoGold Ultimate!
RGU Glassmorphism by luckyystarzz
Mirrored from https://github.com/valk-ryx/RGUGlassMorphism/raw/main/rgu-glassmorphism.user.styl
Details
Authorluckyystarzz
LicenseCC BY-NC-SA 4.0
Categoryroblox.com
Created
Updated
Size53 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Important Note:
This is now the "Legacy" version of RGU Glassmorphism, this is due to the complete recode being released, this also means that this theme will no longer be receiving updates. For the new version (RGU Stylex), go here: https://userstyles.world/style/15544/rgu-stylex
Legal Info:
This userstyle is licensed under the CC BY-NC-SA 4.0 license.
NOTE: THIS STYLE REQUIRES A SUBSCRIPTION TO ROGOLD ULTIMATE
Update 1.2.0:
(in order to customise the theme, go to your stylus "Manage Styles" page and click the cog next to "RGU Glassmorphism")
New major release with customizable text color, animation changes, and a whole heap more! Update log below:
- Added custom avatar editor backgrounds
- Added customizable text color (may not customize everything, please report it as a bug if anywhere is not customized)
- Added full support for the notifications popup (previously unsupported)
- Added full support for the creator preview popup (previously unsupported)
- Fixed some text boxes having a cream colored border
- Made the game page buttons and voting tabs glass instead of accent color 2
- Fixed the tab selection on the avatar editor categories
- Fixed an underlying CSS issue with some items being customized accidentally due to some body.dark-theme properties being incorrectly coded
- Fixed the border radius on the profile page avatar item viewer
- Fixed the carousel controls on the discover page
- Made the voting icons more appealing
- Made the Robux icon more appealing
- Made the inbox icon more appealing
- Made the notifications icon more appealing
- Made the settings icon more appealing
- Fixed the accidental glow on the carousel controls
- Fixed the incorrectly colored text for the message timestamps
- Fixed the glass effect on the profile page avatar item viewer
- Fixed selected top bar tab not following the set accent color
- Added fluency animations to the buttons on the settings page
- Fixed the Limited U serial number background not following the accent color
Any suggestions are highly appreciated! Please let me know if you would like to suggest a feature, my discord username is ‘valk_ryx’. Please also do the same if you find any bugs within this update!
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name RGU Glassmorphism
@namespace roblox.com
@description A custom glassmorphism based theme for RoGold Ultimate!
@version 1.2.0
@license CC BY-NC-SA 4.0
@advanced color hexAccent " Accent Color 1 (HEX) " #fc686f
@advanced color rgbAccent " Accent Color 1 (RGB) " rgb(252, 104, 111)
@advanced color textColor " Primary Text Color (HEX) " #fff
@advanced color accent2 " Accent Color 2 (HEX or RGB) " #ff9200
@advanced color playingColor " Status Color: Playing Game " #00ff4f
@advanced color onlineColor " Status Color: Online " #00aaff
@advanced color studioColor " Status Color: In Studio " #ffa600
@advanced color thumbBG " Image Thumbnail Background Color " #fecdb2
@advanced text customBanner " Custom Banner (URL) " "https://github.com/valk-ryx/RGUGlassMorphism/blob/developer-preview/themeassets/banner.png?raw=true"
@advanced text avatarBG " Avatar Editor Background (URL) " "https://github.com/valk-ryx/RGUGlassMorphism/blob/developer-preview/themeassets/avatareditorbackgroundv2.jpeg?raw=true"
@advanced color bannerGlowColor " Banner Glow (HEX or RGB) " #ffa455
@advanced color bg1 " Background Color 1 " rgba(252, 124, 92, 1)
@advanced color bg2 " Background Color 2 " rgba(252, 132, 92, 1)
@advanced color bg3 " Background Color 3 " rgba(252, 124, 92, 1)
@advanced color bg4 " Background Color 4 " rgba(252, 132, 84, 1)
@advanced color bg5 " Background Color 5 " rgba(252, 140, 70, 1)
@advanced color bg6 " Background Color 6 " rgba(252, 114, 99, 1)
@advanced color bg7 " Background Color 7 " rgba(252, 99, 112, 1)
@advanced color bg8 " Background Color 8 " rgba(252, 148, 71, 1)
@advanced color bg9 " Background Color 9 " rgba(253, 200, 48, 1)
==/UserStyle== */
@-moz-document domain("roblox.com") {
/* Root Variables */
:root {
--hexAccent: /*[[hexAccent]]*/;
--rgbAccent: /*[[rgbAccent]]*/;
--accent2: /*[[accent2]]*/;
--textColor: /*[[textColor]]*/;
--playingColor: /*[[playingColor]]*/;
--onlineColor: /*[[onlineColor]]*/;
--studioColor: /*[[studioColor]]*/;
--thumbBG: /*[[thumbBG]]*/;
--bannerUrl: url(/*[[customBanner]]*/);
--avatarBG: url(/*[[avatarBG]]*/);
--bannerGlowColor: /*[[bannerGlowColor]]*/;
--bg1: /*[[bg1]]*/;
--bg2: /*[[bg2]]*/;
--bg3: /*[[bg3]]*/;
--bg4: /*[[bg4]]*/;
--bg5: /*[[bg5]]*/;
--bg6: /*[[bg6]]*/;
--bg7: /*[[bg7]]*/;
--bg8: /*[[bg8]]*/;
--bg9: /*[[bg9]]*/;
}
/* Main CSS */
.effect2:before {
background: radial-gradient(circle, var(--rgbAccent) 0%, var(--rgbAccent) 50%, var(--rgbAccent) 100%)
}
.effect2:after {
background: radial-gradient(circle, var(--rgbAccent) 0%, var(--rgbAccent) 50%, var(--rgbAccent) 100%)
}
.profile-banner.profile-banner-long {
box-shadow: 0px 2px 20px var(--bannerGlowColor) !important;
background-image: var(--bannerUrl) !important;
}
.quick-play {
background-color: var(--hexAccent) !important;
box-shadow: 0px 2px 20px var(--rgbAccent) !important;
}
.leaderboard-btn,
.rewards-btn {
background-color: var(--hexAccent) !important;
box-shadow: 0px 2px 20px var(--rgbAccent) !important;
}
.thumbnail-2d-container img {
width: 100%;
height: 100%;
transition: opacity .5s ease;
opacity: 1;
}
#game-details-play-button-container button {
background: rgba(255, 255, 255, .35) !important;
backdrop-filter: blur(10px) !important;
transform: scale(1);
transition: all .2s;
}
#game-details-play-button-container button:hover {
transform: scale(0.95);
transition: all .2s;
}
.navbar-search {
background: rgba(255, 255, 255, .35) !important;
backdrop-filter: blur(10px) !important;
}
.btn-growth-sm:hover {
background-color: var(--hexAccent) !important;
border-color: var(--hexAccent) !important;
transform: scale(0.95);
box-shadow: 0px 2px 20px var(--rgbAccent) !important;
transition: all .2s;
}
.btn-growth-sm {
background-color: var(--hexAccent) !important;
border-color: var(--hexAccent) !important;
transform: scale(1);
transition: all .2s;
}
.chat-header-action .notification {
color: var(--textColor) !important;
background: var(--hexAccent) !important;
box-shadow: 0px 2px 20px var(--rgbAccent) !important;
}
.store-card img {
border-radius: 50%;
box-shadow: 0px 2px 20px rgba(252, 104, 111, .25);
}
.dark-theme .content {
background: linear-gradient(45deg, var(--bg1) 0%, var(--bg2) 12%, var(--bg3) 25%, var(--bg4) 40%, var(--bg5) 52%, var(--bg6) 63%, var(--bg7) 74%, var(--bg8) 87%, var(--bg9) 100%) !important;
}
#container-main {
background: linear-gradient(45deg, var(--bg1) 0%, var(--bg2) 12%, var(--bg3) 25%, var(--bg4) 40%, var(--bg5) 52%, var(--bg6) 63%, var(--bg7) 74%, var(--bg8) 87%, var(--bg9) 100%) !important;
}
#home-header.home-header-long,
#container-main .section.profile-header {
background: rgba(255, 255, 255, .35) !important;
backdrop-filter: blur(10px) !important;
}
#container-main > .content {
background: rgba(255, 255, 255, 0) !important;
}
#people-list-container .section-content,
.profile-slide-container {
background: rgba(255, 255, 255, .35) !important;
backdrop-filter: blur(10px) !important;
}
.game-carousel {
background: rgba(255, 255, 255, .35) !important;
backdrop-filter: blur(10px) !important;
}
#navigation {
background: rgba(255, 255, 255, .3) !important;
backdrop-filter: blur(10px) !important;
border-radius: 10px;
height: 800px;
padding-top: 50px;
margin-top: 65px;
margin-left: 10px
}
#header {
background: rgba(255, 255, 255, .35) !important;
backdrop-filter: blur(10px) !important;
}
.profile-display-name {
text-color: #ff6000 !important;
}
.dark-theme {
background: var(--hexAccent) !important;
}
.dark-theme .text,
scription,
.dark-theme .text-footer,
.dark-theme .text-info,
.dark-theme .text-label,
.dark-theme .text-secondary,
.dark-theme p {
color: var(--textColor) !important;
}
#horizontal-tabs,
.rbx-tabs-horizontal > .nav-tabs {
background: rgba(255, 255, 255, .35) !important;
backdrop-filter: blur(10px) !important;
}
.game-main-content {
background: rgba(255, 255, 255, .35) !important;
backdrop-filter: blur(10px) !important;
}
.fav-buttons {
background: rgba(255, 255, 255, .35) !important;
backdrop-filter: blur(10px) !important;
}
.users-vote {
border-radius: 10px;
background: rgba(255, 255, 255, .35) !important;
backdrop-filter: blur(10px) !important;
}
.game-creator .text-name {
color: var(--textColor) !important;
}
li.rbx-tab.active .rbx-tab-heading .text-lead,
li.rbx-tab:hover .rbx-tab-heading .text-lead,
.rbx-tab-heading.active .text-lead {
background-color: var(--hexAccent) !important;
box-shadow: 0px 2px 20px var(--rgbAccent) !important;
transition: all .2s;
}
.rank-num {
color: var(--hexAccent) !important;
}
body[data-internal-page-name=Home] .left-col-list li:nth-child(1),
body[data-internal-page-name=Profile] .left-col-list li:nth-child(2),
body[data-internal-page-name=Messages] .left-col-list li:nth-child(3),
body[data-internal-page-name=Friends] .left-col-list li:nth-child(4),
body[data-internal-page-name=Avatar] .left-col-list li:nth-child(5),
body[data-internal-page-name=Inventory] .left-col-list li:nth-child(6),
body[data-internal-page-name=Trades] .left-col-list li:nth-child(7),
body[data-internal-page-name=GroupDetails] .left-col-list li:nth-child(8) {
background-color: var(--hexAccent) !important;
box-shadow: 0px 2px 20px var(--rgbAccent) !important;
}
.left-col-list li:not([class]):hover {
background-color: var(--hexAccent);
transition: all .2s;
}
.popover {
background: rgba(255, 255, 255, .35) !important;
backdrop-filter: blur(10px) !important;
}
.dropdown-menu {
background: rgba(255, 255, 255, .35) !important;
backdrop-filter: blur(10px) !important;
}
body.dark-theme {
text-secondary: #fff !important;
}
.real-game-pass {
background: rgba(255, 255, 255, .35) !important;
backdrop-filter: blur(10px) !important;
}
#wrap button.btn-control-sm,
#wrap .btn-control-xs {
background: var(--rgbAccent)
}
#wrap .btn-control-xs {
color: var(--textColor) !important;
}
.dark-theme .modal-dialog .modal-content {
background: rgba(255, 255, 255, .35) !important;
backdrop-filter: blur(10px) !important;
}
.level-up-game {
background: rgba(252, 124, 92, 0) !important;
backdrop-filter: blur(10px) !important;
}
.group-header {
background-color: #fb785b;
}
.shout-container {
background: rgba(255, 255, 255, .35) !important;
backdrop-filter: blur(10px) !important;
}
.configure-group-description textarea,
.input-field {
background: rgba(252, 124, 92, 0) !important;
backdrop-filter: blur(10px) !important;
}
.group-form-button.btn-secondary-md,
#group-join-button {
background-color: var(--...