From f14ac87522107291fbc3a8e63e8f1717235b67d1 Mon Sep 17 00:00:00 2001 From: Ducky Date: Sun, 27 Aug 2023 21:11:08 +0100 Subject: [PATCH] =?UTF-8?q?Gearheads:=20update=20Bird=20UI=20theme=20(1.5.?= =?UTF-8?q?8=20=E2=9E=94=201.6.4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../elephant/layout-multiple-columns.scss | 94 ++++++++---------- .../styles/elephant/layout-single-column.scss | 96 +++++++++---------- 2 files changed, 85 insertions(+), 105 deletions(-) diff --git a/app/javascript/styles/elephant/layout-multiple-columns.scss b/app/javascript/styles/elephant/layout-multiple-columns.scss index 7ec96bc7c..1895c6389 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.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 .compose-form .spoiler-input__input { +.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 { 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 - 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 { +/* Bigger preview cards */ +.layout-multiple-columns .status-card, +.layout-multiple-columns .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 a.status-card .status-card__image-image.compact { +.layout-multiple-columns .status-card .status-card__image-image, +.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 a.status-card.compact .status-card__content { +.layout-multiple-columns .status-card .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 a.status-card.compact .status-card__title { +.layout-multiple-columns .status-card .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, -a.status-card.compact .status-card__host { +.layout-multiple-columns .status-card .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; } diff --git a/app/javascript/styles/elephant/layout-single-column.scss b/app/javascript/styles/elephant/layout-single-column.scss index aa329031b..4f67f28b9 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.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 .compose-form .spoiler-input__input { +.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 { 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 - 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 { +/* Bigger preview cards */ +.layout-single-column .status-card, +.layout-single-column .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 a.status-card .status-card__image-image.compact { +.layout-single-column .status-card .status-card__image-image, +.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 a.status-card.compact .status-card__content { +.layout-single-column .status-card .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 a.status-card.compact .status-card__title { +.layout-single-column .status-card .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, -a.status-card.compact .status-card__host { +.layout-single-column .status-card .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; }