您正在查詢的標題為:關注組織
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:機動特遣隊
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:基金會設施
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:人物檔案
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:世界線中心頁
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:系列檔案室
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:競賽資料庫
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:異常物品紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:超常事件紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:未解明地點列表
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
您正在查詢的標題為:基金會故事
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消
評分模組:
著作資訊模組:
更多資訊
更多與你頁面有關的資訊。
這個由EstrellaYoshte所打造的美觀性外觀主題,衍生自Paperstack Theme。
為了要使用這個外觀主題,請將以下代碼放置於你頁面中的任何地方:
[[include :scp-zh-tr:theme:penumbra]]
你也可以透過在[[include]]後面加入以下的CSS模組,來改變title、subtitle、header logo與accent color的屬性:
:root {
--header-title: "大標題";
--header-subtitle: "小的副標題";
--lgurl: url("你的url連結");
--accentColor: 在這裡填入顏色;
}
默認情況下來說,顏色會是#1EB5E8。

圖片。
一條水平線可以透括使用5個連字號「-----」來創建,並且如果它沒被包在任何東西裡面的話(例如引用塊),它會延伸並橫跨整個頁面。在這份文件中被拿來分段的就是水平線。
標題可以被以在一行的開頭添加一至六個加號「+」來創建
這是個tabview
這是個引用塊,可以透過在每一行的開頭添加「> 」來創建。
更多文字
這是個水平線。
巢狀引用塊
這是個 | 表格 |
---|---|
你應該要 | 知道該如何 |
創建這東西了 |
[[div class="darkbox"]]
[[div class="lightbox"]]
sidebox div 的設置如下所示:
[[div class="limit"]] <— 設置anchor的起始位置
[[div class="anchor"]] <— 設置sidebox的黏著位置
[[div class="sidebox"]]
放在sidebox裡面的文字。
[[/div]]
[[/div]]
被sidebox略過的文字。
[[/div]] <— 設置anchor的終點位置
如果去掉limit div的話,anchor就會在滾動過黏著位置之後跟著漂動。
注意,sidebox div在螢幕寬度1290px以下的時候會最小化。(感謝Woedenaz的代碼!)
Header的字體是Josefin Sans。
Body的字體是Roboto。
Monospace的字體是Fira Code。
原始碼:
/* Penumbra Theme [2020 Wikidot Theme] By EstrellaYoshte Based on: Paperstack Theme by EstrellaYoshte Ad Astra Theme by NatVoltaic and stormbreath Inkblot Theme by Croquembouche Anderson Robotics Theme by Croquembouche BHL Style Collapsible by Monkatraz */ @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); @import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap); #page-content { font-size: .9rem; } body { font-family: 'Roboto', sans-serif; color: #EDEDED; background-color: #2F333C; background-image: linear-gradient( to bottom, #21252E, #21252E 90px, #21252E 90px, #2F333C 200px, #2F333C 200px, #2F333C 100%); background-repeat: no-repeat; } #main-content { top: -1.2rem; } /* ---- SCROLLBAR ---- */ ::-webkit-scrollbar { width: 9px; background: transparent; } ::-webkit-scrollbar-track { background: #21252E; } ::-webkit-scrollbar-thumb { background: var(--accentColor); border: none; } :root { scrollbar-color: var(--accentColor) #21252E; scrollbar-width: thin; } /* ---- HEADER ---- */ div#container-wrap { background-image: none; } #header { background-image: none; height: 8.75rem; } div#extra-div-1 { height: 164px; width: 100%; top: 0; position: absolute; background: var(--lgurl); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; z-index: -1; } #header h1, #header h2 { margin-left: 0; float: none; text-align: center; } /* Move the subtitle down a smidge */ #header h2 { margin-top: 0.45rem; } /* Hide the existing text */ #header h1 span, #header h2 span { font-size: 0; display: none; } /* Style the new text */ #header h1 a::before, #header h2::before { color: var(--accentColor); font-family: 'Josefin Sans', sans-serif; text-shadow: none; } /* Set the new text's content from variable */ #header h1 a::before { content: var(--header-title, "SCP 基金會"); font-weight: 300; font-size: 1.3em; } #header h2::before { content: var(--header-subtitle, "控制 - 收容 - 保護"); font-weight: 600; font-size: 1.22em; } #login-status { color: #ededed; } #login-status a { color: var(--accentColor); } #account-topbutton { border: none; margin-left: 0.35em; padding: 0 0.45em; font-size: 1em; position: relative; } #account-topbutton::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: var(--accentColor); opacity: 0.125; } #account-options { width: 6.25rem; background: #21252E; border: none; border-right: solid 3px var(--accentColor); } #account-options::before, #account-options::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } #account-options::before { background: rgba(0,0,0, .4); } #account-options::after { background-color: var(--accentColor); mix-blend-mode: overlay; } #account-options > ul { position: relative; z-index: 1; } #account-options ul a { color: var(--accentColor); background-color: transparent; font-weight: bold; letter-spacing: 0.01em; padding: 0.25em 0.5em; text-align: right; } #account-options ul a:hover { color: #21252E; background: var(--accentColor); } #footer { background: transparent; color: #ededed; font-size: 0.625rem; margin-top: 0.25em; padding: 0.25em 0.35em; display: flex!important; align-items: center; justify-content: flex-end; flex-wrap: wrap; } #footer > a[href*="www.wikidot.com"] { color: #ededed; padding: 0 0.85ch 0 0.5ch; border-right: 1px solid currentColor; } #footer .options { float: none; order: 2; width: max-content; font-size: 0; } #footer .options a { color: #ededed; font-size: 0.625rem; padding: 0 0.85ch; border-right: 1px solid currentColor; } #footer .options a:last-child { border-right: none; padding-right: 0; } #license-area { color: #ededed; background-color: #21252E; border-top: solid 0.1rem var(--accentColor); } #footer-bar { border: none; padding: 0 0 1em; margin: 0; max-width: 100%; background-color: #21252E; } #footer-bar .units { display: flex; flex-wrap: wrap; justify-content: center; } #search-top-box { top: 2.2rem!important; right: 8px; } #search-top-box-form > input[type=submit] { border: solid 1px #ededed; background: #21252E!important; box-shadow: none; border-radius: 0; color: #ededed; transition: color 0.15s linear; } #search-top-box-form input[type=submit]:hover { border: solid 1px var(--accentColor); box-shadow: none; color: var(--accentColor); } #search-top-box-form > input[type=text] { display: none; } /* ---- TOP BAR ---- */ #top-bar { top: 8.4rem; display: flex; justify-content: center; right: 0; } @media (max-width: 768px) { .mobile-top-bar { display: flex; justify-content: center; max-width: 100%; width: 100%; left: 0; } } #top-bar, #top-bar a { color: #ededed; transition: color 0s; } #top-bar ul li ul, #top-bar ul li ul li ul { border-color: var(--accentColor); box-shadow: none; } #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a { border-top-color: #2F333C; } #top-bar ul li.sfhover a, #top-bar ul li:hover a { background: #21252E; color: #ededed; } #top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover { background: #21252E; /* top bar hover background color */ color: var(--accentColor); transition: color 0.1s linear; } /* ---- SIDE BAR ---- */ div#side-bar { background: #21252E; clear: both; width: 19em; padding:0; border-radius: 0; box-shadow: none; overflow-x: hidden; direction: rtl; } #side-bar .side-block, #interwiki .side-block { border: transparent; border-radius: 0; padding: 5px 15px; box-shadow: none; background-color: transparent; direction: ltr; } #side-bar .side-block.media { position: relative; background-color: #21252E; margin: 0.75em 0; } #side-bar .side-block.media::before, #side-bar .side-block.media::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } #side-bar .side-block.media::before { background: rgba(0,0,0, .4); } #side-bar .side-block.media::after { background-color: var(--accentColor); mix-blend-mode: overlay; } #side-bar .side-block.media > * { display: flex; justify-content: space-evenly; position: relative; z-index: 1; } #side-bar .side-block.resources { background-color: transparent; position: relative; margin-bottom: 0.25em; padding: 0.75em 15px 0.5em; } #side-bar .side-block.resources::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: -1; background-color: var(--accentColor); opacity: 0.125; } #side-bar .collapsible-block-unfolded-link { border-bottom: solid 1px var(--accentColor); } #side-bar .collapsible-block-unfolded-link .collapsible-block-link { color: var(--accentColor); } #side-bar .collapsible-block-folded .collapsible-block-link, #side-bar .collapsible-block-unfolded-link .collapsible-block-link { font-family: 'Josefin Sans', sans-serif; } #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover { color: #ffffff; } #side-bar .menu-item img, #interwiki .menu-item img {display: none; } #side-bar .menu-item a[href="/"] { display: block; width: max-content; margin-left: auto; margin-right: auto; } #side-bar .heading, #interwiki .heading { color: #ededed; font-family: 'Josefin Sans', sans-serif; font-size: 0.94rem; border-bottom: solid 1px #ededed; margin-top: 1.25em; } #top-bar div.open-menu a { border-radius: 0; box-shadow: none; color: var(--accentColor); background-color: #21252E; border: solid 1px #21252E; } /* ---- Interwiki ---- */ iframe.scpnet-interwiki-frame, div.scpnet-interwiki-wrapper { position: relative; width: auto; } div.scpnet-interwiki-wrapper { margin: 0 -5px 0.75em; background-color: #21252E; } .scpnet-interwiki-wrapper::before, .scpnet-interwiki-wrapper::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .scpnet-interwiki-wrapper::before { background: rgba(0,0,0, .4); } .scpnet-interwiki-wrapper::after { background-color: var(--accentColor); mix-blend-mode: overlay; } #interwiki { --accentColor: #888888; } #interwiki body { background: none; } #interwiki .side-block { margin-top: 0; padding: 0 15px; } #interwiki .side-block a, #interwiki .side-block a:visited { color: var(--accentColor); } #interwiki .side-block a:hover, #interwiki .side-block a:visited:hover { color: #ffffff; } #interwiki .heading { color: var(--accentColor); border-bottom-color: currentColor; } #interwiki .menu-item img { display: none; } /* ------------------- */ @media (max-width: 767px) { #main-content { padding: 0; margin: 0 5%; border-left: none; } #page-title { margin-top: 0.7em; } #side-bar { background-color: #21252E; left: -19em; } #side-bar:target { width: 19em; border: none; box-shadow: none; } #side-bar .close-menu { transition: width 0.5s ease-in-out 0.1s, opacity 1s ease-in-out 0s; display: block; position: fixed; width: 100%; height: 100%; top: 0; right: 0; background: rgba(0,0,0,0.3); background-position: 19em 50%; z-index: -1; opacity: 0; pointer-events: none; } #side-bar:target .close-menu { width: calc(100% - 19em); right: 0; left: auto; opacity: 1; pointer-events: auto; } #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr { margin: 3em -5.5%; } #side-bar { top: 0; } #search-top-box { top: 107px; } } /* ---- TABS ---- */ /* ---- YUI TAB BASE ---- */ .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-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(--accentColor); box-shadow: none; } .yui-navset .yui-nav a, /* ---- Link Modifier ---- */ .yui-navset .yui-navset-top .yui-nav a{ color: #ededed; font-weight: bold; /* ---- Tab Background Colour | [UNSELECTED] ---- */ background-color: #21252E; border: unset; box-shadow: none; box-shadow: none; transition: background-color 0.15s linear; } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus{ color: #ededed; /* ---- Tab Background Colour | [HOVER] ---- */ background-color: var(--accentColor); } .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; color: #ededed; background-color: #21252E; border-color: transparent; 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(--accentColor); } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em{ border: none; } .yui-navset .yui-nav .selected a{ width: 100%; color: #21252E; font-weight: bold; } .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:active{ color: #21252E; background-color: var(--accentColor); } .yui-navset .yui-content { background-color: #21252E; box-shadow: none; } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content{ padding: .5em; border: none; } /*---- TAB ANIMATION by Croquembouche ---- */ .yui-navset .yui-content > div { display: block; top: 0; overflow: hidden; transform-origin: 0 0; } #page-content .yui-navset .yui-content > div[style*="none"] { display: block !important; flex: 0; max-height: 0; padding: 0 0.5em; border-width: 0; /* The following transition affects the one that DISAPPEARS */ transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.18,.51,.54,.9) 0s; animation: tab-disappear 0.5s ease-in-out 0s 1 both; } #page-content .yui-navset .yui-content > div[style*="block"] { display: block !important; flex: 1; max-height: 9999rem; /* The following transition affects the one that APPEARS */ transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.18,.51,.54,.9) 0.5s; animation: tab-appear 0.5s ease-in-out 0.5s 1 both; } @keyframes tab-disappear { 0% { max-height: 9999rem; } 1% { max-height: 100vh; } 100% { max-height: 0; } } @keyframes tab-appear { 0% { max-height: 0; } 99% { max-height: 100vh; } 100% { max-height: 9999rem; } } /* ---- INFO BAR ---- */ body{ --barColour: #21252E; --linkColour: #ededed; } .info-container .collapsible-block-content { padding: 0 .5em 30px; } #page-content .info-container > .collapsible-block .collapsible-block-link { padding: 0; } .info-container .collapsible-block-content .wiki-content-table { width: 100%; } /* Ayer's info-bar patch by Monkatraz */ #page-content .info-container .collapsible-block-folded, #page-content .info-container .collapsible-block-unfolded-link { width: 100%; max-width: 100%; margin: 0 auto; padding: 0; box-shadow: none; } #page-content .info-container .collapsible-block-link::before, #page-content .info-container .collapsible-block-unfolded-link::before { content: " "; display: none; } #page-content .info-container .collapsible-block-content::after { display: none; } /* ---- INFO PANE ---- */ #page-content .creditRate{ margin: unset; margin-top: 4px; margin-bottom: 4px; margin-right: 3px; } #page-content .rate-box-with-credit-button { background-color: #21252E; border: solid 2px #21252E; border-radius: 0; box-shadow: 3px 0px 0px 0px var(--accentColor); } #page-content .rate-box-with-credit-button .creditButton p a { border-left-color: transparent; } #page-content .rate-box-with-credit-button .page-rate-widget-box .cancel { border-radius: 0; } #page-content .rate-box-with-credit-button .page-rate-widget-box .rate-points { border-left: 0; } .rate-box-with-credit-button .page-rate-widget-box .cancel a:hover { border-radius: 0; } #page-content .rate-box-with-credit-button .fa-info { color: #ededed; } #page-content .rate-box-with-credit-button .fa-info:hover { color: var(--accentColor); } #page-content .creditButtonStandalone p a { background-color: #21252E; border: solid 2px #21252E; border-radius: 0; box-shadow: 3px 0px 0px 0px var(--accentColor); color: #ededed; } #page-content .creditButtonStandalone p a:hover { color: var(--accentColor); } #page-content .modalbox { background: #2F333C !important; color: #ededed; box-shadow: none; border-radius: 0; } .close-credits, .credit-back { filter: grayscale(100%) invert(100%) contrast(275%); } /* ---- PAGE RATING ---- */ .page-rate-widget-box { margin: unset; border-radius: 0; border: solid 2px #21252E; box-shadow: 3px 0px 0px 0px var(--accentColor); background-color: #21252E; margin-top: 4px; margin-bottom:4px; margin-right: 3px; } div.page-rate-widget-box .rate-points { background-color: #21252E; border: none; color: #ededed !important; text-transform: capitalize; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { background-color: #21252E; border-top: none; border-bottom: none; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { background: transparent; color: #ededed; } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover { background: #21252E; color: var(--accentColor); } .page-rate-widget-box .cancel { background: transparent; background-color: #21252E; border: none; } .page-rate-widget-box .cancel a { color: #ededed; } .page-rate-widget-box .cancel a:hover { background: #21252E; color: var(--accentColor); } /* ---- PAGE ELEMENTS ---- */ .page-source, tt{ font-family: "Fira Code", monospace; font-size: 0.87rem; } .code pre, .code p, .code { font-family: "Fira Code", monospace; font-size: 0.87rem; color: #21252E; } h1 { color: var(--accentColor); font-family: 'Josefin Sans', sans-serif; font-weight: bold; } h2, h3, h4, h5, h6 { color: #EDEDED; font-family: 'Josefin Sans', sans-serif; font-weight: bold; } #page-title { color: #ededed; font-family: 'Josefin Sans', sans-serif; font-size: 1.65rem; text-align: center; border-color: #ededed; } /* Clicky links */ a, a.newpage, a:visited, #side-bar a:visited { color: var(--accentColor); transition: color 0.15s linear; } a:hover, a.newpage:hover, a:visited:hover, #side-bar a:visited:hover { color: #ffffff; text-decoration: none; background-color: var(--accentColor); } a.newpage { filter: hue-rotate(180deg); } /* patch for sidebar media, collapsibles, ACS, info button and ayers module so link doesn't override */ #page-content .collapsible-block-folded a:hover, #page-content .collapsible-block-unfolded-link a:hover, #page-content .rate-box-with-credit-button .fa-info:hover, #side-bar .side-block.media a:hover, .danger-diamond a:hover, .printuser.avatarhover > a:first-child:hover { background: transparent; } .info-container .collapsible-block-folded .collapsible-block-link, .info-container .collapsible-block-link { background: var(--linkColour) !important; } /*---------------------------*/ hr { background-color: var(--accentColor); } blockquote, div.blockquote, #toc { background-color: #21252E; border: solid 2px #2F333C; box-shadow: -3px 0px 0px -0.1px var(--accentColor); } .code { background-color: #F8F8F8; border: solid 3px #2F333C; box-shadow: none; } .scp-image-block { border: solid 8px #21252E; border-bottom: solid 0px #21252E; box-shadow: 0px 0.26rem 0px 0px var(--accentColor); box-sizing: border-box; } .scp-image-block .scp-image-caption { background-color: #21252E; border: solid 4px #21252E; color: #ededed; font-size: 0.84rem; } .scp-image-block.block-left { margin-left: 0; } .scp-image-block.block-right { margin-right: 0; } @media (max-width: 540px) { .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(--accentColor); color: var(--accentColor); background-color: #21252E; /* set border for table title */ } #page-content .wiki-content-table tr td { border: solid 1px var(--accentColor); /* set border for table content */ } /* fancy collapsible */ #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { background: #21252E; transition: background 0.25s linear; width: -moz-fit-content; width: fit-content; overflow: hidden; margin: auto; box-sizing: border-box; } #page-content .collapsible-block-folded .collapsible-block-link::before { content: "▷ "; } #page-content .collapsible-block-unfolded .collapsible-block-link::before { content: "▽ "; } #page-content .collapsible-block-link { display: inline-block; padding: 0.5rem 1rem; text-decoration: none; color: #ededed; font-weight: bold; text-align: center; } #page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover { background: var(--accentColor); } #page-content .collapsible-block-unfolded-link { box-shadow: 0px -0.26rem 0px 0px var(--accentColor); } #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { margin-top: 10px; margin-bottom: 10px; } /* Selection */ ::selection { background: var(--accentColor); color: #ffffff; } /* Footnotes */ .hovertip { font-size: .9rem; background-color: #21252E !important; border: solid 1px var(--accentColor) !important; } .footnotes-footer { background-color: #21252E; padding-left: 1.4rem; padding-right: 1.4rem; padding-bottom: 1.5rem; box-shadow: -0.24rem 0px 0px 0px var(--accentColor); } .footnotes-footer .title { color: #ededed; } .footnote .f-footer, .equation .e-footer, .reference .r-footer { display: none; } /* Tags */ #main-content .page-tags a { margin-top: .18rem; } .page-tags span { border-top: 1px solid #ededed; } /* Pop-Up Windows */ .owindow { background-color: #21252E; border-color: var(--accentColor); } .owindow .modal-header { background-color: #21252E; } .owindow .modal-body img { background-color: transparent !important; } .owindow .title { background-color: #21252E; color: #var(--accentColor); border-bottom: 1px solid #2F333C; } .owindow .button-bar a { background-color: #21252E; border-color: var(--accentColor); color: #ededed; } .owindow .button-bar a:hover { background-color: var(--accentColor); } .owindow.owait .content { background-image: none; padding: 0.25rem 1.5rem 1.5rem; } .owindow.owait .content::after { content: " "; display: block; width: 1.6rem; height: 1.6rem; margin: -1rem auto; margin-top: 0.85rem; border-radius: 50%; border: 0.375rem solid black; border-color: var(--accentColor) #2F333C #2F333C; animation: loading 0.75s linear infinite; } @keyframes loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Edit Buttons */ .buttons .btn { background-color: #21252E; border-color: var(--accentColor); color: var(--accentColor); padding: 0.45em 0.625em; font-weight: bold; transition: color 0.15s linear; cursor: pointer; } .buttons .btn:hover { background-color: var(--accentColor); color: #21252E; } /* Edit Lock Info*/ #lock-info { background-color: #21252E; border-color: #ededed; } /* Close Button for Page Source, Rating, Etc */ a.action-area-close:hover { background-color: var(--accentColor); } /* History */ .pager .current { background-color: var(--accentColor); border-color: #ededed; } .pager a, table.page-history td.optionstd a { border-color: currentColor; } /* History Compare */ .inline-diff ins, .inline-diff del { color: #21252E; } /* Page Source */ .page-source { border: none; padding: 1.5em 1.75em; background-color: #21252E; } /* ---- CUSTOM SYNTAX ---- */ .darkbox { background-color: #21252E; border-left: solid 0.26rem var(--accentColor); border-right: solid 0.26rem var(--accentColor); padding: .4rem; margin-top: 12px; margin-bottom:12px; } .lightbox { background-color: #ededed; color: #21252E; border-left: solid 0.26rem var(--accentColor); border-right: solid 0.26rem var(--accentColor); padding: .4rem; margin-top: 12px; margin-bottom:12px; } .lightbox h2, .lightbox h3, .lightbox h4, .lightbox h5, .lightbox h6 { color: #21252E; } /* author label compatibility */ #page-content .authorlink-wrapper { margin-top: -0.1rem; --author-right-adjust: 0; --swatch-background: 33, 37, 46; --swatch-text-general: 237, 237, 237; } /*------------------------------------*/ .limit { margin-bottom: -1rem; z-index: 5; } .anchor { position: sticky; height:0; top: 0; z-index: 5; } .sidebox { background-color: #21252E; border-top: solid 2px var(--accentColor); padding: .14rem; margin-top: 0; margin-bottom: 8px; width: calc((100vw - 870px)/2); max-height: calc(100vh - 18rem); position: absolute; top: 0; left: 103.5%; z-index: 5; overflow: auto; box-sizing: border-box; } /* Sidebox mobile optimization, courtesy of Woed */ @media (max-width: 1290px) { .sidebox { width: auto; max-width: 65vw!important; border: none; padding-left: 0.4rem; padding-right: 0.4rem; top: 0.75rem; right: calc(((100vw - 45.8rem)/2) * -1); left: initial; -webkit-clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem)); clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem)); -webkit-transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s; transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s; -o-transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s; transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s; transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s; overflow: visible; } .sidebox::before, .sidebox::after { content: " "; position: absolute; right: 0; } .sidebox::before { top: calc(50% - 0.75rem); width: 0; height: 0; border-top: 0.75rem solid transparent; border-bottom: 0.75rem solid transparent; border-right: 0.75rem solid var(--accentColor); transition: border 0.1s ease-in-out 0.1s; z-index: 10; } .sidebox::after { top: 0; max-width: 0.75rem; width: 100%; height: 100%; box-shadow: 0.15rem 0 0 0 var(--accentColor); max-height: calc(100vh - 18rem); background-color: #21252E; z-index: -1; transition: box-shadow 0.5s ease-in-out 0.1s, max-width 0.5s ease-in-out 0.1s; } .sidebox > * { opacity: 0; -webkit-transition: opacity 0.2s ease-in-out 0.2s; -o-transition: opacity 0.2s ease-in-out 0.2s; transition: opacity 0.2s ease-in-out 0.2s; } .sidebox:hover { overflow: visible; -webkit-clip-path: inset(-0.125rem -0.25rem 0 0); clip-path: inset(-0.125rem -0.25rem 0 0); -webkit-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s; transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s; -o-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s; transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s; transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s; } .sidebox:hover::before { border-top: 0 solid transparent; border-bottom: 0 solid transparent; } .sidebox:hover::after { box-shadow: 0 -0.125rem 0 0 var(--accentColor); right: 0; max-width: 100%; } .sidebox:hover > * { opacity: 1; } } @media (max-width:768px) { .sidebox, .sidebox:hover { right: calc(((100vw - (100% - 3rem))/2) * -1 + 1.9rem); } } :root { --accentColor: #1EB5E8; --lgurl: url("https://scp-wiki.wdfiles.com/local--files/theme%3Apenumbra/logo.png"); }