Modern theme update to latest version

app/javascript/flavours/glitch/styles/modern/diff.css

@@ -1,26 +1,26 @@
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
   .compose-form__autosuggest-wrapper
   > :last-child {
   padding-bottom: 2em !important;
 }
 
-body.app-body.flavour-glitch > #mastodon .compose-form__buttons {
+body.app-body.flavour-modern-glitch > #mastodon .compose-form__buttons {
   width: 100%;
 }
 
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
   .compose-form__buttons
   > div:last-child {
   margin-inline-start: auto;
 }
 
-body.app-body.flavour-glitch > #mastodon .compose-form__buttons-wrapper {
+body.app-body.flavour-modern-glitch > #mastodon .compose-form__buttons-wrapper {
   position: relative;
 }
 
-body.app-body.flavour-glitch > #mastodon .character-counter__wrapper {
+body.app-body.flavour-modern-glitch > #mastodon .character-counter__wrapper {
   position: absolute;
   inset-inline-end: 0;
   bottom: 100%;
@@ -29,17 +29,20 @@ body.app-body.flavour-glitch > #mastodon .character-counter__wrapper {
   padding: 0.1em 0.5em;
 }
 
-body.app-body.flavour-glitch > #mastodon .character-counter__wrapper span {
+body.app-body.flavour-modern-glitch
+  > #mastodon
+  .character-counter__wrapper
+  span {
   font-size: 0.9em;
   font-weight: 500;
 }
 
-body.app-body.flavour-glitch > #mastodon .collapsed .status__content {
+body.app-body.flavour-modern-glitch > #mastodon .collapsed .status__content {
   height: auto !important;
   overflow: visible;
 }
 
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
   .collapsed
   .status__content
@@ -49,7 +52,7 @@ body.app-body.flavour-glitch
   max-height: 100px;
 }
 
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
   .collapsed
   .status__content
@@ -57,15 +60,18 @@ body.app-body.flavour-glitch
   margin-bottom: 0.4em;
 }
 
-body.app-body.flavour-glitch > #mastodon .collapsed .status__content br {
+body.app-body.flavour-modern-glitch > #mastodon .collapsed .status__content br {
   display: block;
 }
 
-body.app-body.flavour-glitch > #mastodon .collapsed .status__content::after {
+body.app-body.flavour-modern-glitch
+  > #mastodon
+  .collapsed
+  .status__content::after {
   content: unset;
 }
 
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
   .collapsed.muted
   .status__content__text
@@ -73,80 +79,86 @@ body.app-body.flavour-glitch
   display: none;
 }
 
-body.app-body.flavour-glitch > #mastodon .status > .status__content {
+body.app-body.flavour-modern-glitch
+  > #mastodon
+  .status:not(.status-direct)
+  > .status__content {
   margin-block: -90px -100px !important;
   padding-block: 100px !important;
 }
 
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
-  .status
+  .status:not(.status-direct)
   > .status__content
   .status__content__text {
   margin-top: 0;
 }
 
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
-  .status
+  .status:not(.status-direct)
   > .status__content
   > :last-child:not(.status__content__text) {
   margin-bottom: 5px !important;
 }
 
-body.app-body.flavour-glitch > #mastodon .status .full-width {
+body.app-body.flavour-modern-glitch > #mastodon .status .full-width {
   margin-inline: 0 !important;
 }
 
-body.app-body.flavour-glitch > #mastodon .status .status__action-bar {
+body.app-body.flavour-modern-glitch > #mastodon .status .status__action-bar {
   position: static;
 }
 
-body.app-body.flavour-glitch > #mastodon .status__info .notification__message {
+body.app-body.flavour-modern-glitch
+  > #mastodon
+  .status__info
+  .notification__message {
   padding-top: 0 !important;
   padding-inline-start: 0 !important;
 }
 
-body.app-body.flavour-glitch > #mastodon .status__display-name {
+body.app-body.flavour-modern-glitch > #mastodon .status__display-name {
   line-height: 22px;
 }
 
-body.app-body.flavour-glitch > #mastodon .display-name__account {
+body.app-body.flavour-modern-glitch > #mastodon .display-name__account {
   font-size: 15px;
 }
 
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
   .media-gallery__item
   > .media-gallery__preview {
   display: unset;
 }
 
