スリムなテロメア
何かとお世話になるテロメアを細身にしてみたよ。
https://gyazo.com/9ed336065427a5d0794f53a20ebc2a75
新着行には色がつく。
古い行ほどテロメア線がページの左端に近くなる。
ピクセル単位の違いなので雰囲気で…。
時間差が大きければこんな感じ。
https://gyazo.com/78e95aec3d5af795ee4ea25f1e4b5d1a
オリジナルと比べると当たり判定が狭い。
マウスでもスマホでも触りたいときはちゃんと触れます。
code:style.css
/* スリムなテロメア */
.line .telomere .telomere-border, .line .telomere .telomere-border.unread {
transition: none;
box-sizing: content-box; border-color: #fefefe } .line .telomere .telomere-border:hover, .line .telomere .telomere-border.unread:hover {
box-sizing: border-box; width: auto;
border-color: #8f9899; background-color: transparent } /* ↓新着以外のテロメアの色と太さ */
.line .telomere .telomere-border { background-color: #dedede; width: 2px } /* ↓新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread { background-color: #fcc; width: 5px } 2018-01-19 クラス名変わったぽいので対応
2018-02-07 クラス名変わったぽいので対応