このエントリーは、かつて「ますとどんちほー」の利用者であった望月円香 (@mt_madoka) 氏が同サーバーの利用者向けに公開していたユーザースタイル「Flexible Mastodon」をアーカイブのためにソースコードを掲載するものです。
このユーザースタイルは Mastodon の閲覧を補助するための物で、具体的には
- ユーザー ID を常時表示する
- 画像を幅一杯表示する
- 通知欄の表示を簡略化する
などがあります。
かつては UserStyles.org にアップロードされていたのですが、このサイトが利用できなくなり、元の投稿者であった望月円香氏もまた前述の Mastodon サーバーを退会してから年月が過ぎてソースコードを消去していました。
たまたま私 (Kossie/こじー) のストレージからソースコードが見つかったためこちらに掲載します。
ただし、当該ソースコードの最下段「カラム幅を変更」の数値については私が利用するために改変した後の物しか見つからなかったため完全なミラーではないことを予めご承知おきください。
なお、事前に望月円香氏の友人である赤道桜花 (@sekidou_ouka) 氏を経由してソースコードの掲載許諾は頂いています。
ライセンスは CC0 とします。
/* 画像を幅一杯表示 */
.media-gallery {
height: auto !important;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
@media (min-width: 961px) {
:not(.detailed-status) > .media-gallery {
width: calc(100% + 64px);
margin-top: 16px;
position: relative;
left: -64px;
}
}
.media-gallery__item {
flex-grow: 1;
position: static;
border: 1px solid rgba(128, 128, 128, .5);
}
.media-gallery__item-thumbnail img {
max-height: calc(100vh / 3);
object-fit: contain;
}
.media-gallery__item-gifv-thumbnail {
object-fit: contain;
}
.media-gallery__gifv {
height: 110px;
}
.detailed-status .media-gallery__gifv {
height: auto;
}
/* 通知欄の表示を簡略化 */
.notification .display-name,
.notification .status__action-bar,
.notification .status__relative-time {
display: none;
}
.notification__favourite-icon-wrapper + span {
font-size: small;
}
.notification .status__content p {
color: rgba(255, 255, 255, .75);
}
/* userIDを常に表示する */
.display-name__html {
display: block;
float: left;
margin-right: .5rem;
}
.display-name__account {
display: block;
float: left;
}
/* clearfix */
.display-name:after {
content: "";
clear: both;
display: block;
}
/* カラム幅を変更 */
@media (min-width: 631px) {
.column {
flex-grow: 1;
width: 0;
}
.drawer,
.column:last-of-type {
flex-grow: 1;
width: 0;
max-width: 360px;
}
}以上です。
<チラシの裏>
本当は UserStyles.world とかにアップロードするべきなんだろうけど、やれ「うちらのシマの書式に従え」だの「連絡先をちゃんとしろ」だのうるさく言われて面倒くさくなって諦めてしまった。
