キャラアイコン表示用UserCSS
code:style.css
.line:has( img.iconalt$='_i') {
--chara-icon-size: 32px;
--chara-table-icon-size: 48px;
--chara-strong-icon-size: 64px;
/* テキストがずれるのを補正 */
img {
vertical-align: bottom;
}
/* キャラ顔アイコンのmarginとサイズ */
& imgalt$='_i' {
margin: 8px 1px 0;
}
/* 小アイコン */
/* アイコンを含む行はマーカーの位置を下揃えにする */
& span:has( .dot) {
display: inline-block;
height: calc(var(--chara-icon-size) + 3px);
}
.indent-mark .dot {
display: inline-block;
height: 100%;
}
.indent-mark .dot::before {
top: auto;
bottom: 0px;
}
/* サイズ指定 */
.iconalt$='_i' {
width: var(--chara-icon-size);
height: var(--chara-icon-size);
}
/* テーブル内のアイコン */
& .table-block {
& .iconalt$='_i' {
width: var(--chara-table-icon-size);
height: var(--chara-table-icon-size);
}
& .cell:not(:has( .iconalt$='_i')) .cell-text {
min-height: calc(var(--chara-table-icon-size) + 8px);
height: calc(var(--chara-table-icon-size) + 8px);
display: inline-block;
vertical-align: bottom;
}
}
/* 大アイコンを含む行 */
&:has( .strong-icon) {
/* アイコンを含む行はマーカーの位置を下揃えにする */
& span:has( .dot) {
display: inline-block;
height: calc(var(--chara-strong-icon-size) + 2px);
}
.indent-mark .dot {
display: inline-block;
height: 100%;
}
.indent-mark .dot::before {
top: auto;
bottom: 0px;
}
.strong-iconalt$='_i'{
width: var(--chara-strong-icon-size);
height: var(--chara-strong-icon-size);
}
}
}
code:style.css_
/* 基地スキルページ用 */
.lines:has( .line:nth-of-type(n+2):nth-of-type(-n+3) atype='hashTag'href='/tantei/%E5%9F%BA%E5%9C%B0%E3%82%B9%E3%82%AD%E3%83%AB'),
.lines:has( .line:nth-of-type(n+2):nth-of-type(-n+3) atype='hashTag'href='/tantei/%E6%96%B0%E6%9C%88%E5%90%8C%E8%A1%8C') {
--an-icon-size: 32px;
--an-strong-icon-size: 64px;
/* テキストがずれるのを補正 */
img {
vertical-align: bottom;
}
/* これはなんだ */
.line:has( .icon):has( ahref$='_i') .indent > span:not(:has( .icon)) span.char-index:not(:has( .empty-char-index)){
position: relative;
bottom: -2px;
}
.line:has( .icon):has( ahref$='_i') .indent > span:not(:has( .icon)) span.deco-\+ span.char-index {
position: relative;
bottom: 0px;
}
& span:has(> .icon):has( ahref$='_i') {
display: inline-block;
padding-top: .6em;
}
.line:not(.line-title).line:not(:has( .icon,.table-block,.code-block)) {
margin-top: .4em;
}
.line:not(.line-title).line:not(:has( .icon,.table-block,.code-block)) + .line span:has(> .icon) {
margin-top: .1em;
}
/* 小アイコン */
.line:has( .icon):has( ahref$='_i') {
/* アイコンを含む行はマーカーの位置を下揃えにする */
& span:has( .dot) {
display: inline-block;
height: calc(var(--an-icon-size) + 3px);
}
.indent-mark .dot {
display: inline-block;
height: 100%;
}
.indent-mark .dot::before {
top: auto;
bottom: 0px;
}
.icon {
width: var(--an-icon-size) !important;
height: var(--an-icon-size) !important;
}
}
/* 大アイコンを含む行 */
.line:has( .strong-icon):has( ahref$='_i') {
/* アイコンを含む行はマーカーの位置を下揃えにする */
& span:has( .dot) {
display: inline-block;
height: calc(var(--an-strong-icon-size) + 8px);
}
.indent-mark .dot {
display: inline-block;
height: 100%;
}
.indent-mark .dot::before {
top: auto;
bottom: 0px;
}
/* 直前がアイコンの場合、左に隙間を作る */
& span:has( .strong-icon) + span:has( .strong-icon) {
margin-left: 1px;
}
.strong-iconalt^="アークナイツ_", .strong-iconalt^="新月_" {
width: var(--an-strong-icon-size) !important;
height: var(--an-strong-icon-size) !important;
}
}
}