科幻小说版式

源页面

hoah2333

2023年6月22日

修订 3

#原创 #版式

评分

↑ 26

↓ 0

支持率

100%

总票数 26

Wilson 95% 下界

87.1%

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

争议指数

0.000

评分趋势

按周聚合

加载图表中...

页面源码

页面版本:

[!-- {$inc-css} [[module css]] @import url('https://scp-wiki-cn.wdfiles.com/local--code/theme%3Asci-fi/1'); [[/module]] [[include :scp-wiki-cn:component:interwiki-style |priority=1 |type=sidebar |css=%40import%20url(%27https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DJost%3Awght%40400%3B700%26display%3Dswap%27)%3B%40import%20url(%27https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DNoto%2BSans%2BSC%26display%3Dswap%27)%3B%3Aroot%7B--UI-font%3A%27Jost%27%2C%27Noto%20Sans%20SC%27%2Csans-serif%3B--bg-color-2%3A%23022F41%3B--text-color%3A%23e6e6e6%3B--link-color-2%3A%2332D9CB%3B--border-color%3A%2300b4eb%3B--sidebar-bg-color%3Avar(--bg-color-2)%3B--transition%3A0.25s%20cubic-bezier(0.4%2C0%2C0.2%2C1)%3B%7D.side-block%7Bborder-radius%3A0%3Bbackground%3Avar(--sidebar-bg-color)%3Bborder%3A1px%20solid%20var(--border-color)%3Bbox-shadow%3Anone%3Bfont-family%3Avar(--UI-font)%3B%7D.side-block%20div.menu-item%20a%7Bcolor%3Avar(--text-color)%3Btransition%3Acolor%20var(--transition)%3B%7D.side-block%20div.menu-item%20a%3Ahover%7Bcolor%3Avar(--link-color-2)%3Btext-decoration%3Anone%3B%7D.side-block%20.menu-item%3Eimg%7Bopacity%3A0%3B%7D.side-block%20.heading%7Bcolor%3Avar(--link-color-2)%3Bborder-bottom%3Asolid%201px%20var(--border-color)%3B%7D ]] [!-- --] [!-- {$inc-achi} [[div_ class="achi-container"]] [[div_ class="achi-border"]] [[div_ class="achi-text"]] {$text} [[/div]] [[/div]] [[div_ class="achi-icon" style="--mask-icon: {$icon}]] [[/div]] [[/div]] [!-- --] [[iftags +版式]] [[module css]] @import url('https://scp-wiki-cn.wdfiles.com/local--code/theme%3Asci-fi/1'); [[/module]] [[include :scp-wiki-cn:component:interwiki-style |priority=1 |type=sidebar |css=%40import%20url(%27https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DJost%3Awght%40400%3B700%26display%3Dswap%27)%3B%40import%20url(%27https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DNoto%2BSans%2BSC%26display%3Dswap%27)%3B%3Aroot%7B--UI-font%3A%27Jost%27%2C%27Noto%20Sans%20SC%27%2Csans-serif%3B--bg-color-2%3A%23022F41%3B--text-color%3A%23e6e6e6%3B--link-color-2%3A%2332D9CB%3B--border-color%3A%2300b4eb%3B--sidebar-bg-color%3Avar(--bg-color-2)%3B--transition%3A0.25s%20cubic-bezier(0.4%2C0%2C0.2%2C1)%3B%7D.side-block%7Bborder-radius%3A0%3Bbackground%3Avar(--sidebar-bg-color)%3Bborder%3A1px%20solid%20var(--border-color)%3Bbox-shadow%3Anone%3Bfont-family%3Avar(--UI-font)%3B%7D.side-block%20div.menu-item%20a%7Bcolor%3Avar(--text-color)%3Btransition%3Acolor%20var(--transition)%3B%7D.side-block%20div.menu-item%20a%3Ahover%7Bcolor%3Avar(--link-color-2)%3Btext-decoration%3Anone%3B%7D.side-block%20.menu-item%3Eimg%7Bopacity%3A0%3B%7D.side-block%20.heading%7Bcolor%3Avar(--link-color-2)%3Bborder-bottom%3Asolid%201px%20var(--border-color)%3B%7D ]] [[>]] **评分：** [[module Rate]] [[/>]] [[>]] **评分模块与著作信息模块：** [[/>]] [[include :scp-wiki-cn:credit:start]] 页面信息 [[include :scp-wiki-cn:credit:more]] 更多页面信息 [[include :scp-wiki-cn:credit:end]] [[>]] **著作信息模块：** [[/>]] [[include :scp-wiki-cn:credit:start-standalone]] 页面信息 [[include :scp-wiki-cn:credit:more-standalone]] 更多页面信息 [[include :scp-wiki-cn:credit:end-standalone]] 这是由 [[*user hoah2333]] 制作的美学版式，不与任何 SCP、故事、GoI 格式、设定所挂钩。在设计上参考了[[[theme:ar|安德森机器人版式]]]与[[[theme:bedrock|基岩版式]]]。若需使用本版式，请在所需使用的文章开头加上以下代码： [[div class="code"]] @@[[include :scp-wiki-cn:theme:sci-fi inc-css=--]]]@@ [[/div]] 你可以在 [[include]] 之后使用如下 CSS 模块来修改标题、副标题和标志。 [[div class="blockquote code"]] :root { @@ --title: "页眉大标题";@@ @@ --subtitle: "页眉副标题";@@ @@ --icon: url("自定义标志链接");@@ } [[/div]] ---- + 示例 [[include component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme%3Apenumbra/tb.png|caption=图像。|width=200px]] 可通过五个连字符“@@-----@@”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。一个普通的__下划__**加粗**//斜体//--删除--{{等宽}}__**//--{{字}}--//**__ 另一个普通的 __下划__ **加粗** //斜体// --删除-- {{等宽}} __**//--{{字}}--//**__ | [https://www.baidu.com/ 这是一个链接！] | [[[4o4-n0t-f0und|一个空链接！]]] | [[a href="http://scp-wiki-cn.wikidot.com/"]]一个普通的__下划__**加粗**//斜体//--删除--{{等宽}}__**//--{{链接}}--//**__[[/a]] | [[a href="http://scp-wiki-cn.wikidot.com/"]]另一个普通的 __下划__ **加粗** //斜体// --删除-- {{等宽}} __**//--{{链接}}--//**__[[/a]] @@ @@ @@ @@ @@ @@ @@ @@ [[collapsible show="+ 折叠 - 点击这里" hide="- 折叠 - 点击这里"]] + 1 级标题 ++ 2 级标题 +++ 3 级标题 ++++ 4 级标题 +++++ 5 级标题 ++++++ 6 级标题 [[/collapsible]] @@ @@ ~~~~ [[tabview]] [[tab 分页]] 此为分页（tab view）。 [[/tab]] [[tab 分页]] 看，这有更多文字。多么精巧绝伦。 [[/tab]] [[tab 长 Tab]] 这是一个长的 tab，它有很多文字。[[footnote]]这是一个脚注。[[/footnote]] 这是一个长的 tab，它有很多文字。这是一个长的 tab，它有很多文字。这是一个长的 tab，它有很多文字。这是一个长的 tab，它有很多文字。这是一个长的 tab，它有很多文字。这是一个长的 tab，它有很多文字。这是一个长的 tab，它有很多文字。 [[/tab]] [[tab 更长的 Tab]] 这也是一个长的 tab，它有很多文字。这也是一个长的 tab，它有很多文字。这也是一个长的 tab，它有很多文字。这也是一个长的 tab，它有很多文字。这也是一个长的 tab，它有很多文字。这也是一个长的 tab，它有很多文字。这也是一个长的 tab，它有很多文字。这也是一个长的 tab，它有很多文字。这也是一个长的 tab，它有很多文字。这也是一个长的 tab，它有很多文字。这也是一个长的 tab，它有很多文字。这也是一个长的 tab，它有很多文字。这也是一个长的 tab，它有很多文字。这也是一个长的 tab，它有很多文字。 [[/tab]] [[tab 空 Tab]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[tab 这里的空 tab 有着一个特别特别长的名字，我想知道为什么会有这么长？]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[/tabview]] @@ @@ > 这是一个引用块，在一行字的起始处加上“> ”来创建。 > > 更多文字 > ----- > 一条分割线 > >> 嵌套引用块 >> ----- >> 嵌套引用块里的分割线 >> >>> 嵌套嵌套引用块 >>> ----- >>> 嵌套嵌套引用块里的分割线 >>> >>>> 够了，禁止套娃 @@ @@ ||~ 这是 ||~ 表格 || || 你应该老早 || 就知道怎么 || |||| 做这个了吧 || || 1 || 2 || || 3 || 4 || || 谁是这里 || 最厉害的？ || || #十六进制 || #至高无上 || ---- 本版式修改了 [[[scp-anthology-hub|SCP 文选]]]中使用的文选框配色，以为[[[sci-fi-hub|科幻月]]]活动所使用。 [!-- [[div_ class="achi-container"]] [[div_ class="achi-border"]] [[div_ class="achi-text"]] 文字文字文字文字文字文字文字文字文字文字文字文字文字 [[/div]] [[/div]] [[div_ class="achi-icon" style="--mask-icon: {$icon}]] [[/div]] [[/div]] 本版式另附带有一个如上方般的成就模块。使用方法如下所示： [[div class="blockquote code"]] @@[[include :scp-wiki-cn:theme:sci-fi inc-achi=--]@@ |icon=url("URI 链接"); |text=要写的文本 @@]]@@ [[/div]] 需注意，由于同源政策的限制，//URI 链接//处的文本需将原 SVG 或 PNG 文件转换为 base64 后再填入，直接填入链接会被同源政策屏蔽导致无法显示。你可以使用该网站进行转换：https://codebeautify.org/svg-to-base64-converter --] ---- + 代码此处的 CSS 代码经过转换编译，原代码部分使用 SCSS 编写。若需查看源代码，请前往我的 [https://github.com/hoah2333/Archived-works/blob/main/SCP/theme-sci-fi/main.scss Github 仓库]。 [[collapsible show="展开代码" hide="收起代码"]] [[code type="css"]] @charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"); @import url("https://rsms.me/inter/inter.css"); @import url("https://fonts.googleapis.com/css2?family=Teko:wght@400;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"); @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"); :root { --icon: url("https://cdn.jsdelivr.net/gh/Nu-SCPTheme/Black-Highlighter@gh-pages/img/logo.svg"); --title: "SCP基金会"; --subtitle: "控制 · 收容 · 保护"; --header-font: "Lexend", "Noto Sans SC", Arial, sans-serif; --UI-font: "Jost", "Noto Sans SC", sans-serif; --body-font: "Inter", "Noto Sans SC", sans-serif; --mono-font: "JetBrains Mono", "Noto Serif SC", monospace; --bg-color: #051122; --bg-color-2: #022F41; --bg-color-2-trans: #022f41EE; --bg-color-2-trans-2: #022f4199; --bg-color-3: #0F5B79; --bg-color-3-trans: #0F5B79EE; --bg-color-3-trans-2: #0F5B7999; --white-color: #EEEEEE; --white-color-trans: #EEEEEE11; --white-color-trans-2: #EEEEEE99; --black-color: #111111; --black-color-trans: #11111111; --black-color-trans-2: #11111199; --green-color: #18a314; --red-color: #e13030; --text-color: #e6e6e6; --link-color: #0a82a8; --link-color-2: #32D9CB; --link-color-3: #84b1bf; --link-newpage-color: var(--link-color-2); --accent-color: #66c0f4; --accent-color-2: #5aa9d6; --border-color: #00b4eb; --header-bg-color: var(--bg-color-2); --topbar-bg-color: var(--bg-color-3); --topbar-bg-color-trans: var(--bg-color-2-trans); --sidebar-bg-color: var(--bg-color-2); --search-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E"); --vote-cancel-icon: url("data:image/svg+xml;charset=utf8,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 779.53 779.53'%3E%3Ctitle%3Ecancel-vote%3C/title%3E%3Cpolygon points='779.53 665.37 503.93 389.77 779.53 114.17 665.37 0 389.77 275.6 114.17 0 0 114.17 275.6 389.77 0 665.37 114.17 779.53 389.77 503.93 665.37 779.53 779.53 665.37'/%3E%3C/svg%3E"); --vote-plus-icon: url("data:image/svg+xml;charset=utf8,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 872.37 872.37'%3E%3Ctitle%3Eplus%3C/title%3E%3Cpolygon points='872.37 341.18 531.2 341.18 531.2 0 341.18 0 341.18 341.18 0 341.18 0 531.2 341.18 531.2 341.18 872.37 531.2 872.37 531.2 531.2 872.37 531.2 872.37 341.18'/%3E%3C/svg%3E"); --vote-minus-icon: url("data:image/svg+xml;charset=utf8,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 872.37 190.02'%3E%3Ctitle%3Eminus%3C/title%3E%3Crect x='444.99' y='103.81' width='190.02' height='872.37' transform='translate(-103.81 635.01) rotate(-90)'/%3E%3C/svg%3E"); --vote-info-icon: url("data:image/svg+xml;charset=utf8,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 432.1 810.25'%3E%3Ctitle%3Einfo-vote%3C/title%3E%3Cpath d='M324,917.73v-139H491.5V493.71H346V355.77H615v423H756.05v139ZM544.41,266.88q-36.17,0-57.76-21.46T465,187.18q0-36.78,21.61-58.24t57.76-21.46q36.15,0,57.76,21.46t21.6,58.24q0,36.78-21.6,58.24T544.41,266.88Z' transform='translate(-323.95 -107.48)'/%3E%3C/svg%3E"); --close-icon: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtMjI4LjAxIDE2OC44MS01OS4xOTkgNTkuMTk5IDE0OCAxNDcuOTktMTQ4IDE0OCA1OS4xOTkgNTkuMTk1IDE0Ny45OS0xNDcuOTkgMTQ4IDE0Ny45OSA1OS4xOTUtNTkuMTk1LTE0Ny45OS0xNDggMTQ3Ljk5LTE0Ny45OS01OS4xOTUtNTkuMTk5LTE0OCAxNDh6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+Cg=="); --header-height: 100px; --topbar-height: 21px; --account-height: 27px; --main-content-width: 948px; --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); } body { color: var(--text-color); } a { color: var(--link-color); transition: color var(--transition); } a:visited { color: var(--link-color-3); } a.newpage { color: var(--link-newpage-color); } a:hover, a:focus { text-decoration: none; color: var(--accent-color); } a.newpage:hover { text-decoration: none; color: var(--text-color); } *:focus-visible { outline: 1px solid var(--white-color); } div#container-wrap { background: var(--bg-color); } h1, h2, h3, h4, h5, h6 { padding: 0; margin: 8px 0 10px 0; color: var(--accent-color-2); font-family: var(--header-font); font-weight: bold; line-height: 1.25; } h1 { color: var(--accent-color); font-size: 24px; } h2 { font-size: 21px; } h3 { font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 14px; } h6 { font-size: 12px; } #extra-div-1, #extra-div-2 { z-index: 9; position: absolute; top: 0; right: 0; max-width: 100vw; width: 100%; height: var(--header-height); background: var(--header-bg-color); } #extra-div-2 { top: var(--header-height); height: var(--topbar-height); background: var(--topbar-bg-color); border: 1px solid var(--border-color); box-sizing: border-box; } #header { background: var(--icon) no-repeat; background-size: 50px 50px; background-position: 10px 25px; padding-bottom: 0; } #header * { font-family: var(--UI-font); } #header h1, #header h2 { margin-left: 70px; line-height: unset; font-weight: bold; } #header h1 a { padding: 20px 0 35px 0; line-height: unset; color: var(--text-color); font-family: var(--header-font); text-shadow: none; font-size: 28px; } #header h1 a span { font-size: 0; } #header h1 a span::before { content: var(--title, "SCP基金会"); font-size: 28px; } #header h2 span { line-height: unset; max-height: unset; padding: 0px 0; color: var(--link-color-2); font-family: var(--header-font); text-shadow: none; font-weight: normal; font-size: 0; } #header h2 span::before { content: var(--subtitle, "控制 · 收容 · 保护"); font-size: 14px; } #top-bar { top: var(--header-height); } #top-bar ul li ul { opacity: 0; transition: opacity var(--transition); } #top-bar ul :is(li:hover, li.sfhover) ul { opacity: 1; transition: opacity var(--transition); } #top-bar ul li a { margin: unset; padding: 3.5px 12px; line-height: 1; max-height: unset; border: 1px solid transparent; color: transparent; } #top-bar [class*=top-bar] > ul > li > a { color: var(--link-color-2); } @media screen and (max-width: 375px) { #top-bar [class*=top-bar] > ul > li > a { padding: 3.5px 8px; } } #top-bar [class*=top-bar] ul :is(li, li:hover, li.sfhover) ul li a { color: var(--link-color-2); padding: 5px 12px; background-color: transparent; border-color: transparent; width: 200px; } #top-bar [class*=top-bar] ul :is(li, li:hover, li.sfhover) ul { background-color: var(--topbar-bg-color-trans); box-shadow: 0 6px 12px var(--black-color); border: none; } #top-bar [class*=top-bar] > ul > :is(li:hover, li.sfhover) > a, #top-bar [class*=top-bar] ul :is(li, li:hover, li.sfhover) ul li a:hover, #top-bar ul :is(li, li:hover, li.sfhover) a:hover { background-color: var(--white-color-trans); border-color: transparent; color: var(--text-color); } #top-bar [class*=top-bar] > ul > li:not(:first-of-type) > ul { left: -60px; right: unset; } #top-bar [class*=top-bar] ul :is(li:nth-last-of-type(1), li:nth-last-of-type(2)) ul { right: 0; left: unset; } #login-status { color: var(--text-color); display: flex; align-items: center; justify-content: right; font-size: 14px; } #login-status .printuser { display: flex; align-items: center; margin-right: 3px; } #login-status > a { margin: 3px; color: var(--link-color-2); } #login-status > a:hover { color: var(--text-color); } #login-status > a[href*="account/messages"] strong { text-decoration: none; animation: none; } #login-status #account-topbutton { font-size: initial; font-weight: normal; border: none; padding: 0; } #account-options { top: calc(var(--account-height) + 10px); background-color: var(--topbar-bg-color-trans); box-shadow: 0 6px 12px var(--black-color); border: none; } #account-options ul li a { color: var(--link-color-2); padding: 5px 12px; } #account-options ul li a:hover { color: var(--text-color); background-color: var(--white-color-trans); text-decoration: none; } #search-top-box { top: calc(var(--header-height) / 2); width: unset; } #search-top-box #search-top-box-form { display: flex; justify-content: right; } #search-top-box #search-top-box-form #search-top-box-input { display: none; /* color: var(--text-color); font-size: 14px; border-radius: 0; background-color: var(--topbar-bg-color); border: 1px solid var(--border-color); box-shadow: none; margin: 0 3px 0 0; padding: 3px 6px; transition: background-color var(--transition); font-family: var(--body-font); */ } #search-top-box #search-top-box-form > input[type=submit] { background-image: var(--search-icon); background-repeat: no-repeat; background-size: 20px; background-position: 3px; background-color: var(--topbar-bg-color); border: 1px solid var(--accent-color-2); position: relative; border-radius: 0; font-size: 0; height: var(--account-height); width: var(--account-height); margin: 0; transition: background-color var(--transition); } #search-top-box #search-top-box-form #search-top-box-input:hover, #search-top-box #search-top-box-form #search-top-box-input:focus, #search-top-box #search-top-box-form #search-top-box-input:target, #search-top-box #search-top-box-form > input[type=submit]:hover, #search-top-box #search-top-box-form > input[type=submit]:focus, #search-top-box #search-top-box-form > input[type=submit]:target { background-color: var(--header-bg-color); } @media screen and (max-width: 767px) { :root { --header-height: 127px; } #header { background-position: 10px 52px; } #header h1 a { padding: 47px 0 35px 0; } } #top-bar .open-menu a { border-radius: 0; border: solid 3px var(--link-color-2); color: var(--link-color-2); background-color: var(--sidebar-bg-color); } #side-bar .side-block { border-radius: 0; background: var(--sidebar-bg-color) !important; border: 1px solid var(--border-color); box-shadow: none; font-family: var(--UI-font); } #side-bar .side-block .menu-item a { color: var(--text-color); } #side-bar .side-block .menu-item a:hover { color: var(--link-color-2); } #side-bar .side-block .menu-item > img { opacity: 0; } #side-bar .side-block .heading { color: var(--link-color-2); border-bottom: solid 1px var(--border-color); } #side-bar .side-block .collapsible-block-folded { background: none; } #side-bar .side-block .collapsible-block-unfolded-link { border-bottom: solid 1px var(--border-color); } #side-bar .side-block .collapsible-block-link { color: var(--link-color-2); } #side-bar .side-block .collapsible-block-link:hover { color: var(--text-color); } @media (max-width: 767px) { #side-bar { background-color: var(--bg-color-2); } } #content-wrap { margin: 20px auto 0; } #main-content { max-width: var(--main-content-width); } #page-title, #page-content .meta-title { font-family: var(--header-font); font-weight: bold; line-height: 1.25; color: var(--accent-color); font-size: 24px; border-color: var(--border-color); } #breadcrumbs { color: var(--text-color); } .page-rate-widget-box { display: inline-flex; border-radius: 0; box-shadow: none; margin: 4px 0; padding: 5px; background: var(--bg-color-2); } .page-rate-widget-box .rate-points { display: flex; align-items: center; color: var(--text-color); background: transparent !important; border: none; border-radius: 0; box-sizing: border-box; font-size: 12px; font-weight: bold; } .page-rate-widget-box .number { width: -moz-max-content; width: max-content; font-size: 16px; padding: 0 1.5px 0.5px; } .page-rate-widget-box .btn { display: block; width: 26px; height: 26px; background: transparent; border: none; font-weight: normal; } .page-rate-widget-box .btn a, div.creditRate .rate-box-with-credit-button .creditButton > p > a, div.creditRate .creditButtonStandalone > p > a { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: none; border-radius: 0; color: transparent; background-color: transparent; box-sizing: border-box; position: relative; transition: background-color var(--transition); } .page-rate-widget-box .btn a::before, div.creditRate .rate-box-with-credit-button .creditButton > p > a::before, div.creditRate .creditButtonStandalone > p > a::before { content: ""; display: block; background-color: var(--text-color); position: absolute; width: 100%; height: 100%; -webkit-mask-size: 40%; mask-size: 40%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .page-rate-widget-box .btn a:hover, .page-rate-widget-box .btn a:focus { color: transparent; } .page-rate-widget-box .rateup a::before { -webkit-mask-image: var(--vote-plus-icon); mask-image: var(--vote-plus-icon); } .page-rate-widget-box .ratedown a::before { -webkit-mask-image: var(--vote-minus-icon); mask-image: var(--vote-minus-icon); } .page-rate-widget-box .cancel a::before { -webkit-mask-image: var(--vote-cancel-icon); mask-image: var(--vote-cancel-icon); } div.creditRate .rate-box-with-credit-button .creditButton > p > a::before, div.creditRate .creditButtonStandalone > p > a::before { -webkit-mask-image: var(--vote-info-icon); mask-image: var(--vote-info-icon); -webkit-mask-size: 27.5%; mask-size: 27.5%; } .page-rate-widget-box .rateup a:hover { background-color: var(--green-color); } .page-rate-widget-box .ratedown a:hover { background-color: var(--red-color); } .page-rate-widget-box .cancel a:hover, div.creditRate .rate-box-with-credit-button .creditButton > p > a:hover, div.creditRate .creditButtonStandalone > p > a:hover { background-color: var(--bg-color-3); border-radius: 0; } .creditRate > .rateBox, div.creditRate .rate-box-with-credit-button > .page-rate-widget-box { display: contents; } #page-content .creditRate { float: none; display: block; margin: 0; text-align: right; } div.creditRate .rateBox { display: contents; } div.creditRate .rate-box-with-credit-button, div.creditRate .creditButtonStandalone { background-color: var(--bg-color-2); box-shadow: none; border: none; border-radius: 0; display: inline-flex; margin: 4px 0; padding: 5px; text-align: center; } div.creditRate .rate-box-with-credit-button .creditButton { display: block; width: 26px; height: 26px; padding-left: 5px; } div.creditRate .rate-box-with-credit-button .creditButton > p, div.creditRate .creditButtonStandalone > p { display: contents; } div.creditRate .creditButtonStandalone { width: 26px; height: 26px; } div.creditRate .creditButtonStandalone > p > a { box-shadow: none; } [id*=u-credit] .fader { background: var(--black-color-trans-2); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } [id*=u-credit] .modalbox { display: flex; flex-direction: column; box-shadow: none; border: none; border-radius: 0; background: var(--bg-color-2); padding: 0; } [id*=u-credit] .modalbox > div:first-of-type { display: flex; align-items: center; justify-content: center; height: 44px; font-size: 18px; background-color: var(--bg-color); } [id*=u-credit] .modalbox > div:first-of-type > h2 { color: var(--text-color); } [id*=u-credit] .modalbox .creditBottomRate { height: auto !important; } [id*=u-credit] .modalbox > .credit.first > p:first-of-type::before, [id*=u-credit] .modalbox > .credit.first > p:first-of-type::after { content: ""; position: absolute; top: 0; right: 0; display: block; height: 44px; width: 44px; pointer-events: none; } [id*=u-credit] .modalbox > .credit.first > p:first-of-type::before { background: transparent; transition: background-color var(--transition); } [id*=u-credit] .modalbox > .credit.first > p:first-of-type::after { background: var(--text-color); -webkit-mask-image: var(--close-icon); mask-image: var(--close-icon); -webkit-mask-position: 50%; mask-position: 50%; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } [id*=u-credit] .modalbox > .credit.first > p:first-of-type:hover::before { background: var(--bg-color-3); } [id*=u-credit] iframe.close-credits { transform: scale(1.875); height: 23px !important; width: 23px; top: 10px; right: 10px; opacity: 0; } [id*=u-credit] .modalbox > hr:first-of-type { display: none; } [id*=u-credit] .modalbox > hr { background-color: var(--border-color); margin: 20px 20px 10px; } div#toc { max-width: calc(var(--main-content-width) * 0.375); min-width: min(100%, var(--main-content-width) * 0.25); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0; background-color: var(--bg-color-2); border: solid 1px var(--border-color); box-sizing: border-box; } #toc.floatright { float: right; margin: 4px 0 4px 24px; } #toc.floatleft { float: left; margin: 4px 24px 4px 0; } /* non-float toc */ #page-content table[style^="margin:0;"] td[style^="margin:0;"] { display: contents; } #toc #toc-action-bar { text-align: right; padding: 10px; width: 56px; } #toc .title { flex-grow: 1; order: -1; padding: 10px 14px; margin: 0; text-align: left; font-size: 14px; } #toc-list { width: 100%; border-top: inherit; margin: 0; padding: 10px; padding-left: 18px; background-color: rgb(var(--basalt-background-color)); counter-reset: toc-num1; } #toc-list div[style*="1em"] { counter-increment: toc-num1; position: relative; } #toc-list div[style*="1em"]::before { content: counter(toc-num1) "."; position: absolute; top: 0; right: 100%; height: 100%; font-size: 10px; display: flex; align-items: center; font-family: var(--UI-font); padding-right: 4px; } #toc-list > div[style*="2em"] > a { font-size: 9px; } #toc-list > div[style*="3em"] > a { font-size: 8px; } #toc-list > div[style*="4em"] > a { font-size: 7px; } #toc-list > div[style*="5em"] > a { font-size: 6px; } #toc-list > div[style*="6em"] > a { font-size: 5px; } .bblock { background-color: var(--text-color); transition: color var(--transition); color: var(--text-color); } .bblock:hover, .bblock:focus-within { background-color: var(--text-color); color: var(--black-color); } .dblock { color: var(--text-color); background-color: currentColor; transition: background-color var(--transition); } .dblock:is(:hover, :focus-within) { background-color: transparent; } blockquote, div.blockquote { background-color: var(--bg-color-2-trans-2); color: var(--text-color); border: 1px solid var(--border-color); padding: 2px 23px; margin: 20px auto; max-width: calc(var(--main-content-width) * 0.825); box-sizing: border-box; } hr { height: 2px; margin: 24px auto; background-color: var(--border-color); } table td { text-align: start; } #page-content table { width: -moz-max-content; width: max-content; } #page-content table, table.wiki-content-table { max-width: 100%; overflow-x: auto; box-sizing: border-box; margin: 0.25rem auto; border-collapse: collapse; } #page-content table th, table.wiki-content-table th { background-color: var(--bg-color-3); border-color: var(--border-color); color: var(--text-color); padding: 6px 9px; font-family: var(--header-font); font-weight: bold; } #page-content table td, table.wiki-content-table td { border: solid 1px var(--border-color); padding: 8px 10px; } #page-content table tr:nth-of-type(2n), table.wiki-content-table tr:nth-of-type(2n) { background-color: var(--bg-color); } #page-content table tr:nth-of-type(2n+1), table.wiki-content-table tr:nth-of-type(2n+1) { background-color: var(--bg-color-2); } #page-content .yui-navset .yui-nav { border: none; display: flex; flex-wrap: wrap; justify-content: space-between; padding-right: 2px; } #page-content .yui-navset .yui-nav li, #page-content .yui-navset .yui-nav li.selected { margin: 0; padding: 0; flex-grow: 1; } #page-content .yui-navset .yui-nav li a { background: none; background-color: var(--bg-color-2); color: var(--text-color); border: 1px solid var(--border-color); border-width: 1px 1px 0 1px; display: flex; width: 100%; justify-content: center; transition: background-color var(--transition); } #page-content .yui-navset .yui-nav li a:focus-visible { background-color: var(--bg-color); } #page-content .yui-navset .yui-nav li:hover, #page-content .yui-navset .yui-nav li a:hover { background-color: var(--bg-color); } #page-content .yui-navset .yui-nav li.selected a { background-color: var(--bg-color-3); border-width: 1px 1px 0 1px; } #page-content .yui-navset .yui-nav li a em { border: none; top: 0; padding: 0.25em 0.75em; } #page-content .yui-navset .yui-content { background-color: var(--bg-color-2); color: var(--text-color); padding: 10px 16px; border: 1px solid var(--border-color); } #page-content .pager a { border: 1px solid var(--border-color); color: var(--link-color); } #page-content .pager a:hover { color: var(--link-color-2); } #page-content .pager .target:last-of-type a, #page-content input.btn, #page-content .buttons input, #action-area input.btn, #odialog-container .owindow .button-bar a, #action-area .change-textarea-size a { color: var(--link-color-2); background-color: var(--bg-color-2); border: 1px solid var(--border-color); cursor: pointer; transition: background-color var(--transition), color var(--transition); } #page-content .pager .target:last-of-type a:hover, #page-content input.btn:hover, #page-content .buttons input:hover, #action-area input.btn:hover, #odialog-container .owindow .button-bar a:hover, #action-area .change-textarea-size a:hover { color: var(--white-color); background-color: var(--bg-color-3); } #page-content .pager .current { background-color: var(--bg-color-2); color: var(--text-color); } #page-content .scp-image-block .scp-image-caption { background-color: var(--bg-color-2); color: var(--text-color); } #page-content .code { background-color: var(--bg-color-2); color: var(--text-color); border: 1px solid var(--border-color); font-family: var(--mono-font); } #page-content code, #page-content tt { background-color: var(--bg-color-3-trans-2); color: var(--text-color); font-family: var(--mono-font); } #page-content .code pre span[class*=hl-] { filter: invert(1) hue-rotate(180deg); } #page-content .wiki-note { background-color: var(--bg-color-2); border: 1px solid var(--border-color); } #odialog-hovertips .hovertip { background-color: var(--bg-color-2-trans) !important; border: 1px solid var(--border-color) !important; color: var(--text-color); } #odialog-shader { background-color: var(--black-color-trans-2); opacity: 1; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } #odialog-container .owindow { background-color: var(--bg-color-2); border: 2px solid var(--border-color); } #odialog-container .owindow .modal-body img:first-of-type { background-color: transparent !important; } #odialog-container .owindow .title, #action-area #lock-info { background-color: var(--bg-color); } input.text, textarea { background-color: var(--bg-color-2); border: 1px solid var(--border-color); color: var(--text-color); } #edit-page-form .form { width: 100%; border-spacing: 0; } #edit-page-form .form tr { display: flex; flex-wrap: wrap; } #edit-page-form .form td:nth-of-type(1) { padding: 0 0 0 6px; } #edit-page-form .form td:nth-of-type(2) { padding: 0; width: 100%; } #edit-page-form .form td:nth-of-type(2) input.text, #new-post-div input.text { width: 100%; max-width: 100%; margin: 0; padding-left: 8px; box-sizing: border-box; } #edit-page-form .wd-editor-toolbar-panel, #new-post-div .wd-editor-toolbar-panel { display: flex; flex-wrap: wrap; background-color: var(--bg-color-2); padding: 9px 6px; border: 1px solid var(--border-color); margin: 0.5em 0 1em; width: 100%; box-sizing: border-box; } #edit-page-form .wd-editor-toolbar-panel div, #new-post-div .wd-editor-toolbar-panel div { width: 100%; height: unset; } #edit-page-form .wd-editor-toolbar-panel div ul, #new-post-div .wd-editor-toolbar-panel div ul { float: unset; display: flex; flex-wrap: wrap; } #edit-page-form .wd-editor-toolbar-panel div ul li, #new-post-div .wd-editor-toolbar-panel div ul li { float: unset; margin: 0; padding: 3px; position: relative; } #edit-page-form .wd-editor-toolbar-panel div ul li.hseparator, #new-post-div .wd-editor-toolbar-panel div ul li.hseparator { padding: 0; width: 1px; margin-right: -1px; } #edit-page-form .wd-editor-toolbar-panel div ul li:hover ul, #edit-page-form .wd-editor-toolbar-panel div ul li.sfhover ul, #new-post-div .wd-editor-toolbar-panel div ul li:hover ul, #new-post-div .wd-editor-toolbar-panel div ul li.sfhover ul { background-color: var(--bg-color-2); border: 1px solid var(--border-color); } #edit-page-form #edit-page-textarea, #new-post-div #np-text { margin: 0.5em 0 1em; width: 100% !important; border: 1px solid var(--border-color); padding: 8px 0 8px 8px; box-sizing: border-box; } #edit-page-form .change-textarea-size, #new-post-div .change-textarea-size { float: unset; padding: 0 0 1em 0; width: calc(100% - 2px); margin: -1em 0 1em 2px; display: flex; justify-content: flex-end; border-bottom: 1px solid var(--border-color); } #edit-page-form .change-textarea-size a, #new-post-div .change-textarea-size a { background-color: var(--bg-color-2); border: 1px solid var(--border-color); border-width: 0 1px 1px 1px; } #edit-page-form .change-textarea-size a:nth-of-type(1), #new-post-div .change-textarea-size a:nth-of-type(1) { padding: 2px 11.38px; border-width: 0 0 1px 1px; } #edit-page-form .change-textarea-size a:nth-of-type(2), #new-post-div .change-textarea-size a:nth-of-type(2) { padding: 2px 7.78px; } #edit-page-form .edit-help-34, #new-post-div .edit-help-34 { margin: -3.7em 0 1.7em; } #edit-page-form .edit-page-bottomtable { width: 100%; } #edit-page-form .edit-page-bottomtable tr { display: flex; flex-wrap: wrap; } #edit-page-form .edit-page-bottomtable td:nth-of-type(1) { width: 100%; margin: 0 -7px; position: relative; } #edit-page-form .edit-page-bottomtable #edit-page-comments { width: calc(100% - 2px); min-height: 4em; } #edit-page-form .edit-page-bottomtable .sub { display: flex; align-items: center; position: absolute; bottom: 0; right: 1em; color: var(--text-color); } #edit-page-form .edit-page-bottomtable td:nth-of-type(2) { width: calc(100% + 4px); margin: 0 -7px; } #edit-page-form .edit-page-bottomtable #lock-info { border: 1px solid var(--border-color); padding: 8px; text-align: center; background-color: var(--bg-color-2); } #edit-page-form .buttons, #new-post-div .buttons { display: flex; justify-content: right; flex-wrap: wrap; row-gap: 8px; } #edit-page-form .buttons .btn, #new-post-div .buttons .btn { border: 1px solid var(--border-color); background-color: var(--bg-color-2); color: var(--text-color); padding: 7px 18px; margin: 0 8px 0 0; cursor: pointer; } #view-diff-div > p a.button { border: 1px solid var(--border-color); background-color: var(--bg-color-2); color: var(--text-color); padding: 7px 18px; margin: 0 8px 0 0; } #view-diff-div .page-source { border: 1px solid var(--border-color); background-color: var(--bg-color-2); padding: 8px; } #edit-page-form .change-textarea-size a:hover, #new-post-div .change-textarea-size a:hover, #edit-page-form .buttons .btn:hover, #new-post-div .buttons .btn:hover { text-decoration: none; background-color: var(--bg-color-3); color: var(--link-color-2); transition: color var(--transition), background-color var(--transition); } .inline-diff del { background-color: var(--red-color); } .inline-diff del::before { color: var(--red-color); } .inline-diff ins { background-color: var(--green-color); } .inline-diff ins::before { color: var(--green-color); } #footer, #license-area, #print-opyions, div.buttons input, input[type=button], button, .bibitems .title, .footnotes-footer .title, .hovertip .content .footnote .f-heading, .hovertip .content .reference .r-heading, .owindow .button-bar > a:not([onclick*=cleanAll]), .owindow div[style*=margin-top] a, .owindow > .content.modal-body > img + h1 + table > tbody > tr > td:first-child, #flag-user-options-flag > *, #flag-user-options-unflag > *, #page-info, #page-options-container .page-watch-options, #action-area a.btn, #action-area input.btn, div.buttons a.btn, div.buttons input.btn, #history-subarea a.action-area-close, #view-diff-div a.button, form#edit-page-form, form[onsubmit*=PageTagsModule] > table.form > tbody > tr > td:first-child, #history-form-1 > table.form > tbody > tr:first-child > td:first-child, #history-form-1 > table.form > tbody > tr:nth-child(2) > td, #main-content .pager .pager-no, #revision-list .page-history tr[id*=revision-row] td:nth-child(4), #revision-list .page-history tr[id*=revision-row] td:nth-child(6), div.site-changes-box > form > table.form > tbody > tr > td:first-child, #site-changes-list div.changes-list-item > table > tbody > tr > td.revision-no, #site-changes-list div.changes-list-item > table > tbody > tr > td.mod-date, #history-subarea > h2, #file-upload-form table.form > tbody > tr > td:nth-child(1), form[onsubmit*=setParent] > table.form > tbody > tr > td:nth-child(1), #rename-option-rename table.form > tbody > tr > td:nth-child(1), #action-area table.page-files > thead > tr, input#upload-userfile::file-selector-button, #action-area > h1 + p + h2 + div[style*=padding-left] > div > a[onclick*="EditMetaModule.listeners.deleteTag"], #action-area > a.action-area-close + h1 + p + table.form > tbody > tr > td:first-child { font-family: var(--UI-font); } div#print-head, code, .code, .code pre, .code p, tt, .yui-navset.yui-navset-top > ul.yui-nav, .footnotes-footer .footnote-footer > a:first-child, #revision-list .page-history tr[id*=revision-row] td:nth-child(1), #action-area > h1 + p + h2 + div[style*=padding-left] > div, #edit-meta-newtag-form > table { font-family: var(--mono-font); } *::-webkit-scrollbar-thumb { background: var(--bg-color-3); } *::-webkit-scrollbar-track { background: var(--bg-color-2); } /* scp-anthology by EstrellaYoshte */ .halloween-cards-container { display: flex; flex-wrap: wrap; grid-gap: 1.675rem; justify-content: center; margin: 0.5rem auto; } .halloween-cards-container .anthology-card { display: flex; flex-direction: column; background-color: var(--bg-color-2); position: relative; flex-basis: 13.25rem; box-sizing: border-box; isolation: isolate; transition: transform var(--transition); } .halloween-cards-container .anthology-card:is(:hover, :focus-within) { transform: scale(1.325); z-index: 1; } .halloween-cards-container .anthology-card > a:first-child { font-size: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; outline: none; } .halloween-cards-container .anthology-card > a:first-child:not([href*=scp-wiki-cn]) { display: none; } .halloween-cards-container .anthology-card > a:first-child:not([href*=scp-wiki-cn]) ~ img { cursor: not-allowed; } .anthology-card > h1 { font-family: "Teko", "Inter", sans-serif; font-weight: normal; font-size: 1.75em; line-height: 0.9; margin: 0; position: absolute; width: 100%; box-sizing: border-box; padding: 0.285rem 2.25rem 0.125rem; text-align: center; background-color: var(--bg-color-2); color: var(--text-color); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0.5rem, calc(100% - 1.25rem) 0.5rem, calc(100% - 2.5rem) 100%, 2.5rem 100%, 1.25rem 0.5rem, 0% 0.5rem); clip-path: polygon(0 0, 100% 0, 100% 0.5rem, calc(100% - 1.25rem) 0.5rem, calc(100% - 2.5rem) 100%, 2.5rem 100%, 1.25rem 0.5rem, 0% 0.5rem); transition: color var(--transition), background-color var(--transition); } .anthology-card:is(:hover, :focus-within) > h1 { color: var(--black-color); background-color: var(--link-color-2); } .anthology-card > img { padding-top: 0.5rem; height: 17.5rem; width: 100%; -o-object-fit: cover; object-fit: cover; z-index: -1; } .anthology-card > .antho-title { display: flex; width: calc(100% + 1rem); max-width: unset !important; align-items: center; font-family: "Teko", "Inter", sans-serif; isolation: isolate; position: absolute; bottom: 2.625rem; left: -0.625rem; transform: translateY(50%); z-index: 4; pointer-events: none; } .anthology-card > .antho-title span { pointer-events: auto; } .anthology-card > .antho-title span:nth-child(1) { display: flex; align-items: center; justify-content: center; height: 3rem; min-width: 3.5rem; width: 3.5rem; line-height: 1.25; box-sizing: border-box; color: black; font-weight: bold; position: relative; font-size: 1.675rem; font-family: var(--body-font); transform: scale(1.25); z-index: 1; } .anthology-card.x4 > .antho-title span:nth-child(1) { font-size: 0; } .anthology-card:not(.x4) > .antho-title span:nth-child(1)::before, .anthology-card > .antho-title span:nth-child(1)::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--link-color); z-index: -1; -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); } .anthology-card:not(.x4) > .antho-title span:nth-child(1)::before { background-color: var(--link-color-2); transition: transform var(--transition); } .anthology-card.x4 > .antho-title span:nth-child(1)::before { content: "星"; font-size: 1.675rem; } .anthology-card > .antho-title span:nth-child(2) { min-height: 2.375em; font-size: 1.675em; font-weight: normal; line-height: 0.875; display: inline-grid; align-items: center; text-align: center; padding: 0.175em 1.25em; padding-left: 1.75rem; margin-left: -0.875rem; background-color: var(--bg-color-3); background-image: linear-gradient(to right, var(--link-color-2) 0%, var(--link-color-2) 100%); background-size: 0% 100%; background-position: 0 100%; background-repeat: no-repeat; -webkit-clip-path: polygon(0 0, calc(100% - 0.875em) 0, 100% 50%, calc(100% - 0.875em) 100%, 0 100%); clip-path: polygon(0 0, calc(100% - 0.875em) 0, 100% 50%, calc(100% - 0.875em) 100%, 0 100%); transition: all var(--transition); } .anthology-card:is(:hover, :focus-within) > .antho-title span:nth-child(1) { color: var(--text-color); transition: color var(--transition); } .anthology-card:is(:hover, :focus-within) > .antho-title span:nth-child(1)::before { transform: scale(1.15); } .anthology-card:is(:hover, :focus-within) > .antho-title span:nth-child(2) { color: var(--black-color); background-size: 100% 100%; } /* Convert from SCSS */ :root { --mask-text-background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi4zLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTk0MS42IDc4NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTk0MS42IDc4NTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQo8L3N0eWxlPg0KPGcgaWQ9IuWbvuWxgl8zIj4NCgk8ZyBpZD0iWE1MSURfMDAwMDAwNDQ4NTY2Mzg4MTAyNDYwNjYwMDAwMDAwMDg2MzIxMzQwNzExMDQzMDA3MDFfIj4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMTkzOS45LDI1Ni40YzIuMSwzLjcsMi4xLDguMywwLDEybC0yOTQuNyw1MTAuNWMtMi4xLDMuNy02LjEsNi0xMC40LDZIMTQ1LjNjLTQuMywwLTguMi0yLjMtMTAuNC02TDEuOCw1NDguMg0KCQkJCWMtMS0xLjgtMS42LTMuOS0xLjYtNmMwLTYuNiw1LjQtMTIsMTItMTJoNzIuM2M0LjMsMCw4LjIsMi4zLDEwLjQsNmw5MC4xLDE1Ni4xYzIuMSwzLjcsNi4xLDYsMTAuNCw2aDQ4OS41DQoJCQkJYzQuMywwLDguMi0yLjMsMTAuNC02bDI0NC43LTQyMy45YzIuMS0zLjcsMi4xLTguMywwLTEyTDg0Mi40LDg3LjZsLTQwLjEtNjkuNGMtMS0xLjgtMS42LTMuOS0xLjYtNmMwLTYuNiw1LjQtMTIsMTItMTJ2MEgxNzg1DQoJCQkJYzQuMywwLDguMiwyLjMsMTAuNCw2bDQ3LDgxLjRMMTkzOS45LDI1Ni40eiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTgxMi43LDAuMWMtNi42LDAtMTIsNS40LTEyLDEyYzAsMi4xLDAuNiw0LjIsMS42LDZsNDAuMSw2OS40bDk3LjUsMTY4LjljMi4xLDMuNywyLjEsOC4zLDAsMTJMNjk1LjIsNjkyLjMNCgkJCQljLTIuMSwzLjctNi4xLDYtMTAuNCw2SDE5NS4zYy00LjMsMC04LjItMi4zLTEwLjQtNkw5NC44LDUzNi4yYy0yLjEtMy43LTYuMS02LTEwLjQtNkgxMi4xYy02LjYsMC0xMiw1LjQtMTIsMTINCgkJCQljMCwyLjEsMC42LDQuMiwxLjYsNmwxMzMuMiwyMzAuN2MyLjEsMy43LDYuMSw2LDEwLjQsNmgxNDg5LjRjNC4zLDAsOC4yLTIuMywxMC40LTZsMjk0LjctNTEwLjVjMi4xLTMuNywyLjEtOC4zLDAtMTINCgkJCQlsLTk3LjUtMTY4LjlsLTQ3LTgxLjRjLTIuMS0zLjctNi4xLTYtMTAuNC02TDgxMi43LDAuMUw4MTIuNywwLjF6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg=="); --mask-text-border: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi4zLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTk1MC43IDc5Mi41IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOTUwLjcgNzkyLjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQ0KPC9zdHlsZT4NCjxnIGlkPSLlm77lsYJfMyI+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTgxNywzLjdjLTYuNiwwLTEyLDUuNC0xMiwxMmMwLDIuMSwwLjYsNC4yLDEuNiw2bDQwLjEsNjkuNEw5NDQuMiwyNjBjMi4xLDMuNywyLjEsOC4zLDAsMTJMNjk5LjUsNjk2DQoJCWMtMi4xLDMuNy02LjEsNi0xMC40LDZIMTk5LjZjLTQuMywwLTguMi0yLjMtMTAuNC02TDk5LjEsNTM5LjljLTIuMS0zLjctNi4xLTYtMTAuNC02SDE2LjVjLTYuNiwwLTEyLDUuNC0xMiwxMg0KCQljMCwyLjEsMC42LDQuMiwxLjYsNmwxMzMuMiwyMzAuN2MyLjEsMy43LDYuMSw2LDEwLjQsNmgxNDg5LjVjNC4zLDAsOC4yLTIuMywxMC40LTZMMTk0NC4yLDI3MmMyLjEtMy43LDIuMS04LjMsMC0xMmwtOTcuNS0xNjguOQ0KCQlsLTQ3LTgxLjRjLTIuMS0zLjctNi4xLTYtMTAuNC02TDgxNywzLjdMODE3LDMuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K"); --mask-icon: url("data:image/svg+xml;base64,PHN2ZyBpZD0i5Zu+5bGCXzEiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDkzNS45NSA4MDEuMTEiPjxnIGlkPSLlm77lsYJfMyIgZGF0YS1uYW1lPSLlm77lsYIgMyI+PHBhdGggZD0iTTcwNC40NiwxNkg2MDUuMzlhMTEuMywxMS4zLDAsMCwwLTkuNzgsNS42NEw1ODMuOSw0MS44N2ExMS4yOSwxMS4yOSwwLDAsMCw5Ljc4LDE2LjkzaDg2YTExLjMsMTEuMywwLDAsMSw5Ljc4LDUuNjRMODg0LjkzLDQwMi44OGExMS4yNywxMS4yNywwLDAsMSwwLDExLjI5TDY4OS40OCw3NTIuNjFhMTEuMjksMTEuMjksMCwwLDEtOS43OCw1LjY0SDI4OC44MmExMS4zLDExLjMsMCwwLDEtOS43OC01LjY0TDE1OC44Myw1NDQuNDVhMTEuMjksMTEuMjksMCwwLDAtMTkuNTYsMGwtMTEuNjksMjAuMzJhMTEuMjksMTEuMjksMCwwLDAsMCwxMS4yN0wyNTQuMyw3OTUuNDdhMTEuMzIsMTEuMzIsMCwwLDAsOS43OSw1LjY0SDcwNC40OGExMS4zLDExLjMsMCwwLDAsOS43OC01LjY0TDkzNC40NCw0MTQuMThhMTEuMjcsMTEuMjcsMCwwLDAsMC0xMS4yOUw3MTQuMjQsMjEuNkExMS4zLDExLjMsMCwwLDAsNzA0LjQ2LDE2WiIvPjxwYXRoIGQ9Ik0xNTQuMjIsNDE1Ljg3bC0uODYsMS41YTExLjI5LDExLjI5LDAsMCwxLTkuNzksNS42Nkg5N2ExMS4zMSwxMS4zMSwwLDAsMC05LjgsNS42NkwxLjUyLDU3Ny41NWExMS4yOSwxMS4yOSwwLDAsMCw5Ljc5LDE2LjkySDcxYTExLjMxLDExLjMxLDAsMCwwLDkuNzktNS42NmwxMTUuNjEtMjAxYTExLjI5LDExLjI5LDAsMCwwLTkuNzktMTYuOTJoMGExMS4zMSwxMS4zMSwwLDAsMC05Ljc5LDUuNjZaIi8+PHBhdGggZD0iTTIxOCwyMzAuNjZsLS44NiwxLjVhMTEuMzEsMTEuMzEsMCwwLDEtOS44LDUuNjZIMTYxYTExLjMxLDExLjMxLDAsMCwwLTkuNzksNS42Nkw2NS44MywzOTEuODNhMTEuMjksMTEuMjksMCwwLDAsOS43OSwxNi45Mmg1OS42OWExMS4zMSwxMS4zMSwwLDAsMCw5Ljc5LTUuNjZsMTE1LjYxLTIwMWExMS4yOSwxMS4yOSwwLDAsMC05LjgtMTYuOTJoLS4yMmExMS4zMSwxMS4zMSwwLDAsMC05Ljc5LDUuNjZaIi8+PHBhdGggZD0iTTU2Ny41MiwxNi45M0ExMS4yOSwxMS4yOSwwLDAsMCw1NTcuNzQsMEgyNTVhMTEuMzEsMTEuMzEsMCwwLDAtOS44LDUuNjZsLTExNS42MSwyMDFhMTEuMjksMTEuMjksMCwwLDAsOS44LDE2LjkySDE5OS4xYTExLjMxLDExLjMxLDAsMCwwLDkuNzktNS42NkwyODgsODAuNDRhMTEuMywxMS4zLDAsMCwxLDkuOC01LjY2SDUyNy42MWExMS4zMiwxMS4zMiwwLDAsMCw5Ljc5LTUuNjRaIi8+PC9nPjwvc3ZnPg=="); } #page-content .achi-container { display: flex; color: var(--bg-color); width: 100%; height: 21.3rem; position: relative; } @media screen and (max-width: 768px) { #page-content .achi-container { height: 45vw; } } #page-content .achi-border { display: block; width: 98%; left: 2%; top: 14.5%; position: absolute; height: 85.5%; color: var(--bg-color-2); box-sizing: border-box; } #page-content .achi-border::before, #page-content .achi-border::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } #page-content .achi-border::before { background-color: var(--bg-color-2); -webkit-mask-image: var(--mask-text-background); mask-image: var(--mask-text-background); } #page-content .achi-border::after { background-color: var(--border-color); -webkit-mask-image: var(--mask-text-border); mask-image: var(--mask-text-border); } #page-content .achi-icon { display: block; width: 47.47%; height: 100%; position: relative; box-sizing: border-box; } #page-content .achi-icon::before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: var(--border-color); -webkit-mask-image: var(--mask-icon); mask-image: var(--mask-icon); top: 0; } #page-content .achi-text { position: relative; left: 49%; top: 0; width: 42.5%; max-width: 42.5%; margin: 5px 0 0 0; color: var(--text-color); }/*# sourceMappingURL=https://hoah2333.github.io/Archived-works/SCP/theme-sci-fi/main.css.map */ [[/code]] [[/collapsible]] [[/iftags]]

科幻小说版式

评分趋势

最近修订

最近投票

相关页面

页面源码