テロメアとの戦い

あらすじ

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

デフォルト

https://gyazo.com/d837284c807e6282e001fbb0c80ebe60

少しいじる

https://gyazo.com/c92dc2c54acfaf83e21de8c3bfe99b3c

まず、telomere-borderクラス？のbox-sizingをcontent-boxにすることで、色が反映されるようになった。

そして、background-colorを変えると、テロメアの本文側の色が変わる。

それから、telomere-border.unread（略してunreadクラス？）のbackground-colorを変えたが、はじめ、色が変わらなかった。

!importantをつけてクリア。

さらにいじる

https://gyazo.com/9b894b395a7faafbda13655ec9387f45

border-colorというのが、テロメアのうち、もともと灰色のところ。

そこをピンクにした。

けど、unreadは、デフォルトの緑色のままである。

さらにいじる

https://gyazo.com/7c718685166a957b53d5e1c0f2183e84

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

俺はテロメアを細くしたいんだ

https://gyazo.com/22889333a18bfea8c97186334c4e32da

細くした。

backgroundの色をnoneにすれば短くなるんだな。

というか、デフォルトnoneじゃない？

最初に戻っただけだった。

さらにいじる

https://gyazo.com/4df889ea70ff617a486a0480fb2f1660

テロメアのborder-colorをページの色と同じにする。

unreadの背景と線を赤にすると、太い未読になる。

未読さえ分かればいいと思っている。

あ、!importantつけたら

https://gyazo.com/1912ff6badd5e776a62e795c601095e9

細くなった。

枠線の太さをいじったからだ。

その後もすこしいじっていると、、、

え？

https://gyazo.com/0150aac58b27e01ff0c3269b50c29cf4

赤が水色で囲まれた。

未読のところが赤色かつ、枠線は水色で、そして枠線の太さが2pxだとこうなった。

そりゃそうか。枠線だから。

ということは、

テロメアを未読のみ＆極細に

https://gyazo.com/3fc153d0f9042aaadab3fdf19ab28882

枠線を左のみにつけた。

けっか、テロメアの存在感がなくなった。

border-widthの4番目は左側の枠線の太さ。

最終版

https://gyazo.com/2beea1424bf484d4e7021051664fc95e

デフォルトのデザインを生かすことにした。

幅を細くした。

未読以外は見えなくした。

そのスクリプトはこちら

code: 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;

}