DeAnnoy Telegraph [papo] by papo

/* ==UserStyle==
@name           DeAnnoy Telegraph [papo]
@namespace      github.com/paponius/userstyles
@version        1.0.2
@description    Updated: 2024-11. Notes and feedback: https://github.com/paponius/userstyles/. Check what it does in style Options, or read @var descriptions on top of the code.
@author         Papo
@homepageURL    https://github.com/paponius/userstyles/
@supportURL     https://github.com/paponius/userstyles/
@license        CC BY-NC-SA 4.0
@preprocessor   less

# --- END: common block ---



#    FORMAT A:                         { "OPTION_NAME:OPTION_LABEL": "VALUE" , ... }
@var select DeclutterHeaders       'Remove links and menus from headers on article pages. (When ON, Go to Home Page to access menu. Or use hamburger icon)' [
  "show_all:show all (Site's default)",
  'hide_sections:hide sections',
  'hide_sections_and_subsections:hide sections and subsections'
]
@var checkbox HideVanityLabel        'Hide Vanity Label' 0
@var checkbox HideWidgetsOnHP        'Hide top header widgets on Home Page' 0
@var checkbox HideLoginRegister      'Hide Login and Register, when you never plan to use it.' 0
@var checkbox HideComments           "Hide comments" 0



# --- optional common block ---
#var checkbox UnstickHeader          "Unstick the header" 1

#var checkbox HidePriHeader          'Hide primary navi header on article pages. (When ON, Go to Home Page to access it.)' 0
#var checkbox HideSecHeader          'Hide secondary navi header on article pages. (When ON, Go to Home Page to access it.)' 0
#var checkbox DeclutterHeaders       'Remove links and menus from headers on article pages. (When ON, Go to Home Page to access menu.)' 0

#var checkbox smallerHeader          "Smaller Header" 1
#var checkbox oneHeader              "One joined header" 1

# - recycle - recirc -
#var checkbox HideMidArticleAnnoy    "Hide mid-article subscription and unrelated annoyance boxes" 1
#var checkbox HideMidArticleRecirc   "Hide mid-article recirculation cards" 0
#var checkbox HideOutbrainRecycle    'Hide 3rd party visitor Recycle elements' 1
#var checkbox NoRecycle              'Distraction Free: Do not Recycle me (no More Stories, no Related, ...)' 0
#var checkbox Declutter              'Remove excessive elements, which have nothing to do with opened article.' 0

#var checkbox xxx                    'Find and install my "Dark BBC [papo]" Style for Dark but colorful restyling' 1

#var checkbox FullWidth              "Full Width (must enable also Distraction Free)" 0
#var checkbox responsive             "Make page more responsive to the size of a browser. (Not perfect.)" 0

#var checkbox hideFloatingShareBar   "Hide floating share bar." 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 fixEmptiness           "Remove excessive whitespace padding." 0

#var checkbox HideNewsletter         "Hide Newsletter subscription box" 1

#var checkbox HideComments           "Hide comments" 0

#var checkbox dont_degrade_images    '"Do not highlight images" There are some images, placed in a block big as the screen, where it is hard to find a spot for a mouse to not hover over this box and degrade the image.' 1
#var checkbox liveScreenSaver        'Live feed: screen space saver' 1
#var checkbox liveNormalSizeCaption  'Live feed: normal size caption' 1


#var checkbox blockPopupMenus           "Block popup menus, opening on hover over page content." 1

### Video player ###
#var checkbox hidePausedVideoOverlay "Hide spam on paused video. Enabling to see freezed video." 1
#var checkbox hideVidRecom           "Video Player: Hide recommendation overlay on pause" 1
#var checkbox hideVidBackdrop        "Video Player: Hide Video Backdrop overlay. Half of video is darker on mouse hover." 1
#var checkbox hideChromelessPlayer   "Hide floating video player, playing unrelated stories at the bottom of a page." 1
#var checkbox hideSmallPlayer        "Small Video Player: Hide always" 0
#var checkbox dontAutoPlayPreview    "Don't autoplay a video preview on some videos within the article. Show a video poster instead." 1
#var checkbox movePlayerPrevNext     "Video Player: Move big video overlaying Prev Next buttons to control panel. And remove black shade from video on mouse hover." 1
#var checkbox movePlayerVolume       "Video Player: Change volume control to horizontal. To avoid clicking it by mistake instead of the progress bar." 1
#var checkbox showProgressPossition  "Video Player: Show currently playing position." 1

#var checkbox hideRelatedVideo       'Small Video Player: Hide unrelated "Related videos". Sometimes it shows unrelated videos.' 1
#var checkbox moveControlsDown       "Small Video Player: Move nonsensicaly big red overlaying control buttons down" 1
#var checkbox moveVidContrUp         "Video Player: Move control buttons up. Usefull for videos with subtitles or a crawl text." 0
#var checkbox hideVidLogo            "Video Player: Hide Independent Logo" 0
#var checkbox hideVidSomething       "Video Player: Hide more overlays. No idea what. Let me know." 0
#var checkbox hideVidCaptions        "Video Player: Hide captions. No idea when, did not see any. Let me know." 0
#var checkbox hideVidContr           "Video Player: Hide control buttons. This could be useful to temporarily hide to take a screenshot." 0
#var checkbox showProgressPossition  "Video Player: Show ball on currently playing position." 1
#var checkbox movePlayerVolume       "Video Player: Change volume control to horizontal. To avoid clicking it by mistake instead of the progress bar." 1

#var checkbox fixControls            "Video Player: Move controls and buttons from video overlay down to blank space." 1
#var checkbox vidRemoveShade         "Video Player: Remove shade when mouse hover" 1
#var checkbox vidDisableShade        "vidDisableShade" 1

#var select debug-test "debug" {
  '0:Normal': '{ --debug: 0; }',
  "1:debug. It just shows testing elements in yellow. No useful purpose for daily use.": "{ --debug: 1; color: yellow !important; background: violet !important; }"
}

# --- END: optional common block ---


==/UserStyle== */
/* This preprocesor header and global variables are common part used in many of my styles. Version: 1.2.0 24-10 */
@-moz-document domain("telegraph.co.uk") {

& when (@DeclutterHeaders = hide_sections) or (@DeclutterHeaders = hide_sections_and_subsections) {
	/* this would move hamburhger icon left */
	/* .site-header__primary-navigation-wrapper { */
	.site-header__navigation {
		display: none;
	}
}
& when (@DeclutterHeaders = hide_sections_and_subsections) {
	.site-header__secondary-wrapper {
		display: none;
	}
}

& when (@HideVanityLabel = 1) {
	.e-site-logo__award {
		display: none;
	}

	/* - center logo on HP - */
/* 	.homePageRendererHTML is only on HP's <html> */
	/* alt A */
	/* .site-header__logo {
	position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	  } */
	/* alt */
	.homePageRendererHTML .site-header__logo {
	  display: flex;
	  align-items: center;
	}
	/* alt
	.site-header__logo {
		line-height: 106px;
	} */
	.homePageRendererHTML .e-site-logo:not(.salt) {
		padding-top: 0;
		padding-bottom: 0;
	}
	/* when there is a badge for a special day remembrance, it's misplaced */
	.homePageRendererHTML #site-logo + div {
		top: 0;
	}
}

& when (@HideLoginRegister = 1) {
	.e-site-header-button--subscribe.e-site-header-button
	, .e-site-header-button--sign-in.e-site-header-button {
		display: none;
	}
}

& when (@HideWidgetsOnHP = 1) {
	.site-header__utilities {
		display: none;
	}
	/* when no widgets and section navi bar, move hamburger and search icons to upper header */
	& when (@DeclutterHeaders = hide_sections) or (@DeclutterHeaders = hide_sections_and_subsections) {
		.site-header--has-utilities .site-header__masthead {
			display: flex;
			/* --was-display: grid; */
			width: unset;
			/* --was-width: 100%; */
		}
		/* line only partial was shown, don't know why, 100vw should be 100 % of the viewport */
		@media only screen and (min-width: 1024px) {
			.site-header--has-utilities .site-header__masthead::after {
				width: 171vw;
			}
		}
	}
}

& when (@HideComments = 1) {
	/* there are tags and licence inside the #comment element */
	/* 	#comment { */
	.comment__header-container:not(.salt)
	, .comment__policy-container:not(.salt) {
		display: none;
	}
}

/* & when (@HideOutbrainRecycle = 1) {
	[data-testid="outbrain"] {
		display: none;
	}
}
 */
}