1 files changed, 127 insertions, 121 deletions

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