Merge commit '9d664f87a04b6a5157ddbe60ee33b5b7a960198e' into glitch-soc/merge-upstream

app/javascript/styles/mailer.scss

@@ -168,6 +168,7 @@ table + p {
 
 // Utility classes
 .email-w-full {
+  table-layout: fixed;
   width: 100%;
 }
 
@@ -365,6 +366,7 @@ table + p {
 
 .email-header-card-banner-td {
   border-radius: 12px 12px 0 0;
+  width: 236px;
   height: 80px;
   background-color: #f3f2f5 !important;
   background-position: center !important;
@@ -522,6 +524,7 @@ table + p {
   height: 40px;
   text-align: center;
   mso-padding-alt: 0 35px;
+  word-break: normal;
 }
 
 .email-btn-a {
@@ -587,7 +590,10 @@ table + p {
   p {
     font-size: 14px;
     line-height: 20px;
+    margin-bottom: 20px;
     color: #17063b;
+    white-space: pre-wrap;
+    unicode-bidi: plaintext;
   }
 
   a {
@@ -598,6 +604,21 @@ table + p {
       color: #563acc !important;
     }
   }
+
+  .invisible {
+    font-size: 0;
+    line-height: 0;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    position: absolute;
+  }
+
+  .ellipsis {
+    &::after {
+      content: '…';
+    }
+  }
 }
 
 .email-status-media {

app/javascript/styles/mastodon/components.scss

@@ -81,6 +81,18 @@
     outline: $ui-button-icon-focus-outline;
   }
 
+  &--dangerous {
+    background-color: var(--error-background-color);
+    color: var(--on-error-color);
+
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: var(--error-active-background-color);
+      transition: none;
+    }
+  }
+
   &--destructive {
     &:active,
     &:focus,
@@ -230,6 +242,7 @@
   flex: 0 0 auto;
 
   a {
+    display: flex;
     color: inherit;
     text-decoration: none;
   }
@@ -640,19 +653,39 @@ body > [data-popper-placement] {
   }
 
   &__uploads {
-    display: flex;
-    gap: 8px;
     padding: 0 12px;
-    flex-wrap: wrap;
-    align-self: stretch;
-    align-items: flex-start;
-    align-content: flex-start;
-    justify-content: center;
+    aspect-ratio: 3/2;
+  }
+
+  .media-gallery {
+    gap: 8px;
   }
 
   &__upload {
-    flex: 1 1 0;
-    min-width: calc(50% - 8px);
+    position: relative;
+    cursor: grab;
+
+    &.dragging {
+      opacity: 0;
+    }
+
+    &.overlay {
+      height: 100%;
+      border-radius: 8px;
+      pointer-events: none;
+    }
+
+    &__drag-handle {
+      position: absolute;
+      top: 50%;
+      inset-inline-start: 0;
+      transform: translateY(-50%);
+      color: $white;
+      background: transparent;
+      border: 0;
+      padding: 8px 3px;
+      cursor: grab;
+    }
 
     &__actions {
       display: flex;
@@ -673,8 +706,7 @@ body > [data-popper-placement] {
 
     &__thumbnail {
       width: 100%;
-      height: 144px;
-      border-radius: 6px;
+      height: 100%;
       background-position: center;
       background-size: cover;
       background-repeat: no-repeat;
@@ -3490,12 +3522,14 @@ $ui-header-logo-wordmark-width: 99px;
   margin-top: 10px;
   margin-bottom: 10px;
   height: calc(100% - 20px);
-  overflow-y: auto;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
 
-  & > a {
-    flex: 0 0 auto;
+  &__menu {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
   }
 
   .logo {
@@ -3506,6 +3540,36 @@ $ui-header-logo-wordmark-width: 99px;
   &__logo {
     margin-bottom: 12px;
   }
+
+  @media screen and (height <= 710px) {
+    &__portal {
+      display: none;
+    }
+  }
+
+  @media screen and (height <= 765px) {
+    &__portal .trends__item:nth-child(n + 3) {
+      display: none;
+    }
+  }
+
+  @media screen and (height <= 820px) {
+    &__portal .trends__item:nth-child(n + 4) {
+      display: none;
+    }
+  }
+
+  @media screen and (height <= 920px) {
+    .column-link.column-link--optional {
+      display: none;
+    }
+  }
+
+  @media screen and (height <= 1040px) {
+    .list-panel {
+      display: none;
+    }
+  }
 }
 
 .navigation-panel,
@@ -3869,22 +3933,6 @@ $ui-header-logo-wordmark-width: 99px;
       }
     }
 
-    @media screen and (height <= 810px) {
-      .trends__item:nth-of-type(3) {
-        display: none;
-      }
-    }
-
-    @media screen and (height <= 720px) {
-      .trends__item:nth-of-type(2) {
-        display: none;
-      }
-    }
-
-    @media screen and (height <= 670px) {
-      display: none;
-    }
-
     .trends__item {
       border-bottom: 0;
       padding: 10px;
@@ -5793,6 +5841,7 @@ a.status-card {
       .icon {
         width: 24px;
         height: 24px;
+        filter: var(--overlay-icon-shadow);
       }
 
       &:hover,
@@ -5887,6 +5936,10 @@ a.status-card {
     .icon-button {
       color: $white;
 
+      .icon {
+        filter: var(--overlay-icon-shadow);
+      }
+
       &:hover,
       &:focus,
       &:active {
@@ -5945,6 +5998,7 @@ a.status-card {
 .media-modal__page-dot {
   flex: 0 0 auto;
   background-color: $white;
+  filter: var(--overlay-icon-shadow);
   opacity: 0.4;
   height: 6px;
   width: 6px;
@@ -6221,6 +6275,14 @@ a.status-card {
       display: flex;
       gap: 16px;
       align-items: center;
+
+      strong {
+        font-weight: 700;
+      }
+    }
+
+    &--deemphasized {
+      color: $secondary-text-color;
     }
 
     &__icon {
@@ -6928,14 +6990,14 @@ a.status-card {
   inset-inline-end: 8px;
   display: flex;
   gap: 2px;
+  pointer-events: none;
 }
 
-.media-gallery__alt__label,
-.media-gallery__gifv__label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.media-gallery__alt__label {
+  display: block;
+  text-align: center;
   color: $white;
+  border: 0;
   background: rgba($black, 0.65);
   backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
   padding: 3px 8px;
@@ -6943,8 +7005,41 @@ a.status-card {
   font-size: 12px;
   font-weight: 700;
   z-index: 1;
-  pointer-events: none;
   line-height: 20px;
+  cursor: pointer;
+  pointer-events: auto;
+
+  &--non-interactive {
+    pointer-events: none;
+  }
+}
+
+.media-gallery__alt__popover {
+  background: rgba($black, 0.65);
+  backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+  border-radius: 4px;
+  box-shadow: var(--dropdown-shadow);
+  padding: 16px;
+  min-width: 16em;
+  min-height: 2em;
+  max-width: 22em;
+  max-height: 30em;
+  overflow-y: auto;
+
+  h4 {
+    font-size: 15px;
+    line-height: 20px;
+    font-weight: 500;
+    color: $white;
+    margin-bottom: 8px;
+  }
+
+  p {
+    font-size: 15px;
+    line-height: 20px;
+    color: rgba($white, 0.85);
+    white-space: pre-line;
+  }
 }
 
 .attachment-list {
@@ -7017,35 +7112,35 @@ a.status-card {
   width: 100%;
   min-height: 64px;
   display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-rows: 50% 50%;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
   gap: 2px;
 
   &--layout-2 {
-    .media-gallery__item:nth-child(1) {
+    & > .media-gallery__item:nth-child(1) {
       border-end-end-radius: 0;
       border-start-end-radius: 0;
     }
 
-    .media-gallery__item:nth-child(2) {
+    & > .media-gallery__item:nth-child(2) {
       border-start-start-radius: 0;
       border-end-start-radius: 0;
     }
   }
 
   &--layout-3 {
-    .media-gallery__item:nth-child(1) {
+    & > .media-gallery__item:nth-child(1) {
       border-end-end-radius: 0;
       border-start-end-radius: 0;
     }
 
-    .media-gallery__item:nth-child(2) {
+    & > .media-gallery__item:nth-child(2) {
       border-start-start-radius: 0;
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
 
-    .media-gallery__item:nth-child(3) {
+    & > .media-gallery__item:nth-child(3) {
       border-start-start-radius: 0;
       border-end-start-radius: 0;
       border-start-end-radius: 0;
@@ -7053,26 +7148,26 @@ a.status-card {
   }
 
   &--layout-4 {
-    .media-gallery__item:nth-child(1) {
+    & > .media-gallery__item:nth-child(1) {
       border-end-end-radius: 0;
       border-start-end-radius: 0;
       border-end-start-radius: 0;
     }
 
-    .media-gallery__item:nth-child(2) {
+    & > .media-gallery__item:nth-child(2) {
       border-start-start-radius: 0;
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
 
-    .media-gallery__item:nth-child(3) {
+    & > .media-gallery__item:nth-child(3) {
       border-start-start-radius: 0;
       border-start-end-radius: 0;
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
 
-    .media-gallery__item:nth-child(4) {
+    & > .media-gallery__item:nth-child(4) {
       border-start-start-radius: 0;
       border-end-start-radius: 0;
       border-start-end-radius: 0;
@@ -7087,6 +7182,9 @@ a.status-card {
   position: relative;
   border-radius: 8px;
   overflow: hidden;
+  outline: 1px solid var(--media-outline-color);
+  outline-offset: -1px;
+  z-index: 1;
 
   &--tall {
     grid-row: span 2;
@@ -7095,15 +7193,44 @@ a.status-card {
   &--wide {
     grid-column: span 2;
   }
+
+  &--square {
+    aspect-ratio: 1;
+  }
+
+  &__overlay {
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    padding: 8px;
+    z-index: 1;
+
+    &--corner {
+      align-items: flex-start;
+      justify-content: flex-end;
+    }
+
+    .icon {
+      color: $white;
+      filter: var(--overlay-icon-shadow);
+    }
+  }
 }
 
 .media-gallery__item-thumbnail {
-  cursor: zoom-in;
+  cursor: pointer;
   display: block;
   text-decoration: none;
   color: $secondary-text-color;
   position: relative;
-  z-index: 1;
+  z-index: -1;
 
   &,
   img {
@@ -7123,7 +7250,7 @@ a.status-card {
   position: absolute;
   top: 0;
   inset-inline-start: 0;
-  z-index: 0;
+  z-index: -2;
   background: $base-overlay-background;
 
   &--hidden {
@@ -7136,22 +7263,16 @@ a.status-card {
   overflow: hidden;
   position: relative;
   width: 100%;
+  z-index: -1;
 }
 
 .media-gallery__item-gifv-thumbnail {
-  cursor: zoom-in;
+  cursor: pointer;
   height: 100%;
   object-fit: cover;
   width: 100%;
 }
 
-.media-gallery__item-thumbnail-label {
-  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-  clip: rect(1px, 1px, 1px, 1px);
-  overflow: hidden;
-  position: absolute;
-}
-
 /* End Media Gallery */
 
 .detailed,
@@ -7174,6 +7295,8 @@ a.status-card {
   border-radius: 8px;
   padding-bottom: 44px;
   width: 100%;
+  outline: 1px solid var(--media-outline-color);
+  outline-offset: -1px;
 
   &.editable {
     border-radius: 0;
@@ -7230,6 +7353,7 @@ a.status-card {
   .video-player__controls {
     padding-top: 10px;
     background: transparent;
+    z-index: 1;
   }
 }
 
@@ -7243,19 +7367,18 @@ a.status-card {
   color: $white;
   display: flex;
   align-items: center;
+  outline: 1px solid var(--media-outline-color);
+  outline-offset: -1px;
+  z-index: 2;
 
   &.editable {
     border-radius: 0;
     height: 100% !important;
   }
 
-  &:focus {
-    outline: 0;
-  }
-
   video {
     display: block;
-    z-index: 1;
+    z-index: -2;
   }
 
   &.fullscreen {
@@ -7274,7 +7397,7 @@ a.status-card {
   &__controls {
     position: absolute;
     direction: ltr;
-    z-index: 2;
+    z-index: -1;
     bottom: 0;
     inset-inline-start: 0;
     inset-inline-end: 0;
@@ -7589,26 +7712,16 @@ a.status-card {
 }
 
 .account-gallery__container {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 4px 2px;
-}
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 2px;
 
-.account-gallery__item {
-  border: 0;
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  border-radius: 4px;
-  overflow: hidden;
-  margin: 2px;
+  .media-gallery__item {
+    border-radius: 0;
+  }
 
-  &__icons {
-    position: absolute;
-    top: 50%;
-    inset-inline-start: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 24px;
+  .load-more {
+    grid-column: span 3;
   }
 }
 

app/javascript/styles/mastodon/forms.scss

@@ -312,6 +312,10 @@ code {
 
     ul {
       columns: 2;
+
+      @media screen and (max-width: $mobile-breakpoint) {
+        columns: 1;
+      }
     }
   }
 

app/javascript/styles/mastodon/reset.scss

@@ -56,7 +56,6 @@ table {
 @supports not selector(::-webkit-scrollbar) {
   html {
     scrollbar-color: $action-button-color var(--background-border-color);
-    scrollbar-width: thin;
   }
 }
 

app/javascript/styles/mastodon/tables.scss

@@ -359,6 +359,10 @@ a.table-action-link {
     @media screen and (max-width: $no-gap-breakpoint) {
       border-top: 1px solid var(--background-border-color);
     }
+
+    &--no-toolbar {
+      border-top: 1px solid var(--background-border-color);
+    }
   }
 
   @media screen and (width <= 870px) {

app/javascript/styles/mastodon/variables.scss

@@ -111,4 +111,9 @@ $font-monospace: 'mastodon-font-monospace' !default;
   --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
   --on-surface-color: #{transparentize($ui-base-color, 0.5)};
   --avatar-border-radius: 8px;
+  --media-outline-color: #{rgba(#fcf8ff, 0.15)};
+  --overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.25)});
+  --error-background-color: #{darken($error-red, 16%)};
+  --error-active-background-color: #{darken($error-red, 12%)};
+  --on-error-color: #fff;
 }