被放逐者的护封 主题版式
评分模块与著作信息模块:
主题颜色
Palm Leaf --gray-monochrome(45, 70, 45)
Golden Yellow --bright-accent(255, 219, 90)
Surf --pale-gray-monochrome(178, 210, 180)
Envy --light-gray-monochrome(130, 160, 135)
Cardin Green --dark-gray-monochrome(30, 55, 30)
Gold Tips --medium-accent(228, 180, 28)
Dark Goldenrod --dark-accent(185, 150, 17)
Mango Tango --newpage-color(221, 102, 17)
使用方法
在你的作品开头添加如下语法以应用此版式:
[[include :scp-wiki-cn:wanderers:dustjacket-theme]]
示例
可通过 5 个连字符“-----”创建水平分割线。若它未被放在其他部件(诸如引用块)中,则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
如果将“-----”放入类(class)为 “fancyhr” 的 div 元素中,则可以显示另一种水平线样式,如下所示:
[[div_ class="fancyhr"]]
-----
[[/div]]
效果如下:
任何元素添加 “fancyborder” 类(class),即可显示特殊边框。例如,这是此方块的代码:
[[div_ class="fancyborder"]]
文字内容
[[/div]]
文字内容
[[/div]]
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建
此为分页(tab view)。
看,这有更多文字。
多么精巧绝伦。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块
这是 | 表格 |
---|---|
你应该老早 | 就知道怎么 |
做这个了吧 |
正文字体为 Skolar Sans / 浏览器默认字体
页眉及标题字体为 Zuijin / 王汉宗魏碑体。
等宽字为 Recursive / 仿宋及思源宋体。
/** Wanderers' Dust Jacket Theme * Developed by Woedenaz * Built on Black Highlighter by Woedenaz and Croquembouche * Version: 1.00 * TOC: * !IMPT: Imports * !ROOT: Root Variables * !GLOB: Global * !HEAD: Header * !TOPB: Top Bar * !SIDE: Side Bar * !MAIN: Main Content * !FRMS: Forums * !WDGT: Page Widgets * !MOBL: Mobile Coding * !MHDR: Mobile Header * !MSRC: Mobile Search Bar * !MTPB: Mobile Top Bar * !MSDB: Mobile Side Bar * !MOMN: Mobile Main Content * !MOMN: Mobile Page Widgets * !KFMS: Animation Keyframess * ***************************************************************************/ /* Imports (!IMPT) ==============================================================================*/ /* 黑标 */ @import url("https://bhl.scpwikicn.com/css/min/normalize.min.css"); @import url('https://fastly.jsdelivr.net/gh/Crimone/crimson-anemone@2.3.14/black-highlighter.min.css'); /* 英文字体 */ /* 中文字体自带英文样式时则不必再度引用 */ @import url("https://wanderers-library.wikidot.com/component:dustjacket-theme-typefaces/code/1"); @import url("https://fonts.googleapis.com/css2?family=Texturina:ital,wght@0,100..900;1,100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap"); /* 中文字体 */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap'); @import url("https://crimone.github.io/typefaces/whz/whz.css"); /* 中文调整 ==============================================================================*/ :root:lang(cn){ --header-title: "被放逐者之图书馆"; --body-font: Texturina, Optima, Segoe, Segoe UI, Candara, Calibri, Arial, 'Noto Sans SC', sans-serif; --header-font: 'HanWang WeiBeiMedium-Gb5', 'Ma Shan Zheng', '华文隶书', 'lisu', 'Noto Serif SC', zuijinregular, Big Caslon, Book Antiqua, Palatino Linotype, Georgia, serif; --title-font: 'HanWang WeiBeiMedium-Gb5', 'Ma Shan Zheng', '华文隶书', 'lisu', 'Noto Serif SC', "EB Garamond", Big Caslon, Book Antiqua, Palatino Linotype, 'Noto Serif SC', Georgia, serif; --UI-font: "EB Garamond", Big Caslon, Book Antiqua, Palatino Linotype, 'Noto Serif SC', Georgia, serif; --mono-font: Recursive, Consolas, monaco, '仿宋', 'Noto Serif SC', monospace; } /* 版头字体粗时用这个 #container #header h1 a::before, #container #header h1 a::after { --wght: 500 ; } */ /* Root Variables (!ROOT) ==============================================================================*/ :root { /* S-CSS-P Integration */ /* If you're making a new CSS theme, please include the following three variables at minimum. */ --theme-base: "nuscp"; /* must be either "nuscp" or "sigma9" */ --theme-id: "nuWL-theme"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "Wanderers' Library Theme"; /* set this to your theme's full name */ /* Header */ --logo-image: url("https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wl_logo.png"); --header-title: "被放逐者之图书馆"; --header-subtitle: " "; /* Typefaces */ --body-font: Texturina, Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif; --header-font: zuijinregular, Big Caslon, Book Antiqua, Palatino Linotype, Georgia, serif; --title-font: "EB Garamond", Big Caslon, Book Antiqua, Palatino Linotype, 'Noto Serif SC', Georgia, serif; --UI-font: "EB Garamond", Big Caslon, Book Antiqua, Palatino Linotype, 'Noto Serif SC', Georgia, serif; --mono-font: Recursive, Consolas, monaco, monospace; --header-h1-font-size: calc(var(--base-font-size) * 3); /* ===VARIABLE FONT SETTINGS=== */ /* SETTING | ============== Weight for UI | UI: 100 - 700 */ --ui-wght: 600; /* SETTING | ============== Hover Weight for UI | UI: 100 - 700 */ --ui-hvr-wght: 600; /* ===VARIABLE FONT SETTINGS=== */ /* ===VARIABLE MONO FONT SETTINGS=== */ --MONO: 0; --CASL: 1; --CRSV: 1; /* ===STANDARD THEME COLORS=== */ --white-monochrome: 252, 252, 252; --pale-gray-monochrome: 173, 193, 177; --light-pale-gray-monochrome: 255, 250, 215; /* v light green for blockquotes and stuff */ --very-light-gray-monochrome: 220, 230, 220; --light-gray-monochrome: 130, 160, 135; /* light accent green for login status */ --gray-monochrome: 45, 70, 45; /* green */ --dark-gray-monochrome: 30, 55, 30; /* dark green gray for sidebar background */ --black-monochrome: 12, 12, 12; /* black */ --bright-accent: 255, 219, 90; /* bright yellow */ --medium-accent: 228, 180, 28; /* medium yellow */ --dark-accent: var(--dark-gray-monochrome); /* dark yellow */ --alt-accent: 221, 102, 17; /* pale orange */ /* ===PRIMARY COLORS=== */ /* ===GENERAL COLORS=== */ --swatch-primary: var(--bright-accent); --swatch-primary-darker: var(--medium-accent); --swatch-primary-darkest: var(--dark-accent); --swatch-border-color: var(--medium-accent); /* ===GENERAL TEXT COLORS=== */ --swatch-text-dark: var(--black-monochrome); --swatch-text-light: var(--white-monochrome); --swatch-important-text: var(--bright-accent); /* ===BACKGROUND & HEADER COLORS=== */ /* General Background Color */ --swatch-background: var(--white-monochrome); /* Header H1 and H2 colors */ --swatch-headerh1-color: var(--white-monochrome); --swatch-headerh2-color: var(--white-monochrome); /* ===MENU COLORS=== */ /* ===MENU BACKGROUND COLORS=== */ --swatch-menubg-color: var(--dark-gray-monochrome); /* ===MENU TEXT COLORS=== */ --swatch-menutxt-dark-color: var(--dark-gray-monochrome); --swatch-menutxt-light-color: var(--bright-accent); /* ===TOPBAR MENU BACKGROUND COLORS=== */ /* Colors used in the --gradient-topmenu var to give the topbar its color */ --swatch-topmenu-bg-color: var(--dark-gray-monochrome); --swatch-topmenu-border-color: var(--bright-accent); /* ===LINK COLORS=== */ --link-color: var(--medium-accent); --visited-link-color: var(--medium-accent); --hover-link-color: var(--dark-gray-monochrome); /* ===RATING MODULE COLORS=== */ --rating-module-text-color: var(--bright-accent); --rating-module-button-info-color: var(--light-gray-monochrome); /* ===PRIMARY GRADIENTS=== */ /* Creates the header image at top of page */ --gradient-header: url("https://wanderers-library.wdfiles.com/local--files/component%3Atheme/wl-headerbg.png"); /* Diagonal Strikes placed on top of header image */ --diagonal-stripes: unset; /* ===STRUCTURAL SPACING ELEMENTS=== */ /* ===HEADER MEASUREMENTS=== */ --header-height-on-desktop: 10rem; --header-height-on-mobile: 7.5rem; /* ===TOPBAR MEASUREMENTS=== */ --topbar-height-on-desktop: 1.625rem; --body-width-on-desktop: 61.250rem; } #header { /* ===SEARCH ELEMENT=== */ --search-icon-hover-color: var(--swatch-menubg-dark-color); --search-icon-focus-color: var(--swatch-menubg-dark-color); /* ===LOGIN BOX ELEMENT=== */ --login-dropdown-text-hover-color: var(--swatch-menutxt-dark-color); } #top-bar { /* ===TOPBAR ELEMENTS=== */ --dropdown-links-hover-color: var(--swatch-text-tertiary-color); } #side-bar { /* ===SIDE-BAR ELEMENTS=== */ --sidebar-links-text: var(--swatch-menutxt-light-color); --sidebar-links-hover-text-color: var(--swatch-text-tertiary-color); } /* ===PAGE ELEMENTS COLORS=== */ /* Colors for Buttons, Tabs, Tables, & Footnotes Hover/Modal */ #main-content { /* ===UI ICONS=== */ /* ===PAGE OPTIONS ICONS=== */ --ui-icon-color: var(--swatch-text-tertiary-color); --ui-icon-hover-color: var(--swatch-text-tertiary-color); /* ===TEXT EDITOR ICONS=== */ --editor-icon-hover-color: var(--swatch-text-tertiary-color); /* ===TABS=== */ --tabs-hover-txt: var(--swatch-text-tertiary-color); --tabs-selected-txt: var(--swatch-text-tertiary-color); /* ===PAGE TAGS=== */ --pagetags-text-hover-color: var(--swatch-text-tertiary-color); } /* ===GLOBAL ELEMENTS=== */ :root { /* ===UI BUTTONS=== */ --ui-button-hover-txt: var(--swatch-text-tertiary-color); /* ===RATING MODULE=== */ --rating-module-bottom-border-color: 0,0,0,0; /* ===MODALS COLORS=== */ --modal-bg: var(--swatch-background); /* h1/h2/h3/h4/h5/h6 */ --modal-body-header-txt: var(--swatch-primary-darkest); --modal-header-bg: var(--swatch-primary-darkest); --modal-header-txt: var(--swatch-primary); --modal-header-stripe: var(--light-gray-monochrome); /* ===FOOTNOTES HOVER BLOCK COLORS=== */ --hoverblock-bg: var(--swatch-primary-darkest); --hoverblock-txt: var(--swatch-text-secondary-color); --hoverblock-header-bg: var(--swatch-primary); --hoverblock-header-txt: var(--swatch-text-tertiary-color); /* ===LISTPAGES PAGER=== */ --pager-text: var(--swatch-text-general); --pager-link-hover: var(--swatch-text-tertiary-color); --pager-hover-bg: var(--swatch-primary-darker); --pager-selected-link: var(--swatch-text-tertiary-color); } /* Global (!GLOB) ==============================================================================*/ ::-moz-selection { background: rgba(255, 219, 90, 0.5); background: rgba(var(--bright-accent), 0.5); text-shadow: none; } ::selection { background: rgba(255, 219, 90, 0.5); background: rgba(var(--bright-accent), 0.5); text-shadow: none; } @supports (font-variation-settings: inherit) { *, *::before, *::after { font-variation-settings: "wght" var(--wght, 300), "ital" var(--ital, 0), "slnt" var(--slnt, 0), "CASL" var(--CASL, 0), "CRSV" var(--CRSV, 0), "MONO" var(--MONO, 0), "FLAR" var(--FLAR, 0); } } hr { height: .125rem; border: 0; border-top: 0.0625rem solid transparent; background: url(https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/goldfoil.png); background-color: rgba(255, 219, 90); background-color: rgba(var(--bright-accent)); background-size: cover; } #page-title, .meta-title { --wght: 900; font-weight: var(--wght); } #page-title::before, .meta-title::before, #page-title::after, .meta-title::after { background-color: rgb(var(--swatch-primary)); background-image: url("https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/goldfoil.png"); } #page-title::before, .meta-title::before { content: ""; flex-grow: 1; height: 0.0625rem; } #page-title::before, .meta-title::before { margin: auto 1.25rem auto auto; } h1, h2, h3, h4, h5, h6 { --wght: 600; } textarea { letter-spacing: 0.02em; } /* Header (!HEAD) ==============================================================================*/ #header { /* ===HEADER ELEMENTS=== */ /* ===SEARCH ELEMENT=== */ --search-icon-hover-bg-color: var(--swatch-primary); /* Focus is when the search box has been clicked on */ --search-focus-textbox-text-color: var(--swatch-text-tertiary-color); } div#extra-div-1 { display: block; position: absolute; top: 0; left: 0; width: 100%; height: var(--header-height-on-desktop); } div#extra-div-1 { z-index: -2; background: linear-gradient(to bottom, rgba(30, 55, 30, 1) 0%, rgba(30, 55, 30, 1) 30%, rgba(255, 219, 90, 1) 100%); background: var(--gradient-header); background-repeat: repeat; background-size: var(--header-background-image-size); } #header { position: -webkit-sticky; position: sticky; top: calc((var(--header-height-on-desktop) + 0.125rem) * -1); background-image: initial; -webkit-filter: inherit; filter: inherit; } #header::before { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: var(--header-height-on-desktop); opacity: 0.75; background-image: var(--logo-image); background-repeat: no-repeat; background-position: center center; background-size: auto 8rem; pointer-events: none; } #header h1, #header h1 a, #header h1 a::before, #header h1 a::after { --wght: 700; display: flex; position: absolute; z-index: 0; top: 0; left: 0; align-items: center; justify-content: center; width: 100%; height: var(--header-height-on-desktop); max-height: inherit; margin: 0; padding: 0; } #header h1 a, #header h1 a::before, #header h1 a::after { color: rgb(var(--swatch-headerh1-color)); line-height: 0.8; text-align: center; overflow-wrap: normal; } #header h1 a::before, #header h1 a::after { content: "被放逐者之图书馆"; content: var(--header-title); } @media not all and (-webkit-min-device-pixel-ratio:0), not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { #header h1 a::after { display: -webkit-box !important; } } } #header h1 a::after { background: url(https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/goldfoil.png); -webkit-background-clip: text; background-clip: text; background-size: cover; -webkit-text-fill-color: transparent; } #header h1 a::before { text-shadow: rgba(var(--dark-gray-monochrome), 0.5) 0.125rem 0rem 0, rgba(var(--gray-monochrome), 0.5) 0.0675rem 0.1052rem 0, rgba(var(--gray-monochrome), 0.5) -0.052rem 0.1137rem 0, rgba(var(--dark-gray-monochrome), 0.5) -0.1237rem 0.0176rem 0, rgba(var(--dark-gray-monochrome), 0.5) -0.0817rem -0.0946rem 0, rgba(var(--dark-gray-monochrome), 0.5) 0.0355rem -0.1199rem 0, rgba(var(--dark-gray-monochrome), 0.5) 0.12rem -0.0349rem 0; } #header > h1>a > span { top: 0; left: 0; width: 100%; max-width: inherit; height: var(--header-height-on-desktop); } #header h2 { display: none; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { color: rgba(0, 0, 0, 0); } @media (min-width: 56.25rem) { #login-status { flex-grow: 1; left: 3%; right: initial; } #login-status #my-account { --wght: 300; } #account-options { background: var(--gradient-header); } #search-top-box { background: rgba(var(--search-focus-textbox-bg-color), 0.4); box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4); } #search-top-box::after { transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); } #search-top-box:not(:focus-within)::after { background-color: rgba(var(--search-icon-bg-color, --dark-accent),1); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } #search-top-box:not(:focus-within):hover::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgb(var(--search-icon-hover-bg-color)); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) { max-width: var(--search-width); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { max-width: var(--search-width); padding: 0 var(--search-height) 0 1em; outline-width: 0; background-color: rgb(var(--search-focus-textbox-bg-color), 0.35); color: rgba(var(--swatch-menutxt-light-color), 0.4); cursor: pointer; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"], #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] { pointer-events: all; border: none; } } /* Top Bar (!TOPB) ==============================================================================*/ /* Sticky Top-Bar BG */ div#extrac-div-1 { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } div#extrac-div-1 span { display: flex; position: -webkit-sticky; position: sticky; top: calc(-1 * (var(--header-height-on-desktop) + 0.125rem)); right: 0; left: 0; box-sizing: inherit; align-items: center; width: 100%; height: var(--final-header-height-on-desktop); margin: 0; margin-top: 0; padding: 0; background: var(--gradient-topmenu); background-size: 100% var(--final-header-height-on-desktop); } #top-bar br { display: none; } #header div[class*="top-bar"] li a { transition: font-weight 300ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 300ms cubic-bezier(0.4, 0, 0.2, 1); } /* Hiding Random Anchor Link Prior to New Page Module Will need to change :nth-child if position ever moves.*/ #top-bar > div.top-bar > ul > li.newpage > ul:first-of-type > li:first-of-type > a, #top-bar > div.mobile-top-bar > ul > li.newpage > ul:first-of-type > li:first-of-type > a { display: none; } /* New Page Dropdown Form Box Styling */ #top-bar > div.top-bar > ul > li.newpage > ul:first-of-type, #top-bar > div.top-bar > ul > li.newpage > ul:first-of-type > li:first-of-type { height: auto; } #top-bar > div.top-bar > ul > li.newpage > ul:first-of-type > li:first-of-type:hover { background: transparent; } #top-bar div.top-bar div.newpage_dropdown { display: flex; box-sizing: content-box; width: 100%; margin: 0; padding: 0; } #top-bar div.top-bar div.newpage_dropdown>.new-page-box { width: 100%; height: 70%; } #top-bar div.top-bar div.newpage_dropdown div.new-page-box form, #top-bar div.mobile-top-bar div.newpage_dropdown div.new-page-box form { flex-direction: column; padding: 0 1rem; } #top-bar div.top-bar div.newpage_dropdown div.new-page-box form, #top-bar div.mobile-top-bar div.newpage_dropdown div.new-page-box form, #top-bar div.top-bar div.newpage_dropdown div.new-page-box input { display: flex; align-items: center; justify-content: center; } #top-bar div.top-bar div.newpage_dropdown div.new-page-box input { box-sizing: border-box; width: 100%; margin: 0 !important; padding: 0.25rem; background-color: rgba(30, 55, 30); background-color: rgba(var(--swatch-topmenu-bg-color)); color: rgba(255, 219, 90); color: rgba(var(--swatch-menutxt-light-color)); font-family: 'zuijinregular', 'Poppins', sans-serif; font-family: var(--header-font); font-size: calc(var(--base-font-size)*1.1); } #top-bar div.top-bar div.newpage_dropdown div.new-page-box input.text { height: 2rem !important; margin-bottom: -0.0625rem !important; background-color: rgba(30, 55, 30, 0.25); background-color: rgba(var(--swatch-menubg-dark-color), 0.25); } #top-bar div.top-bar div.newpage_dropdown div.new-page-box input.button { border: unset !important; } #top-bar div.top-bar div.newpage_dropdown div.new-page-box input.button:hover { background: rgba(252, 252, 252, 0.15); background: rgba(var(--swatch-menubg-color), 0.15); cursor: pointer; } /* Side Bar (!SIDE) ==============================================================================*/ #side-bar { background: rgba(var(--swatch-menubg-dark-color), 1); padding-left: 0; } .side-block div:nth-of-type(1) form { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 0.6rem 1rem; } .side-block div:nth-of-type(1) input.button, .side-block div:nth-of-type(1) input.text { width: 100%; margin: 0 !important; padding: 0.25rem; background-color: rgba(30, 55, 30); background-color: rgba(var(--swatch-topmenu-bg-color)); color: rgba(255, 219, 90); color: rgba(var(--swatch-menutxt-light-color)); font-family: 'zuijinregular', 'Poppins', sans-serif; font-family: var(--header-font); font-size: calc(var(--base-font-size)*1.1); } #side-bar div.menu-item input.text { height: 3rem !important; margin-bottom: -0.0625rem !important; background-color: rgba(30, 55, 30, 0.25) !important; background-color: rgba(var(--swatch-topmenu-bg-color), 0.25) !important; font-family: adelle-sans, 'Lato', sans-serif; font-family: var(--body-font); cursor: text; } .side-block div:nth-of-type(1) input.button { justify-content: center; margin-top: 0.25rem; padding: 0.25rem; transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1); border: 0.125rem solid rgba(255, 219, 90, 1); border: 0.125rem solid rgba(var(--swatch-primary), 1); border-radius: .25rem; background-color: rgba(30, 55, 30, 1); background-color: rgba(var(--swatch-menubg-dark-color), 1); color: rgba(var(--swatch-primary), 1); font-family: var(--title-font); cursor: pointer; will-change: background-color, color; } .side-block div:nth-of-type(1) input.button:hover, .side-block div:nth-of-type(1) input.button:active { background-color: rgba(255, 219, 90, 1); background-color: rgba(var(--swatch-primary), 1); color: rgba(30, 55, 30, 1); color: rgba(var(--swatch-menubg-dark-color), 1); } #side-bar .heading, #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded { display: flex; align-items: flex-end; justify-content: center; min-height: 2rem; box-shadow: 0 0.125rem 0 0 rgb(var(--swatch-primary-darker)); font-family: var(--title-font); letter-spacing: 0.1em; text-transform: uppercase; } #side-bar .heading p, #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded p { font-size: 1.1em; letter-spacing: 0; text-align: center; text-shadow: 0.0625rem 0.0625rem 0.0625rem rgba(var(--swatch-border-color), 0); } #side-bar div.menu-item { height: auto; } #side-bar div.menu-item .text, #side-bar div.menu-item a { box-shadow: inset 0 0.0625rem 0 0 rgb(var(--swatch-primary-darkest)); } #side-bar .heading+#side-bar div.menu-item .text, #side-bar .heading+#side-bar div.menu-item a { box-shadow: initial; } #side-bar div.menu-item .text, #side-bar div.menu-item a { padding: 0.125em 0; font-size: calc(var(--base-font-size) * 1.2); text-indent: 0.5em; } #side-bar div.sub-item .text, #side-bar div.sub-item a { font-size: calc(var(--base-font-size) * 1); text-indent: 2em; } #side-bar div.sub-item .text::after, #side-bar div.sub-item a::after { content: "\0021b3"; display: flex; position: absolute; top: 0; left: 0; align-items: center; justify-content: center; width: 1em; height: 100%; color: rgb(var(--swatch-menubg-light-color)) } #side-bar div.sub-item a:hover::after, #side-bar div.sub-item a:active::after { color: rgb(var(--sidebar-links-hover-text-color)); } #side-bar div.sub-item a:focus-within::after { color: rgb(var(--sidebar-links-hover-text-color)); } /* Undo SCP-Styling */ #side-bar div.menu-item a[href*="/scp-"] { width: initial; padding: 0.125em 0; text-align: initial; } /* TOGGLE SIDEBAR */ @media only screen and (min-width: 56.25rem) { #side-bar .close-menu { display: block; position: fixed; top: 0.25rem; left: 0.5rem; width: 3rem; opacity: 1; pointer-events: all; } #side-bar .close-menu::before, #side-bar .close-menu::after { content: ""; display: block; position: fixed; top: 0.25rem; left: 0.5rem; box-sizing: border-box; width: 3rem; height: 3rem; margin: 0; padding: 0; transition: opacity var(--sidebar-transition-timing); text-align: center; cursor: pointer; pointer-events: all; } #side-bar .close-menu::before { --mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg height='32px' id='Layer_1' style='enable-background:new 0 0 32 32;' version='1.1' viewBox='0 0 32 32' width='32px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z'/%3E%3C/svg%3E"); z-index: -1; background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important; -webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: 60%; mask-size: 60%; } #side-bar .close-menu::after { z-index: -2; border: var(--toggle-border-color, rgb(var(--swatch-border-color))) var(--toggle-border-width, 0.25rem) solid; border-radius: var(--toggle-roundness, 50%); background-color: var(--toggle-button-bg, rgb(var(--swatch-menubg-color))) !important; } #side-bar:focus-within .close-menu { pointer-events: none; } #side-bar:focus-within .close-menu::before, #side-bar:focus-within .close-menu::after { opacity: 0; } #side-bar { display: block; position: fixed; z-index: 10; top: 0; left: calc(var(--sidebar-width-on-desktop)*-1); height: 100%; margin-top: 0; overflow-x: hidden; overflow-y: auto; transition: left var(--sidebar-transition-timing); } #side-bar:focus-within { left: 0; } #side-bar .side-block { margin-top: 1rem; overflow: visible; border-right-width: 0rem; border-left-width: 0rem; border-radius: 0; background-color: rgb(0, 0, 0, 0); } #main-content::before { content: ""; display: block; position: fixed; z-index: -1; z-index: 99; top: 0; right: 0; width: 100%; height: 100vh; margin-left: var(--sidebar-width-on-desktop); padding-right: 0; transition: opacity var(--sidebar-transition-timing), width var(--sidebar-transition-timing); opacity: 0; background: rgba(var(--swatch-menubg-black-color), .3) 0.0625rem 0.0625rem repeat; pointer-events: none; } #side-bar:focus-within~#main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } #main-content { position: initial; width: 100%; width: var(--body-width-on-desktop); max-width: var(--body-width-on-desktop); max-height: 100%; margin: 0 auto; padding: 2rem 1rem; } @media not all and (-webkit-min-device-pixel-ratio:0), not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { #side-bar { position: fixed; z-index: 999; padding-right: 0; overflow-x: visible; overflow-y: visible; transition: left var(--sidebar-transition-timing), background-color var(--sidebar-transition-timing); background: rgba(var(--swatch-menubg-light-color), 0); pointer-events: all; } #side-bar::-webkit-scrollbar { -webkit-transition: opacity var(--sidebar-transition-timing); transition: opacity var(--sidebar-transition-timing); opacity: 0; } #side-bar .close-menu::before { z-index: 999; } #side-bar .close-menu::after { z-index: 998; } #side-bar:hover .close-menu::before { opacity: 0; } #side-bar:hover { left: 0; padding-right: 0; background: rgba(var(--swatch-menubg-light-color), 1); } #side-bar:hover::-webkit-scrollbar { opacity: 1; } #side-bar:hover .close-menu::before, #side-bar:hover .close-menu::after { opacity: 0; } #side-bar:hover~#main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } } } } /* Main Content (!MAIN) ==============================================================================*/ html, body { scrollbar-color: rgb(var(--medium-accent)) rgb(var(--dark-gray-monochrome)); } ::-webkit-scrollbar, #side-bar:hover::-webkit-scrollbar { background-color: rgb(var(--dark-gray-monochrome)); } ::-webkit-scrollbar-thumb, #side-bar:hover::-webkit-scrollbar-thumb { background-color: rgb(var(--medium-accent)); } /* ACTUALLY HIDE HIDDEN TAGS */ #main-content .page-tags a[href^="/system:page-tags/tag/_"] { display: none; } div#page-title, .meta-title { text-align: center; } /* Centered Main Content */ @media only screen and (min-width: 56.25rem) { #main-content { position: initial; width: 100%; max-height: 100%; margin: 0 auto; padding: 2rem 1rem; } } #content-wrap { grid-template-areas: "content content content"; grid-template-columns: 1fr; } #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-content { --MONO: 1; --CRSV: 0; --CASL: 0; } .page-tags span { border-top: .5rem solid transparent; } #breadcrumbs { margin: -1em 0 1em; font-weight: 85%; } blockquote, .blockquote, div.blockquote, [class*="blockquote"] { border: 0.1875rem outset rgb(var(--medium-accent)); background-color: rgb(var(--very-light-gray-monochrome)); } div.page-watch-options a:hover, div.page-watch-options a:active { color: rgb(var(--hover-link-color)); } div.page-watch-options a:focus-within { color: rgb(var(--hover-link-color)); } /* Forums (!FRMS) ==============================================================================*/ .forum-thread-box .description-block { border: 0.125rem solid rgb(228, 180, 28); border: 0.125rem solid rgb(var(--swatch-primary-darker)); background: url("https://wanderers-library.wikidot.com/local--files/component:theme/wlheader_bg.png"), rgba(var(--pale-gray-monochrome), 1); background-size: cover; box-shadow: inherit; font-size: 110%; font-weight: 700; } @supports (background-blend-mode: screen) { .forum-thread-box .description-block { background-blend-mode: screen; } } .thread-container .post .long { border: 0.0625rem solid rgba(228, 180, 28, 0.5); border: 0.0625rem solid rgba(var(--swatch-primary-darker), 0.5); } div.post-container div.post-container { padding-left: 0.5rem; border-left: 0.25rem double rgb(228, 180, 28); border-left: 0.25rem double rgb(var(--swatch-primary-darker)); } /* Page Widgets (!WDGT) ==============================================================================*/ /* Buttons & User Input */ div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn { box-shadow: inset 2em 0 0 0 rgb(var(--bright-accent)); } :not(.page-rate-widget-box):not(#search-top-box-form) > .owindow .button-bar a, :not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input, :not(.page-rate-widget-box):not(#search-top-box-form) > input.button, :not(.page-rate-widget-box):not(#search-top-box-form) > button, :not(.page-rate-widget-box):not(#search-top-box-form) > .button, :not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input, :not(.page-rate-widget-box):not(#search-top-box-form) > input.button, :not(.page-rate-widget-box):not(#search-top-box-form) > button, :not(.page-rate-widget-box):not(#search-top-box-form) > .btn { border-radius: 0.5rem; } /* Tabs */ .yui-navset .yui-nav a { --wght: 400; --MONO: 0; } .yui-navset .yui-nav li, .yui-navset .yui-nav li a, .yui-navset .yui-nav li a::before { border-radius: 1rem 1rem 0 0; } /* Tables */ table.wiki-content-table th { border-top-color: rgba(var(--swatch-menutxt-dark-color), 1) !important; border-right-color: rgba(var(--swatch-menutxt-light-color), 1) !important; border-bottom-color: rgba(var(--swatch-menutxt-light-color), 1) !important; border-left-color: rgba(var(--swatch-menutxt-light-color), 1) !important; background: rgb(var(--swatch-menubg-dark-color)); box-shadow: 0 0.125rem 0 0 rgb(var(--swatch-menutxt-light-color)); color: rgb(var(--swatch-menutxt-light-color)); font-family: var(--title-font); font-weight: 400; text-shadow: none; } table.wiki-content-table th:first-of-type { border-left-color: rgba(var(--swatch-menutxt-dark-color), 1) !important; } table.wiki-content-table th:last-of-type { border-right-color: rgba(var(--swatch-menutxt-dark-color), 1) !important; } /* Table of Contents */ #toc { border: 0.25rem outset rgb(var(--medium-accent)); background-color: rgb(var(--dark-gray-monochrome)); } #toc .title { color: rgb(var(--bright-accent)); } /* Misc Divs */ .oldblock { margin: 1.25rem; padding: .75rem; border: solid 0.125rem rgb(var(--gray-monochrome)); background: rgb(var(--light-pale-gray-monochrome)); } .newblock { margin: 1.25rem; padding: .75rem; border: 0.25rem outset rgb(var(--medium-accent)); background-color: rgb(var(--dark-gray-monochrome)); color: rgb(var(--medium-accent)); } .newblock h1 h2 h3 h4 h5 h6 { color: rgb(var(--medium-accent)); } /* Imageblock */ .wl-image-block { display: flex; flex-flow: column nowrap; align-items: center; min-width: 30%; box-shadow: 0 0 0 0.0625rem rgba(var(--swatch-tertiary-color),1), -0.0625rem 0 0 0 rgba(var(--swatch-tertiary-color),1), 0 0.0625rem 0 0 rgba(var(--swatch-tertiary-color),0.75); } .wl-image-block, .wl-image-block * { border: none; } .wl-image-block * { width: 100%; } .wl-image-block.block-right { margin: 0 0 1em 2em; float: right; clear: right; } .wl-image-block.block-left { margin: 0 2em 1em 0; float: left; clear: left; } .wl-image-block.block-center { margin-right: auto; margin-left: auto; } .wl-image-block img { min-width: 100%; border: 0; } /* Overwriting img width set by Image Block component as it's is already placed on the parent div */ .wl-image-block img[style*="width:"] { width: 100% !important; } .wl-image-caption { min-width: 100%; } .wl-image-block .wl-image-caption { --wght: 600; box-sizing: border-box; padding: 0.25em 0.5em; background-color: rgb(var(--swatch-alternate-color)); box-shadow: inset 0 0.0625rem 0 0 rgb(var(--swatch-tertiary-color),0.75); font-size: 0.9em; color: rgb(var(--swatch-text-secondary-color)); letter-spacing: 0.016em; line-height: 1.25; font-weight: var(--wght); text-align: center; } .wl-image-block .wl-image-caption > p { margin: 0; padding: 0; } /* Translation Module */ .wl-translations { box-sizing: border-box; margin: 0.5rem; padding: 0.625rem; float: right; border: 0.25rem outset rgb(var(--medium-accent)); border-radius: 0.0625rem; background-color: rgb(var(--dark-gray-monochrome)); } .wl-translations a { color: rgb(var(--bright-accent)); } /* Navbar */ .footer-wikiwalk-nav { font-size: 90%; font-weight: bold; } .wlnavbar { --text-shadow: rgba(var(--black-monochrome), 0.35); --box-shadow: rgb(var(--gray-monochrome)); --border-color: rgb(var(--medium-accent)); margin: 0.625rem 0 0.938rem; margin-bottom: 1.250rem; padding: 0.125rem; border: outset 0.188rem var(--border-color); border-radius: 0.0625rem; background-color: rgb(var(--dark-gray-monochrome)); box-shadow: 0.09375rem 0.09375rem 0.188rem var(--box-shadow); color: rgb(var(--medium-accent)); text-shadow: 0.0625rem 0.0625rem 0.125rem var(--text-shadow); } .wlnavbar a { display: inline-block; position: relative; width: 100%; height: 100%; padding-top: 0.45em; padding-bottom: 0.35em; color: rgb(var(--bright-accent)); } .wlnavbar a::before { display: flex; position: absolute; top: 0; align-items: center; height: 100%; font-size: calc(var(--base-font-size) * 1.1); font-weight: 800; line-height: calc(var(--base-font-size) * 0.8); } .wlnavbar .footer-wikiwalk-nav { display: flex; align-items: center; justify-content: center; font-size: 90%; font-weight: 400; letter-spacing: 0.025em; } .wlnavbar .footer-wikiwalk-nav * { line-height: 1em; } .wlnavbar .footer-wikiwalk-nav .center { flex-basis: content; padding: 0.15rem 0.3rem; text-align: center; } .wlnavbar .footer-wikiwalk-nav .left, .wlnavbar .footer-wikiwalk-nav .right { display: inline-flex; position: relative; flex-basis: calc(40% - 3em); align-items: center; font-size: calc(var(--base-font-size) * 0.8); } .wlnavbar .footer-wikiwalk-nav .left { justify-content: flex-end; margin: 0.35em 0 0.35em 0.35em; padding-right: 0.5em; padding-left: 1em; border-right: 0.0625rem solid rgb(var(--dark-accent)); text-align: right; } .wlnavbar .left > a::before { content: "↫"; left: -0.75em; transition: left 1s ease-in-out; will-change: left; -webkit-animation: bounce-left 1.7s infinite; animation: bounce-left 1.7s infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } .wlnavbar .left > a:hover::before { -webkit-animation-play-state: running; animation-play-state: running; } .wlnavbar .footer-wikiwalk-nav .right { justify-content: flex-start; margin: 0.35em 0.35em 0.35em 0; padding-right: 1em; padding-left: 0.5em; border-left: 0.0625rem solid rgb(var(--dark-accent)); text-align: left; } .wlnavbar .right > a::before { content: "↬"; right: -0.75em; transition: right 1s ease-in-out; will-change: right; -webkit-animation: bounce-right 1.7s infinite; animation: bounce-right 1.7s infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } .wlnavbar .right > a:hover::before { -webkit-animation-play-state: running; animation-play-state: running; } /* Collection Box / More By This Author */ .collection .articlecolumn .list-pages-item, .collection .articlecolumn .list-pages-item > div, .collection .articlecolumn .list-pages-item > p { display: inline; } .collection .articlecolumn .list-pages-item p { margin: 0 !important; } .collection>.collapsible-block { display: block; padding: 0.15em; border: 0.0625rem solid black; background-color: white; text-align: center; } .collection .collapsible-block-unfolded-link { margin: auto; border: 0.125rem solid white; background-color: rgba(var(--pale-gray-monochrome), 0.5); } .collection .collapsible-block-folded { margin: auto; border: 0.125rem solid white; background-color: rgba(var(--pale-gray-monochrome), 0.5); } .collection .collapsible-block-unfolded-link a, .collection .collapsible-block-folded a { color: rgb(var(--dark-accent)); font-weight: bold; } .collection>.collapsible-block .collapsible-block-content { text-align: left; } .authorname { margin: 0 auto; border: 0.125rem solid rgb(var(--white-monochrome)); border: 0.125rem solid white; background-color: rgba(var(--pale-gray-monochrome), 0.5); color: rgb(var(--black-monochrome)); color: rgba(0, 0, 0, 1); font-weight: bold; text-align: center; } .authorname a { color: rgb(var(--medium-accent)); } .authorname p { margin: 0 !important; } .titlecolumn { width: 15%; padding: 0.375rem; border: 0.125rem solid white; background-color: rgba(var(--pale-gray-monochrome), 0.5); text-align: right; } .articlecolumn { width: 85%; padding: 0.1875rem; background-color: rgb(var(--white-monochrome)); font-size: 85%; font-weight: normal; } .collectiondot { padding: 0 0.25rem; } .articlecolumn .list-pages-item:last-child .collectiondot { display: none; } /* Rating Module */ .page-rate-widget-box { background: linear-gradient(to top, rgba(30, 55, 30, 1) 0, rgba(130, 160, 135, 1) 100%); background: linear-gradient(to top, rgba(var(--swatch-menubg-dark-color), 1) 0, rgba(var(--swatch-menubg-medium-color), 1) 100%); 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-family: var(--body-font); line-height: 2ch; --wght: 500; } /* Rating Module With Credit Button */ .rate-box-with-credit-button .page-rate-widget-box { background: linear-gradient(to top, rgba(30, 55, 30, 1) 0, rgba(130, 160, 135, 1) 100%); background: linear-gradient(to top, rgba(var(--swatch-menubg-dark-color), 1) 0, rgba(var(--swatch-menubg-medium-color), 1) 100%); letter-spacing: 0.05em; } .rate-box-with-credit-button .creditButton { background: linear-gradient(to top, rgba(30, 55, 30, 1) 0, rgba(130, 160, 135, 1) 100%); background: linear-gradient(to top, rgba(var(--swatch-menubg-dark-color), 1) 0, rgba(var(--swatch-menubg-medium-color), 1) 100%); letter-spacing: 0.05em; } .rate-box-with-credit-button>.creditButton>p>a { display: flex; margin-left: 0; border-left: none; background: linear-gradient(to top, rgba(var(--swatch-menubg-dark-color), 1) 0, rgba(var(--swatch-menubg-medium-color), 1) 100%); } #page-content .rate-box-with-credit-button>.creditButton>p>a:after { background-color: rgba(var(--rating-module-button-info-color)); } .rate-box-with-credit-button .page-rate-widget-box .rate-points, .rate-box-with-credit-button .page-rate-widget-box .rateup, .rate-box-with-credit-button .page-rate-widget-box .ratedown, .rate-box-with-credit-button .page-rate-widget-box .cancel, .rate-box-with-credit-button .page-rate-widget-box .rateup a, .rate-box-with-credit-button .page-rate-widget-box .ratedown a, .rate-box-with-credit-button .page-rate-widget-box .cancel a { font-family: var(--body-font); line-height: 2ch; --wght: 500; } @supports (display:grid){ [id*=u-credit] .credit.first, [id*=u-credit] .credit.otherwise { overflow-y: hidden; } } .fancyhr hr { box-sizing: border-box; height: 0; border-top: 2vw solid transparent; background: none; background-color: rgba(255, 219, 90, 0); background-color: rgba(var(--bright-accent), 0); border-image-source: url("https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wl_hr.png"); border-image-repeat: round round; border-image-slice: 80 500 80 500 fill; border-image-width: 10em 80em 10em 80em; } .fancyborder { box-sizing: border-box; padding: 2vw; border: 2vw solid rgba(0, 0, 0, 0.5); border-image: url("https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/wl_border.png") 600 round; border-image-width: 6; } div.introbox, div.inner, div.inner > div, div.aboutouter, div.aboutinner { display: flex; flex-direction: column; padding: 0.5em; } div.inner, div.inner > div, div.aboutinner { background: rgba(var(--pale-gray-monochrome), 0.15); } div.introbox, div.inner, div.aboutouter { border: solid 0.125rem rgba(var(--swatch-primary-darker), 1); } div.inner > div, div.aboutinner { border: solid 0.0625rem rgba(var(--swatch-primary-darker), 1); } div.introbox, div.aboutouter { background: rgba(var(--swatch-primary-darker), 0.25); } div.inner > div { flex-grow: 2; align-items: center; } div.book div.title a, div.book div.title a:hover, div.book div.title a:active, div.book div.title a:visited { color: rgb(var(--swatch-primary)); } #main-content ol { list-style-position: inside; } div.inner.shelf { position: relative; flex-direction: row; flex-wrap: wrap; align-items: stretch; } div.inner.shelf div.left-side>* { flex-basis: auto; flex-grow: 0; flex-shrink: 2; } div.inner.shelf > div { display: flex; flex-basis: 48%; flex-grow: 1; align-items: center; justify-content: center; width: 48%; } div.inner.shelf > div * { box-sizing: border-box; } div.inner.shelf[id*="toc"], div.inner.shelf [id*="toc"] { width: 100%; text-align: center; } div.left-side table a { color: rgb(var(--bright-accent)); font-family: var(--header-font); font-size: 150%; } div.left-side table th { border: .5rem double rgba(var(--swatch-menubg-medium-dark-color), 0.25) !important; } div.inner.shelf div.left-side img.image { width: auto; height: 40%; min-height: 30vh; object-fit: cover; object-position: 50% 0; } div.inner.shelf div.left-side div.description:first-letter { margin-top: -0.25em; margin-bottom: -0.25em; padding-right: 0.25rem; padding-left: 1.15rem; float: left; color: rgb(var(--gray-monochrome)); font-family: var(--header-font); font-size: 400%; line-height: 100%; } div.inner.shelf div.left-side div.description { padding: 0 2em 1em; font-size: 95%; line-height: 165%; text-align: justify; text-indent: -0.25em; text-justify: inter-character; } div.right-side blockquote { display: flex; align-items: center; justify-content: center; width: 100%; height: auto; } div.right-side div.bookshelf { position: relative; height: 100%; padding: 2em; overflow: hidden; border-radius: 0.5em; background-image: linear-gradient(rgb(30, 55, 30) 0%, rgb(30, 55, 30) 30%, rgb(255, 219, 90) 100%); ; background-size: 100% 200%; } @supports (background-blend-mode: screen) { div.right-side div.bookshelf { background-image: url("https://wanderers-library.wikidot.com/local--files/component:theme/goldfoil.png"), linear-gradient(rgb(30, 55, 30) 0%, rgb(30, 55, 30) 30%, rgb(255, 219, 90) 100%); background-blend-mode: overlay, normal; background-size: cover, 100% 200%; } } div.right-side div.bookshelf::before { content: " "; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; transform: rotateX(180deg); opacity: 0.25; background: linear-gradient(rgb(30, 55, 30) 0%, rgb(30, 55, 30) 30%, rgb(255, 219, 90) 100%); ; background-size: 100% 200%; pointer-events: none; mix-blend-mode: overlay; } div.bookshelf div.list-pages-box { display: flex; position: relative; flex-grow: 0; flex-wrap: wrap; align-content: flex-end; align-items: flex-end; margin-bottom: 2em; transform: perspective(500rem); transform-origin: top center; transform-style: preserve-3d; } div.bookshelf div.list-pages-box::after, div.ibookshelf div.list-pages-box::before { content: " "; position: absolute; width: 100%; height: 1em; } div.bookshelf div.list-pages-box::after { bottom: -1em; transform: translateZ(2em) translateY(0.1em); border-radius: 0 0 0.25rem 0.25rem; background-color: rgb(var(--dark-accent)); } @supports (background-blend-mode: screen) { div.bookshelf div.list-pages-box::after { background-image: url("https://wanderers-library.wikidot.com/local--files/component:theme/goldfoil.png"); background-blend-mode: overlay; } } div.bookshelf div.list-pages-box::before { bottom: -1.2em; left: -2%; width: 104%; margin: 0 auto; transform: rotateX(92deg) scaleY(35) translateZ(-0.5em) translateY(-1em); background-color: rgb(30, 55, 30); } div.inner.shelf div.book { display: flex; position: relative; width: 95%; height: auto; margin: 0.05em auto; overflow: hidden; transform-style: preserve-3d; transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 0.5em; box-shadow: 0.6875rem 0.375rem 0.875rem rgba(var(--dark-gray-monochrome), 0.25), 0.1875rem 0em 0.3125rem rgba(var(--dark-gray-monochrome), 0.22); will-change: transform; } div.inner.shelf div.book:hover { transform: translateZ(10rem) translateY(-0.35em) rotateY(5deg); } div.book div.title { height: 100%; border-left: 0.25rem double rgb(var(--swatch-primary-darker)); font-family: var(--header-font); font-weight: 900; } div.title * { display: block; } div.book>* { display: inline-flex; align-items: center; margin: 0.25rem; padding: 0.25rem; } div.book div.author { flex-grow: 2; justify-content: flex-end; padding-right: 1em; border-right: 0.25rem double rgb(var(--swatch-primary-darker)); color: rgb(var(--pale-gray-monochrome)); font-size: 75%; font-weight: 700; text-align: right; } div.inner.shelf div.book::before { content: " "; position: absolute; z-index: -1; top: 0.25rem; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(var(--pale-gray-monochrome)) 0%, rgba(var(--gray-monochrome)) 4%, rgba(var(--gray-monochrome)) 4%, rgba(var(--gray-monochrome)) 95%, rgba(var(--dark-gray-monochrome)) 100%); pointer-events: none; } div.inner.shelf div.book::after { content: " "; position: absolute; z-index: -1; top: -0.125rem; left: 0; width: 100%; height: 100%; background: linear-gradient(179.5deg, rgba(252, 252, 252) 0%, rgba(45, 70, 45) 10%, rgba(45, 70, 45) 10%, rgba(45, 70, 45) 97%, rgba(12, 12, 12) 100%); background-size: 100% 100%; pointer-events: none; } @supports (background-blend-mode: screen) { div.inner.shelf div.book::after { background: linear-gradient(179.5deg, rgba(var(--white-monochrome)) 0%, rgba(var(--gray-monochrome)) 10%, rgba(var(--gray-monochrome)) 10%, rgba(var(--gray-monochrome)) 97%, rgba(var(--black-monochrome)) 100%), url("https://wanderers-library.wikidot.com/local--files/component:theme/wlheader_bg.png"); mix-blend-mode: screen; background-blend-mode: color-dodge; background-size: 100% 100%, contain; } } @media only screen and (max-width: 56.25rem) { div.inner.shelf { flex-direction: row; flex-wrap: wrap; max-height: 100%; } div.description { padding: 0.5em; } div.inner.shelf > div { flex-basis: 100%; } div.inner.shelf div.list-pages-box::after { bottom: -1em; transform: translateZ(2em) translateY(0.5em); background-color: rgb(var(--dark-accent)); } div.inner.shelf div.list-pages-box::before { bottom: -1em; left: -1.5%; width: 103%; transform: rotateX(92deg) scaleY(35) translateZ(-0.5em) translateY(-1em); background-color: rgb(var(--black-monochrome)); } } /* Mobile Coding (!MOBL) ==============================================================================*/ @media only screen and (max-width: 56.25rem) { /* Mobile Header (!MHDR) ==============================================================================*/ :root { --header-height-on-desktop: var(--header-height-on-mobile); --topbar-height-on-desktop: var(--topbar-height-on-mobile); } #header h1 a { line-height: 1; } #header h2 span { margin-top: calc(3.4rem + var(--offset-from-page-top)); } div#extra-div-1 { -webkit-filter: initial; filter: initial; } #search-top-box-form { top: 0; } } /* Mobile Search Bar (!MSRC) ==============================================================================*/ @media only screen and (max-width: 56.25rem) { search-top-box { width: 12.5rem; } #search-top-box-form { top: 0; right: 0; align-items: initial; } #search-top-box form[id="search-top-box-form"] { top: 0; } #search-top-box:not(:focus-within)::before { color: rgb(var(--bright-accent)); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { background-color: rgb(var(--dark-gray-monochrome)); } /* Mobile Top Bar (!MTPB) ==============================================================================*/ #top-bar { flex-direction: row-reverse; } #top-bar > div[class*="top-bar"] { display: inline-flex; flex-grow: 2; width: calc(100vw - var(--topbar-height-on-mobile)); max-width: calc(100vw - var(--topbar-height-on-mobile)); height: calc(var(--topbar-height-on-mobile)); } #header div[class*="top-bar"] > ul { width: 100%; } #top-bar > div.mobile-top-bar { flex-grow: 0; width: var(--topbar-height-on-mobile); max-width: var(--topbar-height-on-mobile); height: var(--topbar-height-on-mobile); max-height: var(--topbar-height-on-mobile); background: initial; } /* Mobile Side Bar (!MSDB) ==============================================================================*/ #side-bar { left: calc(var(--sidebar-width-on-mobile) * -1); width: var(--sidebar-width-on-mobile); min-width: var(--sidebar-width-on-mobile); transition: left var(--sidebar-transition-timing), opacity var(--sidebar-transition-timing); will-change: left, opacity; } #side-bar, #side-bar:target { display: flex; } #side-bar:target { width: var(--sidebar-width-on-mobile); } #side-bar .close-menu { visibility: visible; margin-left: 0; padding-right: var(--sidebar-width-on-mobile); transition: margin-left var(--sidebar-transition-timing), padding-right var(--sidebar-transition-timing), background-color var(--sidebar-transition-timing), opacity var(--sidebar-transition-timing); opacity: 1; background-color: rgba(var(--swatch-menubg-black-color), 0); will-change: margin-left, padding-right, background-color, opacity; } #side-bar .close-menu, #side-bar:target .close-menu { width: calc(100% - var(--sidebar-width-on-mobile)); } #side-bar:target .close-menu { margin-left: var(--sidebar-width-on-mobile); opacity: 1; background-color: rgba(var(--swatch-menubg-black-color), 0.3); } /* Mobile Main Content (!MOMN) ==============================================================================*/ body { background: inherit; } #main-content { margin-left: inherit; } div#page-options-bottom { width: 90%; } /* Mobile Page Widgets (!MPGW) ==============================================================================*/ .yui-navset { z-index: inherit; } .scp-image-block, .scp-image-block img { width: 100% !important; } } /* Tablet Size Fix */ @media (max-width: 61.1875rem) and (min-width: 56.25rem) { #main-content { margin-left: calc(50vw - (44.25rem / 2) - 2rem); margin-left: calc(50vw - (var(--body-width-on-desktop / 2) - 2rem)); } } /* Animation Keyframes (!KFMS) ==============================================================================*/ @-webkit-keyframes tab-active { 0% { margin-top: 0; margin-right: 0; padding-top: 0; } 100% { margin-top: -0.5em; margin-right: 0.0625rem; padding-top: 0.5em; } } @keyframes tab-active { 0% { margin-top: 0; margin-right: 0; padding-top: 0; } 100% { margin-top: -0.5em; margin-right: 0.0625rem; padding-top: 0.5em; } } @-webkit-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } } /* 侧栏适应性改动 */ #side-bar:lang(cn) div.side-block { background: rgba(var(--dark-accent),.15)!important; } /* SCP版顶栏适配 */ @media (max-width: 56.25rem) { div#top-bar > div.top-bar { display: none; } div#top-bar > div.mobile-top-bar { width: 100%; max-width: 100%; } div#top-bar > div.mobile-top-bar > ul > li > a { font-family: var(--header-font); } } /* ===链接反色效果=== */ div.page-watch-options a, div.page-watch-options a:visited { --hover-link-color: var(--dark-accent); } #footer, #license-area { --hover-link-color: var(--dark-accent); } #breadcrumbs, .pseudocrumbs { --swatch-text-secondary-color: var(--dark-accent); } form#edit-page-form .edit-help-34>a:active, form#edit-page-form .edit-help-34>a:hover, form#edit-page-form .edit-help-34>a:focus-within { --swatch-background: var(--dark-accent); } #action-area a[onclick*=deleteTag]:not(.btn):active, #action-area a[onclick*=deleteTag]:not(.btn):hover, #action-area a[onclick*=deleteTag]:not(.btn):focus-within { --swatch-text-secondary-color: var(--dark-accent); } table.page-history tr:nth-of-type(2) td:not(:nth-of-type(7)):before { --swatch-text-secondary-color: var(--dark-accent); } /* ===兼容性修正=== */ div.earthworm div.inner, div.earthworm div.inner>div { display: contents; } @media only screen and (max-width: 375px) { #header h1 a { font-size: 2rem; } #odialog-container div.owindow#owindow-1 { width: 100% !important; } } @media only screen and (max-width: 425px) { div[id*=page-options-bottom]>a:after { left: calc((2em - var(--icon-size))/2); } } /* ===修复ios设备上的显示效果=== */ @supports (-webkit-touch-callout: none) { .fancyhr hr { filter: hue-rotate(134deg) saturate(104.62%) brightness(0.5); border-image-source: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_hr.png"); border-image-repeat: repeat; border-image-slice: 80 500 80 500 fill; border-image-width: 10em 80em 10em 80em; } @media only screen and (width: 768px) { div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn { box-shadow: none; } } }