-body.app-body.flavour-glitch > #mastodon .status__action-bar-spacer {
+body.app-body.flavour-modern-glitch > #mastodon .status__action-bar-spacer {
   min-width: 5px;
 }
 
-body.app-body.flavour-glitch > #mastodon .status__relative-time {
+body.app-body.flavour-modern-glitch > #mastodon .status__relative-time {
-  margin-inline: 5px !important;
+  margin-inline: auto 5px !important;
   z-index: 2;
   flex-grow: 0 !important;
 }
 
-body.app-body.flavour-glitch > #mastodon .reactions-bar {
+body.app-body.flavour-modern-glitch > #mastodon .reactions-bar {
   width: unset;
   margin-top: 8px;
 }
 
-body.app-body.flavour-glitch > #mastodon .reactions-bar button {
+body.app-body.flavour-modern-glitch > #mastodon .reactions-bar button {
   border-radius: 6px !important;
   padding-block: 2px;
 }
 @media (pointer: coarse) {
-  body.app-body.flavour-glitch > #mastodon .reactions-bar button {
+  body.app-body.flavour-modern-glitch > #mastodon .reactions-bar button {
     padding: 4px 8px !important;
   }
 
-  body.app-body.flavour-glitch
+  body.app-body.flavour-modern-glitch
     > #mastodon
     .reactions-bar
     button
@@ -156,11 +168,11 @@ body.app-body.flavour-glitch > #mastodon .reactions-bar button {
   }
 }
 
-body.app-body.flavour-glitch > #mastodon .reactions-bar:empty {
+body.app-body.flavour-modern-glitch > #mastodon .reactions-bar:empty {
   display: none;
 }
 
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
   .collapsed
   > .status__info
@@ -168,7 +180,7 @@ body.app-body.flavour-glitch
   padding-bottom: 0 !important;
 }
 
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
   .notification
   > .notification__message {
@@ -176,16 +188,18 @@ body.app-body.flavour-glitch
   padding-top: 18px !important;
 }
 
-body.app-body.flavour-glitch > #mastodon .notification .account {
+body.app-body.flavour-modern-glitch > #mastodon .notification .account {
   padding-inline-start: 0 !important;
 }
 
-body.app-body.flavour-glitch > #mastodon .notification__favourite-icon-wrapper {
+body.app-body.flavour-modern-glitch
+  > #mastodon
+  .notification__favourite-icon-wrapper {
   position: static;
   margin-inline-end: 10px;
 }
 
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
   .notification__favourite-icon-wrapper
   i {
@@ -193,18 +207,21 @@ body.app-body.flavour-glitch
   text-align: center;
 }
 
-body.app-body.flavour-glitch > #mastodon .status__prepend,
+body.app-body.flavour-modern-glitch > #mastodon .status__prepend,
-body.app-body.flavour-glitch > #mastodon .status__info .notification__message {
+body.app-body.flavour-modern-glitch
+  > #mastodon
+  .status__info
+  .notification__message {
   padding-bottom: 15px !important;
   padding-top: 0 !important;
   margin-top: -5px !important;
 }
 
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
   .status__prepend
   .status__prepend-icon-wrapper,
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
   .status__info
   .notification__message
@@ -214,12 +231,12 @@ body.app-body.flavour-glitch
   display: flex;
 }
 
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
   .status__prepend
   .status__prepend-icon-wrapper
   i,
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
   .status__info
   .notification__message
@@ -228,34 +245,37 @@ body.app-body.flavour-glitch
   margin: auto;
 }
 
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
   .detailed-status__wrapper
   .focusable:not(.status)::before {
   content: unset !important;
 }
 
-body.app-body.flavour-glitch > #mastodon .setting-text {
+body.app-body.flavour-modern-glitch > #mastodon .setting-text {
   border-radius: 0 !important;
   margin: 4px;
   width: calc(100% - 8px);
 }
 
-body.app-body.flavour-glitch > #mastodon .column-settings__pillbar {
+body.app-body.flavour-modern-glitch > #mastodon .column-settings__pillbar {
   border-radius: var(--radius);
 }
 
