使用方法
这是一个基于当前被放逐者之图书馆 CSS 版式的版式。欲查看基于被放逐者之图书馆经典 CSS 版式的版式,请点击这里。
注意:这是一个基于黑色标记笔的主题版式。若你想使用此版式,你还需要导入黑色标记笔版式。点击这里了解更多。
在你的作品开头添加如下语法以应用此版式:
[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:dustjacket]]
如果你希望让你的页面看起来更接近于被放逐者之图书馆网站的外观,建议使用可折叠侧边栏组件。
主题颜色
示例
可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件(诸如引用块)中,则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
如果将“-----”放入类(class)为“fancyhr”的 div 元素中,则可以显示另一种水平线样式,如下所示:
[[div_ class="fancyhr"]]
-----
[[/div]]
效果如下:
文字内容
[[/div]]
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
此为分页(tab view)。
看,这有更多文字。
多么精巧绝伦。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块
这是 | 表格 |
---|---|
你应该老早 | 就知道怎么 |
做这个了吧 |
正文字体为 Adelle Sans / 微软雅黑。
页眉及标题字体为 Zuijin / 楷体。
等宽字为 Adaptive Mono / 新宋体。
@import url("https://wanderers-library.wdfiles.com/local--code/component%3Adustjacket-theme-typefaces/1"); @import url("https://use.typekit.net/tqr1skr.css"); @import url("https://fastly.jsdelivr.net/gh/Crimone/typefaces@main/fandol-kaiti/FandolKai-Regular.css"); @supports(--css:variables) { :root:lang(cn) { /* S-CSS-P Integration */ --theme-base: "nuscp"; --theme-id: "dustjacket-theme"; --theme-name: "Dustjacket Theme"; /* Header */ --logo-image: url("http://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_logo.png"); --header-title: "被放逐者之图书馆"; --header-subtitle: " "; --diagonal-stripes: unset; /* Typefaces */ --body-font: adelle-sans, 'Lato', '微软雅黑', sans-serif; --header-font: 'zuijinregular', 'Poppins', "FandolKai-Regular", kaiti, sans-serif; --title-font: 'zuijinregular', 'Poppins', "FandolKai-Regular", kaiti, sans-serif; --mono-font: Recursive, adaptive-mono, "PT Mono", "Andale Mono", "Courier New", Courier, NSimSun, monospace; /* Standard Colors */ --pale-gray-monochrome: 178, 210, 180; --light-gray-monochrome: 130, 160, 135; --gray-monochrome: 45, 70, 45; --dark-gray-monochrome: 30, 55, 30; --bright-accent: 255, 219, 90; --medium-accent: 228, 180, 28; --dark-accent: 185, 150, 17; --newpage-color: 221, 102, 17; /* Primary Menu Colors */ --swatch-menubg-hover-color: var(--dark-gray-monochrome); --swatch-menutxt-dark-color: var(--dark-gray-monochrome); --swatch-menutxt-light-color: var(--bright-accent); --swatch-border-color: var(--medium-accent); /* Primary Header Colors */ --swatch-topmenu-border-color: var(--bright-accent); --swatch-topmenu-bg-color: var(--dark-gray-monochrome); /* Link Colors */ --link-color: var(--pale-accent); --rating-module-button-color: var(--bright-accent); --rating-module-text-color: var(--bright-accent); --gradient-sidemenu-header: linear-gradient(10deg, rgba(var(--dark-gray-monochrome), 0.65) 0%, rgba(var(--dark-gray-monochrome), 0.75) 100%); --barColour: rgb(var(--gray-monochrome)); --linkColour: rgb(var(--medium-accent)); } /* HIGHLIGHTING */ ::-moz-selection { background: rgba(var(--bright-accent), 0.5); } ::selection { background: rgba(var(--bright-accent), 0.5); } /* LINKS */ a { color: rgb(var(--swatch-primary-darker)); } a:hover, a:active, a:visited { color: rgb(var(--swatch-primary-darkest)); } /* HEADER */ div#extra-div-1, div#extra-div-2 { position: absolute; display: block; width: 100%; height: 7.5rem; top: 0; left: 0; } div#extra-div-1 { background-image: url("http://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wlheader_bg.png"); background-size: 31.250rem; z-index: -1; mix-blend-mode: hard-light; } div#extra-div-2 { background: var(--gradient-header); background-size: var(--header-background-image-size); background-repeat: repeat; z-index: -2; } #header h1 a { margin-left: 7.75rem; margin-top: 0.6em; font-size: 175%; overflow-wrap: normal; } #header h1 a::before { content: "被放逐者之图书馆"; content: var(--header-title); color: rgb(var(--bright-accent)); text-shadow: inherit; background: url("http://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/goldfoil.png"); background-size: cover; -webkit-background-clip: text; -webkit-text-fill-color: transparent; overflow-wrap: normal; font-family: var(--header-font); } #header h2 { display: none; } /* Search Bar */ #search-top-box-form * { font-family: var(--header-font); font-weight: 600 !important; letter-spacing: 0.05em; } #search-top-box-form { display: inline-flex; justify-content: center; position: absolute; height: 1.3rem; top: 47%; right: 3%; width: auto; text-align: center; justify-items: center; align-content: center; align-items: center; padding-top: 0.4rem !important; } #search-top-box input.empty { color: rgba(var(--swatch-menutxt-light-color), 0.5); } #search-top-box-form > input, #search-top-box-form > input[type="submit"] { min-height: 1.3rem; height: 1.3rem; padding: .25rem; margin: 0; box-sizing: border-box; flex-grow: 1; display: flex; font-weight: 500; } input.button.btn { padding-top: 0.1em !important; } /* Log-In Info */ #login-status { color: rgb(var(--swatch-menubg-light-color)); font-weight: 600; letter-spacing: 0.05em; } #login-status * { font-family: var(--header-font); letter-spacing: 0.05em; } /* TOPBAR */ #top-bar div.top-bar > ul > li > a, #top-bar div.mobile-top-bar > ul > li > a { font-family: var(--header-font); text-transform: uppercase; } #top-bar div.top-bar > ul > li > ul > li > a, #top-bar div.mobile-top-bar > ul > li > ul > li > a { font-weight: 700; color: rgb(var(--swatch-menutxt-dark-color)); } #top-bar div.top-bar > ul > li > ul, #top-bar div.mobile-top-bar > ul > li > ul { background: rgba(var(--pale-gray-monochrome), 0.93); } #top-bar div.top-bar > ul > li > ul > li > ul > li > a:hover, #top-bar div.mobile-top-bar > ul > li > ul > li > ul > li > a:hover { background: transparent; } #top-bar div.top-bar > ul > li > ul > li > a::before, #top-bar div.top-bar > ul > li > ul > li > ul > li > a::before, #top-bar div.top-bar > ul > li > ul > li > a:hover::before { background-color: rgba(var(--bright-accent), 1); } #top-bar > div.mobile-top-bar > div.open-menu > p > a { color: rgb(var(--medium-accent)) !important; } /* SIDEBAR */ /* 中文调整 */ #side-bar { box-shadow: inherit; border-radius: inherit; } #side-bar .side-block { background-color: rgba(0, 0, 0, 0) !important; } #side-bar .heading { font-family: var(--header-font); /* 中文调整 */ width: inherit; margin: inherit; } #side-bar div.menu-item a::before, #side-bar div.menu-item a:hover::before { background-color: rgb(var(--gray-monochrome),0.25); } /* Page-Options */ div#page-options-bottom > a, div#page-options-bottom-2 > a { background-color: rgba(var(--swatch-menubg-dark-color), 1); border: 0.08rem solid rgba(var(--swatch-primary), 1); color: rgba(var(--swatch-primary), 1); font-weight: 700; } div#page-options-bottom > a:hover, div#page-options-bottom > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom-2 > a:active { background-color: rgba(var(--swatch-menubg-light-color), 0.85); border: 0.08rem solid rgba(var(--swatch-primary-darkest),1); color: rgba(var(--swatch-primary), 1); } /* Footer ---这个部分在新黑标下无法正常工作--- #footer { width: calc(100% - 1.25rem); color: rgb(var(--swatch-menubg-dark-color)); } #footer a { color: inherit; } */ /* Page-Tags ---这个部分在新黑标下无法正常工作--- #main-content .page-tags { border-top: 2px solid rgb(var(--dark-accent)); } #main-content .page-tags a { display: inline-block; height: 0.8125rem; line-height: 13px; line-height: 0.8125rem; font-size: 11px; font-size: 0.6875rem; background: rgb(var(--gray-monochrome)); color: rgb(var(--bright-accent)); border-bottom-right-radius: 0.25rem; border-top-right-radius: 0.25rem; margin: 0 0 .5rem .75rem; padding: 0.1875rem 0.3125rem 0.1875rem 0; } #main-content .page-tags a:before { top: -0.1875rem; left: -0.625rem; width: 0; height: 0; border-color: transparent rgb(48, 48, 52) transparent transparent; border-color: transparent rgb(var(--gray-monochrome, 45, 70, 45)) transparent transparent; border-style: solid; border-width: 0.5rem 0.5rem 0.5rem 0; padding: 0 0.0625rem 0.1875rem; } #main-content .page-tags a:before, #main-content .page-tags a:after { content: ""; float: left; position: relative; } #main-content .page-tags a:after { --box-shadow: rgb(var(--gray-monochrome, 45, 70, 45)); top: 0.28125rem; left: -0.5rem; width: 0.25rem; height: 0.25rem; border-radius: 0.125rem; background-color: rgb(var(--bright-accent, 255, 219, 90)); box-shadow: -0.0625rem -0.0625rem 0.125rem var(--box-shadow); } .page-tags span { border-top: .5rem solid transparent; } */ /* Rating and Info Modules */ .page-rate-widget-box, #page-content .rate-box-with-credit-button { background: linear-gradient(to top, rgba(var(--swatch-menubg-dark-color), 1) 0, rgba(var(--swatch-menubg-medium-color), 1) 100%); font-family: var(--header-font); letter-spacing: 0.05em; } .page-rate-widget-box .rate-points, .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a { font-weight: 500; } #page-content .rate-box-with-credit-button > .creditButton > p > a::before { background-color: rgb(var(--rating-module-button-color)); } /* Blockquotes, Horizontal Rules and Special Divs*/ .blockquote, blockquote { background: rgb(var(--pale-gray-monochrome)); border: 3px outset rgb(var(--medium-accent)); } hr { height: .125rem; border: 0; border-top: .063rem solid transparent; background-color: rgba(var(--bright-accent)); background: url("http://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/goldfoil.png"); background-size: cover; } .fancyhr hr { border-top: 2vw solid transparent; background-color: rgba(var(--bright-accent), 0); height: 0; box-sizing: border-box; border-image-source: url("http://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_hr.png"); border-image-repeat: round round; background: none; border-image-slice: 80 500 80 500 fill; border-image-width: 10em 80em 10em 80em; } .fancyborder { box-sizing: border-box; border: 2vw solid rgba(0,0,0,0.5); border-image: url("http://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round; border-image-width: 6; padding: 2vw; } /* footnote by 7happy7 */ span:not([class]):not([style]) > sup.footnoteref:first-child > a.footnoteref:before, sup.footnoteref > a.footnoteref:before { content: "("; } span:not([class]):not([style]) > sup.footnoteref > a.footnoteref:before { content: ","; } /* Adjusts footnote block at bottom to fit the Hand format better, rather than BHL Default */ .footnotes-footer { width: unset; margin: unset; padding: 20px; background-color: #EEF6EE; border: solid 1px #112211; } /* MOBILE ELEMENTS */ @media only screen and (max-width: 768px) { #header h1 a, #header h2 span { margin-left: 7.75rem; margin-top: 0.35em; } #header h1 a { line-height: 1; } #header h2 span { margin-top: calc(3.4rem + var(--offset-from-page-top)); } div#extrac-div-1 { background-image: url("http://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wlheader_bg.png"); background-size: 31.250rem; z-index: 3; } div#extrac-div-1, div#extrac-div-2 { position: absolute; display: block; width: 100%; height: 7.5rem; top: 0; left: 0; } div#extrac-div-3::before { text-shadow: inherit; background: url("http://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/goldfoil.png"); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; content: var(--header-title); font-family: var(--header-font); font-size: 170%; width: 95%; height: 3rem; display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; background-color: transparent; text-align: center; font-weight: 700; } div#extrac-div-3 { display: block; position: static; z-index: 1; background-color: transparent; } div#extrac-div-2 > span { display: flex; top: 0; right: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 3rem; box-sizing: inherit; background: var(--gradient-topmenu-mobile, linear-gradient(to bottom, rgba(var(--swatch-topmenu-border-color), 1) 0, rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem, rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - 0.125rem), rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - 0.125rem), rgba(var(--swatch-topmenu-border-color), 1) 3rem)); background-size: 100% 10.375rem; align-items: center; position: sticky; margin-top: 7.5rem; background-color: transparent; } div#extra-div-2::before { content: " "; width: 100%; height: 100%; } div#extrac-div-2 { position: absolute; width: 100%; height: 100%; pointer-events: none; top: 0; left: 0; z-index: 0; } #search-top-box { width: 12.5rem; } #search-top-box-form { top: 0; right: 0; align-items: initial; } } } /*---- 在新黑标下还原老黑标的显示效果 ----*/ /*---- tags ----*/ #main-content .page-tags a[href^="/system:page-tags/tag/_"] { display: none; } #main-content .page-tags span { justify-content: flex-start; } #main-content .page-tags span a:-webkit-any-link:not([href^="/system:page-tags/tag/_"]) { --wght: 500; display: inline; position: relative; flex-grow: 0; width: -webkit-max-content; width: max-content; height: 1.175em; margin: 0 0 0 0.5125rem; padding: 0.1875rem 0.3125rem 0.1875rem 1rem; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; background: rgb(var(--swatch-menubg-dark-color)); color: rgb(var(--swatch-menutxt-light-color)); font-size: 0.6875rem; line-height: 0.8125rem; text-decoration: none; -webkit-clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%); clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%); } #main-content .page-tags span a:-moz-any-link:not([href^="/system:page-tags/tag/_"]) { --wght: 500; display: inline; position: relative; flex-grow: 0; width: -moz-max-content; width: max-content; height: 1.175em; margin: 0 0 0 0.5125rem; padding: 0.1875rem 0.3125rem 0.1875rem 1rem; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; background: rgb(var(--swatch-menubg-dark-color)); color: rgb(var(--swatch-menutxt-light-color)); font-size: 0.6875rem; line-height: 0.8125rem; text-decoration: none; clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%); } #main-content .page-tags span a:any-link:not([href^="/system:page-tags/tag/_"]) { --wght: 500; display: inline; position: relative; flex-grow: 0; width: -webkit-max-content; width: -moz-max-content; width: max-content; height: 1.175em; margin: 0 0 0 0.5125rem; padding: 0.1875rem 0.3125rem 0.1875rem 1rem; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; background: rgb(var(--swatch-menubg-dark-color)); color: rgb(var(--swatch-menutxt-light-color)); font-size: 0.6875rem; line-height: 0.8125rem; text-decoration: none; -webkit-clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%); clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%); } #main-content .page-tags span a:hover:not([href^="/system:page-tags/tag/_"]), #main-content .page-tags span a:active:not([href^="/system:page-tags/tag/_"]) { color: rgb(var(--swatch-menutxt-dark-color)); } #main-content .page-tags span a:focus-within:not([href^="/system:page-tags/tag/_"]) { color: rgb(var(--swatch-menutxt-dark-color)); } #main-content .page-tags span a:-webkit-any-link:not([href^="/system:page-tags/tag/_"])::after { content: ""; position: absolute; top: 50%; left: 0.5rem; width: 0.25rem; height: 0.25rem; transform: translateY(-50%); border-radius: 50%; background: rgb(var(--swatch-background)); box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(var(--swatch-menubg-dark-color)); } #main-content .page-tags span a:-moz-any-link:not([href^="/system:page-tags/tag/_"])::after { content: ""; position: absolute; top: 50%; left: 0.5rem; width: 0.25rem; height: 0.25rem; transform: translateY(-50%); border-radius: 50%; background: rgb(var(--swatch-background)); box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(var(--swatch-menubg-dark-color)); } #main-content .page-tags span a:any-link:not([href^="/system:page-tags/tag/_"])::after { content: ""; position: absolute; top: 50%; left: 0.5rem; width: 0.25rem; height: 0.25rem; transform: translateY(-50%); border-radius: 50%; background: rgb(var(--swatch-background)); box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(var(--swatch-menubg-dark-color)); } .page-tags span { border-top: .5rem solid transparent; } /*---- 手机端标题位置 ----*/ @media only screen and (max-width: 56.25rem) and (min-width: 768px) { #header h1 a { margin-left: 7.75rem; margin-top: calc(var(--header-height-on-mobile)/2 - 1.345rem); } } @media only screen and (max-width: 768px) { #header h1 a, #header h2 span { margin-left: 7.75rem; margin-top: calc(var(--header-height-on-mobile)/2 - 2.45rem); } } @media only screen and (max-width: 415px) { #header h1 a, #header h2 span { margin-left: 7.75rem; margin-top: calc(var(--header-height-on-mobile)/2 - 2.2rem); font-size: 150%; } } @media only screen and (max-width: 374px) { #header h1 a, #header h2 span { margin-left: 7.75rem; margin-top: calc(var(--header-height-on-mobile)/2 - 1.85rem); font-size: 110%; } } /*---- 页面元素位置调整 ----*/ #search-top-box-form { top: 0; } /*---- 页面内容 ----*/ :root { --hoverblock-header-txt: var(--white-monochrome); --pager-link: var(--medium-accent); --pager-link-hover: var(--white-monochrome); --pager-selected-link: var(--dark-gray-monochrome); --modal-header-txt: var(--white-monochrome); --ui-button-hover-txt: var(--dark-gray-monochrome); } #top-bar { --dropdown-links-color: var(--dark-gray-monochrome); --dropdown-links-hover-color: var(--dark-gray-monochrome); } #main-content { --tabs-selected-txt: var(--dark-gray-monochrome); --tabs-hover-txt: var(--dark-gray-monochrome); --tables-border: var(--gray-monochrome); --tables-header-bg: var(--light-gray-monochrome); --footnotes-footer-bg-color: #EEF6EE; --footnotes-footer-num-color: var(--medium-accent); --ui-icon-color: var(--dark-gray-monochrome); --ui-icon-hover-color: var(--dark-gray-monochrome); --ui-icon-bg: var(--bright-accent); --ui-button-hover-txt: var(--dark-gray-monochrome); --footnotes-footer-colorbar-color: var(--swatch-primary); --footnotes-footer-title-bg-color: var(--swatch-primary); --footnotes-footer-title-text-color: var(--dark-gray-monochrome); --pagetags-title-text: var(--white-monochrome); } #footer { --footer-bg-color: var(--dark-gray-monochrome); } #breadcrumbs a:active, #breadcrumbs a:hover, .pseudocrumbs a:active, .pseudocrumbs a:hover { color: rgb(var(--dark-gray-monochrome)); text-decoration: none } #interwiki, #side-bar { --sidebar-links-hover-text-color: var(--dark-gray-monochrome); } #header { --login-myaccount-hover-color: var(--dark-gray-monochrome); --login-myaccount-underline-color: 0,0,0,0; --login-myaccount-hover-bg-color: var(--bright-accent); --login-arrow-color: var(--search-icon-color); --login-dropdown-text-hover-color: var(--dark-gray-monochrome); --search-icon-focus-bg-color: 0,0,0,0; } div.page-watch-options a { --swatch-text-secondary-color: var(--dark-gray-monochrome); } table.page-history tr:nth-of-type(2) td:not(:nth-of-type(7)):before { --swatch-text-secondary-color: var(--dark-gray-monochrome); } #page-content .rate-box-with-credit-button>.creditButton>p>a:after { background-color: rgba(var(--rating-module-button-cancel-color),1); }