Sync theme updates (From upstream, & glitch patches from im-in.space)

app/javascript/skins/glitch/modern-dark/bits/glitch.scss

@@ -4,19 +4,36 @@
 }
 
 /* Fixes */
-// While we wait for glitch update
+// Remove thread line for now, breaking alignement
+// and the available space
+.status__line {
+  display: none !important;
+}
+
+.status--in-thread .status__content,
+.status--in-thread .status__action-bar {
+  margin-inline-start: 0 !important;
+  padding-inline: 0 !important;
+  width: 100%;
+}
+
+// Fix for the new bio fields
 .account__header__bio .account__header__fields {
   margin-left: 15px !important;
   margin-right: 15px !important;
 }
+
 .about__section__body,
 .account__header__bio {
   .account__header__fields {
     max-width: calc(100% - 30px) !important;
+    margin-left: 15px !important;
+    margin-right: 15px !important;
 
     dl {
       display: block;
     }
+
     dd,
     dt {
       font-size: 13px;
@@ -24,6 +41,7 @@
       padding: 0;
       text-align: initial;
     }
+
     dt,
     dd.verified {
       background: transparent !important;
@@ -32,15 +50,42 @@
   }
 }
 
-// This fixes collapsed toots (we still override some parts bellow) but also
-// clicking on username when you open their profile because ".detailled-satatus__wrapper"
-// is at an another place and not with .focusable as expected upstream
-#mastodon .detailed-status__wrapper .status__content::before,
-#mastodon .detailed-status__wrapper .status__content::after {
-  height: auto !important;
-}
-
 #mastodon {
+  // User profiles were not clickable when opening a status
+  .detailed-status.detailed-status__wrapper,
+  .detailed-status__wrapper.detailed-status__wrapper,
+  .picture-in-picture.detailed-status__wrapper {
+    margin-block: initial !important;
+  }
+
+  // Unread indicator not visible
+  .notification.unread::before,
+  .status.unread::before {
+    inset: 0 !important;
+  }
+
+  // Leave the roles under the profile picture
+  .account-timeline__header .account__header__bar .avatar .account-role {
+    margin-left: 0;
+    position: static;
+  }
+
+  // This fixes collapsed toots (we still override some parts bellow) but also
+  // clicking on username when you open their profile because ".detailled-satatus__wrapper"
+  // is at an another place and not with .focusable as expected upstream
+  .detailed-status__wrapper .status__content {
+    &::before,
+    &::after {
+      height: auto !important;
+    }
+  }
+
+  .detailed-status__wrapper .status__content__text,
+  .status:not(.collapsed) .status__content__text {
+    -webkit-mask: none !important;
+    mask: none !important;
+  }
+
   .status {
     // Modern sets the background to none,
     // so put one back for direct statuses
@@ -54,22 +99,18 @@
       .status__content {
         overflow: hidden !important;
 
-        &:after {
+        &::after {
           bottom: 0 !important;
           height: auto !important;
-          left: 85px !important;
-          right: 85px !important;
+
+          // left: 85px !important;
+          // right: 85px !important;
           top: 0 !important;
         }
       }
     }
   }
 
-  // Add some spacing around the role on the other side too
-  .account-timeline__header .account-role {
-    margin-left: 0.4em;
-  }
-
   // Make the @ address have a minimum width (so it wraps better)
   // And flex: 1 to push the role tag to the right
   .account__header__tabs__name h1 small {
@@ -77,6 +118,15 @@
     min-width: 150px;
   }
 
+  // Don't make the profile header sticky, content goes thru it
+  .account-timeline__header .account__header__image,
+  .account-timeline__header
+    .account__header__image
+    .account__header__info
+    > span {
+    position: relative !important;
+  }
+
   // Fix profile notes' textarea not usable at all
   .account__header__fields textarea,
   .account__header__account-note textarea {
@@ -84,34 +134,51 @@
     width: 100% !important;
   }
 
-  // The -10px here breaks a lot in Glitch, like collapsed statuses don't show
-  // the basic info, or it's just too close to the user name. It's fine at 0.
-  // Also fix alignement with a smaller padding-top.
-  .notification__message,
+  // Fix icons/notifications being misaligned
+  .notification__message, // Here we need to get for _all_ notifications, or the bottom half of the notification message is cut in half
   .status__prepend {
-    margin-bottom: 0px !important;
+    margin-bottom: 0 !important;
+  }
+
+  .notification .notification__message, // This rule only affect pure notifications (like "followed you/sign up")
+  .status__prepend {
+    // Move to the right
+    margin-left: 30px !important;
+  }
+
+  .status__info .notification__message {
+    // Here it's only the notifications with a post attached to them
+    // Reduce padding
+    padding-top: 0 !important;
+  }
+
+  .status__prepend {
+    // Reduce padding
     padding-top: 8px !important;
   }
 
-  // For the calc(), it's because it slightly cuts off the icons on the left due
-  // to removing the big left padding.
-  .status__prepend {
-    margin-inline-start: calc(var(--status-left-padding) + 15px);
+  // Remove useless background color change on focus/active behind the spoiler button
+  .status__content__spoiler-link {
+    &::after,
+    &::before {
+      background: transparent !important;
+    }
   }
 
   // Since we have more elements on the action bar (including the date/time)
   // I'm reducing the padding a bit
   .detailed-status__action-bar .icon-button,
   .status__action-bar .icon-button {
-    padding: .2em !important;
+    padding: 0.2em !important;
     min-width: 0 !important;
   }
+
   .status__action-bar-button {
-    margin-right: 8px
+    margin-right: 8px;
   }
 
   // Stop showing the text next to action buttons
-  .icon-button[aria-label]:after {
+  .icon-button[aria-label]::after {
     content: none !important;
   }
 
@@ -122,8 +189,8 @@
     border-radius: var(--radius-round);
     margin-inline: 5px;
     overflow: hidden;
-    border: 0!important;
-    
+    border: 0 !important;
+
     & > * {
       border-bottom: none;
     }
@@ -141,7 +208,7 @@
     margin-bottom: -5px;
 
     .account {
-      border-radius: 0!important; // Fix weird radius
+      border-radius: 0 !important; // Fix weird radius
       display: inline-block;
       width: calc(100% - 1.28571em - 10px);
     }
@@ -160,7 +227,7 @@
   }
 }
 
-@media (max-width: 895px) {
+@media (width < 895px) {
   #mastodon .status__action-bar {
     // Reverting the margin on elements that were negative due to the
     // big padding the theme used to have
@@ -172,18 +239,15 @@
 // (like the spoiler media button or profile pictures)
 .privacy-dropdown__dropdown,
 .language-dropdown__dropdown,
-.emoji-picker-dropdown__menu,
-.picture-in-picture {
+.emoji-picker-dropdown__menu {
   z-index: 500;
 }
 
+.picture-in-picture {
+  z-index: 501;
+}
+
 // Fix alignement in the sharing/following popups
 .modal-layout.modal-layout .container-alt {
   height: auto !important;
 }
-
-// This was used in mastodon.coffee, I like it
-.layout-multiple-columns .column {
-  flex-grow: 1;
-  max-width: 500px;
-}