// Variables
@alertbg: #FCC;
@alertborder: darken(@alertbg, 10%);
@blur: 5px;
@border: #EBEBEB;
@diffadd: #A3D3FF; // Color used to highlight added lines (when comparing revisions)
@diffdel: #FF8F8F; // Color used to highlight deleted lines (when comparing revisions)
@extlink: #1224D4; // Color for external links
@hilight: #007AFF; // Color used for highlighted tabs and internal links
@newlink: #E9392D; // If the page linked to doesn't exist...
@pagebg: #202020;
@radius: 6px; // Radius for many things, like tables and lots of boxes

// Mix-ins
.segments() {
	border:1px solid @hilight;
	border-left-width:0;
	float:left;
	line-height:1.7em;
	margin:0;
	vertical-align:middle;

	&:active {
		background-color:#7CF;
		background-color:rgba(130,160,255,0.4);
	}
	// Corners
	&:first-child {
		border-bottom-left-radius:@radius;
		border-width:1px;
		border-top-left-radius:@radius;
	}
	&:last-child {
		border-bottom-right-radius:@radius;
		border-top-right-radius:@radius;
	}
}
.sideless() {
	border-width:1px 0 !important;
}
.toolbar() {
	// The RGB values for the hex and alpha values don't match to account for the title bar's translucency.
	-webkit-backdrop-filter:blur(@blur);
	background-color:#F5F5F5;
	background-color:rgba(249,249,249,0.9);
	border-bottom:1px solid #B2B2B2;
	border-bottom-color:rgba(178,178,178,0.5);
}
.whitebox(@rad: 0) {
	background-color:#FFF;
	border-color:@border;
	border-radius:@rad;
}

// The real deal.
* {
	-webkit-font-smoothing:subpixel-antialiased; // Needed for Safari.
}
a, a:active, a:visited,
div#content a {
	color:@hilight;
}
body {
	-webkit-text-size-adjust: none;
	background-color:@pagebg;
	font-size:12pt;
	margin:0;
}
body, input {
	font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}
