DeAnnoy The Guardian [papo] by papo

/* ==UserStyle==
@name           DeAnnoy The Guardian [papo]
@namespace      github.com/paponius/userstyles
@version        1.0.0
@description    Updated: 2024-11. Notes and feedback: https://github.com/paponius/userstyles/. Removed distracting and annoying elements. 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 ---

@var checkbox HideTopHeader          'Hide top header on article pages. (When ON, Go to Home Page to access it.)' 0
@var checkbox SmallerMenu            'Smaller Menu' 1
@var checkbox ReorderMenu            'Reorder Menu (for now, does not work on all browser window widths)' 0
@var checkbox HideVerticalLines      'Hide Vertical Lines on article pages' 1


# --- 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("theguardian.com") {

/* #bannerandheader is not present on all pages, e.g. https://www.theguardian.com/world/live/2024/oct/31/spain-floods-valencia-malaga-latest-news */
/* 	#bannerandheader nav div:has(> #header-veggie-burger) { */

& when (@HideTopHeader = 1) {
	body:not(:has(#headlines)) header[data-component="header"] > section:has([data-component="topbar"]) {
		display: none;
	}
}

& when (@SmallerMenu = 1) {

	/* - Logo: The Guardian - */
	gu-island[name="Titlepiece"] nav a[data-link-name="header : logo"] svg {
		width: 118px;
	}
	div:has(> a[data-link-name="header : logo"]) {
		margin: 0;
	}

	/* - hamburger and "X" (when menu is open) - */
	#header-veggie-burger > span {
		width: 33px;
		/* --was-width: 40px; */
		height: 33px;
		/* --was-height: 40px; */
	}
	header[data-component="header"] nav div:has(> #header-veggie-burger) {
		bottom: 4px;
	}

	/* - menu items - */
	/* only in first <li> is <a#navigation> */
	header[data-component="header"] nav div > ul:has(#navigation) > li {
		height: 34px;
	}

	/* - country version - */
	header[data-component="header"] nav div > div:has(> button[data-link-name="header : titlepiece : edition-picker: toggle"]) {
/* 		margin: 0; */
	}
	header[data-component="header"] nav div > div > button[data-link-name="header : titlepiece : edition-picker: toggle"] {
/* 		margin: 0; */
		padding: 0;
		/* --was-font-size: 1.0625rem; */
		font-size: 1.3rem;
		/* when chevron wrapps to a new line */
		line-height: 0.6;
	}
	header[data-component="header"] nav div:has(> div > button[data-link-name="header : titlepiece : edition-picker: toggle"]) {
		grid-column: main-column-end/content-end;
	}
}


& when (@ReorderMenu = 1) {

	/* - menu icon - */

/* selects both hamburger and "X" */
	header[data-component="header"] nav div:has(> #header-veggie-burger) {
		/* 	grid-column: content-start; */
		grid-column: viewport-start;
		/* --was-grid-column: content-start/content-end; */
		right: 0;
		bottom: 0;
	}


	/* 
	[viewport-start] minmax(0, 1fr) 
	[content-start left-column-start] repeat(3, 60px) 
	[left-column-end main-column-start] repeat(12, 60px) 
	[main-column-end] repeat(1, 60px) 
	[content-end] minmax(0, 1fr) 
	[viewport-end] */

	/* also need /content-end, to paint line using ::after */
	/* - menu, expanded menu - */
	header nav div:has([data-link-name^="header : titlepiece : nav : primary : "]),
	#header-expanded-menu-root {
		grid-column: main-column-start/content-end;
		/* --was-grid-column: content-start/content-end; */
	}
	@media (min-width: 980px) {
	  @supports (width: 100vw) {
		#header-expanded-menu-root div:has(> ul) {
			margin-left: -563px;
		}
	  }
	}

	/* - logo - */
	header nav div:has(> [data-link-name="header : logo"]) {
	/* 	grid-column: content-start; */
		grid-column: 2;
		right: 0;
		justify-self: unset;
		align-self: unset;
	}
}


& when (@HideVerticalLines = 1) {
	main [data-gu-name="border"] {
		display: none;
	}
	main > article > div:not(.salt) {
		border: none;
	}
	header nav [data-testid="sub-nav"] {
	--x-xx: 1;
	}
	header nav [data-testid="sub-nav"]::before,
	header nav [data-testid="sub-nav"]::after {
		display: none;
	}
}


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