Gearheads: add translation (en) for Bird UI theme

app/javascript/styles/elephant/layout-multiple-columns.scss

@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @rolle@mementomori.social
-   1.5.8 */
+   1.6.4 */
 
 /* CSS variables */
 :root {
@@ -338,6 +338,7 @@ body.layout-multiple-columns {
   width: 50px;
 }
 
+.layout-multiple-columns .ui__header__logo img,
 .layout-multiple-columns .ui__header__logo svg {
   display: none;
 }
@@ -361,10 +362,10 @@ body.layout-multiple-columns {
 
 /* Things that should have the mid font-size */
 .layout-multiple-columns .account__header__extra__links,
-.layout-multiple-columns .account__header__account-note textarea,
+.layout-multiple-columns .columns-area__panels__pane--compositional .account__header__account-note textarea,
 .layout-multiple-columns .account__header__content,
-.layout-multiple-columns .compose-form .autosuggest-textarea__textarea,
+.layout-multiple-columns .columns-area__panels__pane--compositional .compose-form .autosuggest-textarea__textarea,
-.layout-multiple-columns .compose-form .spoiler-input__input {
+.layout-multiple-columns .columns-area__panels__pane--compositional .compose-form .spoiler-input__input {
   font-size: var(--font-size-mid);
   line-height: var(--line-height-mid);
 }
@@ -407,35 +408,6 @@ body.layout-multiple-columns {
   gap: 6px;
 }
 
-/* Modal buttons */
-.layout-multiple-columns .media-modal__navigation button,
-.layout-multiple-columns .image-loader button {
-  align-items: center;
-  border-radius: 50%;
-  /* It's inlined so we have to use !important */
-  /* stylelint-disable-next-line */
-  color: var(--color-light-text) !important;
-  display: inline-flex;
-
-  /* It's inlined so we have to use !important */
-  /* stylelint-disable-next-line */
-  font-size: var(--font-size-heading) !important;
-  /* stylelint-disable-next-line */
-  height: 36px !important;
-  justify-content: center;
-  /* stylelint-disable-next-line */
-  margin: 4px !important;
-  /* stylelint-disable-next-line */
-  top: 2px !important;
-  /* stylelint-disable-next-line */
-  width: 36px !important;
-}
-
-.layout-multiple-columns .media-modal__navigation button {
-  /* stylelint-disable-next-line */
-  top: 5px !important;
-}
-
 .layout-multiple-columns .media-modal__navigation .fa-times::before {
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(247 249 249)' aria-hidden='true' class='r-jwli3a r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03'%3E%3Cg%3E%3Cpath d='M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
 }
@@ -501,35 +473,42 @@ body.layout-multiple-columns {
   top: -2px;
 }
 
-/* Default to full-width images in link previews
+/* Bigger preview cards */
-   Needs implementation from the source below
+.layout-multiple-columns .status-card,
-
+.layout-multiple-columns .status-card.compact {
-   @source https://github.com/mastodon/mastodon/issues/21874#issuecomment-1332556018
-*/
-
-.layout-multiple-columns a.status-card,
-.layout-multiple-columns a.status-card.compact {
   background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
   display: block;
+  transition: all 200ms;
+}
+
+/* Hide empty YouTube description */
+.layout-multiple-columns .status-card__description:empty {
+  display: none;
+}
+
+.layout-multiple-columns .status-card:focus,
+.layout-multiple-columns .status-card:hover {
+  background-color: rgba(255 255 255 / .03);
 }
 
 .layout-multiple-columns .fa-file-text::before {
   content: "";
 }
 
-.layout-multiple-columns a.status-card .status-card__image-image,
+.layout-multiple-columns .status-card .status-card__image-image,
-.layout-multiple-columns a.status-card .status-card__image-image.compact {
+.layout-multiple-columns .status-card .status-card__image-image.compact {
   border-radius: 0;
 }
 
-.layout-multiple-columns a.status-card .status-card__content,
+.layout-multiple-columns .status-card .status-card__content,
-.layout-multiple-columns a.status-card.compact .status-card__content {
+.layout-multiple-columns .status-card.compact .status-card__content {
   padding: 15px;
 }
 
-.layout-multiple-columns a.status-card .status-card__title,
+.layout-multiple-columns .status-card .status-card__title,
-.layout-multiple-columns a.status-card.compact .status-card__title {
+.layout-multiple-columns .status-card.compact .status-card__title {
   color: var(--color-fg);
   font-size: 18px;
   font-weight: 400;
@@ -538,8 +517,8 @@ body.layout-multiple-columns {
   white-space: inherit;
 }
 
-a.status-card .status-card__host,
+.layout-multiple-columns .status-card .status-card__host,
-a.status-card.compact .status-card__host {
+.layout-multiple-columns .status-card.compact .status-card__host {
   color: var(--color-dim);
   font-size: var(--font-size-mid);
   margin-bottom: 5px;
@@ -941,7 +920,8 @@ body.embed .status__content a,
 .layout-multiple-columns .muted .status__content,
 .layout-multiple-columns .muted .status__content a,
 .layout-multiple-columns .muted .status__content p,
-.layout-multiple-columns .muted .status__display-name strong {
+.layout-multiple-columns .muted .status__display-name strong,
+.layout-multiple-columns .privacy-dropdown__option:not(.active) .privacy-dropdown__option__content {
   color: var(--color-dim);
 }
 
@@ -1015,6 +995,9 @@ body.embed .status__content a,
 .layout-multiple-columns .report-dialog-modal__lead,
 .layout-multiple-columns .detailed-status__display-name strong,
 .layout-multiple-columns .dismissable-banner__message,
+.layout-multiple-columns .privacy-dropdown__option.active,
+.layout-multiple-columns .privacy-dropdown__option:hover .privacy-dropdown__option__content,
+.layout-multiple-columns .privacy-dropdown__option:focus .privacy-dropdown__option__content,
 .layout-multiple-columns .privacy-dropdown__option,
 .layout-multiple-columns .privacy-dropdown__option__content strong,
 .layout-multiple-columns .status__info .display-name strong.display-name__html,
@@ -1062,7 +1045,12 @@ body.embed .status__content a,
   height: calc(var(--gap-default) * 2);
   justify-content: flex-start;
   margin-bottom: 0;
-  padding-bottom: calc(var(--gap-default) / 2);
+  padding-bottom: 0;
+}
+
+/* Status action bar */
+.layout-multiple-columns .status__action-bar {
+  margin-top: 12px;
 }
 
 /* Display name */
@@ -1879,6 +1867,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
   font-size: 20px;
 }
 
+.layout-multiple-columns .list-adder__lists .fa-times::before,
 .layout-multiple-columns .account__wrapper .account__relationship .icon-button.active .fa::before,
 .layout-multiple-columns .explore__search-results .account__relationship .icon-button.active .fa::before,
 .layout-multiple-columns .notification .account__relationship .icon-button.active .fa::before {
@@ -1887,6 +1876,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
   opacity: .75;
 }
 
+.layout-multiple-columns .list-adder__lists .fa-times:hover::before,
 .layout-multiple-columns .explore__search-results .icon-button.active:hover .fa::before,
 .layout-multiple-columns .notification .account__relationship .icon-button.active:hover .fa::before {
   /* stylelint-disable-next-line */
@@ -3200,8 +3190,8 @@ body.embed .button.logo-button:hover,
 .layout-multiple-columns .video-player,
 .layout-multiple-columns .media-gallery__gifv,
 .layout-multiple-columns .media-gallery__preview {
+  border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
-  outline: 1px solid var(--color-border);
   overflow: hidden;
 }
 

app/javascript/styles/elephant/layout-single-column.scss

@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @rolle@mementomori.social
-   1.5.8 */
+   1.6.4 */
 
 /* CSS variables */
 :root {
@@ -346,6 +346,7 @@ body.layout-single-column {
   width: 50px;
 }
 
+.layout-single-column .ui__header__logo img,
 .layout-single-column .ui__header__logo svg {
   display: none;
 }
@@ -369,10 +370,10 @@ body.layout-single-column {
 
 /* Things that should have the mid font-size */
 .layout-single-column .account__header__extra__links,
-.layout-single-column .account__header__account-note textarea,
+.layout-single-column .columns-area__panels__pane--compositional .account__header__account-note textarea,
 .layout-single-column .account__header__content,
-.layout-single-column .compose-form .autosuggest-textarea__textarea,
+.layout-single-column .columns-area__panels__pane--compositional .compose-form .autosuggest-textarea__textarea,
-.layout-single-column .compose-form .spoiler-input__input {
+.layout-single-column .columns-area__panels__pane--compositional .compose-form .spoiler-input__input {
   font-size: var(--font-size-mid);
   line-height: var(--line-height-mid);
 }
@@ -421,35 +422,6 @@ body.layout-single-column {
   gap: 6px;
 }
 
-/* Modal buttons */
-.layout-single-column .media-modal__navigation button,
-.layout-single-column .image-loader button {
-  align-items: center;
-  border-radius: 50%;
-  /* It's inlined so we have to use !important */
-  /* stylelint-disable-next-line */
-  color: var(--color-light-text) !important;
-  display: inline-flex;
-
-  /* It's inlined so we have to use !important */
-  /* stylelint-disable-next-line */
-  font-size: var(--font-size-heading) !important;
-  /* stylelint-disable-next-line */
-  height: 36px !important;
-  justify-content: center;
-  /* stylelint-disable-next-line */
-  margin: 4px !important;
-  /* stylelint-disable-next-line */
-  top: 2px !important;
-  /* stylelint-disable-next-line */
-  width: 36px !important;
-}
-
-.layout-single-column .media-modal__navigation button {
-  /* stylelint-disable-next-line */
-  top: 5px !important;
-}
-
 .layout-single-column .media-modal__navigation .fa-times::before {
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(247 249 249)' aria-hidden='true' class='r-jwli3a r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03'%3E%3Cg%3E%3Cpath d='M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
 }
@@ -504,35 +476,42 @@ body.layout-single-column {
   top: -2px;
 }
 
-/* Default to full-width images in link previews
+/* Bigger preview cards */
-   Needs implementation from the source below
+.layout-single-column .status-card,
-
+.layout-single-column .status-card.compact {
-   @source https://github.com/mastodon/mastodon/issues/21874#issuecomment-1332556018
-*/
-
-.layout-single-column a.status-card,
-.layout-single-column a.status-card.compact {
   background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
   display: block;
+  transition: all 200ms;
+}
+
+/* Hide empty YouTube description */
+.layout-single-column .status-card__description:empty {
+  display: none;
+}
+
+.layout-single-column .status-card:focus,
+.layout-single-column .status-card:hover {
+  background-color: rgba(255 255 255 / .03);
 }
 
 .layout-single-column .fa-file-text::before {
   content: "";
 }
 
-.layout-single-column a.status-card .status-card__image-image,
+.layout-single-column .status-card .status-card__image-image,
-.layout-single-column a.status-card .status-card__image-image.compact {
+.layout-single-column .status-card .status-card__image-image.compact {
   border-radius: 0;
 }
 
-.layout-single-column a.status-card .status-card__content,
+.layout-single-column .status-card .status-card__content,
-.layout-single-column a.status-card.compact .status-card__content {
+.layout-single-column .status-card.compact .status-card__content {
   padding: 15px;
 }
 
-.layout-single-column a.status-card .status-card__title,
+.layout-single-column .status-card .status-card__title,
-.layout-single-column a.status-card.compact .status-card__title {
+.layout-single-column .status-card.compact .status-card__title {
   color: var(--color-fg);
   font-size: 18px;
   font-weight: 400;
@@ -541,8 +520,8 @@ body.layout-single-column {
   white-space: inherit;
 }
 
-a.status-card .status-card__host,
+.layout-single-column .status-card .status-card__host,
-a.status-card.compact .status-card__host {
+.layout-single-column .status-card.compact .status-card__host {
   color: var(--color-dim);
   font-size: var(--font-size-mid);
   margin-bottom: 5px;
@@ -914,7 +893,8 @@ body.embed .status__content a,
 .layout-single-column .muted .status__content,
 .layout-single-column .muted .status__content a,
 .layout-single-column .muted .status__content p,
-.layout-single-column .muted .status__display-name strong {
+.layout-single-column .muted .status__display-name strong,
+.layout-single-column .privacy-dropdown__option:not(.active) .privacy-dropdown__option__content {
   color: var(--color-dim);
 }
 
@@ -988,6 +968,9 @@ body.embed .status__content a,
 .layout-single-column .report-dialog-modal__lead,
 .layout-single-column .detailed-status__display-name strong,
 .layout-single-column .dismissable-banner__message,
+.layout-single-column .privacy-dropdown__option.active,
+.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content,
+.layout-single-column .privacy-dropdown__option:focus .privacy-dropdown__option__content,
 .layout-single-column .privacy-dropdown__option,
 .layout-single-column .privacy-dropdown__option__content strong,
 .layout-single-column .status__info .display-name strong.display-name__html,
@@ -1035,7 +1018,12 @@ body.embed .status__content a,
   height: calc(var(--gap-default) * 2);
   justify-content: flex-start;
   margin-bottom: 0;
-  padding-bottom: calc(var(--gap-default) / 2);
+  padding-bottom: 0;
+}
+
+/* Status action bar */
+.layout-single-column .status__action-bar {
+  margin-top: 12px;
 }
 
 /* Display name */
@@ -1264,7 +1252,7 @@ body.embed .detailed-status,
 
 /* Rtl version */
 [dir="rtl"] .layout-single-column .status__action-bar,
-[dir="rtl"] .layout-single-column .attachment-list
+[dir="rtl"] .layout-single-column .attachment-list,
 [dir="rtl"] .layout-single-column .status__content__read-more-button,
 [dir="rtl"] .layout-single-column .status .status__content {
   padding-left: 0;
@@ -1862,6 +1850,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
   font-size: 20px;
 }
 
+.layout-single-column .list-adder__lists .fa-times::before,
 .layout-single-column .account__wrapper .account__relationship .icon-button.active .fa::before,
 .layout-single-column .explore__search-results .account__relationship .icon-button.active .fa::before,
 .layout-single-column .notification .account__relationship .icon-button.active .fa::before {
@@ -1870,6 +1859,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
   opacity: .75;
 }
 
+.layout-single-column .list-adder__lists .fa-times:hover::before,
 .layout-single-column .explore__search-results .icon-button.active:hover .fa::before,
 .layout-single-column .notification .account__relationship .icon-button.active:hover .fa::before {
   /* stylelint-disable-next-line */
@@ -3166,8 +3156,8 @@ body.embed .button.logo-button:hover,
 .layout-single-column .video-player,
 .layout-single-column .media-gallery__gifv,
 .layout-single-column .media-gallery__preview {
+  border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
-  outline: 1px solid var(--color-border);
   overflow: hidden;
 }
 

config/locales/en.yml

@@ -1596,7 +1596,10 @@ en:
     does_not_match_previous_name: does not match the previous name
   themes:
     contrast: Mastodon (High contrast)
-    default: Mastodon (Dark)
+    default: Elephant (Dark)
+    elephant-contrast: Elephant (Contrast)
+    elephant-light: Elephant (Light)
+    mastodon-dark: Mastodon (Dark)
     mastodon-light: Mastodon (Light)
   time:
     formats:

config/themes.yml

@@ -1,6 +1,6 @@
-default: styles/application.scss
+default: styles/elephant.scss
-contrast: styles/contrast.scss
-mastodon-light: styles/mastodon-light.scss
-elephant: styles/elephant.scss
-elephant-contrast: styles/elephant-contrast.scss
 elephant-light: styles/elephant-light.scss
+elephant-contrast: styles/elephant-contrast.scss
+mastodon-dark: styles/application.scss
+mastodon-light: styles/mastodon-light.scss
+contrast: styles/contrast.scss