UserCSS:テロメア
なぜか 嫌われているもよう。
css.line .telomere {
}
/* 未読部分らしい */
.unread {
}
.telomere-border {
}
/* 新着のテロメア */
.line .telomere .telomere-border.unread {
}
/* 新着以外のテロメア */
.line .telomere .telomere-border {
}
/* 日付が表示される部分 */
.line .telomere .telomere-border .description {
}変数定義
style.css:root {
--main-color: DarkGray; /* 主調色 */
--assort-color: White; /* 従属色 */
--base-color: WhiteSmoke; /* 背景色 */
--accent-color: BlueViolet; /* 強調色 */
}新着以外のテロメア
style.css/* 新着以外のテロメア */
.line .telomere .telomere-border {
border-color: var(--main-color); /* これ灰色のとこ */
}stylexx.css/* 新着以外のテロメア */
.line .telomere .telomere-border {
width: 2px; /* */
background: linear-gradient( to left,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) 0% center / 1400% auto ; /* グラデーション */
animation: telomere 112s linear infinite;
animation-direction: reverse;
}新着のテロメア
style.css /* 新着のテロメア */
.line .telomere .telomere-border.unread {
border-color: var(--accent-color) ; /* これ緑のとこ */
}グラデーション（横方向）
stylexx.css /* 新着のテロメア */
.line .telomere .telomere-border.unread {
width: 2px; /* */
background: linear-gradient( to left,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) 0% center / 1400% auto ; /* グラデーション */
animation: telomere 112s linear infinite;
animation-direction: reverse;
}
@keyframes telomere {
to { background-position-x: 1400%; }
} グラデーション（縦方向）
stylexx.css /* 新着のテロメア */
.line .telomere .telomere-border.unread {
background: linear-gradient( to bottom,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) center 0% / auto 1400% ; /* グラデーション */
animation: telomere 112s linear infinite;
animation-direction: reverse;
}
@keyframes telomere {
to { background-position-y: 1400%; }
} 日付が表示される部分
style.css /* 日付が表示される部分 */
.line .telomere .telomere-border .description {
background-color: var(--main-color); /* 背景色 */
color: var(--assort-color); /* 文字色 */
}stylexx.css /* 日付が表示される部分 */
.line .telomere .telomere-border .description {
background: linear-gradient( to bottom,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) center 0% / auto 1400% ; /* グラデーション */
animation: telomere 112s linear infinite;
animation-direction: reverse;
}stylexx.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 }
style.css/* ↓新着以外のテロメアの色と太さ */
.line .telomere .telomere-border { background-color: #dedede; width: 2px }
stylexx.css/* ↓新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread { background-color: #fcc; width: 5px }stylexx.css.line .telomere .telomere-border[style*="1px"] { border-left-width: 5px !important; }
.line .telomere .telomere-border[style*="2px"] { border-left-width: 6px !important; }
.line .telomere .telomere-border[style*="3px"] { border-left-width: 7px !important; }
.line .telomere .telomere-border[style*="4px"] { border-left-width: 8px !important; }
.line .telomere .telomere-border[style*="5px"] { border-left-width: 9px !important; }
.line .telomere .telomere-border[style*="6px"] { border-left-width: 10px !important; }
.line .telomere .telomere-border[style*="7px"] { border-left-width: 11px !important; }
.line .telomere .telomere-border[style*="8px"] { border-left-width: 12px !important; }
.line .telomere .telomere-border[style*="9px"] { border-left-width: 13px !important; }
.line .telomere .telomere-border[style*="10px"] { border-left-width: 14px !important; }UserCSS:禅モード -- テロメアを非表示にしている
