Redgifs video immersive by hdyzen

/* ==UserStyle==
@name           Redgifs video immersive
@namespace      https://userstyles.world/user/hdyzen
@version        0.2.4
@description    video full height in redgifs
@author         hdyzen
@preprocessor   stylus

@var checkbox   hideTopNav      'Hide navbar top' 0
@var checkbox   hidePlayerMeta  'Hide overlays in player' 0
@var checkbox   scrollSnap      'Scroll snap' 1
==/UserStyle== */
@-moz-document regexp("https:\\/\\/www\\.redgifs\\.com\\/(?!ifr).*") {
	i=!important;

	:root {
		--sidebar-width: 80px i;
		--tabs-height: 46px i;
		--top-nav-height: 68px i;
	}
	body:not(:fullscreen) .desktop {
		.topNav {
			display: flex i;
			justify-content: space-between i;
			height: var(--top-nav-height) i;
			max-height: var(--top-nav-height) i;
		}
		.topNav-wrap {
			display: contents i;
			> div:not([class]) {
				display: none i;
			}
			> [class*='burgerButton'] {
				position: unset i;
				width: 36px i;
				transform: unset i;
			}
			> .SearchInput {
				margin-left: 50px i;
			}
		}
		.ApplicationFooter {
			width: var(--sidebar-width) i;
		}
		.nav .routeWrapper {
			margin-left: var(--sidebar-width) i;
		}
		.mainLogo {
			margin: unset i;
		}
		.nav .routeWrapper {
			max-width: unset i;
		}
		.page.wide {
			width: 100% i;
			max-width: 100% i;
		}
		.previewFeed,
		.page.feed,
		.middle,
		.watchPage .center {
			width: 100% i;
			max-width: 100% i;
		}
		.left.side,
		.right.side {
			display: none i;
		}
		.watchPage {
			margin-top: 0 i;
			--tabs-height: 0px i;
		}
		[id^="gif_"] {
			height: 100vh i;
			max-height: 100vh i;
			max-width: unset i;
			/* 			min-width: 100% i; */
			/* 			margin-block: 6px i; */
			margin: 6px 0 i;

			&:first-child {
				height: calc(100vh - (var(--top-nav-height) + var(--tabs-height))) i;
				margin-top: 0 i;
			}

			[class*="ProgressBar"i] {
				bottom: 18px i;
			}
		}
		.GifPreview-TopInfo {
			top: 0 i;
			z-index: 9 i;
			width: max-content i;
			background-color: rgba(0, 0, 0, .2) i;
			padding: 5px i;
			border-end-end-radius: 5px i;
			gap: 30px i;
		}
		.NichePage, .TagFeeds, .gifList {
			padding-bottom: 0 i;
			margin-bottom: 0 i;
		}
		.previewFeed > :not([id^="gif_"]) {
			display: none i;
		}
		.tabs {
			margin-block: 0 i;
			height: var(--tabs-height) i;
		}
	}
	if hideTopNav {
		:root {
			--top-nav-height: 0px i;
		}
		.desktop .topNav {
			display: none i;
		}
	}
	if hidePlayerMeta {
		.Player-MetaInfo {
			display: none i;
		}
	}
	if scrollSnap {
		body:not(:fullscreen) .desktop {
			.previewFeed {
				height: calc(100vh - (var(--top-nav-height) + var(--tabs-height))) i;
				scroll-snap-type: both mandatory i;
				> [id^="gif_"] {
					height: calc(100vh - (var(--top-nav-height) + var(--tabs-height))) i;
					scroll-snap-align: center i;
				}
			}
		}
	}
}