New font stack, plus some generic forms and crap

Follow-up on https://gerrit.wikimedia.org/r/501850:
* new font stack stolen from phabricator and then rearranged a
  bit to be less ornery
* restored searchinput fonts and prodded some other alignment
  issues
* p-personal alignment issues maybe addressed, maybe made worse;
  cannot test windows/mac because don't have either of them or
  any remaining budget with which to purchase either of them
  because holy crap expensive
* some very basic generic form styles to align the base ones a
  tad more consistently
* dumb fix for dateinput widgets being mixed into otherwise
  non-ooui forms

Bug: T221345
Change-Id: I43312b23197ed1ce5ea9cb75fb0b8e8466bac6a1

resources/forms.less

@@ -1,5 +1,29 @@
 @import 'variables.less';
 
+input {
+	margin: 0.5em 0;
+	padding: 0.34em;
+	font-family: @fonts;
+}
+
+.mw-input-with-label {
+	display: block; // wat (this is probably an awful idea but aaaaaah whatever)
+}
+
+// Fix for half-arsed date input conversion on special:contributions and anywhere else
+// that's not actually ooui: add just enough margin to keep multiple widgets from fondling
+// each other
+.mw-widget-dateInputWidget {
+	margin: 0 0 0.2em 0;
+}
+
+// More fondling, because we've removed the default margins in normalise
+input[ type='radio' ],
+input[ type='checkbox' ] {
+	margin: 0.35em 0.2em 0.25em 0.35em;
+	box-sizing: border-box;
+}
+
 textarea,
 #searchInput {
 	box-sizing: border-box;

resources/screen-common.less

@@ -103,12 +103,15 @@ body {
 	background: transparent;
 	width: 100%;
 	min-height: 0;
+	font-family: inherit;
 }
 
 #searchButton,
 #mw-searchButton {
 	position: absolute;
 	top: 0;
+	margin: 0;
+	padding: 0;
 	right: 1.5em;
 	width: 2.5em;
 	height: 2.5em;
@@ -401,14 +404,14 @@ pre,
 	dt {
 		font-weight: normal;
 		font-family: @fonts-secondary;
-		line-height: 1.25;
+		line-height: 1.125;
 		margin: 1.5em 0 0.5em;
 	}
 
 	dt {
 		font-weight: bold;
 		font-family: @fonts-secondary;
-		line-height: 1.25;
+		line-height: 1.125;
 		margin: 1.5em 0 0.5em;
 		margin-bottom: 0.1em;
 	}
@@ -422,12 +425,6 @@ pre,
 		margin: 0 0.5em 0 0;
 	}
 
-	h1,
-	h2 {
-		border-bottom: solid 2px @grey;
-		overflow: hidden;
-	}
-
 	h1.firstHeading {
 		margin: 0.25em 0 0.5em;
 		border-bottom: solid 4px @blue;
@@ -435,23 +432,27 @@ pre,
 	}
 
 	h1 {
-		font-size: 2.25em;
+		font-size: 2em;
+		border-bottom: solid 3px @grey;
+		overflow: hidden;
 	}
 
 	h2 {
-		font-size: 2em;
+		font-size: 1.8em;
+		border-bottom: solid 2px @grey;
+		overflow: hidden;
 	}
 
 	h3 {
-		font-size: 1.75em;
+		font-size: 1.6em;
 	}
 
 	h4 {
-		font-size: 1.5em;
+		font-size: 1.4em;
 	}
 
 	h5 {
-		font-size: 1.35em;
+		font-size: 1.25em;
 	}
 
 	h6 {

resources/screen-desktop.less

@@ -78,16 +78,16 @@
 
 	.dropdown {
 		.dropdown-menu();
-		top: 2.95em;
+		top: 3.15em;
 	}
 
 	.pokey {
-		top: 2.05em;
+		top: 1.9em;
 	}
 
 	h2 {
 		margin: 0;
-		padding: 0.7em 0 0 25px;
+		padding: 0.5em 0 0 25px;
 		font-family: @fonts-secondary;
 		font-weight: normal;
 		font-size: 1.25em;

resources/variables.less

@@ -36,14 +36,13 @@
 // Flair
 
 // Fonts are chosen for consistent metrics, not necessarily overall prettiness.
-// This will NEED fixes for different languages.
-@fonts: sans-serif;
-@fonts-secondary: 'Linux Libertine', 'Times New Roman', serif;
+@fonts: 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
+@fonts-secondary: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif;
 
 @border: 0.2em;
 @radius: 0.2em;
 
-@font-size: 0.9em;
+@font-size: 0.95em;
 
 // Widths
 
@@ -58,7 +57,7 @@
 @desktop-large-floor: 1340px;
 
 // The max-width for the content
-@content-width: 110em;
+@content-width: 115em;
 
 @content-padding: 2em;
 
@@ -116,9 +115,9 @@
 	.box();
 	padding: 1.5em 1.5em 0;
 	margin: 1em 0;
-	line-height: 1.1;
+	line-height: 1.125;
 	word-wrap: break-word;
-	font-size: 95%;
+	font-size: 0.95em;
 
 	ul,
 	li {