UserCSS:テロメアグラデーション

code:css

.line .telomere {

}

/* 未読部分らしい */

.unread {

}

.telomere-border {

}

/* 新着のテロメア */

.line .telomere .telomere-border.unread {

}

/* 新着以外のテロメア */

.line .telomere .telomere-border {

}

/* 日付が表示される部分 */

.line .telomere .telomere-border .description {

}

変数定義

code:style.css

:root {

--main-color: DarkGray; /* 主調色 */

--assort-color: White; /* 従属色 */

--base-color: WhiteSmoke; /* 背景色 */

--accent-color: BlueViolet; /* 強調色 */

}

新着以外のテロメア

code:stylexx.css

/* 新着以外のテロメア */

.line .telomere .telomere-border {

border-color: var(--main-color); /* これ灰色のとこ */

}

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

}

新着のテロメア

code:stylexx.css

/* 新着のテロメア */

.line .telomere .telomere-border.unread {

border-color: var(--accent-color) ; /* これ緑のとこ */

}

グラデーション（横方向）

code:style.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%; }

}

グラデーション（縦方向）

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

}

日付が表示される部分

code:style.css

/* 日付が表示される部分 */

.line .telomere .telomere-border .description {

background-color: var(--main-color); /* 背景色 */

color: var(--assort-color); /* 文字色 */

}

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

}

code:style.css

/* ↓新着以外のテロメアの色と太さ */

code:stylexx.css

/* ↓新着のテロメアの色と太さ */

code:stylexx.css

UserCSS.icon

https://img.shields.io/badge/UserCSS-テロメアグラデーション-1572B6.svg?logo=css3&style=for-the-badge