MediaWiki:Common.css

提供: MochiuWiki : SUSE, EC, PCB

2025年11月10日 (月) 07:54時点におけるWiki (トーク | 投稿記録)による版

注意: 保存後、変更を確認するにはブラウザーのキャッシュを消去する必要がある場合があります。

  • Firefox / Safari: Shift を押しながら 再読み込み をクリックするか、Ctrl-F5 または Ctrl-R を押してください (Mac では ⌘-R)
  • Google Chrome: Ctrl-Shift-R を押してください (Mac では ⌘-Shift-R)
  • Microsoft Edge: Ctrl を押しながら 最新の情報に更新 をクリックするか、Ctrl-F5 を押してください。
/* MediaWiki:Common.css */
/* ライトモード/ダークモード対応版 */

/* ここに記述したCSSはすべての外装に反映されます */

/* ===================================
   基本スタイル（共通）
   =================================== */

.mw-editfont-monospace {
	font-size: 15px !important;
	font-family: monospace !important;
}

/* 画面の縦サイズがFHD以下の場合 */
@media screen and (max-height: 880px) {
	.mw-body-content {
		line-height: 1.3;
	}

	.mw-content-ltr {
		font-size: 13px !important;
	}
}

/* 画面の縦サイズがFHDを超える場合 */
@media screen and (min-height: 881px) and (max-height: 1240px) {
	.mw-body-content {
		line-height: 1.2;
	}

	.mw-content-ltr {
		font-size: 15px !important;
	}
}

/* 画面の縦サイズがWQHDを超える場合 */
@media screen and (min-height: 1241px) {
	.mw-body-content {
		line-height: 1.5;
	}

	.mw-content-ltr {
		font-size: 16px;
	}
}

/* ConfirmEdit QuestyCaptcha -- on Create Account */
.htmlform-tip + .mw-htmlform-field-HTMLInfoField {
	color: red;
}

/* ConfirmEdit QuestyCaptcha -- on Edit page + add a URL */
label[for=wpCaptchaWord] {
	color: green;
	font-weight: bold;
	font-size: 150%;
	font-style: italic;
}

.mw-body-content {
	font-family: "Droid Sans" !important;
}

/* ===================================
   見出しのスタイル（ライトモード）
   =================================== */

