xHamster Theatre Mode by butt_plung3r

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


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

	/* General layout fixes */

	html, body {
		overflow: initial !important;
		height: auto !important;
	}

	body,
	.main-wrap,
	.width-wrap {
		min-width: unset !important;
		max-width: 100% !important;
	}
	
	main .width-wrap,
	main.width-wrap {
		max-width: 100% !important;
		padding-inline: 0;
		
		article {
			padding-inline: 10px !important;
			margin-left: 200px;
		}
		aside, .sidebar {
			margin-left: 10px;
		}
	}

	.footer-wrapper {
		display: none;
	}

	/* Header tweaks */

	.header {
		.orientation-dropdown-container,
		.lang-geo-picker-container,
		.login-section,
		.top-menu__side-group.right,
		[data-nav-item-id="cams"],
		[data-nav-item-id="channels"],
		[data-nav-item-id="photos"],
		[data-nav-item-id="dating"] {
			display: none;
		}
		
		.section-container,
		.search-section,
		.top-menu > * {
			justify-content: center;
		}
	}

	/* Video Thumbnail grids */

	.thumb-list {
		display: grid !important;
		
		grid-template-columns: repeat(1, 1fr);
		gap: 10px;
		margin: 0;
		
		&.thumb-list--small-with-cube {
			width: 100%;
			height: auto;
		}
		
		& > .thumb-list__item,
		& > .thumb-list__item > a {
			height: auto !important;
			width: 100% !important;
			min-width: 100% !important;
			max-width: 100% !important;
			margin: 0;
			padding: 0;
		}
		
		& > .thumb-list__item {
			height: max-content;
			margin-bottom: 6px;
		}
		
		& > div:not(.thumb-list__item):not([data-block="moments"]) {
			display: none;
		}
		
		[data-block="moments"] {
			grid-column: 1 / span 1;

			@media (min-width: 640px)  { grid-column: 1 / span 2; }
			@media (min-width: 960px)  { grid-column: 1 / span 3; }
			@media (min-width: 1280px) { grid-column: 1 / span 4; }
			@media (min-width: 1600px) { grid-column: 1 / span 5; }
			@media (min-width: 1920px) { grid-column: 1 / span 6; }
		}
		
		@media (min-width: 640px)  { grid-template-columns: repeat(2, 1fr); }
		@media (min-width: 960px)  { grid-template-columns: repeat(3, 1fr); }
		@media (min-width: 1280px) { grid-template-columns: repeat(4, 1fr); }
		@media (min-width: 1600px) { grid-template-columns: repeat(5, 1fr); }
		@media (min-width: 1920px) { grid-template-columns: repeat(6, 1fr); }
	}

	/* Video Page fixes */

	.video-page {
		.width-wrap > h1,
		#video-tags-list-container,
		.controls,
		.controls-info,
		.related-container.width-wrap {
			padding-inline: 10px;
		}
		
		.player-container {
			width: auto;
			height: auto;
			margin-right: 0;
		}
		#player-container {
			width: auto;
			height: auto;
			margin: auto;
			
			video {
				height: auto !important;
				max-height: 100vh !important;
				position: relative;
			}
		}
		
		.controls {
			gap: 5px;
			
			.xh-button,
			& > * {
				margin-right: 0 !important;
			}
			
			.controls__line,
			.favorites-control,
			[data-role="video-share-button"] {
				display: none;
			}
		}
		
		
		/* Fixes overflow on smaller viewports */
		.comment-item {
			margin: 0 -17px 10px;
		}
	}

	/* Pornstar Page fixes */

	.pornstar-page .pornstar-container {
		.category-info,
		.related-container {
			width: auto !important;
			max-width: 100% !important;
		}
		.related-container {
			margin: 0;
			padding-inline: 0;
		}
		.related-list {
			display: grid;
			grid-template-columns: repeat(1, 1fr);
			gap: 10px;
			
			li {
				width: auto;
				height: auto;
				padding: 0;
			}
			a.logo-container {
				width: 100%;
				height: auto;
				aspect-ratio: 1/1;
			}
			
			@media (min-width: 640px)  { grid-template-columns: repeat(2, 1fr); }
			@media (min-width: 960px)  { grid-template-columns: repeat(3, 1fr); }
			@media (min-width: 1280px) { grid-template-columns: repeat(4, 1fr); }
			@media (min-width: 1600px) { grid-template-columns: repeat(5, 1fr); }
			@media (min-width: 1920px) { grid-template-columns: repeat(6, 1fr); }
		}
	}

}