Full-Width black games theme
/* ==UserStyle==
@name Roblox | Full-Width Black Game Page Theme
@description Full-Width black games theme
@version 1.0.1
@namespace https://greasyfork.org/users/541594
@author Freeplay (https://il.ink/freeplay)
==/UserStyle== */
@-moz-document url-prefix("https://www.roblox.com/games/"), url-prefix("https://web.roblox.com/games/") {
/*** MAIN CODE - Made by Freeplay - Don't make fun of me code >:( ***/
body {
overflow-x: hidden;
}
.dark-theme {
background-color: black;
}
.dark-theme .content{
background-color: black;
}
@media only screen and (min-width: 992px) {
.dark-theme .content {
max-width: none;
padding: 0px;
}
.page-content{
max-width: none!important;
width: 100%;
margin: 0px;
padding-left: 175px;
}
.leaderboard-abp{
display: none;
}
.right-abp{
background-color: #070707;
width: 175px;
height: 100%;
margin: auto;
padding-top: 10px;
position: fixed;
}
.col-xs-12{
height: 500px;
}
.container-footer{
display: none;
}
.game-main-content .game-thumb-container{
width: 100%;
height: 520px;
position: absolute;
background-color: black;
}
.carousel{
width: 100%;
padding-left: 335px;
height: 520px;
right: 0;
}
.carousel:active {
z-index: 100;
}
.carousel-inner {
max-height: 100%;
max-width: calc(100% - 500px);
position: fixed;
transition: background 2s;
}
.carousel-inner:active {
padding-right: 175px;
max-height: 520px;
}
.carousel-inner::after { /* Carouse shadow for background */
background-image: linear-gradient(to top, #000, rgba(0,0,0,0));
position: absolute;
width: 100%;
height: calc(25px + 15%);
z-index: 3;
display: flex;
content: "";
bottom: 0;
pointer-events: none;
}
.carousel-inner:active:after { /* Carouse shadow for background */
height: 0px;
}
.carousel-inner .item{
height: 100%;
}
.carousel .carousel-thumb{
min-height: 540px;
object-fit: cover;
}
.carousel .carousel-thumb:active{
object-fit: contain;
display: block;
width: 80%;
margin: auto;
max-height: 500px;
z-index: 6;
}
.tab-content{
background-image: radial-gradient(farthest-corner at 100% 40px, rgba(10, 10, 10, .9), black, #070707);
padding: 20px;
margin-bottom: 0px!important;
margin-top: -5px;
min-height: 700px;
}
/* Youtube Player */
.carousel .flex-video embed, .carousel .flex-video iframe, .carousel .flex-video object{
height: 510px;
z-index: 5;
}
.carousel .flex-video.widescreen{
padding-bottom: 100%; /* Fix youtube player cropping */
margin-left: 100px;
z-index: 5;
}
.carousel-control.left{
left: 450px;
}
/* Details */
.game-main-content .game-calls-to-action{
position: absolute;
z-index: 3;
width: 450px;
height: 540px;
background-image: linear-gradient(to right, #070707, #050505, #050505, #000, rgba(0,0,0,0));
}
.game-title-container{
margin-right: -500px;
}
.gotham-font h2{
text-shadow: 0px 0px 10px black, 2px 2px 1px black, -2px -2px 1px black, -2px 2px 1px black, 0px -2px 1px black !important;
}
.gotham-font .game-main-content .game-calls-to-action, .gotham-font .game-main-content .game-calls-to-action .game-buttons-container{
padding-top: 50px;
padding-left: 30px;
}
.gotham-font .game-main-content .game-calls-to-action .game-buttons-container{
padding-right: 90px;
padding-bottom: 50px;
z-index: 10;
}
.game-main-content.follow-button-enabled .favorite-follow-vote-share .social-media-share{
position: absolute;
margin-left: -330px;
margin-bottom: 80px;
}
.social-share-container{
text-align: left;
left: 0;
}
/* social Links */
.social-links {
position: absolute;
top: 0px;
width: 400px;
height: 0px;
z-index: 4;
margin-top: -360px;
margin-left: 20px;
}
.social-links .medallion{
padding: 0px;
margin: 0px;
height: 30px;
border: none;
}
.social-links .contents{
margin: 0px;
height: 30px;
}
.social-links .title-wrapper{
padding-left: 30px;
}
.type-img{
background-size: 100% auto !important;
width: 30px!important;
height: 30px!important;
}
.col-md-4{
width: 400px;
height: 50px;
}
/* Fix Social Link Icons */
.social-links .RobloxGroup {
background-position: 0 65px;
}
.social-links .YouTube {
background-position: 0 245px;
}
.social-links .Twitter{
background-position: 0 215px;
}
}
/* Play Button */
.game-main-content .game-play-buttons .btn-common-play-game-lg {
min-width: 100%;
}
/* Tabs */
.dark-theme .rbx-tabs-horizontal .nav-tabs{
background-color: #000000b0;
border-bottom: none;
}
.dark-theme .rbx-tab .rbx-tab-heading{
background-color: #000000b0;
transition: background-color .5s;
}
.page-content .rbx-tabs-horizontal{
z-index: 6;
}
/* Badges + servers */
.dark-theme .stack .stack-list .stack-row{
background-color: rgba(33,33,33, 0.1);
transition: background-color .5s;
}
.dark-theme .stack .stack-list .stack-row:hover{
background-color: rgba(33,33,33, 0.3);
transition: background-color .5s;
}
/* Notices */
.dark-theme .container-empty, .dark-theme .section-content-off{
background-color: rgba(33,33,33, 0.1);
}
/* Game Passes */
.store-card{
max-width: none;
padding: 10px;
}
.store-card .store-card-name{
text-align: center;
padding-top: 10px;
white-space: normal;
}
.dark-theme .store-card-price{
padding-top: 10px;
padding-bottom: 10px;
}
.dark-theme .store-card-price{
justify-content: center;
display: flex;
}
#rbx-passes-container .store-card{
background-color: rgba(33,33,33, 0.1);
transition: background-color .5s;
border: none;
border-radius: 20px;
}
#rbx-passes-container .store-card:hover{
background-color: rgba(33,33,33, 0.3);
transition: background-color .5s;
}
/* RESPONSIVENESSSSSSSSSS */
@media only screen and (max-width: 1180px) {
.page-content{
padding-left: 0px !important;
}
.carousel-inner {
max-width: calc(100% - 335px) !important;
}
}
}