Isolated Terminalテーマ

Black Highlighterテーマ » Black Highlighter Themes » Isolated Terminalテーマ

このページはカスタムテーマページです。

Wiki内で使用されているカスタムテーマのためのページです。

運用について、詳しくはカテゴリ運用ポリシー・カスタムテーマに関するポリシーを参照してください。

[フレーム]

クレジット付き評価モジュール

評価: +17

blank.png

[フレーム]

クレジット

翻訳責任者: oplax-counterpoint oplax-counterpoint
翻訳年: 2024
原題: Isolated Terminal Theme
ソース: https://scp-wiki.wikidot.com/theme:isolated-terminal
著作権者: EstrellaYoshte EstrellaYoshte , Woedenaz Woedenaz
作成年: 2021
初版時参照リビジョン: 121

[フレーム]

評価: +17

black-highlighter-logo.svg

テーマカラー

Ray Yellow--accentColor(246, 196, 3)

Vacuum Dark--darkColor(40, 26, 8)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

{$subcolor1-name}{$subcolor1-variable}{$subcolor1-info}

{$subcolor2-name}{$subcolor2-variable}{$subcolor2-info}

{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}

{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}

{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}

{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

このテーマはSCP-5999のヴィジュアルに由来して、EstrellaYoshte EstrellaYoshte が作成したBlack Highlighterベースのテーマです。

このテーマを使うためにはBlack Highlihghterテーマも導入する必要があります。Black Highlighterテーマについてはこちら。

このテーマを導入するには、以下のコードをあなたのページに追加してください。

[[include :scp-jp:theme:black-highlighter-theme]]
[[include :scp-jp:theme:isolated-terminal]]

pxlogo.png

画像

水平線はハイフン5つ「-----」で作ることができ、(例えばblockquoteのような) 何かの中に位置していない限りページ全体に展開されます。この文書内の節を区切っているのが水平線です。

見出しは行の先頭に1〜6個のプラス「+」を置くことで作成できます。

1番目の見出し

2番目の見出し

3番目の見出し

4番目の見出し

5番目の見出し

6番目の見出し

これはタブです。

見てください。ここにも文章が。

なんとも奇妙な。

長いタブです。たくさん文章が詰まっています。

もっと長いタブです。たくさん文章が詰まっています。

各行の先頭に「> 」と書くことで引用ブロックを作ることができます。
さらなるテキスト

分割線も入ります。

入れ子の引用ブロック

これは	表です
もう既に	作り方は
知っていますね

[[div class="expoblock"]]

expoblock ブロックの中にある水平線

[[span class="hilighter"]]
スーパーカリフラジスティ......分かるだろ?

さらなる設定

画面の走査線フィルタを無効化するには、以下のパッチを追加します。

[[module CSS]]
div#extrac-div-1, div#extrac-div-2 {
display: none;
}
[[/module]]

このテーマはそのまま使用することを意図して作られていますが、[[include]]文の直後に以下のCSSコードを置くことで色を変えることができます。

:root {
--accentColor: 246,196,3;
--darkColor: 40,26,8;
}

--accentColor は主要なアクセントを制御します。(デフォルトは黄色です。)
--darkColor はテーマの背景と暗い陰を制御します。
RGB形式で、希望の色に変更してください。

背景色に純粋な黒を使用しないことをお勧めします。

以下のCSSコードを[[include]]文の直後に置いて主要和文フォントをjiskan24hにすることで、より古いディスプレイにすることができます (当然ながら視認性が低下するため、基本的にはお勧めしません)。

:root {
--body-font: 'Terminus', 'jiskan24h', sans-serif;
}

あるいは、Ayu18を利用して以下のようにする方法もあります。

[[include :scp-jp:theme:black-highlighter-theme]]
[[include :scp-jp:theme:isolated-terminal]]
[[include :scp-jp:component:ayu18]]
[[module CSS]]
:root {
--body-font: 'Terminus', 'ayu18regular', sans-serif;
}
[[/module]]

ヘッダーフォントは JFドット東雲明朝16

本文フォントは Terminus と Noto Sans JP

半角モノタイプフォントは ProFontWindows

UI部フォントは ProFontWindows と JFドットjiskan24h

TerminusおよびNoto Sans JPはSIL Open Font Licenseでライセンスされています。
ProFontWindowsはProFont Redistribution Terms v1.00でライセンスされています。
JFドット東雲明朝16は、著作者の権利放棄によるパブリックドメインでライセンスされています。
JFドットjiskan24hは、全角部分がパブリックドメインですが、部分的に日比谷24を使用しているため、全体はSIL Open Font License v1.1でライセンスされます。

脚注