code {
	.whitebox;
	border-color:#E3E3E3;
	font-size:smaller;
	padding:0 2px;
}
code,
pre,
td.mw-enhanced-rc {
	font-family:"SF Mono", Menlo, "Andale Mono", "Courier Prime", "Courier New", Courier, monospace;
}
div#mw-footer {
	color:#FFF;
	margin-left:160px;
	padding:0 0.5em;

	ul {
		list-style:none;
		margin:0;

		&#footer-places {
			clear:left;

			> li {
				float:left;
				padding-right:1em;
			}
		}
		&#footer-icons {
			float:right;
			margin:0.5em 0;
		}
	}
}
div#mw-panel {
	background-color:#363631;
	display:block;
	padding:10px 0;
	position:fixed;
	top:160px;
	width:160px;

	a {
		font-size:10pt;
	}
	a#feed-atom {
		// Wireframe
		// background-image:url("images/feed-icon.png"), url("images/feed-icon.svg");

		// Looks more like an icon from Settings.
		background-image:url("images/feed-icon-alt.png"), url("images/feed-icon-alt.svg");
	}
	h3 {
		background-color:#080808;
		color:#FFF;
		font-size:1em;
		margin-bottom:0;
		padding:5pt 0 5pt 15px;
	}
	ul {
		line-height:1.2em;
		list-style:none;
		margin:10px 15px;
		margin-right:0;
	}
}
div#mw-toolbar {
	.toolbar;
	height:80px;
	left:0;
	position:fixed;
	top:0;
	width:100%;
	z-index:1; // Needed so div#localNotice isn't drawn above the toolbar.

	// Hide navigation headers
	> h2, h3 {
		display:none;
	}

	// Gives that iOS tab appearance.
	div#mw-tabs {
		font-size:10pt;
		
		div.mw-portlet {
			display:inline;

			ul {
				display:block;
				float:left;
				list-style:none;
				margin-left:16px;
				margin-top:25px;

				> li {
					.segments;

					&.new {
						border-color:@newlink !important;
						border-width:1px !important;

						&:active {
							background-color:#F8EBEA;
							background-color:rgba(255,140,120,0.35);
						}
						&.selected {
							background-color:@newlink !important;
						}

						> a,
						> a:active {
							color:#E02342 !important;
						}
					}

					&.selected {
						background-color:@hilight;
						
						> a,
						> a:active {
							color:#FFF !important;
						}
					}

					> a {
						display:inline;
						padding:0.2em 0.5em;
					}
					> a:active {
						color:@hilight;
					}
				}
			}
		}
		// Search box.
		form#p-search {
			float:right;
			margin:24px 11% 17px 0;
			width:25%;

			input {
				font-size:1em;
				line-height:1.7em;

				&#searchInput {
					background-color:#E3E4E6;
					background-color:rgba(0, 0, 0, 0.08);
					border:0;
					border-radius:@radius;
					display:inline;
					padding:0 0.25em;
					text-align:center;
					-webkit-appearance:textfield; // Otherwise you get a search box that doesn't get styled as much in WebKit.

					&:focus {
						outline:0;
						text-align:left;
					}
					// Styling the placeholder. Vendor prefixes suck.
					&::-webkit-input-placeholder {
						color:#8E8E93;
					}
					&::-moz-placeholder {
						color:#8E8E93;
						opacity:1;
					}
					&:-ms-input-placeholder {
						color:#8E8E93;
					}
				}
				&[type="submit"] {
					color:@hilight;
					padding:2px 6px;

					&:active {
						opacity:0.4;
					}
				}
			}
		}
	}
	// Styled like the iOS status bar
	div#p-personal {
		font-size:10pt;
		height:24px; // Needed for the magical double-click scrolling.
		padding-top:0;
		width:87.5%;

		ul {
			list-style:none;
			margin:0;
			text-align:center;
			width:100%;

			> li {
				border:0 !important;
				display:inline;
				margin:0 0.75em;

				> a {
					color:#000 !important;
					font-weight:bold;
				}
			}
		}
	}

	> ul > li a {
		color:#000;
		font-size:1em;
	}
}
div#mw-toolbar,
div#mw-toolbar-spacer {
	height:100px;
	margin:0 0 0 160.3px;
}
div#mw-toolbar-spacer {
	background-color:#EFEFF4;
}
div#mw-wrapper {
	> h2 {
		display:none;
	}
}
div#p-logo {
	background-color:@pagebg;
	padding:12.5px;
	position:fixed;

	&, > a.mw-wiki-logo {
		display:block;
		height:135px;
		width:135px;
	}
	> a#p-banner {
		display:none;
	}
}
div#preferences {
	clear:both;
}
// We just got a letter! I wonder who it's from?
div#usermessage {
		-webkit-backdrop-filter:blur(@blur);
	background-color:#000;
	background-color:rgba(0,0,0,0.8);
	border-width:0;
	color:#FFF;
	font-weight:normal;
	left:0;
	margin:0;
	padding:1em 1.5em;
	position:fixed;
	top:0;
	vertical-align:middle;
	width:100%;
	z-index:200; // We want this on top of *EVERYTHING*

	> h4 {
		color:#FFF;
		text-transform:none;
	}
	> p {
		font-size:smaller;
	}
	a {
		color:#FFF;
		font-weight:bold;
		text-decoration:underline;

		&:hover {
			text-decoration:none;
		}
	}
}
div.mw-body {
	background-color:#EFEFF4;
	margin-left:160px;
	overflow-x:auto;
	padding:32px 16px;

	// Highlight effect on click.
	a:active {
		margin:-3px;
		padding:3px;

		&:focus {
			outline-style:none;
		}
	}
	a:active,
	input[type="submit"]:active {
		background-color:#AFAFAF !important;
		background-color:rgba(0,0,0,0.27) !important;
		border-radius:@radius;
		color:#085DBA;
	}
	.plainlinks {
		a:active {
			padding:3px !important;
		}
	}
	// Make sure the icon for external links doesn't interfere.
	a.external,
	a.external:visited,
	a.extiw,
	a.extiw:visited {
		color:@extlink;

		&:active {
			background-position:center right 3px;
			color:@extlink;
			padding-right:18px;
		}
	}
	a.image {
		&:active {
			background-color:transparent !important;
			margin:0;
			padding:0;
		}
		 > img:active {
			opacity:0.5;
		}
	}
	a.new {
		&, &:visited {
			color:@newlink !important;		
		}
		&:active {
			color:darken(@newlink, 20%) !important;
		}
	}
	div#catlinks {
		.whitebox(@rad: @radius);
		border:0;
	}
	// Table of contents.
	div#toc {
		.whitebox(@rad: @radius);
		border:0;
		font-size:smaller;
	}
	div#userloginForm {
		margin-right:0;
		width:100%;

		label {
			color:#7C7C81;
			text-transform:uppercase;
		}
	}
	.mw-ui-checkbox:not(#noop) input[type="checkbox"] {
		height:auto;
		opacity:1;
		position:relative; // Fixes Safari's bouncing checkbox.
		width:auto;
		margin-top: -4px;
	}
	.mw-ui-checkbox:not(#noop) input[type="checkbox"] + label:before {
		display:none;
	}
	// [[Special:UserPreferences]]
	div.editOptions {
		background-color:#FFF;
		border:1px solid @border;
		margin:1em 0;
	}
	 > div.mw-body-content {
		-webkit-text-size-adjust:auto;
	}
	 > div.mw-indicators {
		float:right;
	}
	div.successbox {
		border-color:#0D0;
	}
	// Reset password [[Special:PasswordReset]]
	form.oo-ui-layout {
		fieldset {
			background-color:transparent;

			& > legend {
				display:none;
			}
		}
	}
	.oo-ui-textInputWidget {
		max-width: none;
	}
	.oo-ui-fieldsetLayout-group {
		margin:0 -16px;
		padding:0.5em 0;
	}
	.oo-ui-labelElement-label {
		margin-left: 20px;
	}
	.oo-ui-widget.oo-ui-widget-enabled.oo-ui-labelElement-label.oo-ui-labelElement.oo-ui-labelWidget {
		position: relative;
		top:-10px
	}
	// Search page. [[Special:Search]]
	form#powersearch,
	form#search {
		font-size:11pt;

		div.mw-search-profile-tabs {
			background-color:transparent;
			border:0;

			ul {
				display:block;
				float:left;
				list-style:none;
				margin-top:25px;

				> li {
					.segments;

					> a {
						padding:0 0.25em;
					}
					> a:active {
						background-color:transparent;
						border-radius:0;
						margin:0;
						padding:0 0.25em;
					}
				}
				> li.current {
					background-color:@hilight;

					> a {
						color:#FFF;
					}
					> a:active {
						color:#FFF;
						color:rgba(255, 255, 255, 0.8) !important;
					}
					> a:hover {
						cursor:pointer;
						text-decoration:underline;
					}
				}
			}
		}
		fieldset#mw-searchoptions {
			border-top-width:1px !important;
			margin-top:1em;
		}
		input#powerSearchText,
		input#searchText {
			border-radius:4px;
			border-width:0;
			padding:0;

			&:focus {
				border:0;
				box-shadow:none;
			}
		}
		input.mw-ui-button {
			background-color:transparent;
			border:0;
			color:@hilight;
			font-weight:normal;
			padding:0 0.2em;
			text-shadow:none;
		}
	}
	// Login form [[Special:UserLogin]]
	// Password reset form [[Special:PasswordReset]]
	form.mw-ui-vform,
	form.oo-ui-layout {
		width:100%;

		// "Log in" button
		button.mw-ui-button {
			max-width:none !important;
		}
		// Error for wrong user/password
		div.errorbox {
			background-color:@alertbg;
			border-color:@alertborder;
			.sideless;
			width:100%;
		}
		div.htmlform-tip {
			margin: 0 0 15px;
		}
		div.mw-htmlform-field-HTMLSubmitField,
		div.mw-htmlform-submit-buttons {
			> div {
				margin:0 -16px;

				&.oo-ui-buttonElement {
					display:block;
				}

				> button {
					background-color:#FFF !important;
					border:1px solid #E3E3E3 !important;
					.sideless;
					border-radius:0;
					color:@hilight !important;
					font-weight:normal;
					text-align:left;
					text-shadow:none;

					&.oo-ui-inputWidget-input {
						width:100%;
					}

					&:active {
						background-color:#D9D9D9 !important;
					}
				}
				
			}
		}
		div.mw-ui-vform-field > div.mw-input {
			&:not(.mw-htmlform-nolabel) {
				margin:0 -16px;
				padding:0.5em 0;
			}
		}
		// Warning for already being logged in
		div.warningbox {
			background-color:#FFC;
			border-color:#DD3;
			.sideless;
			width:100%;
		}

		// Form elements.
		input {
			background-color:#FFF;
			border:1px solid #E3E3E3;
			border-width:1px 0;
			font-size:11pt;
			padding-top:1px;

			// The text boxes.
			&.mw-ui-input {
			//	background:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjE0cHgiIHdpZHRoPSIxNHB4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTQgMTQiPgogPGcgaWQ9IlBhZ2UtMSIgZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjQkJCQUMxIj4KICA8cGF0aCBpZD0iUmVjdGFuZ2xlLTEiIGQ9Im03LjEzNiAwLjYzNjA0bDYuMzY0IDYuMzY0LTEuNzY4IDEuNzY3OC02LjM2MzctNi4zNjQgMS43Njc3LTEuNzY3OHYwLjAwMDA0eiIvPgogIDxwYXRoIGlkPSJSZWN0YW5nbGUtMS1Db3B5IiBkPSJtNy4xMzYgMTMuMzY0bDYuMzY0LTYuMzY0LTEuNzY4LTEuNzY3OC02LjM2MzcgNi4zNjM4IDEuNzY3NyAxLjc2OHoiLz4KIDwvZz4KPC9zdmc+Cg==") no-repeat fixed; // Chevron
				color:#85858A;
				height:2em;
				margin-bottom:1em;
				padding:0;
				padding:1.25em 16px;
				width:100%;

				&:focus {
					background-image:none;
					box-shadow:none;
					color:#000;
				}
			}
		}

		label {
			> a.mw-ui-flush-right {
				float:none;
			}
		}
	}
	h1, h2 {
		font-weight:500;

		&.firstHeading {
			color:#111;
			font-weight:bold;
			margin:0;
			padding:0;
			text-transform:none;
		}
	}
	h3, h4 {
		font-weight:normal;
	}
	h5, h6 {
		font-weight:300;
	}
	ol {
		line-height:1.35em;
	}
}
// Search suggestions.
div.suggestions {
	background-color:#FFF;
	border:1px solid @border;
	margin-top:0;

	div.suggestions-results {
		border:0;

		> a.mw-searchSuggest-link {
			background-color:#F0F;
		}
		div.suggestions-result {
			border-bottom:1px solid @border;
			margin-left:15px;
			padding-left:0;
		}
	}
	div.suggestions-result-current {
		background-color:#D0D0D0;
		color:#000;
		margin-left:0 !important;
		padding-left:15px !important;

		> * {
			color:#000;
			margin-left:0 !important;
			padding-left:0;
		}
	}
	div.suggestions-special {
		border:0;
		border-top:1px solid @border;
		padding:0.25em 0;

		> * {
			margin-left:15px;
			padding-left:0;
		}
	}
}
// YOU get a white box. And YOU get a white box. EVERYBODY gets a white box!
div.thumbinner,
fieldset,
li.gallerybox div.thumb,
pre {
	.whitebox;
}
fieldset.rcoptions {
	font-size:11pt;
	line-height:1.25em;

	> form {
		font-size:10pt;
	}
}
// Make submit buttons look like that blue, tappable text.
input[type="submit"] {
	background-color:transparent;
	border:0;
	color:@hilight;
	font-size:1em;

	&:focus {
		outline:0;
	}
}
h1, h2, h3, h4, h5, h6,
legend {
	border:0;
	color:#7C7C81;
	text-transform:uppercase;
}
img.thumbimage,
ul#filetoc {
	border-color:@border;
}
legend {
	background-color:#FFF;
	line-height:1em;
	padding:0.5em;
}
li {
	margin-bottom:0;
}
p {
	line-height:1.25em;
}
pre {
	white-space:pre-wrap;
}
// Comparing revisions
table.diff {
	td.diff-addedline {
		background-color:lighten(@diffadd, 10%);

		.diffchange {
			background-color:@diffadd;
		}
	}
	td.diff-deletedline {
		background-color:lighten(@diffdel, 10%);
		border-color:@diffdel;

		.diffchange {
			background-color:@diffdel;
		}
	}
}
// Super complex table CSS that somehow achieves what we want
table.wikitable {
	background-color:transparent; // This actually makes a difference if you blow up the page by like... 900% or something.
	border:0;
	border-radius:@radius;

	> tbody > tr {
		&:first-child {
			// All the cells in the top row
			> * {
				border-top:0;

				// top left
				&:first-child {
					border-top-left-radius:@radius;
				}
				// top right
				&:last-child {
					border-top-right-radius:@radius;
				}
			}
		}
		&:last-child {
			// All the cells in the bottom row
			> * {
				border-bottom:0;

				// bottom left
				&:first-child {
					border-bottom-left-radius:@radius;
				}
				// bottom right
				&:last-child {
					border-bottom-right-radius:@radius;
				}
			}
		}

		> td  {
			background-color:#FFF;
		}
		> th {
			background-color:#F3F3F3;
		}
		// All the cells!
		> * {
			border-color:#E3E3E3;
			padding:4px;

			// leftmost column
			&:first-child {
				border-left:0;
			}
			// rightmost column
			&:last-child {
				border-right:0;
			}
		}
	}
}
ul {
	line-height:1.35em;
	list-style-type:disc;

	&#filetoc {
		.sideless;
	}

	// Looking at page history.
	&#pagehistory {
		list-style:none;
		margin-left:0;

		> li {
			padding:0.1em 0.5em;
		}
		> li.after,
		> li.before {
			border:0;
		}
		> li.between,
		> li.selected {
			.whitebox;
			border-style:solid;
			.sideless;
		}
	}
	// Deja vu? iOS tab stuff again.
	&#preftoc {
		display:block;
		list-style:none;
		margin:18px 0 0 2%;

		> li {
			.segments;

			// Give The Chosen One a highlight
			&.selected {
				background-color:@hilight;
				> a {
					color:#FFF !important;
				}
				> a:active {
					color:rgba(255,255,255,0.8) !important;
				}
			}

			> a {
				display:inline;
				padding:0.2em 0.7em;

				// If you don't do this, the preference tabs get that gray highlight on click as well.
				&:active {
					background-color:transparent !important;
					color:@hilight !important;
					margin:0 !important;
					padding:0.2em 0.7em !important;
				}
				&:focus {
					outline:0;
				}
			}
		}
	}
}

