1 files changed, 73 insertions, 41 deletions

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 3b7403e4..08420c86 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -50,30 +50,64 @@
   }
 
   .notification {
-    // 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;
+    padding-left: 4px;
+    box-sizing: border-box;
     display: flex;
     border-bottom: 1px solid;
     border-bottom-color: inherit;
 
-    .notification-gradient {
-      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
-      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%)
+    .non-mention {
+      display: flex;
+      flex: 1;
+      flex-wrap: nowrap;
+      padding: 0.6em;
+      min-width: 0;
+      .status-el {
+        .status {
+          padding: 0.25em 0;
+        }
+        padding: 0;
+        .status-content.media-body {
+          margin: 0;
+        }
+      }
+    }
+
+    .follow-text {
+      padding: 0.5em 0;
+    }
+
+    .status-el {
+      flex: 1;
     }
 
     time {
       white-space: nowrap;
     }
 
-    .text {
+    .notification-right {
+      flex: 1;
+      padding-left: 0.8em;
+      min-width: 0;
+    }
+
+    .notification-details {
       min-width: 0px;
       word-wrap: break-word;
       line-height:18px;
       position: relative;
       overflow: hidden;
+      width: 100%;
+      flex: 1;
+      flex-wrap: nowrap;
+
+      .username {
+        font-weight: bolder;
+      }
+      .timeago {
+        float: right;
+        font-size: 12px;
+      }
 
       .icon-retweet.lit {
         color: $fallback--cGreen;
@@ -112,7 +146,6 @@
         }
       }
 
-      padding: 0.3em 0.8em 0.5em;
       p {
         margin: 0;
         margin-top: 0;
@@ -120,30 +153,6 @@
       }
     }
 
-    .avatar {
-      margin-top: 0.3em;
-      width: 32px;
-      height: 32px;
-      border-radius: $fallback--avatarAltRadius;
-      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-      overflow: hidden;
-      line-height: 0;
-
-      &.animated::before {
-        display: none;
-      }
-
-    }
-
-    &:hover .animated.avatar {
-      canvas {
-        display: none;
-      }
-      img {
-        visibility: visible;
-      }
-    }
-
     &:last-child {
       border-bottom: none;
     }
@@ -159,16 +168,39 @@
     }
   }
 
-  .notification-gradient {
-    position: absolute;
-    width: 100%;
-    height: 4em;
-    margin-top:8em;
-  }
-
   .unseen {
     border-left: 4px solid $fallback--cRed;
     border-left: 4px solid var(--cRed, $fallback--cRed);
     padding-left: 6px;
   }
 }
+
+.notification {
+  .avatar-compact {
+    margin-top: 0.3em;
+    width: 32px;
+    height: 32px;
+    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    overflow: hidden;
+    line-height: 0;
+
+    &.animated::before {
+      display: none;
+    }
+
+  }
+
+  &:hover .animated.avatar {
+    canvas {
+      display: none;
+    }
+    img {
+      visibility: visible;
+    }
+  }
+
+  .notification-usercard {
+    margin-left: 0.8em;
+  }
+}