宗教戦争勃発しそうな話題
https://mstdn.y-zu.org/@Cookie/104397075561753495
このアカウントは、notestockで公開設定になっていません。
@noellabo
ブーストとドロップダウン(▲▼が1つのアイコンになってるやつ)は直接svgを置き換えていますね…
https://github.com/GenbuProject/Mastodon-Material/blob/master/src/mastodon-material/theme/material-icons.scss
本提案に先立ち、 @mayaeh さんが本家にプルリクエスト（実装提案）を行っているのですが、こいつはすげークレバーです。
https://github.com/tootsuite/mastodon/pull/14119
私のアプローチとは逆で、ブーストボタンで公開範囲がわかるように、未収載投稿のブーストボタンを開いた鍵アイコンに変更する、という解決方法です。
コード量が極めて少なく、ボタンと言うこともあって大きく表示されるので視認性が高く、画面上に追加の要素が増えないというメリットがあります。
ブーストアイコンではないものを使ってブースト機能を表現する点が直感的で無いという問題がありますが、なんか良い方法ないですかね……。（慣れるという手もある）
// boost icon"svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="＃{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="＃{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
.no-reduce-motion button.icon-button i.fa-retweet {
height: 18px;
width: 18px;
transition: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="URL:www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="＃{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="＃{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
}
}</code>
ブーストボタンについてですが、なんとCSSに根気でsvgを埋め込んで実装しております… #MastodonMaterial
https://fedibird.com/@noellabo/104396325355168981
改良がついにCSSにも及びはじめて大歓喜…！
https://fedibird.com/@noellabo/104396325355168981
このアカウントは、notestockで公開設定になっていません。
投稿は、
(1) WebUIのタイムライン
(2) WebUIの詳細表示
(3) 公開ページのタイムライン
(4) 公開ページの詳細表示
があって、割と実装がバラバラだったりしてます。
各要素にclass指定がされているので、それを利用してCSSで表示をカスタマイズしてテーマを作成したりするのですが、公開範囲を表すclassがついていたりついていなかったりしていました。
これ、もの凄く不便なので、それぞれに不足しているものを追加しています。
.status-public
.status-unlisted
.status-private
.status-direct
.detailed-status-public
.detailed-status-unlisted
.detailed-status-private
.detailed-status-direct
のついたdivで囲まれるように統一しましたので、マージされた場合は活用してください。（マージされなかったら別PRで出します）
CSSだけで、背景色を変えたり、ブーストボタンのアイコンを差し替えたりできます。