. これは脚注です。

ソースコード

/*IsolatedTerminalThemeCSS (ja-JPmodification) byoplax-counterpoint (@merliborn)
*/
@importurl('https://scp-jp-storage.wdfiles.com/local--files/file%3A9042763-2-mfzo/JFDotShinonomeMing16.css');
@importurl('https://scp-jp-storage.wdfiles.com/local--files/file%3A9042763-3-ci8u/profontwindows.css');
@importurl('https://scp-jp-storage.wdfiles.com/local--files/file%3A9042763-5-t5lr/terminus.css');
@importurl('https://scp-jp-storage.wdfiles.com/local--files/file%3A9042763-6-aeo3/jiskan24.css');
 
/*NotoSansJP*/
@importurl('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
 
:root{
 /*S-CSS-Pintegrationsareremovedbecauseit'sunavailableinscp-jp. */
 
 /*headermeasurements*/
 --header-height-on-desktop:12.4rem;
 --header-height-on-mobile:12rem;
 --header-h1-font-size: calc(var(--base-font-size) * 3);
 
 /*Typefaces*/
 --body-font: 'Terminus', 'Noto Sans JP', sans-serif;
 --header-font: 'JSDot Shinonome Ming 16', sans-serif;
 --title-font: 'JSDot Shinonome Ming 16', sans-serif;
 --mono-font: 'profontwindowsregular', monospace;
 --UI-font: 'profontwindowsregular', 'jiskan24h', monospace;
 --base-font-size:1.1rem;
 
 /*nulllogo*/
 --logo-image:none;
 
 /*changetitle*/
 --header-title: "SCP FOUNDATION";
 
 /*HeaderGradients*/
 --diagonal-stripes: initial;
 
 /*----*/
 
 --accentColor:246, 196, 3;
 --darkColor:40, 26, 8;
 
 --bright-accent: var(--accentColor);
 --dark-accent: var(--accentColor);
 --pale-accent: var(--accentColor);
 --medium-accent: var(--accentColor);
 
 --black-monochrome: var(--accentColor);
 --dark-gray-monochrome: var(--darkColor);
 --gray-monochrome: var(--darkColor);
 --light-pale-gray-monochrome: var(--darkColor);
 --pale-gray-monochrome: var(--accentColor);
 --very-light-gray-monochrome: var(--darkColor);
 --white-monochrome: var(--darkColor);
 
 --rating-module-bg-color: var(--pale-gray-monochrome);
 --rating-module-button-color: var(--white-monochrome);
 --rating-module-button-credit-color: var(--white-monochrome);
 --rating-module-text-color: var(--white-monochrome);
 --rating-module-button-cancel-color: var(--gray-monochrome);
 --rating-module-text-hover-color: var(--pale-gray-monochrome);
 
 --swatch-headerh1-color: var(--black-monochrome);
 
 --swatch-menubg-medium-color: var(--bright-accent);
 --swatch-menubg-light-color: var(--gray-monochrome);
 --swatch-menutxt-light-color: var(--black-monochrome);
 --swatch-menubg-medium-dark-color: var(--black-monochrome);
 
 --swatch-primary-darker: var(--bright-accent);
 --swatch-primary-darkest: var(--pale-gray-monochrome);
 --swatch-text-secondary-color: var(--white-monochrome);
 --swatch-text-light: var(--bright-accent);
 --swatch-topmenu-bg-color: var(--bright-accent);
 
 --gradient-header:none;
 --gradient-background: rgb(var(--gray-monochrome));
 
 /*DesktopSidebarbutton*/
 --toggle-button-bg: rgb(var(--swatch-menubg-light-color));
 --toggle-border-width:0;
 --toggle-icon-color: rgb(var(--swatch-primary-darkest));
 --toggle-roundness:0;
}
 
/*mobilemenumarkpatch*/
#headerdiv[class*="top-bar"]>div.open-menu>p>a{font-family: 'Noto Sans JP', sans-serif;
}
 
/*creditviewpatch*/
@media (max-width:479px) {div.modalbox{font-size:90%;
 }#u-credit-viewdiv.credit{margin:2em1ch;
 }}#u-credit-viewdiv.creditBottomRate{padding-top:0px;
}#u-credit-viewdiv.credit-license{height: unset;
 position:fixed;
}#u-credit-viewdiv.credit-licensea{padding:0px min(2px, 0.08em);
 font-size: unset;
}#u-credit-viewdiv.creditBottomRate > div:not(.credit-license) {position:relative;
 top:0px;
}#u-credit-otherwise.otherwise.credit-back{display:none;
}#u-credit-otherwisediv.credit.otherwise{padding-bottom:1em;
}#u-credit-otherwise.modalbox-title{margin-bottom:14px;
}
/* ------------------------------- */
 
