UserCSS-descriptionにinline-iconが含まれる時、最初のアイコンを拡大してサムネ代わりにする
#css #UserCSS
code:style.css
.grid li.page-list-item:not(.pin):has(.inline-icon) {
& a .content {
flex-direction: unset;
}
& .description:has(.inline-icon) {
padding: 0;
border: 3px solid var(--picture-border-color);
&:hover * { cursor: pointer; }
& p.line:not(:has(.inline-icon)), & br { display: none; } /* inline-icon がない行を非表示 */
& p.line:has(.inline-icon) {
display: contents;
& span:not(:first-child) { display: none; }
& .inline-icon {
object-fit: cover;
width: stretch;
height: stretch;
position: absolute;
top: 0;
left: 0;
transform: scale(1.5) translateX(10%) translateY(15%);
}
/* サムネにフィルタをかける */
&::after {
content: '';
background: linear-gradient(90deg, rgba(35, 41, 51, 1), rgba(35, 41, 51, .3));
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
mix-blend-mode: exclusion;
}
}
}
}
/* 各ページタイトルの次の行が.iconのみだったとき、width/heightを解除する */
.lines .line:nth-child(2) img.icon {
width: auto;
height: auto;
border-radius: 0;
position: unset;
margin: 3px 0;
max-width: 100%;
max-height: 300px;
display: inline-block;
vertical-align: bottom;
}