Update style.scss

styles/modern/style.scss

@@ -7,6 +7,10 @@
   --shadow: 0 10px 40px -10px rgba(0,0,0,0.15);
   --shadow-low: 0 8px 16px -10px rgba(0,0,0,0.4);
 }
+#mastodon .button--block,
+.public-layout .button--block {
+  font-weight: 700;
+}
 #mastodon .compose-form__upload-thumbnail,
 .public-layout .compose-form__upload-thumbnail,
 #mastodon button:not(.column-header__button),
@@ -49,7 +53,11 @@
 #mastodon .column-link,
 .public-layout .column-link,
 #mastodon select,
-.public-layout select {
+.public-layout select,
+#mastodon .status-card,
+.public-layout .status-card,
+#mastodon .audio-player,
+.public-layout .audio-player {
   transition: transform 0.4s cubic-bezier(0, 0, 0, 3) !important;
 }
 #mastodon .media-gallery__item:active,
@@ -57,7 +65,11 @@
 #mastodon .column-link:active,
 .public-layout .column-link:active,
 #mastodon select:active,
-.public-layout select:active {
+.public-layout select:active,
+#mastodon .status-card:active,
+.public-layout .status-card:active,
+#mastodon .audio-player:active,
+.public-layout .audio-player:active {
   transform: scale(0.99);
   transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important;
 }
@@ -173,6 +185,10 @@
 .public-layout .compose-form .compose-form__buttons-wrapper {
   border-radius: 0 0 var(--radius) var(--radius) !important;
 }
+#mastodon .compose-form .compose-form__publish-button-wrapper,
+.public-layout .compose-form .compose-form__publish-button-wrapper {
+  overflow: visible !important;
+}
 @media (min-width: 895px) {
   .layout-single-column .getting-started__footer {
     opacity: 0.5;
@@ -449,31 +465,31 @@
   font-weight: 600;
   padding-inline: 14px;
 }
-#mastodon .account__section-headline,
+#mastodon#mastodon .account__section-headline,
-.public-layout .account__section-headline {
+.public-layout#mastodon .account__section-headline {
   background: none;
 }
-.with-modals #mastodon .account__section-headline,
+.with-modals #mastodon#mastodon .account__section-headline,
-.with-modals .public-layout .account__section-headline {
+.with-modals .public-layout#mastodon .account__section-headline {
   border: 0 !important;
 }
-#mastodon .account__section-headline a,
+#mastodon#mastodon .account__section-headline a,
-.public-layout .account__section-headline a,
+.public-layout#mastodon .account__section-headline a,
-#mastodon .account__section-headline button,
+#mastodon#mastodon .account__section-headline button,
-.public-layout .account__section-headline button {
+.public-layout#mastodon .account__section-headline button {
   background: none;
   border-radius: 0 !important;
 }
-#mastodon .account__section-headline a span,
+#mastodon#mastodon .account__section-headline a span,
-.public-layout .account__section-headline a span,
+.public-layout#mastodon .account__section-headline a span,
-#mastodon .account__section-headline button span,
+#mastodon#mastodon .account__section-headline button span,
-.public-layout .account__section-headline button span {
+.public-layout#mastodon .account__section-headline button span {
   font-weight: 400;
 }
-#mastodon .account__section-headline a.active span,
+#mastodon#mastodon .account__section-headline a.active span,
-.public-layout .account__section-headline a.active span,
+.public-layout#mastodon .account__section-headline a.active span,
-#mastodon .account__section-headline button.active span,
+#mastodon#mastodon .account__section-headline button.active span,
-.public-layout .account__section-headline button.active span {
+.public-layout#mastodon .account__section-headline button.active span {
   font-weight: 700;
 }
 #mastodon .notification__filter-bar,
@@ -544,6 +560,7 @@
   padding-top: 15px !important;
   padding-bottom: 0 !important;
   margin-bottom: -10px !important;
+  z-index: 2;
 }
 #mastodon .account__avatar-overlay-base,
 .public-layout .account__avatar-overlay-base {
@@ -566,6 +583,7 @@
 .public-layout .status__info .status__avatar {
   top: 15px;
   left: 15px !important;
+  z-index: 2;
 }
 #mastodon .status__info .display-name strong,
 .public-layout .status__info .display-name strong {
@@ -607,9 +625,13 @@
 #mastodon .video-player,
 .public-layout .video-player,
 #mastodon .status-card.horizontal.interactive,
-.public-layout .status-card.horizontal.interactive {
+.public-layout .status-card.horizontal.interactive,
+#mastodon .status-card,
+.public-layout .status-card,
+#mastodon .audio-player,
+.public-layout .audio-player {
   margin-left: calc(15px - var(--status-left-padding));
-  width: unset;
+  width: unset !important;
   box-shadow: var(--shadow-low);
   border-radius: var(--radius);
   margin-block: 15px !important;
@@ -617,6 +639,47 @@
   max-width: unset !important;
   max-height: 80vh !important;
 }
+#mastodon .media-gallery.status-card,
+.public-layout .media-gallery.status-card,
+#mastodon .video-player.status-card,
+.public-layout .video-player.status-card,
+#mastodon .status-card.horizontal.interactive.status-card,
+.public-layout .status-card.horizontal.interactive.status-card,
+#mastodon .status-card.status-card,
+.public-layout .status-card.status-card,
+#mastodon .audio-player.status-card,
+.public-layout .audio-player.status-card {
+  box-shadow: var(--shadow);
+  box-shadow: none;
+}
+#mastodon .media-gallery.status-card .status-card__content,
+.public-layout .media-gallery.status-card .status-card__content,
+#mastodon .video-player.status-card .status-card__content,
+.public-layout .video-player.status-card .status-card__content,
+#mastodon .status-card.horizontal.interactive.status-card .status-card__content,
+.public-layout .status-card.horizontal.interactive.status-card .status-card__content,
+#mastodon .status-card.status-card .status-card__content,
+.public-layout .status-card.status-card .status-card__content,
+#mastodon .audio-player.status-card .status-card__content,
+.public-layout .audio-player.status-card .status-card__content {
+  padding-inline: 12px;
+}
+#mastodon .media-gallery.status-card:hover,
+.public-layout .media-gallery.status-card:hover,
+#mastodon .video-player.status-card:hover,
+.public-layout .video-player.status-card:hover,
+#mastodon .status-card.horizontal.interactive.status-card:hover,
+.public-layout .status-card.horizontal.interactive.status-card:hover,
+#mastodon .status-card.status-card:hover,
+.public-layout .status-card.status-card:hover,
+#mastodon .audio-player.status-card:hover,
+.public-layout .audio-player.status-card:hover {
+  background-color: var(--hover-color);
+}
+#mastodon .media-gallery__item:not([style*="50%"]),
+.public-layout .media-gallery__item:not([style*="50%"]) {
+  border-radius: var(--radius);
+}
 #mastodon .detailed-status,
 .public-layout .detailed-status {
   padding: 15px !important;
@@ -693,6 +756,7 @@
   height: unset !important;
   flex: 0 1 auto !important;
   min-width: 0;
+  border-radius: var(--radius);
 }
 #mastodon .status__action-bar .icon-button:last-child,
 .public-layout .status__action-bar .icon-button:last-child,
@@ -702,12 +766,12 @@
 .public-layout .picture-in-picture__footer .icon-button:last-child {
   margin-right: 0 !important;
 }
-#mastodon .status__action-bar .icon-button::after,
+#mastodon .status__action-bar .icon-button[aria-label]::after,
-.public-layout .status__action-bar .icon-button::after,
+.public-layout .status__action-bar .icon-button[aria-label]::after,
-#mastodon .detailed-status__action-bar .icon-button::after,
+#mastodon .detailed-status__action-bar .icon-button[aria-label]::after,
-.public-layout .detailed-status__action-bar .icon-button::after,
+.public-layout .detailed-status__action-bar .icon-button[aria-label]::after,
-#mastodon .picture-in-picture__footer .icon-button::after,
+#mastodon .picture-in-picture__footer .icon-button[aria-label]::after,
-.public-layout .picture-in-picture__footer .icon-button::after {
+.public-layout .picture-in-picture__footer .icon-button[aria-label]::after {
   content: attr(aria-label);
   font-size: 0.7em;
   margin-left: 0.5em;
@@ -1043,45 +1107,133 @@
   font-size: 1.1em !important;
   line-height: 2;
 }
-#mastodon.public-layout .header,
+#mastodon.public-layout .container:nth-child(2) .grid .column-1,
-.public-layout.public-layout .header {
+.public-layout.public-layout .container:nth-child(2) .grid .column-1 {
-  border-radius: var(--radius);
-  margin: 20px 0;
-}
-#mastodon.public-layout .public-account-header,
-.public-layout.public-layout .public-account-header {
-  border-radius: var(--radius);
-  --border-color: transparent !important;
-  border: 0 !important;
-  margin-bottom: 20px;
-}
-#mastodon.public-layout .public-account-header .public-account-header__bar::before,
-.public-layout.public-layout .public-account-header .public-account-header__bar::before {
-  border: 0;
-}
-#mastodon.public-layout .grid,
-.public-layout.public-layout .grid {
-  gap: 20px;
-}
-#mastodon.public-layout .public-account-header + .grid .column-1,
-.public-layout.public-layout .public-account-header + .grid .column-1 {
   position: sticky;
   align-self: flex-end;
   bottom: 0;
   min-height: calc(100vh - 80px);
 }
-#mastodon.public-layout .public-account-header + .grid .column-1 > *,
+#mastodon.public-layout .container:nth-child(2) .grid .column-1 > *,
-.public-layout.public-layout .public-account-header + .grid .column-1 > * {
+.public-layout.public-layout .container:nth-child(2) .grid .column-1 > * {
   border-radius: var(--radius);
   overflow: hidden;
   border: 0 !important;
 }
-#mastodon.public-layout .public-account-header + .grid .column-1 a,
+#mastodon.public-layout .container:nth-child(2) .grid .column-1 a,
-.public-layout.public-layout .public-account-header + .grid .column-1 a,
+.public-layout.public-layout .container:nth-child(2) .grid .column-1 a,
-#mastodon.public-layout .public-account-header + .grid .column-1 .hero-widget__text,
+#mastodon.public-layout .container:nth-child(2) .grid .column-1 .hero-widget__text,
-.public-layout.public-layout .public-account-header + .grid .column-1 .hero-widget__text {
+.public-layout.public-layout .container:nth-child(2) .grid .column-1 .hero-widget__text {
   border: 0 !important;
 }
+@media (min-width: 416px) {
+  #mastodon.public-layout .grid,
+  .public-layout.public-layout .grid,
+  #mastodon.public-layout .grid-4,
+  .public-layout.public-layout .grid-4 {
+    gap: 15px;
+  }
+  #mastodon.public-layout .header,
+  .public-layout.public-layout .header {
+    border-radius: var(--radius);
+    margin: 15px 0;
+  }
+  #mastodon.public-layout .public-account-header,
+  .public-layout.public-layout .public-account-header {
+    border-radius: var(--radius);
+    --border-color: transparent !important;
+    border: 0 !important;
+  }
+  #mastodon.public-layout .public-account-header:not(.public-account-header--no-bar),
+  .public-layout.public-layout .public-account-header:not(.public-account-header--no-bar) {
+    margin-bottom: 15px;
+  }
+  #mastodon.public-layout .public-account-header .public-account-header__bar::before,
+  .public-layout.public-layout .public-account-header .public-account-header__bar::before {
+    border: 0;
+  }
+  #mastodon.public-layout .account__section-headline,
+  .public-layout.public-layout .account__section-headline {
+    border-radius: var(--radius) var(--radius) 0 0;
+    border: 0;
+  }
+  #mastodon.public-layout .account__section-headline + .activity-stream > .entry:first-child,
+  .public-layout.public-layout .account__section-headline + .activity-stream > .entry:first-child {
+    border-radius: 0 !important;
+  }
+  #mastodon.public-layout .table-of-contents,
+  .public-layout.public-layout .table-of-contents {
+    max-height: calc(100vh - 20px);
+    min-height: unset !important;
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
+    position: sticky;
+    top: 10px;
+  }
+}
+@media (max-width: 416px) {
+  #mastodon.public-layout .contact-widget,
+  .public-layout.public-layout .contact-widget {
+    padding: 0 10px;
+  }
+  #mastodon.public-layout .grid-4 > div:not(.column-4),
+  .public-layout.public-layout .grid-4 > div:not(.column-4) {
+    position: relative;
+    z-index: 2;
+  }
+  #mastodon.public-layout .table-of-contents,
+  .public-layout.public-layout .table-of-contents {
+    max-height: 70vh;
+    max-content: min-content;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    padding: 30px;
+    box-sizing: border-box;
+    overflow-x: scroll !important;
+    scroll-snap-type: x mandatory;
+    scroll-padding-left: 30px;
+    gap: 20px 30px;
+    position: relative;
+    background: none !important;
+    border: 0 !important;
+    scroll-behavior: smooth;
+  }
+  #mastodon.public-layout .table-of-contents > li,
+  .public-layout.public-layout .table-of-contents > li {
+    width: 70%;
+    max-height: 80%;
+    overflow-y: auto;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    scroll-snap-align: start;
+    box-shadow: var(--shadow);
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  #mastodon.public-layout .table-of-contents > li:hover,
+  .public-layout.public-layout .table-of-contents > li:hover,
+  #mastodon.public-layout .table-of-contents > li:focus-within,
+  .public-layout.public-layout .table-of-contents > li:focus-within {
+    background-color: var(--hover-color);
+  }
+  #mastodon.public-layout .table-of-contents > li ul,
+  .public-layout.public-layout .table-of-contents > li ul {
+    border: 0 !important;
+  }
+  #mastodon.public-layout .table-of-contents > li > a,
+  .public-layout.public-layout .table-of-contents > li > a {
+    border: 0 !important;
+  }
+  #mastodon.public-layout .table-of-contents > li:last-child,
+  .public-layout.public-layout .table-of-contents > li:last-child {
+    margin-right: 70%;
+  }
+}
+#mastodon.public-layout .account-card,
+.public-layout.public-layout .account-card,
+#mastodon.public-layout .card > a,
+.public-layout.public-layout .card > a,
 #mastodon.public-layout .page-header,
 .public-layout.public-layout .page-header,
 #mastodon.public-layout .statuses-grid__item,
@@ -1101,10 +1253,67 @@
   border-radius: var(--radius);
   overflow: hidden;
 }
+#mastodon.public-layout .account-card__header,
+.public-layout.public-layout .account-card__header {
+  padding: 0 !important;
+  padding-bottom: 4px !important;
+}
+#mastodon.public-layout .account-card__bio,
+.public-layout.public-layout .account-card__bio {
+  margin-top: 0 !important;
+}
+#mastodon.public-layout .account-card__actions,
+.public-layout.public-layout .account-card__actions {
+  margin-top: auto !important;
+}
 #mastodon.public-layout .statuses-grid,
 .public-layout.public-layout .statuses-grid {
   margin: auto;
 }
+#mastodon.public-layout .entry,
+.public-layout.public-layout .entry,
+#mastodon.public-layout .entry ~ .entry,
+.public-layout.public-layout .entry ~ .entry {
+  margin: 0;
+}
+#mastodon.public-layout .entry:not(:last-child):not(:first-child),
+.public-layout.public-layout .entry:not(:last-child):not(:first-child),
+#mastodon.public-layout .entry ~ .entry:not(:last-child):not(:first-child),
+.public-layout.public-layout .entry ~ .entry:not(:last-child):not(:first-child) {
+  border-radius: 0 !important;
+}
+#mastodon.public-layout .entry:not(:first-child:last-child):last-child,
+.public-layout.public-layout .entry:not(:first-child:last-child):last-child,
+#mastodon.public-layout .entry ~ .entry:not(:first-child:last-child):last-child,
+.public-layout.public-layout .entry ~ .entry:not(:first-child:last-child):last-child {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+#mastodon.public-layout .entry:not(:first-child:last-child):first-child,
+.public-layout.public-layout .entry:not(:first-child:last-child):first-child,
+#mastodon.public-layout .entry ~ .entry:not(:first-child:last-child):first-child,
+.public-layout.public-layout .entry ~ .entry:not(:first-child:last-child):first-child {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+#mastodon.public-layout .status-public .status__content,
+.public-layout.public-layout .status-public .status__content {
+  margin-top: 0;
+}
+#mastodon.public-layout .detailed-status-public,
+.public-layout.public-layout .detailed-status-public {
+  padding: 20px !important;
+  padding-bottom: 5px !important;
+}
+#mastodon.public-layout .detailed-status-public .status__content,
+.public-layout.public-layout .detailed-status-public .status__content {
+  margin-top: 0;
+}
+#mastodon.public-layout .detailed-status-public .detailed-status__meta,
+.public-layout.public-layout .detailed-status-public .detailed-status__meta {
+  margin-top: 15px;
+  margin-bottom: 10px;
+}
 #mastodon.public-layout .footer .column-3,
 .public-layout.public-layout .footer .column-3,
 #mastodon.public-layout .footer .column-4,
@@ -1448,9 +1657,8 @@
 .layout-multiple-columns #mastodon .columns-area .getting-started__trends {
   padding: 0px 20px;
 }
-#mastodon .modal-root__container,
+.modal-root__container {
-.public-layout .modal-root__container {
+  animation: bounceIn 0.7s !important;
-  animation: bounceIn 0.7s;
 }
 @media (prefers-reduced-motion: no-preference) {
 @-moz-keyframes bounceIn {