JGonera has submitted this change and it was merged.
Change subject: Maintenance: Load minimum possible css / reorg css
......................................................................
Maintenance: Load minimum possible css / reorg css
The key change this makes is it stops loading unused
css for non javascript users. All of css is loaded via javascript as needed
* Move css specific to Special:MobileMenu into its own css file
* Put all essential css for non-javascript users into ui.css and hamburger.css
t(for the left menu)
Load all javascript dependant css in javascript
* Define mobile.styles.page and put all styles that are not relevant to special
pages
there
* Combine less statements for readability
Change-Id: I39d2ced37dde5e6bd2488870918dca2f7600ca6c
---
M MobileFrontend.php
M includes/skins/SkinMobile.php
A less/common/mainmenu.less
M less/common/mf-navigation.less
A less/common/ui.less
M less/mf-variables.less
M less/modules/mf-search.less
A less/specials/mobilemenu.less
M stylesheets/common/mf-navigation.css
A stylesheets/common/ui.css
M stylesheets/modules/mf-search.css
A stylesheets/specials/mobilemenu.css
12 files changed, 582 insertions(+), 557 deletions(-)
Approvals:
JGonera: Verified; Looks good to me, approved
diff --git a/MobileFrontend.php b/MobileFrontend.php
index 07580a2..9ec80b6 100644
--- a/MobileFrontend.php
+++ b/MobileFrontend.php
@@ -167,18 +167,22 @@
'mobileTargets' => array(),
);
+$wgResourceModules['mobile.styles.page'] = $wgMFMobileResourceBoilerplate +
array(
+ 'dependencies' => array( 'mobile.startup' ),
+ 'styles' => array(
+ 'stylesheets/common/mf-footer.css',
+ 'stylesheets/common/mf-hacks.css',
+ 'stylesheets/common/mf-enwp.css'
+ ),
+ 'mobileTargets' => array(),
+);
+
$wgResourceModules['mobile.styles'] = $wgMFMobileResourceBoilerplate + array(
'styles' => array(
'stylesheets/externals/reset.css',
'stylesheets/common/mf-common.css',
- 'stylesheets/common/mf-footer.css',
+ 'stylesheets/common/ui.css',
'stylesheets/common/mf-typography.css',
- 'stylesheets/common/mf-navigation.css',
- 'stylesheets/modules/mf-search.css',
- 'stylesheets/modules/mf-banner.css',
- 'stylesheets/modules/mf-toggle.css',
- 'stylesheets/common/mf-hacks.css',
- 'stylesheets/common/mf-enwp.css'
),
'position' => 'top',
// expects to be added manually
@@ -321,18 +325,26 @@
'mobileTargets' => array( 'alpha' ),
);
+$wgResourceModules['mobile.stable.styles'] = $wgMFMobileResourceBoilerplate +
array(
+ 'styles' => array(
+ 'stylesheets/common/mf-navigation.css',
+ 'stylesheets/modules/mf-search.css',
+ 'stylesheets/modules/mf-banner.css',
+ 'stylesheets/modules/mf-toggle.css',
+ 'stylesheets/modules/mf-references.css',
+ 'stylesheets/modules/mf-cleanuptemplates.css',
+ 'stylesheets/modules/mf-watchstar.css',
+ 'stylesheets/modules/mf-photo.css',
+ ),
+);
+
$wgResourceModules['mobile.stable'] = $wgMFMobileResourceBoilerplate + array(
'dependencies' => array(
'mediawiki.jqueryMsg',
'mobile.startup',
'mobile.stable.dependencies',
'mediawiki.util',
- ),
- 'styles' => array(
- 'stylesheets/modules/mf-references.css',
- 'stylesheets/modules/mf-cleanuptemplates.css',
- 'stylesheets/modules/mf-watchstar.css',
- 'stylesheets/modules/mf-photo.css',
+ 'mobile.stable.styles',
),
'scripts' => array(
'javascripts/externals/hogan.js',
@@ -436,6 +448,11 @@
* Name must be the name of the special page lowercased prefixed by
'mobile.'
* suffixed by '.styles' or '.scripts'
*/
+$wgResourceModules['mobile.mobilemenu.styles'] =
$wgMFMobileSpecialPageResourceBoilerplate + array(
+ 'styles' => array(
+ 'stylesheets/specials/mobilemenu.css',
+ ),
+);
$wgResourceModules['mobile.mobilefeedback.styles'] =
$wgMFMobileSpecialPageResourceBoilerplate + array(
'styles' => array(
'stylesheets/specials/mobilefeedback.css',
diff --git a/includes/skins/SkinMobile.php b/includes/skins/SkinMobile.php
index 8574991..d3d2f3f 100644
--- a/includes/skins/SkinMobile.php
+++ b/includes/skins/SkinMobile.php
@@ -379,6 +379,8 @@
if ( isset( $wgResourceModules[
$specialScriptModuleName ] ) ) {
$moduleNames[] = $specialScriptModuleName;
}
+ } else {
+ $headModuleNames[] = 'mobile.styles.page';
}
if ( $action === 'edit' ) {
diff --git a/less/common/mainmenu.less b/less/common/mainmenu.less
new file mode 100644
index 0000000..bc0081b
--- /dev/null
+++ b/less/common/mainmenu.less
@@ -0,0 +1,96 @@
+/* Left menu */
+#mw-mf-page-left {
+ background-color: @mainMenuBackgroundColor;
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 1.2em;
+ bottom: 0;
+ top: 0;
+ margin-right: 0;
+ position: absolute;
+ border-right: solid 1px #AAA;
+ display: none; /* JS only */
+
+ #mw-mf-content-left {
+ height: 100%;
+ border-left: solid 12px #252525;
+ border-right: solid 1px black;
+ }
+
+ #mw-mf-menu-main {
+ background-color: @mainMenuBackgroundColor;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ padding-bottom: 12px;
+
+ li {
+ text-shadow: 0 1px 0 black;
+ border-bottom: 1px inset #717171;
+ font-weight: normal;
+ &:hover {
+ background-color: #5C5C5C;
+ border-left: solid 12px #3366BB;
+ margin-left: -12px;
+ }
+
+ a {
+ color: white;
+ display: block;
+ padding: 12px;
+ padding-left: 32px;
+ line-height: 22px;
+ background-repeat: no-repeat;
+ .background-size(24px, 24px);
+ background-position: left 10px;
+ margin-left: 10px;
+ border-bottom: 1px inset #3e3e3e;
+ &:hover {
+ text-decoration: none;
+ }
+ }
+
+ // low-res icons for old phones that don't support
background-size
+ &.icon-home a {
+ background-image:
url(images/menu/lowres/home.png);
+ }
+
+ &.icon-random a {
+ background-image:
url(images/menu/lowres/random.png);
+ }
+
+ &.icon-settings a {
+ background-image:
url(images/menu/lowres/settings.png);
+ }
+
+ &.icon-loginout a {
+ background-image: /* @embed
*/url(images/menu/lowres/loginout.png);
+ }
+ }
+ }
+}
+
+@media all and (min-width: 700px) {
+ .navigationEnabled .alpha,
+ .navigationEnabled .beta {
+ #mw-mf-page-left {
+ width: 20%;
+ display: block;
+ right: 80%;
+ }
+
+ .position-fixed,
+ #mw-mf-page-center {
+ left: 20% !important;
+ right: 0 !important;
+ width: 80%;
+ overflow: auto;
+ }
+ }
+
+ .beta.full-screen-search {
+ #mw-mf-page-left {
+ display: block !important;
+ }
+ }
+}
+
diff --git a/less/common/mf-navigation.less b/less/common/mf-navigation.less
index a6d2c66..fedd4f1 100644
--- a/less/common/mf-navigation.less
+++ b/less/common/mf-navigation.less
@@ -1,4 +1,4 @@
-@import "mf-buttons.less";
+@import "../mf-mixins.less";
@InfoBoxWLogoSize: 98px;
@overlayAlertTipColor: black;
@@ -9,37 +9,14 @@
@overlayBorderWidth: 1px;
@toastNotificationColor: #373737;
-#mw-mf-header form,
-#mw-mf-sq {
- height: @headerHeight;
-}
-
#mw-mf-menu-page {
- height: @headerHeight;
- width: @searchBarPaddingRight;
- position: absolute;
- top: 0;
right: 0;
-}
-
-#mw-mf-main-menu-button {
- position: absolute;
- height: @headerHeight;
- width: @searchBarPaddingLeft;
- background-image: url(images/menu/lowres/main.png);
- .background-size( 24px, 30px );
- background-repeat: no-repeat;
- background-position: center center;
}
.jsEnabled {
#mw-mf-main-menu-button {
background-image: /* @embed */ url(images/menu/main.png);
}
-}
-
-#mw-mf-main-menu-button:active {
- background-color: darken( @searchBoxColor, 0.4% );
}
#mw-mf-viewport {
@@ -56,117 +33,18 @@
min-height: 100%;
}
-#mw-mf-header, #mw-mf-overlay .header {
- color: black;
- .vertical-gradient( @searchBoxColor, @searchBoxColorTo );
- border-bottom: 1px solid #e2e2e2;
-
- h1 {
- color: @chromeHeadingColor;
- line-height: @headerHeight;
- margin: 0;
- }
-}
-
-#mw-mf-page-left {
- font-family: Helvetica, Arial, sans-serif;
- font-size: 1.2em;
- bottom: 0;
- top: 0;
- margin-right: 0;
- position: absolute;
- border-right: solid 1px #AAA;
- display: none;
-}
-
.navigationEnabled {
#mw-mf-page-left {
width: 80%;
right: 20%;
+ display: block;
}
.position-fixed,
#mw-mf-page-center {
left: 80% !important;
overflow-x: hidden; // prevent horizontal scroll on chrome
- }
-
- &.navigationFullScreen {
- #mw-mf-page-left {
- // !important needed to override rules set by @media
min-width: 700px
- width: 100% !important;
- right: 0 !important;
- }
-
- #mw-mf-page-center {
- display: none;
- }
- }
-}
-
-.navigationEnabled #mw-mf-page-left {
- display: block;
-}
-
-#mw-mf-menu-main {
- list-style: none;
- margin: 0;
- padding: 0;
- padding-bottom: 12px;
-}
-
-#mw-mf-page-left,
-#mw-mf-menu-main,
-#mw-mf-menu-main li {
- background-color: #4E4E4E;
-}
-
-#mw-mf-menu-main li {
- text-shadow: 0 1px 0 black;
- border-bottom: 1px inset #717171;
- font-weight: normal;
-}
-
-#mw-mf-menu-main li a {
- color: white;
- display: block;
- padding: 12px;
- padding-left: 32px;
- line-height: 22px;
- background-repeat: no-repeat;
- .background-size(24px, 24px);
- background-position: left 10px;
- margin-left: 10px;
- border-bottom: 1px inset #3e3e3e;
-}
-
-#mw-mf-menu-main li a:hover {
- text-decoration: none;
-}
-
-#mw-mf-content-left {
- height: 100%;
- border-left: solid 12px #252525;
- border-right: solid 1px black;
-}
-
-// low-res icons for old phones that don't support background-size
-#mw-mf-menu-main li {
- &.icon-home a {
- background-image: url(images/menu/lowres/home.png);
- }
-
- &.icon-random a {
- background-image: url(images/menu/lowres/random.png);
- }
-
- &.icon-settings a {
- background-image: url(images/menu/lowres/settings.png);
- }
-
- &.icon-loginout a {
- background-image: /* @embed
*/url(images/menu/lowres/loginout.png);
}
}
@@ -198,16 +76,6 @@
&.icon-loginout a {
background-image: /* @embed */url(images/menu/loginout.png);
}
-}
-
-#mw-mf-menu-main li.disabled {
- opacity: 0.2;
-}
-
-#mw-mf-menu-main li:hover {
- background-color: #5C5C5C;
- border-left: solid 12px #3366BB;
- margin-left: -12px;
}
body.navigationEnabled {
@@ -319,11 +187,6 @@
#mw-mf-page-center .header,
.overlay .header {
- line-height: @headerHeight;
- text-align: center;
- padding: 0;
- min-height: @headerHeight;
- margin: 0;
input.search {
margin-top: 0;
@@ -410,38 +273,9 @@
}
@media all and (max-width: 240px) {
- #mw-mf-search {
- padding-left: 0;
- }
-
#mw-mf-menu-main li {
background-position: 0 0;
font-size: 0.8em;
- }
-}
-
-@media all and (min-width: 700px) {
- .navigationEnabled .alpha,
- .navigationEnabled .beta {
- #mw-mf-page-left {
- width: 20%;
- display: block;
- right: 80%;
- }
-
- .position-fixed,
- #mw-mf-page-center {
- left: 20% !important;
- right: 0 !important;
- width: 80%;
- overflow: auto;
- }
- }
-
- .beta.full-screen-search {
- #mw-mf-page-left {
- display: block !important;
- }
}
}
diff --git a/less/common/ui.less b/less/common/ui.less
new file mode 100644
index 0000000..f8f1aae
--- /dev/null
+++ b/less/common/ui.less
@@ -0,0 +1,111 @@
+@import "../mf-mixins.less";
+@import "mf-buttons.less";
+@import 'mainmenu.less';
+
+/* Header */
+#mw-mf-header form,
+#mw-mf-sq {
+ height: @headerHeight;
+}
+
+.header,
+#mw-mf-header {
+ z-index: 2;
+ color: black;
+ .vertical-gradient( @searchBoxColor, @searchBoxColorTo );
+ border-bottom: 1px solid #e2e2e2;
+ line-height: @headerHeight;
+ text-align: center;
+ padding: 0;
+ min-height: @headerHeight;
+ margin: 0;
+
+ h1 {
+ color: @chromeHeadingColor;
+ line-height: @headerHeight;
+ margin: 0;
+ }
+}
+
+/* Menu buttons */
+#mw-mf-menu-page,
+#mw-mf-main-menu-button {
+ display: inline-block; //?
+ height: @headerHeight;
+ width: @searchBarPaddingLeft;
+ position: absolute;
+ top: 0;
+}
+
+/* hamburger */
+#mw-mf-main-menu-button {
+ background-image: url(images/menu/lowres/main.png);
+ .background-size( 24px, 30px );
+ overflow: hidden;
+ background-repeat: no-repeat;
+ z-index: 2;
+ left: 0;
+ border-radius: 5px 5px 5px;
+ background-position: center center;
+ &:active {
+ background-color: darken( @searchBoxColor, 0.4% );
+ }
+}
+
+/* Search */
+input.search {
+ -webkit-appearance: none;
+ line-height: normal;
+ background: none;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ .border-radius( 3px );
+ margin-top: 0;
+ width: 99%;
+ border: @searchBorderHeight solid #c9c9c9;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ height: @searchBoxHeight;
+ vertical-align: middle; /* don't use line height here as placeholder on
ripple positions incorrectly */
+ background-color: white; /* remove fennec default background */
+ padding-left: 2px;
+ &::-webkit-search-cancel-button {
+ -webkit-appearance: none;
+ }
+
+ &:focus {
+ outline: none;
+ }
+}
+
+input.searchSubmit {
+ @inputThirdHeight: round( @searchBoxHeight / 3 ) - 1;
+
+ position: absolute;
+ top: @searchMarginTop;
+ right: -@searchBarPaddingRight + 4px;
+ padding-top: @inputThirdHeight;
+ padding-bottom: @inputThirdHeight;
+ font-size: @inputThirdHeight;
+}
+
+.jsEnabled {
+ input.searchSubmit {
+ display: none;
+ }
+}
+
+.search-box {
+ padding: 0 @searchBarPaddingRight 0 @searchBarPaddingLeft;
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}
+
+/* samsung galaxy s gt-19000 */
+@media all and ( max-width:240px ) {
+ #mw-mf-search {
+ font-size: 0.8em;
+ padding-left: 0;
+ }
+}
diff --git a/less/mf-variables.less b/less/mf-variables.less
index b23371b..0811856 100644
--- a/less/mf-variables.less
+++ b/less/mf-variables.less
@@ -16,6 +16,7 @@
@redBase : #CC0000;
@overlayContentBackground: white;
@chromeHeadingColor: black;
+@mainMenuBackgroundColor: #4E4E4E;
@inputFontSize: 2em;
@overlayHeadingIndent: 0.4em;
diff --git a/less/modules/mf-search.less b/less/modules/mf-search.less
index 4ce51bd..b3c74b0 100644
--- a/less/modules/mf-search.less
+++ b/less/modules/mf-search.less
@@ -5,49 +5,7 @@
*/
@import "../mf-mixins.less";
-.jsEnabled {
- input.searchSubmit {
- display: none;
- }
-}
-
-@inputThirdHeight: round( @searchBoxHeight / 3 ) - 1;
-
-input.searchSubmit {
- position: absolute;
- top: @searchMarginTop;
- right: -@searchBarPaddingRight + 4px;
- padding-top: @inputThirdHeight;
- padding-bottom: @inputThirdHeight;
- font-size: @inputThirdHeight;
-}
-
input.search {
- -webkit-appearance: none;
- line-height: normal;
- background: none;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- .border-radius( 3px );
- margin-top: 0;
- width: 99%;
- border: @searchBorderHeight solid #c9c9c9;
- outline: none;
- padding: 0;
- width: 100%;
- margin-top: @searchMarginTop;
- height: @searchBoxHeight;
- vertical-align: middle; /* don't use line height here as placeholder on
ripple positions incorrectly */
- background-color: white; /* remove fennec default background */
- padding-left: 2px;
- &::-webkit-search-cancel-button {
- -webkit-appearance: none;
- }
-
- &:focus {
- outline: none;
- }
/* visual indication that search is happening */
&.searching {
@@ -61,9 +19,7 @@
}
}
-.search-box {
- padding: 0 @searchBarPaddingRight 0 @searchBarPaddingLeft;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+#mw-mf-searchForm {
.clearlink {
top: @searchMarginTop;
@@ -140,9 +96,3 @@
}
}
-/* samsung galaxy s gt-19000 */
-@media all and ( max-width:240px ) {
- #mw-mf-search {
- font-size: 0.8em;
- }
-}
diff --git a/less/specials/mobilemenu.less b/less/specials/mobilemenu.less
new file mode 100644
index 0000000..9abf47f
--- /dev/null
+++ b/less/specials/mobilemenu.less
@@ -0,0 +1,12 @@
+.navigationFullScreen {
+ #mw-mf-page-left {
+ // !important needed to override rules set by @media min-width:
700px
+ width: 100% !important;
+ right: 0 !important;
+ display: block !important;
+ }
+
+ #mw-mf-page-center {
+ display: none;
+ }
+}
diff --git a/stylesheets/common/mf-navigation.css
b/stylesheets/common/mf-navigation.css
index 7087ff0..b32e687 100644
--- a/stylesheets/common/mf-navigation.css
+++ b/stylesheets/common/mf-navigation.css
@@ -1,152 +1,8 @@
-/* reuses https://github.com/wikimedia/agora */
-.button,
-button,
-input[type=submit] {
- display: inline-block;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- padding: 1em 1.25em 1em;
- line-height: 1;
- text-align: center;
- cursor: pointer;
- border: 1px #33589f solid;
- color: #ffffff;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
- background-color: #3366bb;
- background-image: -moz-linear-gradient(top, #3670c8 0, #3366bb 100%);
- background-image: -ms-linear-gradient(top, #3670c8 0, #3366bb 100%);
- background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #3670c8), color-stop(100%, #3366bb));
- background-image: -webkit-linear-gradient(top, #3670c8 0, #3366bb 100%);
- background-image: linear-gradient(#3670c8 0, #3366bb 100%);
-}
-.button:hover,
-button:hover,
-input[type=submit]:hover {
- background-color: #3f77d7;
- background-image: -moz-linear-gradient(top, #4c84da 0, #3f77d7 100%);
- background-image: -ms-linear-gradient(top, #4c84da 0, #3f77d7 100%);
- background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #4c84da), color-stop(100%, #3f77d7));
- background-image: -webkit-linear-gradient(top, #4c84da 0, #3f77d7 100%);
- background-image: linear-gradient(#4c84da 0, #3f77d7 100%);
-}
-.button:active,
-button:active,
-input[type=submit]:active {
- background-color: #2a549c;
- background-image: -moz-linear-gradient(top, #2d5ea9 0, #2a549c 100%);
- background-image: -ms-linear-gradient(top, #2d5ea9 0, #2a549c 100%);
- background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #2d5ea9), color-stop(100%, #2a549c));
- background-image: -webkit-linear-gradient(top, #2d5ea9 0, #2a549c 100%);
- background-image: linear-gradient(#2d5ea9 0, #2a549c 100%);
-}
-.button:visited,
-button:visited,
-input[type=submit]:visited {
- color: #fff;
-}
-.button:disabled,
-button:disabled,
-input[type=submit]:disabled,
-.button:disabled.hover,
-button:disabled.hover,
-input[type=submit]:disabled.hover,
-.button.disabled,
-button.disabled,
-input[type=submit].disabled,
-.button.disabled:hover,
-button.disabled:hover,
-input[type=submit].disabled:hover {
- color: white;
- text-shadow: none;
- background-color: #7297d7;
- background-image: -moz-linear-gradient(top, #7297d7 0, #7297d7 100%);
- background-image: -ms-linear-gradient(top, #7297d7 0, #7297d7 100%);
- background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #7297d7), color-stop(100%, #7297d7));
- background-image: -webkit-linear-gradient(top, #7297d7 0, #7297d7 100%);
- background-image: linear-gradient(#7297d7 0, #7297d7 100%);
- border-color: #5e89d1;
-}
-.button.languageSelector,
-button.languageSelector,
-input[type=submit].languageSelector {
- margin-top: 14pt;
-}
-.button.cancel,
-button.cancel,
-input[type=submit].cancel {
- background: #999;
- border: 1px #777 solid;
-}
-.header a.button {
- font-size: 1em;
- margin-top: 8px;
- margin-bottom: 8px;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
- padding-top: 7px;
- padding-bottom: 7px;
- text-decoration: none;
- text-shadow: none;
- background-color: #e9e9ea;
- background-image: -moz-linear-gradient(top, #ffffff 45%, #e9e9ea 100%);
- background-image: -ms-linear-gradient(top, #ffffff 45%, #e9e9ea 100%);
- background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(45%, #ffffff), color-stop(100%, #e9e9ea));
- background-image: -webkit-linear-gradient(top, #ffffff 45%, #e9e9ea 100%);
- background-image: linear-gradient(#ffffff 45%, #e9e9ea 100%);
- color: #58595b;
- border: 1px solid #9ea0a3;
- border-right: none;
- vertical-align: middle;
- white-space: nowrap;
-}
-.header a.button.active {
- background: #c8cacb;
- font-weight: bold;
-}
-.header a.button:first-child {
- -webkit-border-radius: 3px 0 0 3px;
- -moz-border-radius: 3px 0 0 3px;
- border-radius: 3px 0 0 3px;
- border-left: 1px solid #9ea0a3;
-}
-.header a.button:last-child {
- -webkit-border-radius: 0 3px 3px 0;
- -moz-border-radius: 0 3px 3px 0;
- border-radius: 0 3px 3px 0;
- border-right: 1px solid #9ea0a3;
-}
-#mw-mf-header form,
-#mw-mf-sq {
- height: 46px;
-}
#mw-mf-menu-page {
- height: 46px;
- width: 40px;
- position: absolute;
- top: 0;
right: 0;
-}
-#mw-mf-main-menu-button {
- position: absolute;
- height: 46px;
- width: 40px;
- background-image: url(images/menu/lowres/main.png);
- /* use -webkit prefix for older android browsers eg. nexus 1 */
-
- -moz-background-size: 24px 30px;
- -o-background-size: 24px 30px;
- -webkit-background-size: 24px 30px;
- background-size: 24px 30px;
- background-repeat: no-repeat;
- background-position: center center;
}
.jsEnabled #mw-mf-main-menu-button {
background-image: /* @embed */ url(images/menu/main.png);
-}
-#mw-mf-main-menu-button:active {
- background-color: #f9f9f9;
}
#mw-mf-viewport {
width: 100%;
@@ -162,104 +18,15 @@
z-index: 3;
min-height: 100%;
}
-#mw-mf-header,
-#mw-mf-overlay .header {
- color: black;
- background-color: #f3f3f3;
- background-image: -moz-linear-gradient(top, #fafafa 0, #f3f3f3 100%);
- background-image: -ms-linear-gradient(top, #fafafa 0, #f3f3f3 100%);
- background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #fafafa), color-stop(100%, #f3f3f3));
- background-image: -webkit-linear-gradient(top, #fafafa 0, #f3f3f3 100%);
- background-image: linear-gradient(#fafafa 0, #f3f3f3 100%);
- border-bottom: 1px solid #e2e2e2;
-}
-#mw-mf-header h1,
-#mw-mf-overlay .header h1 {
- color: #000000;
- line-height: 46px;
- margin: 0;
-}
-#mw-mf-page-left {
- font-family: Helvetica, Arial, sans-serif;
- font-size: 1.2em;
- bottom: 0;
- top: 0;
- margin-right: 0;
- position: absolute;
- border-right: solid 1px #AAA;
- display: none;
-}
.navigationEnabled #mw-mf-page-left {
width: 80%;
right: 20%;
+ display: block;
}
.navigationEnabled .position-fixed,
.navigationEnabled #mw-mf-page-center {
left: 80% !important;
overflow-x: hidden;
-}
-.navigationEnabled.navigationFullScreen #mw-mf-page-left {
- width: 100% !important;
- right: 0 !important;
-}
-.navigationEnabled.navigationFullScreen #mw-mf-page-center {
- display: none;
-}
-.navigationEnabled #mw-mf-page-left {
- display: block;
-}
-#mw-mf-menu-main {
- list-style: none;
- margin: 0;
- padding: 0;
- padding-bottom: 12px;
-}
-#mw-mf-page-left,
-#mw-mf-menu-main,
-#mw-mf-menu-main li {
- background-color: #4E4E4E;
-}
-#mw-mf-menu-main li {
- text-shadow: 0 1px 0 black;
- border-bottom: 1px inset #717171;
- font-weight: normal;
-}
-#mw-mf-menu-main li a {
- color: white;
- display: block;
- padding: 12px;
- padding-left: 32px;
- line-height: 22px;
- background-repeat: no-repeat;
- /* use -webkit prefix for older android browsers eg. nexus 1 */
-
- -moz-background-size: 24px 24px;
- -o-background-size: 24px 24px;
- -webkit-background-size: 24px 24px;
- background-size: 24px 24px;
- background-position: left 10px;
- margin-left: 10px;
- border-bottom: 1px inset #3e3e3e;
-}
-#mw-mf-menu-main li a:hover {
- text-decoration: none;
-}
-#mw-mf-content-left {
- height: 100%;
- border-left: solid 12px #252525;
- border-right: solid 1px black;
-}
-#mw-mf-menu-main li.icon-home a {
- background-image: url(images/menu/lowres/home.png);
-}
-#mw-mf-menu-main li.icon-random a {
- background-image: url(images/menu/lowres/random.png);
-}
-#mw-mf-menu-main li.icon-settings a {
- background-image: url(images/menu/lowres/settings.png);
-}
-#mw-mf-menu-main li.icon-loginout a {
- background-image: /* @embed */ url(images/menu/lowres/loginout.png);
}
.jsEnabled #mw-mf-menu-main li.icon-home a {
background-image: /* @embed */ url(images/menu/home.png);
@@ -281,14 +48,6 @@
}
.jsEnabled #mw-mf-menu-main li.icon-loginout a {
background-image: /* @embed */ url(images/menu/loginout.png);
-}
-#mw-mf-menu-main li.disabled {
- opacity: 0.2;
-}
-#mw-mf-menu-main li:hover {
- background-color: #5C5C5C;
- border-left: solid 12px #3366BB;
- margin-left: -12px;
}
body.navigationEnabled {
height: 100%;
@@ -396,14 +155,6 @@
#content .alert {
margin: 0;
}
-#mw-mf-page-center .header,
-.overlay .header {
- line-height: 46px;
- text-align: center;
- padding: 0;
- min-height: 46px;
- margin: 0;
-}
#mw-mf-page-center .header input.search,
.overlay .header input.search {
margin-top: 0;
@@ -479,32 +230,9 @@
min-height: none !important;
}
@media all and (max-width: 240px) {
- #mw-mf-search {
- padding-left: 0;
- }
#mw-mf-menu-main li {
background-position: 0 0;
font-size: 0.8em;
- }
-}
-@media all and (min-width: 700px) {
- .navigationEnabled .alpha #mw-mf-page-left,
- .navigationEnabled .beta #mw-mf-page-left {
- width: 20%;
- display: block;
- right: 80%;
- }
- .navigationEnabled .alpha .position-fixed,
- .navigationEnabled .beta .position-fixed,
- .navigationEnabled .alpha #mw-mf-page-center,
- .navigationEnabled .beta #mw-mf-page-center {
- left: 20% !important;
- right: 0 !important;
- width: 80%;
- overflow: auto;
- }
- .beta.full-screen-search #mw-mf-page-left {
- display: block !important;
}
}
.supportsPositionFixed.navigationEnabled #mw-mf-viewport {
diff --git a/stylesheets/common/ui.css b/stylesheets/common/ui.css
new file mode 100644
index 0000000..2f96598
--- /dev/null
+++ b/stylesheets/common/ui.css
@@ -0,0 +1,317 @@
+/* reuses https://github.com/wikimedia/agora */
+.button,
+button,
+input[type=submit] {
+ display: inline-block;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ padding: 1em 1.25em 1em;
+ line-height: 1;
+ text-align: center;
+ cursor: pointer;
+ border: 1px #33589f solid;
+ color: #ffffff;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ background-color: #3366bb;
+ background-image: -moz-linear-gradient(top, #3670c8 0, #3366bb 100%);
+ background-image: -ms-linear-gradient(top, #3670c8 0, #3366bb 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #3670c8), color-stop(100%, #3366bb));
+ background-image: -webkit-linear-gradient(top, #3670c8 0, #3366bb 100%);
+ background-image: linear-gradient(#3670c8 0, #3366bb 100%);
+}
+.button:hover,
+button:hover,
+input[type=submit]:hover {
+ background-color: #3f77d7;
+ background-image: -moz-linear-gradient(top, #4c84da 0, #3f77d7 100%);
+ background-image: -ms-linear-gradient(top, #4c84da 0, #3f77d7 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #4c84da), color-stop(100%, #3f77d7));
+ background-image: -webkit-linear-gradient(top, #4c84da 0, #3f77d7 100%);
+ background-image: linear-gradient(#4c84da 0, #3f77d7 100%);
+}
+.button:active,
+button:active,
+input[type=submit]:active {
+ background-color: #2a549c;
+ background-image: -moz-linear-gradient(top, #2d5ea9 0, #2a549c 100%);
+ background-image: -ms-linear-gradient(top, #2d5ea9 0, #2a549c 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #2d5ea9), color-stop(100%, #2a549c));
+ background-image: -webkit-linear-gradient(top, #2d5ea9 0, #2a549c 100%);
+ background-image: linear-gradient(#2d5ea9 0, #2a549c 100%);
+}
+.button:visited,
+button:visited,
+input[type=submit]:visited {
+ color: #fff;
+}
+.button:disabled,
+button:disabled,
+input[type=submit]:disabled,
+.button:disabled.hover,
+button:disabled.hover,
+input[type=submit]:disabled.hover,
+.button.disabled,
+button.disabled,
+input[type=submit].disabled,
+.button.disabled:hover,
+button.disabled:hover,
+input[type=submit].disabled:hover {
+ color: white;
+ text-shadow: none;
+ background-color: #7297d7;
+ background-image: -moz-linear-gradient(top, #7297d7 0, #7297d7 100%);
+ background-image: -ms-linear-gradient(top, #7297d7 0, #7297d7 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #7297d7), color-stop(100%, #7297d7));
+ background-image: -webkit-linear-gradient(top, #7297d7 0, #7297d7 100%);
+ background-image: linear-gradient(#7297d7 0, #7297d7 100%);
+ border-color: #5e89d1;
+}
+.button.languageSelector,
+button.languageSelector,
+input[type=submit].languageSelector {
+ margin-top: 14pt;
+}
+.button.cancel,
+button.cancel,
+input[type=submit].cancel {
+ background: #999;
+ border: 1px #777 solid;
+}
+.header a.button {
+ font-size: 1em;
+ margin-top: 8px;
+ margin-bottom: 8px;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+ padding-top: 7px;
+ padding-bottom: 7px;
+ text-decoration: none;
+ text-shadow: none;
+ background-color: #e9e9ea;
+ background-image: -moz-linear-gradient(top, #ffffff 45%, #e9e9ea 100%);
+ background-image: -ms-linear-gradient(top, #ffffff 45%, #e9e9ea 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(45%, #ffffff), color-stop(100%, #e9e9ea));
+ background-image: -webkit-linear-gradient(top, #ffffff 45%, #e9e9ea 100%);
+ background-image: linear-gradient(#ffffff 45%, #e9e9ea 100%);
+ color: #58595b;
+ border: 1px solid #9ea0a3;
+ border-right: none;
+ vertical-align: middle;
+ white-space: nowrap;
+}
+.header a.button.active {
+ background: #c8cacb;
+ font-weight: bold;
+}
+.header a.button:first-child {
+ -webkit-border-radius: 3px 0 0 3px;
+ -moz-border-radius: 3px 0 0 3px;
+ border-radius: 3px 0 0 3px;
+ border-left: 1px solid #9ea0a3;
+}
+.header a.button:last-child {
+ -webkit-border-radius: 0 3px 3px 0;
+ -moz-border-radius: 0 3px 3px 0;
+ border-radius: 0 3px 3px 0;
+ border-right: 1px solid #9ea0a3;
+}
+/* Left menu */
+#mw-mf-page-left {
+ background-color: #4e4e4e;
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 1.2em;
+ bottom: 0;
+ top: 0;
+ margin-right: 0;
+ position: absolute;
+ border-right: solid 1px #AAA;
+ display: none;
+ /* JS only */
+
+}
+#mw-mf-page-left #mw-mf-content-left {
+ height: 100%;
+ border-left: solid 12px #252525;
+ border-right: solid 1px black;
+}
+#mw-mf-page-left #mw-mf-menu-main {
+ background-color: #4e4e4e;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ padding-bottom: 12px;
+}
+#mw-mf-page-left #mw-mf-menu-main li {
+ text-shadow: 0 1px 0 black;
+ border-bottom: 1px inset #717171;
+ font-weight: normal;
+}
+#mw-mf-page-left #mw-mf-menu-main li:hover {
+ background-color: #5C5C5C;
+ border-left: solid 12px #3366BB;
+ margin-left: -12px;
+}
+#mw-mf-page-left #mw-mf-menu-main li a {
+ color: white;
+ display: block;
+ padding: 12px;
+ padding-left: 32px;
+ line-height: 22px;
+ background-repeat: no-repeat;
+ /* use -webkit prefix for older android browsers eg. nexus 1 */
+
+ -moz-background-size: 24px 24px;
+ -o-background-size: 24px 24px;
+ -webkit-background-size: 24px 24px;
+ background-size: 24px 24px;
+ background-position: left 10px;
+ margin-left: 10px;
+ border-bottom: 1px inset #3e3e3e;
+}
+#mw-mf-page-left #mw-mf-menu-main li a:hover {
+ text-decoration: none;
+}
+#mw-mf-page-left #mw-mf-menu-main li.icon-home a {
+ background-image: url(images/menu/lowres/home.png);
+}
+#mw-mf-page-left #mw-mf-menu-main li.icon-random a {
+ background-image: url(images/menu/lowres/random.png);
+}
+#mw-mf-page-left #mw-mf-menu-main li.icon-settings a {
+ background-image: url(images/menu/lowres/settings.png);
+}
+#mw-mf-page-left #mw-mf-menu-main li.icon-loginout a {
+ background-image: /* @embed */ url(images/menu/lowres/loginout.png);
+}
+@media all and (min-width: 700px) {
+ .navigationEnabled .alpha #mw-mf-page-left,
+ .navigationEnabled .beta #mw-mf-page-left {
+ width: 20%;
+ display: block;
+ right: 80%;
+ }
+ .navigationEnabled .alpha .position-fixed,
+ .navigationEnabled .beta .position-fixed,
+ .navigationEnabled .alpha #mw-mf-page-center,
+ .navigationEnabled .beta #mw-mf-page-center {
+ left: 20% !important;
+ right: 0 !important;
+ width: 80%;
+ overflow: auto;
+ }
+ .beta.full-screen-search #mw-mf-page-left {
+ display: block !important;
+ }
+}
+/* Header */
+#mw-mf-header form,
+#mw-mf-sq {
+ height: 46px;
+}
+.header,
+#mw-mf-header {
+ z-index: 2;
+ color: black;
+ background-color: #f3f3f3;
+ background-image: -moz-linear-gradient(top, #fafafa 0, #f3f3f3 100%);
+ background-image: -ms-linear-gradient(top, #fafafa 0, #f3f3f3 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #fafafa), color-stop(100%, #f3f3f3));
+ background-image: -webkit-linear-gradient(top, #fafafa 0, #f3f3f3 100%);
+ background-image: linear-gradient(#fafafa 0, #f3f3f3 100%);
+ border-bottom: 1px solid #e2e2e2;
+ line-height: 46px;
+ text-align: center;
+ padding: 0;
+ min-height: 46px;
+ margin: 0;
+}
+.header h1,
+#mw-mf-header h1 {
+ color: #000000;
+ line-height: 46px;
+ margin: 0;
+}
+/* Menu buttons */
+#mw-mf-menu-page,
+#mw-mf-main-menu-button {
+ display: inline-block;
+ height: 46px;
+ width: 40px;
+ position: absolute;
+ top: 0;
+}
+/* hamburger */
+#mw-mf-main-menu-button {
+ background-image: url(images/menu/lowres/main.png);
+ /* use -webkit prefix for older android browsers eg. nexus 1 */
+
+ -moz-background-size: 24px 30px;
+ -o-background-size: 24px 30px;
+ -webkit-background-size: 24px 30px;
+ background-size: 24px 30px;
+ overflow: hidden;
+ background-repeat: no-repeat;
+ z-index: 2;
+ left: 0;
+ border-radius: 5px 5px 5px;
+ background-position: center center;
+}
+#mw-mf-main-menu-button:active {
+ background-color: #f9f9f9;
+}
+/* Search */
+input.search {
+ -webkit-appearance: none;
+ line-height: normal;
+ background: none;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ margin-top: 0;
+ width: 99%;
+ border: 1px solid #c9c9c9;
+ outline: none;
+ padding: 0;
+ width: 100%;
+ height: 30px;
+ vertical-align: middle;
+ /* don't use line height here as placeholder on ripple positions incorrectly
*/
+
+ background-color: white;
+ /* remove fennec default background */
+
+ padding-left: 2px;
+}
+input.search::-webkit-search-cancel-button {
+ -webkit-appearance: none;
+}
+input.search:focus {
+ outline: none;
+}
+input.searchSubmit {
+ position: absolute;
+ top: 9px;
+ right: -36px;
+ padding-top: 9px;
+ padding-bottom: 9px;
+ font-size: 9px;
+}
+.jsEnabled input.searchSubmit {
+ display: none;
+}
+.search-box {
+ padding: 0 40px 0 40px;
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}
+/* samsung galaxy s gt-19000 */
+@media all and (max-width: 240px) {
+ #mw-mf-search {
+ font-size: 0.8em;
+ padding-left: 0;
+ }
+}
diff --git a/stylesheets/modules/mf-search.css
b/stylesheets/modules/mf-search.css
index 4837c89..dee7618 100644
--- a/stylesheets/modules/mf-search.css
+++ b/stylesheets/modules/mf-search.css
@@ -3,50 +3,9 @@
moved from beta_common.css in
Change-Id: Id7715a83f8dc42cbdb23d8cbf982801606236f7c
*/
-.jsEnabled input.searchSubmit {
- display: none;
-}
-input.searchSubmit {
- position: absolute;
- top: 9px;
- right: -36px;
- padding-top: 9px;
- padding-bottom: 9px;
- font-size: 9px;
-}
input.search {
- -webkit-appearance: none;
- line-height: normal;
- background: none;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- margin-top: 0;
- width: 99%;
- border: 1px solid #c9c9c9;
- outline: none;
- padding: 0;
- width: 100%;
- margin-top: 9px;
- height: 30px;
- vertical-align: middle;
- /* don't use line height here as placeholder on ripple positions incorrectly
*/
-
- background-color: white;
- /* remove fennec default background */
-
- padding-left: 2px;
/* visual indication that search is happening */
-}
-input.search::-webkit-search-cancel-button {
- -webkit-appearance: none;
-}
-input.search:focus {
- outline: none;
}
input.search.searching {
background-color: #eee;
@@ -54,11 +13,7 @@
.full-screen-search .search-box {
padding-right: 8px;
}
-.search-box {
- padding: 0 40px 0 40px;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-}
-.search-box .clearlink {
+#mw-mf-searchForm .clearlink {
top: 9px;
right: 10px;
width: 24px;
@@ -149,10 +104,4 @@
}
ul.suggestions-results li.suggestions-result:hover {
background-color: #ACD1E9;
-}
-/* samsung galaxy s gt-19000 */
-@media all and (max-width: 240px) {
- #mw-mf-search {
- font-size: 0.8em;
- }
}
diff --git a/stylesheets/specials/mobilemenu.css
b/stylesheets/specials/mobilemenu.css
new file mode 100644
index 0000000..795856d
--- /dev/null
+++ b/stylesheets/specials/mobilemenu.css
@@ -0,0 +1,8 @@
+.navigationFullScreen #mw-mf-page-left {
+ width: 100% !important;
+ right: 0 !important;
+ display: block !important;
+}
+.navigationFullScreen #mw-mf-page-center {
+ display: none;
+}
--
To view, visit https://gerrit.wikimedia.org/r/52627
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I39d2ced37dde5e6bd2488870918dca2f7600ca6c
Gerrit-PatchSet: 7
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
