Merge branch 'glitch' into main

3 files changed, 79 insertions, 22 deletions

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index be554a502..9c4e6d08f 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -794,6 +794,10 @@
   cursor: pointer;
 }
 
+.status__content {
+  clear: both;
+}
+
 .status__content,
 .reply-indicator__content {
   position: relative;
@@ -1067,16 +1071,15 @@
 }
 
 .status__relative-time,
-.status__visibility-icon,
 .notification__relative_time {
   color: $dark-text-color;
   float: right;
   font-size: 14px;
+  padding-bottom: 1px;
 }
 
 .status__visibility-icon {
-  margin-left: 4px;
-  margin-right: 4px;
+  padding: 0 4px;
 }
 
 .status__display-name {
@@ -1717,6 +1720,20 @@ a.account__display-name {
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;  /* IE 10+ */
+
+  * {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none;  /* IE 10+ */
+  }
+
+  &::-webkit-scrollbar,
+  *::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    background: transparent; /* Chrome/Safari/Webkit */
+  }
 
   .image-loader__preview-canvas {
     max-width: $media-modal-media-max-width;
@@ -4603,6 +4620,21 @@ a.status-card.compact:hover {
   z-index: 100;
 }
 
+.media-modal__zoom-button {
+  position: absolute;
+  right: 64px;
+  top: 8px;
+  z-index: 100;
+  pointer-events: auto;
+  transition: opacity 0.3s linear;
+  will-change: opacity;
+}
+
+.media-modal__zoom-button--hidden {
+  pointer-events: none;
+  opacity: 0;
+}
+
 .onboarding-modal,
 .error-modal,
 .embed-modal {
@@ -5384,7 +5416,6 @@ a.status-card.compact:hover {
   }
 
   .video-player__controls {
-    padding: 0 15px;
     padding-top: 10px;
     background: transparent;
   }
@@ -5503,7 +5534,8 @@ a.status-card.compact:hover {
   &__buttons-bar {
     display: flex;
     justify-content: space-between;
-    padding-bottom: 10px;
+    padding-bottom: 8px;
+    margin: 0 -5px;
 
     .video-player__download__icon {
       color: inherit;
@@ -5520,22 +5552,13 @@ a.status-card.compact:hover {
     overflow: hidden;
     text-overflow: ellipsis;
 
-    &.left {
-      button {
-        padding-left: 0;
-      }
-    }
-
-    &.right {
-      button {
-        padding-right: 0;
-      }
-    }
+    .player-button {
+      display: inline-block;
+      outline: 0;
 
-    button {
       flex: 0 0 auto;
       background: transparent;
-      padding: 2px 10px;
+      padding: 5px;
       font-size: 16px;
       border: 0;
       color: rgba($white, 0.75);
@@ -5553,6 +5576,7 @@ a.status-card.compact:hover {
     flex: 0 1 auto;
     overflow: hidden;
     text-overflow: ellipsis;
+    margin: 0 5px;
   }
 
   &__time-sep,
@@ -5672,7 +5696,7 @@ a.status-card.compact:hover {
       display: block;
       position: absolute;
       height: 4px;
-      top: 10px;
+      top: 14px;
     }
 
     &__progress,
@@ -5681,7 +5705,7 @@ a.status-card.compact:hover {
       position: absolute;
       height: 4px;
       border-radius: 4px;
-      top: 10px;
+      top: 14px;
       background: lighten($ui-highlight-color, 8%);
     }
 
@@ -5696,7 +5720,7 @@ a.status-card.compact:hover {
       border-radius: 50%;
       width: 12px;
       height: 12px;
-      top: 6px;
+      top: 10px;
       margin-left: -6px;
       background: lighten($ui-highlight-color, 8%);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
@@ -5720,7 +5744,7 @@ a.status-card.compact:hover {
   &.detailed,
   &.fullscreen {
     .video-player__buttons {
-      button {
+      .player-button {
         padding-top: 10px;
         padding-bottom: 10px;
       }
@@ -7180,6 +7204,13 @@ noscript {
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  position: relative;
+
+  &__close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
 
   h2 {
     font-size: 16px;
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index 8602c3dde..f463419c8 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -36,6 +36,8 @@ $dark-text-color: $ui-base-lighter-color !default;
 $secondary-text-color: $ui-secondary-color !default;
 $highlight-text-color: $ui-highlight-color !default;
 $action-button-color: $ui-base-lighter-color !default;
+$passive-text-color: $gold-star !default;
+$active-passive-text-color: $success-green !default;
 // For texts on inverted backgrounds
 $inverted-text-color: $ui-base-color !default;
 $lighter-text-color: $ui-base-lighter-color !default;
diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss
index 5b97d1ec4..5ee4d104b 100644
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -2,6 +2,10 @@
   margin-bottom: 10px;
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 
+  &:last-child {
+    margin-bottom: 0;
+  }
+
   &__img {
     width: 100%;
     position: relative;
@@ -442,6 +446,26 @@
     vertical-align: initial !important;
   }
 
+  &__interrelationships {
+    width: 21px;
+  }
+
+  .fa {
+    font-size: 16px;
+
+    &.active {
+      color: $highlight-text-color;
+    }
+
+    &.passive {
+      color: $passive-text-color;
+    }
+
+    &.active.passive {
+      color: $active-passive-text-color;
+    }
+  }
+
   @media screen and (max-width: $no-gap-breakpoint) {
     tbody td.optional {
       display: none;