MediaWiki:Common.css

/* MediaWiki:Vector-2022.css に貼り付けるカスタムCSS */
/* newcssplan.css (Vector 2022デフォルト変数) を 20250710.css のダークテーマの色に上書きします */

:root {
    /* 背景色と文字色 */
    --background-color-base: #1a1a1a; /* 20250710.css の --color-background */
    --color-base: #dddddd; /* 20250710.css の --color-text-primary */
    --color-inverted: #ffffff; /* 20250710.css の --color-text-secondary */

    /* アクセントカラーとリンク色 */
    --color-progressive: #00cccc; /* 20250710.css の --color-accent / --color-link */
    --color-progressive--hover: #00e6e6; /* アクセント色のホバー状態 */
    --color-link: #00cccc; /* リンクのデフォルト色 */
    --color-link--hover: #00e6e6; /* リンクのホバー色 */
    --color-link--active: #009999; /* リンクのアクティブ色 */
    --color-link--focus: #00cccc; /* リンクのフォーカス色 */
    --color-visited: #009999; /* 訪問済みリンクの色 (例) */

    /* 要素の背景色・表面色 (情報ボックス、目次、テーブルなど) */
    --background-color-neutral: #2a2a2a; /* 20250710.css の --color-surface-primary */
    --background-color-neutral-subtle: #3a3a3a; /* 20250710.css の --color-surface-secondary */
    --border-color-base: #ffffff; /* 20250710.css の --color-border */
    --border-color-box: #00cccc; /* ボックスの境界線色 (例: テーブル、情報ボックス) */

    /* その他の主要な要素のデフォルトカラー設定 */
    color: var(--color-base); /* 全体のデフォルトテキスト色 */
    background-color: var(--background-color-base); /* 全体のデフォルト背景色 */
}

/* 特定の要素に対する直接的なオーバーライド (20250710.cssのスタイルを参考に) */
body {
  background-color: var(--background-color-base); /* bodyの背景色を設定 */
  color: var(--color-base); /* bodyの文字色を設定 */
}

#content {
  background-color: var(--background-color-base);
  color: var(--color-base);
}

/* メインコンテンツエリアの枠線 */
.mw-body {
    border: 1px solid var(--color-progressive); /* アクセントカラーを枠線に */
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-inverted); /* 見出しは強調色 */
}

/* リンク */
a {
  color: var(--color-link);
}
a:hover {
  color: var(--color-link--hover);
}

/* テーブル (wikitable) */
.wikitable {
  background-color: var(--background-color-neutral); /* プライマリ表面色を使用 */
  border: 1px solid var(--border-color-base);
  color: var(--color-base); /* テーブル内の文字色 */
}
.wikitable > * > tr > th,
.wikitable > * > tr > td {
  border: 1px solid var(--border-color-base);
}
.wikitable th {
  background-color: var(--background-color-neutral-subtle); /* ヘッダーはセカンダリ表面色 */
  color: var(--color-inverted);
}

/* 情報ボックス/サイドバーなど */
.infobox, .mw-infobox {
  background-color: var(--background-color-neutral);
  border: 1px solid var(--border-color-base);
  color: var(--color-base);
}
.infobox th, .mw-infobox th {
  background-color: var(--background-color-neutral-subtle);
  color: var(--color-inverted);
}

/* 目次 */
.toc, .toccolours {
  background-color: var(--background-color-neutral);
  border: 1px solid var(--border-color-base);
  color: var(--color-base); /* 目次の文字色 */
}
.toctogglelabel {
  color: var(--color-link);
}
.tocnumber {
  color: var(--color-inverted);
}

/* メニュー・ナビゲーション (サイドバーなど) */
.vector-menu-heading-label {
    color: var(--color-inverted); /* メニュー見出しは強調色 */
}
.vector-menu-content li a {
    color: var(--color-base); /* メニュー項目テキスト */
}
.vector-menu-content li a:hover {
    color: var(--color-progressive); /* メニュー項目ホバー色 */
}

/* フッター */
.mw-footer li, #footer-info {
  color: var(--color-base);
}

/* 以前の20250710.cssに含まれていた、具体的な要素に対する追加スタイルも必要に応じて追記してください。 */
/* 例えば、画像キャプション、特定のクラスの要素など。 */
/* 20250710.cssをそのまま貼り付けるか、不足している部分を追記することを検討してください。 */

/* 以下は20250710.cssにあった、一部の特定のスタイル例 */
img {
  border: 1px solid var(--color-border);
}
figure.mw-halign-right,
figure.mw-halign-left,
figure.mw-halign-center,
figure.mw-default-size {
  border: 1px solid var(--color-border);
}
figure.mw-halign-right > figcaption,
figure.mw-halign-left > figcaption,
figure.mw-halign-center > figcaption,
figure.mw-default-size > figcaption {
  border: 1px solid var(--color-text-secondary);
  background-color: var(--color-surface-primary);
}

/* レスポンシブデザインの調整 (20250710.cssより) */
@media(max-width:540px) {
  #mw-panel {
    display: none;
  }

  #left-navigation {
    margin-left: 10px;
  }

  #content {
    margin: 0 10px;
  }
}

/* 状態色 (20250710.cssより) */
.mw-plusminus-pos { color: #23cc00; }
.mw-plusminus-neg { color: #ff5e00; }
.mw-plusminus-null { color: #cccccc; }