Pornhub Theatre Mode by butt_plung3r

/* ==UserStyle==
@name           PornHub Theatre Mode
@namespace      butt_plung3r
@version        2025-02-04
@description    Pornhub for the big screen!
@author         butt_plung3r
==/UserStyle== */


@-moz-document domain("pornhub.com") {

	html.supportsGridLayout {
		body > .wrapper > .container {
			box-sizing: border-box;
			width: 100%;
			max-width: 100%;
			min-width: unset !important;
			padding-inline: 10px;
			
			> .sectionWrapper > .sectionWrapper,
			.title-container,
			.video-actions-menu, 
			.video-actions-container,
			.videoGridTabs,
			#under-player-playlists > div {
				max-width: 1323px;
				width: 96%;
				margin-inline: auto !important;
				
				/*outline: 1px solid red;*/
			}
		}
	}
	
	
	/**
	 * Video page fixes
	 */
	
	html.supportsGridLayout.fluidContainer #main-container.vpContainer #vpContentContainer {
		.topSectionGrid {
			grid-template-columns: 1fr;
			margin-bottom: 0;
		}
		
		.videoWrapModelInfo {
			margin-bottom: 20px;
		}
		
		#hd-leftColVideoPage .video-wrapper #player {
			padding-bottom: min(98vh, 56.26%);
			
			.mgp_videoWrapper .mgp_videoPoster {
				picture, source, img {
					height: 100%;
					width: auto;
				}
			}
		}
		
		.sideColumn {
			display: none;
		}
		
		.loadMoreVideosCenter#loadMoreRelatedVideosCenter,
		.video-wrapper.relatedVideos::after {
			left: 50%;
			transform: translateX(-50%);
		}
		
		#under-player-comments {
			margin-inline: auto;
			
			.showMoreCommentsBtn {
				width: 100% !important;
			}
		}
	}
	
	#main-container #hd-leftColVideoPage .video-wrapper .video-actions-container .video-actions-tabs .video-action-tab.about-tab .show-more-btn {
		left: 50%;
		transform: translateX(-50%);
	}
	
	.latestThumbDesign ul.videos li.fixedSizeThumbContainer {
		width: 100%;
		max-width: 100%;
		height: auto;
		
		.wrap {
			.phimage img,
			.videoPreviewEl {
				height: auto;
			}
		}
	}
	
	/* end video page fixes */
	
	
	/**
	 * Responsive tweaks
	 */
	
	div.nf-videos {
		width: 100%;
	}
	
	html.supportsGridLayout {
		.sectionWrapper .full-row-thumbs {
			&#likedVideosSection,
			&#singleFeedSection {
				grid-template-columns: repeat(1, 1fr) !important;
			}
		}
	
		#incategoryVideos,
		#videoCategory,
		#videoSearchResult,
		#relatedVideosCenter,
		.sectionWrapper.videoSearch #bottomVideos.search-video-thumbs,
		.js-videosTabContent.relatedVideos > ul,
		.js-videosTabContent.recommendedVideos > ul {
			grid-template-columns: repeat(1, 1fr) !important;
		}
	}
	
	@media (width >= 640px) {
		html.supportsGridLayout {
			.sectionWrapper .full-row-thumbs {
				&#likedVideosSection,
				&#singleFeedSection {
					grid-template-columns: repeat(2, 1fr) !important;
				}
			}
		}
	}
	
	@media (width >= 960px) {
		html.supportsGridLayout {
			.sectionWrapper .full-row-thumbs {
				&#likedVideosSection,
				&#singleFeedSection {
					grid-template-columns: repeat(3, 1fr) !important;
				}
			}
	
			#incategoryVideos,
			#videoCategory,
			#videoSearchResult,
			#relatedVideosCenter,
			.sectionWrapper.videoSearch #bottomVideos.search-video-thumbs,
			.js-videosTabContent.relatedVideos > ul,
			.js-videosTabContent.recommendedVideos > ul {
				grid-template-columns: repeat(2, 1fr) !important;
			}
		}
	}
	
	@media (width >= 1280px) {
		html.supportsGridLayout {
			.sectionWrapper .full-row-thumbs {
				&#likedVideosSection,
				&#singleFeedSection {
					grid-template-columns: repeat(4, 1fr) !important;
				}
			}
	
			#incategoryVideos,
			#videoCategory,
			#videoSearchResult,
			#relatedVideosCenter,
			.sectionWrapper.videoSearch #bottomVideos.search-video-thumbs,
			.js-videosTabContent.relatedVideos > ul,
			.js-videosTabContent.recommendedVideos > ul {
				grid-template-columns: repeat(3, 1fr) !important;
			}
		}
	}
	
	@media (width < 1350px) {
		html.supportsGridLayout.fluidContainer div.nf-videos {
			#incategoryVideos,
			#videoCategory,
			#videoSearchResult {
				li.videoBox:not(.sniperModeEngaged) {
					max-width: unset;
				}
			}
		}
	}
	
	@media (width >= 1600px) {
		html.supportsGridLayout {
			.sectionWrapper .full-row-thumbs {
				&#likedVideosSection,
				&#singleFeedSection {
					grid-template-columns: repeat(5, 1fr) !important;
				}
			}
	
			#incategoryVideos,
			#videoCategory,
			#videoSearchResult,
			#relatedVideosCenter,
			.sectionWrapper.videoSearch #bottomVideos.search-video-thumbs,
			.js-videosTabContent.relatedVideos > ul,
			.js-videosTabContent.recommendedVideos > ul {
				grid-template-columns: repeat(4, 1fr) !important;
			}
		}
	}
	
	@media (width >= 1920px) {
		html.supportsGridLayout {
			.sectionWrapper .full-row-thumbs {
				&#likedVideosSection,
				&#singleFeedSection {
					grid-template-columns: repeat(6, 1fr) !important;
				}
			}
	
			#incategoryVideos,
			#videoCategory,
			#videoSearchResult,
			#relatedVideosCenter,
			.sectionWrapper.videoSearch #bottomVideos.search-video-thumbs,
			.js-videosTabContent.relatedVideos > ul,
			.js-videosTabContent.recommendedVideos > ul {
				grid-template-columns: repeat(5, 1fr) !important;
			}
		}
	}

	}