标记警告板 组件
Rating: +31

这是什么？

此组件用于创建一个djkaktus风格的警告板。

此组件与SCP-1730警告板的对比：

（1730）

SCP基金会监督者议会授权分类

本文件以及所有相关文件均属于SCP基金会所有，并服从于其分类要求与限制。该文档可能包含或不包含致命的模因防御措施。试图在未经获取适当及充分的授权的情况下访问或传播此文档将被判处死刑。

AUTH858102dd28/TOKN1d1473de63

识别码: 858102dd28
授权码: 1d1473de63

（此组件）

如何使用？

请使用[[include]]语法引用此组件。基础代码如下：

模块头部→
识别码→
授权码→
繁体→
模块尾部→

[[include :scp-wiki-cn:component:highlight-warning-panel
|auth=##########
|tokn=##########
|tr=
]]

识别码与授权码均建议填写10位字母/数字，不支持汉字；设置|tr=*即为启用繁体，若使用简体文本则无需填写。

可选功能

此组件可以直接通过[[include]]使用更多选项。

模块头部→
识别码→
授权码→
繁体→
模块ID→
更多选项→
模块尾部→

[[include :scp-wiki-cn:component:highlight-warning-panel
|auth=##########
|tokn=##########
|tr=
|id=
…
]]

若需使用可选功能，请复制上方形式的模块，并用可选功能对应的代码替换掉省略号。多个可选功能可以并存。若需要在页面上多次使用不同样式的此组件，请为每个模块赋予唯一的模块ID。

选项1 黑色标记笔适配：此模块可以在黑色标记笔版式下正常显示，黑色标记笔适配功能将使它更接近黑色标记笔的版式风格。

  • Logo尺寸放大、字号略微增大，文本变为四行。

黑标适配→

|bhl=*

选项2 自定义标题：此组件可以自定义标题，即替换掉“SCP基金会监督者议会授权分类”。然而，请确认你的标题字数能在一行内显示。

标题替换→
替换后标题→

|title-change=*
|content1=这是你修改之后的标题

选项3 自定义内容：此组件可以自定义文字内容。然而，请确保在标准样式下文字约占三行空间、黑标适配样式下文字约占四行空间。

内容替换→
替换后内容→

|content-change=*
|content2=这是你修改之后的内容

选项4 自定义图标：此组件可以自定义左侧的图标。

图标替换→
图标链接→

|logo-change=*
|logo-url=图标链接

选项5 反色：如果你手头有一张白色基金会图标却找不到黑色的版本，或是你打算直接在黑色背景上使用此模块，此组件提供了两个反色设置。

  • 图标反色：对左侧图标进行色调反转。

图标反色→

|logo-invert=*

  • 边框反色：将警告板上的黑色横线进行色调反转（变为白色）。

边框反色→

|border-invert=*

组件代码

+ 查看组件代码- 关闭组件代码
css
[[module CSS]]
/* Author: Dr Hormress */

@import url('https://fonts.font.im/css?family=Libre+Barcode+128+Text|Space+Mono');

@media (min-width: 1040px) {
    :root {
        --main-size: calc(1040px * 5 / 24 - 5em);
        --border-width: calc(1040px /180 - 5em / 180);
    }
}

@media (min-width: 768px) and (max-width: 1040px) {
    :root {
        --main-size: calc(100vw * 5 / 24 - 5em);
        --border-width: calc(100vw /180 - 5em / 180);
    }
}

@media (max-width: 768px) {
    :root {
        --main-size: calc(100vw * 5 / 24);
        --border-width: calc(100vw /180);
    }
}

.panel-container-container {
    position: relative;
    height: var(--main-size);
}

.panel-container-container > .panel-container {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: calc(var(--main-size) * 4.4) !important;
    height: var(--main-size);
    margin-top: calc(var(--main-size) * -1 / 2);
    margin-left: calc(var(--main-size) * -2.2);
}

.panel-container {
    display: flex;
}

