generated at
テロメアとの戦い

あらすじ
テロメアを細くしたいと思った。あと、未読さえわかれば、テロメア要らないと思った。さて、どうしようか。


〜 スマートではないやり方で 〜

デフォルト

少しいじる
まず、telomere-borderクラス?のbox-sizingをcontent-boxにすることで、色が反映されるようになった。
そして、background-colorを変えると、テロメアの本文側の色が変わる。
それから、telomere-border.unread(略してunreadクラス?)のbackground-colorを変えたが、はじめ、色が変わらなかった。
!importantをつけてクリア。

さらにいじる
border-colorというのが、テロメアのうち、もともと灰色のところ。
そこをピンクにした。
けど、unreadは、デフォルトの緑色のままである。

さらにいじる
unreadの方をいじって、太い赤い線に。

俺はテロメアを細くしたいんだ
細くした。
backgroundの色をnoneにすれば短くなるんだな。
というか、デフォルトnoneじゃない?
最初に戻っただけだった。

さらにいじる
テロメアのborder-colorをページの色と同じにする。
unreadの背景と線を赤にすると、太い未読になる。
未読さえ分かればいいと思っている。

あ、!importantつけたら
細くなった。
枠線の太さをいじったからだ。
その後もすこしいじっていると、、、

え?
赤が水色で囲まれた。
未読のところが赤色かつ、枠線は水色で、そして枠線の太さが2pxだとこうなった。
そりゃそうか。枠線だから。
ということは、

テロメアを未読のみ&極細に
枠線を左のみにつけた。
けっか、テロメアの存在感がなくなった。
border-widthの4番目は左側の枠線の太さ。

最終版
デフォルトのデザインを生かすことにした。
幅を細くした。
未読以外は見えなくした。


そのスクリプトはこちら
style.css
.line .telomere .telomere-border { box-sizing: content-box; background-color: none; border-color: white; } .unread { background-color: white !important; border-width: 0px 0px 0px 5px !important; }