Merge pull request #4 from laughk/fix-quoted-toot-at-public-user-page

fix design of quoted toot at public user page

README.md

@@ -54,14 +54,24 @@ fedibird.com のモダンテーマ（ダーク・ライト共通）のデザイ
 
 ![quote before](images/screenshot-quote-before.png)
 
+パブリックページ内の引用
+
+![quoted at public before](images/screenshot-quoted-at-public-page-before.png)
+
 #### 調整後
 
 ![quote ajusted](images/screenshot-quote-ajusted.png)
 
+パブリックページ内の引用
+
+![quoted at public ajusted](images/screenshot-quoted-at-public-page-ajusted.png)
+
 - 引用元アカウント情報のアイコンと名前, id の被りを解消します
 - 引用テキストと境界の隙間を調整します
 - 引用している画像が枠に収まるように調整をします
 
+ℹ️ この調整は意図したものではありませんが「マテリアル（v1-dark）」「マテリアル（v1-light）」「マテリアル（v2-dark）」「マテリアル（v2-light）」などの他のテーマの場合でも調整されることを確認しています。
+
 ### misskey.io などで使われる横に長い絵文字が圧縮されないようにする調整
 
 #### 調整前

fedibird.user.styl

@@ -1,6 +1,6 @@
 /* ==UserStyle==
 @name         Adjust-fedibird-modern-theme
-@version      20230221.1
+@version      20230222.1
 @namespace    userstyles.world/user/laughk
 @description  adujust "Modern" theme on fedibird.com. 
 fedibird.com のモダンテーマ（ダーク・ライト共通）のデザインを調整します
@@ -82,3 +82,37 @@ div.quote-status > div.status__content.status__content--with-action {
 }
 
 }
+
+@-moz-document regexp("https://fedibird.com/@.*") {
+/* 公開ページの引用投稿の表示調整 */
+
+/* 枠の中に引用内容が収まるようにする */
+div.status.quote-status {
+  padding-left: 0.75rem !important;
+  padding-top: 0.75rem !important;
+  width: 95% !important;
+  box-shadow: 1px 1px 1px 1px; /* 本当は border でやりたいが、 `0px !important` されているので box-shadow でそれっぽくくくる */
+}
+
+/* 引用した投稿者の名前・アイコンの位置を調整 */
+div.status.quote-status > a.status__display-name {
+    display: flex !important;
+}
+div.status.quote-status > a.status__display-name.u-url > div.status__avatar {
+    position: unset;
+    width: 1.5rem !important;
+    padding-top: 0.25rem !important;
+    padding-left: 0.25rem !important;
+}
+div.status.quote-status > a.status__display-name.u-url > span.display-name {
+    padding-left: unset;
+}
+
+/* 引用投稿内の画像・動画の大きさと位置 */
+div.quote-status > div > div.video-player.inline,
+div.quote-status > div > div.media-gallery {
+  left: 15% !important;
+  width: 90% !important;
+}
+
+}