Experience Windows 11-inspired theme for Roblox.
Acrylic Material: Windows 11 beauty in Roblox. by GustavH
Details
AuthorGustavH
LicenseThis theme is available under the Personal Use License. Feel free to customize your Roblox experience with Acrylic Material, inspired by Windows 11.
Categoryroblox.com
Created
Updated
Size7.5 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Immersive Navigation Bar: Enjoy an immersive navigation bar that will guide you efficiently through all the website's features.
Pages Compatible with Other Background Themes: Adapt to different background themes, ensuring that Acrylic Material perfectly matches the atmosphere of website.
Organization During Page Navigation: Navigate with ease and organization through all the pages of the website, improving the user experience.
Acrylic Minimalism: Enjoy a minimalist design, where simplicity meets acrylic style, providing an elegant and modern aesthetic.
Blur Effect: Acrylic Material's graphic elements feature blur effects that add an extra layer of sophistication and depth to your browsing experience.
Dynamic Buttons: Interactive and animated buttons make interacting with the website more engaging and enjoyable.
Ad Removal: Forget annoying ads that get in the way of browsing. Acrylic Material provides a distraction-free environment.
Dynamic theme: now the theme will be adapted to your original site theme, if it's light, the theme will be white, if it's dark, the theme will be dark.
Theme with third-party ports: the theme is now adaptable to other stylish themes and extensions, whether from google or firefox.
Source code
/* ==UserStyle==
@name Acrylic Material: Windows 11 beauty in Roblox.
@description Experience Windows 11-inspired theme for Roblox.
@namespace roblox.com
@author Gustav H.
@version 1.4.2
@preprocessor stylus
==/UserStyle== */
/*Note
**Terms of Use and Notices:**
Please read the following terms of use and notices carefully before using this code. By using it, you agree to the terms below:
**1. Purpose of the Code:**
This code is intended to customize the appearance of the Roblox site. It is designed to make the tabs transparent, providing a unique visual experience.
**2. Responsible Use:**
The code must be used responsibly and in accordance with the Roblox Terms of Service. Any misuse or abuse is the responsibility of the user and may result in disciplinary action by Roblox.
**3. Errors Reported by Stylus:**
The Stylus software can identify errors in the code, especially in relation to the line "background-color: rgba(0.6)". However, this is not a real error, but a setting to make the tabs transparent. Therefore, the error alerts can be ignored.
**4. License:**
This code is made available under the Microsoft Public License (MS-PL) license. You are authorized to use, modify and share the code as long as you comply with the terms of the license. See the license documentation for full details.
**5. Disclaimer:**
The author of this code assumes no responsibility for any problems or damages arising from its use. Use it at your own risk.
By using this code, you agree to the terms mentioned above. Make sure you follow all Roblox guidelines when customizing your experience on the platform.
*/
@-moz-document domain("roblox.com") {
.container-fluid {
margin: 10px;
background-color: rgba(0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
transition: all 0.5;
}
.hidden-xs .robux-menu-btn,
.hidden-xs > li:nth-child(3) > .font-header-2,
.hidden-xs > li:nth-child(2) > .font-header-2,
.hidden-xs > li:nth-child(1) > .font-header-2 {
transition: all 0.2s;
}
.hidden-xs .robux-menu-btn:hover,
.hidden-xs > li:nth-child(3) > .font-header-2:hover,
hidden-xs > li:nth-child(2) > .font-header-2:hover,
hidden-xs > li:nth-child(1) > .font-header-2:hover {
background-color: rgba(0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
.left-col-list {
margin: -5px;
}
#nav-home > .font-header-2,
#nav-message > .font-header-2,
#nav-profile > .font-header-2,
#nav-friends > .font-header-2,
#nav-inventory > .font-header-2,
#nav-character > .font-header-2,
#nav-trade > .font-header-2,
#nav-group > .font-header-2,
#nav-blog > .font-header-2,
#nav-shop > .font-header-2,
#nav-giftcards > .font-header-2 {
transition: 0 0 10px rgba(255, 255, 255, 0.6);
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
#nav-home > .font-header-2:hover,
#nav-message > .font-header-2:hover,
#nav-profile > .font-header-2:hover,
#nav-friends > .font-header-2:hover,
#nav-inventory > .font-header-2:hover,
#nav-character > .font-header-2:hover,
#nav-trade > .font-header-2:hover,
#nav-group > .font-header-2:hover,
#nav-blog > .font-header-2:hover,
#nav-shop > .font-header-2:hover,
#nav-giftcards > .font-header-2:hover {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
#upgrade-now-button {
margin: 5px;
margin-left: -5px;
transition: all 0.3s;
}
#upgrade-now-button:hover {
background-color: rgba(0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
#skip-to-main-content {
display: none;
}
.user-name-container {
background-color: rgba(0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 5px;
border-radius: 10px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
.user-avatar-container img {
border-radius: 40%;
}
.user-avatar-container > .thumbnail-2d-container {
border-radius: 40%;
width: 100px;
height: 100px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
#container-main {
}
#navigation {
margin: 10px;
margin-left: -10px;
background-color: rgba(0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
#content {
margin: 10px;
background-color: rgba(0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
.robux-text-small,
.caption,
.text-dark-2,
h4 {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
.robux-text-small:hover,
.caption:hover,
.text-dark-2:hover,
h4:hover {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.text-dark-2,
h4 {
transition: all 0.2s;
}
.text-dark-2:hover,
h4:hover {
background-color: rgba(0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 5px;
border-radius: 10px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
hr {
border-color: rgba(255, 255, 255, 0.2);
}
hr:hover {
border-color: rgba(255, 255, 255, 0.4);
}
.robux-amount-amount,
.human-limited-time-sale-text {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
.robux-amount-amount:hover,
.human-limited-time-sale-text:hover {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.robux-nav-menu-container {
background-color: rgba(0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 5px;
border-radius: 10px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
ul.nav > li > a {
transition: 0 0 10px rgba(255, 255, 255, 0.6);
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
ul.nav > li > a:hover {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
.nav.navbar-nav.navbar-right > li.dropdown:hover > a {
transition: 0 0 5px rgba(255, 255, 255, 0.6);
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
.nav.navbar-nav.navbar-right > li.dropdown.open > a {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
.btn.btn-flat.btn-primary.btn-growth-xs {
margin: 10px;
background-color: rgba(0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
transition: all 0.3s;
}
.btn.btn-flat.btn-primary.btn-growth-xs:hover {
background-color: rgba(0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
.robux-amount-amount {
transition: 0 0 10px rgba(255, 255, 255, 0.6);
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
.robux-amount-amount:hover {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
}