From ed47a5e7b86cc0f73ae0117a5af81d1d7a2846a4 Mon Sep 17 00:00:00 2001
From: stux <info@mstdn.social>
Date: Sun, 29 May 2022 17:53:41 +0200
Subject: [PATCH] Removed default styles and added Modern contrast.

---
 styles/fonts/montserrat.scss  |  19 --
 styles/fonts/roboto-mono.scss |  11 -
 styles/fonts/roboto.scss      |  47 ---
 styles/mailer.scss            | 574 ----------------------------------
 styles/modern-contrast.scss   |   9 +
 styles/modern/contrast.scss   |  24 ++
 styles/modern/style.scss      | 520 ++++++++++++++++++++++++------
 themes.yml                    |  16 +
 8 files changed, 482 insertions(+), 738 deletions(-)
 delete mode 100644 styles/fonts/montserrat.scss
 delete mode 100644 styles/fonts/roboto-mono.scss
 delete mode 100644 styles/fonts/roboto.scss
 delete mode 100644 styles/mailer.scss
 create mode 100644 styles/modern-contrast.scss
 create mode 100644 styles/modern/contrast.scss
 create mode 100644 themes.yml

diff --git a/styles/fonts/montserrat.scss b/styles/fonts/montserrat.scss
deleted file mode 100644
index ea7e045..0000000
--- a/styles/fonts/montserrat.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@font-face {
-  font-family: 'mastodon-font-display';
-  src: local('Montserrat'),
-    url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
-    url('../fonts/montserrat/Montserrat-Regular.woff') format('woff'),
-    url('../fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-display: swap;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'mastodon-font-display';
-  src: local('Montserrat Medium'),
-    url('../fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-display: swap;
-  font-style: normal;
-}
diff --git a/styles/fonts/roboto-mono.scss b/styles/fonts/roboto-mono.scss
deleted file mode 100644
index bd9839a..0000000
--- a/styles/fonts/roboto-mono.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@font-face {
-  font-family: 'mastodon-font-monospace';
-  src: local('Roboto Mono'),
-    url('../fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
-    url('../fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
-    url('../fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
-    url('../fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg');
-  font-weight: 400;
-  font-display: swap;
-  font-style: normal;
-}
diff --git a/styles/fonts/roboto.scss b/styles/fonts/roboto.scss
deleted file mode 100644
index f3a6dcb..0000000
--- a/styles/fonts/roboto.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@font-face {
-  font-family: 'mastodon-font-sans-serif';
-  src: local('Roboto Italic'),
-    url('../fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
-    url('../fonts/roboto/roboto-italic-webfont.woff') format('woff'),
-    url('../fonts/roboto/roboto-italic-webfont.ttf') format('truetype'),
-    url('../fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont') format('svg');
-  font-weight: normal;
-  font-display: swap;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'mastodon-font-sans-serif';
-  src: local('Roboto Bold'),
-    url('../fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
-    url('../fonts/roboto/roboto-bold-webfont.woff') format('woff'),
-    url('../fonts/roboto/roboto-bold-webfont.ttf') format('truetype'),
-    url('../fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont') format('svg');
-  font-weight: bold;
-  font-display: swap;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'mastodon-font-sans-serif';
-  src: local('Roboto Medium'),
-    url('../fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
-    url('../fonts/roboto/roboto-medium-webfont.woff') format('woff'),
-    url('../fonts/roboto/roboto-medium-webfont.ttf') format('truetype'),
-    url('../fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont') format('svg');
-  font-weight: 500;
-  font-display: swap;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'mastodon-font-sans-serif';
-  src: local('Roboto'),
-    url('../fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
-    url('../fonts/roboto/roboto-regular-webfont.woff') format('woff'),
-    url('../fonts/roboto/roboto-regular-webfont.ttf') format('truetype'),
-    url('../fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg');
-  font-weight: normal;
-  font-display: swap;
-  font-style: normal;
-}
diff --git a/styles/mailer.scss b/styles/mailer.scss
deleted file mode 100644
index 18fe522..0000000
--- a/styles/mailer.scss
+++ /dev/null
@@ -1,574 +0,0 @@
-@import 'mastodon/variables';
-@import 'fonts/roboto';
-
-table,
-td,
-div {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  width: 100% !important;
-  min-width: 100%;
-  margin: 0;
-  padding: 0;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-}
-
-.email-body {
-  td,
-  div,
-  a,
-  span {
-    line-height: inherit;
-  }
-}
-
-a {
-  &,
-  &:visited,
-  span {
-    text-decoration: none;
-    color: $ui-highlight-color;
-  }
-
-  #outlook & {
-    padding: 0;
-  }
-}
-
-img {
-  outline: none;
-  border: 0;
-  text-decoration: none;
-  -ms-interpolation-mode: bicubic;
-  clear: both;
-  line-height: 100%;
-}
-
-table {
-  border-spacing: 0;
-  mso-table-lspace: 0;
-  mso-table-rspace: 0;
-}
-
-td {
-  vertical-align: top;
-}
-
-.auto-dir {
-  p {
-    unicode-bidi: plaintext;
-  }
-
-  a {
-    unicode-bidi: isolate;
-  }
-}
-
-.email-table,
-.content-section,
-.column,
-.column-cell {
-  width: 100%;
-  min-width: 100%;
-}
-
-.email-body {
-  font-size: 0 !important;
-  line-height: 100%;
-  text-align: center;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.email-start {
-  padding-top: 32px;
-}
-
-.email-end {
-  padding-bottom: 32px;
-}
-
-.email-body,
-html,
-body {
-  background-color: lighten($ui-base-color, 4%);
-}
-
-.email-container,
-.email-row,
-.col-0,
-.col-1,
-.col-2,
-.col-3,
-.col-4,
-.col-5,
-.col-6 {
-  font-size: 0;
-  display: inline-block;
-  width: 100%;
-  min-width: 100%;
-  min-width: 0 !important;
-  vertical-align: top;
-}
-
-.content-cell {
-  width: 100%;
-  min-width: 100%;
-  min-width: 0 !important;
-}
-
-.column-cell {
-  padding-top: 16px;
-  padding-bottom: 16px;
-  vertical-align: top;
-
-  &.button-cell {
-    padding-top: 0;
-  }
-}
-
-.email-container {
-  max-width: 632px;
-  margin: 0 auto;
-  text-align: center;
-}
-
-.email-row {
-  display: block;
-  max-width: 600px !important;
-  margin: 0 auto;
-  text-align: center;
-  clear: both;
-}
-
-.col-0 {
-  max-width: 50px;
-}
-
-.col-1 {
-  max-width: 100px;
-}
-
-.col-2 {
-  max-width: 200px;
-}
-
-.col-3 {
-  max-width: 300px;
-}
-
-.col-4 {
-  max-width: 400px;
-}
-
-.col-5 {
-  max-width: 500px;
-}
-
-.col-6 {
-  max-width: 600px;
-}
-
-.column-cell,
-.column-cell td,
-p {
-  font-family: Helvetica, Arial, sans-serif;
-
-  @media only screen {
-    font-family: $font-sans-serif, sans-serif !important;
-  }
-}
-
-.email-body .column-cell,
-.column-cell,
-p {
-  font-size: 15px;
-  line-height: 23px;
-  color: $ui-primary-color;
-  mso-line-height-rule: exactly;
-  text-rendering: optimizelegibility;
-}
-
-p {
-  display: block;
-  margin-top: 0;
-  margin-bottom: 16px;
-
-  &.small {
-    font-size: 13px;
-  }
-
-  &.lead {
-    font-size: 19px;
-    line-height: 27px;
-  }
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: $ui-secondary-color;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 20px;
-  margin-bottom: 8px;
-  padding: 0;
-  font-weight: 500;
-}
-
-h1 {
-  font-size: 26px;
-  line-height: 36px;
-}
-
-h2 {
-  font-size: 23px;
-  line-height: 30px;
-}
-
-h3 {
-  font-size: 19px;
-  line-height: 25px;
-}
-
-h5 {
-  font-size: 16px;
-  line-height: 21px;
-  font-weight: 700;
-  color: lighten($ui-base-color, 34%);
-}
-
-.input-cell {
-  h5 {
-    margin-top: 4px;
-  }
-}
-
-.input {
-  td {
-    background: darken($ui-base-color, 8%);
-    border-radius: 4px;
-    padding: 16px;
-    line-height: 20px;
-    mso-line-height-rule: exactly;
-    text-align: center;
-    font-weight: 500;
-    font-size: 17px;
-  }
-}
-
-.content-cell,
-.blank-cell {
-  width: 100%;
-  font-size: 0;
-  text-align: center;
-  vertical-align: top;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.content-cell {
-  background-color: darken($ui-base-color, 4%);
-
-  &.darker {
-    background-color: darken($ui-base-color, 8%);
-  }
-}
-
-.hero {
-  background-color: $ui-base-color;
-  padding-top: 20px;
-}
-
-.hero-with-button {
-  padding-bottom: 16px;
-
-  h1 {
-    margin-bottom: 4px;
-  }
-
-  p.lead {
-    margin-bottom: 32px;
-  }
-}
-
-.header {
-  border-radius: 5px 5px 0 0;
-  background-color: darken($ui-base-color, 8%);
-
-  .column-cell {
-    text-align: center;
-    padding-top: 20px;
-    padding-bottom: 8px;
-  }
-}
-
-.content-start {
-  padding-top: 32px;
-}
-
-.content-end {
-  border-radius: 0 0 5px 5px;
-  padding-top: 16px;
-}
-
-.footer {
-  .column-cell,
-  p {
-    color: lighten($ui-base-color, 34%);
-  }
-
-  p {
-    margin-bottom: 0;
-    font-size: 13px;
-
-    &.small {
-      margin-bottom: 0;
-    }
-  }
-
-  a {
-    color: lighten($ui-base-color, 34%);
-    text-decoration: underline;
-  }
-
-  img {
-    opacity: 0.3;
-  }
-}
-
-.logo {
-  position: relative;
-  left: -4px;
-}
-
-.button {
-  display: table;
-  margin-left: auto;
-  margin-right: auto;
-
-  td {
-    line-height: 20px;
-    mso-line-height-rule: exactly;
-    border-radius: 4px;
-    text-align: center;
-    font-weight: 500;
-    font-size: 17px;
-    padding: 0 !important;
-
-    a,
-    a span {
-      color: $primary-text-color;
-      display: block !important;
-      text-align: center !important;
-      vertical-align: top !important;
-      line-height: inherit !important;
-    }
-
-    a {
-      padding: 10px 22px !important;
-      line-height: 26px !important;
-      font-weight: 500 !important;
-    }
-  }
-
-  &.button-small {
-    td {
-      border-radius: 4px;
-      font-size: 14px;
-      padding: 8px 16px;
-
-      a {
-        padding: 5px 16px !important;
-        line-height: 26px !important;
-      }
-    }
-  }
-}
-
-.button-default {
-  background-color: darken($ui-base-color, 8%);
-}
-
-.button-primary {
-  background-color: darken($ui-highlight-color, 3%);
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.padded {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.padded-bottom {
-  padding-bottom: 32px;
-}
-
-.margin-bottom {
-  margin-bottom: 20px;
-}
-
-.hero-icon {
-  width: 64px;
-
-  td {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 100%;
-    mso-line-height-rule: exactly;
-    padding: 16px;
-    border-radius: 80px;
-    background: $success-green;
-  }
-
-  &.warning-icon td {
-    background: $gold-star;
-  }
-
-  &.alert-icon td {
-    background: $error-red;
-  }
-
-  img {
-    max-width: 32px;
-    width: 32px;
-    height: 32px;
-    display: block;
-    line-height: 100%;
-  }
-}
-
-.hr {
-  width: 100%;
-
-  td {
-    font-size: 0;
-    line-height: 1px;
-    mso-line-height-rule: exactly;
-    min-height: 1px;
-    overflow: hidden;
-    height: 2px;
-    background-color: transparent !important;
-    border-top: 1px solid lighten($ui-base-color, 8%);
-  }
-}
-
-.status {
-  padding-bottom: 32px;
-
-  &--highlighted {
-    border: 1px solid lighten($ui-base-color, 8%);
-    border-radius: 4px;
-    padding-bottom: 16px;
-    margin-bottom: 16px;
-  }
-
-  .status-header {
-    td {
-      font-size: 14px;
-      padding-bottom: 15px;
-    }
-
-    bdi {
-      color: $white;
-      font-size: 16px;
-      display: block;
-      font-weight: 500;
-    }
-
-    td:first-child {
-      padding-right: 10px;
-    }
-
-    img {
-      width: 48px;
-      height: 48px;
-      border-radius: 4px;
-    }
-  }
-
-  p {
-    font-size: 19px;
-    margin-bottom: 20px;
-
-    &.status-footer {
-      color: lighten($ui-base-color, 26%);
-      font-size: 14px;
-      margin-bottom: 0;
-
-      a {
-        color: lighten($ui-base-color, 26%);
-      }
-    }
-  }
-}
-
-.border-top {
-  border-top: 1px solid lighten($ui-base-color, 8%);
-}
-
-ul {
-  padding-left: 15px;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 16px;
-
-  li {
-    margin-bottom: 16px;
-    color: lighten($ui-base-color, 26%);
-
-    span {
-      color: $ui-primary-color;
-    }
-  }
-}
-
-ul.rules-list {
-  padding-top: 0;
-}
-
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
-  body {
-    min-height: 1024px !important;
-  }
-}
-
-@media (max-width: 697px) {
-  .email-container,
-  .col-1,
-  .col-2,
-  .col-3,
-  .col-4,
-  .col-5,
-  .col-6 {
-    width: 100% !important;
-    max-width: none !important;
-  }
-
-  .email-start {
-    padding-top: 16px !important;
-  }
-
-  .email-end {
-    padding-bottom: 16px !important;
-  }
-
-  .padded {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-}
diff --git a/styles/modern-contrast.scss b/styles/modern-contrast.scss
new file mode 100644
index 0000000..1fb4c61
--- /dev/null
+++ b/styles/modern-contrast.scss
@@ -0,0 +1,9 @@
+@import 'modern/contrast';
+@import 'application';
+@import 'modern/style';
+@import 'contrast/diff';
+
+.layout-multiple-columns .column {
+	flex-grow: 1;
+	max-width: 500px;
+}
diff --git a/styles/modern/contrast.scss b/styles/modern/contrast.scss
new file mode 100644
index 0000000..4ce7425
--- /dev/null
+++ b/styles/modern/contrast.scss
@@ -0,0 +1,24 @@
+// Dependent colors
+$black: #000000;
+
+$classic-base-color: #282c37;
+$classic-primary-color: #9baec8;
+$classic-secondary-color: #d9e1e8;
+$classic-highlight-color: #e7b01c;
+
+$ui-base-color: $classic-base-color !default;
+$ui-primary-color: $classic-primary-color !default;
+$ui-secondary-color: $classic-secondary-color !default;
+
+// Differences
+$ui-highlight-color: #e7b01c;
+
+$darker-text-color: lighten($ui-primary-color, 20%) !default;
+$dark-text-color: lighten($ui-primary-color, 12%) !default;
+$secondary-text-color: lighten($ui-secondary-color, 6%) !default;
+$highlight-text-color: $classic-highlight-color !default;
+$action-button-color: #8d9ac2;
+
+$inverted-text-color: $black !default;
+$lighter-text-color: darken($ui-base-color, 6%) !default;
+$light-text-color: darken($ui-primary-color, 40%) !default;
diff --git a/styles/modern/style.scss b/styles/modern/style.scss
index 07b07f8..038ef94 100644
--- a/styles/modern/style.scss
+++ b/styles/modern/style.scss
@@ -7,8 +7,8 @@
   --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,
-.public-layout button,
+#mastodon button:not(.column-header__button),
+.public-layout button:not(.column-header__button),
 #mastodon video,
 .public-layout video,
 #mastodon input,
@@ -18,9 +18,25 @@
 #mastodon .privacy-dropdown__dropdown,
 .public-layout .privacy-dropdown__dropdown,
 #mastodon .react-toggle-track,
-.public-layout .react-toggle-track {
+.public-layout .react-toggle-track,
+#mastodon .reply-indicator,
+.public-layout .reply-indicator,
+#mastodon .compose-form__warning,
+.public-layout .compose-form__warning {
   border-radius: var(--radius) !important;
 }
+#mastodon button:focus-visible,
+.public-layout button:focus-visible,
+#mastodon .focusable:focus-visible,
+.public-layout .focusable:focus-visible,
+#mastodon a:focus-visible,
+.public-layout a:focus-visible,
+#mastodon .media-gallery__item-thumbnail:focus-visible,
+.public-layout .media-gallery__item-thumbnail:focus-visible {
+  box-shadow: inset 0 0 0 2px #dc7b18;
+  outline: 2px #dc7b18 solid;
+  outline-offset: -2px;
+}
 #mastodon *,
 .public-layout * {
   border-color: var(--border-color) !important;
@@ -60,6 +76,16 @@
   transform: scale(0.95);
   transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important;
 }
+#mastodon .status__content__spoiler-link span,
+.public-layout .status__content__spoiler-link span {
+  display: inline-block;
+  transition: transform 0.4s cubic-bezier(0, 0, 0, 4) !important;
+}
+#mastodon .status__content__spoiler-link:active span,
+.public-layout .status__content__spoiler-link:active span {
+  transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important;
+  transform: translateY(1px);
+}
 #mastodon .react-toggle-thumb,
 .public-layout .react-toggle-thumb {
   pointer-events: none;
@@ -139,38 +165,40 @@
 .public-layout .compose-form .compose-form__buttons-wrapper {
   border-radius: 0 0 var(--radius) var(--radius) !important;
 }
-#mastodon .getting-started__footer,
-.public-layout .getting-started__footer {
-  opacity: 0.5;
-  transition: opacity 0.4s;
-}
-#mastodon .getting-started__footer a,
-.public-layout .getting-started__footer a {
-  text-decoration: none;
-}
-#mastodon .getting-started__footer > p,
-.public-layout .getting-started__footer > p {
-  font-size: 0;
-  line-height: 0;
-  opacity: 0;
-  transition: font-size 0.2s, line-height 0.2s;
-  transition-duration: 0.2s;
-}
-#mastodon .getting-started__footer:hover,
-.public-layout .getting-started__footer:hover,
-#mastodon .getting-started__footer:focus-within,
-.public-layout .getting-started__footer:focus-within {
-  opacity: 1;
-}
-#mastodon .getting-started__footer:hover > p,
-.public-layout .getting-started__footer:hover > p,
-#mastodon .getting-started__footer:focus-within > p,
-.public-layout .getting-started__footer:focus-within > p {
-  font-size: 1em;
-  line-height: 1.5;
-  opacity: 1;
-  transform: translateY(0px);
-  transition: font-size 0.1s, line-height 0.25s cubic-bezier(0, 0, 0, 1.3), opacity 0.2s 0.1s;
+@media (min-width: 895px) {
+  #mastodon .getting-started__footer,
+  .public-layout .getting-started__footer {
+    opacity: 0.5;
+    transition: opacity 0.4s;
+  }
+  #mastodon .getting-started__footer a,
+  .public-layout .getting-started__footer a {
+    text-decoration: none;
+  }
+  #mastodon .getting-started__footer > p,
+  .public-layout .getting-started__footer > p {
+    font-size: 0;
+    line-height: 0;
+    opacity: 0;
+    transition: font-size 0.2s, line-height 0.3s cubic-bezier(1, 0, 0, 0);
+    transition-duration: 0.2s;
+  }
+  #mastodon .getting-started__footer:hover,
+  .public-layout .getting-started__footer:hover,
+  #mastodon .getting-started__footer:focus-within,
+  .public-layout .getting-started__footer:focus-within {
+    opacity: 1;
+  }
+  #mastodon .getting-started__footer:hover > p,
+  .public-layout .getting-started__footer:hover > p,
+  #mastodon .getting-started__footer:focus-within > p,
+  .public-layout .getting-started__footer:focus-within > p {
+    font-size: 1em;
+    line-height: 1.5;
+    opacity: 1;
+    transform: translateY(0px);
+    transition: font-size 0.1s, line-height 0.3s cubic-bezier(0.8, 0, 0, 1.2), opacity 0.2s 0.1s;
+  }
 }
 #mastodon .columns-area__panels__main,
 .public-layout .columns-area__panels__main {
@@ -279,6 +307,14 @@
 .public-layout .account-timeline__header .account__header__tabs__name h1 span {
   margin-right: 0.4em;
 }
+#mastodon .account-timeline__header .account-role,
+.public-layout .account-timeline__header .account-role {
+  margin-right: 0.4em;
+}
+#mastodon .account-timeline__header .account-role > span,
+.public-layout .account-timeline__header .account-role > span {
+  margin: 0 !important;
+}
 #mastodon .account-timeline__header .account__header__bio,
 .public-layout .account-timeline__header .account__header__bio {
   margin: 0;
@@ -400,12 +436,23 @@
 .with-modals .public-layout .account__section-headline {
   border: 0 !important;
 }
+#mastodon .account__section-headline a,
+.public-layout .account__section-headline a,
+#mastodon .account__section-headline button,
+.public-layout .account__section-headline button {
+  background: none;
+  border-radius: 0 !important;
+}
 #mastodon .account__section-headline a span,
-.public-layout .account__section-headline a span {
+.public-layout .account__section-headline a span,
+#mastodon .account__section-headline button span,
+.public-layout .account__section-headline button span {
   font-weight: 400;
 }
 #mastodon .account__section-headline a.active span,
-.public-layout .account__section-headline a.active span {
+.public-layout .account__section-headline a.active span,
+#mastodon .account__section-headline button.active span,
+.public-layout .account__section-headline button.active span {
   font-weight: 700;
 }
 #mastodon .notification__filter-bar,
@@ -423,6 +470,12 @@
   transition: background 0.2s, box-shadow 0.4s, margin 0.2s, border 0.2s;
   animation: fadeUp 0.4s forwards cubic-bezier(0, 1, 1, 1);
 }
+#mastodon .focusable.focusable,
+.public-layout .focusable.focusable,
+#mastodon .entry.focusable,
+.public-layout .entry.focusable {
+  background: none;
+}
 #mastodon .focusable.entry,
 .public-layout .focusable.entry,
 #mastodon .entry.entry,
@@ -438,9 +491,21 @@
 #mastodon .focusable:hover,
 .public-layout .focusable:hover,
 #mastodon .entry:hover,
-.public-layout .entry:hover {
+.public-layout .entry:hover,
+#mastodon .focusable:focus-within,
+.public-layout .focusable:focus-within,
+#mastodon .entry:focus-within,
+.public-layout .entry:focus-within {
   background-color: var(--hover-color);
 }
+#mastodon .status__prepend,
+.public-layout .status__prepend,
+#mastodon .notification__message,
+.public-layout .notification__message {
+  padding-top: 15px !important;
+  padding-bottom: 0 !important;
+  margin-bottom: -10px !important;
+}
 #mastodon .status__info,
 .public-layout .status__info {
   margin-top: 5px;
@@ -450,16 +515,61 @@
   top: 15px;
   left: 15px !important;
 }
+#mastodon .status__info .status__avatar .account__avatar-overlay-base,
+.public-layout .status__info .status__avatar .account__avatar-overlay-base {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  border-radius: var(--radius);
+}
+#mastodon .status__info .status__avatar .account__avatar-overlay-overlay,
+.public-layout .status__info .status__avatar .account__avatar-overlay-overlay {
+  border-radius: var(--radius-round);
+  bottom: -10%;
+  right: -10%;
+}
+#mastodon .status__info .display-name strong,
+.public-layout .status__info .display-name strong {
+  font-weight: 600;
+}
 #mastodon .status__content,
 .public-layout .status__content {
   min-height: 1.4em;
   padding-top: 2px;
+  margin-inline: -100px;
+  padding-inline: 100px;
+}
+#mastodon .status__content.status__content--with-spoiler > p:first-child,
+.public-layout .status__content.status__content--with-spoiler > p:first-child {
+  margin-bottom: 0;
+}
+#mastodon .status__content__spoiler-link,
+.public-layout .status__content__spoiler-link {
+  display: block;
+  width: unset;
+  padding: 1em;
+  color: inherit;
+  font-weight: 700;
+  background: none;
+  margin-left: -100px;
+  padding-left: 100px;
+  width: calc(100% + 150px);
+  text-align: left;
+  font-size: 0.8em;
+}
+#mastodon .status__content__spoiler-link:hover,
+.public-layout .status__content__spoiler-link:hover,
+#mastodon .status__content__spoiler-link:focus,
+.public-layout .status__content__spoiler-link:focus {
+  background-color: var(--hover-color);
 }
 #mastodon .media-gallery,
 .public-layout .media-gallery,
 #mastodon .video-player,
-.public-layout .video-player {
-  margin-left: -62px;
+.public-layout .video-player,
+#mastodon .status-card.horizontal.interactive,
+.public-layout .status-card.horizontal.interactive {
+  margin-left: calc(15px - var(--status-left-padding));
   width: unset;
   box-shadow: var(--shadow-low);
   border-radius: var(--radius);
@@ -471,36 +581,67 @@
 #mastodon .detailed-status__wrapper,
 .public-layout .detailed-status__wrapper,
 #mastodon .detailed-status,
-.public-layout .detailed-status {
+.public-layout .detailed-status,
+#mastodon .picture-in-picture,
+.public-layout .picture-in-picture {
   box-shadow: var(--shadow);
 }
 #mastodon .detailed-status__wrapper.detailed-status__wrapper,
 .public-layout .detailed-status__wrapper.detailed-status__wrapper,
 #mastodon .detailed-status.detailed-status__wrapper,
-.public-layout .detailed-status.detailed-status__wrapper {
+.public-layout .detailed-status.detailed-status__wrapper,
+#mastodon .picture-in-picture.detailed-status__wrapper,
+.public-layout .picture-in-picture.detailed-status__wrapper {
   margin-block: 15px;
 }
 #mastodon .detailed-status__wrapper .media-gallery,
 .public-layout .detailed-status__wrapper .media-gallery,
 #mastodon .detailed-status .media-gallery,
 .public-layout .detailed-status .media-gallery,
+#mastodon .picture-in-picture .media-gallery,
+.public-layout .picture-in-picture .media-gallery,
 #mastodon .detailed-status__wrapper .video-player,
 .public-layout .detailed-status__wrapper .video-player,
 #mastodon .detailed-status .video-player,
-.public-layout .detailed-status .video-player {
+.public-layout .detailed-status .video-player,
+#mastodon .picture-in-picture .video-player,
+.public-layout .picture-in-picture .video-player,
+#mastodon .detailed-status__wrapper .status-card.horizontal.interactive,
+.public-layout .detailed-status__wrapper .status-card.horizontal.interactive,
+#mastodon .detailed-status .status-card.horizontal.interactive,
+.public-layout .detailed-status .status-card.horizontal.interactive,
+#mastodon .picture-in-picture .status-card.horizontal.interactive,
+.public-layout .picture-in-picture .status-card.horizontal.interactive {
   margin-left: 0 !important;
   max-height: unset !important;
 }
-#mastodon .status__action-bar,
-.public-layout .status__action-bar,
-#mastodon .detailed-status__action-bar,
-.public-layout .detailed-status__action-bar {
-  padding-top: 0;
+#mastodon .detailed-status__wrapper .status__content,
+.public-layout .detailed-status__wrapper .status__content,
+#mastodon .detailed-status .status__content,
+.public-layout .detailed-status .status__content,
+#mastodon .picture-in-picture .status__content,
+.public-layout .picture-in-picture .status__content {
+  min-height: unset !important;
+}
+#mastodon .picture-in-picture .picture-in-picture__header,
+.public-layout .picture-in-picture .picture-in-picture__header {
+  border-radius: var(--radius) var(--radius) 0 0;
+}
+#mastodon .picture-in-picture .video-player,
+.public-layout .picture-in-picture .video-player {
+  margin: 0 !important;
+  border-radius: 0 !important;
+}
+#mastodon .picture-in-picture .picture-in-picture__footer,
+.public-layout .picture-in-picture .picture-in-picture__footer {
+  border-radius: 0 0 var(--radius) var(--radius);
 }
 #mastodon .status__action-bar .icon-button,
 .public-layout .status__action-bar .icon-button,
 #mastodon .detailed-status__action-bar .icon-button,
-.public-layout .detailed-status__action-bar .icon-button {
+.public-layout .detailed-status__action-bar .icon-button,
+#mastodon .picture-in-picture__footer .icon-button,
+.public-layout .picture-in-picture__footer .icon-button {
   display: inline-flex;
   align-items: center;
   width: unset !important;
@@ -509,10 +650,20 @@
   flex: 0 1 auto !important;
   min-width: 0;
 }
+#mastodon .status__action-bar .icon-button:last-child,
+.public-layout .status__action-bar .icon-button:last-child,
+#mastodon .detailed-status__action-bar .icon-button:last-child,
+.public-layout .detailed-status__action-bar .icon-button:last-child,
+#mastodon .picture-in-picture__footer .icon-button:last-child,
+.public-layout .picture-in-picture__footer .icon-button:last-child {
+  margin-right: 0 !important;
+}
 #mastodon .status__action-bar .icon-button::after,
 .public-layout .status__action-bar .icon-button::after,
 #mastodon .detailed-status__action-bar .icon-button::after,
-.public-layout .detailed-status__action-bar .icon-button::after {
+.public-layout .detailed-status__action-bar .icon-button::after,
+#mastodon .picture-in-picture__footer .icon-button::after,
+.public-layout .picture-in-picture__footer .icon-button::after {
   content: attr(aria-label);
   font-size: 0.7em;
   margin-left: 0.5em;
@@ -524,94 +675,178 @@
 .public-layout .status__action-bar .status__action-bar-dropdown,
 #mastodon .detailed-status__action-bar .status__action-bar-dropdown,
 .public-layout .detailed-status__action-bar .status__action-bar-dropdown,
+#mastodon .picture-in-picture__footer .status__action-bar-dropdown,
+.public-layout .picture-in-picture__footer .status__action-bar-dropdown,
 #mastodon .status__action-bar .detailed-status__action-bar-dropdown,
 .public-layout .status__action-bar .detailed-status__action-bar-dropdown,
 #mastodon .detailed-status__action-bar .detailed-status__action-bar-dropdown,
 .public-layout .detailed-status__action-bar .detailed-status__action-bar-dropdown,
+#mastodon .picture-in-picture__footer .detailed-status__action-bar-dropdown,
+.public-layout .picture-in-picture__footer .detailed-status__action-bar-dropdown,
 #mastodon .status__action-bar .detailed-status__button,
 .public-layout .status__action-bar .detailed-status__button,
 #mastodon .detailed-status__action-bar .detailed-status__button,
-.public-layout .detailed-status__action-bar .detailed-status__button {
+.public-layout .detailed-status__action-bar .detailed-status__button,
+#mastodon .picture-in-picture__footer .detailed-status__button,
+.public-layout .picture-in-picture__footer .detailed-status__button {
   display: contents;
 }
 #mastodon .status__action-bar.detailed-status__action-bar,
 .public-layout .status__action-bar.detailed-status__action-bar,
 #mastodon .detailed-status__action-bar.detailed-status__action-bar,
-.public-layout .detailed-status__action-bar.detailed-status__action-bar {
+.public-layout .detailed-status__action-bar.detailed-status__action-bar,
+#mastodon .picture-in-picture__footer.detailed-status__action-bar,
+.public-layout .picture-in-picture__footer.detailed-status__action-bar,
+#mastodon .status__action-bar.picture-in-picture__footer,
+.public-layout .status__action-bar.picture-in-picture__footer,
+#mastodon .detailed-status__action-bar.picture-in-picture__footer,
+.public-layout .detailed-status__action-bar.picture-in-picture__footer,
+#mastodon .picture-in-picture__footer.picture-in-picture__footer,
+.public-layout .picture-in-picture__footer.picture-in-picture__footer {
   padding-right: 15px !important;
   padding-left: 15px !important;
 }
 #mastodon .status__action-bar.detailed-status__action-bar .icon-button,
 .public-layout .status__action-bar.detailed-status__action-bar .icon-button,
 #mastodon .detailed-status__action-bar.detailed-status__action-bar .icon-button,
-.public-layout .detailed-status__action-bar.detailed-status__action-bar .icon-button {
+.public-layout .detailed-status__action-bar.detailed-status__action-bar .icon-button,
+#mastodon .picture-in-picture__footer.detailed-status__action-bar .icon-button,
+.public-layout .picture-in-picture__footer.detailed-status__action-bar .icon-button,
+#mastodon .status__action-bar.picture-in-picture__footer .icon-button,
+.public-layout .status__action-bar.picture-in-picture__footer .icon-button,
+#mastodon .detailed-status__action-bar.picture-in-picture__footer .icon-button,
+.public-layout .detailed-status__action-bar.picture-in-picture__footer .icon-button,
+#mastodon .picture-in-picture__footer.picture-in-picture__footer .icon-button,
+.public-layout .picture-in-picture__footer.picture-in-picture__footer .icon-button {
   flex-grow: 1 !important;
   justify-content: center;
 }
+#mastodon .status__action-bar.picture-in-picture__footer .icon-button::after,
+.public-layout .status__action-bar.picture-in-picture__footer .icon-button::after,
+#mastodon .detailed-status__action-bar.picture-in-picture__footer .icon-button::after,
+.public-layout .detailed-status__action-bar.picture-in-picture__footer .icon-button::after,
+#mastodon .picture-in-picture__footer.picture-in-picture__footer .icon-button::after,
+.public-layout .picture-in-picture__footer.picture-in-picture__footer .icon-button::after {
+  content: unset !important;
+}
 #mastodon .status,
 .public-layout .status {
+  --status-left-padding: 78px;
   overflow: visible !important;
-  padding: 15px 15px 15px 78px !important;
+  padding: 15px 15px 15px var(--status-left-padding) !important;
 }
 #mastodon .detailed-status,
 .public-layout .detailed-status {
   padding: 15px !important;
 }
 #mastodon .tabs-bar__wrapper,
-.public-layout .tabs-bar__wrapper {
+.public-layout .tabs-bar__wrapper,
+#mastodon .column-back-button--slim .column-back-button,
+.public-layout .column-back-button--slim .column-back-button {
   transition: margin-left 0.2s cubic-bezier(0, 0, 0, 1.1);
 }
+.column-header {
+  font-weight: 600;
+}
+.column-header,
+.column-header button {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.column-header ~ .scrollable {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
 @media (min-width: 1191px) {
   #mastodon .tabs-bar__wrapper,
-  .public-layout .tabs-bar__wrapper {
+  .public-layout .tabs-bar__wrapper,
+  #mastodon .column-back-button--slim .column-back-button,
+  .public-layout .column-back-button--slim .column-back-button {
     position: fixed;
     width: 285px;
     margin-left: 600px;
-    padding-top: 0;
+    top: 0 !important;
+    left: unset !important;
+    right: unset !important;
+    min-height: 48px !important;
     margin-top: 30px;
     overflow: clip;
     border-radius: var(--radius) var(--radius) !important;
     box-shadow: 0 12px 12px -12px rgba(0,0,0,0.1);
   }
-  #mastodon .tabs-bar__wrapper .column-header,
-  .public-layout .tabs-bar__wrapper .column-header,
-  #mastodon .tabs-bar__wrapper .column-header__buttons button,
-  .public-layout .tabs-bar__wrapper .column-header__buttons button {
-    background: none !important;
+  #mastodon .tabs-bar__wrapper:not(.column-back-button),
+  .public-layout .tabs-bar__wrapper:not(.column-back-button),
+  #mastodon .column-back-button--slim .column-back-button:not(.column-back-button),
+  .public-layout .column-back-button--slim .column-back-button:not(.column-back-button) {
+    padding-top: 0;
   }
   #mastodon .tabs-bar__wrapper .column-header,
-  .public-layout .tabs-bar__wrapper .column-header {
-    font-weight: 600;
+  .public-layout .tabs-bar__wrapper .column-header,
+  #mastodon .column-back-button--slim .column-back-button .column-header,
+  .public-layout .column-back-button--slim .column-back-button .column-header,
+  #mastodon .tabs-bar__wrapper .column-header__buttons button,
+  .public-layout .tabs-bar__wrapper .column-header__buttons button,
+  #mastodon .column-back-button--slim .column-back-button .column-header__buttons button,
+  .public-layout .column-back-button--slim .column-back-button .column-header__buttons button {
+    background: none !important;
   }
 }
 @media (min-width: 895px) and (max-width: 1191px) {
-  #mastodon .tabs-bar__wrapper,
-  .public-layout .tabs-bar__wrapper {
+  #mastodon .tabs-bar__wrapper.column-back-button,
+  .public-layout .tabs-bar__wrapper.column-back-button,
+  #mastodon .column-back-button--slim .column-back-button.column-back-button,
+  .public-layout .column-back-button--slim .column-back-button.column-back-button {
+    border-radius: 0 !important;
+  }
+  #mastodon .tabs-bar__wrapper:not(.column-back-button),
+  .public-layout .tabs-bar__wrapper:not(.column-back-button),
+  #mastodon .column-back-button--slim .column-back-button:not(.column-back-button),
+  .public-layout .column-back-button--slim .column-back-button:not(.column-back-button) {
     padding-top: 0;
   }
-  #mastodon .tabs-bar__wrapper .tabs-bar,
-  .public-layout .tabs-bar__wrapper .tabs-bar {
+  #mastodon .tabs-bar__wrapper:not(.column-back-button) .tabs-bar,
+  .public-layout .tabs-bar__wrapper:not(.column-back-button) .tabs-bar,
+  #mastodon .column-back-button--slim .column-back-button:not(.column-back-button) .tabs-bar,
+  .public-layout .column-back-button--slim .column-back-button:not(.column-back-button) .tabs-bar {
     margin-bottom: 0;
     border: 0 !important;
   }
-  #mastodon .tabs-bar__wrapper #tabs-bar__portal,
-  .public-layout .tabs-bar__wrapper #tabs-bar__portal {
+  #mastodon .tabs-bar__wrapper:not(.column-back-button) #tabs-bar__portal,
+  .public-layout .tabs-bar__wrapper:not(.column-back-button) #tabs-bar__portal,
+  #mastodon .column-back-button--slim .column-back-button:not(.column-back-button) #tabs-bar__portal,
+  .public-layout .column-back-button--slim .column-back-button:not(.column-back-button) #tabs-bar__portal {
     border-radius: 0 !important;
   }
-  #mastodon .tabs-bar__wrapper #tabs-bar__portal .column-header,
-  .public-layout .tabs-bar__wrapper #tabs-bar__portal .column-header,
-  #mastodon .tabs-bar__wrapper #tabs-bar__portal button,
-  .public-layout .tabs-bar__wrapper #tabs-bar__portal button {
+  #mastodon .tabs-bar__wrapper:not(.column-back-button) #tabs-bar__portal .column-header,
+  .public-layout .tabs-bar__wrapper:not(.column-back-button) #tabs-bar__portal .column-header,
+  #mastodon .column-back-button--slim .column-back-button:not(.column-back-button) #tabs-bar__portal .column-header,
+  .public-layout .column-back-button--slim .column-back-button:not(.column-back-button) #tabs-bar__portal .column-header,
+  #mastodon .tabs-bar__wrapper:not(.column-back-button) #tabs-bar__portal button,
+  .public-layout .tabs-bar__wrapper:not(.column-back-button) #tabs-bar__portal button,
+  #mastodon .column-back-button--slim .column-back-button:not(.column-back-button) #tabs-bar__portal button,
+  .public-layout .column-back-button--slim .column-back-button:not(.column-back-button) #tabs-bar__portal button {
     border-radius: 0 !important;
   }
-  #mastodon .tabs-bar__wrapper ~ .columns-area .scrollable,
-  .public-layout .tabs-bar__wrapper ~ .columns-area .scrollable {
+  #mastodon .tabs-bar__wrapper:not(.column-back-button) ~ .columns-area .scrollable,
+  .public-layout .tabs-bar__wrapper:not(.column-back-button) ~ .columns-area .scrollable,
+  #mastodon .column-back-button--slim .column-back-button:not(.column-back-button) ~ .columns-area .scrollable,
+  .public-layout .column-back-button--slim .column-back-button:not(.column-back-button) ~ .columns-area .scrollable {
+    border-radius: 0 !important;
+  }
+  #mastodon .columns-area__panels__main,
+  #mastodon .columns-area__panels__main .columns-area {
+    padding-top: 0 !important;
+  }
+  #mastodon .columns-area__panels__main > div,
+  #mastodon .columns-area__panels__main .scrollable {
     border-radius: 0 !important;
   }
 }
 @media (min-width: 1191px) and (min-width: 1320px) {
   #mastodon .tabs-bar__wrapper,
-  .public-layout .tabs-bar__wrapper {
+  .public-layout .tabs-bar__wrapper,
+  #mastodon .column-back-button--slim .column-back-button,
+  .public-layout .column-back-button--slim .column-back-button {
     margin-left: calc(var(--tl-width) - 5px);
   }
 }
@@ -716,9 +951,54 @@
   text-align: right;
 }
 @media (max-width: 895px) {
+  #mastodon .columns-area--mobile > .column > .column-header__wrapper,
+  .public-layout .columns-area--mobile > .column > .column-header__wrapper {
+    height: 100vh;
+    width: 100vw;
+    position: fixed;
+    top: 0;
+  }
+  #mastodon .columns-area--mobile > .column > .column-header__wrapper .column-header,
+  .public-layout .columns-area--mobile > .column > .column-header__wrapper .column-header {
+    height: 100%;
+    background: none;
+    border-radius: var(--radius) !important;
+  }
+  #mastodon .columns-area--mobile > .column > .column-header__wrapper .column-header button,
+  .public-layout .columns-area--mobile > .column > .column-header__wrapper .column-header button {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0 !important;
+  }
+  #mastodon .columns-area--mobile > .column > .column-header__wrapper .column-header button i,
+  .public-layout .columns-area--mobile > .column > .column-header__wrapper .column-header button i {
+    font-size: 2em;
+    margin: 0 !important;
+    margin-bottom: 1em !important;
+  }
   #mastodon .columns-area__panels__main,
   .public-layout .columns-area__panels__main {
     padding: 0 !important;
+    max-width: unset;
+  }
+  #mastodon .columns-area__panels__main .scrollable,
+  .public-layout .columns-area__panels__main .scrollable {
+    padding: 5px !important;
+    padding-bottom: 40vh !important;
+  }
+  #mastodon .columns-area__panels__main .scrollable::before,
+  .public-layout .columns-area__panels__main .scrollable::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: inherit;
+    z-index: -1;
+  }
+  #mastodon .columns-area__panels__main .scrollable .account-timeline__header,
+  .public-layout .columns-area__panels__main .scrollable .account-timeline__header {
+    margin: -5px !important;
   }
   #mastodon .is-composing .columns-area__panels__main,
   .public-layout .is-composing .columns-area__panels__main {
@@ -727,9 +1007,43 @@
   #mastodon .columns-area__panels__main .scrollable,
   .public-layout .columns-area__panels__main .scrollable,
   #mastodon .columns-area__panels__main .account__header__image,
-  .public-layout .columns-area__panels__main .account__header__image {
+  .public-layout .columns-area__panels__main .account__header__image,
+  #mastodon .columns-area__panels__main > div,
+  .public-layout .columns-area__panels__main > div {
     border-radius: 0 !important;
   }
+  #mastodon .status__prepend,
+  .public-layout .status__prepend,
+  #mastodon .notification__message,
+  .public-layout .notification__message {
+    margin-bottom: -5px !important;
+  }
+  #mastodon .status,
+  .public-layout .status {
+    --status-left-padding: 70px !important;
+    padding-top: 14px !important;
+  }
+  #mastodon .status .status__avatar,
+  .public-layout .status .status__avatar {
+    left: 14px !important;
+    width: 45px !important;
+    height: 45px !important;
+    background-size: 45px !important;
+  }
+  #mastodon .status .status__avatar > div,
+  .public-layout .status .status__avatar > div {
+    width: 100% !important;
+    height: 100% !important;
+    background-size: cover !important;
+  }
+  #mastodon .status .media-gallery,
+  .public-layout .status .media-gallery,
+  #mastodon .status .video-player,
+  .public-layout .status .video-player,
+  #mastodon .status .status-card.horizontal.interactive,
+  .public-layout .status .status-card.horizontal.interactive {
+    margin-bottom: 0 !important;
+  }
   #mastodon .tabs-bar__wrapper,
   .public-layout .tabs-bar__wrapper {
     position: fixed !important;
@@ -744,7 +1058,6 @@
     background: none;
     border-radius: 0 !important;
     pointer-events: none;
-    filter: brightness(0.95);
   }
   #mastodon .tabs-bar__wrapper > *,
   .public-layout .tabs-bar__wrapper > * {
@@ -759,6 +1072,7 @@
     color: #fff !important;
     overflow: visible !important;
     padding-inline: 5px;
+    box-shadow: 0 0 24px rgba(0,0,0,0.1);
   }
   #mastodon .tabs-bar__wrapper .tabs-bar a,
   .public-layout .tabs-bar__wrapper .tabs-bar a {
@@ -818,6 +1132,8 @@
     width: max-content !important;
     box-shadow: var(--shadow) !important;
     max-width: calc(100vw - 130px);
+    border-radius: var(--radius-round) !important;
+    overflow: hidden;
   }
   #mastodon .tabs-bar__wrapper #tabs-bar__portal > button,
   .public-layout .tabs-bar__wrapper #tabs-bar__portal > button {
@@ -827,16 +1143,14 @@
   .public-layout .tabs-bar__wrapper #tabs-bar__portal button {
     min-width: 60px;
   }
+  #mastodon .tabs-bar__wrapper #tabs-bar__portal .column-header > button,
+  .public-layout .tabs-bar__wrapper #tabs-bar__portal .column-header > button {
+    padding-right: 15px;
+  }
   #mastodon .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible,
   .public-layout .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible {
-    transition: margin-top 0.2s cubic-bezier(0, 0, 0, 2);
-    max-width: 100%;
-    border-radius: var(--radius);
-  }
-  #mastodon .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible:not(.collapsed),
-  .public-layout .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible:not(.collapsed) {
-    width: calc(100vw - 40px);
-    margin-top: 5px;
+    max-width: calc(100vw - 40px) !important;
+    opacity: 1 !important;
   }
   .floating-action-button {
     bottom: 70px;
@@ -862,6 +1176,18 @@
     overflow: hidden !important;
     padding-left: 70px !important;
   }
+  #mastodon .getting-started,
+  .public-layout .getting-started {
+    padding-bottom: 60px;
+    margin-top: auto;
+    border-radius: var(--radius) var(--radius) 0 0;
+  }
+  .search-popout {
+    max-width: unset !important;
+    width: calc(100vw - 70px) !important;
+    position: fixed;
+    left: 15px;
+  }
 }
 .layout-multiple-columns #mastodon .columns-area {
   overflow: auto hidden !important;
@@ -1042,4 +1368,24 @@
       opacity: 0;
     }
 }
+@-moz-keyframes fadeLeft {
+    from {
+      transform: translateX(20px) opacity(0);
+    }
+}
+@-webkit-keyframes fadeLeft {
+    from {
+      transform: translateX(20px) opacity(0);
+    }
+}
+@-o-keyframes fadeLeft {
+    from {
+      transform: translateX(20px) opacity(0);
+    }
+}
+@keyframes fadeLeft {
+    from {
+      transform: translateX(20px) opacity(0);
+    }
+}
 }
diff --git a/themes.yml b/themes.yml
new file mode 100644
index 0000000..691e46d
--- /dev/null
+++ b/themes.yml
@@ -0,0 +1,16 @@
+default: styles/application.scss
+contrast: styles/contrast.scss
+mastodon-light: styles/mastodon-light.scss
+modern-dark: styles/modern-dark.scss
+modern-light: styles/modern-light.scss
+modern-contrast: styles/modern-contrast.scss
+coffee-dark: styles/coffee-dark.scss
+coffee-light: styles/coffee-light.scss
+dark-red: styles/dark-red.scss
+light-red: styles/light-red.scss
+photon-light: styles/photon_light.scss
+photon-dark: styles/photon_dark.scss
+photon-green: styles/photon_green.scss
+photon-purple: styles/photon_purple.scss
+cute: styles/cute.scss
+droid: styles/droid.scss