最近書いたMastodon向けCSS
- いずみん
- Tags: friends.nico
またなんか書きました。
明けましておめでとうございます(激遅)。
2018年になってから3ヶ月ほど経ちましたが皆様いかがお過ごしでしょうか。
ぼくは1月、2月と1ヶ月おきに風邪ひいたりして散々です。もう身体の節々が痛くなるのほんとつらい。
あんなの寝るのも起きるのも地獄になる最悪なもんですからね。はっきりいってクソ。
そして3月、暖かくなり夜も落ち着いて寝れるような季節になりつつありますが、春といったら花粉ですよ。
起きてから寝るまで目は痒いわ鼻はムズムズして気持ちわるいわだるさを感じるわで結局クソ。
いつになったら過ごしやすい季節になるのか・・・待ち遠しいです!(白目)
さてさて、今回は前回に紹介したCSSの改良版やちょっとしたのを書いたので置いときたいと思います。
・選択トゥート背景の透明度・色変更 改良版
前回でも紹介したものですが、今回の改良でトゥート内容も点滅せず背景だけゆっくり点滅できるようになりました。
.focusable:focus, .focusable:focus .status.status-direct{ background: linear-gradient(182deg, #f2f2f2b0, #0000); background-size: 400% 400%; -o-animation: AnimationName 3s ease infinite; animation: AnimationName 3s ease infinite; } @-o-keyframes AnimationName { 0%{background-position:51% 0%} 50%{background-position:50% 100%} 100%{background-position:51% 0%} } @keyframes AnimationName { 0%{background-position:51% 0%} 50%{background-position:50% 100%} 100%{background-position:51% 0%} }
ただ最近のアップデートでDMとそれ以外のトゥートの割り当てがちょっとかわったみたいで、すこし点滅する感じが違ったりしますが一応問題ないです。改良できる点があればぼくまで報告していただけるとうれしいです。
点滅する色を変えたい場合は3行目の
background: linear-gradient(182deg, #f2f2f2b0, #0000);
のシャープ部分をいじれば変わります。なおstylishで打ち込むよりstylusの方が色の変更がわかりやすいのでそちらで打ち込むのをおすすめします。
なお大多数の方々は「こんなのわかるか!!!!」と思いますのでこちらのサイトで調整して置き換えるといいと思います。
・トゥート入力画面背景画像差し替え、お気に入りタグ透過
TLの画像差し替えを応用して上記のようにもできるようしました。またこれによりお気に入りタグの欄で見えなくなるのを防ぐためにお気に入りタグの欄の背景を透過できるようにしました。
/*トゥート背景*/ .drawer__inner{ background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url("???"); background-position: center center; background-size: cover; } /*お気に入りタグ透過*/ .favourite-tags{ background-color:#0006; }
4行目の???に画像のURLをいれてください。これと一緒です。
あとはだいたいこれを見ればどうにかできます(丸投げ)。
なおお気に入りタグ透過のコードをそのままstylishに突っ込むとシャープ以下が赤くなりますがちゃんと反映されるのでご心配なく。
あとちょいちょい「保存して有効したのにコードが反映されない!!」などのお話も耳にします。そういうような現象が起こる方々の大半はstylishを利用しているようです。stylishはどうやらページをリロード、もしくは一度タブを閉じてもう一度開きなおすことによって反映する場合があるようですので試してはいかがでしょうか。
ちなみにstylusだと有効した瞬間に反映されるので個人的にはこちらのほうがいいかと思います。「さっさと反映させたい!」「いちいちリロードとかするのだるい!!」と思う方はこの機に変えてみるのもいいかもしれません。
今回はこの辺りで。皆様もよい春を。