Clean up CSS differences with upstream (#3283)

app/javascript/flavours/glitch/styles/_mixins.scss

@@ -11,7 +11,7 @@
   }
 }
 
-@mixin search-input() {
+@mixin search-input {
   outline: 0;
   box-sizing: border-box;
   width: 100%;
@@ -26,7 +26,7 @@
   margin: 0;
 }
 
-@mixin search-popout() {
+@mixin search-popout {
   background: $simple-background-color;
   border-radius: 4px;
   padding: 10px 14px;

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

@@ -70,7 +70,7 @@
       margin-inline-start: 15px;
       text-align: start;
 
-      i[data-hidden] {
+      svg[data-hidden] {
         display: none;
       }
 
@@ -138,7 +138,7 @@
 
   .newer {
     float: right;
-    padding-inline-start: 0;
+    padding-inline-end: 0;
   }
 
   .disabled {
@@ -204,6 +204,7 @@
 }
 
 .information-badge,
+.simple_form .overridden,
 .simple_form .recommended,
 .simple_form .not_recommended {
   background-color: color.change($ui-secondary-color, $alpha: 0.1);

app/javascript/flavours/glitch/styles/basics.scss

@@ -168,6 +168,10 @@ a {
 button {
   font-family: inherit;
   cursor: pointer;
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
 }
 
 .app-holder {

app/javascript/flavours/glitch/styles/forms.scss

@@ -700,9 +700,10 @@ code {
       font-family: inherit;
       pointer-events: none;
       cursor: default;
-      max-width: 140px;
+      max-width: 50%;
       white-space: nowrap;
       overflow: hidden;
+      text-overflow: ellipsis;
 
       &::after {
         content: '';
@@ -831,7 +832,7 @@ code {
     }
   }
 
-  @media screen and (width <= 740px) and (width >= 441px) {
+  @media screen and (440px < width <= 740px) {
     margin-top: 40px;
   }
 

app/javascript/flavours/glitch/styles/rtl.scss

@@ -41,27 +41,11 @@ body.rtl {
     float: left;
   }
 
-  .activity-stream .status.light {
-    padding-left: 10px;
-    padding-right: 68px;
-  }
-
-  .status__info .status__display-name,
-  .activity-stream .status.light .status__display-name {
+  .status__info .status__display-name {
     padding-left: 25px;
     padding-right: 0;
   }
 
-  .activity-stream .pre-header {
-    padding-right: 68px;
-    padding-left: 0;
-  }
-
-  .activity-stream .pre-header .pre-header__icon {
-    left: auto;
-    right: 42px;
-  }
-
   .account__header__tabs__buttons > .icon-button {
     margin-right: 0;
     margin-left: 8px;
@@ -93,6 +77,10 @@ body.rtl {
     direction: rtl;
   }
 
+  .react-swipeable-view-container > * {
+    direction: rtl;
+  }
+
   .column-back-button__icon {
     transform: scale(-1, 1);
   }