/* Mobile fixes by iAdam1n */
@media only screen and (max-device-width:600px) {
	#searchInput {
		max-width:120px;
	}
 
	#pt-userpage, #pt-mytalk, #pt-preferences, #pt-watchlist, #pt-mycontris, #pt-logout {
		font-size:1.1em;
	}
 
	#mw-panel {
		font-size:1.05em;
	}
 
	.mw-label.mw-namespace-label label, .mw-specialpage-summary {
		font-size:1.3em;
	}
	
	#ooui-2.mw-htmlform-submit.oo-ui-widget.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-inputWidget.oo-ui-buttonElement.oo-ui-buttonElement-framed.oo-ui-labelElement.oo-ui-buttonInputWidget {
		margin:0 -15px;
	}

	div.mw-body form.mw-ui-vform div.mw-htmlform-field-HTMLSubmitField > div, div.mw-body form.oo-ui-layout div.mw-htmlform-field-HTMLSubmitField > div, div.mw-body form.mw-ui-vform div.mw-htmlform-submit-buttons > div, div.mw-body form.oo-ui-layout div.mw-htmlform-submit-buttons > div {
		margin:0 -15px;
	}
	
	div.mw-body form.mw-ui-vform input, div.mw-body form.oo-ui-layout input {
		margin-left: 1px;
	}
}
