テロメアとの戦い
あらすじ
テロメアを細くしたいと思った。あと、未読さえわかれば、テロメア要らないと思った。さて、どうしようか。
〜 スマートではないやり方で 〜
デフォルト
少しいじる
まず、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;
}