diff --git a/.github/workflows/styles.yml b/.github/workflows/styles.yml index d5360ae..1fcee33 100644 --- a/.github/workflows/styles.yml +++ b/.github/workflows/styles.yml @@ -1,7 +1,3 @@ -# @Author: Roni Laukkarinen -# @Date: 2023-02-15 17:39:37 -# @Last Modified by: Roni Laukkarinen -# @Last Modified time: 2023-03-03 20:01:10 name: CSS on: [push, pull_request] diff --git a/CHANGELOG.md b/CHANGELOG.md index bf57881..e0ab41f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,16 @@ +### 2.0.6: 2024-12-07 + +* Fix top bar showing up when there is no column header title (thanks @ikkeT!) +* Fix star icon misalignment in Mastodon v4.4.0-alpha.1 +* Fix imageless article cards don't display correctly, Fixes #137 (thanks @AlternateRT!) +* Fix numbered heart animation in advanced view (thanks @stedi!) +* Fix media gallery margin in advanced view +* Fix issues with the nav bar in 2024-11-09 +* More unified background and borders in the settings boxes +* Use active color instead of rotate in settings icon +* Fix navigation issues in nightly 2024-11-09 +* Remove stylelint recommended, fix unknown rule + ### 2.0.5: 2024-11-10 * Add unit test to test for CSS syntax errors #141 diff --git a/layout-multiple-columns.css b/layout-multiple-columns.css index 0b7e193..fd2c368 100644 --- a/layout-multiple-columns.css +++ b/layout-multiple-columns.css @@ -1,5 +1,5 @@ /* Mastodon Bird UI by @rolle@mementomori.social - 2.0.5 */ + 2.0.6 */ /* CSS variables */ :root { @@ -669,11 +669,6 @@ body.layout-multiple-columns { display: inherit; } -/* Hide empty status cards alltogether (Mastodon 4.1.5-2023-07-29) */ -.layout-multiple-columns .status-card:has(.icon-file-text) { - display: none; -} - /* Hide empty YouTube description */ .layout-multiple-columns .status-card__description:empty { display: none; @@ -783,6 +778,12 @@ body.layout-multiple-columns { color: var(--color-light-text); } +/* Setting boxes */ +.layout-multiple-columns .column-header__collapsible-inner { + background-color: var(--color-bg); + border-color: var(--color-border); +} + /* Column-header border */ .layout-multiple-columns .column-header__collapsible { border-bottom: 1px solid var(--color-border); @@ -1659,6 +1660,16 @@ body.embed .detailed-status, width: 100% !important; } +.layout-multiple-columns .media-gallery__gifv, +.layout-multiple-columns .media-gallery__preview, +.layout-multiple-columns .detailed-status .audio-player, +.layout-multiple-columns .detailed-status .media-gallery, +.layout-multiple-columns .detailed-status .media-gallery__gifv, +.layout-multiple-columns .detailed-status .media-gallery__preview, +.layout-multiple-columns .detailed-status .video-player { + margin-left: 0; +} + .layout-multiple-columns .media-gallery__preview { /* stylelint-disable-next-line */ margin-left: 0 !important; @@ -3449,6 +3460,13 @@ body .compose-form .compose-form__uploads { background-image: var(--icon-sliders); } +.layout-multiple-columns .column-header__button.active .icon-sliders { + /* Use contrast icon */ + background-image: var(--icon-sliders-contrast); + /* Disable rotate */ + transform: none; +} + /* Administration icon */ .layout-multiple-columns .column-link .icon-tachometer { --size-icon: 24px; @@ -4314,6 +4332,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 25.5px; } +.layout-multiple-columns.no-reduce-motion .star-icon.icon-button--with-counter.activate .icon-button__counter { + margin-left: 20px; +} + +.animated-number { + z-index: 99; +} + @media screen and (max-width: 889px) { /* stylelint-disable-next-line */ .layout-multiple-columns.no-reduce-motion .status .icon-button.star-icon.activate .icon-star { @@ -4394,6 +4420,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu top: 0; transform: none; width: unset; + height: unset !important; } .layout-multiple-columns.no-reduce-motion .icon-button.star-icon.active .icon-star { @@ -4511,9 +4538,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .layout-multiple-columns button.icon-button.icon-button--with-counter.activate.star-icon > .icon-star { + left: 0 !important; position: absolute !important; top: unset !important; - left: -34px !important; } @media (hover: none) { diff --git a/layout-single-column.css b/layout-single-column.css index 68103de..e110fd4 100644 --- a/layout-single-column.css +++ b/layout-single-column.css @@ -1,5 +1,5 @@ /* Mastodon Bird UI by @rolle@mementomori.social - 2.0.5 */ + 2.0.6 */ /* CSS variables */ :root { @@ -24,6 +24,7 @@ and replace it inside the SVG icons if you decide to change it */ --color-bg: var(--color-brand-mastodon-bg); --color-bg-75: #1e2028bf; + --color-bg-90: #1e2028e6; --color-fg: #fff; --color-border: #38384d; --color-dim: var(--color-brand-mastodon-dim); @@ -275,6 +276,7 @@ body.theme-mastodon-light.layout-single-column { --color-light-purple: #9588a6; --color-dark-electric-blue: #9088a6; --color-bg-75: #ffffffbf; + --color-bg-90: #ffffffe6; --color-accent: var(--color-accent-dark); --color-ghost-button-text: var(--color-accent-dark); --color-bg-compose-form: rgb(147 136 166 / .2); @@ -683,11 +685,6 @@ body.layout-single-column { display: inherit; } -/* Hide empty status cards alltogether (Mastodon 4.1.5-2023-07-29) */ -.layout-single-column .status-card:has(.icon-file-text) { - display: none; -} - /* Hide empty YouTube description */ .layout-single-column .status-card__description:empty { display: none; @@ -790,9 +787,17 @@ body.layout-single-column { color: var(--color-light-text); } +/* Setting boxes */ +.layout-single-column .column-header__collapsible-inner { + background-color: var(--color-bg); + border-color: var(--color-border); +} + /* Column-header border */ .layout-single-column .column-header__collapsible { border-bottom: 1px solid var(--color-border); + border-left: 0; + border-right: 0; } .layout-single-column .column-header__collapsible, @@ -1482,9 +1487,8 @@ body.embed .detailed-status__display-avatar > img, border: 0; } -/* Nice active effect in the column header */ .layout-single-column .column-header__wrapper.active { - box-shadow: var(--active-header-box-shadow); + box-shadow: none; } .layout-single-column .column-header__wrapper.active::before { @@ -3750,6 +3754,14 @@ body .compose-form .compose-form__uploads { background-image: var(--icon-sliders); } +.column-header__button.active .icon-sliders { + /* Use contrast icon */ + background-image: var(--icon-sliders-contrast); + + /* Disable rotate */ + transform: none; +} + /* Administration icon */ .layout-single-column .column-link .icon-tachometer { --size-icon: 24px; @@ -3999,7 +4011,6 @@ body .compose-form .compose-form__uploads { /* Mobile */ @media screen and (max-width: 889px) { - /* Better blur overlay for ui-header */ .layout-single-column .ui::after { backdrop-filter: blur(12px); @@ -4517,30 +4528,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: transparent; } -/* More compact header on mobile, thanks for the idea @nileane@nileane.fr! https://github.com/nileane/TangerineUI-for-Mastodon */ +/* Header on mobile */ @media screen and (max-width: 1174px) { - .app-body:not(.layout-multiple-columns) .ui__header { - background-color: transparent; - border-bottom: 0; - } - .app-body:not(.layout-multiple-columns) .ui__header .ui__header__logo { margin-left: 3px; } - .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper { - border-bottom: 0; - border-radius: 0; - box-shadow: none; - display: block; - height: 55px; - inset-inline-end: 105px; - inset-inline-start: 45px; - margin-bottom: -2px; - position: fixed; - top: 0; - } - /* stylelint-disable-next-line */ .app-body:not(.layout-multiple-columns):not(:has(.ui .ui__header__links > .button[href="/auth/sign_in"])) .tabs-bar__wrapper { z-index: 3; @@ -4550,48 +4543,48 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu display: none; } - .app-body:not(.layout-multiple-columns) - :is( - .column-header, - .column-back-button, - .column-header__button, - .column-header__back-button - ) { - background-color: transparent; - border: 0; - height: 55px; - margin: 0; - } - .app-body .column-header__icon { display: none; } + .app-body:not(.layout-multiple-columns) .columns-area__panels { + z-index: 2; + } + /* Set a backdrop blur background to both top bars */ - .app-body:not(.layout-multiple-columns) .ui::after { - /* stylelint-disable-next-line */ - -webkit-backdrop-filter: blur(20px); - backdrop-filter: blur(20px); - border-bottom: 1px solid var(--color-border); - content: ""; + .app-body:not(.layout-multiple-columns) .ui__header { + background-color: var(--color-bg-90); height: 55px; + z-index: 5; + } + + .app-body:not(.layout-multiple-columns):has(.column-header__title) .tabs-bar__wrapper::after { + background-color: var(--color-bg-90); + content: ""; + height: 49px; left: 0; - position: fixed; + position: absolute; top: 0; width: 100%; - z-index: 1; + z-index: 0; } - /* Remove margin between column settings and column header */ - .app-body:not(.layout-multiple-columns) .column-header__collapsible { - left: 0; - position: fixed; - right: 0; + .ui:has([href="/auth/sign_in"]) .tabs-bar__wrapper::after, + .ui:has(.compose-form__submit) .tabs-bar__wrapper::after { + display: none; } - .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) { + .layout-single-column .column-header__collapsible { border-bottom: 1px solid var(--color-border); } + + .layout-single-column .column-header__collapsible-inner { + background-color: var(--color-bg-90); + } + + .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) { + border-bottom: 0; + } } /* List panel */ @@ -4764,7 +4757,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu position: absolute; } -.star-icon.icon-button--with-counter .icon-button__counter { +.layout-single-column.no-reduce-motion .star-icon.icon-button--with-counter .icon-button__counter { margin-left: 20px; } @@ -4856,6 +4849,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu top: 0; transform: none; width: unset; + height: unset !important; } .layout-single-column.no-reduce-motion .icon-button.star-icon.active .icon-star { @@ -4973,7 +4967,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } .layout-single-column button.icon-button.icon-button--with-counter.activate.star-icon > .icon-star { - left: -34px !important; + left: 0 !important; position: absolute !important; top: unset !important; } diff --git a/package.json b/package.json index d54e3a7..fd285f6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mastodon-bird-ui", - "version": "2.0.5", + "version": "2.0.6", "description": "", "main": "index.js", "scripts": {