Old Whitebase テーマ

クレジット

タイトル: Whitebase テーマ
著者: Einoshima
作成年: 2024

このページの概要

AF_XLI 製作の Lost Color を参考に Einoshima が作成した、The Backrooms JP Wiki とその付属サイトで使用可能なテーマです。

このテーマを使用する場合は、以下のインクルードをページの最上部に挿入してください。

[[include :japan-backrooms-wiki:theme:whitebase]]

ヘッダータイトルを変更したい場合は、以下の構文をインクルードの下に挿入してください。

[[module CSS]]
:root {
--header-title: "タイトル";
--header-subtitle: "サブタイトル";
}
[[/module]]

使用例

Image Block

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

通常文章
Alphabet

太字 | 斜体 | 下線 | 打ち消し線 | 等幅フォント | ^{上付き文字}_{下付き文字}

ハイフン4つ"----"で水平線をひくことができます。

---

引用ブロック

ネストされた引用ブロック

ヘッダー	ヘッダー	ヘッダー	ヘッダー	ヘッダー
セルの内容	セルの内容	セルの内容	セルの内容	セルの内容

偽のセレクタ{
偽のプロパティ: 偽の値;
}

赤い

Sexy Box

リンク (多分あなたが訪問したことのあるリンク)

+ 折りたたみ

折りたたみの中身

1. 番号付きリスト
2. リストのアイテム
3. リストのアイテム

• 箇条書きリスト
• リストのアイテム
• リストのアイテム

タブ1

内容1

タブ2

内容2

タブ3

内容3

タブ4

内容4

タブ5

内容5

さまざまな要素

[[div class="darkblock"]]

[[/div]]

[[div class="lightblock"]]

[[/div]]

[[div class="styled-quote"]]

[[/div]]

[[div class="dark-styled-quote"]]

[[/div]]

[[span class="marker-c"]]シアン[[/span]]、[[span class="marker-g"]]グリーン[[/span]]、[[span class="marker-m"]]マゼンタ[[/span]]、[[span class="marker-o"]]オレンジ[[/span]]、[[span class="marker-v"]]バイオレット[[/span]]、[[span class="marker-y"]]イエロー[[/span]]のマーカーを使用可能です。

この Q & A ってどうやって出すの？

こうします。

[[div class="qanda-box"]]
[[div class="qanda-q"]]
この Q & A ってどうやって出すの？
[[/div]]
[[div class="qanda-a"]]
こうします。
[[/div]]
[[/div]]

a¹

脚注

1. a

+ テーマコード

/*
   Whitebase Theme
   [2024 Wikidot Theme]
   by Einoshima
*/
 
:root {
  --theme-base: "black-highlighter";
  --theme-id: "whitebase";
  --theme-name: "Whitebase Theme";
 
  --black-monochrome: 3, 3, 3;
  --gray-monochrome:  45, 46, 46;
  --dark-gray-monochrome:  100, 102, 102;
  --pale-gray-monochrome: 243, 243, 243;
  --light-pale-gray-monochrome: 232, 232, 232;
  --light-gray-monochrome: 159, 159, 159;
  --white-monochrome: 252, 252, 252;
  --dark-accent: var(--gray-monochrome);
  --link-color: 2, 24, 219;
  --hover-link-color: var(--link-color);
  --visited-link-color: 43, 5, 130;
  --alt-accent: 204, 34, 0;
 
  --swatch-primary-darker: 205, 205, 205;
  --swatch-menutxt-light-color: 0, 0, 0;
 
  --swatch-text-light: 0, 0, 0;
  --bright-accent: 140, 140, 140;
  --medium-accent: 255, 255, 255;
  --swatch-topmenu-border-color: var(--white-monochrome);
  --swatch-topmenu-bg-color: var(--white-monochrome);
  --swatch-text-secondary-color: var(--black-monochrome);
  --gradient-header: linear-gradient(to top, rgb(var(--white-monochrome)) 0%, rgb(245, 245, 245) 90%, rgb(240, 240, 240) 100%);
 
    /* Backrooms JP における interwiki のスタイル変数 */
    /* interwiki-style で変数を引き継ぐために、いくつかの値の変更のない old-liminal 変数を あえて再定義する */ 
 
    --white-monochrome: 252, 252, 252;
    --sidebar-background-color: var(--white-monochrome);
    --sidebar-title-background-color: var( --swatch-primary-darker), 0.5;
    --sidebar-title-text-color: var(--black-monochrome);
    --sidebar-title-shadow-color: var(--black-monochrome);
    --sidebar-text-color: var(--black-monochrome);
    --sidebar-hover-text-color: var(--black-monochrome);
    --sidebar-border-color: var(--black-monochrome), .08;
    --sidebar-hover-background-color: var(--bright-accent), .25;
 
}
 
