diff --git a/app/javascript/styles/elephant/layout-multiple-columns.scss b/app/javascript/styles/elephant/layout-multiple-columns.scss index 1895c6389..7ec96bc7c 100644 --- a/app/javascript/styles/elephant/layout-multiple-columns.scss +++ b/app/javascript/styles/elephant/layout-multiple-columns.scss @@ -1,5 +1,5 @@ /* Mastodon Bird UI by @rolle@mementomori.social - 1.6.4 */ + 1.5.8 */ /* CSS variables */ :root { @@ -338,7 +338,6 @@ body.layout-multiple-columns { width: 50px; } -.layout-multiple-columns .ui__header__logo img, .layout-multiple-columns .ui__header__logo svg { display: none; } @@ -362,10 +361,10 @@ body.layout-multiple-columns { /* Things that should have the mid font-size */ .layout-multiple-columns .account__header__extra__links, -.layout-multiple-columns .columns-area__panels__pane--compositional .account__header__account-note textarea, +.layout-multiple-columns .account__header__account-note textarea, .layout-multiple-columns .account__header__content, -.layout-multiple-columns .columns-area__panels__pane--compositional .compose-form .autosuggest-textarea__textarea, -.layout-multiple-columns .columns-area__panels__pane--compositional .compose-form .spoiler-input__input { +.layout-multiple-columns .compose-form .autosuggest-textarea__textarea, +.layout-multiple-columns .compose-form .spoiler-input__input { font-size: var(--font-size-mid); line-height: var(--line-height-mid); } @@ -408,6 +407,35 @@ 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"); } @@ -473,42 +501,35 @@ body.layout-multiple-columns { top: -2px; } -/* Bigger preview cards */ -.layout-multiple-columns .status-card, -.layout-multiple-columns .status-card.compact { +/* Default to full-width images in link previews + Needs implementation from the source below + + @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 .status-card .status-card__image-image, -.layout-multiple-columns .status-card .status-card__image-image.compact { +.layout-multiple-columns a.status-card .status-card__image-image, +.layout-multiple-columns a.status-card .status-card__image-image.compact { border-radius: 0; } -.layout-multiple-columns .status-card .status-card__content, -.layout-multiple-columns .status-card.compact .status-card__content { +.layout-multiple-columns a.status-card .status-card__content, +.layout-multiple-columns a.status-card.compact .status-card__content { padding: 15px; } -.layout-multiple-columns .status-card .status-card__title, -.layout-multiple-columns .status-card.compact .status-card__title { +.layout-multiple-columns a.status-card .status-card__title, +.layout-multiple-columns a.status-card.compact .status-card__title { color: var(--color-fg); font-size: 18px; font-weight: 400; @@ -517,8 +538,8 @@ body.layout-multiple-columns { white-space: inherit; } -.layout-multiple-columns .status-card .status-card__host, -.layout-multiple-columns .status-card.compact .status-card__host { +a.status-card .status-card__host, +a.status-card.compact .status-card__host { color: var(--color-dim); font-size: var(--font-size-mid); margin-bottom: 5px; @@ -920,8 +941,7 @@ 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 .privacy-dropdown__option:not(.active) .privacy-dropdown__option__content { +.layout-multiple-columns .muted .status__display-name strong { color: var(--color-dim); } @@ -995,9 +1015,6 @@ 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, @@ -1045,12 +1062,7 @@ body.embed .status__content a, height: calc(var(--gap-default) * 2); justify-content: flex-start; margin-bottom: 0; - padding-bottom: 0; -} - -/* Status action bar */ -.layout-multiple-columns .status__action-bar { - margin-top: 12px; + padding-bottom: calc(var(--gap-default) / 2); } /* Display name */ @@ -1867,7 +1879,6 @@ 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 { @@ -1876,7 +1887,6 @@ 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 */ @@ -3190,8 +3200,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; } diff --git a/app/javascript/styles/elephant/layout-single-column.scss b/app/javascript/styles/elephant/layout-single-column.scss index 4f67f28b9..aa329031b 100644 --- a/app/javascript/styles/elephant/layout-single-column.scss +++ b/app/javascript/styles/elephant/layout-single-column.scss @@ -1,5 +1,5 @@ /* Mastodon Bird UI by @rolle@mementomori.social - 1.6.4 */ + 1.5.8 */ /* CSS variables */ :root { @@ -346,7 +346,6 @@ body.layout-single-column { width: 50px; } -.layout-single-column .ui__header__logo img, .layout-single-column .ui__header__logo svg { display: none; } @@ -370,10 +369,10 @@ body.layout-single-column { /* Things that should have the mid font-size */ .layout-single-column .account__header__extra__links, -.layout-single-column .columns-area__panels__pane--compositional .account__header__account-note textarea, +.layout-single-column .account__header__account-note textarea, .layout-single-column .account__header__content, -.layout-single-column .columns-area__panels__pane--compositional .compose-form .autosuggest-textarea__textarea, -.layout-single-column .columns-area__panels__pane--compositional .compose-form .spoiler-input__input { +.layout-single-column .compose-form .autosuggest-textarea__textarea, +.layout-single-column .compose-form .spoiler-input__input { font-size: var(--font-size-mid); line-height: var(--line-height-mid); } @@ -422,6 +421,35 @@ 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"); } @@ -476,42 +504,35 @@ body.layout-single-column { top: -2px; } -/* Bigger preview cards */ -.layout-single-column .status-card, -.layout-single-column .status-card.compact { +/* Default to full-width images in link previews + Needs implementation from the source below + + @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 .status-card .status-card__image-image, -.layout-single-column .status-card .status-card__image-image.compact { +.layout-single-column a.status-card .status-card__image-image, +.layout-single-column a.status-card .status-card__image-image.compact { border-radius: 0; } -.layout-single-column .status-card .status-card__content, -.layout-single-column .status-card.compact .status-card__content { +.layout-single-column a.status-card .status-card__content, +.layout-single-column a.status-card.compact .status-card__content { padding: 15px; } -.layout-single-column .status-card .status-card__title, -.layout-single-column .status-card.compact .status-card__title { +.layout-single-column a.status-card .status-card__title, +.layout-single-column a.status-card.compact .status-card__title { color: var(--color-fg); font-size: 18px; font-weight: 400; @@ -520,8 +541,8 @@ body.layout-single-column { white-space: inherit; } -.layout-single-column .status-card .status-card__host, -.layout-single-column .status-card.compact .status-card__host { +a.status-card .status-card__host, +a.status-card.compact .status-card__host { color: var(--color-dim); font-size: var(--font-size-mid); margin-bottom: 5px; @@ -893,8 +914,7 @@ 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 .privacy-dropdown__option:not(.active) .privacy-dropdown__option__content { +.layout-single-column .muted .status__display-name strong { color: var(--color-dim); } @@ -968,9 +988,6 @@ 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, @@ -1018,12 +1035,7 @@ body.embed .status__content a, height: calc(var(--gap-default) * 2); justify-content: flex-start; margin-bottom: 0; - padding-bottom: 0; -} - -/* Status action bar */ -.layout-single-column .status__action-bar { - margin-top: 12px; + padding-bottom: calc(var(--gap-default) / 2); } /* Display name */ @@ -1252,7 +1264,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; @@ -1850,7 +1862,6 @@ 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 { @@ -1859,7 +1870,6 @@ 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 */ @@ -3156,8 +3166,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; } diff --git a/config/locales/en.yml b/config/locales/en.yml index fe29cf95e..ce20d5d1d 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1597,9 +1597,6 @@ en: themes: contrast: Mastodon (High contrast) default: Mastodon (Dark) - elephant: Elephant (Dark) - elephant-contrast: Elephant (Contrast) - elephant-light: Elephant (Light) mastodon-light: Mastodon (Light) time: formats: diff --git a/config/themes.yml b/config/themes.yml index 6b1d5db8b..228461288 100644 --- a/config/themes.yml +++ b/config/themes.yml @@ -1,6 +1,6 @@ default: styles/application.scss -elephant: styles/elephant.scss -elephant-light: styles/elephant-light.scss -elephant-contrast: styles/elephant-contrast.scss -mastodon-light: styles/mastodon-light.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 diff --git a/lib/mastodon/version.rb b/lib/mastodon/version.rb index 9d1e4d58e..856c4f5de 100644 --- a/lib/mastodon/version.rb +++ b/lib/mastodon/version.rb @@ -21,7 +21,7 @@ module Mastodon end def suffix - '-gh23240' + '-gh23210' end def to_a