Full page theme [ x ] by terifash

Details

Authorterifash
LicenseMIT
Categoryxvideos
Created3 years, 2 days ago
Updated2 years, 5 months ago
Code size16 kB
Code checksumf2b6b4ec
Statistics

Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description

Full page view styles and aside menu extender, and hide all not needed.
Screenshots

Notes

Full page style video
Main menu add
Configure added menu script:
Install extensions

Chrome: Tampermonkey or Violentmonkey
Firefox: Greasemonkey, Tampermonkey, or Violentmonkey
Safari: Tampermonkey или Userscripts
Microsoft Edge: Tampermonkey
Opera: Tampermonkey или Violentmonkey
Maxthon: Violentmonkey
Add menu script from git repo.
Configure your extension script NAME.user.js
Save script and reload xvideos.com page
Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Full page theme [ x ]
@version      20221017.01.21
@namespace    userstyles.world/user/terifash
@description  Full page view styles and aside menu extender, and hide all not needed.

## Screenshots

[<img src="https://userstyles.world/preview/4087/2.webp" alt="Dashboard" width="100%" height="100%" />](https://userstyles.world/preview/4087/2.webp)
[<img src="https://userstyles.world/preview/4087/3.webp" alt="Dashboard 2" width="50%" height="100px" />](https://userstyles.world/preview/4087/3.webp) [<img src="https://userstyles.world/preview/4087/4.webp" alt="Dashboard 3" width="50%" height="100px" />](https://userstyles.world/preview/4087/4.webp)
[<img src="https://userstyles.world/preview/4087/6t.webp" alt="Dashboard 6" width="30.33%" />](https://userstyles.world/preview/4087/6.webp) [<img src="https://userstyles.world/preview/4087/5t.webp" alt="Dashboard 5" width="32.33%" height="400px" />](https://userstyles.world/preview/4087/5.webp) [<img src="https://userstyles.world/preview/4087/7t.webp" alt="Dashboard 7" width="33.33%" />](https://userstyles.world/preview/4087/7.webp)
@author       terifash
@license      MIT
==/UserStyle== */

@-moz-document regexp("https?://(www\\.)?xvideos.*") {
/* ==UserStyle==
@name         Full page XTheme
@version      20220905.21.05
@namespace    userstyles.world/user/terifash
@description  Full page view styles and aside menu extender, and hide all not needed blocks
@author       terifash
@license      No License
==/UserStyle== */

:root {
	--var-max-height-menu: 46px;
	--var-max-height-mozaique: 54px;
	--var-max-widht-menu: 255px;
	--var-height-menu-item: 140px;
	--var-thumb-transform: translate(-194px, -43px);
	--var-max-width-btn: 79px;
 	--min-height-page: 1px;
	--color-main-red: #de2600;
}


body.video-page #page #main {
/*   min-height: calc(var(--vh,1vh) * 100 - var(--min-height-page))!important; */
}

@media (min-width: 768px) {
	#page #main {
/*     min-height: calc(var(--vh,1vh) * 100 - var(--min-height-page))!important; */
	}
}

@media (max-width: 1920px) {
	:root {
		--min-height-page: 2px;
	}
}

@media (max-width: 1440px) {
:root {
	--min-height-page: 1px;
	}
}


#page.video-page #video-player-bg #html5video.embed-responsive,
#page.video-page #video-player-bg #player,
#page.video-page #video-player-bg #html5video.embed-responsive .embed-responsive-item,
#page.video-page #video-player-bg #html5video.embed-responsive .embed,
#page.video-page #video-player-bg #player .embed-responsive-item,
#page.video-page #video-player-bg #player .embed {
/* 	height: 901px; */
	position: static;
	height: calc(var(--vh, 1vh) * 100 - var(--min-height-page))!important;
	min-height: calc(var(--vh, 1vh) * 100 - var(--min-height-page))!important;
}



body.home #footer,
body .search-page #footer,
#page #main + div[class^=foot],
#main #content .premium-results-line,
#main #content .thumb-block p.metadata a,
#main #content  #related-videos .thumb-block p.metadata a,
#page.video-page .btn.menu-login-acct,
#page.video-page #footer .botLinks,
#page.video-page #html5video #hlsplayer .top-left,
#page.video-page .related-content__btns,
#page.video-page #v-actions-container,
#page.video-page #tabComments_bottom_page {
	display: none;
}