/* 背景の壁紙（小さな丸の集合体みたいなの）調整 */
#container {
    background-image: radial-gradient(circle, rgb(var(--pale-gray-monochrome), 0.05) 50%, transparent 0);
}
 
/* ロゴ調整 */
#header::before {
    filter: brightness(0%);
    top: -.9rem;
    background-image: var(--logo-image);
    background-size: auto 7rem;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .2;
}
 
@media (max-width: 767px) {
  #header::before {
    top: 0;
  }
}
 
/* ヘッダーの調整 */
#header h1 a>span, #header h2 span {
    user-select: none;
}
 
#header h1 a::before, #header h2 span::before {
    color: #0c0c0c;
    text-shadow: 0.063rem 0.1rem 0.5rem #ececec;
    font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
 
/* トップバーの調整 */
#top-bar div.mobile-top-bar>ul, #top-bar div.top-bar>ul {
    border-left: solid 1px rgb(64 64 64 / 10%);
    border-right: solid 1px rgb(64 64 64 / 10%);
}
 
#top-bar div.mobile-top-bar>ul>li:hover, #top-bar div.top-bar>ul>li:hover, #top-bar div.mobile-top-bar>ul>li:focus-within, #top-bar div.top-bar>ul>li:focus-within {
    background-color: rgba(var(--white-monochrome), .15);
}
 
#top-bar div.mobile-top-bar>ul>li>a, #top-bar div.top-bar>ul>li>a, #top-bar div.mobile-top-bar>ul>li>ul>li>a, #top-bar div.top-bar>ul>li>ul>li>a, #top-bar div.top-bar>ul>li>ul>li>ul>li>a, #top-bar>ul>li a, #top-bar>ul>li a:hover {
    --wght: 800;
    --mono-wght: calc(var(--wght) - 50);
}
 
#top-bar div.top-bar>ul>li>ul>li>ul>li {
    background: rgba(var(--white-monochrome), .15);
}
 
#top-bar div.mobile-top-bar>ul>li>ul>li:hover, #top-bar div.mobile-top-bar>ul>li>ul>li>ul>li:hover, #top-bar div.top-bar>ul>li>ul>li:hover, #top-bar div.top-bar>ul>li>ul>li>ul>li:hover {
    background-color: rgba(var(--dark-accent), .05)
}
 
#top-bar div.mobile-top-bar>ul>li>ul, #top-bar div.top-bar>ul>li>ul, #top-bar div.top-bar>ul>li>ul>li>ul {
    --box-shadow: rgba(30, 30, 30, 0.3);
    box-shadow: 0 .125rem .375rem hsla(0, 0%, 5%, .05);
    border: .0625rem solid #dcdcdc;
    background: rgba(var(--white-monochrome), .93);
}
 
/* ユーザー */
#account-topbutton {
    border-radius: 4px;
    box-shadow: 0 0.1em 0.3em hsla(0, 0%, 5%, .30);
    background: var(--white-monochrome);
    border-color: rgb(var(--light-pale-gray-monochrome));
}
 
/* 検索フォーム */
 
#search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:focus, #search-top-box-form input[type=submit]:hover {
    border-radius: 4px;
    box-shadow: 0 0.1em 0.3em hsla(0, 0%, 5%, .30);
    background: var(--white-monochrome);
    border-color: rgb(var(--light-pale-gray-monochrome));
}
 
/* 検索フォーム　PC */
@media (min-width:768px) {
#search-top-box-input {
    border: 0.0625rem solid rgb(var(--pale-gray-monochrome));
    border-radius: 4px;
    background-color: rgb(var(--white-monochrome));
}
 
#search-top-box input.empty {
    color: rgba(var(--swatch-tertiary-color));
}
}
 
/* 検索フォーム　モバイル */
@media only screen and (max-width:768px) {
    #search-top-box:not(:focus-within):before {
          background-color: rgb(var(--light-gray-monochrome));
    }
}
/* サイドバー */
#side-bar .heading p, #side-bar .side-block>.collapsible-block .collapsible-block-link, .side-block .heading {
    text-shadow: none;
}
 
.side-block .heading p {
    --wght: 800;
    --mono-wght: calc(var(--wght) - 50);
}
 
/* タブ調整 */
.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
    --tab-border-color: rgb(var(--light-gray-monochrome));
}
 
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected, .yui-navset .yui-nav a:focus, .yui-navset .yui-nav a:hover {
    background-color: rgb(var(--light-gray-monochrome));
}
 
/* rateモジュール調整 */
.page-rate-widget-box, #page-content .rate-box-with-credit-button {
    background: rgb(var(--white-monochrome));
}
 
/* image-block調整 */
.scp-image-block {
    border: 1px solid rgb(var(--light-pale-gray-monochrome));
    box-shadow: 0.05rem 0.1rem 0.2rem rgba(0, 0, 0, .25);
}
 