/*headertitleadjustments*/
#header::before{opacity:1;
}
 
/*changelogoopacity*/
#header{
 -webkit-filter:none;
 filter:none;
}#headerh1,
#headerh1a,
#headerh1a::before{text-shadow:none;
 letter-spacing:0.1rem;
 align-self: flex-end;
}#headerh1a::before{height:0.5em;
 -webkit-text-stroke:0;
}#headerh1a::after,
#headerh1aspan,
#headerh2{display:none;
}
 
/*svglogomask*/
#header::before{background-color: rgb(var(--black-monochrome));
 -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvgxmlns='http://www.w3.org/2000/svg' version='1.0' width='1040' height='1040'%3E%3Cpath d='M437 969v-10h-73v-18h-36v-18h-36v-18h-36v-18h-56v18h-72v-36h-18v-36H92v-37H74v-36H55v-36H37v-36H19v-56h18v-18h18v-18h19V451h18v-72h18v-38h18v-36h18v-36h18v-18h18v-18h18v-19h20v-18h18v-18h18v-18h36v-18h36v-18h18v-18h18V50h19V32h272v18h19v56h18v18h18v18h36v18h36v18h18v18h20v18h18v19h18v18h18v18h18v36h18v36h18v38h18v72h18v145h19v18h18v18h18v56h-18v36h-18v36h-19v36h-18v37h-18v36h-18v36h-72v-18h-56v18h-36v18h-36v18h-36v18h-73v20H437v-10zm146-37v-9h72v-18h37v-18h36v-18h18v-18h92v18h54v-36h18v-37h18v-36h18v-36h18v-36h19v-38h-19v-18h-18v-18h-18V469h-18v-72h-18v-38h-18v-36h-18v-18h-18v-36h-18v-18h-20v-18h-18v-19h-36v-18h-18v-18h-36v-18h-18v-18h-19v-36h-18V70H401v36h-18v36h-19v18h-18v18h-36v18h-18v18h-36v19h-18v18h-18v18h-20v36h-18v18h-18v36h-18v38h-18v72h-18v145H92v18H74v18H55v38h19v36h18v36h18v36h18v37h18v36h54v-18h92v18h18v18h36v18h37v18h72v18h128v-9z'/%3E%3Cpath d='M437 805v-9h-54v-18h-37v-18h-18v-18h-18v-18h-18v-18h-36v18h-36v18h-20v-18h-18v-36h38v-18h18v-20h18v-18h-18v-72h-18v-73h18v-72h18v-36h18v-38h18v-18h18v-18h18v-18h18v-18h37v-18h36v-18h72v-55h56v55h72v18h36v18h37v18h18v18h18v18h18v18h18v38h18v36h18v72h20v73h-20v72h-18v18h18v20h20v18h36v36h-18v18h-18v-18h-38v-18h-36v18h-18v18h-18v18h-18v18h-37v18h-54v18H437v-9zm164-54v-9h36v-18h37v-18h18v-18h18v-18h-18v-20h-37v-18h-18v38h-18v-20h-18v-36h-18v-18h-18v-18h-18v-36h90v18h55v18h-18v18h18v18h36v18h18v-54h18V469h-18v-54h-18v-36h-18v-20h-18v-18h-18v-18h-37v-18h-36v-18h-54v92h36v36h-18v36h-18v36h-18v18h-20v-18h-18v-36h-18v-36h-18v-36h36v-92h-54v18h-36v18h-37v18h-18v18h-18v20h-18v36h-18v54h-18v109h18v54h18v-18h36v-18h18v-18h-18v-18h55v-18h90v36h-18v18h-18v18h-18v36h-18v20h-18v-38h-18v18h-37v20h-18v18h18v18h18v18h37v18h36v18h164v-9z'/%3E%3C/svg%3E");
 mask-image: url("data:image/svg+xml;charset=utf8,%3Csvgxmlns='http://www.w3.org/2000/svg' version='1.0' width='1040' height='1040'%3E%3Cpath d='M437 969v-10h-73v-18h-36v-18h-36v-18h-36v-18h-56v18h-72v-36h-18v-36H92v-37H74v-36H55v-36H37v-36H19v-56h18v-18h18v-18h19V451h18v-72h18v-38h18v-36h18v-36h18v-18h18v-18h18v-19h20v-18h18v-18h18v-18h36v-18h36v-18h18v-18h18V50h19V32h272v18h19v56h18v18h18v18h36v18h36v18h18v18h20v18h18v19h18v18h18v18h18v36h18v36h18v38h18v72h18v145h19v18h18v18h18v56h-18v36h-18v36h-19v36h-18v37h-18v36h-18v36h-72v-18h-56v18h-36v18h-36v18h-36v18h-73v20H437v-10zm146-37v-9h72v-18h37v-18h36v-18h18v-18h92v18h54v-36h18v-37h18v-36h18v-36h18v-36h19v-38h-19v-18h-18v-18h-18V469h-18v-72h-18v-38h-18v-36h-18v-18h-18v-36h-18v-18h-20v-18h-18v-19h-36v-18h-18v-18h-36v-18h-18v-18h-19v-36h-18V70H401v36h-18v36h-19v18h-18v18h-36v18h-18v18h-36v19h-18v18h-18v18h-20v36h-18v18h-18v36h-18v38h-18v72h-18v145H92v18H74v18H55v38h19v36h18v36h18v36h18v37h18v36h54v-18h92v18h18v18h36v18h37v18h72v18h128v-9z'/%3E%3Cpath d='M437 805v-9h-54v-18h-37v-18h-18v-18h-18v-18h-18v-18h-36v18h-36v18h-20v-18h-18v-36h38v-18h18v-20h18v-18h-18v-72h-18v-73h18v-72h18v-36h18v-38h18v-18h18v-18h18v-18h18v-18h37v-18h36v-18h72v-55h56v55h72v18h36v18h37v18h18v18h18v18h18v18h18v38h18v36h18v72h20v73h-20v72h-18v18h18v20h20v18h36v36h-18v18h-18v-18h-38v-18h-36v18h-18v18h-18v18h-18v18h-37v18h-54v18H437v-9zm164-54v-9h36v-18h37v-18h18v-18h18v-18h-18v-20h-37v-18h-18v38h-18v-20h-18v-36h-18v-18h-18v-18h-18v-36h90v18h55v18h-18v18h18v18h36v18h18v-54h18V469h-18v-54h-18v-36h-18v-20h-18v-18h-18v-18h-37v-18h-36v-18h-54v92h36v36h-18v36h-18v36h-18v18h-20v-18h-18v-36h-18v-36h-18v-36h36v-92h-54v18h-36v18h-37v18h-18v18h-18v20h-18v36h-18v54h-18v109h18v54h18v-18h36v-18h18v-18h-18v-18h55v-18h90v36h-18v18h-18v18h-18v36h-18v20h-18v-38h-18v18h-37v20h-18v18h18v18h18v18h37v18h36v18h164v-9z'/%3E%3C/svg%3E");
 -webkit-mask-size: calc(var(--header-height-on-desktop) - var(--header-h1-font-size) - 1rem);
 mask-size: calc(var(--header-height-on-desktop) - var(--header-h1-font-size) - 1rem);
 -webkit-mask-position:center0;
 mask-position:center0;
 -webkit-mask-repeat:no-repeat;
 mask-repeat:no-repeat;
}#header{
 --swatch-text-secondary-color: var(--black-monochrome);
 
 --login-dropdown-text-hover-color: var(--white-monochrome);
}#my-account:hover,
#my-account:active,
#my-account:focus{
 --login-myaccount-color: var(--white-monochrome);
}#search-top-box:focus-within{
 --search-icon-hover-color: var(--swatch-menubg-light-color);
}#search-top-boxform[id="search-top-box-form"]input[type="text"]{
 --search-focus-textbox-bg-color: var(--black-monochrome);
 background-color: rgb(var(--search-focus-textbox-bg-color), 0.06) !important;
}#search-top-boxform[id="search-top-box-form"]:not(:focus-within) input[type="text"]{
 --search-textbox-text-color: var(--black-monochrome);
}#top-bar{
 --dropdown-links-hover-color: var(--white-monochrome);
}#top-bar.mobile-top-bar>ul>li>a{
 --topmenu-category-color: var(--white-monochrome);
}#top-bar.mobile-top-bar>ul>li:hover>a,
#top-bar.mobile-top-bar>ul>li:active>a,
#top-bar.mobile-top-bar>ul>li:focus-within>a{
 --topmenu-category-hover-bg: var(--white-monochrome);
}#headerdiv[class*="top-bar"]>div.open-menu>p>a{
 --mobile-topmenu-sidebar-button-color: var(--white-monochrome);
}
 
