From 04045b71ac4f02f14199ddabb29de6772b14f8a0 Mon Sep 17 00:00:00 2001
From: Trevor Parscal <tparscal@wikimedia.org>
Date: Tue, 17 Apr 2012 14:24:29 -0700
Subject: [PATCH] (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
---
 resources/Resources.php    |  1 +
 skins/vector/screen-hd.css | 31 +++++++++++++++++++++++++++
 skins/vector/screen.css    | 44 +++++++++++++++++++++++++++++++++++++-
 3 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 skins/vector/screen-hd.css

diff --git a/resources/Resources.php b/resources/Resources.php
index 2855f9ab7b..909cb6e822 100644
--- 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
index 0000000000..ebb639b5e9
--- /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 d48b5f81e5..b309d15017 100644
--- 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;
+}
-- 
2.20.1