Add and use `.mw-footer` & `.mw-footer-container` CSS classes

Adding `.mw-footer` & `.mw-footer-container` CSS classes & replacing 
`#mw-footer`,`#mw-footer-container` selectors with them.

`#mw-footer` & `#mw-footer-container` ids are kept for JS, gadgets 
compatibility and backwards compatibility with user styles.

Bug: T248137
Change-Id: I6e262cb5fa1838a22c3c6de8866d0324e83f84b3

includes/TimelessTemplate.php

@@ -87,8 +87,9 @@ class TimelessTemplate extends BaseTemplate {
 			)
 		);
 
-		$html .= Html::rawElement( 'div', [ 'id' => 'mw-footer-container', 'class' => 'ts-container' ],
-			Html::rawElement( 'div', [ 'id' => 'mw-footer', 'class' => 'ts-inner' ],
+		$html .= Html::rawElement( 'div',
+			[ 'id' => 'mw-footer-container', 'class' => 'mw-footer-container ts-container' ],
+			Html::rawElement( 'div', [ 'id' => 'mw-footer', 'class' => 'mw-footer ts-inner' ],
 				$this->getFooter()
 			)
 		);

resources/print.css

@@ -6,7 +6,7 @@
 #mw-site-navigation,
 #mw-related-navigation,
 #mw-page-header-links,
-#mw-footer,
+.mw-footer,
 #catlinks {
 	display: none;
 }

resources/screen-common.less

@@ -32,7 +32,7 @@ body {
 	word-wrap: break-word;
 }
 
-#mw-footer-container {
+.mw-footer-container {
 	border-top: solid 1px @base20;
 	box-shadow: inset 0 7px 2px -4px rgba( 0, 0, 0, 0.1 );
 	color: @base100;
@@ -154,7 +154,7 @@ body {
 
 /* Footer */
 
-#mw-footer {
+.mw-footer {
 	padding-top: 0.5em;
 	padding-bottom: 1em;
 

resources/screen-desktop-small.less

@@ -156,7 +156,7 @@
 	padding-right: 0.5em;
 }
 
-#mw-footer {
+.mw-footer {
 	padding: 0 @content-padding;
 }
 

resources/screen-mobile.less

@@ -6,7 +6,7 @@
 /* Layout */
 
 #mw-data-after-content,
-#mw-footer {
+.mw-footer {
 	padding: 0 @content-padding;
 }