Add toggle to minimize page header; automatically triggers on small screens

1 files changed, 155 insertions, 1 deletions

diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index f3b02779e..cd6810e8d 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -570,9 +570,139 @@ a.iconlink.upload {
 	color: #fff;
 }
 
+#taskbar .button-logout {
+	display: none;
+}
+
+#taskbar a.button-logout span.button-inner {
+	background-position: -2px -1791px;
+}
+
+#taskbar a.button-logout:hover span.button-inner {
+	background-position: -2px -1829px;
+}
+
+
+/*** minimal version of the page header ***/
+
+.minimal #topline {
+	position: fixed;
+	top: -18px;
+	background: #444;
+	z-index: 5000;
+	width: 100%;
+	height: 22px;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.minimal #topline:hover {
+	top: 0px;
+	opacity: 0.94;
+	filter: alpha(opacity=94);
+	-webkit-transition: top 0.3s ease-in-out;
+	-moz-transition: top 0.3s ease-in-out;
+	-o-transition: top 0.3s ease-in-out;
+	transition: top 0.3s ease-in-out;
+}
+
+.minimal #topline a.button-logout {
+	display: none;
+}
+
+.minimal #topline span.username {
+	display: inline-block;
+	padding-top: 2px;
+}
+
+.minimal #topnav {
+	position: relative;
+	top: 4px;
+	height: 42px;
+}
+
+.minimal #taskbar {
+	height: ;
+}
+
+.minimal #taskbar a {
+	position: relative;
+	padding: 10px 10px 0 6px;
+	height: 32px;
+}
+
+.minimal #taskbar .button-logout {
+	display: inline-block;
+}
+
+.minimal #taskbar .button-inner {
+	top: -4px;
+	padding: 0;
+	height: 24px !important;
+	width: 27px;
+	text-indent: -5000px;
+}
+
+#taskbar .tooltip {
+	display: none;
+}
+
+.minimal #taskbar .tooltip {
+	position: absolute;
+	top: -500px;
+	right: 2px;
+	display: inline-block;
+	padding: 2px 8px 3px 8px;
+	background: #444;
+	background: -moz-linear-gradient(top, #444 0%, #333 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#333));
+	background: -o-linear-gradient(top, #444 0%, #333 100%);
+	background: -ms-linear-gradient(top, #444 0%, #333 100%);
+	background: linear-gradient(top, #444 0%, #333 100%);
+	color: #eee;
+	font-weight: bold;
+	white-space: nowrap;
+	border: 1px solid #777;
+	box-shadow: 0 1px 5px 0 #333;
+	-moz-box-shadow: 0 1px 5px 0 #333;
+	-webkit-box-shadow: 0 1px 5px 0 #333;
+	-o-box-shadow: 0 1px 5px 0 #333;
+	z-index: 200;
+	white-space: nowrap;
+	text-shadow: 0px 1px 1px #000;
+}
+
+.minimal #taskbar .tooltip:after {
+	content: "";
+	position: absolute;
+	top: -4px;
+	right: 15px;
+	border-style: solid;
+	border-width: 0 4px 4px;
+	border-color: #888 transparent;
+	/* reduce the damage in FF3.0 */
+	display: block; 
+	width: 0;
+	z-index: 251;
+}
+
+.ie8 .minimal #taskbar .tooltip:after {
+	top: -6px;
+}
+
+.minimal #taskbar a:hover .tooltip {
+	display: block;
+	top: 39px;
+}
+
 
 /*** taskbar ***/
 
+#taskbar {
+	position: relative;
+	padding-right: 18px;
+}
+
 #taskbar a {
 	display: inline-block;
 	height: 34px;
@@ -630,6 +760,22 @@ a.iconlink.upload {
 	background-position: 0 -168px;
 }
 
+#taskbar .minmodetoggle {
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: block;
+	width: 19px;
+	height: 46px;
+	cursor: pointer;
+	background: url(images/buttons.png) -35px -1778px no-repeat;
+}
+
+.minimal #taskbar .minmodetoggle {
+	height: 42px;
+	background-position: -35px -1820px;
+}
+
 #mainscreen {
 	position: absolute;
 	top: 88px;
@@ -643,13 +789,21 @@ a.iconlink.upload {
 }
 
 #mainscreen.offset {
-	top: 130px;
+	top: 132px;
 }
 
 #mainscreen .offset {
 	margin-top: 42px;
 }
 
+.minimal #mainscreen {
+	top: 62px;
+}
+
+.minimal #mainscreen.offset {
+	top: 102px;
+}
+
 .uibox {
 	border: 1px solid #a3a3a3;
 	border-radius: 4px;