-body.app-body.flavour-glitch > #mastodon .pillbar-button {
+body.app-body.flavour-modern-glitch > #mastodon .pillbar-button {
   border-radius: 0 !important;
   padding: 6px;
 }
 
-body.app-body.flavour-glitch > #mastodon .account-card .media-modal__close {
+body.app-body.flavour-modern-glitch
+  > #mastodon
+  .account-card
+  .media-modal__close {
   left: 10px;
   top: 10px;
 }
 
-body.app-body.flavour-glitch
+body.app-body.flavour-modern-glitch
   > #mastodon
   .account-card
   .media-modal__close::before {
@@ -268,7 +288,7 @@ body.app-body.flavour-glitch
   opacity: 0.5;
 }
 
-.layout-multiple-columns.flavour-glitch .drawer__inner {
+.layout-multiple-columns.flavour-modern-glitch .drawer__inner {
   margin-top: -10px;
   padding-top: 30px !important;
 }

app/javascript/flavours/glitch/styles/modern/modern.css

@@ -419,7 +419,7 @@ a:focus-visible,
 .dropdown-menu,
 .dropdown-animation {
   border-radius: var(--radius);
-  animation: scaleIn 0.2s;
+  animation: scaleIn 0.2s cubic-bezier(0, 0, 0, 1.1);
 }
 .dropdown-menu__container__list {
   overflow: hidden auto;
@@ -474,12 +474,6 @@ a:focus-visible,
     transition: padding 0.4s;
     --top: 20px;
   }
-  .columns-area__panels__pane {
-    height: unset !important;
-  }
-  .columns-area__panels__pane .columns-area__panels__pane__inner {
-    height: calc(100% + 20px) !important;
-  }
 }
 @media (min-width: 1320px) {
   .columns-area__panels {
@@ -494,6 +488,7 @@ a:focus-visible,
   padding-bottom: 20px;
   box-sizing: border-box;
   max-height: unset !important;
+  height: 100%;
 }
 #mastodon .search {
   margin-inline: 5px;
@@ -734,7 +729,8 @@ a:focus-visible,
 #mastodon .explore__search-results {
   padding: 10px;
 }
-#mastodon .dismissable-banner {
+#mastodon .dismissable-banner,
+#mastodon .follow_requests-unlocked_explanation {
   border-inline: 0;
   border-top: 0;
   margin: -10px;
@@ -844,7 +840,7 @@ a:focus-visible,
   flex-direction: column;
   background: inherit;
 }
-body:not(.flavour-glitch)
+body:not(.flavour-modern-glitch)
   #mastodon
   .account-timeline__header
   .account__header__bar {
@@ -1463,7 +1459,7 @@ body:not(.flavour-glitch)
 .account-card,
 .scrollable :not(.focusable) > .account,
 .timeline-hint {
-  overflow: clip;
+  overflow: hidden;
   transition:
     background 0.2s,
     box-shadow 0.4s,
@@ -2648,12 +2644,6 @@ body:not(.flavour-glitch)
   position: absolute;
   inset: 0;
 }
-#mastodon .status__wrapper-direct .status__prepend {
-  display: none;
-}
-#mastodon .status__wrapper-direct .status__relative-time {
-  color: #8c8dff !important;
-}
 #mastodon .status,
 #mastodon .scrollable .account {
   padding-block: 15px;
@@ -2663,6 +2653,12 @@ body:not(.flavour-glitch)
   inset: -10px;
   border-radius: var(--radius);
 }
+#mastodon .status.light {
+  overflow: hidden !important;
+}
+#mastodon .status.light .boost-modal__status-header {
+  display: flow-root !important;
+}
 #mastodon .account__relationship:empty {
   display: none;
 }
@@ -2910,16 +2906,18 @@ body:not(.flavour-glitch)
   height: 2em;
   min-width: 2em;
   width: auto;
-  transition: transform 0.2s cubic-bezier(0, 0, 0, 1);
 }
