1 files changed, 131 insertions, 93 deletions

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 3b7403e4..65ab7f5e 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -46,129 +46,167 @@
     font-size: 0.9em;
     text-align: center;
     line-height: 1.3em;
-    padding: 1px;
   }
 
-  .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;
-    display: flex;
-    border-bottom: 1px solid;
-    border-bottom-color: inherit;
+  .unseen {
+    border-left: 4px solid $fallback--cRed;
+    border-left: 4px solid var(--cRed, $fallback--cRed);
+    padding-left: 0;
+  }
+}
 
-    .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%)
+.notification {
+  box-sizing: border-box;
+  display: flex;
+  border-bottom: 1px solid;
+  border-bottom-color: inherit;
+  padding-left: 4px;
+
+  .avatar-compact {
+    width: 32px;
+    height: 32px;
+    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    overflow: hidden;
+    line-height: 0;
+
+    &.animated::before {
+      display: none;
     }
+  }
 
-    time {
-      white-space: nowrap;
+  &:hover .animated.avatar {
+    canvas {
+      display: none;
     }
+    img {
+      visibility: visible;
+    }
+  }
 
-    .text {
-      min-width: 0px;
-      word-wrap: break-word;
-      line-height:18px;
-      position: relative;
-      overflow: hidden;
+  .notification-usercard {
+    margin: 0;
+  }
 
-      .icon-retweet.lit {
-        color: $fallback--cGreen;
-        color: var(--cGreen, $fallback--cGreen);
+  .non-mention {
+    display: flex;
+    flex: 1;
+    flex-wrap: nowrap;
+    padding: 0.6em;
+    min-width: 0;
+    .avatar-container {
+      width: 32px;
+      height: 32px;
+    }
+    .status-el {
+      .status {
+        padding: 0.25em 0;
+        color: $fallback--faint;
+        color: var($fallback--faint, --faint);
       }
-
-      .icon-user-plus.lit {
-        color: $fallback--cBlue;
-        color: var(--cBlue, $fallback--cBlue);
+      padding: 0;
+      .status-content.media-body {
+        margin: 0;
       }
+    }
+  }
 
-      .icon-reply.lit {
-        color: $fallback--cBlue;
-        color: var(--cBlue, $fallback--cBlue);
-      }
+  .follow-text {
+    padding: 0.5em 0;
+  }
 
-      .icon-star.lit {
-        color: orange;
-        color: $fallback--cOrange;
-        color: var(--cOrange, $fallback--cOrange);
-      }
+  .status-el {
+    flex: 1;
+  }
 
-      .status-content {
-        margin: 0;
-        max-height: 300px;
-      }
+  time {
+    white-space: nowrap;
+  }
 
-      h1 {
-        word-break: break-all;
-        margin: 0 0 0.3em;
-        padding: 0;
-        font-size: 1em;
-        line-height:20px;
-        small {
-          font-weight: lighter;
-        }
-      }
+  .notification-right {
+    flex: 1;
+    padding-left: 0.8em;
+    min-width: 0;
+  }
 
-      padding: 0.3em 0.8em 0.5em;
-      p {
-        margin: 0;
-        margin-top: 0;
-        margin-bottom: 0.3em;
-      }
+  .notification-details {
+    min-width: 0px;
+    word-wrap: break-word;
+    line-height:18px;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    flex: 1 1 0;
+    display: flex;
+    flex-wrap: nowrap;
+
+    .name-and-action {
+      flex: 1;
     }
 
-    .avatar {
-      margin-top: 0.3em;
-      width: 32px;
-      height: 32px;
-      border-radius: $fallback--avatarAltRadius;
-      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-      overflow: hidden;
-      line-height: 0;
+    .username {
+      font-weight: bolder;
+    }
+    .timeago {
+      float: right;
+      font-size: 12px;
+    }
 
-      &.animated::before {
-        display: none;
-      }
+    .icon-retweet.lit {
+      color: $fallback--cGreen;
+      color: var(--cGreen, $fallback--cGreen);
+    }
 
+    .icon-user-plus.lit {
+      color: $fallback--cBlue;
+      color: var(--cBlue, $fallback--cBlue);
     }
 
-    &:hover .animated.avatar {
-      canvas {
-        display: none;
-      }
-      img {
-        visibility: visible;
-      }
+    .icon-reply.lit {
+      color: $fallback--cBlue;
+      color: var(--cBlue, $fallback--cBlue);
     }
 
-    &:last-child {
-      border-bottom: none;
+    .icon-star.lit {
+      color: orange;
+      color: $fallback--cOrange;
+      color: var(--cOrange, $fallback--cOrange);
     }
-  }
 
-  .notification-content {
-    max-height: 12em;
-    overflow-y: hidden;
-    //text-overflow: ellipsis;
+    .status-content {
+      margin: 0;
+      max-height: 300px;
+    }
 
-    img {
-        object-fit: contain;
+    h1 {
+      word-break: break-all;
+      margin: 0 0 0.3em;
+      padding: 0;
+      font-size: 1em;
+      line-height:20px;
+      small {
+        font-weight: lighter;
+      }
+    }
+
+    p {
+      margin: 0;
+      margin-top: 0;
+      margin-bottom: 0.3em;
     }
   }
 
-  .notification-gradient {
-    position: absolute;
-    width: 100%;
-    height: 4em;
-    margin-top:8em;
+  &:last-child {
+    border-bottom: none;
   }
+}
 
-  .unseen {
-    border-left: 4px solid $fallback--cRed;
-    border-left: 4px solid var(--cRed, $fallback--cRed);
-    padding-left: 6px;
+.notification-content {
+  max-height: 12em;
+  overflow-y: hidden;
+  //text-overflow: ellipsis;
+
+  img {
+      object-fit: contain;
   }
 }