引用の文字が溢れる件、先日はタイムライン上の投稿しか直してなかったですが、個別投稿の詳細表示についても対策しました。余白が変だけど読めなくはないのでまた今度…。
#MofuUI
0
0
0
0
Hashtag
#MofuUI
Advertisement · 728 × 90
本文が四行以上ある投稿の引用で文字が溢れる件を応急的に直しました。
#MofuUI
0
0
1
0
Misskey‐系のサーバーから連合されて来た投稿に含まれるハッシュタグの文字が消えていた（タグがそこに存在する事だけ分かり、字数がゼロであるように見える）のを応急的に修正しました。
従来は Mastodon‐系の投稿に含まれるハッシュタグの先頭のハッシュ記号（#）を隠していましたが、修正の影響で無効になりました。つまり、全ての投稿において本文中のハッシュが表示されます。（但しタグバーでは引き続きハッシュが隠されます。）
#MofuUI
0
0
1
0
Mastodon v4.5 の「引用」の表示にも MofuUI は未対応なので若干壊れてますが、許せる程度の壊れ方なので…スタイルシートを更新する余裕ができるまで我慢しよう…。
#MofuUI
0
0
1
0
引き続き時間がないので応急処置ですが、返信通知の周りの余白がなくなっていたのだけ直しました。
#MofuUI
0
0
0
0
ムム、Mastodon v4.4.2 では v4.4.1 より更に Mofu UI が壊れたかも。返信の通知の余白がない。
#MofuUI
0
0
1
0
Mastodon v4.4 に対応する為の応急処置を行いました。スマートホンなどで閲覧した場合もメニューが一応触れる状態になりました。配置ガタガタだけど。来週、普段の開発環境に帰ってから見直します。
#MofuUI
0
0
0
0
Mastodon v4.4 が導入された事で、Mofu UI の体裁が少し崩れてます :blobcatverysad: すぐ対応できない。
#MofuUI
0
0
1
0
投稿の本文にカーソルを乗せた時の縞模様を、全域に対する repeating-linear-gradient ではなく、小さな長方形に対する repeating-linear-gradient をタイルする方式に変えてみた。その方が負荷が低いんぢゃないかという気がしたからだけど、本当にそうかは疑わしいな…。
#MofuUI #CSS
0
0
0
0
添付画像のカド丸を、曲率が連続な曲線にしてみました（図の中央）。有用性は全然ないし、どんな風になるか試したかっただけ。
従来は普通に border-radius で実装していた（図の左）。今回は、隠すべき部分の形を SVG を定義して、subtract で mask した。この方法は border や outline や box-shadow が絡む場合は使えないだろうなあ。
私の環境（Mac の Chrome）では、mask は border-radius よりも少ない階調数でアンチエイリアスされるみたいで、折角 […]
[Original post on mofu.kemo.no]
0
0
1
0
投稿作成枠の候補メニューの体裁を弄りました（図の右）。余白を少し詰めて、絵文字やプロフ画像を大きくして、それらに背景色を敷いた。
この画面写真はいつもと違って、二倍解像度の MacBook Air 2019 の上で Safari v18.4 で撮ってみた。
#MofuUI
0
0
0
0
「システムのテーマを使用」は、ライトとダークの間ではなく、ライトとハイコントラストの間で切り替える事にしました（昨夜）。元々 Mofu UI は「ダーク」と「ハイコントラスト」の意味付けを勝手に変更していて、「ライト」の配色の鏡写しになっているのは「ハイコントラスト」なので…。
ダークは「暗め」という位置付け。画面全体の背景に対してカラム背景が少し明るい。カラム背景は色味を帯びる。
ハイコントラストは「ほぼ黒」という位置付け。画面全体の背景に対してカラム背景の方が暗くて、カラム背景は必ず無彩色になる。
#MofuUI
0
0
1
0
メニュー類の体裁を或る程度 直しました。検索欄の下に現れる候補メニューの周りの陰影とか。投稿作成枠の中でハッシュタグ（#…）やアット言及（@…）や絵文字ショートコード（:…）を打ち込む時の候補メニューとか。
Mastodon v4.3 で「システムのテーマを使用」に対応する為に追加されたと思われる CSS のルールは、既存のルールよりも無駄にセレクターの詳細度が高くて、カスタムスタイルシートによる上書きを更に上書きして来るので困る。詳細度の軍拡競争が起きるので已めてほしい。
#MofuUI #Mastodon #MastodonEngineering
0
0
1
0
細かい問題を色々と直しました。フォローされた通知の「相互フォロー中」のボタンにカーソルを乗せると「赤地に赤」で読めなくなるのとか…。
#MofuUI
0
0
1
0
行高が指定されていないせいで高さがフォント任せになっている所があるのを改善しました。
図の上が私の Chrome での従来の見え方。「English」のボタンは「公開」よりも高さが小さくなっていた。
#MofuUI #Mastodon
1
1
1
0
明暗の切り替えだけは @\container に未対応でも機能するようにして、それ以外の配色関連のルールを @\container で整理しました。iOS 15 の Safari では、読み込む度に背景色が微妙に変わるのが無効になった。まあ、しょうがない。
#MofuUI
0
0
1
0
テーマの選択肢「システムのテーマを使用」にようやく大体対応しました。端末の設定が白地に黒なら「ライト」に相当する体裁に、黒地に白なら「ダーク」に、自動的に切り替わります。（細かい事を言うと検索欄コマンド「/lc」での挙動が微妙に違うけど、まあ使ってる人いないだろうし。）
やっぱり「body.theme-mastodon-light { … }」と「@\media (prefers-color-scheme: light) { body.theme-system { … } }」は連結できないから、同じルールを二回書くしかなかった。せめてもの抵抗として、繰り返されるルールは全部カスタム […]
0
0
1
0
フィルターされた投稿を展開するボタンは、警告付きの投稿を展開するボタンより目立たないようにしました。また、閉ぢている状態では返信などのボタンも非表示となるようにしました。
警告付きの投稿を読みたいかどうかは警告の内容次第だけど、フィルターされた投稿は利用者にとって「見たくない物」だと考えられるので、際立ちを抑える方がいいと判断しました。ちなみに Mastodon v4.2 では、誰が投稿したかすら分からないくらい目立たない表示形式だった。
#MofuUI #Mastodon
0
0
0
0
(5) フィルターに引っ掛かった投稿を展開するボタンが Mastodon v4.3 では内容警告文と共通化されたので、先日の Mofu UI の更新で警告のアイコンが両方に表示されていました。警告文の方だけにアイコンが付くように修正しました。
フィルターのアイコンを別途用意する必要はないと判断しました。従来 v4.2 まで使われていた「フィルターされました」という表示に関する CSS のルールは不要になったので消しました。
#MofuUI #Mastodon
0
0
0
0
項目の左端のフチの縦線って色んな意味合いで使われるけど、現在の Mofu UI においては「時系列を超越して差し込まれた投稿」という意味です。だから「固定された投稿」と「ブーストされた投稿」の見せ方が一緒になってる。
#MofuUI
0
0
1
0
(4) ブーストされた投稿の左端に縦線を描いていたのが Mastodon v4.3 で無効になっていましたが、これを復旧しました。
その他、細部を調整。内容は GitHub で見られます。
https://github.com/sayunuh/mofu-ui/commits/main/
#MofuUI
0
0
1
0
Mofu UI を少し弄りました。
(1) 内容警告文を展開するボタンにキーボードのタブキーでフォーカスした場合、フォーカスリングを表示するようにしました。
(2) 「探索する」の「人々」に体裁が設定されておらず、背景が透過していたのを直しました。
(3) 投稿の上に「何々さんへの返信」と表示される条件が Mastodon v4.3 で変わったので、二人で会話している物が「続き」に置換されないようにしました。
#MofuUI
0
0
2
0
Mofu UI について、Mastodon v4.3 が導入された事で発生した問題の一部をようやく直しました。
(1) プロフィール補足情報の欄で、確認済みの URL が「」の後で無駄に改行されていたのを修正しました。
(2) ブーストボタンのフォーカスリングとブースト数の色が緑になっていなかったのを修正しました。
(3) 内容警告文の体裁を v4.2 の頃の奴に復旧しました（図の下）。かつて「Warning」または「警告」という文字を表示していた部分は、代わりに警告のアイコンを使うようにしました […]
[Original post on mofu.kemo.no]
0
0
2
0
考え直して、今の表紙絵の内容を狙い撃ちした値に変更しました。縦幅は、表示領域の縦幅の 25%（25vh）以内、かつカラム横幅の 35% 以内とした。また、拡縮の中心を縦の真ん中ではなく、上から 44% の点にした。こうするとロゴやキャラクターが枠内に収まりやすい。
#MofuUI
0
0
1
0
ローカルタイムラインの先頭の表紙絵は大き過ぎる場合があるという感想を頂いたので、縦幅の上限を抑えました（25vh から 16.667vh に変更）。こうすると横幅が大きい場合に細くなっちゃってロゴが見えなくなるんだけどね。background-size に「cover」を適用してるだけだとあまり思うようにならない…。
#MofuUI
0
0
1
0
投稿に添付された音声の枠の周りに無用な outline が表示されていたのを修正しました。
#MofuUI
0
0
0
0
投票を作成する枠の構造が Mastodon v4.3 で大きく変わったので、その体裁が崩壊していたのを修正しました。
その他、細かく直してるのは GitHub で一応分かります。
https://github.com/sayunuh/mofu-ui/commits/main/
#MofuUI
1
0
0
0
https://github.com/sayunuh/mofu-ui/commits/main/
ようやくローカル環境の SSH の設定をしたので、滞留していたコミットを GitHub にプッシュできました。Sourcetree のアカウント設定画面でボタンを押すだけだった。
#MofuUI
1
0
1
0
1
0
0
0