-#mastodon .status__content .custom-emoji:hover {
+.custom-emoji {
-  transform: scale(1.2);
+  transition: transform 0.4s cubic-bezier(0, 0.7, 0, 1);
+}
+.custom-emoji:hover {
+  transform: scale(1.3);
 }
 #mastodon .status__content ~ [style*='aspect-ratio'] {
   max-height: 80vh;
 }
 #mastodon .status > .status__content .status__content__text:empty {
-  margin-top: -10px !important;
+  margin-top: -5px !important;
 }
 #mastodon .status__content__spoiler-link {
   display: block;
@@ -2949,6 +2947,94 @@ body:not(.flavour-glitch)
 #mastodon .status__content__spoiler-link:focus::after {
   opacity: 1;
 }
+#mastodon .detailed-status__wrapper-direct .status__prepend,
+#mastodon .status-direct .status__prepend,
+#mastodon .status__wrapper-direct .status__prepend,
+#mastodon .conversation .status__prepend {
+  position: absolute;
+  font-size: 0;
+}
+#mastodon .detailed-status__wrapper-direct .status__content,
+#mastodon .status-direct .status__content,
+#mastodon .status__wrapper-direct .status__content,
+#mastodon .conversation .status__content {
+  position: relative !important;
+  background: var(--elevated-color);
+  padding: 8px 12px;
+  padding: 0.7em 0.9em !important;
+  border-radius: var(--radius-round);
+  border-top-left-radius: 6px;
+  box-sizing: border-box;
+  margin-top: 5px !important;
+  margin-bottom: 0;
+  overflow: hidden !important;
+  max-width: max-content;
+}
+#mastodon .detailed-status__wrapper-direct .status__content .media-gallery,
+#mastodon .status-direct .status__content .media-gallery,
+#mastodon .status__wrapper-direct .status__content .media-gallery,
+#mastodon .conversation .status__content .media-gallery {
+  width: 999px;
+  max-width: 100% !important;
+}
+.detailed-status__wrapper-direct .status__content {
+  font-size: 17px;
+}
+#mastodon .detailed-status__wrapper-direct .fa-at,
+#mastodon .detailed-status__wrapper-direct .status__visibility-icon {
+  font-family: inherit;
+  font-weight: 600;
+  color: var(--accent, #8c8dff);
+  width: auto !important;
+}
+#mastodon .detailed-status__wrapper-direct .fa-at::before,
+#mastodon .detailed-status__wrapper-direct .status__visibility-icon::before {
+  font-family: FontAwesome !important;
+}
+#mastodon .detailed-status__wrapper-direct .fa-at::after,
+#mastodon .detailed-status__wrapper-direct .status__visibility-icon::after {
+  content: attr(title);
+  margin-left: 0.4em;
+}
+#mastodon .status-direct .fa-at,
+#mastodon .status-direct .status__visibility-icon {
+  color: var(--accent, #8c8dff);
+}
+#mastodon .status-direct .status__info .status__relative-time {
+  height: auto;
+  color: var(--accent, #8c8dff);
+}
+#mastodon .status-direct.status--in-thread .status__info {
+  align-items: center;
+  gap: 10px;
+}
+#mastodon .status-direct.status--in-thread .status__info > span {
+  width: 0;
+  flex-grow: 1;
+}
+#mastodon .status-direct.status--in-thread .status__info > span,
+#mastodon .status-direct.status--in-thread .status__display-name {
+  overflow: visible !important;
+}
+#mastodon .status-direct.status--in-thread .status__display-name {
+  overflow: hidden;
+  width: 0;
+  flex-grow: 1;
+}
+#mastodon .status-direct.status--in-thread .status__avatar {
+  height: auto;
+  margin-bottom: -100px;
+}
+#mastodon .status-direct.status--in-thread .status__avatar .account__avatar {
+  position: absolute;
+  top: 0 !important;
+  height: 46px !important;
+  width: 46px !important;
+}
+#mastodon .status-direct.status--in-thread .display-name * {
+  display: inline;
+  margin-right: 0.2em;
+}
 #mastodon .media-gallery,
 #mastodon .video-player,
 #mastodon .status-card.horizontal.interactive,
@@ -2961,7 +3047,9 @@ body:not(.flavour-glitch)
   margin-bottom: 10px !important;
   animation: scaleIn 0.4s;
   max-width: unset !important;