/* ------------------------------- */
 
/*EDITBOX*/
#wd-editor-toolbar-panel{
 --editor-icon-color: var(--white-monochrome);
}form#edit-page-form.edit-page-bottomtablediv.sub{color: var(--swatch-primary-darkest);
}
 
/* ------------------------------- */
 
/*ImageBlock*/
.scp-image-block{box-sizing: border-box;
 border-width:0;
 box-shadow:none;
}:is(div.image-block,div.scp-image-block) :is(.image-caption,.scp-image-caption) {color: rgb(var(--swatch-text-secondary-color));
 background-color: rgb(var(--swatch-primary-darker));
 border-color: rgb(var(--swatch-primary-darker));
 padding:0.15rem;
 margin-top:6px;
}
 
/*Blockquote*/
#main-content{
 --blockquote-bg-color: var(--swatch-tertiary-color), 0.06;
}
 
/*Code*/
div.code{background-color:#f4f4f4;
 text-shadow:none;
}
 
/*hr*/
hr{background-color: rgb(var(--swatch-menubg-medium-color));
 height:0;
 margin-top:1.5em;
 margin-bottom:1.5em;
}:is(blockquote, .blockquote, div.blockquote, [class*="blockquote"])>hr{margin-left: -2ch;
 margin-right: -2ch;
}
 
