1 files changed, 75 insertions, 124 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index a46fb94b2..2b52051e4 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -67,7 +67,8 @@
     margin: -3px 0 0;
   }
 
-  p, pre, blockquote {
+  p,
+  pre {
     margin-bottom: 20px;
     white-space: pre-wrap;
     unicode-bidi: plaintext;
@@ -77,79 +78,6 @@
     }
   }
 
-  .status__content__text,
-  .e-content {
-    overflow: hidden;
-
-    & > ul,
-    & > ol {
-      margin-bottom: 20px;
-    }
-
-    h1, h2, h3, h4, h5 {
-      margin-top: 20px;
-      margin-bottom: 20px;
-    }
-
-    h1, h2 {
-      font-weight: 700;
-      font-size: 1.2em;
-    }
-
-    h2 {
-      font-size: 1.1em;
-    }
-
-    h3, h4, h5 {
-      font-weight: 500;
-    }
-
-    blockquote {
-      padding-left: 10px;
-      border-left: 3px solid $darker-text-color;
-      color: $darker-text-color;
-      white-space: normal;
-
-      p:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    b, strong {
-      font-weight: 700;
-    }
-
-    em, i {
-      font-style: italic;
-    }
-
-    sub {
-      font-size: smaller;
-      vertical-align: sub;
-    }
-
-    sup {
-      font-size: smaller;
-      vertical-align: super;
-    }
-
-    ul, ol {
-      p {
-        margin: 0;
-      }
-    }
-
-    ul {
-      margin-left: 1em;
-      list-style-type: disc;
-    }
-
-    ol {
-      list-style-type: decimal;
-      list-style-position: inside;
-    }
-  }
-
   a {
     color: $secondary-text-color;
     text-decoration: none;
@@ -236,9 +164,10 @@
 
   .status__content__spoiler-icon {
     display: inline-block;
-    margin: 0 0 0 5px;
-    border-left: 1px solid currentColor;
-    padding: 0 0 0 4px;
+    margin-inline-start: 5px;
+    border-inline-start: 1px solid currentColor;
+    padding: 0;
+    padding-inline-start: 4px;
     font-size: 16px;
     vertical-align: -2px;
   }
@@ -267,7 +196,7 @@
 }
 
 .status__prepend-icon-wrapper {
-  left: -26px;
+  inset-inline-start: -26px;
   position: absolute;
 }
 
@@ -313,12 +242,17 @@
   @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
     // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
     // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
-    padding-right: 28px; // 12px + 16px
+    padding-inline-end: 28px; // 12px + 16px
   }
 
   @keyframes fade {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
   }
 
   opacity: 1;
@@ -377,13 +311,18 @@
     &.has-background::before {
       display: block;
       position: absolute;
-      left: 0;
-      right: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
       top: 0;
       bottom: 0;
-      background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8));
+      background-image: linear-gradient(
+        to bottom,
+        rgba($base-shadow-color, 0.75),
+        rgba($base-shadow-color, 0.65) 24px,
+        rgba($base-shadow-color, 0.8)
+      );
       pointer-events: none;
