著作信息
SCP-CN-XXXX:标题
故事/GOI 格式标题
作者:作者 does not match any existing user name
原文:原文链接
译者:译者 does not match any existing user name
插图:所用插图来源及许可
更多你想告诉读者的东西
主题颜色
关于本页
在你的作品开头添加如下语法以应用此版式:
[[include :evernight-aquarium:theme:dreamers-theme]]
示例
可通过 5 个连字符“-----”创建水平分割线。若它未被放在其他部件(诸如引用块)中,则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
如果将“-----”放入类(class)为 “fancyhr” 的 div 元素中,则可以显示另一种水平线样式,如下所示:
[[div_ class="fancyhr"]]
-----
[[/div]]
效果如下:
[[div_ class="fancyborder"]]
文字内容
[[/div]]
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建
链接:
此为分页(tab view)。
看,这有更多文字。
多么精巧绝伦。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块1
这是 | 表格 |
---|---|
你应该老早 | 就知道怎么 |
做这个了吧 |
正文字体为 Skolar Sans / 浏览器默认字体
页眉字体为 Anonymous Pro / 思源宋体。
标题字体为 Zuijin / 王汉宗魏碑体。
等宽字为 Recursive / 仿宋及思源宋体。
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&display=swap'); @import url("https://fastly.jsdelivr.net/gh/Crimone/typefaces@main/fandol-fangsong/FandolFang-Regular.css"); /* Centered Header Sigma-9 * [2021 Wikidot Component] * By Lt Flops (CC BY-SA 3.0) * Forked from: * Penumbra Theme by EstrellaYoshte * Also based on: * Centered Header BHL by Woedenaz **/ /* ---- VARS ---- */ :root { --titleColor: hsl(0, 0%, 95%); --subtitleColor: hsl(60, 62%, 85%); --lgurl: url(https://scp-wiki.wdfiles.com/local--files/component%3Acentered-header-sigma-9/logo.svg); --header-title: "SEE EVERYTHING AND SEE NOTHING"; --header-subtitle: " "; --header-height-on-desktop: 140px; --user-account-mask: url("https://fastly.jsdelivr.net/gh/Crimone/crimson-anemone@main/files/user-account-mask.svg"); --search-top-box-mask: url("https://fastly.jsdelivr.net/gh/Crimone/crimson-anemone@main/files/search-top-box-mask.svg"); --bright-accent: 235, 235, 235; --dark-accent: 0, 0, 0; } tt,pre { font-family: 'Andale Mono', 'Courier New', "FandolFang-Regular", Courier, monospace; } /* ---- SITE HEADER ---- */ div#header { background-image: none; } #header::before { position: absolute; width: 100%; height: 100%; top: .45rem; left: 0; content: " "; background-image: var(--lgurl); background-position: center; background-repeat: no-repeat; background-size: auto 8rem; opacity: .35; pointer-events: none; z-index: -1; } #header h1, #header h2 { float: none; margin-left: 0; text-align: center; } /* Move the Subtitle Down a Smidge */ #header h2 { margin-top: .45rem; } /* Hide the Existing Text */ #header h1 span, #header h2 span { display: none; font-size: 0; } /* Style the New Text */ #header h1 a::before, #header h2::before { font-family: "Anonymous Pro", "Arial", sans-serif; text-shadow: none; } #header h1 a::before { position: relative; bottom: .15em; color: var(--titleColor); text-shadow: 0 0 10px #000000, 0 0 20px #ffffff; } #header h2::before { position: relative; bottom: .3em; color: var(--subtitleColor); } /* Set the New Text's Content From Variable */ #header h1 a::before { content: var(--header-title, "SCP基金会"); font-size: 115%; font-weight: bold; } #header h2::before { content: var(--header-subtitle, "控制 - 收容 - 保护"); font-size: 130%; font-weight: 600; } /* ---- TOP BAR ---- */ #top-bar { display: flex; justify-content: center; left: auto; } #top-bar ul li ul { box-shadow: none; overflow: hidden; } /* ---- PAGE TITLE ---- */ .meta-title, #page-title { text-align: center; } /* ---- BREADCRUMBS ---- */ .pseudocrumbs, #breadcrumbs { text-align: center; } /* ---- MOBILE DISPLAY ---- */ @media (max-width: 767px) { #search-top-box { width: unset; } .mobile-top-bar { position: relative; display: flex; justify-content: center; left: 0; } } /* Created for the Buried tale hub By Sekai CC BY-SA 3.0 */ div#container-wrap { background-image: url(http://scp-wiki-cn.wikidot.com/local--files/buried-hub/body_bg_grey.png); background-repeat: repeat-x; } #side-bar .side-block { -webkit-filter: grayscale(100%); filter: grayscale(100%); } @media (max-width: 767px) { #side-bar { background-color: rgb(150, 150, 150); } } #header { background: none; } #header::before { display: block; position: absolute; height: 140px; top: 0; left: 0; z-index: -1; content: ""; /* background: url(/local--files/component:theme/logo.png) 10px 40px no-repeat; */ background-size: contain; } @media (max-width: 479px) { #header::before { background-position: center; background-size: contain; } } @media (min-width: 480px) and (max-width: 580px) { #header::before { background-size: contain; background-position: center; } } @media (min-width: 581px) and (max-width: 767px) { #header::before { background-size: contain; background-position: center; } } @media (min-width: 768px) and (max-width: 979px) { #header::before { background-size: contain; background-position: center; } } #header h1 { -webkit-animation: flicker-1 10s infinite; -o-animation: flicker-1 10s infinite; animation: flicker-1 10s infinite; } #header::before { -webkit-animation: flicker-2 10s infinite; -o-animation: flicker-2 10s infinite; animation: flicker-2 10s infinite; } #header h2 { -webkit-animation: flicker-3 10s infinite; -o-animation: flicker-3 10s infinite; animation: flicker-3 10s infinite; } @keyframes flicker-1 { 53% { -webkit-filter: brightness(100%); filter: brightness(100%); } 53.5% { -webkit-filter: brightness(60%); filter: brightness(60%); } 54% { -webkit-filter: brightness(80%); filter: brightness(80%); } 54.5% { -webkit-filter: brightness(50%); filter: brightness(50%); } 55% { -webkit-filter: brightness(100%); filter: brightness(100%); } 64% { -webkit-filter: brightness(100%); filter: brightness(100%); } 64.5% { -webkit-filter: brightness(40%); filter: brightness(40%); } 65% { -webkit-filter: brightness(40%); filter: brightness(40%); } 65.5% { -webkit-filter: brightness(80%); filter: brightness(80%); } 66% { -webkit-filter: brightness(40%); filter: brightness(40%); } 96.5% { -webkit-filter: brightness(40%); filter: brightness(40%); } 97% { -webkit-filter: brightness(70%); filter: brightness(70%); } 97.5% { -webkit-filter: brightness(40%); filter: brightness(40%); } 98% { -webkit-filter: brightness(100%); filter: brightness(100%); } } @keyframes flicker-2 { 54% { -webkit-filter: brightness(100%); filter: brightness(100%); } 54.5% { -webkit-filter: brightness(60%); filter: brightness(60%); } 55% { -webkit-filter: brightness(80%); filter: brightness(80%); } 55.5% { -webkit-filter: brightness(50%); filter: brightness(50%); } 56% { -webkit-filter: brightness(100%); filter: brightness(100%); } 65% { -webkit-filter: brightness(100%); filter: brightness(100%); } 65.5% { -webkit-filter: brightness(40%); filter: brightness(40%); } 66% { -webkit-filter: brightness(40%); filter: brightness(40%); } 66.5% { -webkit-filter: brightness(80%); filter: brightness(80%); } 67% { -webkit-filter: brightness(40%); filter: brightness(40%); } 97.5% { -webkit-filter: brightness(40%); filter: brightness(40%); } 98% { -webkit-filter: brightness(70%); filter: brightness(70%); } 98.5% { -webkit-filter: brightness(40%); filter: brightness(40%); } 99% { -webkit-filter: brightness(100%); filter: brightness(100%); } } @keyframes flicker-3 { 55% { -webkit-filter: brightness(100%); filter: brightness(100%); } 55.5% { -webkit-filter: brightness(60%); filter: brightness(60%); } 56% { -webkit-filter: brightness(80%); filter: brightness(80%); } 56.5% { -webkit-filter: brightness(50%); filter: brightness(50%); } 57% { -webkit-filter: brightness(100%); filter: brightness(100%); } 66% { -webkit-filter: brightness(100%); filter: brightness(100%); } 66.5% { -webkit-filter: brightness(40%); filter: brightness(40%); } 67% { -webkit-filter: brightness(40%); filter: brightness(40%); } 67.5% { -webkit-filter: brightness(80%); filter: brightness(80%); } 68% { -webkit-filter: brightness(40%); filter: brightness(40%); } 98.5% { -webkit-filter: brightness(40%); filter: brightness(40%); } 99% { -webkit-filter: brightness(70%); filter: brightness(70%); } 99.5% { -webkit-filter: brightness(40%); filter: brightness(40%); } 100% { -webkit-filter: brightness(100%); filter: brightness(100%); } } #page-title { color: rgb(34, 34, 34); } h1, a { color: rgb(200, 0, 5); } a:visited { color: rgb(100, 3, 15); } #top-bar ul li.sfhover a, #top-bar ul li:hover a, #top-bar ul li ul a, #top-bar a:hover, #side-bar a, #side-bar a:visited, #side-bar .collapsible-block-unfolded-link .collapsible-block-link, #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover, #breadcrumbs a, .page-tags a, #page-options-container a, #license-area a { color: rgb(41, 41, 41); } .page-rate-widget-box .rate-points { background-color: rgb(62, 62, 62) !important; border-color: rgb(62, 62, 62); } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { background-color: rgb(247, 247, 247); border-color: rgb(62, 62, 62); } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { color: rgb(62, 62, 62); } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover { background: rgb(62, 62, 62); color: rgb(254, 254, 254); } .page-rate-widget-box .cancel { background-color: rgb(62, 62, 62); border-color: rgb(62, 62, 62); } .page-rate-widget-box .cancel a { color: rgb(113, 113, 113); } .page-rate-widget-box .cancel a:hover { background: rgb(62, 62, 62); color: rgb(254, 254, 254); } .rate-box-with-credit-button { background-color: rgb(62, 62, 62) !important; border-color: rgb(62, 62, 62) !important; } .creditButton p a { border-left-color: rgb(113, 113, 113) !important; } .modalbox { box-shadow: 0 2px 6px rgba(22, 22, 22, .5) !important; } .close-credits, .credit-back { filter: grayscale(100%); } #header::before { background-image: url("http://wanderers-library.wikidot.com/local--files/component:dreamers-theme/Oma-logo-22042013_300pp.png"); filter: brightness(10); } #page-title { color: rgb(56, 56, 56); } h1 { color: rgb(4, 77, 0); } a, a:visited { color: rgb(5, 148, 0); } #top-bar ul li.sfhover a, #top-bar ul li:hover a, #top-bar ul li ul a, #top-bar a:hover, #side-bar a, #side-bar a:visited, #side-bar .collapsible-block-unfolded-link .collapsible-block-link, #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover, #breadcrumbs a, .page-tags a, #page-options-container a, #license-area a { color: rgb(107, 107, 107); } .page-rate-widget-box .rate-points { background-color: rgb(77, 77, 77) !important; border-color: rgb(77, 77, 77); } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { background-color: rgb(250, 250, 250); border-color: rgb(77, 77, 77); } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { color: rgb(77, 77, 77); } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover { background: rgb(77, 77, 77); color: rgb(250, 250, 250); } .page-rate-widget-box .cancel { background-color: rgb(77, 77, 77); border-color: rgb(77, 77, 77); } .page-rate-widget-box .cancel a { color: rgb(250, 250, 250); } .page-rate-widget-box .cancel a:hover { background: rgb(77, 77, 77); color: rgb(250, 250, 250); } .rate-box-with-credit-button { background-color: rgb(77, 77, 77) !important; border-color: rgb(77, 77, 77) !important; } .creditButton p a { border-left-color: rgb(250, 250, 250) !important; } #header h1 { display: flex; justify-content: center; } #header h1 a { display: flex; color: transparent; text-shadow: none; padding: calc(140px / 2) 0; font-size: calc(var(--base-font-size) * 3); font-family: var(--header-font); letter-spacing: normal; position: absolute; width: 100%; } #header h1 a::before, #header h1 a::after { display: flex; content: var(--header-title); position: absolute; width: 100%; align-items: center; justify-content: center; align-content: center; left: 0; top: 0; height: var(--header-height-on-desktop); } #header h2 span { display: none; } @media (max-width: 767px) { #header h1 a { display: flex; padding: calc(140px / 2) 0; } #header h1 a::before, #header h1 a::after { line-height: 1.1; letter-spacing: normal; display: flex; align-items: center; word-break: keep-all; } } @media (max-width: 510px) { #header h1 a::before { content: var(--header-title, "SCP基金会"); font-size: 90%; font-weight: bold; } } @media (max-width: 375px) { #header h1 a::before { font-size: 85%; } #header { max-width: 100%; width: 100%; } } /* ===搜索框的normalize部分=== */ #search-top-box { z-index: inherit; position: inherit; top: inherit; right: inherit; width: inherit; text-align: inherit; } #search-top-box-input { border: inherit; border-radius: inherit; } #search-top-box input.empty { color: inherit; } #search-top-box-input, #search-top-box-input:focus, #search-top-box-input:hover { background-color: inherit; box-shadow: inherit; color: inherit; } #search-top-box-input:focus, #search-top-box-input:hover { border: inherit; } #search-top-box-form input[type=submit] { padding: inherit; border: inherit; border-radius: inherit; background: inherit; background-color: inherit; box-shadow: inherit; color: inherit; font-weight: inherit; font-size: inherit; cursor: inherit; } #search-top-box-form input[type=submit]:focus, #search-top-box-form input[type=submit]:hover { border: inherit; background: inherit; box-shadow: inherit; color: inherit; text-shadow: inherit; } #login-status { z-index: inherit; position: inherit; top: inherit; right: inherit; overflow: inherit; color: inherit; font-size: inherit; } #account-topbutton, #login-status a, #login-status ul a { background: inherit; color: inherit; } #login-status>a>strong { -webkit-animation-name: inherit; -webkit-animation-duration: inherit; -webkit-animation-timing-function: inherit; -webkit-animation-iteration-count: inherit; text-decoration: inherit; } /* ===用户和搜索栏=== */ #search-top-box { display: flex; z-index: 12; position: absolute; top: 1.5em; right: calc(3% - .25em); align-items: center; justify-content: center; width: auto; height: calc(0.9375rem * 1.8); transform: translateY(-50%); font-size: calc(0.9375rem * .86667); } #search-top-box, #search-top-box * { box-sizing: border-box; margin: 0; padding: 0; border: none; transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), font-variation-settings .2s cubic-bezier(.4, 0, .2, 1), font-weight .2s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), right .2s cubic-bezier(.4, 0, .2, 1), width .6s cubic-bezier(.4, 0, .2, 1), padding .6s cubic-bezier(.4, 0, .2, 1), max-width .6s cubic-bezier(.4, 0, .2, 1); will-change: box-shadow, font-variation-settings, font-weight, background-color, color, right, width, padding, max-width; } #search-top-box:focus-within, #search-top-box:focus-within *, #search-top-box:focus-within :after, #search-top-box:focus-within :before { margin: 0; padding: 0; transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), font-variation-settings .2s cubic-bezier(.4, 0, .2, 1), font-weight .2s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), right .2s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1), padding .3s cubic-bezier(.4, 0, .2, 1), max-width .3s cubic-bezier(.4, 0, .2, 1); will-change: box-shadow, font-variation-settings, font-weight, background-color, color, right, width, padding, max-width; } #search-top-box:focus-within { background: rgba(var(--dark-gray-monochrome), .7); box-shadow: calc(calc(0.9375rem * 1.8) / 2 * -1) 0 calc(calc(0.9375rem * 1.8) / 2) rgba(var(--dark-gray-monochrome)); } #search-top-box:after, #search-top-box:before { position: absolute; top: 0; right: 0; width: calc(0.9375rem * 1.8); height: 100%; content: " "; } #search-top-box:before { -webkit-mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-image: var(--search-top-box-mask); z-index: 14; background-color: rgb(var(--bright-accent)); color: rgb(var(--dark-gray-monochrome)); text-align: center; cursor: pointer; mask-image: var(--search-top-box-mask); mask-position: center center; mask-repeat: no-repeat; mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2); pointer-events: none; } #search-top-box:not(:focus-within):hover:before { background-color: rgb(var(--bright-accent)); } #search-top-box:focus-within:before { background-color: rgb(var(--bright-accent)); } #search-top-box:after { --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: var(--clip-path); z-index: 13; clip-path: var(--clip-path); pointer-events: none; } #search-top-box:not(:focus-within):after { --clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); background-color: rgb(var(--bright-accent), 0); } #search-top-box form[id=search-top-box-form] { display: flex; visibility: visible; position: relative; right: 0; max-width: 100%; height: calc(0.9375rem * 1.8); } #search-top-box form[id=search-top-box-form]:not(:focus-within) { max-width: calc(0.9375rem * 15); } #search-top-box form[id=search-top-box-form] input { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; top: 0; } #search-top-box form[id=search-top-box-form] input[type=text] { z-index: 13; position: absolute; right: 0; width: calc(0.9375rem * 15); max-width: calc(0.9375rem * 15); height: 100%; padding: 0 calc(0.9375rem * 1.8) 0 1em; outline: 0 solid rgb(var(--bright-accent)); background-color: rgb(var(--dark-gray-monochrome), .7); box-shadow: 0 0 0 .125rem rgb(var(--bright-accent)); color: rgba(var(--bright-accent)); } #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text] { max-width: calc(0.9375rem * 1.8); padding: 0; outline-width: 0; background-color: rgba(var(--dark-gray-monochrome), 0); box-shadow: 0 0 0 0 rgb(var(--bright-accent)); color: rgba(0, 0, 0, 0); cursor: pointer; } #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text]:hover { background-color: rgba(var(--dark-gray-monochrome), 1); } #search-top-box form[id=search-top-box-form] input[type=submit] { visibility: visible; z-index: 14; position: absolute; right: 0; width: calc(0.9375rem * 1.8); height: calc(0.9375rem * 1.8); outline: 0 solid rgb(var(--bright-accent)); background-color: transparent; box-shadow: 0 0 0 .125rem rgb(var(--bright-accent)); color: transparent; font-size: calc(0.9375rem * .86667); cursor: pointer; pointer-events: all; } #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=submit] { box-shadow: 0 0 0 0 rgb(var(--bright-accent)); pointer-events: none; } #login-status { --wght: var(--ui-wght); display: flex; z-index: 11; position: absolute; top: 1.5em; right: calc(3% + calc(0.9375rem * 1.8) - .25em); align-items: center; justify-content: center; height: 2em; margin: 0 0 0 .5em; transform: translateY(-50%); color: rgb(var(--bright-accent)); font-weight: var(--wght); font-size: 1em; font-family: var(--UI-font); white-space: nowrap; transition: opacity .2s cubic-bezier(.4, 0, .2, 1); } #search-top-box:focus-within~#login-status { opacity: 0; } #login-status span.printuser a:first-of-type { width: 1.75em; } #login-status:not(.page-rate-widget-box):not(#search-top-box-form)>a.login-status-create-account, #login-status:not(.page-rate-widget-box):not(#search-top-box-form)>a.login-status-sign-in { margin: 0 1em; background-color: rgb(var(--pale-gray-monochrome)); color: rgb(var(--dark-gray-monochrome)); padding: 0.1em 1em; text-decoration: none; } #login-status:not(.page-rate-widget-box):not(#search-top-box-form)>a.login-status-create-account:active, #login-status:not(.page-rate-widget-box):not(#search-top-box-form)>a.login-status-create-account:hover, #login-status:not(.page-rate-widget-box):not(#search-top-box-form)>a.login-status-sign-in:active, #login-status:not(.page-rate-widget-box):not(#search-top-box-form)>a.login-status-sign-in:hover, #login-status:not(.page-rate-widget-box):not(#search-top-box-form)>a.login-status-create-account:focus-within, #login-status:not(.page-rate-widget-box):not(#search-top-box-form)>a.login-status-sign-in:focus-within { background-color: rgba(var(--bright-accent), 1); color: rgb(var(--dark-accent)); text-decoration: none; } #login-status span.printuser { --wght: var(--ui-wght); margin-right: .5em; color: rgb(var(--bright-accent)); font-weight: var(--wght); } #login-status a#my-account, #login-status a[href*="account/messages"] { color: rgb(var(--bright-accent)); } #login-status a#my-account { --wght: var(--ui-wght); -webkit-text-decoration: underline rgb(var(--dark-accent)) .125em; display: flex; align-items: center; padding: 0 .5em; background-color: initial; box-shadow: inset 0 0 0 0 rgb(var(--dark-accent)); font-weight: var(--wght); text-decoration: underline rgb(var(--dark-accent)) .125em; transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), text-decoration .2s cubic-bezier(.4, 0, .2, 1), -webkit-text-decoration .2s cubic-bezier(.4, 0, .2, 1); } #login-status a#my-account:active, #login-status a#my-account:hover { --wght: var(--ui-hvr-wght); -webkit-text-decoration: underline rgb(var(--dark-accent)) 0; box-shadow: inset 0 -2em 0 0 rgb(var(--dark-accent)); color: rgb(var(--bright-accent)); font-weight: var(--wght); text-decoration: underline rgb(var(--dark-accent)) 0; } #login-status a#my-account:focus-within { --wght: var(--ui-hvr-wght); -webkit-text-decoration: underline rgb(var(--dark-accent)) 0; box-shadow: inset 0 -2em 0 0 rgb(var(--dark-accent)); color: rgb(var(--bright-accent)); font-weight: var(--wght); text-decoration: underline rgb(var(--dark-accent)) 0; } #login-status #account-topbutton { --clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%); -webkit-clip-path: var(--clip-path); position: relative; width: var(--account-height); height: var(--account-height); margin: 0; padding: 0; background-color: rgb(var(--bright-accent)); color: transparent; clip-path: var(--clip-path); transition: -webkit-clip-path .1s cubic-bezier(.4, 0, .2, 1); transition: clip-path .1s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .1s cubic-bezier(.4, 0, .2, 1); } #login-status #account-options { display: block !important; z-index: 12; position: absolute; top: 1.5rem; right: 0; width: 10em; margin: .25em 0 0; padding: 0; overflow: hidden; background-image: var(--gradient-header); background-color: rgb(var(--dark-gray-monochrome)); opacity: 0; pointer-events: none; transition: opacity .15s cubic-bezier(.4, 0, .2, 1); } #login-status #account-options:focus-within, #login-status #account-topbutton:active+#account-options, #login-status #account-topbutton:focus+#account-options { opacity: 1; pointer-events: all; } @media (pointer: coarse) { #login-status #account-options:hover, #login-status #account-topbutton:hover+#account-options { opacity: 1; pointer-events: all; } } #login-status #account-options * { margin: 0; padding: 0; } #login-status #account-options ul { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 2em; flex-grow: 1; align-items: center; justify-content: center; font-size: .85em; } #login-status #account-options ul li { position: relative; } #login-status #account-options ul li, #login-status #account-options ul li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } #login-status #account-options a { --box-shadow: rgba(var(--dark-gray-monochrome)); --wght: var(--ui-wght); position: relative; flex-grow: 1; height: 100%; max-height: 2em; padding: 0 .25em; box-shadow: inset 0 0 0 .0625rem var(--dark-gray-monochrome); font-weight: var(--wght); transition: color .15s cubic-bezier(.4, 0, .2, 1), font-weight .15s cubic-bezier(.4, 0, .2, 1), font-variation-settings .15s cubic-bezier(.4, 0, .2, 1); } #login-status #account-options li>a, #login-status #account-options li>a:visited { color: rgb(var(--bright-accent)); } #login-status #account-options li>a:active, #login-status #account-options li>a:hover { --wght: var(--ui-hvr-wght); color: rgb(var(--dark-accent)); font-weight: var(--wght); text-decoration: none; } #login-status #account-options li>a:focus-within { --wght: var(--ui-hvr-wght); color: rgb(var(--dark-accent)); font-weight: var(--wght); text-decoration: none; } #login-status #account-options li>a[href*="/messages"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 100%; font-size: 0; } #login-status #account-options li>a[href*="/messages"]:after { position: absolute; left: 50%; transform: translateX(-50%); content: "Messages"; font-size: calc(0.9375rem * .765); pointer-events: none; } #login-status #account-options li>a:before { --clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); -webkit-clip-path: var(--clip-path); z-index: -1; position: absolute; top: 0; width: 100%; height: 100%; background-color: rgb(var(--bright-accent)); content: " "; clip-path: var(--clip-path); pointer-events: none; transition: -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1); transition: clip-path .2s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1); } #login-status #account-options li>a:active:before, #login-status #account-options li>a:hover:before { --clip-path: polygon(-15% 0, 115% 0, 100% 100%, 0 100%); } #login-status #account-options li>a:focus-within:before { --clip-path: polygon(-15% 0, 115% 0, 100% 100%, 0 100%); } /* ===默认收起用户信息栏和搜索栏=== */ #search-top-box { top: 23px; right: 3%; } #login-status { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; top: 24px; right: calc(3% + calc(0.9375rem * 1.8) + .25em); color: transparent; pointer-events: none; transition: color .2s cubic-bezier(.4, 0, .2, 1); user-select: none; } #login-status:active, #login-status:hover { -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; color: rgb(var(--bright-accent)); pointer-events: all; user-select: auto; } #login-status:focus-within { -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; color: rgb(var(--bright-accent)); pointer-events: all; user-select: auto; } #login-status:active #account-options, #login-status:hover #account-options { pointer-events: all; } #login-status:focus-within #account-options { pointer-events: all; } #login-status> :not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); opacity: 0; transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), text-decoration .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), clip-path .2s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1), -webkit-text-decoration .2s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1); } #login-status:active> :not(#account-topbutton):not([href*="account/messages"]), #login-status:hover> :not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); opacity: 1; } #login-status:focus-within> :not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); opacity: 1; } #login-status #account-topbutton { margin-left: 0; background-color: initial; pointer-events: all; transition: clip-path .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .15s cubic-bezier(.4, 0, .2, 1); } #login-status:hover #account-topbutton { background-color: rgb(var(--bright-accent)); } #login-status:before { -webkit-mask-image: var(--user-account-mask); -webkit-mask-size: calc(calc(0.9375rem * 1.8) - .5em); -webkit-mask-position: center right; -webkit-mask-repeat: no-repeat; z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--bright-accent), 1); content: ""; cursor: pointer; mask-image: var(--user-account-mask); mask-position: center right; mask-repeat: no-repeat; mask-size: calc(calc(0.9375rem * 1.8) - .5em); pointer-events: all; transition: background-color .15s cubic-bezier(.4, 0, .2, 1); } #login-status:hover:before { background-color: rgba(var(--search-icon-hover-color), 1); } #login-status:active:after, #login-status:active:before, #login-status:hover:after, #login-status:hover:before { background-color: rgba(var(--search-icon-hover-bg-color), 0); cursor: auto; pointer-events: none; } #login-status:focus-within:after, #login-status:focus-within:before { background-color: rgba(var(--search-icon-hover-bg-color), 0); cursor: auto; pointer-events: none; } #login-status #account-topbutton { --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: var(--clip-path); background-color: rgba(var(--bright-accent), 0); clip-path: var(--clip-path); } #login-status:active #account-topbutton, #login-status:hover #account-topbutton { --clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%); -webkit-clip-path: var(--clip-path); background-color: rgb(var(--bright-accent)); clip-path: var(--clip-path); } #login-status:focus-within #account-topbutton { --clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%); -webkit-clip-path: var(--clip-path); background-color: rgb(var(--bright-accent)); clip-path: var(--clip-path); } #login-status #account-options { margin: 0; } #login-status a[href*="account/messages"] { color: rgb(var(--bright-accent)); pointer-events: all; } #account-topbutton { border: none; } #account-options { border: none; } .fancyhr hr { filter: grayscale(100%) brightness(0.8); } .fancyborder { border-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Adreamers-theme/greyborder.png) 600 round; border-image-width: 6; } .yui-navset .yui-nav { filter: grayscale(1); } /* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */ #top-bar .open-menu a { position: fixed; top: 0.5em; left: 0.5em; z-index: 5; font-family: 'Nanum Gothic', san-serif; font-size: 30px; font-weight: 700; width: 30px; height: 30px; line-height: 0.9em; text-align: center; border: 0.2em solid #888; background-color: #fff; border-radius: 3em; color: #888; } @media (min-width: 768px) { #top-bar .mobile-top-bar { display: block; } #top-bar .mobile-top-bar li { display: none; } #main-content { max-width: 708px; margin: 0 auto; padding: 0; transition: max-width 0.2s ease-in-out; } #side-bar { display: block; position: fixed; top: 0; left: -21em; width: 17.75em; height: 100%; margin: 0; overflow-y: auto; z-index: 10; padding: 1em 1em 0 1em; background-color: rgba(0,0,0,0.1); transition: left 0.4s ease-in-out; scrollbar-width: thin; } #side-bar:target { left: 0; } #side-bar:focus-within:not(:target) { left: 0; } #side-bar:target .close-menu { display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; margin-left: 19.75em; opacity: 0; z-index: -1; visibility: visible; } #side-bar:not(:target) .close-menu { display: none; } #top-bar .open-menu a:hover { text-decoration: none; } /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */ @supports (-moz-appearance: none) { #top-bar .open-menu a { pointer-events: none; } #side-bar:not(:target) .close-menu { display: block; pointer-events: none; user-select: none; } /* This pseudo-element is meant to overlay the regular sidebar button so the fixed positioning (top, left, right and/or bottom) has to match */ #side-bar .close-menu::before { content: ""; position: fixed; z-index: 5; display: block; top: 0.5em; left: 0.5em; border: 0.2em solid transparent; width: 30px; height: 30px; font-size: 30px; line-height: 0.9em; pointer-events: all; cursor: pointer; } #side-bar:focus-within { left: 0; } #side-bar:focus-within .close-menu::before { pointer-events: none; } } } @media (min-width: 768px) { #main-content { max-width: min(90vw, 53.50rem); } #side-bar { background-color: rgb(105,105,105); } } #header { width: unset; max-width: unset; } #top-bar { max-width: unset; } @media (max-width: 767px) { #side-bar { background-color: white; } } @media (min-width: 768px) { #side-bar { background-color: white; } }