Patch 02 (#290)

* More bug fixes and improvements
* localisation update new translatable word
* tabs features `enableTabs`
* RTL direction
* Orbit fixes

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 * [code] Move Echo above Page Actions button
 * [feature] Add page indicator support
+* [feature] Add 'enableTabs' for tabs on page support
+* [language] Enable "Back" in mobile nav menu to be localised
+* [bug fix] RTL detection improved
+* [code] More CSS fixes for Orbit, Tabs, etc
 
 ## Version 2.0
 

Foreground.skin.php

@@ -19,6 +19,7 @@ class Skinforeground extends SkinTemplate {
 			'NavWrapperType' => 'divonly',
 			'showHelpUnderTools' => true,
 			'showRecentChangesUnderTools' => true,
+			'enableTabs' => false,
 			'wikiName' => &$GLOBALS['wgSitename'],
 			'navbarIcon' => false,
 			'IeEdgeCode' => 1,
@@ -59,6 +60,20 @@ class foregroundTemplate extends BaseTemplate {
 		global $wgForegroundFeatures;
 		wfSuppressWarnings();
 		$this->html('headelement');
+		switch ($wgForegroundFeatures['enableTabs']) {
+			case true:
+			    ob_start();
+				$this->html('bodytext');
+				$out = ob_get_contents();
+				ob_end_clean();
+				$markers = array("<a", "</a", ">");
+				$tags = array("<a", "</a", ">");
+				$body = str_replace($markers, $tags, $out);
+				break;	
+			default:
+				$body = '';
+				break;
+		}
 		switch ($wgForegroundFeatures['NavWrapperType']) {
 			case '0':
 				break;
@@ -86,7 +101,7 @@ class foregroundTemplate extends BaseTemplate {
 		}
 ?>
 <!-- START FOREGROUNDTEMPLATE -->
-		<nav class="top-bar" data-topbar role="navigation">
+		<nav class="top-bar" data-topbar role="navigation" data-options="back_text: <?php echo wfMessage( 'foreground-menunavback' )->text(); ?>">
 			<ul class="title-area">
 				<li class="name">
 					<h1 class="title-name">
@@ -198,7 +213,16 @@ class foregroundTemplate extends BaseTemplate {
 					<h5 id="siteSub" class="subtitle"><?php $this->html('subtitle') ?></h5>
 					<div id="contentSub" class="clear_both"></div>
 					<div id="bodyContent" class="mw-bodytext">
-						<?php $this->html('bodytext') ?>
+						<?php 
+							switch ($wgForegroundFeatures['enableTabs']) {
+								case true:
+									echo $body;
+									break;
+								default:
+								$this->html('bodytext');
+									break;
+							}
+						?>
 						<div class="clear_both"></div>
 					</div>
 		    	<div class="group"><?php $this->html('catlinks'); ?></div>

assets/scripts/foreground.js

@@ -73,12 +73,4 @@ if ( jQuery( '#ca-addsection' ).length ) {
   // Turn categories into labels
   jQuery('#mw-normal-catlinks ul li a').addClass('label');
 
-  // Make the Page Action button respond to hover
-  //jQuery('button.button').mouseenter(function(){
-  //  jQuery('ul#drop1').addClass('open').addClass('right').css('top', '32px').css('left', '785px');
-  //});
-  //jQuery('ul#drop1').mouseleave(function(){
-  //  jQuery('ul#drop1').removeClass('open').css('top', '-9999px').css('left', '785px');
-  //});
-
 });

assets/stylesheets/foreground.css

@@ -23,6 +23,902 @@ a.label.new { background-color: #d0d0d0; }
 
 a#actions-button { float:right; z-index: 499; }
 
+/* rtl an ltr */
+[dir=ltr] * { direction: ltr; }
+[dir=rtl] * { direction: rtl; }
+[dir=ltr] { direction: ltr; }
+[dir=rtl] { direction: rtl; }
+
+/* Hide the page actions button for special pages (cuz there's nothing in it) */
+.mw-special-FormEdit a#actions-button, .ns-special a#actions-button { display:none; }
+
+/* Hide some rows on form-edit (e.g. a thing's title) */
+body.action-formedit .row.hide-on-form-edit { display: none;}
+
+/* Move the MediaWiki notification area so it isn't on top of the Action menu */
+.mw-notification-area {
+  margin-top: 2em;
+}
+
+/* Also adjust z-index of action menu to force it on top */
+#p-cactions #actions {
+  z-index: 500;
+  white-space: nowrap;
+}
+#p-cactions #actions a {
+  width: 100%;
+  text-align: left;
+}
+
+/* Make sure top bar is even more z-indx! */
+#toolbox-dropdown {
+  z-index: 601;
+}
+#personal-tools-dropdown {
+  z-index: 601;
+}
+
+/* Dropdown Icon Alignment */
+.drop-icon {
+  display: inline;
+  margin-right: 4px;
+}
+
+td.mw-submit a,
+.htmlform-tip,
+#mw-upload-permitted p {
+  font-size: 90%;
+}
+
+alert.label a {color: pink;}
+
+code {
+  font-weight: normal;
+  color: #222222;
+}
+
+small {
+  font-size: 80%;
+}
+
+h4.namespace.label {
+	font-size: 1rem;
+	display:inline-block;
+	margin-bottom: 0.5rem;
+}
+
+.label {
+  padding-bottom: 0.39em;
+}
+
+h2 span {
+  display: inline-block;
+}
+
+h2.title {
+  margin-bottom: 0.1em;
+}
+
+h3#tagline {
+  font-style: italic;
+  font-size: small;
+  margin-bottom: 0.5em;
+  color: #6f6f6f;
+}
+
+.clear_both {
+  clear:both;
+}
+
+.large-2 strong, .large-2 b {
+  display: block;
+}
+
+.large-2 strong, .large-2 b, table th {
+  font-size: 0.875em;
+  color: #4d4d4d;
+  font-weight: 500;
+}
+
+/* LAYOUT */
+
+.row .row {
+  margin-bottom: 0.9em;
+}
+
+div.small-10 .row {
+  margin: 1em 0 0 0;
+}
+
+div.small-9.columns textarea {
+  margin-bottom: 0.25em;
+}
+
+footer.row {
+  margin-top: 2em;
+  color: grey;
+}
+
+div {
+  line-height: 1.60em;
+}
+
+
+/* NOTICES, ALERTS, WARNINGS */
+div#userloginprompt, p#userloginlink {
+  font-size: 80%;
+
+}
+
+/* LISTS */
+
+ul#actions.f-dropdown {
+  margin-left:0;
+  margin-top:.5em;
+  margin-bottom:.25em;
+  padding:.25em;
+}
+
+#mw-content-text ul {
+  margin: .5em 1.25em;
+}
+
+/* Tabs */
+/* make sure tabs ul element has no margins */
+#mw-content-text ul.tabs {
+    margin: 0;
+}
+
+/* stop focus outline */
+.tabs dd.active > a, .tabs .tab-title.active > a:focus {
+    outline: none;
+}
+
+/* make sure orbit image slider has no margins */
+#mw-content-text .orbit-container ul {
+    margin: 0;
+}
+
+footer.row ul {
+  list-style-type: none;
+  margin: 0 0 1em 0;
+}
+
+footer.row ul.views.columns li {
+  margin-right: 1em;
+}
+
+#footer footer.row ul {
+margin: 0;
+list-style-type: none;
+}
+
+/* Make social footer center need overflow:hidden and other div classes */
+.social-footer {
+margin: 0 0 1em;
+font-size: 90%;
+overflow: hidden;
+}
+/* Hide all text in p elements */
+.social-footer p {
+display: none;
+}
+/* Outer wrap */
+.social-links {
+position: relative;
+left: 50%;
+float: left;
+}
+/* addThis container (inner wrap) */
+.addthis_horizontal_follow_toolbox {
+position: relative;
+left: -50%;
+float: left;
+z-index: 100000;
+}
+/* end social footer classes */
+
+#footer-left {
+font-size: 90%;
+text-align: left;
+}
+#footer-right-icons {
+font-size: 85%;
+text-align: center;
+}
+
+#footer-right-icons li {
+display: inline-block;
+text-align: center;
+margin: 0 0 .5em .5em;
+}
+
+li#footer-privacy {
+float: left;
+margin-right: 2em;
+}
+
+li#footer-about {
+float: left;
+margin-right: 2em;
+}
+
+li#footer-disclaimer {
+float: left;
+margin-right: 2em;
+}
+
+.text-center #footer-left li {
+float: none;
+margin: 0;
+}
+.text-center #footer-left {
+text-align: center;
+}
+
+@media only screen and (max-width: 641px) {
+#footer-left { font-size: 85%; text-align: center;}
+#footer-right-icons { font-size: 80%;}
+li#footer-privacy { float: none; margin-right: 0;}
+li#footer-about { float: none; margin-right: 0;}
+li#footer-disclaimer { float: none; margin-right: 0;}
+}
+
+.columns ul.special li {
+  float:none;
+  width: 100%;
+}
+
+.columns div#uploadtext ul {
+  list-style-type: disc;
+}
+
+.columns div#uploadtext ul li {
+ float: none;
+ width: 95%;
+ margin-left: 2em;
+}
+
+#catlinks {
+    border: 1px solid #aaa;
+    padding: 0.25rem;
+}
+
+#catlinks .label {
+    font-size: .9rem;
+}
+
+#catlinks a.label.new {
+    background-color: #BA0F2A;
+}
+
+.catlinks li {border-left:none;}
+
+.mw-specialpages-table td ul.columns li {width: 50%;}
+
+/*#mw-content-text .columns li {float:none;width:90%;}*/
+
+footer.row ul.columns li { display: inline;float:none;}
+
+.columns #mw-normal-catlinks ul li {
+  float: none;
+  width: auto;
+}
+
+#mw-normal-catlinks a.new {
+  color: white;
+}
+
+ul.vcard { padding: 0.5em 0.5em 0.55em 0.5em; }
+
+/* HEADERS */
+
+h1,h2,h3,h4,h5,h6 {
+  margin-top: 0em;
+  line-height: 1em;
+}
+
+.page-Special_SpecialPages h2 {
+  margin-bottom: 0.5em;
+}
+
+
+.editsection {
+  font-weight: normal;
+  font-size: 0.4em;
+}
+
+p.title {
+  padding: 0.9375em;
+}
+
+/* TABLES */
+
+.mw-content-ltr table#toc {
+  float:right;
+  width: auto;
+}
+
+.mw-content-rtl table#toc {
+  float:left;
+  width: auto;
+}
+
+table.formtable {
+  border: none;
+}
+
+table td[align="right"] {text-align: right;}
+
+/* TURN OFF TABLE STRIPING FOR EDITFORMS */
+table.formedit tr.even,
+table.formedit tr.alt,
+table.formedit tr:nth-of-type(even) {
+  background: transparent;
+}
+
+
+table {
+  width: 100%;
+}
+
+td.mw-label {
+  width: 20%;
+}
+
+td.mw-input {
+  width: 80%;
+}
+
+thead tr th {
+  cursor: pointer;
+}
+
+table.formtable th {
+  text-align: right !important;
+}
+
+td.smwpropname, th.smwpropname, td.smwspecname {
+  text-align:left;
+}
+
+table tbody tr td, table tr td {
+  line-height: 1.6em;
+}
+
+table.wikitable {
+  margin: 0em 0 1em 0;
+}
+
+table.wikitable > tr > th,
+table.wikitable > * > tr > th {
+  text-align: left;
+}
+
+table.wikitable > tr > th,
+table.wikitable > tr > td,
+table.wikitable > * > tr > th,
+table.wikitable > * > tr > td {
+  border: 3px #fff solid;
+  padding: 0.6em;
+}
+
+/* FORMS, INPUTS, FIELDSETS */
+
+.multipleTemplateInstance {
+  background-color: white !important;
+  border: none !important;
+  border-bottom: 1px dashed #999999 !important;
+}
+
+.multipleTemplateInstance table {
+  border: none !important;
+}
+
+.multipleTemplateAdder {
+  font-size: 0.9em;
+  padding: 0.4125em 0.5em 0.55em 0.5em;
+}
+
+.novalue {
+  color: #999999;
+  font-style:italic;
+  font-size:small;
+}
+
+input[type="file"],
+input[type="checkbox"],
+input[type="radio"],
+select {
+  padding: 5px;
+}
+
+input[type="file"],
+select {
+  padding: 5px;
+  border: 1px solid #cccccc;
+}
+
+.inputSpan select.createboxInput,
+.dateInput select.monthInput,
+input.hourInput,
+input.minuteInput,
+input.secondInput,
+input.dayInput,
+input.yearInput,
+input[name="*[* date][hour]"],
+input[name="*[* date][minute]"],
+input[name="*[* date][second]"] {
+  width: auto;
+  margin-right: 1em;
+}
+
+/*
+.inputSpan input.createboxInput {
+  width: 100%;
+}
+*/
+.inputSpan button,
+.inputSpan .button {
+  margin: -4px 0 0 0;
+  padding:0.37em 0.75em 0.6em 0.70em;
+}
+
+.ms-selectable input[type="text"] {
+  width: 100%;
+}
+
+button.ui-button-icon-only {
+  height: 2.24em !important;
+}
+
+select {width:auto;}
+
+
+input[type="checkbox"].createboxInput {
+  width: auto;
+}
+
+label.checkboxLabel {
+  margin-right: 0.5em;
+}
+
+.edit_with_form {
+  margin: -2em 0 0 0;
+  float:right;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  display:inline;
+}
+
+input[type='file'] {
+  margin-top: 0.4em;
+}
+
+input:not([type]),
+textarea,
+p.meta {
+  margin-bottom: 4px;
+}
+
+label {
+  display: inline;
+  font-weight: normal;
+}
+
+.mw-input label { font-weight: normal; }
+
+#mw-content-text ul.SFI_timepicker_hours,
+#mw-content-text ul.SFI_timepicker_minutes {
+  list-style-type: none;
+}
+
+#mw-content-text ul.SFI_timepicker_hours li {
+  margin: 2px 2px;
+  padding: 4px;
+}
+
+.sminput.sminput-googlemaps3 p button {
+  padding-top: 0.35em;
+  padding-bottom: 0.6em;
+}
+
+li label.inline {
+  margin-bottom: 2px;
+  padding: 0;
+}
+
+button, .button {
+  margin: 0.5em 0;
+  padding: 0.3em 0.75em 0.4em 0.75em;
+}
+
+.top-bar-logo {
+	max-width: 100%;
+	height:auto;
+	max-height:2.8125rem; /* Important! max-height must not be higher than line-height */
+	display: inline-block;
+	vertical-align:middle;
+}
+
+.top-bar .button.search {
+	top: 0px;
+}
+
+.top-bar .button, .top-bar button {
+	padding-top: .35rem;
+	padding-bottom: .35rem;
+}
+
+.top-bar .button.search {
+  margin-left: 10px;
+}
+
+.top-bar input {
+  top: 0px;
+}
+
+@media only screen and (min-width: 641px) {
+.top-bar .button.search {
+  top: 0px; }
+.top-bar .button.search {
+  margin-left: -4px; }
+.top-bar {
+	height: auto; }
+}
+
+.top-bar-section .dropdown {
+  z-index: 600;
+}
+
+input[type="submit"] {
+    background-color: #5da423;
+    border-color: #457a1a;
+    color: white;
+    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+    -webkit-transition: background-color 300ms ease-out;
+    -moz-transition: background-color 300ms ease-out;
+    transition: background-color 300ms ease-out;
+}
+
+input#wpPreview {
+    background-color: #e9e9e9;
+    border-color: #d0d0d0;
+    color: black;
+    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+    -webkit-transition: background-color 300ms ease-out;
+    -moz-transition: background-color 300ms ease-out;
+    transition: background-color 300ms ease-out;
+}
+
+.editButtons input[type="submit"] {
+  display: inline-block;
+}
+
+legend {
+  font-size: 0.875em;
+  color: #4d4d4d;
+  cursor: pointer;
+  display: block;
+  font-weight: 500;
+}
+
+fieldset {
+  line-height: 1.6em;
+  padding: 0 1.25em 1em 1.25em;
+  margin-top: 0;
+}
+
+span.smwbuiltin,
+span.smwttactiveinline span.smwbuiltin {
+  font-style: normal;
+}
+
+
+/* MW still generates a label column for checkboxes, this minimizes is */
+div.mw-htmlform-field-HTMLCheckField div.mw-label { height:0; }
+
+
+/* ZUBR IE8 FIXES */
+/* GRID: https://gist.github.com/zurbchris/5068210 */
+.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
+.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
+.lt-ie9 .row.large-collapse .column,
+.lt-ie9 .row.large-collapse .columns { padding: 0; }
+.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
+.lt-ie9 .row .row.large-collapse { margin: 0; }
+
+.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
+.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }
+
+.lt-ie9 [class*="column"] + [class*="column"]:last-child { float: right; }
+.lt-ie9 [class*="column"] + [class*="column"].end { float: left; }
+
+.lt-ie9 .large-1,
+.lt-ie9 .row .large-1 { width: 8.33333%; }
+
+.lt-ie9 .large-2,
+.lt-ie9 .row .large-2 { width: 16.66667%; }
+
+.lt-ie9 .large-3,
+.lt-ie9 .row .large-3 { width: 25%; }
+
+.lt-ie9 .large-4,
+.lt-ie9 .row .large-4 { width: 33.33333%; }
+
+.lt-ie9 .large-5,
+.lt-ie9 .row .large-5 { width: 41.66667%; }
+
+.lt-ie9 .large-6,
+.lt-ie9 .row .large-6 { width: 50%; }
+
+.lt-ie9 .large-7,
+.lt-ie9 .row .large-7 { width: 58.33333%; }
+
+.lt-ie9 .large-8,
+.lt-ie9 .row .large-8 { width: 66.66667%; }
+
+.lt-ie9 .large-9,
+.lt-ie9 .row .large-9 { width: 75%; }
+
+.lt-ie9 .large-10,
+.lt-ie9 .row .large-10 { width: 83.33333%; }
+
+.lt-ie9 .large-11,
+.lt-ie9 .row .large-11 { width: 91.66667%; }
+
+.lt-ie9 .large-12,
+.lt-ie9 .row .large-12 { width: 100%; }
+
+.lt-ie9 .row .large-offset-1 { margin-left: 8.33333%; }
+.lt-ie9 .row .large-offset-2 { margin-left: 16.66667%; }
+.lt-ie9 .row .large-offset-3 { margin-left: 25%; }
+.lt-ie9 .row .large-offset-4 { margin-left: 33.33333%; }
+.lt-ie9 .row .large-offset-5 { margin-left: 41.66667%; }
+.lt-ie9 .row .large-offset-6 { margin-left: 50%; }
+.lt-ie9 .row .large-offset-7 { margin-left: 58.33333%; }
+.lt-ie9 .row .large-offset-8 { margin-left: 66.66667%; }
+.lt-ie9 .row .large-offset-9 { margin-left: 75%; }
+.lt-ie9 .row .large-offset-10 { margin-left: 83.33333%; }
+
+.lt-ie9 .pull-2 { right: 16.66667%; }
+.lt-ie9 .pull-3 { right: 25%; }
+.lt-ie9 .pull-4 { right: 33.33333%; }
+.lt-ie9 .pull-5 { right: 41.66667%; }
+.lt-ie9 .pull-6 { right: 50%; }
+.lt-ie9 .pull-7 { right: 58.33333%; }
+.lt-ie9 .pull-8 { right: 66.66667%; }
+.lt-ie9 .pull-9 { right: 75%; }
+.lt-ie9 .pull-10 { right: 83.33333%; }
+
+.lt-ie9 .push-2 { left: 16.66667%; }
+.lt-ie9 .push-3 { left: 25%; }
+.lt-ie9 .push-4 { left: 33.33333%; }
+.lt-ie9 .push-5 { left: 41.66667%; }
+.lt-ie9 .push-6 { left: 50%; }
+.lt-ie9 .push-7 { left: 58.33333%; }
+.lt-ie9 .push-8 { left: 66.66667%; }
+.lt-ie9 .push-9 { left: 75%; }
+.lt-ie9 .push-10 { left: 83.33333%; }
+
+/* Nicolas Gallagher's micro clearfix */
+.lt-ie9 .row { *zoom: 1; }
+.lt-ie9 .row:before, .row:after { content: " "; display: table; }
+.lt-ie9 .row:after { clear: both; }
+/* END IE8 GRID */
+
+.lt-ie9 .hide-for-small { display: block !important; }
+
+/* TOP NAV */
+.lt-ie9 .top-bar-section {
+  display:block;
+}
+
+.lt-ie9 .top-bar-section ul {
+  height: auto;
+  width: 100%;
+}
+
+.lt-ie9 .top-bar .top-bar-section ul,
+.lt-ie9 .top-bar .top-bar-section ul li {
+  float: left;
+  display: inline;
+}
+/* END OTHER IE8 FIXES */
+
+/* UNTIL I CAN DETERMINE WHY toolboxend GENERATES AN EMPTY <li> IN THE MENU, I'M HIDING IT */
+#p-toolboxend { display:none;}
+
+
+/* Jamie's Header Hider */
+body.page-Main_Page h1.firstHeading,
+body.page-Main_Page #siteSub,
+body.page-Extension_Main_Page h1.firstHeading,
+body.page-Extension_Main_Page #siteSub,
+body.page-Skin_Main_Page h1.firstHeading,
+body.page-Skin_Main_Page #siteSub,
+body.page-Farm_Main_Pageh1.firstHeading,
+body.page-Farm_Main_Page #siteSub,
+body.mw-special-Userlogin h2.title {
+  display:none;
+}
+
+/* Don't like the black top bar? Copy this into your Foreground.css and change the colors 
+
+.top-bar, 
+.top-bar-section ul, 
+.top-bar-section ul li.active > a, 
+.top-bar-section li a:not(.button), 
+.top-bar-section .has-form {
+    background: #333333;
+}
+
+
+.top-bar-section > ul > .divider,
+.top-bar-section > ul > [role="separator"] {
+  border-color: black;
+}
+
+*/
+
+.vertical-divider {
+    width: 100%;
+    display: block;
+    background: #1A1A1A;
+    height: 1px;
+}
+
+.top-bar-section li.active:not(.has-form) a:not(.button),
+.top-bar-section li.active:not(.has-form) a:hover:not(.button) {
+	background: inherit;
+}
+
+
+.top-bar input {
+    width: auto;
+    display: inline;
+}
+
+/* Add improved styling for the Echo extension */
+
+#echo-notifications {
+  float: right;
+  display: inline-block;
+  margin: -1em 0 1em;
+  position: relative;
+  z-index: 500;
+  height: 23px;
+}
+
+#pt-notifications-alert .mw-echo-notifications-badge,
+#pt-notifications-message .mw-echo-notifications-badge {
+  background-size: 1.6em !important;
+  display: inline !important;
+  font-size: 1.2em;
+  filter: invert(25%);
+  color: transparent;
+}
+
+#echo-notifications li {
+  list-style: none;
+}
+
+#echo-notifications-messages {
+  float: right;
+}
+#echo-notifications-alerts {
+  float: right;
+}
+
+#pt-notifications-alert .mw-echo-unseen-notifications,
+#pt-notifications-message .mw-echo-unseen-notifications {
+  color: #0645ad !important;
+}
+
+/* Make Echo extension more mobile friendly on small widths */
+
+@media only screen and (max-width: 450px) {
+.oo-ui-popupWidget-popup {
+    width: auto !important;
+    position: relative !important;
+    margin-left: -260px !important;
+    font-size: 75% !important;
+}
+.oo-ui-clippableElement-clippable.oo-ui-popupWidget-body {
+    width: 100% !important;
+}
+}
+
+/*Fix ULS CSS */
+#pt-uls a.uls-trigger {
+  padding-left:15px !important;
+}
+
+/* Orbit Slider Overrides for MW */
+.orbit-container .orbit-slides-container img {
+    width: 100%;
+}
+.orbit-bullets {
+    margin: 0 auto 30px auto !important;
+}
+
+/* Block-Grid UL fixes */
+ul[class*="block-grid"] {
+    margin: 0;
+}
+
+/* WikiEditor related fixes */
+
+/* lable of toolbar */
+.wikiEditor-ui-toolbar .label {
+    background: transparent;
+    color: #000;
+}
+/* selection boxes in toolbar adhere to font-size */
+.wikiEditor-ui-toolbar .page-characters div span {
+    height: 1.75em;
+}
+/* backound of controls adhere to #p-cactions */
+.wikiEditor-ui-controls {
+    background-color: #f6f6f6; 
+}
+/* background of buttions adhere to #p-cactions*/
+.wikiEditor-ui-buttons {
+    background-color: #f6f6f6;
+}
+
+/* Visual Editor Fixes */
+.ve-activated #content {
+    margin-top: 4em;
+}
+.ve-ce-documentNode {
+    background:#fff;
+}
+.oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link,
+.oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-disabled > .oo-ui-tool-link  {
+    display: inline !important;
+}
+
+.mw-indicators {
+    float: right;
+    line-height: 1.6;
+    font-size: 0.875em;
+    position: relative;
+    margin: -1em .5em 0;
+    max-height: 25px;
+    width: auto;
+    z-index: 1;
+}
+
+body {
+  line-height: 1.6em;
+}
+
+p {
+  margin-bottom: 0.25em;
+}
+
+#page-content {
+    margin: 2rem 0 0;
+}
+
+.row {
+	max-width: 75em;
+}
+
+a.label:hover,
+a.label:focus {
+  color: white;
+}
+
+a.label.new { background-color: #d0d0d0; }
+
+a#actions-button { float:right; z-index: 499; }
+
 /* Hide the page actions button for special pages (cuz there's nothing in it) */
 .mw-special-FormEdit a#actions-button, .ns-special a#actions-button { display:none; }
 
@@ -157,6 +1053,11 @@ ul#actions.f-dropdown {
   margin: .5em 1.25em;
 }
 