#page.video-page #html5video #hlsplayer.play-clicked .big-button.play {
  display: block;
	z-index: 11;
}

/* #related-videos .show-more, */
/* #v-actions-container, */
/* #related-videos .show-more2 */
#page.video-page #related-videos .bg .thumb-related-exo span,
#page.video-page #related-videos .bg span.sprfluous {
	/* 	opacity: 0; */
	/* 	visibility: hidden; */
}

#page.video-page #nav,
#page.video-page #header,
#main .page-title,
#page.video-page .video-tags-list.cropped {
	position: absolute;
}

#site-settings {
	display: none;
}

#page.video-page #main #content {
	/* 	max-width: 1660px; */
	margin-right: auto;
	/* 	margin-top: -56px; */
	margin-left: auto;
	min-width: 61vw;
	/* 	padding-bottom: 38vw; */
	height: 100vh;
	/* 	transform: translateX(308px); */
}

#page.video-page #content #html5video {
	position: absolute!important;
	min-height: 100vh;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

#page {
	max-width: unset;
	position: relative;
}

#main {
	margin-right: auto;
	margin-left: auto;
	width: 99.95vw;
}

#main .page-title {
	display: none;
	top: 6px;
	overflow: hidden;
	left: 770px;
	max-width: 43vw;
	width: 100%;
	font-size: 16px;
	line-height: 32px;
}

.thumb-block .duration {
	background-color: var(--color-main-red);
	color: #fff;
}

#page.video-page .video-tags-list.cropped {
	padding: 0 20px;
	bottom: 23px;
	margin-bottom: 10px;
	left: 0px;
}

#page.video-page #nav {
	padding: 0 20px;
	bottom: 40px;
	left: 0;
	margin-bottom: 100px;
}

#page.video-page #header {
	width: 100%;
	padding: 0 20px;
	bottom: 70px;
	left: 0;
	margin-bottom: 30px;
}

#footer {
	padding: 0 20px;
	margin-top: 220px;
	bottom: 80px;
}

.related-content .related-content__tabs .related-videos {
/* 	position: absolute!important; */
/* 	top: 0; */
/* 	left: 0; */
}

#related-videos .mozaique .thumb-block {
	width: 16.66%!important;
}

#page.video-page #xv-search-form {
	width: 100%;
}

#page.video-page #home-search .search-input,
#page.video-page #xv-search-form .search-input {
	background: #262626;
	border: 2px solid #333;
	color: #ddd;
}

#page.video-page #home-search .search-submit,
#page.video-page #xv-search-form .search-submit {
	background: #333;
	border: 2px solid #333;
	color: #000;
}

#page.video-page .x-popup.below .x-popup-arrow {
	top: unset;
	bottom: 0;
	transform: scale(-1);
}

body.video-page {
	width: 100%;
	padding-left: 0;
	padding-top: 8px;
	padding-right: 0;
	transform: translateY(-26px);
	overflow-x: hidden;
}

.video-page #page {
	max-width: unset;
}

.video-page #header,
.video-page #nav,
.video-page .page-title,
.video-page .video-metadata,
.video-page #video-player-bg,
.video-page #video-tabs,
.video-page #content,
.video-page #tabComments_bottom_page,
.video-page #footer {
	/* 		max-width: 100vw !important;
		margin: 0 auto !important;
		padding: 0 0.5rem !important; */
}

@media (min-width: 1440px) {
	.video-page #header,
	.video-page #nav,
	.video-page .page-title,
	.video-page .video-metadata,
	.video-page #video-player-bg,
	.video-page #video-tabs,
	.video-page #content,
	.video-page #tabComments_bottom_page,
	.video-page #footer {
		/* 			max-width: 100vw !important; */
	}
}

#content #video-player-bg,
.player-enlarged #video-player-bg {
	/* 		max-width: unset !important; */
	/* 		padding: 0 !important; */
}