/*footnotes*/
a.footnoteref{display:inline;
}.footnotes-footera[href*="javascript"]:-webkit-any-link{margin-right: -0.45rem;
}.footnotes-footera[href*="javascript"]:-moz-any-link{margin-right: -0.45rem;
}.footnotes-footera[href*="javascript"]:any-link{margin-right: -0.45rem;
}.footnotes-footera[href*="javascript"]::before{padding-left:0.35em;
}.footnotes-footera[href*="javascript"]::before,
.footnotes-footera[href*="javascript"]:hover::before{color: rgb(var(--swatch-secondary-color));
 background-color: rgb(var(--swatch-primary));
}.footnotes-footer,
.bibitems{background-color: rgba(var(--footnotes-footer-colorbar-color), 0.06);
}
 
/*LINK*/
#main-contenta:not(#breadcrumbsa, .pseudocrumbsa, .page-rate-widget-boxa, .rate-box-with-credit-buttona, ul.yui-nava, .printuser.avatarhovera:first-child, .footnote-footer > a[href*="javascript"], div[id*="page-options-bottom"]a, .danger-diamonda) {font-weight:bold;
 color: rgb(var(--gray-monochrome));
 padding:0.115em;
 background-color: rgb(var(--black-monochrome));
}#main-contenta:not(#breadcrumbsa, .pseudocrumbsa, .page-rate-widget-boxa, .rate-box-with-credit-buttona, ul.yui-nava, .printuser.avatarhovera:first-child, .footnote-footer > a[href*="javascript"], div[id*="page-options-bottom"]a, .danger-diamonda):hover{box-shadow:000.7em0.1em rgba(var(--black-monochrome), 0.3);
}
 
/*CUSTOMBLOCKS*/
 
.expoblock{box-sizing: border-box;
 border:solid0.7rem rgb(var(--black-monochrome));
 padding:1rem;
}.expoblockhr{height:0.6rem;
 margin:1.5em0;
}span.hilighter{background-color: rgb(var(--black-monochrome));
 color: rgb(var(--gray-monochrome));
 font-weight:bold;
 padding:0.2em;
 font-size:108%;
 line-height:1.2;
}
 
/*authorlabelcompatibility*/
#page-content.authorlink-wrapper>a::before{color: rgb(var(--gray-monochrome));
}#page-content.authorlink-wrapper.authorbox{
 -webkit-filter: drop-shadow(003px rgba(var(--black-monochrome), 0.75));
 filter: drop-shadow(003px rgba(var(--black-monochrome), 0.75));
}
 
/*ayersinfocompatibility*/
.info-container{
 --barColour: rgb(var(--accentColor));
 --linkColour: rgb(var(--darkColor));
}#main-content#page-content.info-container>.collapsible-blocka.collapsible-block-link{background-color: var(--linkColour);
}.info-container.collapsible-block-unfolded{border-color: rgb(var(--accentColor));
}
 
/*---- PAGETAGS ----*/
#main-content.page-tags{margin-bottom:1rem;
}#main-content.page-tagsspan{display:block;
}#content-wrap#main-content.page-tagsspana:-webkit-any-link:not([href^="/system:page-tags/tag/_"]) {margin:0.2rem;
 padding:0.2em0.25em;
}#content-wrap#main-content.page-tagsspana:-moz-any-link:not([href^="/system:page-tags/tag/_"]) {margin:0.2rem;
 padding:0.2em0.25em;
}#content-wrap#main-content.page-tagsspana:any-link:not([href^="/system:page-tags/tag/_"]) {margin:0.2rem;
 padding:0.2em0.25em;
}
 
