Full page view styles and aside menu extender, and hide all not needed blocks
Pornhub.com theme - [ teri ] by terifash
Details
Authorterifash
LicenseGNU-V3.0
Categoryuserstyle
Created
Updated
Size23 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Pornhub.com theme - [ teri ]
@version 3.0.0
@namespace pornhub.com
@description Full page view styles and aside menu extender, and hide all not needed blocks
@author teri <teri.fash@gmail.com> (https://terifash.pro)
@license GNU-V3.0
@preprocessor stylus
@var color bg2 "Background color" #000000
@var color bg1 "Background color 2" #151515
@var range scroll_size 'Set ScrolBar size' [6, 6, 12, 'px']
==/UserStyle== */
/*!
* NOTE: Modifying the code will put auto-update feature of Stylus on pause in
* order to preserve your local changes. That means you need to manually update
* Dark-GitLab and re-do your modifications in order to stay up-to-date.
*
* A way to add domains without modifying the code doesn't exist yet.
* Relevant issue: https://github.com/openstyles/stylus/issues/307
*
* Make sure you have the latest version before submitting bug reports.
*/
// {{{ Helpers.
bg1_1 = #222222
bg2 = #222222
bg2_1 = #212221
bg2_5 = #252525
bg2_6 = #262626
bg3 = #333
bg3_5 = #383838
bg3_6 = #3d3d3d
bg4 = #444
bg5 = #555
bg6 = #666
bg7 = #717171
brd = #888
hbrd = #AAA
dtxt = #151515
txt = #AAA
w0 = #FFF
w1 = #CCC
w2 = #ddd
lnk = #418BA4
hlnk = #6AC
btn = #418BA4
hbtn = #6AC
tru = #262
htru = #6C6
fals = #822
hfals = #F55
idk = #A50
hidk = #FA0
cal0 = #533
cal1 = #535
cal2 = #553
cal3 = #555
cal4 = #353
pb = #669
c0 = #66A
c1 = #3C3
c2 = #CC3
c3 = #C33
c4 = #C73
c5 = #de2600
primary = c5
secoudary = bg1_1
scroll-s = 0
text_w = w0
text_b = bg1_1
text_red = c5
bg_w = w0
bg_b = bg1_1
bg_red = c5
t = transparent
i = !important
vendors = official
// Convert colors to HSLA format.
/// NOTE: This is done just for consistency of generated colors.
add(a, b = unit(a, px))
a + b
// }}}
@-moz-document url-prefix("pornhub.com"), domain("pornhub.com"), domain("rt.pornhub.com") {
/* Start page*/
:root {
--scroll_size: scroll_size;
--sbr2: calc(scroll_size / 2);
--sbr4: calc(scroll_size / 4);
--scroll-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0);
--scroll-width: scroll_size;
--scroll-border-2: var(--sbr2);
--scroll-border-4: var(--sbr4);
--widht-m: 275px;
--widht-menu: var(--widht-m, 275px);
--widht-menu-videos-list: calc(var(--widht-menu) + 40px);
--widht-menu-videos-list-wrapper: calc(var(--widht-menu) );
--widht-menu-videos-list-item: calc(var(--widht-menu) + 40px);
--main-box-shadow: -14px 17px 48px -12px rgba(0, 0, 0, 0);
--var-max-height-menu: 46px;
--var-max-height-mozaique: 54px;
--var-max-widht-menu: calc(var(--widht-menu) + 40px);
--var-height-menu-item: 140px;
--var-height-menu-item-two: 177px;
--var-thumb-transform: translate(-194px, - 43px);
--var-max-width-btn: 79px;
--var-max-height-btn-menu: 54px;
--color-primary: #ff9000;
--color-primary-secoudary: #7f4a07;
--min-height-page: 1px;
--player-height: calc(var(--vh, 1vh) * 100 - var(--min-height-page));
--bg: bg1;
--bg_1: var(bg1_1, #222222);
bg1 = var(--bg);
scroll_size = var(--scroll_size);
}
::-moz-selection {
// background: c5;
color: htxt;
}
::-moz-selection,
::selection {
// background: c5;
color: text;
}
/* Scrollbars */
::-webkit-scrollbar,
#menu-content-list::-webkit-scrollbar,
.menu-list__mozaique::-webkit-scrollbar {
width: add(scroll-s);
&-track-piece {
border: none;
// background-color: bg2 i;
}
&-corner,
&-thumb {
// background-color:bg3 i;
// border-radius: scroll-s / 2;
border: none;
}
&-corner {
// background: bg1;
border-color: bg2;
}
&-track {
// background bg1;
// box-shadow var(--scroll-box-shadow);
// border-radius: scroll-s;
}
&-thumb {
// background: none;
// background-color: bg5;
border-radius: 3px;
// box-shadow: var(--scroll-box-shadow);
&:hover {
// background-color: rgba(255, 85, 85, .6);
}
}
}
// Место для CSS кода...
#main-container #hd-leftColVideoPage .video-wrapper.relatedVideos {
display: none;
}
html.supportsGridLayout.fluidContainer #main-container #vpContentContainer #hd-leftColVideoPage .video-wrapper #lockedPlayer.wide,
html.supportsGridLayout.fluidContainer #main-container #vpContentContainer #hd-leftColVideoPage .video-wrapper #lockedPlayer.wide + .joinWrapper,
html.supportsGridLayout.fluidContainer #main-container #vpContentContainer #hd-leftColVideoPage .video-wrapper #player.wide,
html.supportsGridLayout.fluidContainer #main-container #vpContentContainer #hd-leftColVideoPage .video-wrapper #player.wide + .joinWrapper {
width: 100vw!important;
min-width: 100vw;
max-width: 100vw;
min-height: 99vh!important;
height: 99%!important;
max-height: 99vh!important;
}
html.supportsGridLayout.fluidContainer .container,
html.supportsGridLayout.fluidContainer .section_wrapper {
min-width: 100vw;
max-width: 100vw;
width: 100vw!important;
}
html.supportsGridLayout.fluidContainer #main-container #vpContentContainer #hd-leftColVideoPage {
width: 100vw!important;
height: auto;
}
.wrapper {
header#header {
max-width: 90vw;
margin: 0 auto;
//position: absolute;
left: 0;
right: 0;
bottom: 0;
}
}
.fluidContainer .wrapper {
//overflow-x: hidden!important;
}
.video-action-tab.about-tab {
.video-detailed-info {
display: none;
}
}
#main-container #hd-leftColVideoPage .video-wrapper.recommendedVideos.wide,
#main-container #hd-leftColVideoPage .video-wrapper.relatedVideos.wide {
z-index: 1;
max-width: 1920px;
}
#main-container #hd-leftColVideoPage .video-wrapper.relatedVideos {
display: block;
// transform: translateY(86px)!important;
}
#main-container #player,
#vpContentContainer {
// padding-bottom: 56%!important;
// min-height: 100vh!important;
// height: auto!important;
min-width: 100vw;
max-width: 100vw;
width: 100vw!important;
}
html.supportsGridLayout.fluidContainer #main-container #vpContentContainer #hd-leftColVideoPage .video-wrapper #player video-element {
min-height: 100vh!important;
min-width: 100vw;
max-width: 100vw;
width: 100vw!important;
//height: 100vh!important;
}
html.supportsGridLayout.fluidContainer #main-container #vpContentContainer #hd-leftColVideoPage .video-wrapper #player #videoElementPoster {
// width: auto!important;
// min-width: auto;
// min-height: 100vh!important;
// height: 100vh!important;
// transition: all .5s ease-in-out;
// width: auto !important;
// min-width: auto;
display: block;
margin: 0 auto;
height: var(--var-height-menu-item);
min-height: var(--var-height-menu-item);
width: var(--widht-menu-videos-list-wrapper);
min-width: var(--widht-menu-videos-list-wrapper);
}
body.logged-in {
& #header.hasAdAlert {
display: none;
}
}
body.logged-in,
body.logged-out {
// min-height: 100vh!important;
// height: 100vh!important;
// max-height: 100vh!important;
& .footerContentWrapper {
display: none;
}
#header.hasAdAlert {
display: none!important;
}
& .zujjq1eh5induq1f {
padding: 0;
}
& > .wrapper + div {
padding: 0!important;
}
& > .wrapper {
overflow: hidden!important;
}
.nf-videos {
overflow: scroll;
height: 100%;
max-height: 100vh;
}
& > .wrapper {
position: relative;
// height: 100vh !important;
// min-height: 100vh;
// max-height: 100vh;
// overflow-y: auto !important;
// overflow: hidden!important;
& .hasAdAlert,
& header#header,
& #under-player-playlists {
display: none;
}
& > .container {
min-height: 100vh!important;
margin-left: 0;
margin-right: 0;
// height: 100vh!important;
#main-container {
min-height: 100vh!important;
//height: 100vh!important;
&.clearfix {
&:after {
display:none;
}
}
}
}
& .video-wrapper.relatedVideos {
//max-width: calc(100vw - 272px)!important;
margin-right: 0;
margin-left: auto;
}
}
}
.mgp_container {
min-height: 100vh!important;
height: 100vh!important;
width: 100%!important;
min-width: 100vw!important;
}
.video-wrapper {
& > #player {
max-height: 100vh!important;
height: 100vh!important;
}
.hd.clear,
.empty_uBlock {
display: none;
}
}
body[data-hj-ignore-attributes] {
& > .wrapper #header.hasAdAlert,
& > .wrapper #header {
display: flex!important;
}
& #categoriesGay ul,
#categoriesStraight ul {
overflow: auto!important;
}
}
html.supportsGridLayout.fluidContainer.largeLayout {
.video-action-sub-tab.addToStream li .wrap,
ul.videos li .wrap {
width: var(--widht-menu-videos-list-item);
height: auto;
min-height: 370px;
}
}
html.supportsGridLayout #main-container #vpContentContainer:not(.premiumLocked) #hd-leftColVideoPage .video-wrapper #relatedVideosCenter.underplayer-thumbs {
display: grid;
overflow-x: auto;
justify-content: start;
align-content: start;
grid-template-rows: auto;
grid-template-columns: repeat(4, 1fr);
grid-row-gap: 0;
grid-column-gap: 0;
padding: 0;
}
.add-to-playlist-icon,
.preloadLine {
display: none!important;
}
#recommendedVideosVPage .videos-list {
opacity: 0;
top: unset;
position: relative;
left: unset;
padding-left: 0px;
padding-right: 0px;
overflow-x: hidden;
overflow-y: auto;
max-height: 80vh;
display: block;
transition: all .5s ease-in-out;
margin-right: 0;
margin-left: 0;
// right: 0px;
// min-height: 80vh;
// margin: 0 -10px;
// width: var(--widht-menu-videos-list-wrapper);
// min-width: var(--widht-menu-videos-list-wrapper);
// max-width: var(--widht-menu-videos-list-wrapper);
.videos.user-playlist {
display: grid!important;
grid-template-rows: auto!important;
grid-template-columns: repeat(0,1fr)!important;
justify-content: flex-start!impo...