#page.video-page #video-player-bg #html5video.embed-responsive,
#page.video-page #video-player-bg #player {
	/* 		padding-bottom: min(26.25%, 99vh); */
}

#html5video #hlsplayer .video-bg-pic .video-click-handler,
#html5video #hlsplayer .video-bg-pic .video-pic {
	left: 0;
	width: 100%;
	margin: 0;
}

/* Optional Styles */
.video-page #content {
	/* 		max-width: unset !important; */
}

body:not(.video-page) {
	overflow-x: hidden;
	margin-left: -10px;
	padding-left: 20px;
	padding-right: 20px;
}

body:not(.video-page) #page .menu-list {
	visibility: hidden;
	display: none;
}

body.video-page .menu-list {
	visibility: visible;
	display: flex;
	flex-wrap: wrap;
	transition: height 0.3s ease-in-out;
	position: absolute;
	max-width: var(--var-max-widht-menu);
	width: 100%;
	top: 0;
	height: calc(100vh - var(--var-max-height-menu));
	z-index: 12;
	background: #161616;
	padding-top: 16px;
	padding-bottom: 16px;
	max-height: calc(100vh - var(--var-max-height-menu));
	overflow: hidden;
	justify-content: flex-start;
/* 	align-items: flex-start; */
}

.buttons-bar.right {
	margin-right: 10px;
}

.buttons-bar.left {
	margin-left: 10px;
}

body.video-page .menu-list.left {
	left: 0;
	right: unset;
	padding-left: 5px;
	direction: ltr;
}

body.video-page .menu-list.right {
	padding-right: 5px;
	right: 0;
	left: unset;
	direction: rtl;
}

body.video-page .menu-list.shows {
	/*   transition: all 0.5s; */
	/*   max-height: calc(100vh - 46px); */
	display: flex;
}
body.video-page .menu-list.hides {
	max-height: 50px;
	min-height: 50px;
	display: flex;
	border-bottom-right-radius: 0!important;
	--var-max-height-mozaique: 46px;
}

body.video-page .menu-list.small {
	--var-max-width-btn: 79px;
	--var-max-height-menu: 110px;
	--var-max-height-mozaique: 195px;
	--var-max-widht-menu: 255px;
	--var-height-menu-item: 137px;
	--var-thumb-transform: translate(-119px, -42px);
}

/* // ---- Start set big UI ----- // */
body.video-page .menu-list.main {
	--var-max-width-btn: 80px;
	--var-thumb-transform: translate(-194px, -43px);
	--var-max-height-mozaique: 56px;
	--var-height-menu-item: 225px;
	--var-max-widht-menu: 405px;
}

body.video-page .menu-list.is--related-videos.main {
	--var-max-widht-menu: 420px;
	--var-max-height-mozaique: 4px;
	--var-height-menu-item: 234px;
}

body.video-page .menu-list.small.hides {

/* 	--var-max-widht-menu: 140px; */
}

body.video-page .menu-list.hides.main {
	--var-max-widht-menu: 205px;
	
}

body.video-page .menu-list.hides.main .mozaique {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0!important;
	width: fit-content;
}

body.video-page .menu-list.small.hides .mozaique  {
/*  */
}


body .menu-list.hides .mozaique {
	overflow-y: hidden;
}

/* // ----- End big UI ----- // */
body .menu-list #related-videos {
	width: 100%;
	height: 100%;
	min-height: 100%;
}

body .menu-list #related-videos .show-more{
	display: none;
}


body .menu-list #related-videos .mozaique .thumb-block {
	width: 100%!important;
	padding: 0;
}

body .menu-list #related-videos .mozaique {
	margin-left: 0;
	margin-right: 0;
	min-height: 100%;
	height: 100%;
}

body .menu-list #related-videos .mozaique {
/* 	min-height: 100%; calc(100vh - var(--var-max-height-mozaique)); */
	
}

body .menu-list .mozaique {
	grid-area: video;
	background: #161616;
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	align-items: flex-start;
	opacity: 0.99;
	position: relative;
	flex-...
Reviews

No reviews yet.