settings

汎用settings

code:style.css

@import url('/api/code/Rutile3/settings/style.css');

デッキのカードを並べる

imageを「~」で横に並べる

code:style.css

/* マトリクス記法 */

.line:not(.cursor-line) .deco-\~ { display: inline-flex; align-items: center }

.line .deco-\~ img.image { object-fit: contain; margin: 0 }

/* 太字記法と組み合わせて列数を変える */

.line .level-1 .deco-\~ > span { width: calc(100%/1) }

.line .level-2 .deco-\~ > span { width: calc(100%/2) }

.line .level-3 .deco-\~ > span { width: calc(100%/3) }

.line .level-4 .deco-\~ > span { width: calc(100%/4) }

.line .level-5 .deco-\~ > span { width: calc(100%/5) }

iconを「|」と「~|」で横に並べる

code:style.css

/*

// .icon記法を並べて表示

// 「|」で5列並べ

// 「~|」で10列並べ

*/

/* 横の並びの制御*/

.line:not(.cursor-line) .deco-\| { display: inline-flex; align-items: center } /* 『キー』や『ピース』などの他と高さが異なるカードの為にcenterが必要 */

.line .deco-\| { flex-wrap: wrap }

.line .deco-\|:not(.deco-\~) > span { width: calc(100%/5) } /* 5列並べ */

.line .deco-\|.deco-\~ > span { width: calc(100%/10) } /* 10列並べ */

/* 画像範囲にリンクを反映 */

.line .deco-\| > span,

.line .deco-\| > span > span { display: inline-block }

.line .deco-\| a.icon { display: inline-block }

/* 『キー』や『ピース』などの他と高さが異なるカードの為に「height:auto」が必要 */

.line .deco-\| img.icon { object-fit: cover; margin: 0; width: 100%; height: auto }