Merge branch 'develop' into feature/hash-routed

1 files changed, 23 insertions, 5 deletions

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 5da6d495..6ad7ec1e 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -6,19 +6,32 @@
     // force the text to stay centered, while keeping
     // the button in the right side of the panel heading
     position: relative;
-    button {
+    .read-button {
       position: absolute;
       padding: 0.1em 0.3em 0.25em 0.3em;
-      right: 0.6em;
+      right: 0.7em;
     }
   }
 
-  .unseen {
-    border-left: 4px solid rgba(255, 48, 16, 0.65);
+  .unseen-count {
+    display: inline-block;
+    background-color: rgba(255, 16, 8, 0.8);
+    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
+    min-width: 1.3em;
+    border-radius: 1.3em;
+    margin: 0 0.2em 0 -0.4em;
+    color: white;
+    font-size: 0.9em;
+    text-align: center;
+    line-height: 1.3em;
   }
 
   .notification {
-    padding: 0.4em 0 0 0.7em;
+    // Will have to use pixels here to ensure consistent distance with
+    // pad alone and pad + border, browsers bad at rounding this with em,
+    // they love to give a 1 pixel ghost offset with 0.7em vs 0.3em + 0.4em,
+    // which does not happen with 10px vs 4px + 6px.
+    padding: 0.4em 0 0 10px;
     display: flex;
     border-bottom: 1px solid silver;
 
@@ -62,4 +75,9 @@
       border: none
     }
   }
+
+  .unseen {
+    border-left: 4px solid rgba(255, 16, 8, 0.75);
+    padding-left: 6px;
+  }
 }