BASALT THEME
VERSION 1.5
● WHAT IS THIS?
● これは何?
BASALT is an aesthetic theme, tied to no canon, series, or GoI, developed by Liryn and
Placeholder McD as an extension of
EstrellaYoshte's Paperstack Theme.
BASALTテーマは、EstrellaYoshteのPaperstackの拡張として
Lirynと
Placeholder McDによって開発された、いずれのカノン・シリーズ・GoIにも縛られない、美しさにこだわったテーマです。
Much like Black Highlighter, BASALT overhauls a large amount of the site's layout, and changes many UI elements typically glossed over by most themes in an effort to increase productivity and user accessibility. It also looks cool.
Black Highlighterと同様に、BASALTはサイトのレイアウトを大幅に見直し、生産性やアクセシビリティの向上のため、大半のテーマでは通常は見落とされている多くのUI要素を変更しました。そして外観もCoolです。
To use BASALT, simply paste the following code into your article:
BASALTテーマを使用するには、次の構文を記事にコピー&ペーストするだけです。
[[include :scp-jp:theme:basalt]]
● THEME SETTINGS
● テーマ設定
Theme Settings, sometimes called Variables, are extra strings of text which users may add to the BASALT include module to opt in or out of certain features.
テーマ設定 (変数と呼ばれることもあります) は、BASALTのinclude構文に書き加えることで特定の機能の使用/不使用を選択することができる追加の文字列です。
In order to apply a Setting, insert one of the examples listed below after the main include, but before the two brackets at the end, like so:
設定を適用するためには、include構文の本体と最後の2つの括弧の間に、下記のリストにある例のひとつを次のように挿入します。
[[include :scp-jp:theme:basalt themesetting=a]]
Theme Settings can be easily combined together. To use multiple of them at once, follow the below formatting:
テーマ設定を組み合わせて使うのは簡単です。同時に複数を使用するには、以下の書式に従ってください。
[[include :scp-jp:theme:basalt firstthemesetting=a|secondthemesetting=a|thirdthemesetting=a]]
LIST OF THEME SETTINGS (AS OF VERSION 1.0)
テーマ設定一覧 (バージョン1.0現在)
hidetitle=a |
Removes page title. ページタイトルを非表示化します。 |
acsanimation=a |
Disables the ACS Animation component, which is enabled by default. デフォルトで有効になっているACSアニメーションを無効化します。 |
darkmode=a |
Enables Dark Mode. (See: ONYX (Dark Mode)) ダークモードを有効化します。 (参照: ONYX (ダークモード)) |
redmode=a |
Enables Red Mode. Dark Mode is REQUIRED for this to function properly. (See: GARNET (Red Mode)) レッドモードを有効化します。この機能を適用するにはダークモードを使用している必要があります。 (参照: GARNET (レッドモード)) |
darksidebar=a |
Applies the Dark Mode sidebar styling to Light Mode articles. ダークモードでのサイドバーのスタイルをライトモードに適用します。 |
● CUSTOMIZATION
● カスタマイズ
CHANGE TITLE/SUBTITLE/LOGO
タイトル・サブタイトル・ロゴの変更
If you would like to change the title, subtitle, and/or logo displayed on the header, use the following code to do so:
ヘッダーに表示されるタイトル・サブタイトル・ロゴを変更したいときは、次のコードを使用してください。
:root {
--logo: url(<画像リンク>);
--title: "<タイトルテキスト>";
--subtitle: "<サブタイトルテキスト>";
}
It is recommended to keep the --title property at about the same length as the default text (or shorter than it), to avoid encountering display issues on mobile devices.
--titleプロパティは、モバイル機器での表示の問題を避けるため、デフォルトの文字列と概ね同じ (あるいはより短い) 文字数にすることを推奨します。
########
※JP版テーマでは事情が少し異なります。"SCP FOUNDATION"と比べて"SCP財団"は文字数がかなり少なく、それに合わせてトップバーの位置を変更した関係で、状況によっては改変する必要があります。次のコードを使用して調整することで、ヘッダータイトルおよび/またはヘッダーサブタイトルを長くしたときに、1020px以上の画面幅のレイアウトでトップバーと重なるのを防ぐことができます。
:root {
--titleLength: <長さの値>;
}
ただし、--titleLengthプロパティの値は15.7rem (約250px) 以下にすることを推奨します。これは、原語版テーマと同じく表示の問題を避けるためです。
########
By default, the logo and text shown on the sidebar matches that of the header. If you would like to change this, use the following code:
デフォルトでは、サイドバーに表示されるロゴとテキストはヘッダーのものと同一になります。これを変更したいときは、次のコードを使用してください。
:root {
--sidelogo: url(<画像リンク>);
--sidesubtitle: "<テキスト>";
}
ONYX (DARK MODE)
ONIX (ダークモード)

ONYX

ONYX
To enable Dark Mode, use the following Theme Setting, as detailed previously:
ダークモードを有効化するには、前述したとおり、次のコードを使用してください。
[[include :scp-jp:theme:basalt darkmode=a]]
GARNET (RED MODE)
GARNET (レッドモード)

GARNET

GARNET
To enable Red Mode, use the following Theme Setting, as detailed previously:
レッドモードを有効化するには、前述したとおり、次のコードを使用してください。
[[include :scp-jp:theme:basalt darkmode=a|redmode=a]]
● INCLUDED WITH BASALT
● BASALTが導入しているもの
↑ここの訳を別の形にできる気がします。
COMPONENTS
コンポーネント
BASALT comes pre-packaged with several community-made components:
BASALTには、コミュニティ製のいくつかのコンポーネントがあらかじめパッケージされています。
…And makes some visual changes to these ones, should you include them:
また、もしこれらのコンポーネントを使ったなら、それらの外見が変化しています。
THEMES
テーマ
BASALT steals borrows elements from:
BASALTはこれらのテーマの要素を 盗用 借用しています。
EXAMPLES
例