/*---- BOTTOMOPTIONS ----*/
div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn{
 --button-padding: calc(var(--icon-size) / 6);
 flex-basis:8.3rem;
 flex-grow:1;
}div[id*="page-options-bottom"]>a#more-options-button{flex-grow:4;
}
 
/*---- LICENSEAREA ----*/
#license-area{
 --swatch-text-secondary-color: var(--black-monochrome);
 --license-link-hover-bg-color: var(--black-monochrome);
 --license-link-hover-color: var(--white-monochrome);
}
 
/*---- SCANLINEMONITOREFFECT ----*/
#extrac-div-1{position:fixed;
 width:100vw;
 height:100vh;
 pointer-events:none;
 background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, 0));
 background-size:auto8px;
 opacity:0.7;
}#extrac-div-2{position:fixed;
 width:100vw;
 height:1rem;
 top:0;
 pointer-events:none;
 background: linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, rgba(255, 250, 250, 1) 50%, rgba(255, 255, 255, 0.98) 51%, rgba(255, 0, 0, 0) 100%);
 opacity:.1;
 -webkit-animation: scanm 6s linear infinite;
 animation: scanm 6s linear infinite;
}
 
@-webkit-keyframesscanm{
 0% {top: -1rem;
 opacity:.05;
 }
 
 25% {top:50%;
 opacity:.03;
 }
 
 37.5% {top:75%;
 opacity:0.06;
 }
 
 50% {top:100%;
 opacity:.03;
 }
 
 100% {top:100%;
 }}@keyframesscanm{
 0% {top: -1rem;
 opacity:.05;
 }
 
 25% {top:50%;
 opacity:.03;
 }
 
 37.5% {top:75%;
 opacity:0.06;
 }
 
 50% {top:100%;
 opacity:.03;
 }
 
 100% {top:100%;
 }}#extrac-div-3{position:fixed;
 width:100vw;
 height:100vh;
 pointer-events:none;
 background-image: radial-gradient(circle, rgb(230, 210, 200) 0%, rgb(177, 158, 152) 60%, rgb(55, 28, 30) 100%);
 opacity:0.25;
 mix-blend-mode: color-dodge;
 background-repeat:no-repeat;
 background-size: cover;
 z-index:30;
}
 
/*fixesachromebug*/
html{background: rgb(var(--swatch-background));
}
/*disablescreeneffectonsafariduetobug*/
@supports (-webkit-hyphens:none) {#extrac-div-3{display:none;
}}
 
/*---- MOBILEQUERY ----*/
@mediaonlyscreenand (max-width: 56.25rem) {
 :root{
 --header-h1-font-size: calc(var(--base-font-size) * 2.4);
 }#login-status:hover{background-color: rgba(var(--swatch-menubg-light-color), 0.65);
 -webkit-backdrop-filter: blur(0.1rem);
 backdrop-filter: blur(0.1rem);
 }}
 
/*---- CODEBLOCKPATCH ----*/
.hl-default, .hl-code, .hl-brackets{color: rgb(var(--darkColor));
}

