Roblox Galaxy by freeplay
Imported and mirrored from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/roblox/roblox-galaxy.user.css

Details
Authorfreeplay
LicenseNo License
Created
Updated
CategoryRoblox
Description
Probably slightly inspired by GOG Galaxy.
Notes
Source code
/* 1.1.7
- Disabled game cards style on large tiles, as it was broken.
*/
/* ==UserStyle==
@name ROBLOX GALAXY
@version 1.1.7
@updateURL https://codeberg.org/Freeplay/UserStyles/raw/branch/main/roblox/roblox-galaxy.user.css
@preprocessor stylus
-- AUTHOR STUFF --
@namespace Freeplay
@author Freeplay (https://freeplay.codeberg.page/)
@homepageURL https://codeberg.org/Freeplay/UserStyles
@supportURL https://codeberg.org/Freeplay/UserStyles/issues
@var color bgColor "Background Color" #0a0a20
@var text customBG "Background Image: (link in quotes)" '""'
@var range customBGblur "Background Image: Blur" [0, 0, 30, 5, "px"]
@var range customBGopacity "Background Image: Opacity" [0.2, .1, 1, .1]
@var text boop "πΏππ¨πππ‘ππ£π π©ππ π€π₯π©ππ€π£π¨ πππ‘π€π¬ πππ£ πππ‘π₯ π¬ππ©π π₯ππ§ππ€π§π’ππ£ππ" '"Okay!"'
@var checkbox cards "Full card hover animation" 1
@var checkbox blur "Blur Effects" 1
@var text donate "Donate" `"https://www.buymeacoffee.com/Freeplay"`
==/UserStyle== */
@-moz-document regexp(".+roblox.com\\/(?!.*develop).*") {
@keyframes fadeIn {
from { transform: scale(.98); opacity: 0; }
to { transform: none; opacity: 1; }
}
@keyframes slideUpIn {
from { transform: translateY(5px); opacity: .2; }
to { transform: none; opacity: 1; }
}
@keyframes slideRightIn {
from { transform: translateX(-20px); opacity: 0; }
to { transform: none; opacity: 1; }
}
@keyframes scaleIn {
from { transform: scale(1.2); filter: opacity(0) }
to { transform: none; filter: opacity(1); }
}
html {
scrollbar-color: rgba(100,100,100,0.5) transparent;
}
* {
transition: border .05s, background-color .2s, color .2s, opacity .2s;
}
noBlurColor = rgba(#190f18, .9);
noBlurColor = rgba(darken(desaturate(bgColor, 20%), 20%), .9);
#rbx-body {
--bg: bgColor;
&::before {
content: "";
position: fixed;
inset: -20vw;
// z-index: -1;
background-size: cover;
opacity: .15;
transition: transform 1s;
transform: scale(2);
pointer-events: none;
z-index: -1;
background-image: url("https://tr.rbxcdn.com/8ef4e11f2ab05d6f7e91db29387bc050/420/420/Decal/Png");
}
&:hover:before {
transform: scale(1);
}
&:not([data-internal-page-name="GameDetail"]):not(.light-theme)::after {
content: "";
position: fixed;
inset: 0;
background-size: cover;
transition: transform 1s;
transform: scale(1.03);
pointer-events: none;
z-index: -2;
background-image: url(customBG);
filter: blur(customBGblur);
opacity: customBGopacity;
}
&:hover:after {
transform: scale(1);
}
footer {
background: none;
z-index: 5;
position: relative;
.copyright-container {
border: 0;
padding-top: 0;
display: flex;
align-items: center;
p {
text-align: right;
color: white !important;
}
}
a {
color: white !important;
}
}
}
#rbx-body.dark-theme {
margin-bottom: 0;
transition: background-color .2s;
background-color: var(--bg) !important;
.section-content:not(.remove-panel), .stack-row {
background-color: rgba(0,0,0,0.2) !important;
animation: slideUpIn 1s;
}
.btn-control-sm {
background-color: rgba(0,0,0,0.4) !important;
border-color: rgba(255,255,255,.2) !important;
border: 0;
padding: 16px !important;
}
.thumbnail-2d-container, .section-content-off, .nav-tabs, .nav-tabs > li a {
background: none !important;
}
h2 {
font-weight: 300 !important;
}
h3 {
font-weight: 400;
font-size: 1em;
opacity: .8;
}
.container-header, .game-home-page-carousel-title {
// display: flex;
// flex-wrap: wrap;
// justify-content: space-between;
// align-items: center;
margin-bottom: 12px !important;
margin-top: 10px;
text-transform: uppercase;
transition: opacity .2s;
animation: fadeIn 1s;
font-size: .9em;
position: relative;
z-index: 2;
& > .ng-scope {
display: contents;
}
h3, a:first-child {
flex-grow: 1;
padding-bottom: 0 !important;
font-size: 1em;
font-weight: 500 !important;
}
a, span {
font-weight: 500 !important;
align-self: center;
font-size: .9em;
&::after {
margin-top: -1px;
}
}
// &::before {
// content: ""
// display: flex;
// width: 0px;
// border-top: 1px solid currentcolor;
// margin: auto 0;
// opacity: 0;
// transition: width .3s, margin .2s, opacity .2s;
// }
// a:focus &::before, a:hover &::before {
// width: 10px;
// border-top: 1px solid currentcolor;
// margin: auto 10px;
// opacity: 1;
// }
}
}
&::-webkit-scrollbar {
// opacity: 0;
// transition: opacity .2s;
// background: none;
// background: none;
width: 12px;
padding: 4px;
opacity: 0;
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 100px;
transition: background-color .2s;
}
:hover::-webkit-scrollbar {
width: 12px;
opacity: 1;
}
:hover::-webkit-scrollbar-thumb {
background-color: rgba(100,100,100,0.2);
}
#wrap, .nav-container {
display: flex;
flex-wrap: wrap;
overflow: visible;
max-width: 100%;
#container-main {
max-width: 100%;
width: 10px;
flex-grow: 1;
}
#games-carousel-page {
// padding: 0 20px;
}
}
#navigation-container {
background: none !important;
position: sticky;
z-index: 6;
left: 0;
#skip-to-main-content:not(:focus) {
transform translateY(-300%)
}
#header {
background: none;
border: 0;
margin: 18px 18px;
/ [data-internal-page-name="Create"] & {
filter: invert(1)
bgColor = white !important
img {
filter invert(1)
}
}
& > .container-fluid {
display: flex;
}
#header-menu-icon {
outline: none !important;
}
.rbx-navbar-header, .navbar-left, .navbar-right {
// margin-right: auto !important;
float: unset !important;
}
.rbx-navbar-header::before, .navbar-right::before {
content: "";
display: flex;
position: absolute;
// background: black;
box-shadow: 0 40px 100px var(--bg);
opacity: .7;
z-index: -1;
bottom: calc(100% + 20px);
/ [data-internal-page-name="Create"] & {
filter: brightness(0)
}
}
.navbar-right::before {
box-shadow: 0 80px 100px #33173a !important;
box-shadow: 0 80px 100px desaturate(lighten(bgColor, 8), 35%) !important;
}
.rbx-navbar-header {
margin-right: auto;
min-width: 90px;
display: flex;
flex-wrap: nowrap;
position: relative;
&::before {
right: -60px;
left: -120px;
top: -300px;
}
}
.rbx-navbar, #navbar-search-input {
background: rgba(0,0,0,0.4);
border-radius: 8px;
height: 40px;
padding: 0 4px;
align-items: center;
border: 0;
if blur {
backdrop-filter: blur(10px);
} else {
background-color: noBlurColor;
}
margin: 0;
/ [data-internal-page-name="Create"] & {
filter saturate(0)
}
}
.rbx-navbar {
width: auto !important;
flex-shrink: 100;
overflow: auto hidden;
scrollbar-width: none;
li {
text-align unset !important
// display: contents;
a {
font-weight: 400 !important;
font-size: .95em;
opacity: .9;
padding: 4px 14px;
white-space: nowrap;
}
position: relative;
&:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 12px;
bottom: 12px;
border-left: 1px solid rgba(100,100,100,0.2);
}
&:hover {
background: rgba(100,100,100,0.2);
border-radius: 8px;
border: 0;
}
}
}
.navbar-left {
float: unset !important;
}
.navbar-search {
background: none !important;
margin: 0 18px;
width: 12px;
transition: width .2s, margin .4s;
// overflow: hidden;
#navbar-search-input {
padding-left: 40px;
font-size: .9em;
max-width: 100%;
cursor: pointer;
}
.input-addon-btn {
height: 40px !important;
width: 45px !important;
display: flex;
justify-content: center;
pointer-events: none;
}
#navbar-search-clear-btn {
margin: 6.5px;
margin-right: -25px;
opacity: 0;
pointer-events: none;
transition: margin .2s, opacity .1s;
}
&:focus-within {
width: 350px;
margin: 0 25px;
#navbar-search-input {
cursor: text;
}
#navbar-search-btn {
pointer-events: all;
}
#navbar-search-clear-btn {
margin-right: 6.5px;
opacity: 1;
pointer-events: all;
}
}
}
#right-navigation-header {
display: contents;
}
.navbar-right {
// backdrop-filter: blur(10px);
border-radius: 100px;
margin-left: auto;
float: unset !important;
display: flex;
flex-wrap: nowrap;
align-items: center;
height: 40px;
position: relative;
&::before {
right: -160px;
left: -60px;
top: -200px;
}
li > span > span, #nav-ns-icon {
display: flex;
align-items: center;
}
.age-bracket-label {
padding: 0;
}
.age-bracket-label .age-bracket-label-username {
display: none;
}
}
}
#left-navigation-container {
display: contents;
}
#navigation {
display: block !important;
position: sticky;
top: 0px;
left: 0px;
visibility: visible !important;
max-height: 100vh;
height: 100vh;
overflow: hidden scroll;
scrollbar-color: transparent transparent;
/ [data-internal-page-name="Create"] & {
filter: invert(1)
--bg: white
--noBlurColor: rgba(10,10,10, 1) !important;
img {
filter invert(1)
}
}
&:hover, &:focus-within {
scrollbar-color: rgba(0,0,0,0.2) transparent;
}
box-shadow: none;
background-color: rgba(0,0,0,0.2);
if not blur {
background-color: noBlurColor;
}
transition: width .3s cubic-bezier(0.55, 0.1, 0, 1), margin .5s, opacity .2s, padding .7s, scroll !important;
// padding-left: 5px;
box-sizing: border-box !important;
opacity: 0;
margin-left: -20px;
margin-bottom: -400px !important;
padding-top: 65px !important;
.rbx-scrollbar {
width: 100% !important;
}
.simplebar-content-wrapper {
overflow: visible !important;
}
li {
transition: all .5s !important;
width: 100% !important;
}
&.nav-show {
margin-left: 0px;
width: 190px;
padding-left: 6px;
opacity: 1;
if blur {
backdrop-filter: blur(40px);
}
}
.rbx-divider {
display: none;
}
.rbx-scrollbar {
height: auto !important;
overflow: visible !important;
}
.simplebar-content-wrapper {
overflow: visible !important;
}
.simplebar-track {
display: none;
}
.left-col-list {
width: 100%;
}
li {
margin: 0;
}
.left-col-list .text-nav, ul a {
padding: 5px 0;
margin: 0 !important;
& > div > span {
transform: scale(.75);
opacity: .8;
}
& > span:not(.avatar), & > .font-header-2 {
margin-left: 7px;
font-weight: 300 !important;
font-size: .96em !important;
opacity: .8;
}
& > .font-header-2 {
font-weight: 500 !important;
}
&:hover {
& > .font-header-2, span {
opacity: 1;
}
}
&#upgrade-now-button {
margin: 1em .5em !important;
}
}
.rbx-nav-sponsor {
overflow: hidden;
padding-bottom: 20px;
img {
border-radius: 8px;
}
}
}
}
@media only screen and (min-width: 1688px) {
#navigation {
width: 220px !important;
padding-top: 70px !important;
margin: 0 !important;
// margin-right: -100px !important;
opacity: 1 !important;
padding-left: 10px !important;
backdrop-filter: blur(20px);
}
}
// Fixes for create page
#navContent {
margin-left: auto;
margin-right: auto;
margin-top: 80px;
width 100%
}
#BodyWrapper, #Body, #MyCreationsTab {
background: none !important;
}
.alert-system-feedback .alert.alert {
top: -100vh
}
@media only screen and (min-width: 992px) {
#container-main {
flex-grow: 1;
width: 0px;
animation: fadeIn 1s;
padding-bottom: 100px;
position: sticky;
bottom: 0;
}
.content {
position: relative;
padding: 0 40px;
margin-left: auto !important;
margin-right: auto !important;
// margin: 0 40px;
box-sizing: content-box;
margin-top: 60px;
// width: 0;
flex-grow: 1;
// min-width: calc(100% !important;
// max-width: 1200px;
background: none !important;
scrollbar-width: none;
display: grid;
grid-template-columns: 1fr auto auto;
// justify-content: center;
justify-content: flex-end;
& > div:not([id*="Skyscraper-"]) {
width: 100%;
grid-column: 1;
}
&::before {
content: unset;
}
#Leaderboard-Abp {
grid-row: 1;
grid-column: 1 / span 2;
margin-top: -30px !important;
margin-bottom: 10px;
// padding-top: 0 !important;
// margin-bottom: 40px;
& ~ [class*="-container"] {
grid-row: 2;
}
}
#Skyscraper-Abp-Right, #Skyscraper-Abp-Left {
border-radius: 8px;
margin: 0 !important;
margin-left: 30px !important;
margin-top: 40px !important;
margin-right: -20px !important;
transform: scale(.9);
overflow: hidden;
background: rgba(0,0,0,0.2);
grid-column: 2;
}
#Skyscraper-Abp-Left {
grid-row: 2;
z-index: 2;
&:empty {
height: auto !important;
max-width: 0 !important;
min-height: unset;
display: block !important;
margin: 0 !important;
}
}
#Skyscraper-Abp-Right {
grid-row: 3;
position: sticky;
top: 60px;
}
#HomeContainer, .page-content {
// float: left;
grid-row: 2 / span 3;
margin: auto;
}
#group-container {
// grid-row: 1 / span 2;
}
#ItemPurchaseAjaxData {
position: absolute;
}
#home-header {
display: none;
}
}
#HomeContainer {
width: 100%;
max-width: 1080px;
// padding: 0 20px;
}
}
.content {
background: none !important;
padding: 0 40px;
}
.alert-container {
width: max-content;
margin: auto;
max-width: 100%;
}
.alert-container .alert-info {
background: rgba(200,50,50,0.5);
margin: 60px 40px;
margin-bottom: -40px !important;
color: inherit;
opacity: .9;
padding: 15px;
border-radius: 8px;
backdrop-filter: blur(10px);
}
.alert-system-feedback .alert {
top: -60px;
}
/* Games Page */
#rbx-body[data-internal-page-name="GameDetail"] {
overflow-x: hidden;
.game-main-content {
background: none !important;
display flex
flex-wrap wrap
justify-content space-between
gap 20px
&::before, &::after {
content unset !important
}
}
#game-details-carousel-container {
border-radius: 8px;
background-color: rgba(0,0,0,0.4);
overflow: visible !important;
margin 0 auto
img, iframe {
border-radius: 8px;
}
.shimmer {
opacity: .2;
background-color: transparent !important;
}
// Use inactive slides as background
.thumbnail-2d-container:not(.carousel-item-active) {
&:last-child, &:nth-last-child(2) {
opacity: 1 !important;
pointer-events: none;
// z-index: 9999;
position: absolute;
left: -1500px;
top: -160px;
right: -2020px;
bottom: -400px;
img {
// background-position: ;
// position: fixed;
// mask: linear-gradient(black, rgba(0,0,0,0.5), rgba(0,0,0,0), transparent);
// mask: -webkit-radial-gradient(circle closest-side top, #010101, #DE30F100, transparent);
// mask: -moz-radial-gradient(circle closest-side top, #010101, #DE30F100, transparent);
mask: radial-gradient(at 50% 0%, black, rgba(0,0,0,0.1), transparent, transparent) !important;
-webkit-mask: radial-gradient(at 50% 0%, black, rgba(0,0,0,0.1), transparent, transparent) !important;
inset: 0;
// background: radial-gradient(at 50% 0%, black, white) !important;
opacity: .8 !important;
// opacity: 0 !important
// object-fit: contain;
// object-position: 1200px 1200px;
object-fit: cover;
filter: blur(4px);
transform: scale(1.01) translateY(0%) rotate(-.2deg);
visibility: visible !important;
z-index: 100;
transition: transform 1s !important;
}
}
}
}
.game-calls-to-action {
background-color: rgba(0,0,0,0.4) !important;
border-radius: 8px;
padding: 25px !important;
width: 300px;
max-height: 360px;
height auto !important
flex-grow 1 !important
// display: flex;
flex-direction: column;
justify-content: space-between;
// align-items center
// backdrop-filter: blur(10px);
.game-title-container {
display: flex;
flex-direction: column;
height 0
flex-grow 1
h2 {
padding: 0 !important;
font-weight: 700 !important;
}
.game-creator {
order: -1;
span, a {
font-weight: 300 !important;
}
}
}
.game-buttons-container {
// position: relative;
top: unset;
width: unset !important;
padding: 0;
.favorite-follow-vote-share {
padding-top: 20px;
}
.social-media-share {
display: none;
}
}
}
.content {
display: grid;
grid-template-columns: calc(100% - 240px) 200px;
// grid-template-columns: calc(100% - 525px) 475px;
grid-column-gap: 40px;
* {
grid-column: 1;
}
#game-detail-page {
display: contents;
}
#Leaderboard-Abp {
grid-row: 6 !important;
margin: 0 !important;
// grid-column: 1 / span 2;
}
.game-main-content {
grid-column: 1 / span 2;
grid-row: 2;
}
#Skyscraper-Abp-Right {
position: static;
grid-row: 5 / span 10;
grid-column: 2;
height: max-content;
margin: 0 !important;
width: 200px;
transform: unset !important;
max-width: unset !important;
margin-top: 3em !important;
padding: 20px;
iframe {
border-radius: inherit !important;
}
}
.text {
color: white;
}
.rbx-tabs-horizontal {
display: contents;
#horizontal-tabs {
grid-column: 2;
display: flex;
flex-direction: column;
grid-row: 3;
background: none !important;
li {
width: 100%;
margin-bottom: .5em;
background: none !important;
a {
background-color: rgba(0,0,0,0.3) !important;
border-radius: 8px;
box-shadow: none !important;
span {
font-weight: 400 !important;
opacity: .9;
}
&::before {
content: unset !important;
}
}
&.active a {
background: linear-gradient(25deg, #396bde90, #313c9f90) !important;
span {
font-weight: 900 !important;
opacity: 1 !important;
}
}
}
}
.tab-content {
display: contents;
}
#store, #game-instances {
grid-row: 3;
}
.container-header {
grid-row: 3;
height: max-content;
h3 {
color: white !important;
opacity: 1 !important;
font-size: 1.2em;
text-transform: capitalize;
}
}
#about.active {
display: contents;
& > * {
grid-column: 1;
}
.section-content, .section {
&::before, &::after {
content: unset !important;
}
}
.game-about-container {
display: contents;
.container-header {
display: none;
}
&::before {
content: unset !important;
}
& > * {
grid-column: 1;
}
& > .section-content {
display: contents;
.game-description {
margin-top: 5px;
grid-row: 3 / span 3;
&:first-line {
font-size: 1.2em;
// font-weight: 700;
line-height: 2em;
}
}
& > * {
grid-column: 1;
}
.game-stats-container {
grid-row: 4;
background-color: rgba(0,0,0,0.4);
border-radius: 8px;
border: 0 !important;
padding: 20px;
}
.game-stat-footer {
grid-row: 5;
}
.game-stats-container, .game-stat-footer {
grid-column: 2;
display: flex;
flex-direction: column;
li {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
}
}
}
}
}
.hlist {
flex-wrap: wrap;
justify-content: flex-start;
}
}
/* Avatar Images */
.avatar-container {
// margin-top: 16px !important;
.avatar-card-link, .avatar-card-image, .thumbnail-2d-container, img {
background: none !important;
border-radius: 24px;
}
.avatar-card-link {
background-color: rgba(0,0,0,0.2) !important;
}
}
/* GAMES */
#games-carousel-page {
margin: 0 -40px;
margin-left: -270px;
padding: 0 40px;
padding-left: 270px;
width: calc(100% + 310px);
}
.game-carousel {
height: auto;
min-height: 235px;
max-height: 235px;
margin-bottom: 0;
margin: 0 -8px;
overflow: visible;
display: flex;
justify-content: space-between;
}
.games-list-container {
margin: 0;
flex-shrink: 1;
justify-content: center;
position: relative;
&::before {
content: "";
background: rgba(100,100,100,0.1);
background: linear-gradient(to bottom, rgba(50,50,120, .2), transparent);
position: absolute;
inset: -8px -12px;
bottom: 0px;
// right: 50%;
opacity: 0;
border-radius: 8px;
z-index: -1;
transition: opacity .2s, inset .3s;
}
&:hover:before, &:focus-within:before {
opacity: 1;
inset: -12px -16px;
bottom: 0px;
}
}
.horizontal-scroll-window {
overflow: visible;
max-width: 100%;
}
.scroller {
z-index: 2;
// width: 50px !important;
// height: 50px !important;
border-radius: 100px !important;
justify-content: center;
// margin-top: 100px;
}
.horizontal-scroller {
margin: 0 !important;
}
.horizontally-scrollable {
min-height: unset !important;
height: auto !important;
& ~ .scroller {
margin-top: -5px;
height: 210px !important;
// width: 35px;
padding: 0 15px;
width: max-content !important;
max-width: unset !important;
z-index: 10;
background-color: var(--bg) !important;
transition: padding .2s, opacity .2s, margin .4s;
.arrow {
width: 0px;
display: flex;
justify-content: center;
right: unset !important;
left: unset !important;
span {
left: unset !important;
right: unset !important;
}
}
&:not(.disabled):hover, &:not(.disabled):focus {
padding: 0 25px;
background-color: noBlurColor !important;
}
&.prev {
margin-left: -10px;
border-radius: 0 24px 24px 0 !important;
}
&.next {
margin-right: -70px;
border-radius: 24px 0 0 24px !important;
}
&.disabled {
opacity: 0;
&.prev {
margin-left: -30px;
}
&.next {
margin-right: -90px;
}
}
.spacer {
display: none;
}
}
}
/* Cards */
.game-cards:not(.group-list), .multi-row {
overflow: visible !important;
justify-content: center;
display: flex;
margin: 0 -13px;
for row in (1..50) {
.game-card:nth-child({row}) {
animation: slideUpIn .7s .02s * row
}
}
&.multi-row {
flex-wrap: wrap;
justify-content: flex-start;
}
}
.game-tile {
width: auto !important;
padding: 0 !important;
}
.game-card-container:not([href*="roblox.com/groups/"]):not(.featured-grid-item-container):not(.featured-game-container) {
if cards {
perspective: 100px;
}
outline: none !important;
position: relative;
height: 220px !important;
margin: 0 8px !important;
padding-right: 0 !important;
width: 150px !important;
margin-bottom: 24px !important;
--height: 200px;
height: var(--height) !important;
.game-card-link {
box-shadow: 0 4px 4px rgba(0,0,0,0.2);
display: flex !important;
flex-direction: column;
position: relative !important;
width: 150px;
margin: 0;
height: var(--height);
min-height: var(--height);
transition: transform .5s, width .2s, height .2s, min-height .2s, margin .2s, margin-top .5s !important;
background: rgba(0,0,0,0.2);
overflow: hidden;
border-radius: 6px;
max-height: unset !important;
.game-card-thumb-container,
.game-card-thumb-container img,
.game-card-thumb-container, .game-card-thumb {
object-fit: cover !important;
transition: height .3s, width .2s !important;
background-color: transparent !important;
overflow: visible;
max-height: unset;
border-radius: 6px !important;
padding: 0;
height: calc(var(--height) - 90px);
box-shadow: none;
max-height: unset !important;
transition: max-height .5s, width .3s, height .5s, margin .3s !important;
&::before {
content: unset !important;
}
img {
height: var(--height) !important;
object-fit: cover;
animation: scaleIn 2s;
border-radius: 6px;
}
}
.game-card-avatar-slots {
position: relative !important;
}
}
.game-card-name,
.game-card-info {
padding: 0 8px !important;
z-index: 5 !important;
color: white !important;
&.game-card-name {
// margin-top: 0;
font-weight: 800 !important;
font-size: .9em;
margin-top: -40px;
padding-top: 50px !important;
min-height: 90px !important;
text-shadow: 0 0 9px black, 0 0 50px black;
transition: margin .2s, padding .2s, font-weight .2s, font-size .2s, max-height .2s, min-height .2s !important;
}
}
.game-card-info,
.game-card-avatar-slots {
position: absolute !important;
padding-bottom: 8px !important;
border-radius: 6px;
z-index: 1 !important;
white-space: nowrap;
* {
color: white !important;
}
.info-avatar {
position: relative;
}
&::after {
content: ""
position: absolute;
bottom: -6px;
left: 0;
right: 0;
top: -150px;
background: linear-gradient( transparent, rgba(0,0,0,.8) );
z-index: -99999;
transition: opacity .3s !important;
border-radius: 6px !important;
}
}
&:hover, &:focus, &:focus-within {
z-index: 1 !important;
.game-card-link {
// transform: scale(1.1) translate3d(0,-5px,0) rotateX(1deg);
if cards {
transform: translate3d(0,-10px,0) rotateX(1deg);
}
box-shadow: 0 8px 24px rgba(0,0,0,0.6);
margin: 0 -12px !important;
margin-top: -8px !important;
height: 255px !important;
min-height: 255px !important;
width: 174px;
if blur {
backdrop-filter: blur(10px);
} else {
background-color: noBlurColor;
}
.game-card-thumb-container,
.game-card-thumb-container img,
.game-card-thumb-container, .game-card-thumb {
height: 174px !important;
width: 174px !important;
margin-bottom: 5px;
}
.game-card-name {
text-shadow: none !important;
max-height: 35px !important;
min-height: 35px !important;
font-size: .8em;
margin-top: 3px !important;
padding-top: 0 !important;
}
.game-card-thumb-container {
max-height: 174px;
}
.game-card-info::after, .game-card-avatar-slots::after {
opacity: 0;
}
.game-card-avatar-slots {
margin-bottom: -10px !important;
}
.game-card-info:not(.game-card-friend-info) {
padding-bottom: 4px !important;
}
}
}
&:active {
.game-card-link {
if cards {
transform: translate3d(0,-12px,0) scale(.95) !important;
} else {
transform: scale(.98) !important;
}
margin-top: 0;
transition: transform .1s !important;
}
}
}
/*** STORE ***/
[data-internal-page-name="Catalog"] {
.hlist {
// display: flex;
// flex-wrap: wrap;
// li {
// flex-grow: 1;
// }
li {
height: auto !important;
a {
width: 100% !important;
margin: 0 !important;
max-width: unset !important;
thumbnail-2d {
float: unset !important;
}
.item-card-thumb-container {
height: auto !important;
width: 100% !important;
background: rgba(0,0,0,0.2) !important;
.thumbnail-2d-container {
height: auto !important;
width: 100% !important;
background: none !important;
}
img {
height: auto !important;
}
}
}
}
}
}
/*** OTHER PAGES ***/
.premium-landing-page {
width: 100% !important;
border-radius: 60px;
box-shadow: 0 12px 24px rgba(0,0,0,0.3);
background: none !important;
margin-top: 10vh !important;
overflow: hidden;
#subscription-container-base > div {
background-color: transparent;
}
}
/** POPUPS **/
.anchor-show-desktop, .anchor-hide {
z-index: 300 !important;
opacity: 0;
top: 50px !important;
transition: top .2s, opacity .2s !important;
&.anchor-show-desktop {
top: 70px !important;
opacity: 1;
transform: none;
}
& > .layer {
background: rgba(0,0,0,0.5);
border-radius: 8px;
padding-inline: 20px;
backdrop-filter: blur(10px);
}
}
.popover {
background: rgba(0,0,0,0.5) !important;
backdrop-filter: blur(10px) !important;
box-shadow: 0 14px 30px rgba(0,0,0,.7) !important;
transform: scale(.98) translateY(-10px);
filter: opacity(.9);
transition: transform .5s, filter .2s, opacity .5s;
&:hover {
transform: translateY(-10px);
filter: none;
}
&:active {
transform: scale(.99) translateY(-10px);
transition: transform .1s, filter .2s, opacity .5s !important;
}
.dropdown-menu {
background: none !important;
}
}
// Join Game
@keyframes spinning {
0% { transform: rotateZ(0); }
90% { transform: rotateZ(360deg); }
100% { transform: rotateZ(360deg); }
}
#simplemodal-overlay {
backdrop-filter: blur(10px);
animation: scaleIn .5s;
}
[class="modal-confirmation noImage protocolhandler-starting-modal simplemodal-data"] {
animation: scaleIn 1s ease;
.modal-content {
background: none !important;
border: 0 !important;
box-shadow: none !important;
.icon-logo-r-95 {
animation: spinning 1.4s ease infinite;
margin-bottom: 10px;
}
.spinner {
display: none;
}
}
}
#rbx-body.light-theme:not([data-internal-page-name="Login"]) {
&::after {
content: "Please switch to Dark Mode in Roblox's settings, then re-enable the style.";
position: fixed;
inset: 0;
z-index: 999999;
backdrop-filter: blur(100px);
display: flex;
justify-content: center;
align-items: center;
color: white !important;
font-weight: 600;
font-size: 2vw;
}
}
}