[Glitch] Refactor styles to use logical properties for positioning (#2156)

Port babd86e594 and 45848d6547 to glitch-soc

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>

app/javascript/flavours/glitch/styles/components/accounts.scss

@@ -31,7 +31,7 @@
     padding: 0;
 
     & > .account__avatar-wrapper {
-      margin: 0 8px 0 0;
+      margin-inline-end: 8px;
     }
 
     & > .display-name {
@@ -57,8 +57,8 @@
 
 .account__avatar-wrapper {
   float: left;
-  margin-left: 12px;
-  margin-right: 12px;
+  margin-inline-start: 12px;
+  margin-inline-end: 12px;
 }
 
 .account__avatar {
@@ -74,7 +74,7 @@
   &-inline {
     display: inline-block;
     vertical-align: middle;
-    margin-right: 5px;
+    margin-inline-end: 5px;
   }
 
   &-composite {
@@ -95,7 +95,7 @@
       display: block;
       position: absolute;
       top: 50%;
-      left: 50%;
+      inset-inline-start: 50%;
       transform: translate(-50%, -50%);
       color: $primary-text-color;
       text-shadow: 1px 1px 2px $base-shadow-color;
@@ -128,7 +128,7 @@
 
     position: absolute;
     bottom: 0;
-    right: 0;
+    inset-inline-end: 0;
     z-index: 1;
 
     img {
@@ -198,12 +198,12 @@
   text-decoration: none;
   overflow: hidden;
   flex: 0 1 100%;
-  border-left: 1px solid lighten($ui-base-color, 8%);
+  border-inline-start: 1px solid lighten($ui-base-color, 8%);
   padding: 10px 0;
   border-bottom: 4px solid transparent;
 
   &:first-child {
-    border-left: 0;
+    border-inline-start: 0;
   }
 
   &.active {
@@ -247,12 +247,12 @@
 
 .account-authorize__avatar {
   float: left;
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 
 .notification__report {
   padding: 8px 10px;
-  padding-left: 68px;
+  padding-inline-start: 68px;
   position: relative;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
   min-height: 54px;
@@ -272,14 +272,15 @@
 
   &__avatar {
     position: absolute;
-    left: 10px;
+    inset-inline-start: 10px;
     top: 10px;
   }
 }
 
 .notification__message {
-  margin-left: 42px;
-  padding: 8px 0 0 26px;
+  margin-inline-start: 42px;
+  padding-top:8px;
+  padding-inline-start: 26px;
   cursor: default;
   color: $darker-text-color;
   font-size: 15px;
@@ -346,7 +347,7 @@
   &__icons {
     position: absolute;
     top: 50%;
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translate(-50%, -50%);
     font-size: 24px;
   }
@@ -387,7 +388,7 @@
         content: '';
         position: absolute;
         bottom: 0;
-        left: 50%;
+        inset-inline-start: 50%;
         width: 0;
         height: 0;
         transform: translateX(-50%);
@@ -431,7 +432,7 @@
 
   &__message {
     position: relative;
-    margin-left: 58px;
+    margin-inline-start: 58px;
     color: $dark-text-color;
     padding: 8px 0;
     padding-top: 0;
@@ -446,7 +447,7 @@
   }
 
   &__icon-wrapper {
-    left: -26px;
+    inset-inline-start: -26px;
     position: absolute;
   }
 
@@ -500,7 +501,7 @@
   &__info {
     position: absolute;
     top: 10px;
-    left: 10px;
+    inset-inline-start: 10px;
   }
 
   &__image {
@@ -544,7 +545,7 @@
     margin-top: -81px;
     height: 130px;
     overflow: hidden;
-    margin-left: -2px; // aligns the pfp with content below
+    margin-inline-start: -2px; // aligns the pfp with content below
 
     .account-role {
       margin: 0 2px;
@@ -635,8 +636,8 @@
       color: $darker-text-color;
 
       .columns-area--mobile & {
-        padding-left: 20px;
-        padding-right: 20px;
+        padding-inline-start: 20px;
+        padding-inline-end: 20px;
       }
     }