Estrella的纸张背景合集

注意

此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。

未经组件作者或工作人员允许，请勿修改此页的内容。

这是一个由 EstrellaYoshte制作的组件，添加了一堆用于各种用途的纸张风格div块。
输入以下文本来使用此组件：

[[include :scp-wiki-cn:component:assorted-paper]]

使用的图像已被EstrellaYoshte编辑过：

复古
- Cents - Savannah, Mechanics' Savings & Loan Assoc. Georgia, USA - 公有领域
- Old paper1 - 作者 Digital Yard Sale，公有领域
风化
- What did she know about railways - 作者 NYPL，公有领域
书页
- Lord Brougham and his Family, Cannes - Charles Nègre，Metropolitan Museum of Art，CC0
和纸
- Shiroishi washi letter paper - 作者 Mizu basyo，CC BY-SA 3.0
便签 - EstrellaYoshte，CC BY-SA 3.0

[[div class="estrella-paper vintage"]]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

[[div class="estrella-paper weathered"]]

[[div class="estrella-paper verso"]]

[[div class="estrella-paper washi"]]

[[div class="estrella-paper snote"]]

[[div class="estrella-paper snote" style="--hue: 0;"]]

[[div class="estrella-paper snote" style="--hue: 211.5;"]]

[[div class="estrella-note nlined"]]

....................................................................................................

[[div class="estrella-note courtrep"]]

这个块有特殊格式，可从下方的代码框中复制。

Etiam mauris sem, cursus a maximus at, consectetur eget risus. Aenean eleifend elit non nisl dignissim, ut maximus neque eleifend. In eleifend dui mauris, at tempus arcu laoreet dignissim. Duis at vulputate dolor. Aliquam tristique lectus a risus fermentum interdum. Nulla cursus placerat est, ac congue magna vehicula ac. Vivamus ipsum ex, commodo a facilisis eget, semper in sem.

最高支持99¹行。

[[div class="estrella-note courtrep"]]
[[div_ class="linenum"]]
{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}
[[/div]]
[[div class="courtrep-content"]]
此处为文本。
[[/div]]
[[/div]]

:where(.estrella-paper,.estrella-note) {
    --_p-unit: min(calc(.75vw + .475rem), .95rem);
    --p-inline: 1.5;
    --p-block: 1;
    --w: 54;
    --shadow-depth: 1;
    --shadow-spread: 1;
}
.estrella-paper {
    position: relative;
    isolation: isolate;
 
    width: min(100%,calc((var(--_p-unit) + .05rem)* var(--w)));
    box-sizing: border-box;
    padding: calc(var(--_p-unit)*var(--p-block)) calc(var(--_p-unit)*var(--p-inline));
    margin-block: 1.5rem;
    margin-inline: auto;
}
.estrella-paper::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
 
    border-image: var(--paper-img) 100 fill;
    border-image-width: 100px;
    border-image-repeat: round;
    filter: drop-shadow(0 0 calc(.125rem*var(--shadow-spread)) rgb(0 0 0 / calc(.25*var(--shadow-depth))))
}
 
.washi {
    --paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/washi.png);
    --p-inline: 2.25;
    --p-block: 2.5;
    --w: 36;
}
 
.verso {
    --paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/verso.png);
    --p-inline: 1.625;
    --p-block: .475;
    --w: 42;
}
 
.vintage {
    --paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/vintage.png);
    --p-inline: 1.875;
    --p-block: 1.25;
}
 
.weathered {
    --paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/weathered.png);
    --p-inline: 2;
    --shadow-depth: 0.25;
}
 
.snote {
    --paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/snote.png);
    --p-inline: 3;
    --p-block: 2;
    --w: 28;
    --shadow-depth: .5;
    --shadow-spread: .75;
    --hue: 61;
    --_base-img-hue-offset: -61deg;
    font-size: 0.925em;
}
.estrella-paper.snote::before {
    filter: hue-rotate(calc(var(--_base-img-hue-offset) + 1deg*var(--hue))) drop-shadow(0 0 calc(.125rem*var(--shadow-spread)) rgb(0 0 0 / calc(.25*var(--shadow-depth))));
}
 