@supports(display: grid) {
 :root{
 --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
 --body-width-on-desktop:45.75rem;
 }
 @mediaonlyscreenand (min-width:769px) {
 #side-bar .close-menu {
 display: block;
 position:fixed;
 top: unset;
 bottom:0.5rem;
 left:0.5rem;
 width:3rem;
 height:3rem;
 background: unset;
 opacity:1;
 pointer-events:all;
 z-index: -1;
 }#side-bar.close-menuimg{color:transparent;
 }#side-bar.close-menu::before,
 #side-bar.close-menu::after{content: "";
 box-sizing: border-box;
 position:fixed;
 display:block;
 top: unset;
 bottom:0.5rem;
 left:0.5rem;
 width:3rem;
 height:3rem;
 padding:0;
 margin:0;
 text-align:center;
 pointer-events:all;
 cursor:pointer;
 transition:
 opacity var(--sidebar-transition-timing);
 }#side-bar.close-menu::before{
 --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='003232' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.102-.92-2s-.9-2-2-2H4c-1.10-2.9-22s.9222zm24 4H4c-1.10-2.9-22s.9222h24c1.102-.92-2s-.9-2-2-2zm0 8H4c-1.10-2.9-22s.9222h24c1.102-.92-2s-.9-2-2-2z'/%3E%3C/svg%3E");
 z-index: -1;
 background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
 -webkit-mask: var(--mask);
 mask: var(--mask);
 -webkit-mask-repeat:no-repeat;
 mask-repeat:no-repeat;
 -webkit-mask-position:50%50%;
 mask-position:50%50%;
 -webkit-mask-size:60%;
 mask-size:60%;
 }#side-bar.close-menu::after{z-index: -2;
 background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
 border-radius: var(--toggle-roundness, 50%);
 border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
 }#side-bar:focus-within.close-menu,
 #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover.close-menu{pointer-events:none;
 }#side-bar:focus-within.close-menu::before,
 #side-bar:focus-within.close-menu::after{opacity:0;
 pointer-events:none;
 }#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover.close-menu::before,
 #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover.close-menu::after{opacity:0;
 pointer-events:none;
 }#side-bar{display:block;
 position:fixed;
 top:0;
 left: calc(var(--sidebar-width-on-desktop)*-1);
 z-index:10;
 transition:left500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
 height:100%;
 overflow-y:auto;
 overflow-x:hidden;
 margin-top:0;
 }#side-bar:focus-within{left:0;
 }#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover{left:0;
 }#side-bar.side-block{margin-top:1rem;
 background-color: rgb(0, 0, 0, 0);
 border-radius:0;
 border-left-width:0px;
 border-right-width:0px;
 }#main-content::before{content: "";
 display:block;
 position:fixed;
 top:0;
 right:0;
 z-index: -1;
 opacity:0;
 transition:
 opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
 width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
 margin-left: var(--sidebar-width-on-desktop);
 background: rgba(var(--swatch-menubg-black-color), .3) 1px1pxrepeat;
 padding-right:0;
 width:100%;
 height:100vh;
 pointer-events:none;
 z-index:99;
 }#side-bar:focus-within ~ #main-content::before{width: calc(100% - var(--sidebar-width-on-desktop));
 opacity:1;
 pointer-events:all;
 }#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before{width: calc(100% - var(--sidebar-width-on-desktop));
 opacity:1;
 pointer-events:all;
 }@supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) {#side-bar{padding:inherit;
 }}#content-wrap{display: flex;
 flex-direction: row;
 width: calc(100vw - (100vw - 100%));
 min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
 flex-grow:2;
 height:auto;
 position:relative;
 margin:0auto;
 max-width:inherit;
 }#main-content{width:100%;
 position: initial;
 max-height:100%;
 padding:2rem 1rem;
 max-width: var(--body-width-on-desktop, 45.75rem);
 margin:0auto;
 }#page-content{max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
 }@supports (-webkit-hyphens:none) {#side-bar{transition:left500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
 padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
 background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
 padding-right:0;
 background-color: rgb(0, 0, 0, 0);
 pointer-events:all;
 overflow-x:visible;
 overflow-y:visible;
 z-index:999;
 }#side-bar::-webkit-scrollbar{opacity:0;
 -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
 transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
 }#side-bar.close-menu::before{z-index:999;
 }#side-bar.close-menu::after{z-index:998;
 }#side-bar:hover.close-menu::before,
 #side-bar:hover.close-menu::after{opacity:0;
 }#side-bar:hover{left:0;
 background-color: rgba(var(--swatch-menubg-color), 1);
 padding-right:0;
 }#side-bar:hover::-webkit-scrollbar {
 opacity: 1;
 }#side-bar:hover~#main-content::before{width: calc(100% - var(--sidebar-width-on-desktop));
 opacity:1;
 pointer-events:all;
 }
 }
 }
 }
}

