Merge pull request #2 from VSEphpbb/ticket/11103-VSE

[ticket/11103-VSE] Updated notification AJAX styling
EXreaction · Dec 26, 2012 · 860db97 · 860db97
2 parents bf93dce + e3b11c4
commit 860db97
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 15 deletions.
diff --git a/phpBB/styles/prosilver/template/overall_header.html b/phpBB/styles/prosilver/template/overall_header.html
@@ -135,6 +135,7 @@ <h1>{SITENAME}</h1>
 				<li>
 					[ <a href="#" id="notification_list_button" title="{NOTIFICATIONS_COUNT}">{NOTIFICATIONS_COUNT}</a> ] &bull;
 					<div id="notification_list" class="notification_list">
+						<div class="pointer"><div class="pointer_inner"></div></div>
 						<div class="header">
 							{L_NOTIFICATIONS}
 						</div>

diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
@@ -1046,7 +1046,11 @@ input.disabled {
 
 #notification_list {
 	background-color: #FFFFFF;
-	border-color: #00608F;
+	border-color: #B9B9B9;
+}
+
+#notification_list ul li {
+	border-bottom-color: #B9B9B9;
 }
 
 #notification_list ul li:hover {
@@ -1055,5 +1059,26 @@ input.disabled {
 }
 
 #notification_list > .header, .notification_list > .footer {
-	border-color: #00608F;
+	border-color: #B9B9B9;
+	border-bottom-color: #B9B9B9;
+	color: #000000;
+}
+
+#notification_list > .header {
+	background: #F1F8FF;
+	background: -moz-linear-gradient(top, #F1F8FF 0%, #CADCEB 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F1F8FF), color-stop(100%, #CADCEB));
+	background: -webkit-linear-gradient(top, #F1F8FF 0%, #CADCEB 100%);
+	background: -o-linear-gradient(top, #F1F8FF 0%, #CADCEB 100%);
+	background: -ms-linear-gradient(top, #F1F8FF 0%, #CADCEB 100%);
+	background: linear-gradient(to bottom, #F1F8FF 0%, #CADCEB 100%);
 }
+
+.notification_list .pointer {	
+	border-bottom-color: #ADADAD;
+}
+
+.notification_list .pointer_inner {
+	border-bottom-color: #F1F8FF;
+}
+
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css
@@ -679,8 +679,8 @@ p.rules a {
 	width: 330px;
 	z-index: 1;
 	border: 1px solid;
-	border-radius: 4px;
-	box-shadow: 4px 4px 5px;
+	box-shadow: 3px 3px 5px darkgray;
+	margin-top: 8px;
 }
 
 #notification_list ul {
@@ -690,7 +690,7 @@ p.rules a {
 }
 
 #notification_list ul li {
-	width: ;
+	width: 310px;
 	padding: 10px;
 	margin: 0;
 	float: left;
@@ -700,24 +700,20 @@ p.rules a {
 	clear: both;
 }
 
-#notification_list ul li {
-	width: 310px;
-}
-
-#notification_list ul li:last-child {
-	border-bottom: 0px;
-}
-
 #notification_list > .header {
-	padding: 0 5px;
+	padding: 0 10px;
+	font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-size: 11px;
 	font-weight: bold;
+	text-shadow: 1px 1px 1px white;
+	text-transform: uppercase;	
+	line-height: 30px;
 	border-bottom: 1px solid;
 }
 
 #notification_list > .footer {
 	text-align: center;
 	font-size: 1.2em;
-	border-top: 1px solid;
 }
 
 #notification_list ul li a, .notification_list dt > a, #notification_list > .footer > a {
@@ -744,3 +740,27 @@ p.rules a {
 .notification_list ul.topiclist dt {
 	width: 88%;
 }
+
+.notification_list .pointer, .notification_list .pointer_inner {
+	position: absolute; 
+	width: 0; 
+	height: 0; 
+	border-top-width: 0;
+	border-bottom: 10px solid;
+	border-left: 10px dashed transparent;
+	border-right: 10px dashed transparent;
+	display: block;
+	background: transparent;
+}
+
+.notification_list .pointer {	
+	right: auto;
+	left: 10px;
+	top: -11px;
+}
+
+.notification_list .pointer_inner {
+	top: auto;
+	bottom: -11px;
+	left: -10px;
+}