/* タイトルページ */
.firstHeading {
	font-family: "Segoe UI", -apple-system, system-ui, sans-serif !important;
	text-align: center;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-left: 4px solid #4299e1;
	border-right: 4px solid #4299e1;
	border-radius: 12px;
	padding: 16px 24px;
	margin: 16px auto;
	width: fit-content;
	min-width: 75%;
	max-width: 90%;
	background: linear-gradient(135deg, #f8faff 0%, #f0f5ff 25%, #e8f0ff 75%, #e0ebff 100%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	color: #1a365d;
	transition: all 0.3s ease;
}

.firstHeading:hover {
	border-left-color: #3182ce;
	border-right-color: #3182ce;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}

h4 {
	font-size: 18px !important;
	position: relative;
	display: inline-block;
}

h4::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: rgba(30, 30, 30, 0.5);
}

h5 .mw-headline {
	font-size: 16px !important;
	border: solid 1px rgba(30, 30, 30, 0.7);
	border-radius: 5px;
	padding: 1px 3px;
	margin: 5px;
}

/* ===================================
   コードとプリフォーマットテキスト（ライトモード）
   =================================== */

/* 通常のpreタグの設定 */
pre {
	color: #202020;
	background: linear-gradient(to bottom right, rgb(250, 250, 250), white);
	border: solid 2px rgb(150, 150, 250);
	border-radius: 5px;
	font-family: "DejaVu Sans Mono" !important;
}

/* mw-highlightクラス内のpreタグの設定 */
.mw-highlight > pre {
	color: #202020;
	background: linear-gradient(to bottom right, rgb(250, 250, 250), white);
	border: solid 3px rgb(100, 150, 100);
	border-radius: 5px;
}

/* ===================================
   SyntaxHighlight - ライトモード
   =================================== */

/* SyntaxHighlight - ライトモード時のキーワード色 */
.mw-highlight .k,     /* Keyword */
.mw-highlight .kd,    /* Keyword.Declaration */
.mw-highlight .kt,    /* Keyword.Type */
.mw-highlight .kn,    /* Keyword.Namespace */
.mw-highlight .kp,    /* Keyword.Pseudo */
.mw-highlight .kr {   /* Keyword.Reserved */
	/* ライトモード時はデフォルトの色を使用（通常は濃い青） */
}

/* プリプロセッサディレクティブ (#include, #define等) - ライトモード */
.mw-highlight .cp {   /* Comment.Preproc */
	color: #d63384 !important;  /* 鮮やかなピンク - 視認性が良い */
	font-weight: 600 !important;
	font-style: normal !important;
}

code {
	color: #ffffff;
	font-weight: bold;
	font-family: "DejaVu Sans Mono" !important;
	background-color: rgba(41, 92, 194, 1.0);
	border: solid 1px rgba(255, 255, 255, 0.3);
	border-radius: 5px;
	padding: 1px 5px;
}

/* codeタグ内のMediaWiki外のリンク */
code a.external {
	font-weight: bold;
	color: #ffa500 !important;
}

/* ===================================
   テーブルのスタイル（ライトモード）
   =================================== */

/* 表のキャプション */
.wikitable > caption {
	background: linear-gradient(180deg, #2B579A 0%, #2B579A 20%, #366DC2 60%, #366DC2 100%);
	color: white;
	padding: 8px;
	font-weight: bold;
	text-align: center;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border: 1px solid #2B579A;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

table {
	border-collapse: collapse;
	border: solid 2px #303030;
	background-color: #fefefe !important;
	text-align: center;
}

.wikitable th {
	color: rgb(250, 250, 250) !important;
	font-weight: bold;
	text-align: center !important;
	border: solid 1px rgb(50, 50, 50);
	background: linear-gradient(to bottom, #5c80b9 0%, #4a6ea9 100%);
}

/* ホバー時の強調表示 */
.wikitable th:hover {
	color: rgb(250, 250, 250) !important;
	background: linear-gradient(to bottom, #6890c9 0%, #5a7eb9 100%);
}

td {
	text-align: left;
	border: solid 1px rgb(50, 50, 50);
}

/* 表の縦罫線のスタイル */
tr > td:first-child {
	border-left: 1px solid #303030;
}

tr > td:last-child {
	border-right: 1px solid #303030;
}

/* 表の横罫線のスタイル */
tr:first-child > td {
	border-top: 1px solid #303030;
}

tr:last-child > td {
	border-bottom: 1px solid #303030;
}

/* 結合セルの境界線 */
.wikitable td[rowspan] {
	border: solid 1px rgb(50, 50, 50);
}

/* キャプションがない場合、テーブルの上端を丸くする */
.wikitable:not(:has(caption)) > tr:first-child th,
.wikitable:not(:has(caption)) > * > tr:first-child th {
	border-top: none !important;
}

.wikitable:not(:has(caption)) > tr:first-child th:first-child,
.wikitable:not(:has(caption)) > * > tr:first-child th:first-child {
	border-left: none !important;
	border-top-left-radius: 10px;
}

.wikitable:not(:has(caption)) > tr:first-child th:last-child,
.wikitable:not(:has(caption)) > * > tr:first-child th:last-child {
	border-right: none !important;
	border-top-right-radius: 10px;
}

/* キャプションがある場合、キャプションの上端を丸くする */
.wikitable:has(caption) caption {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

/* ===================================
   リンクのスタイル
   =================================== */

/* MediaWiki内のリンク */
a.interwiki {
	font-weight: bold;
}

/* MediaWiki外のリンク */
.mw-parser-output a.external {
	font-weight: bold;
}

/* MediaWiki外のリンク */
a.external {
	font-weight: bold;
}

/* テーブル内のMediaWiki外のリンク */
table.wikitable td a {
	font-weight: bold;
}

.mw-parser-output a.new:visited {
	font-weight: bold;
}

/* ===================================
   カテゴリのスタイル（ライトモード）
   =================================== */

.catlinks a {
	font-size: 14px;
	font-weight: bold;
}

.catlinks ul {
	font-size: 14px;
	font-weight: bold;
}

/* カテゴリの変更 */
.mw-normal-catlinks {
	border: solid 1px rgba(250, 250, 250, 0.5);
	border-radius: 5px;
	padding: 10px 10px;
}

/* ===================================
   目次（TOC）のスタイル（ライトモード）
   =================================== */

#toc,
.toc {
	border: none;
	background: linear-gradient(135deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
	padding: 1.5rem;
	margin: 1.5rem 0;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 目次のタイトル全体 */
#toc #mw-toc-heading,
.toc .toctitle h2 {
	color: #ffffff !important;
	font-weight: 700;
	font-size: 1.4rem;
	margin-bottom: 1.2rem;
	text-shadow: 2px 2px 4px rgb(0, 0, 0);
}

/* 非表示リンクのスタイル */
.toctoggle,
.toctoggle a {
	color: #ffffff !important;
	font-weight: bold;
	background-color: transparent;
	padding: 0.1rem 0.1rem 0.0rem 0.1rem;
	border-radius: 2px;
	font-size: 0.9rem;
	transition: all 0.3s ease;
	text-decoration: underline;
}

.toctoggle:hover,
.toctoggle a:hover {
	color: #ff7e00 !important;
	background-color: #ffffff;
}

/* 目次の「非表示」リンク */
.toc .toctogglelabel {
	color: #ffffff;
	background-color: transparent;
	background-blend-mode: lighten;
	padding: 0.1rem 0.1rem 0.0rem 0.1rem;
	border-radius: 2px;
	font-size: 0.9rem;
	transition: all 0.3s ease;
	text-decoration: underline;
}

.toc .toctogglelabel:hover {
	color: #ff7e00;
	background-color: #ffffff;
	background-blend-mode: lighten;
}

/* 目次の項目コンテナ */
.toc ul {
	background-color: rgb(255, 255, 255);
	padding: 0.2rem;
	margin: 0;
	border-radius: 12px;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 目次の項目 */
.toc li {
	margin: 0.1rem 0;
	padding: 0.1rem 0;
	transition: all 0.3s ease;
}

/* 目次の番号 */
.toc li > a > span.tocnumber,
.toc-number {
	color: #C850C0;
	font-weight: 600;
	margin-right: 0.7rem;
}

/* ホバー時の番号の色 */
.toc li > a:hover > span.tocnumber,
.toc a:hover .toc-number {
	color: #ffffff !important;
}

/* リンクの基本スタイル */
.toc a {
	color: #2d3748;
	text-decoration: none;
	display: block;
	padding: 0.2rem 0.6rem;
	border-radius: 8px;
	transition: all 0.3s ease;
	font-weight: 500;
}

/* ホバー時のスタイル */
.toc a:hover {
	color: #ffffff !important;
	background: linear-gradient(45deg, #4158D0, #C850C0);
	transform: translateX(6px);
	border: none;
	padding: 0.2rem 0.6rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ネストされた項目のインデント */
.toc ul ul {
	margin-left: 1.2rem;
	background-color: transparent;
	box-shadow: none;
}

/* アクティブな項目 */
.toc a:active {
	color: #ffffff;
	background: linear-gradient(45deg, #C850C0, #FFCC70);
	transform: translateX(4px) scale(0.98);
	transition: all 0.1s ease;
}

/* ===================================
   数式のスタイル（ライトモード）
   =================================== */

.mwe-math-fallback-image-inline,
.mwe-math-fallback-image-display {
	font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif !important;
}

pre .mwe-math-fallback-image-inline,
pre .mwe-math-fallback-image-display {
	font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif !important;
}

th .mwe-math-element {
	background-color: inherit;
	font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif !important;
}

td .mwe-math-element {
	font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif !important;
}

/* 数式画像（PNG形式）のスタイル */
.mwe-math-fallback-image-inline,
.mwe-math-fallback-image-display,
img.mwe-math-fallback-image-inline,
img.mwe-math-fallback-image-display {
	/* ライトモードでは通常表示（黒文字） */
	filter: none;
	background-color: transparent;
}

/* ===================================
   Extension:AmazonSearch
   =================================== */

DIV.amazonsearch {
	clear: both;
	width: 100%;
	min-height: 180px;
	margin: 0 auto;
	padding: 0.5em;
	border: 1px solid #444;
	overflow: hidden;
}

DIV.amazonsearch IMG.amazonsearchimg {
	float: left;
	margin: 0.1em 1em 0.1em 0.1em;
}

DIV.amazonsearch P.amazonsearchname {
	margin: 0;
	font-size: 90%;
	text-indent: 0;
}

DIV.amazonsearch P.amazonsearchauthor {
	margin: 0;
	font-size: 80%;
	text-indent: 0;
}

DIV.amazonsearch UL {
	margin: 0;
}

DIV.amazonsearch UL LI {
	display: inline-block;
	text-align: center;
	list-style: none;
	font-size: 90%;
	width: 12em;
	margin: 0.2em;
	padding: 0.2em 0.5em 0.2em 0.5em;
	border-radius: 0.5em;
	white-space: nowrap;
}

DIV.amazonsearch P.amazonsearchauthor::before {
	background-color: #bbb;
	border-radius: 10%;
	color: #fff;
	font-size: smaller;
	padding: 0 0.5em 0 0.5em;
	margin-right: 0.5em;
	content: "広告";
}

DIV.amazonsearch UL LI A {
	color: #fff;
}

DIV.amazonsearch UL LI.shoplinkamazon {
	background-color: #f90;
}

/* ===================================
   ダークモード用のスタイル
   =================================== */

@media (prefers-color-scheme: dark) {
	/* ===================================
	   SyntaxHighlight - ダークモード
	   =================================== */

	/* SyntaxHighlight - キーワードの色を明るく */
	.mw-highlight .k,     /* Keyword */
	.mw-highlight .kd,    /* Keyword.Declaration */
	.mw-highlight .kt,    /* Keyword.Type */
	.mw-highlight .kn,    /* Keyword.Namespace */
	.mw-highlight .kp,    /* Keyword.Pseudo */
	.mw-highlight .kr,    /* Keyword.Reserved */
	.mw-highlight .nc,    /* Name.Class */
	.mw-highlight .bp {   /* Name.Builtin.Pseudo */
		color: #6ea8fe !important;  /* 明るい青 */
	}
	
	/* SyntaxHighlight - 型名の色 */
	.mw-highlight .kt {
		color: #8bb9fe !important;  /* より明るい青 */
	}
	
	/* SyntaxHighlight - クラス名の色 */
	.mw-highlight .nc {
		color: #66d9ef !important;  /* シアン系の明るい青 */
	}
	
	/* SyntaxHighlight - 組み込み関数/名前 */
	.mw-highlight .nb,    /* Name.Builtin */
	.mw-highlight .ni {   /* Name.Entity */
		color: #8bb9ae !important;
	}
	
	/* SyntaxHighlight - コメント */
	.mw-highlight .c,     /* Comment */
	.mw-highlight .cm,    /* Comment.Multiline */
	.mw-highlight .c1,    /* Comment.Single */
	.mw-highlight .cs {   /* Comment.Special */
		color: #9ca3af !important;  /* 明るいグレー */
		font-style: italic;
	}

	/* プリプロセッサディレクティブ - ダークモード */
	.mw-highlight .cp {   /* Comment.Preproc */
		color: #ff79c6 !important;  /* 明るいピンク - 暗い背景で視認性が良い */
		font-weight: 600 !important;
		font-style: normal !important;
	}
	
	/* SyntaxHighlight - 文字列 */
	.mw-highlight .s,     /* String */
	.mw-highlight .s1,    /* String.Single */
	.mw-highlight .s2,    /* String.Double */
	.mw-highlight .sb,    /* String.Backtick */
	.mw-highlight .sc,    /* String.Char */
	.mw-highlight .sd {   /* String.Doc */
		color: #9cdc9c !important;  /* より明るい緑 - 視認性向上 */
		font-weight: 500 !important;
	}
	
	/* SyntaxHighlight - 数値 */
	.mw-highlight .m,     /* Number */
	.mw-highlight .mf,    /* Number.Float */
	.mw-highlight .mh,    /* Number.Hex */
	.mw-highlight .mi,    /* Number.Integer */
	.mw-highlight .mo {   /* Number.Oct */
		color: #ff9e64 !important;  /* 明るいオレンジ */
	}
	
	/* SyntaxHighlight - 関数名 */
	.mw-highlight .nf,    /* Name.Function */
	.mw-highlight .fm {   /* Name.Function.Magic */
		color: #7dd3fc !important;  /* 明るいシアン */
	}
	
	/* SyntaxHighlight - 変数 */
	.mw-highlight .nv,    /* Name.Variable */
	.mw-highlight .vi,    /* Name.Variable.Instance */
	.mw-highlight .vg {   /* Name.Variable.Global */
		color: #e0e0e0 !important;  /* 明るいグレー */
	}
	
	/* SyntaxHighlight - 演算子 */
	.mw-highlight .o,     /* Operator */
	.mw-highlight .ow {   /* Operator.Word */
		color: #ff79c6 !important;  /* 明るいピンク */
	}
	
	/* 見出し */
	.firstHeading {
		border-left-color: #4a7ac0;
		border-right-color: #4a7ac0;
		background: linear-gradient(135deg, #1a2a4a 0%, #203050 25%, #253555 75%, #2a3a5a 100%);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
		color: #b8d4f1;
	}

	.firstHeading:hover {
		border-left-color: #5a8ad0;
		border-right-color: #5a8ad0;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	}

	h4::after {
		background-color: rgba(200, 200, 200, 0.5);
	}

	h5 .mw-headline {
		border-color: rgba(200, 200, 200, 0.5);
	}

	/* コードとプリフォーマット */
	pre {
		color: #e0e0e0;
		background: linear-gradient(to bottom right, #2a2a2a, #1a1a1a);
		border-color: rgb(100, 100, 200);
	}

	.mw-highlight > pre {
		color: #e0e0e0;
		background: linear-gradient(to bottom right, #2a2a2a, #1a1a1a);
		border-color: rgb(80, 120, 80);
	}

	code {
		color: #e8f4f8;
		background-color: rgba(41, 92, 194, 0.8);
		border-color: rgba(100, 150, 255, 0.4);
	}

	code a.external {
		color: #ffb84d !important;
	}

	/* テーブル */
	.wikitable > caption {
		background: linear-gradient(180deg, #1B4779 0%, #1B4779 20%, #2555A2 60%, #2555A2 100%);
		color: #f0f0f0;
		border-color: #1B4779;
	}

	table {
		border-color: #505050;
		background-color: #2a2a2a !important;
	}

	.wikitable th {
		color: #f0f0f0 !important;
		border-color: #606060;
		background: linear-gradient(to bottom, #3a5080 0%, #2a4070 100%);
	}

	.wikitable th:hover {
		color: #f0f0f0 !important;
		background: linear-gradient(to bottom, #4a6090 0%, #3a5080 100%);
	}

	td {
		border-color: #606060;
	}

	tr > td:first-child {
		border-left-color: #505050;
	}

	tr > td:last-child {
		border-right-color: #505050;
	}

	tr:first-child > td {
		border-top-color: #505050;
	}

	tr:last-child > td {
		border-bottom-color: #505050;
	}

	.wikitable td[rowspan] {
		border-color: #606060;
	}

	/* カテゴリ */
	.mw-normal-catlinks {
		border-color: rgba(100, 100, 100, 0.5);
	}

	/* 目次（TOC） */
	#toc,
	.toc {
		background: linear-gradient(135deg, #2a3a80 0%, #7a3080 46%, #c08850 100%);
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	}

	#toc #mw-toc-heading,
	.toc .toctitle h2 {
		color: #f0f0f0 !important;
	}

	.toctoggle,
	.toctoggle a {
		color: #f0f0f0 !important;
	}

	.toctoggle:hover,
	.toctoggle a:hover {
		color: #ffb84d !important;
		background-color: #3a3a3a;
	}

	.toc .toctogglelabel {
		color: #f0f0f0;
	}

	.toc .toctogglelabel:hover {
		color: #ffb84d;
		background-color: #3a3a3a;
	}

	.toc ul {
		background-color: #2a2a2a;
	}

	.toc li > a > span.tocnumber,
	.toc-number {
		color: #b080b0;
	}

	.toc li > a:hover > span.tocnumber,
	.toc a:hover .toc-number {
		color: #f0f0f0 !important;
	}

	.toc a {
		color: #d0d0d0;
	}

	.toc a:hover {
		color: #f0f0f0 !important;
		background: linear-gradient(45deg, #2a3a80, #7a3080);
	}

	.toc a:active {
		color: #f0f0f0;
		background: linear-gradient(45deg, #7a3080, #c08850);
	}

	/* 数式 */
	.mwe-math-fallback-image-inline,
	.mwe-math-fallback-image-display {
		background-color: rgba(255, 255, 255, 0.1);
	}
	
	/* 数式画像（PNG形式）を反転 - ダークモードで読みやすくする */
	.mwe-math-fallback-image-inline,
	.mwe-math-fallback-image-display,
	img.mwe-math-fallback-image-inline,
	img.mwe-math-fallback-image-display {
		filter: invert(1) hue-rotate(180deg);
		background-color: transparent;
	}
	
	/* テーブル内の数式も反転 */
	table .mwe-math-fallback-image-inline,
	table .mwe-math-fallback-image-display,
	table img.mwe-math-fallback-image-inline,
	table img.mwe-math-fallback-image-display {
		filter: invert(1) hue-rotate(180deg);
	}
}
「https://mochiu.net/index.php?title=MediaWiki:Common.css&oldid=13433」から取得