/*-------------------------------*/
 
.estrella-note {
    width: min(100%,calc((var(--_p-unit) + .05rem)* var(--w)));
    box-sizing: border-box;
    padding: calc(var(--_p-unit)*var(--p-block)) calc(var(--_p-unit)*var(--p-inline));
    margin-block: 1.5rem;
    margin-inline: auto;
}
 
.nlined {
    --p-block: 1.75;
 
    --page-indent: calc(var(--_p-unit)* var(--p-inline)* 3.25);
    --writing-margin: calc(var(--_p-unit)* 1.5);
    --line-x: #a5d0f2;
    --line-y: #c1666e;
    --line-width: .075rem;
    --row-height: 2.125em;
 
    line-height: var(--row-height);
    padding-left: var(--page-indent);
    background-color: #f9f9f9;
    background-image: linear-gradient(to right,
        transparent calc(var(--page-indent) - var(--writing-margin)),
        var(--line-y) calc(var(--page-indent) - var(--writing-margin)),
        var(--line-y) calc(var(--page-indent) - var(--writing-margin) + var(--line-width)),
        transparent calc(var(--page-indent) - var(--writing-margin) + var(--line-width))
        ),
        linear-gradient(
        var(--line-x) var(--line-width),
        transparent var(--line-width)
        );
    background-size: auto, 100% var(--row-height);
    background-position: 0 calc(var(--_p-unit)* var(--p-block) + calc(var(--row-height)*.875));
}
 
.nlined * { line-height: inherit; }
.nlined p { margin-block: 1lh; }
.nlined > p:first-child { margin-block-start: 0; }
.nlined > p:last-child { margin-block-end: 0; }
 
/*--------------------*/
 
.courtrep {
    --p-inline: 1;
    --p-block: 1.25;
    --row-height: 1.675em;
    --line-color: #d2d2d2;
    --num-color: var(--line-color);
    --num-pad: .25rem;
    --content-pad: 1rem;
    --hr-thick: .05rem;
 
    line-height: var(--row-height);
    position: relative;
    background-color: #fafafa;
    padding-inline-start: calc(var(--_p-unit)*var(--p-inline) + 2.5ch + var(--num-pad));
    border: solid var(--line-color) 0.05rem;
}
 
.linenum {
    position: absolute;
    inset-inline-start: calc(var(--_p-unit)*var(--p-inline));
    inset-block-start: calc(var(--_p-unit)*var(--p-block));
    height: calc(100% - var(--_p-unit)*var(--p-block)*2);
    overflow: hidden;
 
    counter-reset: hund 0;
    font-size: .825em;
    -webkit-user-select: none;
    user-select: none;
}
.linenum > tt {
    display: flex;
    color: transparent;
    font-size: 1em;
    font-weight: bold;
}
.linenum > tt:first-child {
    margin-block-start: calc(-1lh + .5ex);
}
 
/* .linenum > tt::after {
    content: "0123456789";
    color: var(--num-color);
    display: block;
    width: 1ch;
} */
.linenum > tt::before {
    content: counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero);
    color: var(--num-color);
    display: block;
    width: 2ch;
    margin-inline-end: -1ch;
}
.linenum > tt:nth-child(n+2)::before {
    counter-increment: hund;
}
 
.courtrep-content {
    border-inline-start: double var(--line-color) .25rem;
    padding-inline-start: var(--content-pad);
}
.courtrep-content p {
    margin-block: 1lh;
    line-height: inherit;
}
.courtrep-content > p:first-child { margin-block-start: 0; }
.courtrep-content > p:last-child { margin-block-end: 0; }
 
.courtrep-content > hr {
    height: var(--hr-thick);
    margin: 0;
    margin-block: calc(1.5lh - var(--hr-thick)/2);
}

组件

页面版本: 1, 最后编辑于: 27 Nov 2024 17:51

编辑评分 (+2) 标签讨论 (1) 历史记录附件打印网站工具 + 选项

SCP基金会

控制，收容，保护