☰

Roblox | Full-Width Black Game Page Theme

Full-Width black games theme

  1. /* ==UserStyle==
  2. @name        Roblox | Full-Width Black Game Page Theme
  3. @description Full-Width black games theme
  4. @version     1.0.1
  5. @namespace   https://gf.qytechs.cn/users/541594
  6. @author      Freeplay (https://il.ink/freeplay)
  7. ==/UserStyle== */
  8.  
  9.  
  10. @-moz-document url-prefix("https://www.roblox.com/games/"), url-prefix("https://web.roblox.com/games/") {
  11. /*** MAIN CODE - Made by Freeplay - Don't make fun of me code >:( ***/
  12.  
  13. 	body {
  14. 		overflow-x: hidden;
  15. 	}
  16.  
  17.  
  18. 	.dark-theme {
  19. 		background-color: black;
  20. 	}
  21.  
  22. 	.dark-theme .content{
  23. 		background-color: black;
  24. 	}
  25.  
  26. @media only screen and (min-width: 992px) {
  27. 	.dark-theme .content {
  28. 		max-width: none;
  29. 		padding: 0px;
  30. 	}
  31. 	
  32. 	.page-content{
  33. 		max-width: none!important;
  34. 		width: 100%;
  35. 		margin: 0px;
  36. 		padding-left: 175px;
  37. 	}
  38.  
  39. 	.leaderboard-abp{
  40. 		display: none;
  41. 	}
  42. 	.right-abp{
  43. 		background-color: #070707;
  44. 		width: 175px;
  45. 		height: 100%;
  46. 		margin: auto;
  47. 		padding-top: 10px;
  48. 		position: fixed;
  49. 	}
  50.  
  51. 	.col-xs-12{
  52. 		height: 500px;
  53. 	}
  54.  
  55. 	.container-footer{
  56. 		display: none;
  57. 	}
  58.  
  59.  
  60. 	.game-main-content .game-thumb-container{
  61. 		width: 100%;
  62. 		height: 520px;
  63. 		position: absolute;
  64. 		background-color: black;
  65. 	}
  66. 	.carousel{
  67. 		width: 100%;
  68. 		padding-left: 335px;
  69. 		height: 520px;
  70. 		right: 0;
  71. 	}
  72. 	.carousel:active {
  73. 		z-index: 100;
  74. 	}
  75.  
  76. 	.carousel-inner {
  77. 		max-height: 100%;
  78. 		max-width: calc(100% - 500px);
  79. 		position: fixed;
  80. 		transition: background 2s;
  81. 	}
  82. 	.carousel-inner:active {
  83. 		padding-right: 175px;
  84. 		max-height: 520px;
  85. 	}
  86. 	.carousel-inner::after { /* Carouse shadow for background */
  87. 		background-image: linear-gradient(to top, #000, rgba(0,0,0,0));
  88. 		position: absolute;
  89. 		width: 100%;
  90. 		height: calc(25px + 15%);
  91. 		z-index: 3;
  92. 		display: flex;
  93. 		content: "";
  94. 		bottom: 0;
  95. 		pointer-events: none;
  96. 	}
  97. 	.carousel-inner:active:after { /* Carouse shadow for background */
  98. 		height: 0px;
  99. 	}
  100.  
  101. 	.carousel-inner .item{
  102. 		height: 100%;
  103. 	}
  104. 	.carousel .carousel-thumb{
  105. 		min-height: 540px;
  106. 		object-fit: cover;
  107. 	}
  108. 	.carousel .carousel-thumb:active{
  109. 		object-fit: contain;
  110. 		display: block;
  111. 		width: 80%;
  112. 		margin: auto;
  113. 		max-height: 500px;
  114. 		z-index: 6;
  115. 	}
  116.  
  117.  
  118. 	.tab-content{
  119. 		background-image: radial-gradient(farthest-corner at 100% 40px, rgba(10, 10, 10, .9), black, #070707);
  120. 		padding: 20px;
  121. 		margin-bottom: 0px!important;
  122. 		margin-top: -5px;
  123. 		min-height: 700px;
  124. 	}
  125.  
  126. 	/* Youtube Player */
  127. 	.carousel .flex-video embed, .carousel .flex-video iframe, .carousel .flex-video object{
  128. 		height: 510px;
  129. 		z-index: 5;
  130. 	}
  131. 	.carousel .flex-video.widescreen{
  132. 		padding-bottom: 100%; /* Fix youtube player cropping */
  133. 		margin-left: 100px;
  134. 		z-index: 5;
  135. 	}
  136.  
  137. 	.carousel-control.left{
  138. 		left: 450px;
  139. 	}
  140.  
  141. 	/* Details */
  142. 	.game-main-content .game-calls-to-action{
  143. 		position: absolute;
  144. 		z-index: 3;
  145. 		width: 450px;
  146. 		height: 540px;
  147. 		background-image: linear-gradient(to right, #070707, #050505, #050505, #000, rgba(0,0,0,0));
  148. 	}
  149. 	.game-title-container{
  150. 		margin-right: -500px;
  151. 	}
  152. 	.gotham-font h2{
  153. 		text-shadow: 0px 0px 10px black, 2px 2px 1px black, -2px -2px 1px black, -2px 2px 1px black, 0px -2px 1px black !important;
  154. 	}
  155. 	.gotham-font .game-main-content .game-calls-to-action, .gotham-font .game-main-content .game-calls-to-action .game-buttons-container{
  156. 		padding-top: 50px;
  157. 		padding-left: 30px;
  158. 	}
  159. 	.gotham-font .game-main-content .game-calls-to-action .game-buttons-container{
  160. 		padding-right: 90px;
  161. 		padding-bottom: 50px;
  162. 		z-index: 10;
  163. 	}
  164. 	.game-main-content.follow-button-enabled .favorite-follow-vote-share .social-media-share{
  165. 		position: absolute;
  166. 		margin-left: -330px;
  167. 		margin-bottom: 80px;
  168. 	}
  169. 	.social-share-container{
  170. 		text-align: left;
  171. 		left: 0;
  172. 	}
  173. 	
  174. 	/* social Links */
  175. 	.social-links {
  176. 		position: absolute;
  177. 		top: 0px;
  178. 		width: 400px;
  179. 		height: 0px;
  180. 		z-index: 4;
  181. 		margin-top: -360px;
  182. 		margin-left: 20px;
  183. 	}
  184. 	.social-links .medallion{
  185. 		padding: 0px;
  186. 		margin: 0px;
  187. 		height: 30px;
  188. 		border: none;
  189. 	}
  190. 	.social-links .contents{
  191. 		margin: 0px;
  192. 		height: 30px;
  193. 	}
  194. 	.social-links .title-wrapper{
  195. 		padding-left: 30px;
  196. 	}
  197. 	.type-img{
  198. 		background-size: 100% auto !important;
  199. 		width: 30px!important;
  200. 		height: 30px!important;
  201. 	}
  202. 	.col-md-4{
  203. 		width: 400px;
  204. 		height: 50px;
  205. 	}
  206. 	/* Fix Social Link Icons */
  207. 	.social-links .RobloxGroup {
  208. 		background-position: 0 65px;
  209. 	}
  210. 	.social-links .YouTube {
  211. 		background-position: 0 245px;
  212. 	}
  213. 	.social-links .Twitter{
  214. 		background-position: 0 215px;
  215. 	}
  216. 	
  217. }
  218. 	/* Play Button */
  219. 	.game-main-content .game-play-buttons .btn-common-play-game-lg {
  220. 		min-width: 100%;
  221. 	}
  222. 	/* Tabs */
  223. 	.dark-theme .rbx-tabs-horizontal .nav-tabs{
  224. 		background-color: #000000b0;
  225. 		border-bottom: none;
  226. 	}
  227.  
  228. 	.dark-theme .rbx-tab .rbx-tab-heading{
  229. 		background-color: #000000b0;
  230. 		transition: background-color .5s;
  231. 	}
  232. 	.page-content .rbx-tabs-horizontal{
  233. 		z-index: 6;
  234. 	}
  235.  
  236. 	/* Badges + servers */
  237. 	.dark-theme .stack .stack-list .stack-row{
  238. 		background-color: rgba(33,33,33, 0.1);
  239. 		transition: background-color .5s;
  240. 	}
  241. 	.dark-theme .stack .stack-list .stack-row:hover{
  242. 		background-color: rgba(33,33,33, 0.3);
  243. 		transition: background-color .5s;
  244. 	}
  245.  
  246. 	/* Notices */
  247. 	.dark-theme .container-empty, .dark-theme .section-content-off{
  248. 		background-color: rgba(33,33,33, 0.1);
  249. 	}
  250.  
  251.  
  252. 	/* Game Passes */
  253. 	.store-card{
  254. 		max-width: none;
  255. 		padding: 10px;
  256. 	}
  257. 	.store-card .store-card-name{
  258. 		text-align: center;
  259. 		padding-top: 10px;
  260. 		white-space: normal;
  261. 	}
  262. 	.dark-theme .store-card-price{
  263. 		padding-top: 10px;
  264. 		padding-bottom: 10px;
  265. 	}
  266. 	.dark-theme .store-card-price{
  267. 		justify-content: center;
  268. 		display: flex;
  269. 	}
  270. 	#rbx-passes-container .store-card{
  271. 		background-color: rgba(33,33,33, 0.1);
  272. 		transition: background-color .5s;
  273. 		border: none;
  274. 		border-radius: 20px;
  275. 	}
  276. 	#rbx-passes-container .store-card:hover{
  277. 		background-color: rgba(33,33,33, 0.3);
  278. 		transition: background-color .5s;
  279. 	}
  280.  
  281. /* RESPONSIVENESSSSSSSSSS */ 
  282. @media only screen and (max-width: 1180px) {
  283. 	.page-content{
  284. 		padding-left: 0px !important;
  285. 	}
  286. 	.carousel-inner {
  287. 		max-width: calc(100% - 335px) !important;
  288. 	}
  289. }
  290. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址