Skiplook收件箱组件

源页面

Sharia Vanilla

Agent FS

2024年12月27日

修订 7

#原创 #合著 #组件

评分

↑ 23

↓ 0

支持率

100%

总票数 23

Wilson 95% 下界

85.7%

在相同票数下更稳健的支持率估计

争议指数

0.000

评分趋势

按周聚合

加载图表中...

页面源码

页面版本:

[[module css]] div.mail-main a:link, div.mail-main a:visited { color: inherit; text-decoration: currentcolor solid underline; } div.mail-main a:hover, div.mail-main a:active { background-color: #FFF; color: #000; text-decoration: #111 solid underline; } div.mail-main { --icon-color: #5d9965; --icon-letter: "S"; --letter-color: black; display: flex; flex-direction: column; gap: 1em; background-color: rgb(255, 255, 255); color: black; border: #000 solid; border-width: 0.375rem 0.125rem; margin: 2rem auto; padding: 1em; max-width: calc(var(--main-content-width) * 0.925); } div.mail-header { display: flex; justify-content: space-between; gap: 1em; } div.mail-header div.mail-info { display: grid; grid-template-columns: 3rem 1fr; grid-template-rows: 100%; gap: 1ch; align-items: center; } div.mail-header div.logo { position: relative; background-color: var(--icon-color); background-image: var(--icon-image); background-position: center; background-repeat: no-repeat; background-size: 2.5rem; border-radius: 50%; width: 3rem; height: 3rem; } div.logo::after { content: var(--icon-letter); position: absolute; color: var(--letter-color); font-size: 140%; font-weight: bold; top: 50%; left: 50%; transform: translate(-50%, -50%); } div.mail-header div.mail-from-to { display: flex; flex-basis: auto; flex-direction: column; justify-content: end; height: 100%; } div.mail-header div.mail-from-to > span { line-height: 2; } #page-content div.mail-header div.mail-options { display: flex; flex-wrap: wrap; justify-content: end; align-items: center; max-width: 10.5rem; } div.mail-header div.mail-options div.icon { flex-grow: 1; position: relative; width: 2.625rem; height: 2.25rem; box-sizing: border-box; transition: background-color 200ms linear; } div.mail-header div.mail-options div[data-icon="1"] { --icon: url("https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/replyicon.svg"); } div.mail-header div.mail-options div[data-icon="2"] { --icon: url("https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/replyallicon.svg"); } div.mail-header div.mail-options div[data-icon="3"] { --icon: url("https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/retransicon.svg"); } div.mail-header div.mail-options div[data-icon="4"] { --icon: url("https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/moreicon.svg"); border-left: 0.05rem rgb(237, 237, 237) solid; } div.mail-header div.mail-options div.icon:hover { background-color: rgb(239, 236, 213, 0.5); } div.mail-header div.mail-options div.icon::before { content: ""; background-image: var(--icon); background-position: center; background-repeat: no-repeat; background-size: 1.325rem; position: absolute; display: block; width: 100%; height: 100%; inset: 0; } div.mail-header div.mail-options div.icon span { position: absolute; top: -3em; left: -50%; width: 200%; opacity: 0; pointer-events: none; background-color: rgb(255, 255, 255); box-shadow: 0 3px 3px 1px rgb(170, 170, 170, 50%); padding: 0.75ch 0; text-align: center; transition: opacity 100ms linear 100ms; } div.mail-header div.mail-options div.icon:hover :where(span, span:hover) { opacity: 1; pointer-events: auto; } div.mail-header div.mail-options div.date { font-size: 0.8em; } div.mail-content { margin-inline: 3.25rem; } div.mail-main:has(div.mail-file) div.mail-content { border-bottom: 0.1rem black solid; } div.mail-file { margin: 1rem 3.25rem 2rem 3.25rem; } div.mail-file > a, div.mail-file a.collapsible-block-link { margin-inline: 1ch; } div.mail-file > a::before, div.mail-file a.collapsible-block-link::before { content: ""; display: inline-block; background-image: var(--file-icon); background-position: center; background-repeat: no-repeat; background-size: contain; margin-right: 1em; width: 1em; height: 1em; transform: scale(2); } @media (max-width: 64rem) { div.mail-content, div.mail-file { margin: 0; } } @media (max-width: 35rem) { div.mail-header { flex-direction: column; } #page-content div.mail-header div.mail-options { max-width: none; } div.mail-header div.mail-options div[data-icon] { flex-grow: 0; } div.icon:not([data-icon="1"], [data-icon="4"]) { display: none; } div.mail-header div.date { order: -1; flex-grow: 1; } } [[/module]] @@ @@ [!-- {$header}] [[div class="mail-main"]] [[div class="mail-header" style="--icon-color:{$icon-color}; --icon-letter:"{$icon-letter}"; --icon-image:url("{$icon-image}"); --letter-color:{$letter-color};"]] [[div class="mail-info"]] [[div class="logo"]] [[/div]] [[div_ class="mail-from-to"]] [[span]]{$sender}<[# {$sender-mail}]>[[/span]][[span]]收件人：[# {$reciever-mail}][[/span]] [[/div]] [[/div]] [[div class="mail-options"]] [[div_ class="icon" data-icon="1"]] [[span]]答复[[/span]] [[/div]] [[div_ class="icon" data-icon="2"]] [[span]]全部答复[[/span]] [[/div]] [[div_ class="icon" data-icon="3"]] [[span]]转发[[/span]] [[/div]] [[div_ class="icon" data-icon="4"]] [[span]]更多操作[[/span]] [[/div]] [[div_ class="date"]] {$date} [[/div]] [[/div]] [[/div]] [[div class="mail-content"]] [!{$header} --] [!-- {$footer}] [[/div]] [[div_ class="mail-file" style="--file-icon: url("{$file-icon}");"]] [{$link} {$link-name}]@@ @@##aaaaaa|{$file-size}## [[/div]] [[/div]] [!{$footer} --] [!-- {$pure-footer}] [[/div]] [[/div]] [!{$pure-footer} --] [[iftags +组件]] [[module css]] @import url("https://scp-wiki-cn.wikidot.com/theme:parallel/code/1"); :root{ --basalt-bright-element-color: 93, 153, 101; --basalt-dark-element-color: 57, 117, 67; --basalt-darker-element-color: 0, 52, 16; } #page-content hr { background-color: rgb(var(--basalt-main-text-color)) !important; } h1, h2, h3, h4, h5, h6 { text-align: center; margin-top: 1em; margin-bottom: 1em; } li:not(:first-child) {margin-top: 0.75em;} ul, ol {padding-left: 10px;} /* icon list from acs component */ .icons { display: grid; -ms-grid-columns: calc((100% / 5) - 0.25rem) 0.25rem calc((100% / 5) - 0.25rem) 0.25rem calc((100% / 5) - 0.25rem) 0.25rem calc((100% / 5) - 0.25rem) 0.25rem calc((100% / 5) - 0.25rem); grid-template-columns: repeat(5, calc((100% / 5) - 0.25rem)); grid-gap: 0.25rem; } @media (max-width: 500px) { .icons { grid-template-columns: repeat(3, calc((100% / 3) - 0.25rem)); } } .icon_image { border: 0.25rem solid black; overflow: hidden; position: relative; aspect-ratio: 1 / 1; } .icon_image > img { position: absolute; max-width: 70%; max-height: 70%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .icon_name { display: flex; align-items: center; justify-content: center; text-align: center; text-transform: uppercase; margin-top: 0.5rem; margin-bottom: 0.5rem; font-weight: bold; } span.anno { color: #888888; user-select: none; } span.anno::before { content: "/* "; } span.anno::after { content: " */"; } #u-component-top-box { margin-top: 20px !important; } [[/module]] [[>]] [[module rate]] [[/>]] + 信息这是一个模仿基金会内部邮件系统的内容组件，设计风格受启发自微软的[https://outlook.live.com/mail/0/ Outlook邮箱]。该组件由[[[SCP-CN-3919]]]的第一迭代衍生而来，在原文中作为第二迭代的.docx文档的引入文段使用。 + 组件设置你可以使用如下代码以在文中引用此组件： [[div class="code blockquote"]] @@[[include :scp-wiki-cn:component:skiplook-mailbox@@ |header = @@--@@ |icon-color = #5d9965 [[span class="anno"]]**必填**，决定发件人图标的背景色。[[/span]] |icon-image = https://... [[span class="anno"]]填写图片链接，如果没有独特的发件人图标则可不填。若填写此项，则**letter-color**一项应填入**transparent**。[[/span]] |icon-letter = 53 [[span class="anno"]]没有独特发件人图标时显示的占位字符。可以填入多个字符，但考虑到美观问题，建议字符数不超过2。[[/span]] |letter-color = #000000 [[span class="anno"]]**必填**，决定占位字符的前景色。[[/span]] |sender = Site-CN-53 [[span class="anno"]]**必填**，发件人名称。[[/span]] |sender-mail = monotropauniflora@skipnet.org [[span class="anno"]]**必填**，发件人邮箱。[[/span]] |reciever-mail = purifiedsilica@skipnet.org [[span class="anno"]]**必填**，收件人邮箱。[[/span]] |date = 周四 2024/12/5 14:32 [[span class="anno"]]**必填**，发件日期。[[/span]] ]] **邮件正文内容** @@[[include :scp-wiki-cn:component:skiplook-mailbox@@ |footer = @@--@@ |link = https://... [[span class="anno"]]**必填**，点击附件链接时跳转到的页面。如果无需跳转则填入"#"。[[/span]] |link-name = SCP-CN-3919.ftml [[span class="anno"]]**必填**，附件文件名。[[/span]] |file-size = 3.21KB [[span class="anno"]]**必填**，附件大小。[[/span]] |file-icon = https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/ftml.svg [[span class="anno"]]**必填**，附件图标链接。有关图标的信息请参考后续章节。[[/span]] ]] [[/div]] 如果无需附件部分，则可将正文内容之后的部分更换为： [[div class="code blockquote"]] @@[[include :scp-wiki-cn:component:skiplook-mailbox@@ |pure-footer = @@--@@ ]] [[/div]] 该组件的视觉效果如下。请注意：本组件在Sigma-9等网站默认版式下同样拥有相似的视觉效果，但在基于[[[theme:parallel|平行]]]的版式下应用效果最佳。 ++ 有附件 [[div class="mail-main"]] [[div class="mail-header" style="--icon-color:#5d9965; --icon-letter:"53"; --icon-image:url(""); --letter-color:#000000;"]] [[div class="mail-info"]] [[div class="logo"]] [[/div]] [[div_ class="mail-from-to"]] [[span]]Site-CN-53<[# monotropauniflora@skipnet.org]>[[/span]][[span]]收件人：[# purifiedsilica@skipnet.org][[/span]] [[/div]] [[/div]] [[div class="mail-options"]] [[div_ class="icon" data-icon="1"]] [[span]]答复[[/span]] [[/div]] [[div_ class="icon" data-icon="2"]] [[span]]全部答复[[/span]] [[/div]] [[div_ class="icon" data-icon="3"]] [[span]]转发[[/span]] [[/div]] [[div_ class="icon" data-icon="4"]] [[span]]更多操作[[/span]] [[/div]] [[div_ class="date"]] 周四 2024/12/5 14:32 [[/div]] [[/div]] [[/div]] [[div class="mail-content"]] **这里是正文内容。** [[/div]] [[div_ class="mail-file" style="--file-icon: url("https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/ftml.svg");"]] [https://scp-wiki-cn.wikidot.com/scp-cn-3919 SCP-CN-3919.ftml]@@ @@##aaaaaa|3.21KB## [[/div]] [[/div]] ++ 无附件 [[div class="mail-main"]] [[div class="mail-header" style="--icon-color:#5d9965; --icon-letter:"53"; --icon-image:url("https://scpsandboxcn.wdfiles.com/local--files/sharia-vanilla-others/site-cn-53.png"); --letter-color:transparent;"]] [[div class="mail-info"]] [[div class="logo"]] [[/div]] [[div_ class="mail-from-to"]] [[span]]Site-CN-53<[# monotropauniflora@skipnet.org]>[[/span]][[span]]收件人：[# purifiedsilica@skipnet.org][[/span]] [[/div]] [[/div]] [[div class="mail-options"]] [[div_ class="icon" data-icon="1"]] [[span]]答复[[/span]] [[/div]] [[div_ class="icon" data-icon="2"]] [[span]]全部答复[[/span]] [[/div]] [[div_ class="icon" data-icon="3"]] [[span]]转发[[/span]] [[/div]] [[div_ class="icon" data-icon="4"]] [[span]]更多操作[[/span]] [[/div]] [[div_ class="date"]] 周四 2024/12/5 14:32 [[/div]] [[/div]] [[/div]] [[div class="mail-content"]] **这里是正文内容。** [[/div]] [[/div]] + 预设附件图标本组件为常用的数种文件格式预设了可用的附件图标。当然，如果你有需要的话，也可以在附件图标处传入自己的图片，或是将下面的这些图标用在其它文章中。下述图标引用链接均为： [[div class="blockquote code"]] @@https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/@@**图标下方英文文本**@@.svg@@ [[/div]] [[div_ class="blockquote icons" style="background-color: #ffffff;"]] [[div_ class="icon_container"]] [[div_ class="icon_image"]] [[image https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/doc.svg]] [[/div]] [[div_ class="icon_name"]] DOC [[/div]] [[/div]] [[div_ class="icon_container"]] [[div_ class="icon_image"]] [[image https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/xls.svg]] [[/div]] [[div_ class="icon_name"]] XLS [[/div]] [[/div]] [[div_ class="icon_container"]] [[div_ class="icon_image"]] [[image https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/ppt.svg]] [[/div]] [[div_ class="icon_name"]] PPT [[/div]] [[/div]] [[div_ class="icon_container"]] [[div_ class="icon_image"]] [[image https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/pdf.svg]] [[/div]] [[div_ class="icon_name"]] PDF [[/div]] [[/div]] [[div_ class="icon_container"]] [[div_ class="icon_image"]] [[image https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/png.svg]] [[/div]] [[div_ class="icon_name"]] PNG [[/div]] [[/div]] [[div_ class="icon_container"]] [[div_ class="icon_image"]] [[image https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/exe.svg]] [[/div]] [[div_ class="icon_name"]] EXE [[/div]] [[/div]] [[div_ class="icon_container"]] [[div_ class="icon_image"]] [[image https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/rar.svg]] [[/div]] [[div_ class="icon_name"]] RAR [[/div]] [[/div]] [[div_ class="icon_container"]] [[div_ class="icon_image"]] [[image https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/mp4.svg]] [[/div]] [[div_ class="icon_name"]] MP4 [[/div]] [[/div]] [[div_ class="icon_container"]] [[div_ class="icon_image"]] [[image https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/ftml.svg]] [[/div]] [[div_ class="icon_name"]] FTML[[footnote]] Foundation Text Markup Language（基金会文本标记语言）的简写。 [[/footnote]] [[/div]] [[/div]] [[div_ class="icon_container"]] [[div_ class="icon_image"]] [[image https://scpsandboxcn.wdfiles.com/local--files/collab:castle-tracer/default.svg]] [[/div]] [[div_ class="icon_name"]] 默认(default) [[/div]] [[/div]] [[/div]] @@ @@ [[=]] [[collapsible show="[+] 图像版权信息" hide="[-] 隐藏"]] [[div class="blockquote"]] **文件名：**全部svg素材 **图像作者：**[[*user Sharia Vanilla]] **授权协议：**CC BY-SA 3.0 [[/div]] [[/collapsible]] [[/=]] [[/iftags]]

Skiplook收件箱组件

评分趋势

最近修订

最近投票

相关页面

页面源码