/* ==UserStyle==
@name           /r/anime Background Image
@namespace      github.com/Geo1088
@version        0.0.1
@description    Sets a maximum page width for /r/anime and adds a background behind it. Send feedback/issues to /u/geo1088.
@author         Geo1088 (https://old.reddit.com/message/compose?to=geo1088)
@homepageURL    https://github.com/Geo1088/r-anime-page-bg
@supportURL     https://github.com/Geo1088/r-anime-page-bg/issues
@updateURL      https://raw.githubusercontent.com/Geo1088/r-anime-page-bg/master/main.user.css
@license        MIT
@preprocessor   uso
@advanced  text   image-url     "Background image URL"  https://i.ytimg.com/vi/gpV48sIOBfw/maxresdefault.jpg
@advanced  text   max-width     "Max page width"        1280px
@advanced  color  bg-color      "Background color"      #D6D6D6
@advanced  color  border-color  "Border color"          #CCCCCC
==/UserStyle== */

@-moz-document regexp("https?:\\/\\/(new|www|old|(\\w\\w-)?\\w\\w).reddit.com\\/r\\/anime\\/.*") {
	@media screen and (min-width: /*[[max-width]]*/) {
		/* Recenter header */
		#header {
			position: relative;
			width: 100vw;
			left: 50%;
			transform: translateX(-50%);
		}
		/* Extend the tab menu "fins" */
		/* Strange one-off offsets to prefent stuttering on the edge of the viewport */
		#header::before,
		#header::after {
			content: "";
			display: block;
			position: absolute;
			top: 80px;
			left: -1px;
			width: calc(50vw - /*[[max-width]]*/ / 2 + 1px);
			height: 35px;
			background: #557eb8;
		}
		#header::after {
			left: unset;
			right: -1px; /* this is the line that makes us need overflow-x: hidden; on html */
		}
		/* Move the tab bar and stuff back to the center */
		#header-bottom-left,
		#header-bottom-right,
		#RESShortcutsEditContainer {
			margin-left: calc(50vw - /*[[max-width]]*/ / 2);
			margin-right: calc(50vw - /*[[max-width]]*/ / 2);
		}
		#sr-header-area {
			padding-left: calc(50vw - /*[[max-width]]*/ / 2);
			padding-right: calc(50vw - /*[[max-width]]*/ / 2);
		}
	}
	/* These guys are outside the media query because they don't deal with weird margins */
	html {
		background: url(/*[[image-url]]*/) center/cover no-repeat fixed;
		background-color: /*[[bg-color]]*/;
		overflow-x: hidden; /* see #header::after */
	}
	[xmlns] body { /* weird selector because new reddit is terrible */
		max-width: /*[[max-width]]*/;
		margin: 0 auto;
		position: relative;
		box-shadow: 0 0 0 1px /*[[border-color]]*/;
	}
}