-  max-height: 80vh !important;
+}
+#mastodon .status .media-gallery__item {
+  max-height: 80vh;
 }
 .status-card {
   line-height: 1;
@@ -3015,6 +3103,43 @@ body:not(.flavour-glitch)
 .audio-player .video-player__seek {
   margin: var(--radius);
 }
+#mastodon .hashtag-bar {
+  margin-top: 8px;
+}
+#mastodon .hashtag-bar a,
+#mastodon .hashtag-bar button {
+  font-size: 0.85em;
+  font-weight: 600;
+  padding: 0.2em 0.6em;
+  opacity: 0.7;
+  color: var(--accent, #8c8dff);
+  transition: opacity 0.2s;
+}
+#mastodon .hashtag-bar a {
+  position: relative;
+  border-radius: var(--radius);
+  background: var(--elevated-color);
+}
+#mastodon .hashtag-bar a::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--elevated-color);
+  border-radius: inherit;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+#mastodon .hashtag-bar a:hover,
+#mastodon .hashtag-bar a:focus {
+  opacity: 1;
+}
+#mastodon .hashtag-bar a:hover::after,
+#mastodon .hashtag-bar a:focus::after {
+  opacity: 1;
+}
+#mastodon .hashtag-bar button {
+  padding-block: 0;
+}
 #mastodon .detailed-status__wrapper {
   border-radius: var(--radius);
   overflow: clip;
@@ -3408,6 +3533,7 @@ body:not(.flavour-glitch)
     .column-header__collapsible:not(.collapsed) {
     flex-direction: column-reverse;
     align-items: flex-start;
+    border: 0;
     animation: slideDowFade 0.3s backwards cubic-bezier(0, 1, 0, 1.2);
   }
   .layout-single-column .tabs-bar__wrapper .column-header__collapsible,
@@ -3560,6 +3686,7 @@ body:not(.flavour-glitch)
     max-height: 3.3em;
     min-height: 2.7em !important;
     padding-block: 0;
+    border-radius: 100px;
     position: relative;
     box-sizing: border-box;
     opacity: 0.9;
@@ -3857,9 +3984,6 @@ body:not(.flavour-glitch)
   #mastodon .picture-in-picture__footer {
     flex-wrap: wrap;
   }
-  #mastodon .columns-area--mobile > .column > div > div {
-    animation: fadeUp 0.4s;
-  }
   #mastodon .columns-area--mobile > .column > .column-header__wrapper {
     display: none;
   }
@@ -3878,6 +4002,7 @@ body:not(.flavour-glitch)
     box-sizing: border-box;
     gap: 10px;
     border: 0 !important;
+    overflow: visible;
   }
   .ui__header::after {
     content: '';
@@ -3952,10 +4077,223 @@ body:not(.flavour-glitch)
   }
   #mastodon .tabs-bar__wrapper {
     top: 0;