.scp-image-block .scp-image-caption {
    border-top: 1px solid rgb(var(--light-pale-gray-monochrome));
    background-color:rgb(var(--pale-gray-monochrome));
}
 
/* ページオプション */
div#page-options-bottom, div#page-options-bottom-2 {
    border-left: solid 2px rgb(210, 210, 210);
    border-right: solid 2px rgb(210, 210, 210);
    background-color: rgb(210, 210, 210);
}
 
div#page-options-bottom-2>a, div#page-options-bottom>a, div#page-options-bottom-2>a:active, div#page-options-bottom-2>a:hover, div#page-options-bottom>a:active, div#page-options-bottom>a:hover {
    --wght: 800;
    --mono-wght: calc(var(--wght) - 50);
    padding: 0.25rem 0.45rem;
    margin: 0px 2px;
}
 
div#page-options-bottom-2>a, div#page-options-bottom>a {
    background-color: rgb(var(--white-monochrome));
}
 
div#page-options-bottom-2>a:active, div#page-options-bottom-2>a:hover, div#page-options-bottom>a:active, div#page-options-bottom>a:hover {
    background-color: rgb(var(--bright-accent));
}
 
.owindow .button-bar a, a.button, button, div.buttons input, file, input.button, .owindow .button-bar a:hover, a.button:hover, button:hover, div.buttons input:hover, file:hover, input.button:hover {
    color: rgb(var(--white-monochrome));
}
 
/* 見出し　の書式設定 */
h1, h2, h3, h4, h5, h6 {
    --wght: 800;
    --mono-wght: calc(var(--wght) - 50);
}
 
/* 水平線（区切り線） の書式設定 */
#page-content > hr {
    display: block;
    margin: 2em auto;
    border: none;
    border-top: 2px dashed black;
    padding: 0;
    height: 0.063rem;
    color: transparent;
    background-color: transparent;
    width: 30%;
}
 
/* 目次・引用 の書式設定 */
#toc, .blockquote, [class*=blockquote], blockquote, div.blockquote {
    border: 2px dotted rgb(var(--light-pale-gray-monochrome));
    background-color:rgb(var(--pale-gray-monochrome));
    box-shadow: 0.05rem 0.1rem 0.2rem rgba(0, 0, 0, .25);
}
 
#toc .title {
    --wght: 800;
    --mono-wght: calc(var(--wght) - 50);
}
 
/* styled-quote調整 */
.styled-quote {
   background-color: rgb(var(--white-monochrome));
   border-left: 0.5rem solid rgba(var(--dark-gray-monochrome));
}
 
/* dark-styled-quote調整 */
.dark-styled-quote {
    border-left: 0.5rem solid rgba(var(--light-gray-monochrome));
}
 
/* 脚注のリスト調整 */
.footnotes-footer {
    border-left: 0.5em solid rgba(var(--gray-monochrome));
}
 
/* マウスで選択した部分の色 */
::selection {
    background-color: #1d66db;
    color: white;
}
 
/* マーカーを引く */
.marker-c {
    background:linear-gradient(transparent 70%, #68c9f2 30%);
}
 
.marker-g {
    background:linear-gradient(transparent 70%, #4be048 30%);
}
 
.marker-m {
    background:linear-gradient(transparent 70%, #ff85f1 30%);
}
 
.marker-o {
    background:linear-gradient(transparent 70%, #ffa754 30%);
}
 
.marker-v {
    background:linear-gradient(transparent 70%, #b785ff 30%);
}
 
.marker-y {
    background:linear-gradient(transparent 70%, #e0ef1c 30%);
}
 
/* Q & A ボックス（親要素）*/
.qanda-box {
    border: 2px solid rgb(var(--light-pale-gray-monochrome));
    border-radius: 20px;
    padding: 1em;
    margin: 1em 0;
}
 
/* Q & A ボックス（子要素）*/
.qanda-q, .qanda-a {
    justify-content: space-between;
    position: relative;
    padding: 0 0 0 3em;
    margin: 1em 0;
}
 
.qanda-q::before, .qanda-a::before {
    position: absolute;
    left: 0.3em;
    top: -0.3em;
    font-size: 1.3em;
    text-shadow: 0.3px 0.3px 0px,  0.3px -0.3px 0px, -0.3px 0.3px 0px, -0.3px -0.3px 0px, 0.3px 0px 0px, 0px 0.3px 0px, -0.3px 0px 0px, 0px -0.3px 0px;
  letter-spacing: 1px;
}
 
.qanda-q p, .qanda-a p {
    margin: 0;
}
 
.qanda-q::before {
    content: "Ｑ.";
}
 
.qanda-a::before {
    content: "Ａ.";
}