Paladox has submitted this change and it was merged. Change subject: Update Metrolook ......................................................................
Update Metrolook * Fixes Bugs. * Please see README.md for information on customizing and options. Change-Id: Icf01ca798a2437cfde31866ecb712352a8a294ba --- 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, 199 insertions(+), 27 deletions(-) Approvals: Paladox: Verified; Looks good to me, approved diff --git a/Metrolook.php b/Metrolook.php index 5dd719a..ae3e45e 100644 --- a/Metrolook.php +++ b/Metrolook.php @@ -25,7 +25,7 @@ 'path' => __FILE__, 'name' => 'Metrolook', 'description' => 'Metrolook skin for MediaWiki.', - 'version' => '2.4.4', + 'version' => '2.4.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 d8bef96..c3d6884 100644 --- a/README.md +++ b/README.md @@ -194,6 +194,18 @@ 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 { background-color: blue; } diff --git a/components/common.less b/components/common.less index d4c08bc..7e36eb2 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; @@ -263,7 +263,7 @@ } .redirectMsg img { - vertical-align: text-bottom; + vertical-align: text-bottom; } .mw-body-content { 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/166392 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: Icf01ca798a2437cfde31866ecb712352a8a294ba Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/skins/Metrolook Gerrit-Branch: REL1_24 Gerrit-Owner: Paladox <thomasmulhall...@yahoo.com> Gerrit-Reviewer: Paladox <thomasmulhall...@yahoo.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits