#MofuUI

白湯さゆぬsayunu@mofu.kemo.no
2025-06-23

添付画像のカド丸を、曲率が連続な曲線にしてみました(図の中央)。有用性は全然ないし、どんな風になるか試したかっただけ。

従来は普通に border-radius で実装していた(図の左)。今回は、隠すべき部分の形を SVG で定義して、subtract で mask した。この方法は border や outline や box-shadow が絡む場合は使えないだろうなあ。

私の環境(Mac の Chrome)では、mask は border-radius よりも少ない階調数でアンチエイリアスされるみたいで、折角曲率を滑らかにしても少しザリザリした感じになる。あと設定し方に依っては寸法の端数が一画素分のズレになったりする。border-radius で大人しくしておいた方が無難。

#MofuUI #CSS

白湯さゆぬsayunu@mofu.kemo.no
2025-06-15

投稿作成枠の候補メニューの体裁を弄りました(図の右)。余白を少し詰めて、絵文字やプロフ画像を大きくして、それらに背景色を敷いた。

この画面写真はいつもと違って、二倍解像度の MacBook Air 2019 の上で Safari v18.4 で撮ってみた。

#MofuUI

白湯さゆぬsayunu@mofu.kemo.no
2025-06-14

「システムのテーマを使用」は、ライトとダークの間ではなく、ライトとハイコントラストの間で切り替える事にしました(昨夜)。元々 Mofu UI は「ダーク」と「ハイコントラスト」の意味付けを勝手に変更していて、「ライト」の配色の鏡写しになっているのは「ハイコントラスト」なので…。

ダークは「暗め」という位置付け。画面全体の背景に対してカラム背景が少し明るい。カラム背景は色味を帯びる。

ハイコントラストは「ほぼ黒」という位置付け。画面全体の背景に対してカラム背景の方が暗くて、カラム背景は必ず無彩色になる。

#MofuUI

白湯さゆぬsayunu@mofu.kemo.no
2025-06-14

メニュー類の体裁を或る程度 直しました。検索欄の下に現れる候補メニューの周りの陰影とか。投稿作成枠の中でハッシュタグ(#…)やアット言及(@…)や絵文字ショートコード(:…)を打ち込む時の候補メニューとか。

Mastodon v4.3 で「システムのテーマを使用」に対応する為に追加されたと思われる CSS のルールは、既存のルールよりも無駄にセレクターの詳細度が高くて、カスタムスタイルシートによる上書きを更に上書きして来るので困る。詳細度の軍拡競争が起きるので已めてほしい。

#MofuUI #Mastodon #MastodonEngineering

白湯さゆぬsayunu@mofu.kemo.no
2025-06-13

細かい問題を色々と直しました。フォローされた通知の「相互フォロー中」のボタンにカーソルを乗せると「赤地に赤」で読めなくなるのとか…。

#MofuUI

白湯さゆぬsayunu@mofu.kemo.no
2025-06-13

行高が指定されていないせいで高さがフォント任せになっている所があるのを改善しました。

図の上が私の Chrome での従来の見え方。「English」のボタンは「公開」よりも高さが小さくなっていた。

#MofuUI #Mastodon

白湯さゆぬsayunu@mofu.kemo.no
2025-06-09

明暗の切り替えだけは @\container に未対応でも機能するようにして、それ以外の配色関連のルールを @\container で整理しました。iOS 15 の Safari では、読み込む度に背景色が微妙に変わるのが無効になった。まあ、しょうがない。

#MofuUI

白湯さゆぬsayunu@mofu.kemo.no
2025-06-07

テーマの選択肢「システムのテーマを使用」にようやく大体対応しました。端末の設定が白地に黒なら「ライト」に相当する体裁に、黒地に白なら「ダーク」に、自動的に切り替わります。(細かい事を言うと検索欄コマンド「/lc」での挙動が微妙に違うけど、まあ使ってる人いないだろうし。)

やっぱり「body.theme-mastodon-light { … }」と「@\media (prefers-color-scheme: light) { body.theme-system { … } }」は連結できないから、同じルールを二回書くしかなかった。せめてもの抵抗として、繰り返されるルールは全部カスタムプロパティーの参照だけになるようにした。とても面倒だった。

#MofuUI #Mastodon

白湯さゆぬsayunu@mofu.kemo.no
2025-05-22

フィルターされた投稿を展開するボタンは、警告付きの投稿を展開するボタンより目立たないようにしました。また、閉ぢている状態では返信などのボタンも非表示となるようにしました。

警告付きの投稿を読みたいかどうかは警告の内容次第だけど、フィルターされた投稿は利用者にとって「見たくない物」だと考えられるので、際立ちを抑える方がいいと判断しました。ちなみに Mastodon v4.2 では、誰が投稿したかすら分からないくらい目立たない表示形式だった。

#MofuUI #Mastodon

白湯さゆぬsayunu@mofu.kemo.no
2025-05-18

(5) フィルターに引っ掛かった投稿を展開するボタンが Mastodon v4.3 では内容警告文と共通化されたので、先日の Mofu UI の更新で警告のアイコンが両方に表示されていました。警告文の方だけにアイコンが付くように修正しました。

フィルターのアイコンを別途用意する必要はないと判断しました。従来 v4.2 まで使われていた「フィルターされました」という表示に関する CSS のルールは不要になったので消しました。

#MofuUI #Mastodon

白湯さゆぬsayunu@mofu.kemo.no
2025-05-18

項目の左端のフチの縦線って色んな意味合いで使われるけど、現在の Mofu UI においては「時系列を超越して差し込まれた投稿」という意味です。だから「固定された投稿」と「ブーストされた投稿」の見せ方が一緒になってる。

#MofuUI

白湯さゆぬsayunu@mofu.kemo.no
2025-05-18

(4) ブーストされた投稿の左端に縦線を描いていたのが Mastodon v4.3 で無効になっていましたが、これを復旧しました。

その他、細部を調整。内容は GitHub で見られます。
github.com/sayunuh/mofu-ui/com

#MofuUI

白湯さゆぬsayunu@mofu.kemo.no
2025-05-18

Mofu UI を少し弄りました。

(1) 内容警告文を展開するボタンにキーボードのタブキーでフォーカスした場合、フォーカスリングを表示するようにしました。

(2) 「探索する」の「人々」に体裁が設定されておらず、背景が透過していたのを直しました。

(3) 投稿の上に「何々さんへの返信」と表示される条件が Mastodon v4.3 で変わったので、二人で会話している物が「続き」に置換されないようにしました。

#MofuUI

白湯さゆぬsayunu@mofu.kemo.no
2025-05-06

Mofu UI について、Mastodon v4.3 が導入された事で発生した問題の一部をようやく直しました。

(1) プロフィール補足情報の欄で、確認済みの URL が「https://」の後で無駄に改行されていたのを修正しました。

(2) ブーストボタンのフォーカスリングとブースト数の色が緑になっていなかったのを修正しました。

(3) 内容警告文の体裁を v4.2 の頃の奴に復旧しました(図の下)。かつて「Warning」または「警告」という文字を表示していた部分は、代わりに警告のアイコンを使うようにしました。

ほかにハッシュタグのカド丸の形など、細かい所を少し弄りました。

#MofuUI

白湯さゆぬsayunu@mofu.kemo.no
2025-01-21

カラムがどれぐらい細長いかに応じて表紙絵の形が若干変わるようにしました。カラムの背丈が幅の二倍以下の場合、表紙絵の横縦比は 100:35(下限)。背丈が幅の五倍以上の場合、表紙絵は 100:50(上限)。その間を線形に結ぶ。

(カラム幅を表すカスタムプロパティーの値が実際の描画と乖離する場合がある件も直しました。)

#MofuUI

白湯さゆぬsayunu@mofu.kemo.no
2025-01-20

考え直して、今の表紙絵の内容を狙い撃ちした値に変更しました。縦幅は、表示領域の縦幅の 25%(25vh)以内、かつカラム横幅の 35% 以内とした。また、拡縮の中心を縦の真ん中ではなく、上から 44% の点にした。こうするとロゴやキャラクターが枠内に収まりやすい。

#MofuUI

白湯さゆぬsayunu@mofu.kemo.no
2025-01-20

ローカルタイムラインの先頭の表紙絵は大き過ぎる場合があるという感想を頂いたので、縦幅の上限を抑えました(25vh から 16.667vh に変更)。こうすると横幅が大きい場合に細くなっちゃってロゴが見えなくなるんだけどね。background-size に「cover」を適用してるだけだとあまり思うようにならない…。

#MofuUI

白湯さゆぬsayunu@mofu.kemo.no
2025-01-11

ローカルタイムラインの先頭にサーバーの表紙絵を挿入するようにしてみました。邪魔にならないといいけど。(画面表示領域全体の縦幅が 512px 以上ある時のみ有効。表紙絵の縦幅は、表示領域の縦幅の 25% 以内、かつカラム横幅の 50% 以内とする。この代わりに「.dismissable-banner」は非表示とする。)

併せて、画面全体に敷いていた背景画像は撤去しました。同じ画像の繰り返しになってしまうので。

#MofuUI

白湯さゆぬsayunu@mofu.kemo.no
2025-01-08

投稿に添付された音声の枠の周りに無用な outline が表示されていたのを修正しました。

#MofuUI

白湯さゆぬsayunu@mofu.kemo.no
2024-12-07

投票を作成する枠の構造が Mastodon v4.3 で大きく変わったので、その体裁が崩壊していたのを修正しました。

その他、細かく直してるのは GitHub で一応分かります。
github.com/sayunuh/mofu-ui/com

#MofuUI

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst