Make dark footer

Also separated it from the content a bit, cleaned up the class names to
be more consistent, etc.

Change-Id: Ib0b3539ec112ef162c8d16e91bd805b884a2a502

TimelessTemplate.php

@@ -24,8 +24,8 @@ class TimelessTemplate extends BaseTemplate {
 			</div>
 			</div>
 
-			<div id="content-container" class="ts-container">
-			<div id="content-block" class="ts-inner">
+			<div id="mw-content-container" class="ts-container">
+			<div id="mw-content-block" class="ts-inner">
 				<div id="mw-site-navigation">
 					<h2><?php echo $this->getMsg( 'navigation-heading' )->parse() ?></h2>
 					<?php
@@ -39,7 +39,7 @@ class TimelessTemplate extends BaseTemplate {
 				</div>
 				<div id="mw-related-navigation">
 				</div>
-				<div id="content">
+				<div id="mw-content">
 				<div class="mw-body" role="main">
 					<?php
 					if ( $this->data['sitenotice'] ) {
@@ -76,12 +76,16 @@ class TimelessTemplate extends BaseTemplate {
 
 						<?php
 						$this->html( 'bodytext' );
+						?>
+						<div class="visual-clear"></div>
+						<?php
 						$this->html( 'catlinks' );
 						$this->html( 'dataAfterContent' );
 						?>
 					</div>
 				</div>
 				</div>
+			<div class="visual-clear"></div>
 			</div>
 			</div>
 

resources/screen-common.less

@@ -8,13 +8,38 @@ body {
 	margin: 0;
 	padding: 0;
 	color: @text;
-	background: @background2;
+	background: @background-dark;
 	font-size: 1em;
 	line-height: 1.3;
 }
-#content {
+#mw-content {
 	background: @background;
 }
+#mw-content-container {
+	background: @background2;
+}
+#mw-footer-container {
+	border-top: solid 1px @background-dark2;
+	box-shadow: inset 0 7px 2px -4px rgba(0, 0, 0, .1);
+
+	ul {
+		margin: 0;
+	}
+}
+
+#p-logo {
+	text-align: center;
+	width: 10em;
+
+	a.mw-wiki-logo {
+		display: block;
+		content: '';
+		width: 10em;
+		height: 10em;
+		background-repeat: no-repeat;
+		background-position: 50% 50%;
+	}
+}
 
 /* Misc */
 
@@ -34,19 +59,14 @@ a {
 	}
 }
 
-#p-logo {
-	text-align: center;
-	width: 10em;
-
-	a.mw-wiki-logo {
-		display: block;
-		content: '';
-		width: 10em;
-		height: 10em;
-		background-repeat: no-repeat;
-		background-position: 50% 50%;
-	}
+.mw-editsection-bracket {
+	display: none;
 }
+.visual-clear {
+	clear: both;
+}
+
+/* Hidden stuff */
 
 #mw-site-navigation h2,
 #p-search h3,

resources/screen-desktop.less

@@ -11,7 +11,7 @@
 	float: left;
 }
 #p-search,
-#content {
+#mw-content {
 	margin-left: 12em;
 	margin-right: 12em;
 }
@@ -25,10 +25,10 @@
 	position: fixed;
 	top: 0;
 	width: 100%;
-	background: @foreground;
+	background: @background-dark;
 	color: @text-inverse;
 	height: 3em;
-	border-bottom: solid 1px @foreground2;
+	border-bottom: solid 1px @background-dark2;
 	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
 }
 
@@ -38,7 +38,7 @@
 #p-logo-text {
 	width: 10em;
 	text-align: center;
-	text-shadow: 0 -1px 0 @foreground2;
+	text-shadow: 0 -1px 0 @background-dark2;
 
 	a {
 		color: @text-inverse;
@@ -57,7 +57,7 @@
 	background: @background;
 	margin: .5em 0 0 0;
 	position: relative;
-	border-top: solid 1px @foreground2;
+	border-top: solid 1px @background-dark2;
 }
 #searchInput {
 	border: none;
@@ -86,15 +86,16 @@
 
 /* CONTENT */
 
-#content-container {
+#mw-content-container {
 	margin-top: 3em;
+	padding-bottom: 1em;
 }
-#content {
+#mw-content {
 	background: @background;
 	padding-top: 1em;
 	border: 1px @grey-bright;
-	border-style: none solid;
-	box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.02);
+	border-style: none solid solid;
+	box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02);
 	overflow: hidden;
 	padding-right: 2em;
 	padding-left: 2em;

resources/variables.less

@@ -4,8 +4,8 @@
 @background: #fff;
 @background2: #f3f3f3;
 
-@foreground: #777;
-@foreground2: #555;
+@background-dark: #777;
+@background-dark2: #555;
 @text-inverse: #fff;
 
 @link: @blue;