Merge remote-tracking branch 'upstream/master' into merge-glitch

2 files changed, 23 insertions, 3 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 306e62342..04266c497 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -464,6 +464,7 @@
   padding: 4px 0;
   border-radius: 4px;
   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+  z-index: 9999;
 
   ul {
     list-style: none;
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index a65581136..ba75e3ffe 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -275,7 +275,7 @@
     outline: 0;
     background: lighten($ui-base-color, 4%);
 
-    &.status.status-direct:not(.read) {
+    &.status.status-direct {
       background: lighten($ui-base-color, 12%);
 
       &.muted {
@@ -316,7 +316,7 @@
     margin-top: 8px;
   }
 
-  &.status-direct:not(.read) {
+  &.status-direct {
     background: lighten($ui-base-color, 8%);
     border-bottom-color: lighten($ui-base-color, 12%);
   }
@@ -399,7 +399,7 @@
     &:focus > .status__content:after {
       background: linear-gradient(rgba(lighten($ui-base-color, 4%), 0), rgba(lighten($ui-base-color, 4%), 1));
     }
-    &.status-direct:not(.read)> .status__content:after {
+    &.status-direct > .status__content:after {
       background: linear-gradient(rgba(lighten($ui-base-color, 8%), 0), rgba(lighten($ui-base-color, 8%), 1));
     }
 
@@ -1054,3 +1054,22 @@ a.status-card.compact:hover {
     text-decoration: underline;
   }
 }
+
+.notification,
+.status {
+  position: relative;
+
+  &.unread {
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: 0;
+      width: 100%;
+      height: 100%;
+      border-left: 2px solid $highlight-text-color;
+      pointer-events: none;
+    }
+  }
+}