+    background: none;
   }
   #mastodon .column-back-button.column-back-button {
     border-radius: 0 !important;
   }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels {
+    flex-direction: column;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .ui__header::after {
+    content: unset;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__main {
+    width: 100%;
+    border-radius: 0 !important;
+    margin: 0 !important;
+    border: 0 !important;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner) .tabs-bar__wrapper {
+    transition: none !important;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner):has(
+      .column-header__buttons:empty
+    )
+    .tabs-bar__wrapper {
+    margin-top: -50px;
+    margin-bottom: 2px;
+    height: 48px;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational {
+    display: contents;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .columns-area__panels__pane__inner {
+    position: relative !important;
+    inset: unset !important;
+    order: -1;
+    width: unset;
+    height: auto;
+    white-space: nowrap;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .navigation-panel {
+    flex-direction: row;
+    margin: 0;
+    padding: 0;
+    height: auto;
+    padding: 12px 14px;
+    gap: 10px;
+    border-block: 1px solid;
+    overflow: scroll hidden;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .navigation-panel::-webkit-scrollbar {
+    display: none;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    hr {
+    display: none;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .trends__item__name
+    > span,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .trends__item__sparkline {
+    display: none;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .navigation-panel__legal,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    h4,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .getting-started__trends,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .trends__item,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .trends__item__name {
+    all: unset;
+    display: contents !important;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .navigation-panel__legal::before,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    h4::before,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .getting-started__trends::before,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .trends__item::before,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .trends__item__name::before,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .navigation-panel__legal::after,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    h4::after,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .getting-started__trends::after,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .trends__item::after,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    .trends__item__name::after {
+    content: unset;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational:has(.getting-started__trends)
+    .flex-spacer {
+    border-right: 1px solid;
+    margin-block: 10px;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational:has(.getting-started__trends)
+    .navigation-panel::after {
+    content: '';
+    position: sticky;
+    right: -20px;
+    min-width: 150px;
+    margin-left: -50px;
+    background: inherit;
+    mask: linear-gradient(to right, transparent, #000);
+    -webkit-mask: linear-gradient(to right, transparent, #000);
+    pointer-events: none;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational:has(.getting-started__trends)
+    .trends__item:last-child
+    a {
+    position: relative;
+    z-index: 3;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    a,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    h4
+    > span {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--radius);
+    padding: 0.8em 1.2em;
+    font-weight: 600;
+    font-size: 1.1em;
+    text-align: center;
+    min-width: max-content;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    a
+    i,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    h4
+    > span
+    i {
+    font-size: 1em;
+    width: auto;
+    margin-right: 0;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    a.active,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    h4
+    > span.active {
+    padding-inline: 1.2em;
+    position: relative;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    a.active::before,
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    h4
+    > span.active::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: currentcolor;
+    opacity: 0.1;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    a
+    > span:not(:first-child),
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    h4
+    > span
+    > span:not(:first-child) {
+    margin-left: 0.7em;
+  }
+  #mastodon:has(.navigation-panel__sign-in-banner)
+    .columns-area__panels__pane--navigational
+    span {
+    display: unset;
+  }
   #mastodon .columns-area__panels {
     justify-content: flex-start;
     max-width: 100% !important;
@@ -3967,6 +4305,7 @@ body:not(.flavour-glitch)
     border-start-end-radius: var(--radius);
     overflow: clip !important;
     margin-top: 1px !important;
+    flex-grow: 1;
   }
   #mastodon .columns-area__panels__main > .columns-area--mobile {
     overflow: visible !important;
@@ -3979,6 +4318,10 @@ body:not(.flavour-glitch)
   #mastodon .columns-area__panels__main > div {
     border-radius: 0 !important;
   }
+  #mastodon .column {
+    flex-grow: 1;
+    overflow: clip;
+  }
   #mastodon .dismissable-banner {
     margin: 0;
     padding-left: 4px;
@@ -3997,6 +4340,9 @@ body:not(.flavour-glitch)
     height: 100% !important;
     background-size: cover !important;
   }
+  #mastodon .status::before {
+    content: unset;
+  }
   #mastodon .status__action-bar {
     margin-bottom: -5px;
   }
@@ -4018,10 +4364,6 @@ body:not(.flavour-glitch)
   #mastodon .notification__filter-bar + .scrollable {
     border-radius: var(--radius) var(--radius) 0 0 !important;
   }
-  #mastodon .modal-root__modal .status.light {
-    overflow: hidden !important;
-    padding-inline-start: 70px !important;
-  }
   #mastodon .columns-area {
     padding-bottom: 0 !important;
     overflow: hidden !important;

yarn.lock

@@ -11776,17 +11776,19 @@ sass-loader@^10.2.0:
     schema-utils "^3.0.0"
     semver "^7.3.2"
 
-<<<<<<< HEAD
+sass@^1.38.0:
-sass@^1.38.0, sass@^1.62.1:
   version "1.63.6"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.63.6.tgz#481610e612902e0c31c46b46cf2dad66943283ea"
   integrity sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==
-=======
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 sass@^1.62.1:
   version "1.64.1"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.64.1.tgz#6a46f6d68e0fa5ad90aa59ce025673ddaa8441cf"
   integrity sha512-16rRACSOFEE8VN7SCgBu1MpYCyN7urj9At898tyzdXFhC+a+yOX5dXwAR7L8/IdPJ1NB8OYoXmD55DM30B2kEQ==
->>>>>>> upstream/main
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"