some tweaks to the roblox site
update: fix some button colors
Roblox Tweaks by ceat-ceat
Details
Authorceat-ceat
LicenseGPL-3.0-or-later
Categoryroblox.com
Created
Updated
Code size12 kB
Code checksumd0563c53
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
there are some settings. first class support for BTRoblox, usage of the extension is recommended but not required for a good experience
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Roblox Tweaks
@namespace github.com/ceat-ceat/userstyles
@version 1.8.3
@description some BTRoblox-first tweaks to the roblox site, please use BTRoblox with this!
@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 oldBgColors "Use old background colors" 0
@var checkbox oldPlayBtnColor "Use old play button color" 1
@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;
--play-btn-color: oldPlayBtnColor ? #00b06f : #335fff;
}
.dark-theme {
--content-bg: oldBgColors ? #232527 : #121215;
--section-bg: oldBgColors ? #393b3d : #272930;
--input-bg: oldBgColor ? rgba(0,0,0,0.5) : rgba(208,217,251,.08);
--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);
--box-shadow-s: 0 0 4px 0 rgba(0, 0, 0, 0.5);
--box-shadow-m: 0 0 8px 0 rgba(0, 0, 0, 0.5);
--box-shadow-l: 0 0 16px 0 rgba(0, 0, 0, 0.5);
--box-shadow-xl: 0 0 32px 0 rgba(0, 0, 0, 0.5);
}
.light-theme {
--content-bg: oldBgColors ? #f2f4f5 : #fff;
--section-bg: oldBgColors ? #fff : #f7f7f8;
--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;
--box-shadow-s: 0 0 4px 0 rgba(0, 0, 0, 0.25);
--box-shadow-m: 0 0 8px 0 rgba(0, 0, 0, 0.25);
--box-shadow-l: 0 0 16px 0 rgba(0, 0, 0, 0.25);
--box-shadow-xl: 0 0 32px 0 rgba(0, 0, 0, 0.25);
}
#container-main,
#content,
.content,
#footer-container,
.dark-theme
.layer {
background-color: var(--content-bg) !important;
}
if oldBgColors {
.asset-thumb-container {
background-color: transparent !important;
}
}
/* play button */
button[data-testid="play-button"],
.btn-growth-sm,
.btn-growth-md,
.btn-growth-lg,
#join-game-button,
.cart-number-container {
background-color: var(--play-btn-color) !important;
}
.btr-game-playbutton {
background-color: var(--play-btn-color) !important;
border-color: var(--play-btn-color) !important;
color: white !important;
}
.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;
}
}
/* fix background color being incorrect on option selects in dark mode */
.dark-theme .rbx-select-group .rbx-select option {
background-color: #232527 !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: var(--box-shadow-xl);
.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);
}
/* fix the badge image anomalies that roblox pushes to prod sometimes */
.game-badges-list .badge-row .badge-image {
a, .badge-image-container, img {
display: block;
width: 100% !important;
height: 100% !important;
}
}
/* round stuff generally */
.section-content:not(.section-content.remove-panel) {
border-radius: 5px;
box-shadow: var(--box-shadow-xl);
background-color: var(--section-bg) !important;
}
.social-icon, .social-link-icon {
border-radius: 10px;
}
ul[role="tablist"], ul[role="tablist"]:not(.active) .rbx-tab-heading {
background-color: var(--section-bg) !important;
}
/* reverse renaming of Discover to Charts */
.nav-menu-title {
&[href="/charts"] {
position: relative;
visibility: hidden;
&::after {
visibility: visible;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
content: chartsText;
}
}
}
/* reverse renaming of Catalog to Marketplace */
if bringBackCatalog {
.nav-menu-title {
&[href="/catalog"] {
position: relative;
visibility: hidden;
&::after {
visibility: visible;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
content: "Catalog";
}
}
}
}
/* 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: var(--box-shadow-l);
}
.nav-tabs {
box-shadow: var(--box-shadow-l);
border-radius: 4px;
}
.input-field {
box-shadow: var(--box-shadow-m) !important;
background-color: var(--input-bg) !important;
}
.game-card-thumb-container {
box-shadow: var(--box-shadow-xl) !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);
}
}
@-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: var(--box-shadow-m);
}
:not(:has(btroblox)) {
.rbx-friends-game-server-item, .rbx-game-server-item {
.card-item {
border-radius: 4px;
box-shadow: var(--box-shadow-m);
}
}
}
}
@-moz-document url-prefix("https://www.roblox.com/catalog"), url-prefix("https://web.roblox.com/catalog") {
.buy-robux {
display: none !important;
}
.catalog-header, .search-bars, .topic-container {
background-color: var(--content-bg) !important;
}
}
@-moz-document regexp("https://w(ww|eb)\\.roblox\\.com/users/\\d+/profile") {
#nav-profile {
...