(bug 36047) Adds high definition (HD) CSS for the Vector skin

This patch adds a high definition (HD) style sheet for vector which adjusts
various margin and padding properties to give the page a less crammed-
together feel. All properties transition over 250ms and only activated if
the browser is 900px wide or greater. This size should work well for 1024px
wide screens sans scroll bar, window borders, space around browser, etc.

Change-Id: I85fc70e324b3b93c943efcc827eefdfb3bda7fdf

diff --git a/resources/Resources.php b/resources/Resources.php
index 2855f9a..909cb6e 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -75,6 +75,7 @@ return array(
                        'common/commonContent.css' => array( 'media' => 'screen' ),
                        'common/commonInterface.css' => array( 'media' => 'screen' ),
                        'vector/screen.css' => array( 'media' => 'screen' ),
+                       'vector/screen-hd.css' => array( 'media' => 'screen and (min-width: 900px)' ),
                ),
                'scripts' => 'vector/vector.js',
                'remoteBasePath' => $GLOBALS['wgStylePath'],

diff --git a/skins/vector/screen-hd.css b/skins/vector/screen-hd.css
new file mode 100644 (file)
index 0000000..ebb639b
--- /dev/null
+++ b/skins/vector/screen-hd.css
@@ -0,0 +1,31 @@
+/* Vector screen styles for high definition displays */
+
+div#content {
+       margin-left: 11em;
+       padding: 1.25em 1.5em 1.5em 1.5em;
+}
+#p-logo {
+       left: 0.5em;
+}
+div#footer {
+       margin-left: 11em;
+       padding: 1.25em;
+}
+div#mw-panel div.portal div.body {
+       padding-left: 0.5em;
+}
+div#mw-panel div.portal h5 {
+       padding-left: 2.25em;
+}
+#p-search {
+       margin-right: 1em;
+}
+#left-navigation {
+       left: 11em;
+}
+#p-personal {
+       right: 1em;
+}
+#mw-head-base {
+       margin-left: 11em;
+}

diff --git a/skins/vector/screen.css b/skins/vector/screen.css
index d48b5f8..b309d15 100644 (file)
--- a/skins/vector/screen.css
+++ b/skins/vector/screen.css
@@ -72,7 +72,7 @@ div.emptyPortlet {
 /* Personal */
 #p-personal {
        position: absolute;
-       top: 0;
+       top: 0.33em;
        right: 0.75em;
 }
 #p-personal h5 {
@@ -844,3 +844,45 @@ div.vectorTabs ul {
 .tipsy {
        font-size: 0.8em;
 }
+
+/* Animate between standard and high definition layouts */
+
+div#content,
+div#footer {
+       transition: margin-left 250ms, padding 250ms;
+       -moz-transition: margin-left 250ms, padding 250ms;
+       -webkit-transition: margin-left 250ms, padding 250ms;
+       -o-transition: margin-left 250ms, padding 250ms;
+}
+#p-logo,
+#left-navigation {
+       transition: left 250ms;
+       -moz-transition: left 250ms;
+       -webkit-transition: left 250ms;
+       -o-transition: left 250ms;
+}
+div#mw-panel div.portal div.body,
+div#mw-panel div.portal h5 {
+       transition: padding-left 250ms;
+       -moz-transition: padding-left 250ms;
+       -webkit-transition: padding-left 250ms;
+       -o-transition: padding-left 250ms;
+}
+#p-search {
+       transition: margin-right 250ms;
+       -moz-transition: margin-right 250ms;
+       -webkit-transition: margin-right 250ms;
+       -o-transition: margin-right 250ms;
+}
+#p-personal {
+       transition: right 250ms;
+       -moz-transition: right 250ms;
+       -webkit-transition: right 250ms;
+       -o-transition: right 250ms;
+}
+#mw-head-base {
+       transition: margin-left 250ms;
+       -moz-transition: margin-left 250ms;
+       -webkit-transition: margin-left 250ms;
+       -o-transition: margin-left 250ms;
+}