Deannoy DailyMail [papo] by papo

/* ==UserStyle==
@name           Deannoy DailyMail [papo]
@namespace      github.com/paponius/userstyles
@version        1.0.3
@description    Updated: 2024-02. Notes and feedback: https://github.com/paponius/userstyles/. Removed distracting and annoying elements, more responsive. Check what it does in style Options, or read @var descriptions on top of the code.
@author         Papo (https://userstyles.org/users/685307)
@license        CC-BY-SA-4.0
@preprocessor   stylus

@var checkbox hideNakedCelebs        "Hide femail - narrow tall bar full of weird halfnaked people on the right side of the page." 1
@var checkbox hidePausedVideoOverlay "Hide spam on paused video. Enabling to see freezed video." 1
@var checkbox hideChromelessPlayer   "Hide floating video player, playing unrelated stories at the bottom of a page." 1
@var checkbox dontAutoPlayPreview    "Don't autoplay a video preview on some videos within the article. Show a video poster instead." 1
@var checkbox hideFloatingShareBar   "Hide floating share bar constantly present on top of the page." 1
@var checkbox hideOverPicShare       "Hide picture share overlay - icon over each picture in the article." 1
@var checkbox hideOverPicCnt         "Hide picture album overlay - icon over each picture in the article." 1
@var checkbox hideSelTextShare       "Hide share box poping up after a text is selected in an article." 0
@var checkbox responsive             "Make page more responsive to the size of a browser. (Not perfect.)" 0
==/UserStyle== */
/* First created 2018-09, Site did not changed much since. */
@-moz-document regexp(".*dailymail.co.uk/(?!video).*") {

/* Remove tall narrow right panel with small pics of weird half naked people,
   it's called .femail
   search box which is on top of this bar, will also disapear
   This does not just remove the bar, but redesign various elements to better fit the vacated space.
   This style section was created in 2018 and checked in 2024 except where indicated otherwise.
 */

/* 
  Pre-processer limitation
  Instead of using regex and separate @-moz-document for this one option,
  I wanted to use stylus-lang Built-in function selector-exists(), like this:
    if (hideNakedCelebs && selector-exists('.beta > .femail')) {
      ...
    }
  In a hope it might detect whether there is an element with .femail class on a web page.
  But 1. That's not what the function does. (It's not element-exist, but detects selectors only inside the own code).
  2. It's broken for 7 years: https://github.com/stylus/stylus/issues/2345
 */


if hideNakedCelebs {
	.beta {
		display: none;
	}
	.alpha {
		width: 100%;
	}
	.column-split { /* on main page */
		width: 462px;
		/* --was-width: 308px; */
	}
	.alpha .article-text { /* on article page */
		width: 100% !important;
		/* --was-width: 636px; */
	}
	/* center video div
	   values margin and width are copied from picture element (.article-text .artSplitter)
	   Do not center the video container, if it also contains "More videos" carousel. (support of :has() has just arrived)		
	 */
	.article-text .mol-video:not(:has(.video_carousel_container)) { /* alt: does not have another div.xwv-related-videos-container-4.rotator.news */
		margin: 0 auto 4px;
		width: 636px;
	}
	/* videos have defined width, based on Class,
	vjs-span-two-col is 636px and there is no need to change that,
	vjs-span-three-col is 964px and if not unset,
	will play partially out of sight
	from around 2018, 2402: did not check, did not test
	 */
	#mobileGalleryModal #mobileGallerySlider .slide-container .vjs-video-container.vjs-fixed.vjs-span-three-col, .vjs-video-container.vjs-fixed.vjs-span-three-col {
		width: unset !important;
		/* --was-width: 964px !important; */
	}
	/* two images side by side, fix: one jumping below
	from around 2018, 2402: did not check, did not test
	 */
	.article-text .xwArtSplitter .splitLeft, .article-text .xwArtSplitter .splitRight {
		width: 48%;
		/* --was-width: 472px; */
	}
	/* not needed
	.article-text .xwArtSplitter .splitRight {
		float: right;
	} */
	/* Related Articles - carousel, fix: right side hiding
	from around 2018, 2402: did not check, did not test
	 */
	.related-carousel.with-fb-or-tw .rotator, .related-carousel.with-fb-or-tw .rotator .rotator-panels li {
		width: unset;
		/* --was-width: 800px; */
	}
	.related-carousel.with-fb-or-tw .rotator .rotator-panels a {
		width: 18%;
		/* --was-width: 264px; */
	}

	/* Live video. Has fixed width defined inline */
	/* 2402: This rule is now not applied as sty original style is not in element anymore but defined with more specific selector than the one used here below and also with !important. But I don't see a difference when I did forced this rule.
	   Maybe this is not required anymore. Or it was targeting something else than I tested.
	   2402 Removing. On videos with More videos side bar, this caused the "More videos" carousel element jump out of place.
	 */
	/* .moduleFull .news {
		width: unset !important;
	} */
}

if responsive {
	#page-container {
		padding: 2px 10px !important unless not hideNakedCelebs ; /* conditional: the narrow bar would jump under the article otherwise */
	}
}
}
@-moz-document domain("dailymail.co.uk") {

.mol-related-videos-view-paused {
	display: none unless not hidePausedVideoOverlay;
}


#chromelessPlayer {
	display: none unless not hideChromelessPlayer;
}


if dontAutoPlayPreview {
	/* hide video preview */
	div:has(> video[loop]) {
		display: none;
	}
	/* unhide poster mage
	   on some videos, poster is included in <video> tag and following separate div.vjs-poster does not contain the image (is black)
	   is such case it does not have style='background-image: url("https://i.dai... and possibly always contains class .vjs-hidden
	   alt: .vjs-video-container > .video-js > div.vjs-poster[style*="background-image"] {
	 */
	.vjs-video-container > .video-js > div.vjs-poster:not(.vjs-hidden) {
		display: block !important;
	}
	/* The above poster rule needs !important because display: none is defined inline there in original,
	   now we need to add !important also to the following original rule and make the selector more specific,
	   otherwise poster will stay on during play */
	/* original is: .vjs-has-started .vjs-poster { display: none; } */
	.vjs-video-container > .video-js.vjs-has-started > div.vjs-poster {
		display: none !important;
	}
}


/* floating share bar added here 2209 */
/* Functionality of the share bar is also available from another fixed share bar in an article */
#floating-share-bar-container.sticky {
	display: none unless not hideFloatingShareBar;
}


/* -- picture overlays -- */

/* Share button. It can provide link to share the article and scroll to the shared picture. */
.container-3zJLP.vertical-2XJd5, /* added here around 2018-09~2001, still OK 2209 */
.container-3zJLP.horizontal-1eH9F, /* 2209 some are horizontal, they also have .copyLinkBoxOn-1Zh9v, but vertical do not */
{
    display: none unless not hideOverPicShare;
}

/* Blue button "View gallery" with number of pictures.
   Totaly useless. There is no difference in clicking the button or anywhere else on the picture. */
.openGalleryButton-2CswR /* 2209 */
/* in 2209 not present anymore: .overlay-icon.mobile-gallery */
{
    display: none unless not hideOverPicCnt;
}


#dms-txt {
	display: none !important unless not hideSelTextShare;
}


/* remove fixed page width,
 too small will not have to scroll horizontally,
 too wide will not look weird
 But there are so many elements with explicitly defined sizes, this would be very difficult to implement completely.
 e.g. "More videos" carousel, which is sometimes on the right side of a video, sticks out of main content box.
 I tried to restyle it, but after changing 10 rules, it was still not OK.
 */
if responsive {
	.page {
		width: 100% !important;
		/* width: 99% !important; */
		max-width: 964px !important;
		/* width: 964px; */
		/* 
		padding or margin does not work with 100% width,
		instead, 99% width can pad sides, or div below
		padding: 0px 10px;
		*/
	}
} /* if responsive */

}