UserCSS-キャラアイコン表示用
#settings #css #UserCSS
code:style.css
:root {
--chara-icon-size: 32px;
--chara-table-icon-size: 48px;
--chara-strong-icon-size: 64px;
}
.line:has(img.iconalt$='_i') {
/* テキストがずれるのを補正 */
& img { vertical-align: text-bottom; }
/* キャラ顔アイコンのmarginとサイズ */
& imgalt$='_i' {
margin: 8px 1px 0;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
/* 小アイコン */
/* サイズ指定 */
.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) .strong-iconalt$='_i'{
width: var(--chara-strong-icon-size);
height: var(--chara-strong-icon-size);
}
}