画像ブロック
A horizontal rule can be created with 4 hyphens "----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.
分割線は4つのハイフン(----)で作ることができ、何かの中でない限り(例えば引用ブロック)ページ全体に展開されます。この文章を区切る線が分割線です。
A link you have likely visited
訪問したことのあるであろうリンク
Titles can be created by putting between one and six plus "+" symbols at the start of each line.
見出しは行の先頭に1から6個のプラス(+)を置くことで作れます。
This is a Big Text span. Use [[span class="bigtext"]] to create these.
これはビッグテキストのspan要素です。これを作るには [[span class="bigtext"]] を使用してください。
This is a Special Text span. Use [[span class="st"]] to create these.
Special Text spans change color when placed inside colored table divs, as shown below. This is for you, Placeholder.
これはスペシャルテキストのspan要素です。これを作るには [[span class="st"]] を使用してください。
スペシャルテキストspanは、後述するカラーテーブルdivの中では文字色も変更します。 あなたのためだよ、Placeholder。
########
これは圏点のspan要素です。これを作るには [[span class="kt"]] を使用してください。
########
Why was the shovel so special?
Because it was a groundbreaking invention.
英語のジョークの翻訳は難しいですね。
シャベルの何がすごいんだい?
そいつは未知道を切り開く道具なのさ。
というのはどうでしょうか……?
ここにも文章が。
奇妙なり。
長いタブです。たくさん文章が詰まっています。
長いタブです。たくさん文章が詰まっています。
長いタブです。たくさん文章が詰まっています。
長いタブです。たくさん文章が詰まっています。
長いタブです。たくさん文章が詰まっています。
長いタブです。たくさん文章が詰まっています。
長いタブです。たくさん文章が詰まっています。
長いタブです。たくさん文章が詰まっています。
長いタブです。たくさん文章が詰まっています。
長いタブです。たくさん文章が詰まっています。
長いタブです。たくさん文章が詰まっています。
長いタブです。たくさん文章が詰まっています。
░░░░░▄▄▄▄▀▀▀▀▀▀▀▀▄▄▄▄▄▄░░░░░░░
░░░░░█░░░░▒▒▒▒▒▒▒▒▒▒▒▒░░▀▀▄░░░░
░░░░█░░░▒▒▒▒▒▒░░░░░░░░▒▒▒░░█░░░
░░░█░░░░░░▄██▀▄▄░░░░░▄▄▄░░░░█░░
░▄▀▒▄▄▄▒░█▀▀▀▀▄▄█░░░██▄▄█░░░░█░
█░▒█▒▄░▀▄▄▄▀░░░░░░░░█░░░▒▒▒▒▒░█
█░▒█░█▀▄▄░░░░░█▀░░░░▀▄░░▄▀▀▀▄▒█
░█░▀▄░█▄░█▀▄▄░▀░▀▀░▄▄▀░░░░█░░█░
░░█░░░▀▄▀█▄▄░█▀▀▀▄▄▄▄▀▀█▀██░█░░
░░░█░░░░██░░▀█▄▄▄█▄▄█▄████░█░░░
░░░░█░░░░▀▀▄░█░░░█░█▀██████░█░░
░░░░░▀▄░░░░░▀▀▄▄▄█▄█▄█▄█▄▀░░█░░
░░░░░░░▀▄▄░▒▒▒▒░░░░░░░░░░▒░░░█░
░░░░░░░░░░▀▀▄▄░▒▒▒▒▒▒▒▒▒▒░░░░█░
░░░░░░░░░░░░░░▀▄▄▄▄▄░░░░░░░░█░░
This is a blockquote, created by putting "> " at the start of each line.
これは引用ブロックです。行の先頭に"> "を書くことで作成できます。More text
追加の文章
That's a horizontal rule
分割線Nested blockquotes
入れ子になった引用ブロック
This is a regular table |
---|
Text here |
これは通常のテーブルです |
---|
ここに文章 |
Tables are colorable by wrapping them in special divs. Image blocks and Special Text spans which are wrapped in these divs will also change color accordingly.
テーブルは特殊なdivで囲むことでカラーリングが可能です。また、これらのdivで囲まれた画像ブロックと スペシャルテキストspan も、それに応じて色が変更されます。
[[div class="table1"]]
This is a green table |
---|
Text here |
これは緑色のテーブルです。 |
---|
ここに文章 |
[[div class="table2"]]
これは青色のテーブルです。 |
---|
ここに文章 |
[[div class="table3"]]
これは黄色のテーブルです。 |
---|
ここに文章 |
[[div class="table4"]]
これは橙色のテーブルです。 |
---|
ここに文章 |
[[div class="table5"]]
これは赤色のテーブルです。 |
---|
ここに文章 |
[[div class="table6"]]
これは紫色のテーブルです。 |
---|
ここに文章 |
You can also use the following div to create broken tables.
次のdiv要素を使うことで分割テーブルを作ることもできます。
[[div class="tableb"]]
これは分割テーブルです。 |
---|
ここに文章 |
This is a document div. Use [[div class="document"]] to create these. It is recommended not to enclose these inside other divs.
これは ドキュメントdivです。これを作るには [[div class="document"]] を使用してください。 他のdiv要素の中に入れないことを推奨します。
This is a dark document div. Use [[div class="darkdocument"]] to create these. It is recommended not to enclose these inside other divs.
これはダークドキュメントdivです。これを作るには [[div class="document"]] を使用してください。 他のdiv要素の中に入れないことを推奨します。
This is a RAISA memo div. Use [[div class="raisa_memo"]] to create these.
これはRAISA記録・情報保安管理局通達divです。これを作るには [[div class="raisa_memo"]] を使用してください。
NOTICE FROM THE RECORDS AND INFORMATION SECURITY ADMINISTRATION | 記録・情報保安管理局より通達 |
CLASSIFICATION COMMITTEE MEMORANDUM | 分類委員会覚書 |
NOTICE FROM THE EMERGENT THREAT TACTICAL RESPONSE AUTHORITY | 緊急脅威戦術対応機関より通達 |
ETHICS COMMITTEE MEMORANDUM | 倫理委員会覚書 |
THE TEMPORAL ANOMALIES DEPARTMENT | 時間異常部門 |
OVERWATCH COMMAND | 監督司令部 |
NOTICE FROM THE DEPARTMENT OF MISCOMMUNICATIONS | 誤伝達部門より通達 |
This is a Classification Committee memo div. Use [[div class="classification_memo"]] to create these.
これは分類委員会通達divです。これを作るには [[div class="classification_memo"]] を使用してください。
This is an ETTRA memo div. Use [[div class="ettra_memo"]] to create these.
これはETTRA緊急脅威戦術対応機関通達divです。これを作るには [[div class="ettra_memo"]] を使用してください。
This is an Ethics Committee memo div. Use [[div class="ethics_memo"]] to create these.
これは倫理委員会通達divです。これを作るには [[div class="ethics_memo"]] を使用してください。
This is a Temporal Anomalies memo div. Use [[div class="temporal_memo"]] to create these.
これは時間異常部門通達divです。これを作るには [[div class="temporal_memo"]] を使用してください。
This is an Overwatch Command memo div. Use [[div class="overwatch_memo"]] to create these.
これは監督司令部通達divです。これを作るには [[div class="overwatch_memo"]] を使用してください。
This is a Miscommunications Department memo div. Use [[div class="miscomm_memo"]] to create these.
これは誤伝達部門通達divです。これを作るには [[div class="miscomm_memo"]] を使用してください。
This is a decorative div. Use [[div class="notation"]] to create these.
これは装飾divです。これを作るには [[div class="notation"]] を使用してください。
This is another decorative div. Use [[div class="modal"]] to create these.
これは別の装飾divです。これを作るには [[div class="modal"]] を使用してください。
This is slimmer modal div! Use [[div class="smallmodal"]] to create these.
これは上の装飾divのスリムなバージョンです。これを作るには [[div class="smallmodal"]] を使用してください。
This is a third decorative div! Use [[div class="jotting"]] to create these.
これは3つ目の装飾divです。これを作るには [[div class="jotting"]] を使用してください。
This is a fourth decorative div! Use [[div class="transcript"]] to create these.
これは4つ目の装飾divです。これを作るには [[div class="transcript"]] を使用してください。
This is a fifth decorative div! Use [[div class="papernote"]] to create these.
これは5つ目の装飾divです。これを作るには [[div class="papernote"]] を使用してください。
The body font is Inter.
The header and title font is Work Sans.
The monospace font is Fira Code.
本文フォントはNoto Sans JP / Inter。
見出しフォントはM PLUS 1p / Work Sans。
等幅フォントはFira Code。

アイテム番号:
9999
収容クラス:
THEME-IEL

