/* ==UserStyle==
@name Roblox Modern UI Redesign
@version 20230629.16.57
@namespace userstyles.world/user/mrbossnicolas
@description This style requires you to enable dark mode in Roblox setttings!
This style was made with and might be dependent (it was used in development) on RoGold and BTRoblox, please install these extensions to ensure you see this style correctly
This style improves overall Roblox user experience and adds animated elements to make the site feel a bit more apppealing, it also adds brand new tab system and more rounded corners to ensure you will still have the modern feeling while using Roblox.
If you have any issues make sure to join our discord here: https://nicolastech.xyz/discord
@author mrbossnicolas
@license GNU General Public License
==/UserStyle== */
/* ==UserStyle==
@name Roblox Modern UI Redesign
@version 20230412.12.15
@namespace userstyles.world/user/mrbossnicolas
@description This style requires you to enable dark mode in Roblox setttings!
This style was made with and might be dependent (it was used in development) on RoGold and BTRoblox, please install these extensions to ensure you see this style correctly
This style improves overall Roblox user experience and adds animated elements to make the site feel a bit more apppealing, it also adds brand new tab system and more rounded corners to ensure you will still have the modern feeling while using Roblox.
If you have any issues make sure to join our discord here: https://nicolastech.xyz/discord
@author mrbossnicolas
@license GNU General Public License
==/UserStyle== */
@-moz-document domain("roblox.com") {
/* Main Code */
/* buttons */
.btn-common-play-game-lg {
transition: 0.3s;
border-radius: 10px !important;
background: rgb(0, 176, 111);
}
.btn-common-play-game-lg:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 176, 111, .5) !important;
}
.place-btn {
transition: 0.3s;
}
.place-btn:hover {
transform: scale(1.03, 1.03);
}
.place-btn:active {
transform: scale(0.93, 0.93);
}
.profile-view-selector.btn-secondary-xs {
border-style: none;
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, .5);
}
.btn-generic-grid-xs {
border-style: none;
}
[class*="btn-generic-"],
[class*="carousel-controls"] {
transition: 0.3s !important;
}
[class*="btn-secondary"],
.btn-more,
[class*="btn-buy"] {
transition: 0.3s !important;
box-sizing: border-box;
}
[class*="btn-secondary"]:not(.btn-common-play-game-lg):hover,
.btn-more:hover,
[class*="btn-buy"]:hover {
background-color: rgba(0, 0, 0, .2) !important;
}
[class*="btn-secondary"]:focus,
.btn-more:focus,
[class*="btn-buy"]:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, .5);
}
[class*="btn-control"] {
transition: 0.3s;
box-sizing: border-box;
}
[class*="btn-control"]:hover {
background-color: rgba(0, 0, 0, .2) !important;
}
[class*="btn-control"]:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, .5);
}
[class*="btn-alert"] {
transition: 0.3s;
}
[class*="btn-alert"]:hover {
background-color: rgba(247, 75, 82, .15) !important;
}
[class*="btn-alert"]:focus {
box-shadow: 0 0 0 0.2rem rgba(247, 75, 82, .5);
}
[class*="btn-primary"],
[class*="btn-cta"] {
transition: 0.3s;
}
[class*="btn-primary"]:not(.btn-common-play-game-lg):hover,
[class*="btn-cta"]:hover {
background-color: rgb(190, 190, 190) !important;
border-color: rgb(190, 190, 190) !important;
}
[class*="btn-primary"]:focus,
[class*="btn-cta"]:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, .5);
}
.btn-generic-more-sm {
transition: 0.3s;
}
.see-all-button {
margin: 10px !important;
}
.game-server-join-btn {
background-color: #00b06f !important;
border: none;
color: white !important;
}
.game-server-join-btn:hover {
background-color: #00b06f !important;
box-shadow: 0 0 0 0.2rem rgba(0, 176, 111, .5);
transition: 0.3s;
color: white !important;
}
.game-server-join-btn:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 176, 111, .5);
}
#confirm-btn {
transition: 0.3s;
box-sizing: border-box;
}
#confirm-btn:hover {
transform: scale(1.03, 1.03);
}
#confirm-btn:active {
transform: scale(0.93, 0.93);
}
#unfriend-btn {
transition: 0.3s;
box-sizing: border-box;
}
#unfriend-btn:focus {
box-shadow: 0 0 0 0.2rem rgba(247, 75, 82, .5);
}
#unfriend-btn:hover {
background-color: rgba(0, 0, 0, .2) !important;
}
[class*="btn-growth"] {
border: none;
background-color: rgb(0, 176, 111) !important;
transition: 0.3s;
box-sizing: border-box;
}
[class*="btn-growth"]:hover {
background-color: rgb(0, 160, 105) !important;
}
[class*="btn-growth"]:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 160, 105, .5);
}
.rbx-refresh {
background-color: transparent !important;
border-color: #bdbebe !important;
color: white !important;
border-radius: 8px !important;
padding: 0.6rem 1rem !important;
text-decoration: none !important;
transition: 0.3s !important;
font-weight: 500;
border-style: solid !important;
border-width: 1px !important;
}
.rbx-refresh:hover {
background-color: rgb(43, 46, 50) !important;
}
.rbx-refresh:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, .5);
}
.rbx-refresh::after {
display: none !important;
}
/*==========================================================*/
/* toggle button modification */
.btn-toggle[disabled] {
cursor: not-allowed !important;
}
.btn-toggle {
position: relative;
display: inline-block;
border-radius: 30px;
border: none;
cursor: pointer;
overflow: hidden;
left: 0 !important;
right: 0 !important;
transition: 0.3s;
}
.btn-toggle .toggle-flip {
position: absolute;
transition: transform 0.3s ease-in-out, background 0.3s;
transform: translateX(3px);
border-radius: 30px;
z-index: 2;
left: 0 !important;
right: 0 !important;
}
.btn-toggle .toggle-on,
.btn-toggle .toggle-off {
position: absolute;
background-color: #fff;
border-radius: 50%;
z-index: 3;
transition: transform 0.3s ease-in-out;
left: 0 !important;
right: 0 !important;
}
.btn-toggle .toggle-on {
transform: translateX(18px);
left: 0 !important;
right: 0 !important;
}
.btn-toggle.on .toggle-flip {
transform: translateX(18px);
left: 0 !important;
right: 0 !important;
}
.btn-toggle.on .toggle-on {
transform: translateX(18px);
left: 0 !important;
right: 0 !important;
}
/* better colors */
.content {
background-color: #282a2d !important;
}
.rbx-header {
background-color: #282a2d !important;
}
.dark-theme {
background-color: #282a2d !important;
}
.dark-theme .rbx-left-col {
background-color: #282a2d !important;
}
/* here continues main code!!! */
.popover {
border-radius: 10px !important;
}
.game-card-thumb-container {
border-radius: 10px !important;
}
.game-card-thumb-container span {
border-radius: 10px !important;
}
.game-card-thumb-container:before {
border-radius: 8px;
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent !important;
transition: opacity .3s linear;
opacity: 0;
}
.game-card-container {
transition: transform 0.4s, box-shadow 1s;
background-color: transparent !important;
}
.game-card-container {
background-color: transparent !important;
}
.game-card-container a {
background-color: transparent !important;
}
.game-card-container a span {
background-color: transparent !important;
}
.game-card-container a div {
background-color: transparent !important;
}
.game-card-container:hover {
transform: scale(1.04, 1.04);
}
.dynamic-overflow-container {
transition: 0.4s;
color: white !important;
}
.dynamic-overflow-container:hover {
transform: scale(1.1, 1.1);
}
#navbar-search-input {
background-color: black;
color: white;
border: none !important;
transition: transform 0.4s, box-shadow 0.3s;
}
#navbar-search-input:focus {
background-color: black;
color: white;
border: none !important;
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, .5);
}
.dropdown-menu {
border-radius: 10px;
}
.navbar-search-option {
transition: 0.4s;
}
.navbar-list-option-icon {
transition: 0.3s;
}
.navbar-search-option:hover .navbar-list-option-icon {
transform: scale(1.2, 1.2);
}
.btr-fastsearch-thumbnail-container {
transition: 0.3s;
}
.btr-fastsearch-anchor:hover .btr-fastsearch-thumbnail-container {
transform: scale(1.2, 1.2);
}
.btr-fastsearch-thumbnail-container {
transition: 0.3s;
}
.btr-fastsearch-anchor:hover .btr-fastsearch-thumbnail-container {
...