+/* make sure orbit image slider has no margins */
+#mw-content-text .orbit-container ul {
+    margin: 0;
+}
+
 footer.row ul {
   list-style-type: none;
   margin: 0 0 1em 0;
@@ -861,6 +1762,7 @@ ul[class*="block-grid"] {
     display: inline !important;
 }
 
+/* Page indicators */
 .mw-indicators {
     float: right;
     line-height: 1.6;
@@ -870,4 +1772,112 @@ ul[class*="block-grid"] {
     max-height: 25px;
     width: auto;
     z-index: 1;
+}
+
+/* Preferences Fixes */
+
+#preftoc li a {
+color: white;
+padding: .25em .5em;
+}
+#preftoc li a:hover {
+background: aqua;
+color: white;
+}
+#preftoc li {
+margin: 2px;
+display:inline-block;
+float: none;
+padding: 1px;
+position: relative;
+list-style-type: none;
+list-style-image: none;
+z-index: 3;
+border-radius: 3px;
+font-size: .85em;
+background: #142849;
+border:0;
+color: white;
+}
+ 
+#preftoc li a {
+color: white;
+}
+ 
+#preftoc li a:hover {
+background: #2ba6cb;
+}
+ul#preftoc {
+margin: auto;
+text-align: center;
+}
+#preftoc > li.selected {
+background: #2C58A1;
+box-shadow: 2px 2px 5px 2px rgba(50, 138, 64, 0.54);
+}
+#preftoc li.selected a {
+cursor: default;
+text-decoration: none;
+}
+#preferences table {
+min-width: 100%;
+}
+#preftoc {
+    margin: 0;
+	padding: 0;
+	width: 100%;
+	clear: both;
+}
+#preftoc a:active {
+	display: block;
+	color: #000;
+	padding: 0 .7em;
+	position: relative;
+	text-decoration: none;
+}
+#preftoc li.selected a {
+	cursor: default;
+	text-decoration: none;
+}
+#preferences {
+	margin: 0;
+	clear: both;
+	background-color: #FFF;
+	border: none;
+}
+.prefsection {
+	border: none;
+	padding: 0;
+	margin: 0;
+}
+.prefsection legend {
+	font-weight: bold;
+}
+.prefsection table, .prefsection legend {
+	background-color: #F9F9F9;
+}
+#preferences legend.mainLegend {
+display: none;
+} 
+#preferences fieldset legend {
+	font-weight: bold;
+	padding: 0 .25em;
+	margin: 0;
+	margin: 0 .25em 0 1em;
+	background:#FFF;
+}
+td.htmlform-tip {
+	font-size: .8em;
+	padding: .2em 2em;
+	color: #666;
+	border: 1px solid #eeeffe;
+	background: #eeeffe;
+}
+.preferences-login {
+	clear: both;
+	margin-bottom: 1.5em;
+}
+.prefcache {
+	font-size: 90%;
+	margin-top: 1em;
 }

i18n/en.json

@@ -7,5 +7,6 @@
 	"skinname-foreground": "Foreground",
 	"foreground-desc": "Provides a skin that focuses on putting your content in the foreground",
 	"foreground-browsermsg": "may not look as expected in this version of Internet Explorer. We recommend you upgrade to a newer version of Internet Explorer or switch to a browser like Firefox or Chrome.",
-	"foreground-menutitle": "Menu"
+	"foreground-menutitle": "Menu",
+	"foreground-menunavback": "Back"
 }

i18n/es.json

@@ -7,5 +7,6 @@
 	"skinname-foreground": "Foreground",
 	"foreground-desc": "Provee una plantilla que se centra en resaltar en primer plano el contenido.",
 	"foreground-browsermsg": "puede verse diferente a lo esperado en esta versión de Internet Explorer le recomendamos que se actualice a una versión más reciente, o cambie a un navegador como Firefox o Chrome.",
-	"foreground-menutitle": "Menu"
+	"foreground-menutitle": "Menu",
+	"foreground-menunavback": "Espalda"
 }