您正在查詢的標題為:關注組織
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:機動特遣隊
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:基金會設施
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:員工與角色檔案
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:世界線中心頁
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:系列檔案室
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:競賽資料庫
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:異常物品紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:超常事件紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:未解明地點列表
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:基金會故事
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
What this is
A bunch of miscellaneous CSS 'improvements' that I, Croquembouche, use on a bunch of pages because I think it makes them easier to deal with.
The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.
I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.
This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.
Usage
On any wiki:
[[include :scp-wiki:component:croqstyle]]
This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.
Related components
Other personal styling components (which change just a couple things):
Personal styling themes (which are visual overhauls):
CSS changes
Reasonably-sized footnotes
Stops footnotes from being a million miles wide, so that you can actually read them.
.hovertip { max-width: 400px; }
Monospace edit/code
Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap'); :root { --mono-font: "Fira Code", Cousine, monospace; } #edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); } .code pre * { white-space: pre; } .code *, .pre * { font-feature-settings: unset; }
Teletype backgrounds
Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.
tt { background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4); font-size: 85%; padding: 0.2em 0.4em; margin: 0; border-radius: 6px; }
No more bigfaces
Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.
.avatar-hover { display: none !important; }
Breaky breaky
Any text inside a div with class nobreak has line-wrapping happen between every letter.
.nobreak { word-break: break-all; }
Code colours
Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.
Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.
Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link
:root { --c-bg: #393939; --c-syntax: #e0e0e0; --c-comment: #999999; --c-error: #f2777a; --c-value: #f99157; --c-symbol: #ffcc66; --c-string: #99cc99; --c-operator: #66cccc; --c-builtin: #70a7df; --c-keyword: #cc99cc; } .terminal, .terminal > .code { color: var(--c-syntax); background: var(--c-bg); border: 0.4rem solid var(--c-comment); border-radius: 1rem; }
Debug mode
Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.
You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.
…like this!
.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after { outline: 1px solid var(--debug-colour, red); position: relative; } .debug-info { position: absolute; left: 50%; transform: translateX(-50%); font-family: 'Fira Code', monospace; font-size: 1rem; white-space: nowrap; } .debug-info.over { top: -2.5rem; } .debug-info.under { bottom: -2.5rem; } .debug-info p { margin: 0; }
/* 本主題微調合併自 EstrellaYoshte的Monotypical外觀主題 MalyceGraves與EstrellaYoshte的Newspaper外觀主題 並以(CC BY-SA 3.0) 授權使用 發表年分2021年9月 */ @import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap'); @import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css"); @import url('https://fonts.googleapis.com/css2?family=Kulim+Park&display=swap'); @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap'); /*---- Dismantling and Rebuilding the Structure 拆除和重建結構----*/ div#container-wrap { display: grid; grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: var(--header-height) 1fr auto auto auto; overflow: hidden; background: none; } #container, #content-wrap { display: contents; } #header { grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 3; } #main-content { grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: 3; } #footer { grid-row-start: 3; grid-row-end: 4; grid-column-start: 1; grid-column-end: 3; } #license-area { grid-row-start: 4; grid-row-end: 5; grid-column-start: 1; grid-column-end: 3; } #footer-bar { grid-row-start: 5; grid-row-end: 6; grid-column-start: 1; grid-column-end: 3; } #side-bar { grid-row-start: 1; grid-row-end: 5; grid-column-start: 1; grid-column-end: 2; } /*-------基本佈局---------*/ #header, #top-bar { width: 100%; max-width: 100%; margin: 0; padding: 0; } #main-content { margin: 0; max-width: 100%; } #footer { margin-top: 0; } #footer-bar { z-index: 0; } #side-bar { position: fixed; top: 0; left: 0; margin: 0; padding: 0; width: var(--sidebar-width); height: 100vh; overflow-y: auto; overflow-x: hidden; z-index: 0; } #side-bar:focus-within { z-index: 99; } /*--------------------------------------------------------*/ /*--------------------------------------------------------*/ :root { --linkColor: #54beff; --linkColor-newpage: #00ddff; --primaryBackgroundColor: #fcfeff; --secondaryBackgroundColor: #d5e3e8; --tertiaryBackgroundColor: #b9c2c9; --borderColor: #C6C6C6; --shadow: rgba(0,0,0,0.225); --selectionColor: #83dcfc; --textColor: #0E0E0E; --textColor-alt: #687075; --headerColor: #00367d; --accentColor: #00649e; /*----- Technical Variables 技術變量-----*/ --body-font: 'Ubuntu', sans-serif; --header-font: 'Century Gothic', 'Quicksand', sans-serif; --header-title: '基金會繁中週刊'; --sidebar-width: 15rem; --sidebar-timing: 0.275s ease-out; --header-height: 3.5rem; --page-content-width: 954px; --radius-adjust: 0.95rem; --link-timing: .125s ease-out; /*-----來自報紙-----*/ } #content-wrap { margin: 0.65em auto 0; box-sizing: border-box; } #page-content { font-size: 1rem; } /* 橫線 */ hr { margin: 2rem 0; height: 0.1rem; background-color: var(--borderColor); } /*-----來自報紙-----*/ body { font-family: var(--body-font); font-size: 0.95rem; color: var(--textColor); } img { max-width: 100%; } tt { background-color: var(--secondaryBackgroundColor); font-size: 90%; } code { font-family: var(--mono-font); } #edit-page-textarea, .code pre, .code p, .code, .page-source { font-size: 95%; } #main-content { background-color: var(--primaryBackgroundColor); padding: 1em 3em; } #main-content span.printuser.deleted img, .hovertip span.printuser a:first-of-type, #main-content span.printuser a:first-of-type { display: inline-block; height: 1em; position: relative; bottom: -0.25em; margin-right: 0; } #page-content { width: 100%; max-width: var(--page-content-width); margin: 0 auto 2rem; min-height: 100vh; } #page-content a:not(div[class*=top-bar] a, #u-sb-button, #u-no-more-menu, .page-rate-widget-box a, .creditRate a, .printuser.avatarhover a:first-child, ul.yui-nav a, .scp-image-block a) { color: var(--textColor); padding: 0.1em; text-decoration: none; border-bottom: solid 2px var(--linkColor); background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%); background-size: 100% 0; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--link-timing); } #page-content a:not(div[class*=top-bar] a, #u-sb-button, #u-no-more-menu, .page-rate-widget-box a, .creditRate a, .printuser.avatarhover a:first-child, ul.yui-nav a, .scp-image-block a):hover, #page-content a:not(div[class*=top-bar] a, #u-sb-button, #u-no-more-menu, .page-rate-widget-box a, .creditRate a, .printuser.avatarhover a:first-child, ul.yui-nav a, .scp-image-block a):focus { background-size: 100% 100%; } #page-content a.newpage { --linkColor: var(--linkColor-newpage); } /* adjusting avatar username spacing */ .printuser.avatarhover a:first-child { margin-left: 0.15em; } .printuser.avatarhover a:nth-child(2) { margin-left: -0.45em; } /* ---- SCROLLBAR 滾動條---- */ ::-webkit-scrollbar { width: 10px; background: transparent; } ::-webkit-scrollbar-track { background: var(--tertiaryBackgroundColor); } ::-webkit-scrollbar-thumb { background: var(--linkColor); border: none; border-radius: var(--radius-adjust); } /* firefox support 火狐支持*/ :root, #side-bar { scrollbar-color: var(--linkColor) var(--tertiaryBackgroundColor); scrollbar-width: thin; } /*---- HEADER 版頭----*/ #header { z-index: 2; height: var(--header-height); background: var(--primaryBackgroundColor); } #top-bar, #page-title, #header h2 { display: none; } #header h1 { margin-left: 0; padding: 0; float: none; max-height: 4rem; width: 100%; } #header h1 a { display: block; width: -moz-fit-content; width: fit-content; vertical-align: middle; font-size: 3.25rem; padding: 0.5rem 0.5rem 0; margin: auto; text-align: center; text-shadow: none; color: var(--textColor); font-family: var(--header-font); font-weight: lighter; } /* Hide the existing text 隱藏現有文本*/ #header h1 span { font-size: 0; display: none; } #header h1 a::before { content: var(--header-title); } #login-status { position: absolute; top: 0.4rem; right: 3.25em; width: max-content; font-size: 0.78em; text-align: center; } #login-status, #login-status a { color: var(--textColor); } #login-status span.printuser { font-size: 0; } #login-status span.printuser img { font-size: 0; transform: translate(6px, 5px); } #login-status a#my-account { display: none; } #account-topbutton { border: none; margin-left: -0.1rem; padding: 0 0.5rem; } div#account-options { right: 0; background-color: var(--primaryBackgroundColor); width: 10rem; border: none; border-radius: calc(var(--radius-adjust)*0.3725); box-shadow: 0 0 5px 1px var(--shadow); display: block!important; opacity: 0; pointer-events: none; transition: opacity 0.15s; } #account-topbutton:focus + #account-options, #account-topbutton:active + #account-options, #account-options:focus-within { opacity: 1; pointer-events: all; } /* Without this, touchscreen doesn't work */ @media (pointer: coarse) { #account-topbutton:hover + #account-options, #account-options:hover { opacity: 1; pointer-events: all; } } div#account-options li a { color: var(--textColor); background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%); background-size: 100% 0; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--link-timing); padding: 0.25rem 0; } div#account-options li a:hover, div#account-options li a:focus { text-decoration: none; background-size: 100% 100%; color: var(--textColor); } div#account-options li:first-of-type a { border-radius: calc(var(--radius-adjust)*0.3725) calc(var(--radius-adjust)*0.3725) 0 0; } div#account-options li:last-of-type a { border-radius: 0 0 calc(var(--radius-adjust)*0.3725) calc(var(--radius-adjust)*0.3725); } div#search-top-box { position: absolute; top: 0.5rem; right: 0.5rem; width: 1.6rem; z-index: 31; } div#search-top-box::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; right: 0.05rem; background-color: var(--linkColor); pointer-events: none; z-index: 32; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E"); -webkit-mask-size: 1rem; mask-size: 1rem; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; opacity: 1; transition: opacity 0.25s ease; } div#search-top-box:focus-within::before { opacity: 0; } div#search-top-box form { display: flex; justify-content: flex-end; } div#search-top-box form input[type="text"]:not(:focus), div#search-top-box form input[type="text"]:not(:focus):not(:hover) { position: relative; color: transparent; cursor: pointer; display: inline-block; font-family: var(--body-font); width: 1.6rem; height: 1.6rem; padding: 0.1em 0.5em; box-sizing: border-box; border-radius: var(--radius-adjust); border: none; box-shadow: 0 0 2px 1.5px var(--shadow); } div#search-top-box form input[type="text"], div#search-top-box form input[type="text"]:hover, div#search-top-box form input[type="text"]:focus { background-color: var(--primaryBackgroundColor)!important; color: var(--textColor); display: inline-block; border: none; height: 1.6rem; width: 9rem; transition: width .25s; outline: none; border-radius: var(--radius-adjust); box-shadow: 0 0 2px 1.5px var(--shadow); } div#search-top-box form input[type="submit"] { display: none; } /*---- SIDEBAR 邊欄----*/ #side-bar { display: block; box-sizing: border-box; background-color: var(--secondaryBackgroundColor); border-right: solid 2px var(--borderColor); } #side-bar::-webkit-scrollbar { width: 0; background: transparent; } #side-bar .side-block { box-shadow: none; border: none; border-radius: 0; padding: 0; margin-bottom: 0.25rem; } #side-bar .side-block, #side-bar .side-block.media, #side-bar .side-block.resources { background-color: transparent; } #side-bar .side-block.media > * { display: flex; justify-content: space-evenly; } #side-bar .side-block.media { border-bottom: solid 2px var(--borderColor); } #side-bar .side-block .menu-item > .image { display: none; } #side-bar .heading { color: var(--textColor); background-color: var(--tertiaryBackgroundColor); border-top: solid 2px var(--borderColor); border-bottom: none; font-family: var(--header-font); font-weight: bold; text-transform: uppercase; font-size: 0.9rem; padding: 0.1rem 0.3rem; margin-top: 0.75rem; text-align: right; } #side-bar .heading p { margin: 0; } #side-bar div.menu-item, #side-bar div.menu-item > p { display: flex; flex-basis: auto; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin: 0; font-size: 0; } #side-bar div.menu-item a { font-weight: normal; color: var(--textColor); text-decoration: none; justify-content: center; width: auto; padding: .2rem .4rem; flex-grow: 1; font-size: 0.875rem; border-bottom: solid 1px var(--linkColor); background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%); background-size: 100% 0; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--link-timing); } #side-bar div.menu-item a[href="/"], #side-bar div.menu-item a[href*="scp-series"] { padding: .25rem; text-align: center; } #side-bar div.menu-item a[href="/"] { border-bottom: none; padding: 0.25em 0; font-weight: bold; margin-top: 0.5rem; } #side-bar div.menu-item a:hover, #side-bar div.menu-item a:focus { background-size: 100% 100%; } iframe.scpnet-interwiki-frame, div.scpnet-interwiki-wrapper { width: var(--sidebar-width); margin: 0 auto; } /*---- Sidebar Transition Mechanism側邊欄過渡機制----*/ #header, #main-content, #footer, #license-area, #footer-bar { position: relative; left: 0; transition: left var(--sidebar-timing); } #container:target #header, #container:target #main-content, #container:target #u-sb-button, #container:target #footer, #container:target #license-area, #container:target #footer-bar { left: var(--sidebar-width); } /* Sidebar Toggle 側邊欄切換*/ #u-sb-button { position: fixed; z-index: 10; top: 0; left: 0; transition: left var(--sidebar-timing); display: block; height: 2.6rem; width: 2.6rem; background-color: var(--primaryBackgroundColor); color: var(--textColor); font-weight: bold; font-size: 2rem; line-height: 0.8rem; text-align: center; text-decoration: none; } #u-no-more-menu { display: none; } #container:target #u-no-more-menu { display: block; position: fixed; width: calc(100% - var(--sidebar-width)); height: 100%; top: 0; right: 0; z-index: 12; cursor-events: all; } /*------ Top Bar, reborn 頂欄跟痾-------*/ #page-content div.mobile-top-bar { display: none; } #page-content div[class*=top-bar] { font-size: 100%; z-index: 9; } #page-content div[class*=top-bar] a { text-decoration: none; } #page-content div[class*=top-bar] ul { background: transparent; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; justify-content: space-between; text-align: center; } #page-content div[class*=top-bar] ul > li { flex-grow: 1; border-radius: calc(var(--radius-adjust)*0.5); } #page-content div[class*=top-bar] li { color: var(--textColor); background: transparent; display: block; float: left; padding: 0.5rem; position: relative; text-decoration: none; transition: background-color var(--link-timing); } #page-content div[class*=top-bar] > ul > li:hover, #page-content div[class*=top-bar] > ul > li:focus-within { background: var(--tertiaryBackgroundColor); cursor: pointer; } #page-content div[class*=top-bar] li a { color: var(--textColor); display: block; width: max-content; height: 100%; margin: auto; } #page-content div[class*=top-bar] ul li ul { background: var(--primaryBackgroundColor); box-sizing: border-box; min-width: 100%; position: absolute; margin-top: 0.5rem; border-radius: calc(var(--radius-adjust)*0.5); box-shadow: 0 0 6px 2px var(--shadow); left: 0; display: block; transition: opacity var(--link-timing); opacity: 0; pointer-events: none; } #page-content div[class*=top-bar] ul li:hover > ul, #page-content div[class*=top-bar] ul li:focus-within > ul, #page-content div[class*=top-bar] ul li ul:hover, #page-content div[class*=top-bar] ul li ul:focus { opacity: 1; z-index: 9; pointer-events: all; } #page-content div[class*=top-bar] ul li ul::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -8px; border-width: 8px; border-style: solid; border-color: transparent transparent var(--primaryBackgroundColor) transparent; } #page-content div[class*=top-bar] ul li ul li { clear: both; width: 100%; position: relative; display: flex; padding: 0; } #page-content div[class*=top-bar] ul li ul li:first-of-type a { border-top-left-radius: calc(var(--radius-adjust)*0.5); border-top-right-radius: calc(var(--radius-adjust)*0.5); } #page-content div[class*=top-bar] ul li ul li:last-of-type a { border-bottom-left-radius: calc(var(--radius-adjust)*0.5); border-bottom-right-radius: calc(var(--radius-adjust)*0.5); } #page-content div[class*=top-bar] ul li ul li a { width: max-content; height: 100%; flex-grow: 1; align-self: center; padding: 0.4rem; text-align: center; background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%); background-size: 100% 0; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--link-timing); } #page-content div[class*=top-bar] ul li ul li a:hover, #page-content div[class*=top-bar] ul li ul li a:focus { background-size: 100% 100%; } #page-content div[class*=top-bar]>ul:first-of-type>li:last-of-type>ul { right: 0; left: auto; } #page-content .mobile-top-bar { position: relative; left: 0; width: 100%; max-width: 100%; } #page-content .mobile-top-bar .open-menu { display: none; } /* ---- META-TITLE 元標題---- */ .meta-title { display: flex; align-items: center; text-align: center; border-bottom: none; margin: 0.5rem 0; color: var(--textColor); font-family: var(--header-font); font-size: 215%; } .meta-title::before, .meta-title::after { content: ""; flex-grow: 1; height: 0.1rem; margin: auto auto auto 0.65rem; background-color: var(--borderColor); } .meta-title::before { margin: auto 0.65rem auto auto; } /* ---- BREADCRUMBS 麵包屑---- */ #breadcrumbs, #page-content .pseudocrumbs { font-size: 0.85em; line-height: 1.25em; } #breadcrumbs a, #main-content #page-content .pseudocrumbs > a { color: var(--textColor); padding: 0.05em; text-decoration: none; border-bottom: solid 1px var(--linkColor); background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%); background-size: 100% 0; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--link-timing); } #breadcrumbs a:hover, #breadcrumbs a:focus, #main-content #page-content .pseudocrumbs a:hover, #main-content #page-content .pseudocrumbs a:focus { background-size: 100% 100%; } #breadcrumbs { text-align: center; grid-column: 1 / span 2; grid-area: page-title; width: max-content; margin: 0.25em auto 0; padding: 0.65em 0.75em 0.225em; position: relative; max-height: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; transition: max-height 1s ease; } #breadcrumbs::before, #breadcrumbs::after { content: ""; position: absolute; top: 0; } #breadcrumbs::before { left: 0; width: 100%; height: 3px; border-radius: var(--radius-adjust); background-color: var(--textColor); } #breadcrumbs::after { left: 50%; margin-left: -8px; border-width: 8px; border-style: solid; border-color: var(--textColor) transparent transparent transparent; } #breadcrumbs:hover, #breadcrumbs:focus-within { max-height: 9rem; } #page-content .pseudocrumbs { margin: -1.5em 0 -0.15em; } /* ---- TABS 製表符---- */ /* ---- YUI TAB BASE YUI 標籤頁---- */ .yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit} /* ---- YUI TAB CUSTOMIZATION YUI 標籤自定義----*/ .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { display: flex; flex-wrap: wrap; width: calc(100% - .125rem); margin: 0 auto; border-color: var(--linkColor); box-shadow: none; border-width: 0 1px 2px; } .yui-navset .yui-nav a, /* ---- Link Modifier ---- */ .yui-navset .yui-navset-top .yui-nav a { color: var(--textColor-alt); /* ---- Tab Background Colour | [UNSELECTED] ---- */ background-color: var(--secondaryBackgroundColor); border: unset; box-shadow: none; } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus { color: var(--textColor)!important; text-decoration: none; /* ---- Tab Background Colour | [HOVER] ---- */ background-color: var(--linkColor); } .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */ .yui-navset .yui-navset-top .yui-nav li { position: relative; display: flex; flex-grow: 2; max-width: 100%; margin: 0; padding: 0; background-color: var(--secondaryBackgroundColor); border: solid 1px var(--linkColor); border-bottom: none; border-top-width: 2px; box-shadow: none; } .yui-navset .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset-bottom .yui-nav li a { display: flex; align-items: center; justify-content: center; width: 100%; } .yui-navset .yui-nav li em{ border: unset; } .yui-navset .yui-nav a em, .yui-navset .yui-navset-top .yui-nav a em { padding: .35em .75em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */ .yui-navset .yui-navset-top .yui-nav .selected { flex-grow: 2; margin: 0; padding: 0; /* ---- Tab Background Colour | [SELECTED] ---- */ background-color: var(--linkColor); } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em { border: none; } .yui-navset .yui-nav .selected a { width: 100%; color: var(--textColor); } .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:active { color: var(--textColor); background-color: var(--linkColor); } #page-content .yui-navset .yui-content { background-color: var(--primaryBackgroundColor); box-shadow: none; border: solid 2px var(--borderColor); } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content { padding: .5em; border: none; } /* ---- AYERS INFO BAR 艾爾斯信息欄---- */ .info-container { --barColour: var(--borderColor); --linkColour: var(--primaryBackgroundColor); } #page-content .info-container > .collapsible-block > .collapsible-block-folded .collapsible-block-link::before, #page-content .info-container > .collapsible-block > .collapsible-block-unfolded .collapsible-block-link::before { visibility: hidden; } /* ---- INFO PANE 麵包信息---- */ #page-content .creditRate{ margin: unset; margin-bottom: 4px; } #page-content .rate-box-with-credit-button { background-color: var(--primaryBackgroundColor); border: none; box-shadow: 0 0 3px 1px var(--shadow); border-radius: var(--radius-adjust); padding: 0.275rem; } #page-content .rate-box-with-credit-button .page-rate-widget-box { border: none; } #page-content a.fa { transform: none; } #page-content .rate-box-with-credit-button .fa-info { border: none; color: var(--textColor); padding-top: 0.25rem; padding-bottom: 0.0725rem; width: 0.9rem; margin-left: -0.1rem; margin-right: 0.1rem; background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%); background-size: 100% 0; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--link-timing); } #page-content .rate-box-with-credit-button .fa-info:hover, #page-content .rate-box-with-credit-button .fa-info:focus { background-size: 100% 100%; } .rate-box-with-credit-button .cancel { border: solid 1px var(--primaryBackgroundColor); } #page-content .creditButtonStandalone { margin: 0.125rem 0; } #page-content .creditButtonStandalone p a { border-radius: 1rem; color: var(--textColor); text-align: center; background: initial; box-shadow: 0 0 2px 1px var(--shadow); padding: 0.24rem; background: none; background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 100% 0; transition: background-size var(--link-timing); } #page-content .creditButtonStandalone p a:hover, #page-content .creditButtonStandalone p a:hover { text-decoration: none; background: none; background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 100% 100%; } /* ---- PAGE RATING 頁面評分---- */ .page-rate-widget-box { display: inline-block; box-shadow: none; margin: unset; margin-bottom: 4px; background-color: var(--primaryBackgroundColor); border-radius: var(--radius-adjust); box-shadow: 0 0 3px 1px var(--shadow); padding: 0.275rem; } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover, .page-rate-widget-box .cancel a:hover, .page-rate-widget-box .rateup a:focus, .page-rate-widget-box .ratedown a:focus, .page-rate-widget-box .cancel a:focus { color: var(--textColor); background: unset; background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%); background-size: 100% 100%; background-position: 0 100%; background-repeat: no-repeat; border-radius: 0; } .page-rate-widget-box .rate-points { background-color: var(--primaryBackgroundColor) !important; color: var(--textColor) !important; border: solid 1px var(--primaryBackgroundColor); border-radius: 0; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { background-color: var(--primaryBackgroundColor); border-top: solid 1px var(--primaryBackgroundColor); border-bottom: solid 1px var(--primaryBackgroundColor); } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { padding: 0 0.25rem; margin: 0 0.05rem; color: var(--textColor); background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%); background-size: 100% 0; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--link-timing); } .page-rate-widget-box .cancel { background-color: var(--primaryBackgroundColor); border: solid 1px var(--primaryBackgroundColor); border-radius: 0; margin-right: 0.05rem; text-transform: uppercase; } .page-rate-widget-box .cancel a { color: var(--textColor); background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%); background-size: 100% 0; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--link-timing); } /*---- PAGE ELEMENTS 頁面元素----*/ /* h1 et al. Much of this is by Woedenaz */ h1, h2, h3, h4, h5, h6 { font-family: var(--header-font); color: var(--textColor); font-weight: bold; margin-top: 0.6rem; margin-bottom: 0.6rem; display: flex; } h2, h3, h4, h5, h6 { letter-spacing: -0.01em; } #page-content h1 {font-size: 2em;} #page-content h2 {font-size: 1.8em;} #page-content h3 {font-size: 1.6em;} #page-content h4 {font-size: 1.4em;} #page-content h5 {font-size: 1.2em;} #page-content h6 {font-size: 1em;} #page-content h1 span, #page-content h2 span, #page-content h3 span, #page-content h4 span, #page-content h5 span, #page-content h6 span { padding: 0 0.1em; display: inline-flex; } #page-content h1 span::before, #page-content h2 span::before, #page-content h3 span::before, #page-content h4 span::before, #page-content h5 span::before, #page-content h6 span::before { content: ""; color: var(--textColor-alt); font-size: 70%; font-weight: normal; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; margin-right: 0.1em; } #page-content h1::after { content: ""; flex-grow: 1; height: 0.1rem; margin: auto auto auto 0.375rem; background-color: var(--borderColor); } /* 報紙頁面*/ blockquote, div.blockquote { background-color: var(--primaryBackgroundColor); border: none; border-left: solid 0.2rem var(--linkColor); padding: 0.1rem 1rem; box-shadow: 0 0 3px rgba(0,0,0,0.25); position: relative; } blockquote::before, blockquote::after, div.blockquote::before, div.blockquote::after { content: ""; display: block; height: 0.5rem; width: 0.5rem; position: absolute; left: 0; background-color: var(--linkColor); } blockquote::before, div.blockquote::before { top: 0; transform: translate(calc(-50% - 0.1rem),-50%) rotate(45deg); } blockquote::after, div.blockquote::after { bottom: 0; transform: translate(calc(-50% - 0.1rem),50%) rotate(45deg); } #toc { display: block; background-color: #FEFBF8; border: none; padding: 0.1rem 1rem; box-shadow: 0 0 4px rgba(0,0,0,0.3); border-right: solid 0.2rem var(--headerColor); padding: 0.75em; position: relative; } #toc::before, #toc::after { content: ""; display: block; height: 0.5rem; width: 0.5rem; position: absolute; right: 0; background-color: var(--headerColor); } #toc::before { top: 0; transform: translate(calc(0.1rem + 50%),-50%) rotate(45deg); } #toc::after { bottom: 0; transform: translate(calc(0.1rem + 50%),50%) rotate(45deg); } #toc-list { font-family: var(--header-font); } #toc-list > div[style*="margin-left: 1em;"] { margin-left: 0.5em!important; } #toc-list > div:not([style*="margin-left: 1em;"]) { display: none; } .scp-image-block { border: solid 8px var(--primaryBackgroundColor); box-shadow: 0px 0px 4px rgba(0,0,0,0.3); box-sizing: border-box; position: relative; z-index: 0; } .scp-image-block::before, .scp-image-block::after { content:''; position: absolute; pointer-events: none; border: solid 0.25rem var(--headerColor); transform: rotate(25deg); } .scp-image-block::before { right: -0.135rem; height: 36px; width: 9px; top: -14.25px; border-radius: 0 0 2rem 2rem; border-top: none; } .scp-image-block::after { top: -25px; right: -0.94rem; height: 16px; width: 14px; border-radius: 2rem 2rem 0 0; border-bottom: solid 0.55rem transparent; z-index: -1; } .scp-image-block .scp-image-caption { background-color: var(--primaryBackgroundColor); border-top: solid 4px var(--primaryBackgroundColor); color: var(--textColor); } .scp-image-block.block-left, .scp-image-block.block-right { margin: 0.25rem 2rem 0.625rem; } .scp-image-block.block-left { margin-left: 0.5rem; } .scp-image-block.block-right { margin-right: 0.5rem; } @media (max-width: 640px) { .scp-image-block.block-left, .scp-image-block.block-right { float: none; clear: both; margin-left: auto; margin-right: auto; } } #page-content .wiki-content-table tr th { border: solid 1px var(--linkColor); color: var(--linkColor); background-color: var(--primaryBackgroundColor); /* 為表格標題設置邊框*/ } #page-content .wiki-content-table tr td { border: solid 1px var(--linkColor); /* 為表格內容設置邊框*/ } /* 報紙頁面結束*/ /*---- Side ToC setup ----*/ .anchor { position: sticky; height:0; top: 0.5rem; z-index: 4; } .tocbox { margin-top: 0; position: absolute; top: 0; right: max(-18.75rem, -17vw); z-index: 4; box-sizing: border-box; width: max-content; pointer-events: none; } #page-content .tocbox .toc-u { padding: 0.5rem; background-color: #FEFBF8; box-shadow: 0 0 4px rgba(0,0,0,0.3); border-right: solid 0.2rem var(--headerColor); position: relative; width: 15rem; max-height: calc(98vh - 2rem); max-width: calc((30vw - 50% - 6rem)/1.2); margin-right: 0; margin-left: auto; pointer-events: all; } .toc-u #toc::before, .toc-u #toc::after { display: none; } .toc-u::before, .toc-u::after { content: ""; display: block; height: 0.5rem; width: 0.5rem; position: absolute; right: 0; background-color: var(--headerColor); } .toc-u::before { top: 0; transform: translate(calc(0.1rem + 50%),-50%) rotate(45deg); } .toc-u::after { bottom: 0; transform: translate(calc(0.1rem + 50%),50%) rotate(45deg); } #page-content .tocbox .toc-u #toc-list { overflow-y: auto; overflow-x: hidden; max-height: 84vh; padding: 0 0.5em 1em; scrollbar-width: thin; } #page-content .tocbox .toc-u #toc-list::-webkit-scrollbar { width: 6px; } .tocbox table, .tocbox tbody, .tocbox tr, .tocbox td, .tocbox #toc { display: contents; } #toc-list > div { position: relative; } #toc-list > div[style*="1em"]::before { content: "•"; display: inline-block; position: absolute; left: -0.75em; color: var(--accentColor); } @media (max-width: 1340px) { .anchor { filter: none; transition: filter 0.2s ease-out; } .tocbox { right: -1rem; width: unset; } .tocbox::before { content: ""; display: block; position: absolute; background-color: transparent; width: 1.5rem; height: 100%; top: 0; right: -0.25rem; pointer-events: all; } .tocbox::after { content: ""; display: block; position: absolute; background-color: transparent; width: 0; height: 0; border: solid 1rem transparent; border-left-width: 0.5rem; border-right-color: var(--headerColor); top: calc(50% - 1rem); right: 0; pointer-events: all; transition: border-right-width 0.15s ease-out; } #page-content .tocbox .toc-u { width: -moz-fit-content; width: fit-content; max-width: 60vw; box-shadow: none; clip-path: inset(-0.5rem -0.5rem -0.5rem calc(100% - 0.65rem)); transition: clip-path 0.2s ease-out; pointer-events: none; } .anchor:hover { filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2)); } .tocbox:hover { pointer-events: all; } .tocbox:hover::after { border-right-width: 0; } #page-content .tocbox:hover .toc-u { pointer-events: all; clip-path: inset(-0.5rem -0.5rem -0.5rem -0.35rem); } } /* 花式可折疊 */ #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { background-color: var(--primaryBackgroundColor); border-radius: 0.35rem; width: min-content; white-space: nowrap; overflow: hidden; margin: auto; } #page-content .collapsible-block-folded { background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%); background-size: 0 100% ; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--link-timing); } #page-content .collapsible-block-folded:hover, #page-content .collapsible-block-folded:focus-within { background-size: 100% 100% ; transition: background-size var(--link-timing); } #page-content .collapsible-block-unfolded-link { background-color: var(--selectionColor); box-shadow: 0 0 0 0.2rem var(--link-timing); } #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { margin-top: 10px; margin-bottom: 10px; } #page-content .collapsible-block-link { display: inline-flex; padding: 0.5rem 1rem; text-decoration: none; color: var(--textColor); font-weight: bold; } #page-content .collapsible-block-unfolded-link .collapsible-block-link { color: var(--primaryBackgroundColor); } /*---- 側面 ToC 設置 ----*/ .anchor { position: sticky; height:0; top: 0.5rem; z-index: 4; } .tocbox { margin-top: 0; position: absolute; top: 0; right: max(-18.75rem, -17vw); z-index: 4; box-sizing: border-box; width: max-content; pointer-events: none; } #page-content .tocbox .toc-u { padding: 0.5rem; background-color: #f8fdfe; box-shadow: 0 0 4px rgba(0,0,0,0.3); border-right: solid 0.2rem var(--headerColor); position: relative; width: 15rem; max-height: calc(98vh - 2rem); max-width: calc((30vw - 50% - 6rem)/1.2); margin-right: 0; margin-left: auto; pointer-events: all; } .toc-u #toc::before, .toc-u #toc::after { display: none; } .toc-u::before, .toc-u::after { content: ""; display: block; height: 0.5rem; width: 0.5rem; position: absolute; right: 0; background-color: var(--headerColor); } .toc-u::before { top: 0; transform: translate(calc(0.1rem + 50%),-50%) rotate(45deg); } .toc-u::after { bottom: 0; transform: translate(calc(0.1rem + 50%),50%) rotate(45deg); } #page-content .tocbox .toc-u #toc-list