"grid-item"ブロックに含まれる画像ブロック。幅は300pxを推奨します。
ここに短い文章
このテキストは、"textbox"ブロックに含まれています。画像ブロックを含む"grid-item"ブロックの後に使用して、左側の余白を埋めることを目的としています。テキストが重なってしまわないよう、ここに書く段落は短いものにしてください。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
ここからは通常の(どのブロックにも含まれていない)テキストが始まります。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
このテーマは、Containment Breachのインターフェースに着想を得て、EstrellaYoshteによって作成されました。このテーマを使用するには、次のテキストをページの最初に入力してください:
[[include :scp-jp:theme:paperstack]]
[[div class="logo"]]
[[image https://scp-jp.wdfiles.com/local--files/theme%3Apaperstack/lgtrans.png]]
[[/div]]
[[>]]
[[module Rate]]
[[/>]]
[[div class="header-container"]]
[[div class="text-item"]]
[[size 90%]]##grey|**アイテム番号:**##[[/size]]
[[size 220%]]**(番号)**[[/size]]
[[/div]]
[[div class="text-item"]]
[[size 90%]]##grey|**収容クラス:**##[[/size]]
[[size 220%]]**(クラス)**[[/size]]
[[/div]]
[[div class="grid-item"]]
[[include component:image-block name=画像URL|caption=画像キャプション|width=300px|align=center]]
[[/div]]
[[/div]]
[[div class="textbox"]]
ここに短い文章
[[/div]]
使用する"text-item"ブロックの数を増減させることもできます。(4つ以下にすることを推奨します)
[[include :scp-jp:theme:paperstack]]
[[div class="logo"]]
[[image https://scp-jp.wdfiles.com/local--files/theme%3Apaperstack/lgtrans.png]]
[[/div]]
[[>]]
[[module Rate]]
[[/>]]
[[div class="header-container"]]
[[div class="text-item"]]
ここに文章を入力
[[/div]]
[[/div]]

1つだけ"text-item"ブロックを使用した例

3つの"text-item"ブロックを使用した例

4つの"text-item"ブロックを使用した例
"logo"ブロックの画像は任意に変更することができます。
ヘッダーのタイトルも、次のコードを使用して変更できます:
[[module css]]
:root {
--header-title: "ヘッダータイトル";
--header-subtitle: "サブタイトル";
}
[[/module]]
これはタブです。
おや、ここにも文章があります
不思議ですね。
これは長いタブです。こんなに長い文章を含んでいます。1
これは長いタブです。こんなに長い文章を含んでいます。
これは長いタブです。こんなに長い文章を含んでいます。
これは長いタブです。こんなに長い文章を含んでいます。
これは長いタブです。こんなに長い文章を含んでいます。
これは長いタブです。こんなに長い文章を含んでいます。
これは長いタブです。こんなに長い文章を含んでいます。
これは長いタブです。こんなに長い文章を含んでいます。
これは引用ブロックで。, 各行頭に"> "を置くことで作ることができます。
さらなる文字列
これは分割線
入れ子にされた引用ブロック
これは | テーブルです |
---|---|
作り方は | すでに |
知っていますね? |
見出しフォント: Sawarabi Gothic / Josefin Sans
本文フォント: Noto Sans JP / Oxygen
等幅フォント: Fira Code
ソースコード:
/* Paperstack Theme [2020 Wikidot Theme] By EstrellaYoshte Based on: Inkblot Theme by Croquembouche Word Processor Theme by stormbreath Modern Theme by Azamo Simple Yonder Theme by EstrellaYoshte Edited by ukwhatn for SCP-JP */ /* Japanese Font */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap'); /* English Font */ @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Oxygen&display=swap'); @import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap); #page-content { font-size: 0.87rem; } body { font-family: "Noto Sans JP", "Oxygen", sans-serif; } body { color: black; background-image: linear-gradient( to bottom, #EFEFEF, #EFEFEF 276px, #D3D3D3 276px, #ffffff 282px, #ffffff 282px, #ffffff 100% ); background-repeat: no-repeat; } #main-content { top: -1.6rem; padding: 0.2em; } .page-source, .code pre, .code p, .code, tt { font-family: "Fira Code", monospace; } /* ---- HEADER ---- */ div#container-wrap { background-image: none; } div#header { background-image: none; } #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: #333333; 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 FOUNDATION"); font-weight: 300; font-size: 1.3em; } #header h2::before { content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT"); font-weight: 600; font-size: 1.22em; } #login-status, #login-status a { color: #333333; } #page-title { display: none; } #footer, #footer a { background: transparent; color: #333333; } #search-top-box-input, #search-top-box-input:hover, #search-top-box-input:focus, #search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus { border: none; background: #333333; box-shadow: none; border-radius: 0px; color: #efefef; } #search-top-box input.empty { color: #999999; } #search-top-box { top: 2.3rem !important; right: 8px; } /* ---- TOP BAR ---- */ #top-bar { display: flex; justify-content: center; right: 0; top: 7.9rem; } #top-bar, #top-bar a { color: #333333; } /* ---- SIDE BAR ---- */ #side-bar .side-block { border: transparent; border-radius: 0; box-shadow: 0px 0px 7px #999999; background: #ffffff; } #side-bar .side-block.media > * { display: flex; justify-content: space-evenly; } #top-bar div.open-menu a { border-radius: 0; box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.2), 0px 3px 10px 0 rgba(0, 0, 0, 0.19); border: 1px white; } @media (max-width: 767px) { #main-content { padding: 0; margin: 0 5%; border-left: none; } #page-title { margin-top: 0.7em; } #side-bar { background-color: #fff; } #side-bar:target { border: none; box-shadow: 3px 0 1px -2px rgba(0, 0, 0, 0.04), 1px 0 5px 0 rgba(0, 0, 0, 0.2); } #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; } #side-bar .heading { padding-left: 1em; margin-left: -1em; } #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: #333333; box-shadow: none; } .yui-navset .yui-nav a, /* ---- Link Modifier ---- */ .yui-navset .yui-navset-top .yui-nav a { color: #333333; /* ---- Tab Background Colour | [UNSELECTED] ---- */ background-color: #efefef; border: unset; box-shadow: none; box-shadow: none; } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus { color: #ffffff; /* ---- Tab Background Colour | [HOVER] ---- */ background-color: #333333; } .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: #ffffff; background-color: #ffffff; 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: #333333; } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em { border: none; } .yui-navset .yui-nav .selected a { width: 100%; color: #ffffff; } .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:active { color: #ffffff; background-color: #333333; } .yui-navset .yui-content { background-color: #ffffff; box-shadow: 0px 0px 4px #999999; } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content { padding: .5em; border: none; } /* ---- INFO BAR ---- */ body { --barColour: #333333; } .info-container .collapsible-block-content { padding: 0 .5em 30px; } .info-container .collapsible-block-content .wiki-content-table { width: 100%; } /* ---- INFO PANE ---- */ #page-content .creditRate { margin: unset; margin-bottom: 4px; } #page-content .rate-box-with-credit-button { background-color: #ffffff; border: solid 1px #ffffff; box-shadow: 0px 0px 7px #999999; border-radius: 0; } #page-content .rate-box-with-credit-button .fa-info { border: none; color: #333333; } #page-content .rate-box-with-credit-button .fa-info:hover { background: #333333; color: #ffffff; } .rate-box-with-credit-button .cancel { border: solid 1px #ffffff; } /* ---- PAGE RATING ---- */ .page-rate-widget-box { box-shadow: 0px 0px 7px #999999; margin: unset; margin-bottom: 4px; border-radius: 0; font-family: "Oxygen", sans-serif; } div.page-rate-widget-box .rate-points { background-color: #ffffff; color: #333333 !important; border: solid 1px #ffffff; border-radius: 0; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { background-color: #ffffff; border-top: solid 1px #ffffff; border-bottom: solid 1px #ffffff; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { background: transparent; color: #333333; } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover { background: #333333; color: #ffffff; } .page-rate-widget-box .cancel { background: transparent; background-color: #ffffff; border: solid 1px #ffffff; border-radius: 0; } .page-rate-widget-box .cancel a { color: #333333; } .page-rate-widget-box .cancel a:hover { background: #333333; color: #ffffff; border-radius: 0; } /* ---- PAGE ELEMENTS ---- */ h1, h2, h3, h4, h5, h6 { color: #333333; font-family: "Sawarabi Gothic", "Josefin Sans", sans-serif; font-weight: bold; } blockquote, div.blockquote, #toc, .code { background-color: #F8F8F8; border: solid 1px #F8F8F8; box-shadow: 0px 0px 4px #999999; } .scp-image-block { border: solid 8px #ffffff; box-shadow: 0px 0px 5px #999999; box-sizing: border-box; } .scp-image-block .scp-image-caption { background-color: #ffffff; border-top: solid 4px #ffffff; color: black; } #page-content .wiki-content-table tr th { border: solid 1px #999999; background-color: #efefef; /* set border for table title */ } #page-content .wiki-content-table tr td { border: solid 1px #999999; /* set border for table content */ } /*-- tags --*/ #main-content .page-tags span { max-width: 100%; } #main-content .page-tags a { height: 0.9rem; line-height: 0.9rem; font-size: 0.76rem; background-color: #FDFDFD; border-radius: 0.6rem 0.12rem; margin: .25rem .2rem; .5rem .2rem; padding: 0.2rem 0.42rem 0.25rem 0.46rem; box-shadow: 0.6px 0.6px 1.9px 0.8px rgba(0, 0, 0, 0.27); } #main-content .page-tags a:before { content: "•"; font-size: 1.1rem; float: left; position: relative; top: -0.19rem; left: -0.24rem; color: #ffffff; background-color: #B8B8B8; color: transparent; text-shadow: 1px 1px 0.7px rgba(255, 255, 255, 0.82); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; } /* ---- CUSTOM SYNTAX ---- */ .header-container { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; position: relative; justify-content: space-around; align-content: space-between; width: 100%; left: 0; align-items: flex-start; row-gap: 2px; } .text-item { flex-grow: 1; max-width: 25%; text-align: center; } .grid-item { flex-grow: 1; min-width: 25%; text-align: center; margin: 8px 6px; } @media (max-width: 1200px) { .grid-item { min-width: 50%; } } .logo { position: absolute; width: 180px; top: -154px; left: -17em; z-index: -1; } @media (max-width: 767px) { .logo { width: 36%; top: -9.7em; left: 32%; } } .textbox { position: absolute; width: 42%; top: 7.5rem; } @media (max-width: 960px) and (min-width: 767px), (max-width: 666px) { .textbox { position: relative; width: 100%; top: 0; } } /* CreditModule対応 by ukwhatn */ .creditRate.creditModule .creditButton { background-color: white; border: unset; border-radius: 0px; margin-left: 5px; height: 100%; } .creditRate.creditModule .creditButton a { height: 100%; line-height: 20px; }
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */ #top-bar .open-menu a { position: fixed; bottom: 0.5em; left: 0.5em; z-index: 15; font-family: san-serif; font-size: 30px; font-weight: 700; width: 30px; height: 30px; line-height: 0.9em; text-align: center; border: 0.2em solid #888 !important; background-color: #fff !important; border-radius: 3em; color: #888 !important; text-decoration: none!important; } @media (min-width: 768px) { .mobile-top-bar { display: block; } .mobile-top-bar li { display: none; } #main-content { max-width: 708px; margin: 0 auto; padding: 0; transition: max-width 0.2s ease-in-out; } #side-bar { display: block; position: fixed; top: 0; left: -25em; width: 17em; height: 100%; background-color: rgb(184, 134, 134); overflow-y: auto; z-index: 10; padding: 1em 1em 0 1em; -webkit-transition: left 0.5s ease-in-out 0.1s; -moz-transition: left 0.5s ease-in-out 0.1s; -ms-transition: left 0.5s ease-in-out 0.1s; -o-transition: left 0.5s ease-in-out 0.1s; transition: left 0.5s ease-in-out 0.1s; } #side-bar:after { content: ""; position: absolute; top: 0; width: 0; height: 100%; background-color: rgba(0, 0, 0, 0.2); } #side-bar:target { display: block; left: 0; width: 17em; margin: 0; border: 1px solid #dedede; z-index: 10; } #side-bar:target + #main-content { left: 0; } #side-bar:target .close-menu { display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.3) 1px 1px repeat; z-index: -1; } }
:root { --timeScale: 1; --timeDelay: 0s; } /* Converting middle divider from box-shadow to ::before pseudo-element */ .anom-bar > .bottom-box { box-shadow: none!important; } .anom-bar > .bottom-box::before { position: absolute; content: " "; width: 100%; height: 0.5rem; background-color: rgb(var(--black-monochrome, 12, 12, 12)); transform: translateY(-0.74rem); } /* DIVIDER */ .anom-bar > .bottom-box::before { animation-name: divider; animation-duration: calc(0.74s * var(--timeScale)); animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: cubic-bezier(.32,.38,.39,.94); animation-fill-mode: backwards; } /* CLASSIFIED LEVEL BARS */ div.top-center-box > * { animation-name: bar; animation-duration: calc(0.45s * var(--timeScale)); animation-iteration-count: 1; animation-timing-function: ease-out; animation-fill-mode: backwards; } div.top-center-box > :nth-child(1) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(2) { animation-delay: calc(0.32s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(3) { animation-delay: calc(0.45s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(4) { animation-delay: calc(0.61s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(5) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(6) { animation-delay: calc(0.95s * var(--timeScale) + var(--timeDelay)); } /* TOP TEXT */ div.top-left-box, div.top-right-box { clip-path: polygon( 0% -50%, 150% -50%, 150% 100%, 0% 100%); } div.top-left-box > *, div.top-right-box > * { position: relative; animation-name: bottomup; animation-duration: calc(0.65s * var(--timeScale)); animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: ease-out; animation-fill-mode: backwards; } /*-----------------------------------*/ /*-----------------------------------*/ /* CONTAINMENT, DISRUPTION, RISK CLASSES */ div.text-part > * { clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%); animation-name: expand2; animation-duration: calc(0.5s * var(--timeScale)); animation-iteration-count: 1; animation-timing-function: cubic-bezier(.12,.41,.27,.99); animation-fill-mode: backwards; } div.text-part > :nth-child(1) { animation-name: expand1; } div.text-part > :nth-child(1) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); } div.text-part > :nth-child(2) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); } div.text-part > :nth-child(3) { animation-delay: calc(0.86s * var(--timeScale) + var(--timeDelay)); } div.main-class::before, div.main-class::after { animation-name: iconslide; animation-duration: calc(0.45s * var(--timeScale)); animation-delay: calc(0.8s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: cubic-bezier(.12,.41,.27,.99); animation-fill-mode: backwards; } /* BOTTOM TEXT */ div.main-class > *, div.disrupt-class > *, div.risk-class > * { white-space: nowrap; animation-name: flowIn; animation-duration: calc(0.42s * var(--timeScale)); animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: ease-out; animation-fill-mode: backwards; } /*-----------------------------------*/ /*-----------------------------------*/ /* DIAMOND */ div.arrows { animation-name: arrowspin; animation-duration: calc(0.7s * var(--timeScale)); animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: cubic-bezier(.12,.41,.27,.99); animation-fill-mode: backwards; } div.quadrants > * { animation-name: fade; animation-duration: calc(0.3s * var(--timeScale)); animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: cubic-bezier(.12,.41,.27,.99); animation-fill-mode: backwards; } div.top-icon, div.right-icon, div.left-icon, div.bottom-icon { animation-name: nodegrow; animation-duration: calc(0.4s * var(--timeScale)); animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: cubic-bezier(.12,.41,.27,.99); animation-fill-mode: backwards; } div.diamond-part { clip-path: polygon( -10% 0.37%, 120% 0.37%, 120% 100%, -10% 100%); animation-name: diamondBorder; animation-duration: calc(0.8s * var(--timeScale)); animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: cubic-bezier(.32,.38,.39,.94); animation-fill-mode: backwards; will-change: box-shadow; } /* MOBILE QUERY */ @media (max-width: 480px ) { .anom-bar > .bottom-box::before { display:none; } .anom-bar > .bottom-box { box-shadow: 0 -0.5rem 0 0 rgb(var(--black-monochrome, 12, 12, 12))!important; } div.top-center-box > * { animation-name: bar-mobile; animation-duration: calc(0.9s * var(--timeScale)); } div.top-center-box > :nth-child(1) { animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(2) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(3) { animation-delay: calc(0.3s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(4) { animation-delay: calc(0.4s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(5) { animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(6) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); } } /*--- Motion Accessibility ---*/ @media screen and (prefers-reduced-motion: reduce) { div.anom-bar-container { --timeScale: 0!important; } } /*-------------------------*/ @keyframes divider { from { max-width: 0%; } to { max-width: 100%; } } @keyframes bar { from { max-width: 0%; } to { max-width: 100%; } } @keyframes bar-mobile { from { max-height: 0%; } to { max-height: 100%; } } @keyframes bottomup { from { top: 100px; } to { top: 0; } } @keyframes expand1 { from { opacity: 0; clip-path: inset(0 calc(100% - 0.75rem) 0 0); } to { opacity: 1; clip-path: inset(0); } } @keyframes iconslide { from { opacity: 0; transform: translateX(-5rem); } to { opacity: 1; transform: translateX(0); } } @keyframes expand2 { from { opacity: 0; width: 1%; } to { opacity: 1; width: calc(100% - 0.25rem); } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes flowIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes arrowspin { from { clip-path: circle(0%); transform: rotate(135deg); } to { clip-path: circle(75%); transform: rotate(0deg); } } @keyframes nodegrow { from { transform: scale(0);} to { transform: scale(1);} } @keyframes diamondBorder { from { box-shadow: -0.5rem -20rem 0 0 rgb(var(--black-monochrome, 12, 12, 12)); } to { box-shadow: -0.5rem 0 0 0 rgb(var(--black-monochrome, 12, 12, 12)); } }
/* BASALT Theme [2021 Wikidot Theme] By Liryn & Placeholder McD Based on: Paperstack Theme by EstrellaYoshte Minimal Theme by Stormbreath BLANKSTYLE CSS by Placeholder McD & HarryBlank PLACESTYLE CSS by Placeholder McD Simple Yonder Theme by EstrellaYoshte Tab animation by Croquembouche Edited by iti119 for SCP-JP */ @import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap'); /* MAIN */ /* ======================= */ :root { --title: " SCP財団"; --subtitle: " 確保 • 収容 • 保護"; --barColour: rgb(20, 20, 20); --fnColor: rgb(15, 15, 15); --fnLinger: 1s; --logo: url(http://scp-jp-storage.wdfiles.com/local--files/file:5722815-21-21vy/basalt_logotype_black.png); --sidelogo: var(--logo); --sidesubtitle: var(--subtitle); --utilcolor: #FFF; --antiutilcolor: rgb(20, 20, 20); --titleLength: 8.2rem; } body { background: rgb(255, 255, 255); font-family: 'Inter', 'Noto Sans JP', sans-serif; } #main-content { top: -2.8rem; } #container-wrap-wrap { overflow-x: hidden; } /* ======================= */ /* HEADER & TOPBAR */ /* ======================= */ #extra-div-1 { z-index: 9; position: fixed; top: 0; left: 0; width: 1000vw; height: 5rem; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); background: white; } #extra-div-2 { z-index: 9; position: fixed; top: 0; left: 0; width: 1000vw; height: 5rem; } #extra-div-1::before { content: var(--title); position: fixed; left: 8.5rem; top: 0.7rem; color: black; font-family: 'Work Sans', 'M PLUS 1p', sans-serif; font-weight: 900; font-size: 27.45px; animation: slideLeft 1s; transition-duration: 0.3s; transition-property: transform; transform: translateZ(0); } #extra-div-2::before { content: var(--subtitle); position: fixed; font-size: 1.22em; left: 8.5rem; top: 2.5rem; color: #272842; font-family: 'Work Sans', 'M PLUS 1p', sans-serif; font-weight: 700; animation: slideLeft 1s; } #u-header-link { display: block; position: fixed; top: 0.6rem; left: 8.3rem; height: 3.5rem; width: 15.7rem; z-index: 21; } .logo { z-index: 10; position: fixed; width: 4.5rem; height: 4.5rem; top: 0.2rem; left: 3.6rem; transition-duration: 0.3s; transition-property: transform; transform: translateZ(0); animation: slideLeft 1s; background-image: var(--logo); background-size: contain; background-repeat: no-repeat; background-position: center; } .logo:hover { transform: rotate(348deg); } #header { height: 5rem; } #header h1, #header h2 { display: none; } #top-bar { position: fixed; align-items: stretch; display: flex; flex-direction: row; justify-content: flex-start; text-transform: uppercase; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 800; animation: slideLeft 1s; top: 1.7rem; max-width: 50rem; min-width: 8rem; font-size: 90%; font-weight: 800; left: 25.4rem; } #top-bar div.open-menu a { display: none; } #top-bar ul { float: left; } #top-bar ul li ul { border: none; } #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a { background-color: #F4F4F4; } #top-bar ul li>a { border: none; } #top-bar a { filter: grayscale(100%) saturate(0%); -webkit-filter: grayscale(100%) saturate(0%); } #top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover { background: #F4F4F4; } #top-bar ul li.sfhover a, #top-bar ul li:hover a { border: none; } #top-bar ul li>a { transition-duration: 0.3s; transition-property: transform; transform: translateZ(0); } #top-bar ul li>a:hover { transform: translate(0px, -3px); border: none; } #top-bar ul li ul li>a:hover { animation: none; } @keyframes translateTop { 0% { opacity: 1; } 100% { transform: translate(0px, -3px); } } @keyframes slideLeft { 0% { transform: translate(-200px, 0px); opacity: 0; } 100% { opacity: 1; } } @keyframes tilt { 0% { opacity: 1; } 100% { transform: rotate(360deg); } } #login-status { position: fixed; top: 0.65rem; right: 2rem; width: fit-content; font-size: 0.78em; text-align: center; color: transparent; } #login-status > a > strong { margin-right: 0.7rem; font-size: 0.7rem; } #login-status > span { color: #333; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 700; } #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.25rem; } div#search-top-box { width: 2rem; position: fixed; top: 0.76rem !important; right: 0.2rem; z-index: 21; } #search-top-box-input { display: none; } #search-top-box-form>input[type=submit], #search-top-box-form>input[type=submit]:hover, #search-top-box-form>input[type=submit]:focus, #search-top-box-form>input[type=submit]:target { background: 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") 50%/0.8rem no-repeat, #000 !important; border: none; border-radius: 30%; font-size: 0; height: 1.2rem; width: 1.2rem; margin-top: 0.2rem; } .mobile-top-bar { left: unset; } /* ======================= */ /* SIDEBAR */ /* ======================= */ #u-sb-button { display: block; position: fixed; top: 0.5rem; left: 0.9rem; height: 4rem; width: 45px; color: black; font-family: 'Work Sans', sans-serif; font-weight: 300; font-size: 2.5rem; text-decoration: none !important; z-index: 21; transition-duration: 0.3s; transition-property: transform; transform: translateZ(0); animation: slideLeft 1s; } #u-sb-button:hover { font-weight: 900; } #side-bar { box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); background: linear-gradient( 0deg, rgba(255, 255, 255, 1) 87%, rgba(250, 250, 250, 1) 100%); text-transform: uppercase; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 400 !important; overflow-x: hidden; } #side-bar::before { content: var(--sidesubtitle); background: var(--sidelogo); background-size: 4.5rem; background-repeat: no-repeat; background-position: top center; padding-bottom: 0.3rem; padding-top: 4.7rem; display: inline-block; border-bottom: double 5px black; font-family: 'Work Sans', 'M PLUS 1p', sans-serif; font-weight: 800; text-align: center; margin-right: auto; margin-left: auto; width: 100%; text-transform: none; } #side-bar, #side-bar:target { z-index: 22; } #side-bar a { color: black; } #side-bar a:visited { color: black; } #side-bar img:not([src*="twitter" i]):not([src*="discord" i]), iframe.scpnet-interwiki-frame { filter: grayscale(100%) saturate(0%); -webkit-filter: grayscale(100%) saturate(0%); } #side-bar .side-block { background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 100%); border-color: transparent; border-radius: 0px; } #side-bar .heading { color: black; border-bottom: solid 1px black; text-transform: uppercase; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 800; } #side-bar .collapsible-block-folded { background-image: url(http://scp-jp-storage.wdfiles.com/local--files/file:5722815-27-wn18/expand.png); } #side-bar .collapsible-block-unfolded-link { border-bottom: solid 1px black; } #side-bar .collapsible-block-unfolded-link .collapsible-block-link, #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover { color: black; } /* ======================= */ /* TABS */ /* ======================= */ ul.yui-nav a { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; padding: 3.5px; color: white; font-weight: 600; } .yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected, .yui-navset .yui-nav a:hover, yui-navset .yui-nav a:active { color: white; background-color: black; } .yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav { border: none; border-bottom: dotted 1px grey; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); } .yui-navset .yui-content>div { display: block; top: 0; overflow: hidden; transform-origin: 0 0; } .yui-navset-top a { transition-property: background, background-color; transition-duration: 0.2s; } /* Tab animation by Croquembouche */ /*---------------------------------------------*/ #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; } } /*---------------------------------------------*/ .yui-navset .yui-content { background: transparent; box-shadow: none; border-bottom: dotted 4px grey; } /* ======================= */ /* TAGS */ /* ======================= */ #main-content .page-tags a { line-height: inherit; background-color: rgb(20, 20, 20); border-radius: 2px 6px; color: white; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 500; } .page-tags span { border-top: none; } /* ======================= */ /* CONTENT */ /* ======================= */ h1, h2, h3, h4, h5, h6 { font-family: 'Work Sans', 'M PLUS 1p', sans-serif; font-weight: 800; text-transform: uppercase; color: black; letter-spacing: unset; } .top-left-box>.item { display: none; } hr { background-color: #333; } .info-container { padding-bottom: 8px } /* CONTENT > CUSTOM DIVS */ /* ======================= */ .document { background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); margin: 26px auto 0; max-width: 550px; min-height: 300px; padding: 24px; padding-top: 50px; position: relative; width: 80%; } .document:before, .document:after { content: ""; height: 98%; position: absolute; width: 100%; z-index: -1; } .document:before { background: #fafafa; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); left: -5px; top: 4px; transform: rotate(-2.5deg); } .document:after { background: #f6f6f6; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); right: -3px; top: 1px; transform: rotate(1.4deg); } .darkdocument { background: rgb(30, 30, 30); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); margin: 26px auto 0; max-width: 550px; min-height: 300px; padding: 24px; padding-top: 50px; position: relative; width: 80%; color: #EDEDED; } .darkdocument:before, .darkdocument:after { content: ""; height: 98%; position: absolute; width: 100%; z-index: -1; } .darkdocument:before { background: rgb(25, 25, 25); box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); left: -5px; top: 4px; transform: rotate(-2.5deg); } .darkdocument:after { background: rgb(25, 25, 25); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); right: -3px; top: 1px; transform: rotate(1.4deg); } .notation { border-left: solid 3px rgb(30, 30, 30); border-right: solid 3px rgb(30, 30, 30); padding: 25px 25px 25px 25px; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); width: 75%; margin: auto; background: #f7f7f7; } .modal { padding: 15px 15px 15px 15px; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); width: auto; margin: auto; background: rgb(253, 253, 253); border: solid 2px #5D5D5D; } .smallmodal { padding: 15px 15px 15px 15px; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); width: 75%; margin: auto; background: rgb(253, 253, 253); border: solid 2px #5D5D5D; } .jotting { padding: 5px 10px 5px 10px; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); width: 75%; margin: auto; background: #FDFDFD; border: dashed 0.1rem #5D5D5D; } .transcript { padding: 10px 10px 10px 10px; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); width: 80%; margin: auto; background: rgb(253, 253, 253); border: dotted 1px #5D5D5D; border-radius: 10px; } .papernote { background-color: #eaeeef; color: #21252E !important; padding: 0.1rem 0.5rem 0.5rem 0.5rem; box-shadow: 1px 1px 3px 2px rgb(0 0 0 / 30%); margin: auto; width: 65%; } .raisa_memo { background: url(http://scp-jp-storage.wdfiles.com/local--files/file:5722815-28-qlyx/RAISA_LIGHTLOGO.png) #fff3ad; background-size: contain; background-position: top center; background-repeat: no-repeat; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); width: 90%; min-height: 4rem; max-height: 100rem; margin-left: auto; margin-right: auto; text-align: center; padding: 10px 20px 20px 20px; word-break: break-word; } .raisa_memo>p:nth-child(1)::before { content: "記録・情報保安管理局より通達\00000a"; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 130%; text-align: center; margin-bottom: 1rem; padding-bottom: 0.3rem; border-bottom: dotted 0.13rem darkslategrey; max-width: 49rem; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-content: stretch; align-items: center; } .classification_memo { background: url(http://scp-jp-storage.wdfiles.com/local--files/file:5722815-30-ubdk/CLASSIFICATION_LIGHTLOGO.png) #edf5f3; background-size: contain; background-position: top center; background-repeat: no-repeat; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); width: 90%; min-height: 4rem; max-height: 100rem; margin-left: auto; margin-right: auto; text-align: center; padding: 10px 20px 20px 20px; word-break: break-word; } .classification_memo>p:nth-child(1)::before { content: "分類委員会覚書\00000a"; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 130%; text-align: center; margin-bottom: 1rem; padding-bottom: 0.3rem; border-bottom: dotted 0.13rem darkslategrey; max-width: 49rem; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-content: stretch; align-items: center; } .ettra_memo { background: url(http://scp-jp-storage.wdfiles.com/local--files/file:5722815-32-wqge/ETTRA_LIGHTLOGO.png) #f5d7d7; background-size: contain; background-position: top center; background-repeat: no-repeat; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); width: 90%; min-height: 4rem; max-height: 100rem; margin-left: auto; margin-right: auto; text-align: center; padding: 10px 20px 20px 20px; word-break: break-word; } .ettra_memo>p:nth-child(1)::before { content: "緊急脅威戦術対応機関より通達\00000a"; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 130%; text-align: center; margin-bottom: 1rem; padding-bottom: 0.3rem; border-bottom: dotted 0.13rem darkslategrey; max-width: 49rem; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-content: stretch; align-items: center; } .ethics_memo { background: url(http://scp-jp-storage.wdfiles.com/local--files/file:5722815-34-2jq6/ETHICS_LIGHTLOGO.png) #ffdbc4; background-size: contain; background-position: top center; background-repeat: no-repeat; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); width: 90%; min-height: 4rem; max-height: 100rem; margin-left: auto; margin-right: auto; text-align: center; padding: 10px 20px 20px 20px; word-break: break-word; } .ethics_memo>p:nth-child(1)::before { content: "倫理委員会覚書\00000a"; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 130%; text-align: center; margin-bottom: 1rem; padding-bottom: 0.3rem; border-bottom: dotted 0.13rem darkslategrey; max-width: 49rem; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-content: stretch; align-items: center; } .temporal_memo { background: url(http://scp-jp-storage.wdfiles.com/local--files/file:5722815-36-ohm1/DELTA_T_LIGHTLOGO.png) #ffffff; background-size: contain; background-position: top center; background-repeat: no-repeat; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16); border: double 3px lightgrey; width: 90%; min-height: 4rem; max-height: 100rem; margin-left: auto; margin-right: auto; text-align: center; padding: 10px 20px 20px 20px; word-break: break-word; } .temporal_memo>p:nth-child(1)::before { content: "時間異常部門\00000a"; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 130%; text-align: center; margin-bottom: 1rem; padding-bottom: 0.3rem; border-bottom: dotted 0.13rem darkslategrey; max-width: 49rem; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-content: stretch; align-items: center; } .overwatch_memo { background: url(http://scp-jp-storage.wdfiles.com/local--files/file:5722815-38-9n6y/O5_LIGHTLOGO.png) #e3e3e3; background-size: contain; background-position: top center; background-repeat: no-repeat; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); width: 90%; min-height: 4rem; max-height: 100rem; margin-left: auto; margin-right: auto; text-align: center; padding: 10px 30px 20px 20px; word-break: break-word; } .overwatch_memo>p:nth-child(1)::before { content: "監督司令部\00000a"; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 130%; text-align: center; margin-bottom: 1rem; padding-bottom: 0.55rem; border-bottom: dotted 0.13rem darkslategrey; max-width: 49rem; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-content: stretch; align-items: center; } .miscomm_memo { background: url(http://scp-jp-storage.wdfiles.com/local--files/file:5722815-40-c6bj/MISCOMM_LIGHTLOGO.png) #eeedfa; background-size: contain; background-position: top center; background-repeat: no-repeat; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); width: 90%; min-height: 4rem; max-height: 100rem; margin-left: auto; margin-right: auto; text-align: center; padding: 10px 30px 20px 20px; word-break: break-word; } .miscomm_memo>p:nth-child(1)::before { content: "誤伝達部門より通達\00000a"; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 130%; text-align: center; margin-bottom: 1rem; padding-bottom: 0.3rem; border-bottom: dotted 0.13rem darkslategrey; max-width: 49rem; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-content: stretch; align-items: center; } .raisa_memo a, .temporal_memo a, .classification_memo a, .overwatch_memo a, .ettra_memo a, .ethics_memo a, .miscomm_memo a { font-weight: 700; } .bigtext { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 700; } .st { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 800; text-decoration: underline; } /* ======================= */ /* CONTENT > TABLES */ /* ======================= */ #page-content .wiki-content-table tr th { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 700; border: solid 1px #000; background-color: #aaa; } #page-content .wiki-content-table tr td { border: 1px #000 solid; } #page-content .table1 tr th { background-color: #D7EFE7; } #page-content .table1 .st { color: #D7EFE7; } #page-content .table2 tr th { background-color: #D8ECF4; } #page-content .table2 .st { color: #D8ECF4; } #page-content .table3 tr th { background-color: #FDF6D7; } #page-content .table3 .st { color: #FDF6D7; } #page-content .table4 tr th { background-color: #FFDABF; } #page-content .table4 .st { color: #FFDABF; } #page-content .table5 tr th { background-color: #F5D8E0; } #page-content .table5 .st { color: #F5D8E0; } #page-content .table6 tr th { background-color: rgba(146, 0, 255, 0.2); } #page-content .table6 .st { color: rgb(146, 0, 255); } .tableb .wiki-content-table { border-collapse: separate; border-spacing: 5px; padding-left: -100px; } .table1 .scp-image-block .scp-image-caption { background-color: #D7EFE7; color: black; } .table2 .scp-image-block .scp-image-caption { background-color: #D8ECF4; color: black; } .table3 .scp-image-block .scp-image-caption { background-color: #FDF6D7; color: black; } .table4 .scp-image-block .scp-image-caption { background-color: #FFDABF; color: black; } .table5 .scp-image-block .scp-image-caption { background-color: #F5D8E0; color: black; } .table6 .scp-image-block .scp-image-caption { background-color: rgba(146, 0, 255, 0.2); color: black; } /* ======================= */ /* CONTENT > RATING MODULE */ /* ======================= */ .rate-points { color: black !important; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 700; text-transform: uppercase; border: none; font-size: 90%; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel, .page-rate-widget-box .rate-points { border: none; } /* ======================= */ /* CONTENT > IMAGE BLOCK */ /* ======================= */ .scp-image-block img { background: white; } .scp-image-block.block-right { margin: 0em 0em 1em 2em; } .scp-image-block.block-center { max-width: 99% !important; } .scp-image-block { border: none; box-shadow: none; } .scp-image-block .scp-image-caption { border-top: none !important; margin-top: 8px; background-color: #292929; color: #ffffff; } .scp-image-block img, .scp-image-block .scp-image-caption { outline: solid 1px #444; box-shadow: 0px 0px 5px #999999; } .scp-image-block .scp-image-caption p { font-size: 110%; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; } /* ======================= */ /* CONTENT > LINKS */ /* ======================= */ a { color: #0645AD; } a.newpage { color: #CC2200; } a:visited { color: #0B0080; } .danger-diamond a, .danger-diamond a::selection { color: transparent; background: none; } .scp-image-block .scp-image-caption a { color: #c5c5c5; } /* ======================= */ /* CONTENT > SCROLLBAR */ /* ======================= */ ::-webkit-scrollbar { cursor: pointer; border: none; } ::-webkit-scrollbar-thumb { background: black; cursor: pointer; } ::-webkit-scrollbar-thumb:hover { background: rgb(45, 45, 45); } ::-webkit-scrollbar-track { background: white; } /* ======================= */ /* CONTENT > COLLAPSIBLES */ /* ======================= */ a.collapsible-block-link { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 600; color: white; padding-top: 4px; padding-bottom: 4px; padding-left: 7px; padding-right: 9px; background: rgb(20, 20, 20); border-radius: 3px; margin-top: 10px; margin-bottom: 10px; } /* ======================= */ /* CONTENT > PAGE TITLE / BREADCRUMBS */ /* ======================= */ #page-title, .meta-title { display: block !important; font-family: 'Work Sans', 'M PLUS 1p', sans-serif; font-weight: 700; color: #252525; border: none; margin-top: 3rem; } #breadcrumbs { text-transform: uppercase; color: grey; font-weight: 600; font-family: 'Work Sans', 'M PLUS 1p', sans-serif; margin-top: -1.5rem; font-size: 90%; } /* ======================= */ /* CONTENT > BETTERFOOTNOTES INTEGRATION */ /* ======================= */ .fnnum:hover { background: transparent; transform: scale(1.3); } .fnnum { transition-duration: 0.2s; transition-property: transform; transform: translateZ(0); } .fnnum::after { color: #3f21ff !important; } .fnnum:hover::after { color: white !important; } .fncon { background: rgb(25, 25, 25) !important; color: #EDEDED; border: 0.15rem solid rgb(20, 20, 20); border-radius: 2px; font-size: 90%; } /* ======================= */ /* @MEDIA QUERIES / MOBILE FORMATTING */ /* ======================= */ @media only screen and (max-width: 600px) { .scp-image-block.block-right { float: none; margin: 10px auto; } } @media (min-width: 768px) { #header, #top-bar { width: calc(100% - 4.4rem); max-width: calc(100% - 4.4rem); } #main-content { max-width: 95%; } } @media (max-width: 1120px) { #top-bar { font-weight: 600; font-size: 80%; } } @media (max-width: 1020px) { #top-bar { top: 3.2rem; left: 7.8rem; } #extra-div-1::before { top: 0.3rem; } #extra-div-2::before { top: 1.9rem; } #u-header-link { height: 2.5rem; } .document, .darkdocument { width: 95%; } } @media (max-width: 767px) { .mobile-top-bar { display: flex; justify-content: flex-start; max-width: 100%; width: 100%; flex-direction: row; } } @media (max-width: 500px) { .logo { display: none; } #top-bar { left: 3.6rem; } #extra-div-1::before, #extra-div-2::before { left: 4.2rem; } #u-header-link { left: 4rem; } .document, .darkdocument { width: auto; } } @media (max-width: 560px) { #login-status span.printuser { font-size: 0; } } @media (max-width: 430px) { #extra-div-1::before { font-size: 23.45px; top: 0.5rem; } #extra-div-2::before { font-size: 1em; top: 2.1rem; } #u-header-link { width: 13.5rem; } #login-status { right: 1.8rem; } } /* ======================= */ /* MISC */ /* ======================= */ .avatar-hover { display: none !important; } ::selection { background-color: rgba(0, 0, 255, 0.7); color: white; } select { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 600; border: solid 2px grey; cursor: pointer; border-radius: 5px; } body.wait { cursor: wait; } body.wait * { cursor: auto; } input { font-size: 90%; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 600; } #action-area > p { font-size: 90%; font-weight: 500; } #action-area > h1 { font-size: 150%; } div.buttons input, input.button, button, file, a.button { margin: 0 2px; border: 2px solid grey; cursor: pointer; } #who-rated-page-area > h2 { display: none; } #who-rated-page-area>div { column-count: 4; } @media (max-width: 900px) { #who-rated-page-area>div { column-count: 3; } } @media (max-width: 700px) { #who-rated-page-area>div { column-count: 2; } } @media (max-width: 540px) { #who-rated-page-area>div { column-count: 1; } } .pager .current { border-style: solid; outline: solid 1px rgb(250, 250, 250); } .pager a, .pager .current { border-style: double; border-width: 3px; text-transform: uppercase; background: none; color: inherit; } .pager a:hover, .pager .current:hover { text-decoration: none; cursor: pointer; } .pager .target { font-weight: 800; } .w-container { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 700; border-style: double !important; border-width: 4px !important; margin: auto; width: 90%; margin-top: 1rem; margin-bottom: 1rem; } .s-cell { font-size: 1.25rem !important; } .anom-bar-container, .anom-bar-container * { font-family: 'Work Sans', 'Noto Sans JP', sans-serif !important; font-weight: 700; } #page-content div.warning-box div.text-number, #page-content div.warning div.text-number { font-size: 140%; font-weight: 400; } #page-content div.warning-box strong, #page-content div.warning strong { font-weight: 700; } #page-content div.warning-box div.text-top, #page-content div.warning div.text-top { font-weight: 800; } #page-content div.warning-box, #page-content div.warning { font-family: 'Work Sans', 'Noto Sans JP', sans-serif !important; font-weight: 500; } .collection { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; color: #905c5c; } /* MISC > WIKIDOT OWINDOW */ /* ======================= */ #owindow-1 { background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 100%); } #owindow-1>div.title.modal-header { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; text-transform: uppercase; font-size: 90%; cursor: default; } #owindow-1>div.content.modal-body td.active>b { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; color: rgb(100, 100, 100); } #owindow-1>div.content.modal-body>table { max-height: 10rem; overflow: auto; display: block; } #owindow-1>div.content.modal-body>div { margin-top: 1.5rem !important; border-top: solid 0.2rem rgb(210, 210, 210); padding-top: 1rem; } #owindow-1>div.content.modal-body>div>div>a { background: #870000; } #owindow-1>div.content.modal-body>div>div>a:hover { background: #470000; } #owindow-1>div.content.modal-body>img { filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.3)); padding: 0px 0px 0px 0px !important; background: none; background-color: transparent !important; margin-right: 1.7rem; } #owindow-1 { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; } /* ======================= */ /* MISC > EDIT BOX & PAGE SOURCE */ /* ======================= */ #lock-info { box-shadow: 0px 0px 4px #999999; background: white; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 500; margin-left: 1rem; font-size: 95%; border: solid 1px grey; color: #191919; } #edit-page-form>table.edit-page-bottomtable>tbody>tr>td:nth-child(1)>div.sub, #edit-page-form>table.form>tbody>tr>td:nth-child(1) { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 500; } #edit-page-form>table.edit-page-bottomtable>tbody>tr>td:nth-child(1)>div:nth-child(1) { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 600; } .wd-editor-toolbar-panel ul li a { height: 22px; width: 22px; padding: 0; margin: 0; display: block; border-radius: 2px; filter: invert(1), hue-rotate(180deg); filter: invert(1) hue-rotate( 180deg); } .wd-editor-toolbar-panel { margin-bottom: 0.5rem; } input#edit-page-title.text { border-radius: 4px; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; border: 2px solid #afafaf; } textarea { font-family: 'Roboto', sans-serif; padding: 5px 5px 5px 5px; font-size: 105%; border: 0.13rem solid #949494; background-color: #FFF; color: #000; border-radius: 2px; } .page-source { background: white; font-family: 'Inter', 'Noto Sans JP', sans-serif; font-size: 105%; border: none; width: 80%; box-shadow: 0px 0px 4px #999999; padding: 18px 18px 18px 18px; word-break: break-word; } /* ======================= */ /* MISC > FONT SIZE/WEIGHT CHANGES */ /* ======================= */ #page-content strong { font-weight: 900; } #page-content { font-size: 100%; } /* ======================= */ #show-upload-button { float: unset; border-radius: 6px; border: solid 1px grey; font-size: 0.85rem; } .edit-help-34 { margin-top: 2px; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-size: 0.7rem; font-weight: 500; } .printuser a { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 700; } form, #action-area>p, table.page-files td span { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; } #action-area>table>thead>tr, #revision-list>table>tbody>tr:nth-child(1) { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; text-transform: uppercase; font-weight: 700; } #page-info { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 500; padding-bottom: 0.2rem; margin-bottom: 0.2rem; } #page-info::first-letter, a.btn.btn-default.button.button-close::first-letter, a.btn.btn-default.button.button-close-message::first-letter, a.btn.btn-default.button.button-cancel::first-letter, a.btn.btn-default.button.button-rename::first-letter, a.btn.btn-default.button.button-no\,-cancel::first-letter, #owindow-1 > div.button-bar.modal-footer > a.btn.btn-default.button.button-yes\,-delete::first-letter, #owindow-1 td::first-letter { text-transform: uppercase; } #owindow-1 td a::first-letter { text-transform: lowercase !important; } .button-bar.modal-footer a.btn.btn-danger, #owindow-1>div.content.modal-body>div>div>a { float: right !important; margin-top: -0.73rem; } td:nth-child(1)>a { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 600; } /* MISC > BUTTONS */ /* ======================= */ a.btn.btn-danger, a.btn.btn-primary, .btn-small, #owindow-1>div.button-bar.modal-footer>a, #edit-cancel-button, #edit-diff-button, #edit-preview-button, #edit-save-draft-button, #edit-save-continue-button, #edit-save-button, #owindow-1>div.content.modal-body>div>a.btn.btn-default { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 600 !important; font-size: 0.75rem; color: white; padding-top: 4px; padding-bottom: 4px; padding-left: 7px; padding-right: 9px; background: rgb(20, 20, 20); border-radius: 2px !important; cursor: pointer; width: fit-content !important; margin-top: 0.1rem; margin-bottom: 0.1rem; margin-left: 0.3rem; margin-right: 0.35rem; float: left; } a.collapsible-block-link:hover, a.btn.btn-danger:hover, a.btn.btn-primary:hover, .btn-small:hover, #owindow-1>div.button-bar.modal-footer>a:hover, #edit-cancel-button:hover, #edit-diff-button:hover, #edit-preview-button:hover, #edit-save-draft-button:hover, #edit-save-continue-button:hover, #edit-save-button:hover, #owindow-1>div.content.modal-body>div>a.btn.btn-default:hover { text-decoration: none; background: rgb(45, 45, 45); } #action-area > p:nth-child(5) > a:hover { text-decoration: none; background: rgb(45, 45, 45); } #action-area > p:nth-child(5) > a { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 600 !important; font-size: 0.75rem; color: white; padding-top: 4px; padding-bottom: 4px; padding-left: 7px; padding-right: 9px; background: rgb(20, 20, 20); border-radius: 2px !important; cursor: pointer; width: fit-content !important; margin-top: 0.1rem; margin-bottom: 0.1rem; margin-left: 0.3rem; margin-right: 0.35rem; } /* ======================= */ #footer, #license-area { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 500; } #page-content div.collapsible-block { margin-top: 13px; margin-bottom: 13px; } div.collapsible-block-content { animation: fade 0.4s; animation-fill-mode: forwards; } /* MISC > FOOTNOTES */ /* ======================= */ .hovertip { background: rgb(25, 25, 25) !important; border-radius: 2px; padding: 5px 5px 5px 5px; color: white; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; max-width: 400px; } .f-heading { text-transform: uppercase; font-weight: 900; font-size: 80%; } .footnotes-footer .title { font-size: 0px; color: transparent; margin-bottom: 15px; } .footnotes-footer .title:before { content: "Footnotes \0026 References"; color: rgb(25, 25, 25); text-transform: uppercase; font-weight: 900; font-size: 0.9rem; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; cursor: text; } .footnotes-footer a { color: black; font-weight: 700; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; } .footnotes-footer { border-left: solid 3px rgb(20, 20, 20); padding-left: 15px; margin-top: 6rem; } .footnote .f-footer, .equation .e-footer, .reference .r-footer { display: none; } /* ======================= */ #page-options-container a { color: rgb(45, 45, 45); font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 800; font-size: 90%; text-transform: uppercase; } #page-options-container a:hover { text-decoration: none; color: rgb(2, 2, 2); } #page-info-break { height: 3rem; } .code pre, .code p, .code, tt { font-family: 'Fira Code', monospace; } #account-options { border: none; font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 700; width: fit-content; box-shadow: 0px 0px 5px rgb(0 0 0 / 30%); padding: 5px 5px 5px 5px; text-transform: uppercase; } #account-options a { filter: grayscale(100%) saturate(0%); -webkit-filter: grayscale(100%) saturate(0%); color: grey; } /* Anendlessusername's invaluable correction of the ACS octagon! */ #page-content .quadrants>div { top: 2.25%; left: 18.5%; } /* WHEN YOU SEE IT... */ .licensebox .collapsible-block-link, .licensebox .collapsible-block-link:hover { background: none; text-transform: uppercase; font-weight: 700; } /* ---- WORDS NO LONGER BROKEN, THE CROQUEMBOUCHE HAS SPOKEN ---- */ #page-content span, #page-content a { word-break: normal !important; } /* ======================= */ /* JAPANESE BRANCH LOCALIZATION */ /* ======================= */ /* CREDIT MODULE */ /* RATE BOX */ #page-content .rate-box-with-credit-button { border: none 0; box-shadow: none; } .page-rate-widget-box { margin-bottom: 0; } .page-rate-widget-box .rate-points { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; } .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 { height: 18px; } .rate-box-with-credit-button .page-rate-widget-box .cancel a { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } .rate-box-with-credit-button .creditButton { box-sizing: border-box; padding: 0 2px; box-shadow: 0px 0px 7px #999999; } .rate-box-with-credit-button .creditButton a { display: inline-flex; align-items: center; justify-content: center; } /* CREDIT MODAL */ .modalcontainer { display: flex; align-items: center; justify-content: center; } .modalbox { width: 100%; box-shadow: 0 2px 6px rgb(0 0 0 / 50%); } /* HEADER */ #extra-div-1::before { top: 0.4rem; } #u-header-link { width: var(--titleLength); } @media (max-width: 430px) { #u-header-link { width: calc( var(--titleLength) * 0.85); } } @media (min-width: 431px) and (max-width: 1020px) { #extra-div-1::before { top: -0.2rem; } #u-header-link { height: 2.9rem; top: 0.2rem; } } @media (min-width: 1021px) { #top-bar { left: calc(var(--titleLength) + 10rem); } } /* SIDE BAR */ #u-sb-button { display: flex; align-items: center; } #u-sb-button br { display: none; } #side-bar .side-block { overflow-x: hidden; } #side-bar .side-block .collapsible-block-unfolded-link { margin-bottom: 5px; } #side-bar .side-block a.collapsible-block-link { background: none; border: none 0; padding: 0; } #side-bar .side-block .collapsible-block-folded a.collapsible-block-link:hover { text-decoration: underline 1px; } #side-bar .side-block .collapsible-block-unfolded-link a.collapsible-block-link:hover { color: #5D5D5D; } @media (max-width: 767px) { #side-bar .side-block .collapsible-block-unfolded-link { padding-left: 1em; margin-left: -1em; } #side-bar .side-block .collapsible-block-unfolded-link a.collapsible-block-link { margin-left: 0; } } /* COLMOD */ .colmod-link-top a, .colmod-link-end a { font-family: 'Work Sans', 'Noto Sans JP', sans-serif; font-weight: 600; color: white; padding-top: 4px; padding-bottom: 4px; padding-left: 7px; padding-right: 9px; background: rgb(20, 20, 20); border-radius: 3px; margin-top: 10px; margin-bottom: 10px; } .colmod-link-top a:hover, .colmod-link-end a:hover { text-decoration: none; background: rgb(45, 45, 45); } /* TAGS */ #main-content .page-tags span { line-height: 1.4; } #main-content .page-tags a:before { line-height: 1.1; } /* OWINDOW */ #owindow-1>div.content.modal-body>h1 { text-transform: none; } #owindow-1 tr:nth-last-of-type(n+3) td:nth-of-type(2)::first-letter { text-transform: none; } #page-version-info { border-style: solid; background: #eaeeef; color: #21252E; } .preview-message { background: #0C0C0C; border: none 0; box-shadow: 0 0 4px #999999; color: #FFFFFF; } .preview-message a { color: #7aa4eb; } /* 圏点 */ .kt { -webkit-text-emphasis-style: filled dot; text-emphasis-style: filled dot; } /* RUBY */ .ruby, .rt { border-collapse: collapse; }