From 34003c5fa5dfc6bd4206e50a49b7a5439a05c148 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Fri, 22 Nov 2013 09:04:29 +0100
Subject: Display status messages as pile of black bars overlaying the UI in
 order to improve visibility (#1488974)

---
 skins/larry/styles.css | 94 ++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 92 insertions(+), 2 deletions(-)

(limited to 'skins/larry/styles.css')

diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 6e0340689..23bcd2aeb 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -509,6 +509,7 @@ a.iconlink.upload {
 }
 
 #message.statusbar {
+	display: none;
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -528,6 +529,93 @@ a.iconlink.upload {
 	text-overflow: ellipsis;
 }
 
+#messagestack {
+	position: absolute;
+	bottom: 14px;
+	right: 5px;
+	z-index: 50000;
+	width: auto;
+	height: auto;
+	max-height: 85%;
+	overflow-y: auto;
+	padding: 2px;
+}
+
+#messagestack div {
+	display: block;
+	position: relative;
+	width: 280px;
+	height: auto;
+	min-height: 16px;
+	margin: 3px 2px 5px 2px;
+	padding: 8px 10px 7px 30px;
+	cursor: default;
+	font-size: 12px;
+	font-weight: bold;
+	border-radius: 4px;
+	border: 1px solid #444;
+	color: #ebebeb;
+	text-shadow: 0 1px 1px #000;
+
+	background: rgba(64,64,64,0.9);
+	background: -moz-linear-gradient(top, rgba(64,64,64,0.9) 0%, rgba(48,48,48,0.9) 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,64,64,0.9)), color-stop(100%,rgba(48,48,48,0.9)));
+	background: -webkit-linear-gradient(top, rgba(64,64,64,0.9) 0%, rgba(48,48,48,0.9) 100%);
+	background: -o-linear-gradient(top, rgba(64,64,64,0.9) 0%, rgba(48,48,48,0.9) 100%);
+	background: -ms-linear-gradient(top, rgba(64,64,64,0.9) 0%, rgba(48,48,48,0.9) 100%);
+	background: linear-gradient(to bottom, rgba(64,64,64,0.9) 0%, rgba(48,48,48,0.9) 100%);
+
+	-moz-box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888;
+	-webkit-box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888;
+	-o-box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888;
+	box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888;
+}
+
+#messagestack div:after {
+	content: "";
+	position: absolute;
+	display: block;
+	top: 0;
+	left: 4px;
+	width: 20px;
+	height: 24px;
+	background: url(images/messages_dark.png) 0 6px no-repeat;
+}
+
+#messagestack div.error {
+	color: #ff615d;
+}
+
+#messagestack div.error:after {
+	background-position: 0 -55px;
+}
+
+#messagestack div.warning {
+	color: #f4bf0e;
+}
+
+#messagestack div.warning:after {
+	background-position: 0 -84px;
+}
+
+#messagestack div.confirmation {
+	color: #00e05a;
+}
+
+#messagestack div.confirmation:after {
+	background-position: 0 -25px;
+}
+
+#messagestack div.loading {
+	color: #ddd;
+}
+
+#messagestack div.loading:after {
+	top: 4px;
+	left: 6px;
+	background: url(images/ajaxloader_dark.gif) 0 4px no-repeat;
+}
+
 .ui-dialog.error .ui-dialog-title,
 .ui-dialog.warning .ui-dialog-title,
 .ui-dialog.confirmation .ui-dialog-title {
@@ -1404,7 +1492,7 @@ body.iframe .footerleft.floating:before,
 	top: 34px;
 	left: 0;
 	right: 0;
-	bottom: 28px;
+	bottom: 0px;
 	overflow: auto;
 }
 
@@ -1413,7 +1501,7 @@ body.iframe .footerleft.floating:before,
 	top: 0;
 	left: 0;
 	right: 0;
-	bottom: 28px;
+	bottom: 0px;
 }
 
 .footerleft {
@@ -1610,11 +1698,13 @@ ul.proplist li {
 	min-height: 40px;
 	padding: 5px 25px;
 	text-align: center;
+	font-size: 1.1em;
 }
 
 #login-form #message div {
 	display: inline-block;
 	padding-right: 0;
+	font-size: 12px;
 }
 
 #bottomline {
-- 
cgit v1.2.3