「MediaWiki:Common.css」の版間の差分

📢 Webサイト閉鎖と移転のお知らせ

このWebサイトは2026年9月に閉鎖いたします。

移転先はhttps://mochiu.net/index.php?title=MediaWiki:Common.cssです。

新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

← 古い編集新しい編集 →

@@ 1行目: / 1行目: @@
 /* MediaWiki:Common.css */
-/* ライトモード/ダークモード対応版（CSS変数なし） */
+/* ライトモード/ダークモード対応版 */
 /* ここに記述したCSSはすべての外装に反映されます */
+/* ===================================
+   CSS変数の定義
+   =================================== */
+:root {
+	/* プリプロセッサ用変数（ライトモード） */
+	-preprocessor-color: #e83e8c;
+	-preprocessor-bg: rgba(232, 62, 140, 0.08);
+	-preprocessor-border: rgba(232, 62, 140, 0.3);
+}
 /* ===================================
@@ 138行目: / 149行目: @@
 }
-/* SyntaxHighlight - ライトモード時のキーワード色（オプション） */
+/* ===================================
+   SyntaxHighlight - ライトモード
+   =================================== */
+/* SyntaxHighlight - ライトモード時のキーワード色 */
 .mw-highlight .k,     /* Keyword */
 .mw-highlight .kd,    /* Keyword.Declaration */
@@ 145行目: / 160行目: @@
 .mw-highlight .kp,    /* Keyword.Pseudo */
 .mw-highlight .kr {   /* Keyword.Reserved */
-	/* ライトモード時はデフォルトの色を使用（通常は濃い青でOK） */
+	/* ライトモード時はデフォルトの色を使用（通常は濃い青） */
-	/* 必要に応じてここで調整可能 */
+}
+/* プリプロセッサディレクティブ (#include, #define等) - ライトモード */
+.mw-highlight .cp {   /* Comment.Preproc */
+	color: var(--preprocessor-color) !important;
+	background-color: var(--preprocessor-bg) !important;
+	font-weight: 600 !important;
+	font-style: normal !important;
+	padding: 1px 4px !important;
+	border-radius: 3px !important;
+	border-left: 2px solid var(--preprocessor-border) !important;
+	display: inline-block !important;
+	margin: 0 1px !important;
+}
+/* プリプロセッサにアイコンを追加 */
+.mw-highlight .cp::before {
+	content: "◆ ";
+	color: var(--preprocessor-color);
+	font-size: 0.8em;
+	margin-right: 2px;
+}
+/* プリプロセッサが複数行にわたる場合 */
+.mw-highlight .cp + .cp {
+	margin-top: 2px !important;
+}
+/* プリプロセッサのホバー効果 - ライトモード */
+.mw-highlight .cp:hover {
+	background-color: rgba(232, 62, 140, 0.15) !important;
+	box-shadow: 0 0 5px rgba(232, 62, 140, 0.3) !important;
+	transition: all 0.2s ease !important;
 }
@@ 547行目: / 594行目: @@
 @media (prefers-color-scheme: dark) {
+	/* プリプロセッサ用変数（ダークモード） */
+	:root {
+		--preprocessor-color: #ff6ec7;
+		--preprocessor-bg: rgba(255, 110, 199, 0.12);
+		--preprocessor-border: rgba(255, 110, 199, 0.3);
+	}
+	/* ===================================
+	   SyntaxHighlight - ダークモード
+	   =================================== */
 	/* SyntaxHighlight - キーワードの色を明るく */
 	.mw-highlight .k,     /* Keyword */
@@ 578行目: / 636行目: @@
 	.mw-highlight .c,     /* Comment */
 	.mw-highlight .cm,    /* Comment.Multiline */
-	.mw-highlight .cp,    /* Comment.Preproc */
 	.mw-highlight .c1,    /* Comment.Single */
 	.mw-highlight .cs {   /* Comment.Special */
 		color: #9ca3af !important;  /* 明るいグレー */
 		font-style: italic;
+	}
+	/* プリプロセッサディレクティブ - ダークモード */
+	.mw-highlight .cp {   /* Comment.Preproc */
+		color: var(--preprocessor-color) !important;
+		background-color: var(--preprocessor-bg) !important;
+		font-weight: 600 !important;
+		font-style: normal !important;
+		padding: 1px 4px !important;
+		border-radius: 3px !important;
+		border-left: 2px solid var(--preprocessor-border) !important;
+		display: inline-block !important;
+		margin: 0 1px !important;
+	}
+	/* プリプロセッサのホバー効果 - ダークモード */
+	.mw-highlight .cp:hover {
+		background-color: rgba(255, 110, 199, 0.2) !important;
+		box-shadow: 0 0 5px rgba(255, 110, 199, 0.4) !important;
+		transition: all 0.2s ease !important;
 	}
@@ 592行目: / 669行目: @@
 	.mw-highlight .sc,    /* String.Char */
 	.mw-highlight .sd {   /* String.Doc */
-		color: #a5d6a7 !important;  /* 明るい緑（既に見やすいが念のため） */
+		color: #a5d6a7 !important;  /* 明るい緑 */
 	}