UserCSS-拡張記法で画像表示サイズを調整する

code:style.css

/* 縦サイズ設定 */

:root {

--image-size-level-1: 48px;

--image-size-level-2: 72px;

--image-size-level-3: 120px;

--image-size-level-4: 160px;

--image-size-level-5: 240px;

--image-size-level-6: 320px;

--image-size-level-7: 480px;

--image-size-level-8: 640px;

--image-size-level-9: 640px;

--image-size-level-10: 640px;

}

/* 文字用だった装飾解除*/

.line:has(.deco-\* img.icon):not(:has(.deco-\* .char-index:not(.empty-char-index))) {

& .deco strong.level:has(img.image, img.icon) {

font-weight: 400;

& .deco-\* .char-index {

color: inherit;

background: transparent;

mix-blend-mode: unset;

}

}

/* 適用 */

& img.image, & img.icon { width: auto; max-height: unset; }

& .level-1 img.image, & .level-1 img.icon { height: var(--image-size-level-1); }

& .level-2 img.image, & .level-2 img.icon { height: var(--image-size-level-2); }

& .level-3 img.image, & .level-3 img.icon { height: var(--image-size-level-3); }

& .level-4 img.image, & .level-4 img.icon { height: var(--image-size-level-4); }

& .level-5 img.image, & .level-5 img.icon { height: var(--image-size-level-5); }

& .level-6 img.image, & .level-6 img.icon { height: var(--image-size-level-6); }

& .level-7 img.image, & .level-7 img.icon { height: var(--image-size-level-7); }

& .level-8 img.image, & .level-8 img.icon { height: var(--image-size-level-8); }

& .level-9 img.image, & .level-9 img.icon { height: var(--image-size-level-9); }

& .level-10 img.image, & .level-10 img.icon { height: var(--image-size-level-10); }

}

.line:has(.deco-\* img.icon):has(.deco-\* .char-index:not(.empty-char-index)) a:has(img) {

position:relative;

bottom: -4px;

}