Redgifs video immersive by hdyzen

/* ==UserStyle==
@name           Redgifs video immersive
@namespace      https://userstyles.world/user/hdyzen
@version        0.2
@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 domain("www.redgifs.com") {
	i=!important;
	
	:root {
		--sidebar-width: 80px i;
		--tabs-height: 46px i;
		--top-nav-height: 68px i;
	}
	.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;
		}
		.skyWrapper {
			> .left.side,
			> .right.side {
				display: none i;
			}
			.watchPage {
				margin-top: 0 i;
				--tabs-height: 0px i;
			}
			.Player {
				height: 100vh i;
				max-height: 100vh i;
				margin-block: 6px i;

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

				.Video-ProgressBar {
					bottom: 18px i;
				}
			}
			.previewFeed > :not(.Player) {
				display: none i;
			}
			.tabs {
				margin-block: 0 i;
				height: var(--tabs-height) i;
			}
			.Player-SideBarWrap {
				background-color: rgba(255, 255, 255, 0.05) i;
				padding: 10px 0 i;
				border-radius: 10px i;
				right: -52px i;
			}
		}
		.Player-SideBarWrap {
			top: 0 i;
		}

	}
	if hideTopNav {
		:root {
			--top-nav-height: 0px i;
		}
		.desktop .topNav {
			display: none i;
		}
	}
	if hidePlayerMeta {
		.Player-MetaInfo {
		    display: none i;
        }
	}
	if scrollSnap {
		.desktop {
			.previewFeed {
				height: calc(100vh - (var(--top-nav-height) + var(--tabs-height))) i;
				scroll-snap-type: both mandatory i;
				> .Player {
					height: calc(100vh - (var(--top-nav-height) + var(--tabs-height))) i;
					scroll-snap-align: center i;
				}
			}
		}	
	}
}