-      content: "";
+      content: '';
     }
 
     .display-name:hover .display-name__html {
@@ -396,26 +335,37 @@
       text-overflow: ellipsis;
       padding-top: 0;
 
-      &:after {
-        content: "";
+      &::after {
+        content: '';
         position: absolute;
         top: 0;
         bottom: 0;
-        left: 0;
-        right: 0;
-        background: linear-gradient(rgba($ui-base-color, 0), rgba($ui-base-color, 1));
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        background: linear-gradient(
+          rgba($ui-base-color, 0),
+          rgba($ui-base-color, 1)
+        );
         pointer-events: none;
       }
-      
+
       a:hover {
         text-decoration: underline;
       }
     }
-    &:focus > .status__content:after {
-      background: linear-gradient(rgba(lighten($ui-base-color, 4%), 0), rgba(lighten($ui-base-color, 4%), 1));
+
+    &:focus > .status__content::after {
+      background: linear-gradient(
+        rgba(lighten($ui-base-color, 4%), 0),
+        rgba(lighten($ui-base-color, 4%), 1)
+      );
     }
-    &.status-direct > .status__content:after {
-      background: linear-gradient(rgba(lighten($ui-base-color, 8%), 0), rgba(lighten($ui-base-color, 8%), 1));
+
+    &.status-direct > .status__content::after {
+      background: linear-gradient(
+        rgba(lighten($ui-base-color, 8%), 0),
+        rgba(lighten($ui-base-color, 8%), 1)
+      );
     }
 
     .notification__message {
@@ -428,7 +378,7 @@
   }
 
   .notification__message {
-    margin: -10px 0px 10px 0;
+    margin: -10px 0px 10px;
 
 	a:hover {
 	  text-decoration: underline;
@@ -450,7 +400,7 @@
   display: inline-block;
   color: $dark-text-color;
   font-size: 14px;
-  text-align: right;
+  text-align: end;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -491,8 +441,8 @@
   .status__visibility-icon,
   .status__reply-icon,
   .text-icon {
-    padding-left: 2px;
-    padding-right: 2px;
+    padding-inline-start: 2px;
+    padding-inline-end: 2px;
   }
 
   .status__collapse-button.active > .fa-angle-double-up {
@@ -558,7 +508,7 @@
 .status__prepend {
   margin-top: -2px;
   margin-bottom: 8px;
-  margin-left: 58px;
+  margin-inline-start: 58px;
   color: $dark-text-color;
   font-size: 14px;
   position: relative;
@@ -585,10 +535,10 @@
 }
 
 .status__action-bar-button {
-  margin-right: 18px;
+  margin-inline-end: 18px;
 
   &.icon-button--with-counter {
-    margin-right: 14px;
+    margin-inline-end: 14px;
   }
 }
 
@@ -669,7 +619,7 @@
   font-weight: 500;
   font-size: 12px;
   line-height: 17px;
-  margin-left: 6px;
+  margin-inline-start: 6px;
 }
 
 .status__display-name,
@@ -740,12 +690,12 @@ a.status__display-name,
 
 .detailed-status__display-avatar {
   float: left;
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 
 .status__avatar {
   flex: none;
-  margin: 0 10px 0 0;
+  margin-inline-end: 10px;
   height: 48px;
   width: 48px;
 }
@@ -798,9 +748,9 @@ a.status__display-name,
 
   &__actions {
     bottom: 0;
-    left: 0;
+    inset-inline-start: 0;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     top: 0;
     display: flex;
     justify-content: center;
@@ -840,7 +790,8 @@ a.status__display-name,
       bottom: -1px;
     }
 
-    a .fa, a:hover .fa {
+    a .fa,
+    a:hover .fa {
       color: inherit;
     }
   }
@@ -858,9 +809,9 @@ a.status-card {
   cursor: zoom-in;
   display: block;
   text-decoration: none;
-    width: 100%;
-    height: auto;
-    margin: 0;
+  width: 100%;
+  height: auto;
+  margin: 0;
 }
 
 .status-card-video {
@@ -884,7 +835,8 @@ a.status-card {
 .status-card__content {
   flex: 1 1 auto;
   overflow: hidden;
-  padding: 14px 14px 14px 8px;
+  padding: 14px;
+  padding-inline-start: 8px;
 }
 
 .status-card__description {
@@ -910,7 +862,7 @@ a.status-card {
     position: absolute;
     transform-origin: 50% 50%;
     top: 50%;
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translate(-50%, -50%);
   }
 }
@@ -977,7 +929,7 @@ a.status-card.compact:hover {
   object-fit: fill;
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: 0;
   background: $base-overlay-background;
 
@@ -999,7 +951,7 @@ a.status-card.compact:hover {
     color: $dark-text-color;
     padding: 8px 18px;
     cursor: default;
-    border-right: 1px solid lighten($ui-base-color, 8%);
+    border-inline-end: 1px solid lighten($ui-base-color, 8%);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -1014,7 +966,7 @@ a.status-card.compact:hover {
   &__list {
     list-style: none;
     padding: 4px 0;
-    padding-left: 8px;
+    padding-inline-start: 8px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -1071,14 +1023,13 @@ a.status-card.compact:hover {
 
   &.unread {
     &::before {
-      content: "";
+      content: '';
       position: absolute;
       top: 0;
-      left: 0;
-      pointer-events: 0;
+      inset-inline-start: 0;
       width: 100%;
       height: 100%;
-      border-left: 4px solid $highlight-text-color;
+      border-inline-start: 4px solid $highlight-text-color;
       pointer-events: none;
     }
   }
@@ -1087,12 +1038,12 @@ a.status-card.compact:hover {
 .picture-in-picture {
   position: fixed;
   bottom: 20px;
-  right: 20px;
+  inset-inline-end: 20px;
   width: 300px;
 
   &.left {
-    right: unset;
-    left: 20px;
+    inset-inline-end: unset;
+    inset-inline-start: 20px;
   }
 
   &__footer {
@@ -1118,7 +1069,7 @@ a.status-card.compact:hover {
     }
 
     .account__avatar {
-      margin-right: 10px;
+      margin-inline-end: 10px;
     }
 
     .display-name {