Backfill improvements from nightly branch

CHANGELOG.md

@@ -1,3 +1,8 @@
+### 1.5.8rc4: 2023-07-05
+
+* Backfill improvements from nightly branch, those which affect also the stable branch
+* Update instructions in README
+
 ### 1.5.8rc3: 2023-07-03
 
 * Fixed fa-fw (Federated) icon size for mobile view #37 (thanks @itbeard!)

README.md

@@ -11,6 +11,8 @@ Read the blog post: [The day I decided to build my own "Twitter"](https://rolle.
 
 ## Versions
 
+Mastodon Bird UI version format: _semver + Mastodon version_, for example: `1.5.8rc4-mastodon-4.1.2-stable`. First, check the Mastodon version you're running, then choose the version for Mastodon Bird UI. If you're running Mastodon 4.1.2 stable, choose the version `mastodon-4.1.2-stable`. If you're running Mastodon 4.1.2 nightly, choose the version `mastodon-4.1.2-nightly`.
+
 - [Mastodon 4.1.2 stable](https://github.com/ronilaukkarinen/mastodon-bird-ui/tree/mastodon-4.1.2-stable)
 - [Mastodon 4.1.2 nightly (main branch)](https://github.com/ronilaukkarinen/mastodon-bird-ui/tree/mastodon-4.1.2-nightly)
 

layout-multiple-columns.css

@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @[email protected]
-   1.5.8rc3 */
+   1.5.8rc4-mastodon-4.1.2-stable */
 
 /* CSS variables */
 :root {
@@ -74,6 +74,9 @@
   --width-main-panel: 600px;
   --width-side-panel: 260px;
   --width-column: 380px;
+  --border-radius: 16px;
+  --border-radius-badges: 4px;
+  --badges-distance-from-edge: 12px;
 
   /* Misc */
   --active-header-box-shadow: 0 1px 0 rgba(140, 141, 255, .3);
@@ -255,6 +258,7 @@ body.theme-mastodon-light.layout-multiple-columns {
 @media (max-width: 500px) {
   :root {
     --font-size-heading: 17px;
+    --badges-distance-from-edge: 10px;
   }
 
   /* Hide scrollbar on mobile, since we can't pick the handle anyway */
@@ -452,7 +456,7 @@ body.layout-multiple-columns {
 .layout-multiple-columns a.status-card,
 .layout-multiple-columns a.status-card.compact {
   background-color: var(--color-bg);
-  border-radius: 10px;
+  border-radius: var(--border-radius);
   display: block;
 }
 
@@ -1321,6 +1325,30 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
   color: var(--color-dim);
 }
 
+/* Hide/Show media button */
+.layout-multiple-columns .spoiler-button.spoiler-button--minified > button {
+  background-color: var(--color-bg);
+  border-radius: var(--border-radius-badges);
+  color: var(--color-ghost-button-text);
+  opacity: .5;
+}
+
+/* Alt badge */
+.layout-multiple-columns .media-gallery__item__badges > span {
+  border-radius: var(--border-radius-badges);
+}
+
+/* Distance from the edge */
+.layout-multiple-columns .spoiler-button--minified {
+  inset-inline-start: var(--badges-distance-from-edge);
+  top: var(--badges-distance-from-edge);
+}
+
+.layout-multiple-columns .media-gallery__gifv__label {
+  bottom: var(--badges-distance-from-edge);
+  inset-inline-start: var(--badges-distance-from-edge);
+}
+
 .layout-multiple-columns .icon-button:hover {
   color: var(--color-accent);
 }
@@ -3097,13 +3125,14 @@ body.embed .button.logo-button:hover,
 }
 
 /* Add border radius to media */
-.layout-multiple-columns .media-gallery__item-thumbnail img,
+.layout-multiple-columns .media-gallery,
 .layout-multiple-columns .audio-player,
-.layout-multiple-columns .video-player video,
-.layout-multiple-columns .media-gallery__gifv video,
+.layout-multiple-columns .video-player,
+.layout-multiple-columns .media-gallery__gifv,
 .layout-multiple-columns .media-gallery__preview {
-  backface-visibility: hidden;
-  border-radius: 10px;
+  border-radius: var(--border-radius);
+  outline: 1px solid var(--color-border);
+  overflow: hidden;
 }
 
 .layout-multiple-columns .media-gallery__item-thumbnail:has(> img:not([alt]))::after,

layout-single-column.css

@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @[email protected]
-   1.5.8rc3 */
+   1.5.8rc4-mastodon-4.1.2-stable */
 
 /* CSS variables */
 :root {
@@ -73,6 +73,9 @@
   --size-icon-notification: 30px;
   --width-main-panel: 600px;
   --width-side-panel: 260px;
+  --border-radius: 16px;
+  --border-radius-badges: 4px;
+  --badges-distance-from-edge: 12px;
 
   /* Misc */
   --active-header-box-shadow: 0 1px 0 rgba(140, 141, 255, .3);
@@ -254,6 +257,7 @@ body.theme-mastodon-light.layout-single-column {
 @media (max-width: 500px) {
   :root {
     --font-size-heading: 17px;
+    --badges-distance-from-edge: 10px;
   }
 
   /* Hide scrollbar on mobile, since we can't pick the handle anyway */
@@ -447,7 +451,7 @@ body.layout-single-column {
 .layout-single-column a.status-card,
 .layout-single-column a.status-card.compact {
   background-color: var(--color-bg);
-  border-radius: 10px;
+  border-radius: var(--border-radius);
   display: block;
 }
 
@@ -1288,6 +1292,30 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
   color: var(--color-dim);
 }
 
+/* Hide/Show media button */
+.layout-single-column .spoiler-button.spoiler-button--minified > button {
+  background-color: var(--color-bg);
+  border-radius: var(--border-radius-badges);
+  color: var(--color-ghost-button-text);
+  opacity: .5;
+}
+
+/* Alt badge */
+.layout-single-column .media-gallery__item__badges > span {
+  border-radius: var(--border-radius-badges);
+}
+
+/* Distance from the edge */
+.layout-single-column .spoiler-button--minified {
+  inset-inline-start: var(--badges-distance-from-edge);
+  top: var(--badges-distance-from-edge);
+}
+
+.layout-single-column .media-gallery__gifv__label {
+  bottom: var(--badges-distance-from-edge);
+  inset-inline-start: var(--badges-distance-from-edge);
+}
+
 .layout-single-column .icon-button:hover {
   color: var(--color-accent);
 }
@@ -3056,22 +3084,23 @@ body.embed .button.logo-button:hover,
 }
 
 /* Add border radius to media */
-.layout-single-column .media-gallery__item-thumbnail img,
+.layout-single-column .media-gallery,
 .layout-single-column .audio-player,
-.layout-single-column .video-player video,
-.layout-single-column .media-gallery__gifv video,
+.layout-single-column .video-player,
+.layout-single-column .media-gallery__gifv,
 .layout-single-column .media-gallery__preview {
-  backface-visibility: hidden;
-  border-radius: 10px;
+  border-radius: var(--border-radius);
+  outline: 1px solid var(--color-border);
+  overflow: hidden;
 }
 
 .layout-single-column .media-gallery__item-thumbnail:has(> img:not([alt]))::after,
 .layout-single-column .video-player:has(> video:not([title]))::after,
 .layout-single-column .media-gallery__gifv:has(> video:not([title]))::after {
   align-self: flex-end;
   background-color: var(--color-bg-75);
-  border-radius: 4px;
-  bottom: 4px;
+  border-radius: var(--border-radius-badges);
+  bottom: var(--badges-distance-from-edge);
   color: var(--color-light-text);
   content: 'No alt';
   display: flex;
@@ -3084,7 +3113,7 @@ body.embed .button.logo-button:hover,
   opacity: 1;
   padding: 2px 5px;
   position: absolute;
-  right: 4px;
+  right: var(--badges-distance-from-edge);
   text-transform: uppercase;
   top: auto;
   width: unset;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mastodon-bird-ui",
-  "version": "1.5.8rc2",
+  "version": "1.5.8rc4-mastodon-4.1.2-stable",
   "description": "",
   "main": "index.js",
   "scripts": {