Rewrite notifications with popover class

media/css/seahub.css

@@ -16,6 +16,11 @@
  * (TODO: complete this TOC)
  *
  */
+/*
+ * z-index:
+ *    popover:  20
+ *
+ */
 
 /****** icon-xx ********/
 /* Font Awesome 3.2.1 by Dave Gandy - http://fortawesome.github.com/Font-Awesome */
@@ -493,7 +498,8 @@ a.op-icon:focus {
     background:#dfdfdf;
 }
 .no-deco,
-.no-deco:hover {
+.no-deco:hover,
+.no-deco:focus {
     text-decoration:none;
 }
 .input-disabled {/* for type="password/text" etc*/
@@ -1174,6 +1180,7 @@ textarea:-moz-placeholder {/* for FF */
     border-radius:3px;
     box-shadow:0 0 4px #ccc;
     position:absolute;
+    z-index: 20;
 }
 .popover-hd {
     padding:5px 0 3px;
@@ -1436,16 +1443,16 @@ button.dropdown-toggle:focus {
     text-decoration:underline;
 }
 /* top-bar */
-#msg-count {
+#notifications {
     position:relative;
     margin:10px 32px 0 25px;
 }
-#msg-count .sf2-icon-bell {
+#notifications .sf2-icon-bell {
     font-size:24px;
     line-height:1;
     color:#999;
 }
-#msg-count .num {
+#notifications .num {
     position:absolute;
     color:#fff;
     font-size:12px;
@@ -1456,66 +1463,39 @@ button.dropdown-toggle:focus {
     top:0;
     left:15px;
 }
-#notice-popup {
-    position:absolute;
+#notice-popover {
     top:38px;
     right:-80px;
-    width:240px;
-    background:#fff;
-    border:1px solid #c9c9c9;
-    border-radius:3px;
-    box-shadow:0 0 1px #f3f3f3;
-    z-index:20;
 }
-#notice-popup .hd {
-    text-align:center;
-    padding:5px 0 3px;
-    border-bottom:1px solid #dfdfe1;
-    margin:0 10px;
+#notice-popover .outer-caret {
+    right:82px;
 }
-#notice-popup .con {
-    padding:0 10px;
-    overflow:auto;
-}
-#notice-popup a {
+#notice-popover a {
     font-weight:normal;
 }
-#notice-popup .close {
-    position:absolute;
-    top:.5em;
-    right:10px;
-    cursor:pointer;
-}
-#notice-popup .close {
-    font-size:16px;
-    color:#b9b9b9;
-    margin:0;
-}
-#notice-popup li {
-    padding:9px 0 3px;
+#notice-popover li {
+    padding:9px 10px 3px 8px;
     border-bottom:1px solid #dfdfe1;
 }
-#notice-popup .unread {
+#notice-popover li.unread {
     background:#f5f5f7;
     border-left:2px solid #feac74;
-    margin:0 -10px;
-    padding-left:8px;
-    padding-right:10px;
+    padding-left:6px;
 }
-#notice-popup .avatar {
+#notice-popover .avatar {
     border-radius:1000px;
     float:left;
 }
-#notice-popup .brief {
+#notice-popover .brief {
     margin-left:40px;
     margin-top:0;
 }
-#notice-popup .time {
+#notice-popover .time {
     color:#999;
     text-align:right;
     margin:0;
 }
-#notice-popup .all {
+#notice-popover .all {
     color:#a4a4a4;
 }
 #account {