Release 2.0.6

.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]

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

layout-multiple-columns.css

@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @[email protected]
-   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) {

layout-single-column.css

@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @[email protected]
-   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 @[email protected]! 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;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mastodon-bird-ui",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "",
   "main": "index.js",
   "scripts": {