Paladox has uploaded a new change for review.
https://gerrit.wikimedia.org/r/166394
Change subject: Update Metrolook
......................................................................
Update Metrolook
* Fixes bugs and improves other things. please see README.md for settings and
other customzations.
Change-Id: I5772672dd00e19d9c66bd54f7d9ec6ee86eea35c
---
M Metrolook.php
M MetrolookTemplate.php
M README.md
M components/common.less
M components/navigation.less
M components/search.less
M screen.less
R theme.less
8 files changed, 203 insertions(+), 29 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/Metrolook
refs/changes/94/166394/1
diff --git a/Metrolook.php b/Metrolook.php
index a821720..00bf07f 100644
--- a/Metrolook.php
+++ b/Metrolook.php
@@ -25,7 +25,7 @@
'path' => __FILE__,
'name' => 'Metrolook',
'description' => 'Metrolook skin for MediaWiki.',
- 'version' => '3.0 beta 4',
+ 'version' => '3.0 beta 6',
'url' => 'https://www.mediawiki.org/wiki/Skin:Metrolook',
'author' => array( 'immewnity', 'paladox2015', 'Craig Davison',
'lagleki' ),
'license-name' => 'GPLv2+',
@@ -102,7 +102,6 @@
'styles' => array(
'screen.less' => array( 'media' => 'screen' ),
'screen-hd.less' => array( 'media' => 'screen and (min-width:
982px)' ),
- 'theme.css' => array( 'media' => 'screen' ),
),
'remoteSkinPath' => 'Metrolook',
'localBasePath' => __DIR__,
diff --git a/MetrolookTemplate.php b/MetrolookTemplate.php
index 9bd9c4c..4e4cd29 100644
--- a/MetrolookTemplate.php
+++ b/MetrolookTemplate.php
@@ -154,7 +154,7 @@
z-index:100;
}
.tilebar {
- position: fixed;
+ position: relative;
left: 0px;
top: 0px;
right: 0px;
@@ -162,10 +162,10 @@
align:right;
color:#fff;
background:#1D1D1D;
- width:100%;
+ width:21474836.47em;
height:400px;
display:block;
- z-index:102;
+ z-index:9999999;
}
.tile:hover {
outline: 3px #4A4A4A solid;
@@ -402,7 +402,7 @@
<div style="vertical-align:top;align:left;">
<div class="topleft">
-<div
style="align:left;margin-left:auto;margin-right:auto;display:none;height:200px;"
class="tilebar" id="bartile"><div style="height:200px;display:table;"><div
style="vertical-align:middle;display:table-cell;padding-left:36px;">
+<div style="align:left;display:none;height:200px;" class="tilebar"
id="bartile"><div style="height:200px;display:table;"><div
style="vertical-align:middle;display:table-cell;padding-left:36px;">
<div style="float:left;padding:5px;"><div class="tile"><?php if ( $link1 ):
?><a href="http://www.pidgi.net/wiki/";><?php else: ?><a href="<?php echo
$GLOBALS['$url1'] ?>"><?php endif; ?><?php if ( $image1 ): ?><img
src="http://images.pidgi.net/pidgiwikitiletop.png"; /><?php else: ?><img
src="<?php echo $GLOBALS['$picture1'] ?>" /><?php endif; ?></a></div></div><div
style="float:left;padding:5px;"><div class="tile"><?php if ( $link2 ): ?><a
href="http://www.pidgi.net/press/";><?php else: ?><a href="<?php echo
$GLOBALS['$url2'] ?>"><?php endif; ?><?php if ( $image2 ): ?><img
src="http://images.pidgi.net/pidgipresstiletop.png"; /><?php else: ?><img
src="<?php echo $GLOBALS['$picture2'] ?>" /><?php endif; ?></a></div></div><div
style="float:left;padding:5px;"><div class="tile"><?php if ( $link3 ): ?><a
href="http://www.pidgi.net/jcc/";><?php else: ?><a href="<?php echo
$GLOBALS['$url3'] ?>"><?php endif; ?><?php if ( $image3 ): ?><img
src="http://images.pidgi.net/jcctiletop.png"; /><?php else: ?><img src="<?php
echo $GLOBALS['$picture3'] ?>" /><?php endif; ?></a></div></div><div
style="float:left;padding:5px;"><div class="tile"><?php if ( $link4 ): ?><a
href="http://www.petalburgwoods.com/";><?php else: ?><a href="<?php echo
$GLOBALS['$url4'] ?>"><?php endif; ?><?php if ( $image4 ): ?><img
src="http://images.pidgi.net/pwntiletop.png"; /><?php else: ?><img src="<?php
echo $GLOBALS['$picture4'] ?>" /><?php endif; ?></a></div></div><div
style="float:left;padding:5px;"><div class="tile"><?php if ( $link5 ): ?><a
href="<?php echo $GLOBALS['$url5'] ?>"><?php else: ?><?php endif; ?><?php if (
$image5 ): ?><img src="<?php echo $GLOBALS['$picture5'] ?>" /><?php else:
?><?php endif; ?></a></div></div><div style="float:left;padding:5px;"><div
class="tile"><?php if ( $link6 ): ?><a href="<?php echo $GLOBALS['$url6']
?>"><?php else: ?><?php endif; ?><?php if ( $image6 ): ?><img src="<?php echo
$GLOBALS['$picture6'] ?>" /><?php else: ?><?php endif; ?></a></div></div>
</div></div></div>
diff --git a/README.md b/README.md
index e5693bc..880dbb8 100644
--- a/README.md
+++ b/README.md
@@ -189,6 +189,7 @@
and all you need to do is edit background-colour and the top bar should change
colour but please remember there is also hover which is when you hover it goes
a different colour.
<pre>
+
/* Top Bar colour and hover colour start */
#mw-page-base {
@@ -198,6 +199,18 @@
background-repeat: repeat-x;
/* This image is only a fallback (for IE 6-9), so we do not @embed it.
*/
background-image: url('images/page-fade.png');
+}
+
+@media all and (max-width: 1000px) and (min-width: 700px) {
+ #mw-page-base {
+ height: 2.5em;
+ background-color: dodgerBlue;
+ background-position: bottom left;
+ background-repeat: repeat-x;
+ /* This image is only a fallback (for IE 6-9), so we do not @embed it.
*/
+ background-image: url('images/page-fade.png');
+ min-width:65em;
+}
}
div.vectorTabs a:hover {
@@ -226,7 +239,6 @@
background-repeat: no-repeat;
.transition(background-position 250ms);
}
-
div.vectorMenu:hover {
background-color: blue;
}
@@ -246,6 +258,7 @@
}
/* Top Bar colour and hover colour end */
+
</pre>
## Known Issues
@@ -256,9 +269,8 @@
Note plans may change.
-Cumming soon support for
+Comming soon support for
-* MediaWiki 1.22
* MediaWiki 1.21
## Version
@@ -269,6 +281,8 @@
1.x.x requires MediaWiki 1.23.
+0.3.x requires MediaWiki 1.22.
+
## Removed things
diff --git a/components/common.less b/components/common.less
index 8abe75f..65bfe50 100644
--- a/components/common.less
+++ b/components/common.less
@@ -28,7 +28,7 @@
/* Content */
.mw-body {
- margin-left: 10em;
+ margin-left: 10em;
padding-bottom: 1em;
padding-top:0em;
/* @embed */
@@ -41,8 +41,8 @@
height:auto;
position:absolute;
bottom:0px;
- right:0px;
- left:0px;
+ right:0px;
+ left:0px;
top:40px;
overflow:auto;
-webkit-overflow-scrolling: touch;
@@ -112,7 +112,7 @@
/* different screen sizes */
@media all and (max-width: 1000px) and (min-width: 700px) {
.mw-body {
- margin-left: 10em;
+ margin-left: 11em;
padding-bottom: 1em;
padding-top:0em;
/* @embed */
@@ -125,8 +125,8 @@
height:auto;
position:absolute;
bottom:0px;
- right:-60px;
- left:0px;
+ right:-60px;
+ left:0px;
top:40px;
overflow:auto;
-webkit-overflow-scrolling: touch;
diff --git a/components/navigation.less b/components/navigation.less
index 393c9bb..2ec9adc 100644
--- a/components/navigation.less
+++ b/components/navigation.less
@@ -29,7 +29,7 @@
/* This image is only a fallback (for IE 6-9), so we do not @embed it.
*/
background-image: url('images/page-fade.png');
.vertical-gradient(#CF8B54, #CF8B54, 50%, 100%);
- width:65em;
+ min-width:65em;
}
}
#mw-head-base {
@@ -57,7 +57,7 @@
div#mw-head {
position: absolute;
top: 0;
- width: 106%;
+ min-width:106%;
h5 {
margin: 0;
@@ -74,7 +74,7 @@
}
#right-navigation {
-float: right;
+ float: right;
}
/* Logo */
@@ -98,11 +98,15 @@
/* Panel */
div#mw-panel {
+ position: absolute;
font-size: @menu-main-font-size;
top: 40px;
+ height: auto;
+ bottom: 0px;
padding-top: 1em;
- width: 10em;
- left: 0;
+ width: 11em;
+ left: 0;
+ overflow: hidden;
div.portal {
margin: 0 0.6em 0 0.7em;
@@ -113,7 +117,7 @@
.background-image('images/portal-break.png');
h5 {
- font-family: 'Segoe UI Light', Segoe UI, sans-serif;
+ font-family: 'Segoe UI Light', Segoe UI, sans-serif;
font-weight: 100;
font-size: 1em;
color: #444444;
@@ -163,15 +167,92 @@
}
}
+@media all and (max-width: 1000px) and (min-width: 700px) {
+ /* Panel */
+div#mw-panel {
+ position: absolute;
+ font-size: @menu-main-font-size;
+ top: 40px;
+ height: auto;
+ bottom: 0px;
+ padding-top: 1em;
+ width: 9.5em;
+ left: 0;
+ overflow: hidden;
+
+ div.portal {
+ margin: 0 0.6em 0 0.7em;
+ padding: 0.25em 0;
+ direction: ltr;
+ background-position: top left;
+ background-repeat: no-repeat;
+ .background-image('images/portal-break.png');
+
+ h5 {
+ font-family: 'Segoe UI Light', Segoe UI, sans-serif;
+ font-weight: 100;
+ font-size: 1em;
+ color: #444444;
+ margin: 0;
+ padding: @menu-main-heading-padding;
+ cursor: default;
+ border: none;
+ }
+
+ div.body {
+ margin: @menu-main-body-margin;
+ padding-top: 0;
+
+ ul {
+ list-style-type: none;
+ list-style-image: none;
+ margin: 0;
+ padding: @menu-main-body-padding;
+
+ li {
+ line-height: 1.125em;
+ margin: 0;
+ padding: 0.25em 0;
+ font-size: @menu-main-body-font-size;
+ word-wrap: break-word;
+
+ a {
+ color:
@menu-main-body-link-color;
+ &:visited {
+ color:
@menu-main-body-link-visited-color;
+ }
+ }
+ }
+ }
+ }
+
+ &.first {
+ background-image: none;
+ margin-top: 0;
+ h5 {
+ display: none;
+ }
+ div.body {
+ margin-left: 0.5em;
+ }
+ }
+ }
+}
+}
+
/* custom */
/* Panel */
div#mw-panel-custom {
+ position: absolute;
font-size: @menu-main-font-size;
top: 40px;
+ height: auto;
+ bottom: 0px;
padding-top: 1em;
- width: 10em;
+ width: 11em;
left: 0;
+ overflow: hidden;
div.portal-custom {
margin: 0 0.6em 0 0.7em;
@@ -182,15 +263,15 @@
.background-image('images/portal-break.png');
h5 {
- font-family: 'Segoe UI Light', Segoe UI, sans-serif;
+ font-family: 'Segoe UI Light', Segoe UI, sans-serif;
font-weight: 100;
font-size: 1em;
color: #444444;
- padding: 0.25em;
- padding-top: 0;
- padding-left: 17px;
- padding-bottom: 0;
- margin-bottom:0;
+ padding: 0.25em;
+ padding-top: 0;
+ padding-left: 17px;
+ padding-bottom: 0;
+ margin-bottom:0;
cursor: default;
border: none;
}
@@ -234,3 +315,81 @@
}
}
}
+
+/* custom */
+
+/* Panel */
+@media all and (max-width: 1000px) and (min-width: 700px) {
+div#mw-panel-custom {
+ position: absolute;
+ font-size: @menu-main-font-size;
+ top: 40px;
+ height: auto;
+ bottom: 0px;
+ padding-top: 1em;
+ width: 11em;
+ left: 0;
+ overflow: hidden;
+
+ div.portal-custom {
+ margin: 0 0.6em 0 0.7em;
+ padding: 0.25em 0;
+ direction: ltr;
+ background-position: top left;
+ background-repeat: no-repeat;
+ .background-image('images/portal-break.png');
+
+ h5 {
+ font-family: 'Segoe UI Light', Segoe UI, sans-serif;
+ font-weight: 100;
+ font-size: 1em;
+ color: #444444;
+ padding: 0.25em;
+ padding-top: 0;
+ padding-left: 17px;
+ padding-bottom: 0;
+ margin-bottom:0;
+ cursor: default;
+ border: none;
+ }
+
+ div.body-custom {
+ margin: @menu-main-body-margin;
+ padding-top: 0;
+
+ ul {
+ list-style-type: none;
+ list-style-image: none;
+ margin: 0;
+ padding: @menu-main-body-padding;
+
+ li {
+ line-height: 1.125em;
+ margin: 0;
+ padding: 0.25em 0;
+ font-size: @menu-main-body-font-size;
+ word-wrap: break-word;
+
+ a {
+ color:
@menu-main-body-link-color;
+ &:visited {
+ color:
@menu-main-body-link-visited-color;
+ }
+ }
+ }
+ }
+ }
+
+ &.first {
+ background-image: none;
+ margin-top: 0;
+ h5 {
+ display: none;
+ }
+ div.body-custom {
+ margin-left: 0.5em;
+ }
+ }
+ }
+}
+}
diff --git a/components/search.less b/components/search.less
index 1b7e01b..e74f86f 100644
--- a/components/search.less
+++ b/components/search.less
@@ -134,7 +134,7 @@
display: block;
width: 156px;
height: 1.75em;
- margin-top: 0.6em;
+ margin-top: 0.65em;
position: relative;
min-height: 1px; /* Gotta trigger hasLayout for IE7 */
border: solid 1px #aaa;
@@ -143,6 +143,7 @@
.background-image('images/search-fade.png');
background-position: top left;
background-repeat: repeat-x;
+ margin-bottom: 10px;
// Styles for both the search input and the button
input {
diff --git a/screen.less b/screen.less
index 50dffd4..5ef0bd8 100644
--- a/screen.less
+++ b/screen.less
@@ -7,3 +7,4 @@
@import "components/navigation.less";
@import "components/footer.less";
@import "components/externalLinks.less";
+@import "theme.less";
diff --git a/theme.css b/theme.less
similarity index 100%
rename from theme.css
rename to theme.less
--
To view, visit https://gerrit.wikimedia.org/r/166394
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I5772672dd00e19d9c66bd54f7d9ec6ee86eea35c
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/Metrolook
Gerrit-Branch: master
Gerrit-Owner: Paladox <thomasmulhall...@yahoo.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
![http://images.pidgi.net/pidgiwikitiletop.png"](http://images.pidgi.net/pidgiwikitiletop.png"){kind=link}
![http://images.pidgi.net/pidgipresstiletop.png"](http://images.pidgi.net/pidgipresstiletop.png"){kind=link}
![http://images.pidgi.net/jcctiletop.png"](http://images.pidgi.net/jcctiletop.png"){kind=link}
![http://images.pidgi.net/pwntiletop.png"](http://images.pidgi.net/pwntiletop.png"){kind=link}