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:style.css
/* 新着以外のテロメア */
.line .telomere .telomere-border {
border-color: var(--main-color); /* これ灰色のとこ */
}
code: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;
}
新着のテロメア
code:style.css
/* 新着のテロメア */
.line .telomere .telomere-border.unread {
border-color: var(--accent-color) ; /* これ緑のとこ */
}
グラデーション（横方向）
UserCSS:グラデーション
code: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%; }
}
グラデーション（縦方向）
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;
}
scrasobox /scrasobox/スリムなテロメア
code: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 }
code:style.css
/* ↓新着以外のテロメアの色と太さ */
.line .telomere .telomere-border { background-color: #dedede; width: 2px }
code:stylexx.css
/* ↓新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread { background-color: #fcc; width: 5px }
forum-jp - /forum-jp/テロメアの1段分の幅をもう少し広くしたい
code:stylexx.css
.line .telomere .telomere-borderstyle*="1px" { border-left-width: 5px !important; }
.line .telomere .telomere-borderstyle*="2px" { border-left-width: 6px !important; }
.line .telomere .telomere-borderstyle*="3px" { border-left-width: 7px !important; }
.line .telomere .telomere-borderstyle*="4px" { border-left-width: 8px !important; }
.line .telomere .telomere-borderstyle*="5px" { border-left-width: 9px !important; }
.line .telomere .telomere-borderstyle*="6px" { border-left-width: 10px !important; }
.line .telomere .telomere-borderstyle*="7px" { border-left-width: 11px !important; }
.line .telomere .telomere-borderstyle*="8px" { border-left-width: 12px !important; }
.line .telomere .telomere-borderstyle*="9px" { border-left-width: 13px !important; }
.line .telomere .telomere-borderstyle*="10px" { border-left-width: 14px !important; }
UserCSS:telomere
Scrapbox:テロメア
Scrapbox:line
Scrapbox:telomere
Scrapbox:telomere-border
Scrapbox:unread
UserCSS:禅モード -- テロメアを非表示にしている
gosyujin - /gosyujin/Scrapboxのテロメアのデザインを操作するUserCSS
https://img.shields.io/badge/UserCSS-テロメア-1572B6.svg?logo=css3&style=for-the-badge
#UserCSS-term
UserCSS.icon