Roblox | Full-Width Black Game Page Theme

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://gf.qytechs.cn/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;
	}
}
}
欢迎访问Greasy Fork镜像