.panel-container .logo-container {
    display: block;
    width: var(--main-size);
    height: var(--main-size);
    flex-shrink: 0;
    background-image: url(http://scp-wiki.wdfiles.com/local--files/theme%3Aminimal/minimal.svg);
    background-repeat: no-repeat;
    background-size: var(--main-size) auto;
    background-position: center;
}

.panel-container .content-container {
    flex-grow: 1;
}

.panel-container .content-container p {
    margin: 0;
}

.panel-container .content-container .title {
    /* height: calc(var(--main-size) / 3); */
    border-bottom: solid #000 var(--border-width);
    font-size: calc(var(--main-size) / 75 * 16);
    font-weight: bold;
    text-align: justify;
    text-align: -webkit-justify;
    text-align: -moz-justify;
    word-break: break-all;
    text-justify: distribute;
}

.panel-container .content-container .title p::after {
    content: "";
    display: inline-block;
    width: 100%;
}

.panel-container .content-container .panel-container {
    justify-content: flex-end;
}

.panel-container .content-container .top-content {
    height: calc(var(--main-size) / 2.5);
    font-size: calc(var(--main-size) / 10);
    text-align: justify;
    text-align: -webkit-justify;
    text-align: -moz-justify;
    word-break: break-all;
    text-justify: distribute;
    font-weight: bold;
    padding-top: calc(var(--main-size) / 75);
    background-color: rgba(128, 128, 128, .1);
}

.panel-container .content-container .top-content p {
    line-height: 1.2;
}

.panel-container .content-container .top-content p::after {
    content: "";
    display: inline-block;
    width: 100%;
}

.panel-container .panel-container p {
    line-height: 1;
}

.panel-container .content-container .barcode {
    flex-grow: 1;
    font-family: "Libre Barcode 128 Text";
    text-align: justify;
    text-align: -webkit-justify;
    text-align: -moz-justify;
    word-break: break-all;
    text-justify: distribute;
    height: calc(var(--main-size) / 5);
    font-size: calc(var(--main-size) / 5);
}

.panel-container .content-container .barcode p {
    line-height: 1.2;
}

.panel-container .content-container .barcode p::after {
    content: "";
    display: inline-block;
    width: 100%;
}

.panel-container .content-container .passcode {
    font-family: "Space Mono";
    height: calc(var(--main-size) / 5);
    font-size: calc(var(--main-size) / 10);
}

.panel-container .content-container .ct-2 {
    display: none;
}

.panel-container .content-container .tr {
    display: none;
}

/* {$bhl}/

.panel-container-container > .panel-container {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: calc(var(--main-size) * 4.4) !important;
    height: var(--main-size);
    margin-top: calc(var(--main-size) * -1 / 2);
    margin-left: calc(var(--main-size) * -2.5);
}

.panel-container .content-container .top-content {
    height: calc(var(--main-size) / 1.8);
    font-size: calc(var(--main-size) / 8);
    text-align: justify;
    text-align: -webkit-justify;
    text-align: -moz-justify;
    word-break: break-all;
    text-justify: distribute;
    font-weight: bold;
    padding-top: calc(var(--main-size) / 75);
    background-color: rgba(128, 128, 128, .1);
}

.panel-container .logo-container {
    display: block;
    width: calc(var(--main-size) / 0.9);
    height: calc(var(--main-size) / 0.9);
    background-size: calc(var(--main-size) / 0.9) auto;
}
/{$bhl} */

/* {$title-change}/

.panel-container-container.{$id} .panel-container .content-container .title .ct-1 {
    display: none;
}

.panel-container-container.{$id} .panel-container .content-container .title .ct-2 {
    display: inline;
}

/{$title-change} */

/* {$content-change}/

.panel-container-container.{$id} .panel-container .content-container .top-content .ct-1 {
    display: none;
}

.panel-container-container.{$id} .panel-container .content-container .top-content .ct-2 {
    display: inline;
}

/{$content-change} */

/* {$logo-change}/

.panel-container-container.{$id} .panel-container .logo-container {
    background-image: url("{$logo-url}");
}

/{$logo-change} */

/* {$logo-invert}/

.panel-container-container.{$id} .panel-container .logo-container {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

/{$logo-invert} */

/* {$border-invert}/

.panel-container-container.{$id} .panel-container .content-container .title {
    border-color: #FFF;
}

/{$border-invert} */

/* {$tr}/

.panel-container-container.{$id} .panel-container .content-container .cn {
    display: none;
}

.panel-container-container.{$id} .panel-container .content-container .tr {
    display: inline;
}

/{$tr} */
[[/module]]

[[div class="panel-container-container {$id}"]]
[[div class="panel-container"]]
[[div class="logo-container"]]
[[/div]]
[[div class="content-container"]]
[[div class="title"]]
[[span class="ct-1"]][[span class="cn"]]SCP基金会监督者议会授权分类[[/span]][[span class="tr"]]SCP基金會监督者議會授权分類[[/span]][[/span]][[span class="ct-2"]]{$content1}[[/span]]
[[/div]]
[[div class="top-content"]]
[[span class="ct-1"]][[span class="cn"]]本文件以及所有相关文件均属于SCP基金会所有，并服从于其分类要求与限制。该文档可能包含或不包含致命的模因防御措施。试图在未经获取适当及充分的授权的情况下访问或传播此文档将被判处死刑。[[/span]][[span class="tr"]]本文件以及所有相關文件均屬於SCP基金會所有，並服從于其分類要求與限制。該文檔可能包含或不包含致命的模因防禦措施。試圖在未經獲取適當及充分的授權的情況下訪問或傳播此文檔將被判處死刑。[[/span]][[/span]][[span class="ct-2"]]{$content2}[[/span]]
[[/div]]
[[div class="panel-container"]]
[[div class="barcode"]]
AUTH{$auth}/TOKN{$tokn}
[[/div]]
[[div class="passcode"]]
[[span class="cn"]]识别码[[/span]][[span class="tr"]]識別碼[[/span]]: ##4AB894|{$auth}##
[[span class="cn"]]授权码[[/span]][[span class="tr"]]授權碼[[/span]]: ##4AB894|{$tokn}##
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
原创样版
页面版本：⁨0⁩, 最后编辑于: ⁨2021/2/21 09:49:54⁩ (⁨⁨2033⁩ 日前⁩), 现时评分: 31
历史 附件 + 选项