:root{
 /*headermeasurements*/
 --header-height-on-desktop:10rem;
 --header-height-on-mobile:10rem;
 --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
 --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
 --logo-image: url("https://scp-jp.github.io/Black-Highlighter/img/logo.svg");
 }#header{
 --search-textbox-text-color: var(--swatch-secondary-color);
 background:none;
 }#header::before{content: " ";
 position:absolute;
 width:100%;
 height:100%;
 left:0;
 top:0.75rem;
 background-image: var(--logo-image);
 background-repeat:no-repeat;
 background-position:center0;
 background-size:auto calc(var(--header-height-on-desktop) - 1.5rem);
 opacity:0.8;
 pointer-events:none;
 }#headerh1,
 #headerh2{margin:0;
 padding:0;
 width:100%;
 height: var(--header-height-on-desktop);
 display: flex;
 align-items:center;
 justify-content:center;
 display: flex;
 align-items:center;
 justify-content:center;
 }#headerh1a,
 #headerh1a::before,
 #headerh2span,
 #headerh2span::before{margin:0;
 padding:0;
 z-index:0;
 display:block;
 text-align:center;
 }#headerh1{z-index:1;
 }#headerh1a::before,
 #headerh1a::after{content: var(--header-title);
 }#headerh1a::before{color: rgb(var(--swatch-text-tertiary-color));
 z-index: -1;
 -webkit-text-stroke:0.325rem rgb(var(--swatch-text-dark));
 }#headerh1a::after{color: rgb(var(--swatch-headerh1-color));
 z-index:1;
 }#headerh2{z-index:0;
 text-transform:uppercase;
 pointer-events:none;
 }#headerh2span{margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/1.6 - 2em);
 }#headerh2span::before,
 #headerh2span::after{
 --wght:600;
 content: var(--header-subtitle);
 position:absolute;
 left:50%;
 transform: translateY(-50%) translateX(-50%);
 width:100%;
 text-align:center;
 }#headerh2span::before{
 -webkit-text-stroke:0.25rem rgb(var(--swatch-text-dark));
 }#headerh2span::after{color: rgb(var(--swatch-headerh2-color));
 z-index:1;
 }#search-top-boxform[id="search-top-box-form"]:not(:focus-within) input[type="text"]{color: rgba(0, 0, 0, 0);
 }@media (min-width: 36rem) {#login-status{flex-grow:1;
 left:3%;
 right: initial;
 }#login-status::before{
 --mask-image:none;
 background-color:transparent;
 }#login-status:not(:focus-within) {color: rgb(var(--login-line-divider-color));
 -webkit-user-select: initial;
 -moz-user-select: initial;
 -ms-user-select: initial;
 user-select: initial;
 }#login-status#account-topbutton,
 #login-status:not(:focus-within) #account-topbutton{
 --clip-path:
 polygon( 00, 100%0, 100%100%, 0100% );
 background-color: rgba(var(--login-arrow-color), 0);
 
 }#login-status#account-topbutton::before{
 --clip-path:
 polygon( 30%35%, 70%35%, 50%60%, 50%60% );
 --mask-image: initial;
 content: "";
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-color: rgba(var(--login-arrow-color), 1);
 -webkit-clip-path: var(--clip-path);
 clip-path: var(--clip-path);
 }#login-status#account-topbutton::before,
 #login-status:not(:focus-within) #account-topbutton::before,
 #login-status:not(:focus-within) #account-topbutton:hover::before {
 --clip-path:
 polygon( 30%35%, 70%35%, 50%60%, 50%60% );
 --mask-image: initial;
 }#login-status:not(:focus-within) #account-topbutton::after{display:none;
 }#login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
 --clip-path:
 polygon(
 00,
 100%0,
 100%100%,
 0100%
 );
 pointer-events:all;
 -webkit-clip-path: var(--clip-path);
 clip-path: var(--clip-path);
 }#login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {opacity:1;
 }#login-status#my-account{
 --wght:300;
 }#account-options{background: var(--gradient-header);
 }#search-top-box{top:1.5em;
 right:3%;
 background: rgba(var(--search-focus-textbox-bg-color), 0.4);
 }#search-top-box:focus-within ~ #login-status{opacity:1;
 }#search-top-box::after{transition:
 background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
 -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
 transition:
 background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
 clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
 transition:
 background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
 clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
 -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }#search-top-box:not(:focus-within)::after{
 --clip-path:
 polygon(
 00,
 100%0,
 100%100%,
 0%100%
 );
 background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
 -webkit-clip-path: var(--clip-path);
 clip-path: var(--clip-path);
 }#search-top-box:not(:focus-within):hover::after{
 --clip-path:
 polygon(
 00,
 100%0,
 100%100%,
 0100%
 );
 background-color: rgb(var(--search-icon-hover-bg-color));
 }#search-top-boxform[id="search-top-box-form"]:not(:focus-within) {max-width: var(--search-width);
 }#search-top-boxform[id="search-top-box-form"]:not(:focus-within) input[type="text"]{max-width: var(--search-width);
 padding:0 var(--search-height) 01em;
 outline-width:0;
 background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
 color: rgba(var(--search-textbox-text-color), 0.4);
 cursor:pointer;
 }#search-top-boxform[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
 #search-top-boxform[id="search-top-box-form"]:focus-withininput[type="submit"]{pointer-events:all;
 border:none;
 }
 
 }
 
 #page-title::after,
 .meta-title::after,
 #page-title::before,
 .meta-title::before{content: "";
 flex-grow:1;
 height:0.0625rem;
 background: rgb(var(--swatch-primary));
 }#page-title::before,
 .meta-title::before{margin:auto1.25rem autoauto;
 }

[フレーム]

en テーマ

ページリビジョン: 11, 最終更新: 26 Aug 2025 15:54

ディスカッション (1)

SCP財団

確保、収容、保護

クレジット

テーマカラー

1番目の見出し

2番目の見出し

3番目の見出し

4番目の見出し

5番目の見出し

6番目の見出し

さらなる設定

ヘッダーフォントは JFドット東雲明朝16

ソースコード