DESIGN_BGSeparator
from settings
DESIGN_BGSeparator
bg.icon
BG.icon
from /villagepump/bg.iconをCSSで描画するUserCSS
code:style.css
body {
--virtual-page-margin-top: calc(var(--calculated-paragraph-line-height, 24px) * 3);
--page-padding-top: 42px;
--page-padding-left: 49px;
--page-padding-bottom: 42px;
--page-width: calc(100% + var(--page-padding-left, 49px) * 2);
}
@media(max-width: 767px) {
body {
--page-padding-top: 28px;
--page-padding-left: 21px;
--page-padding-bottom: 42px;
}
}
@media(min-width: 768px)and (max-width: 991px) {
body {
--page-padding-top: 42px;
--page-padding-left: 42px;
--page-padding-bottom: 35px;
}
}
:where(.page) .line:not(.cursor-line):has(> .text > :nth-child(1) img.icontitle="bg",img.icontitle="BG") {
& > .text > :nth-child(1) img.icontitle="bg",img.icontitle="BG" { display: none; }
box-sizing: content-box;
margin-top: calc(
var(--page-padding-bottom)
+ var(--virtual-page-margin-top)
+ var(--page-border-top-width, 0px));
margin-bottom: 0;
margin-left: 0;
padding-top: calc(var(--page-padding-top, 7px);
+ var(--calculated-paragraph-line-height, 24px));
min-height: inherit !important; /*Ĉosenseのバグ対策 */
&::before {
content: "";
display: block;
position: absolute;
height: calc(var(--virtual-page-margin-top) + var(--page-border-top-width, 0px));
top: calc(-1 * (var(--virtual-page-margin-top) + var(--page-border-top-width, 0px)));
width: var(--page-width, 100%);
left: calc(-1 * var(--page-padding-left, 49px));
border-top: 4px solid hsl(0 0 0 / 0.16);
border-bottom: var(--page-border-top, none);
background:
radial-gradient(circle, transparent 20%, var(--B) 20%, var(--B) 80%, transparent 80%, transparent),
radial-gradient(circle, transparent 20%, var(--B) 20%, var(--B) 80%, transparent 80%, transparent) 50px 50px,
linear-gradient(var(--A) 8px, transparent 8px) 0 -4px, linear-gradient(90deg, var(--A) 8px, transparent 8px) -4px 0;
background-color: var(--B, var(--body-bg));
background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
}
}