MochiuWiki : SUSE, EC, PCB

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

← 古い編集新しい編集 →
編集の要約なし
編集の要約なし
1行目: 1行目:
/* MediaWiki:Common.css */
/* MediaWiki:Common.css */
/* ライトモード/ダークモード対応版（手動切り替え対応） */
/* Fluentライトモード/ダークモード対応版 */


/* ここに記述したCSSはすべての外装に反映されます */
/* ここに記述したCSSはすべての外装に反映されます */
541行目: 541行目:
/* ===================================
/* ===================================
   ダークモード用のスタイル
   ダークモード用のスタイル
  システム設定でダークモードの場合（ユーザーが手動設定していない場合）
   =================================== */
   =================================== */


@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
body:not(.theme-light):not(.theme-dark),
body.theme-auto {
/* ===================================
  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);
}
}
}
/* ===================================
  手動でダークモードを選択した場合
  =================================== */
body.theme-dark {
/* ===================================
/* ===================================
  SyntaxHighlight - ダークモード
  SyntaxHighlight - ダークモード
911行目: 633行目:
/* 見出し */
/* 見出し */
.firstHeading {
.firstHeading {
border-left-color: #4a7ac0 !important;
border-left-color: #4a7ac0;
border-right-color: #4a7ac0 !important;
border-right-color: #4a7ac0;
background: linear-gradient(135deg, #1a2a4a 0%, #203050 25%, #253555 75%, #2a3a5a 100%) !important;
background: linear-gradient(135deg, #1a2a4a 0%, #203050 25%, #253555 75%, #2a3a5a 100%);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
color: #b8d4f1 !important;
color: #b8d4f1;
}
}


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


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


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


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


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


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


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


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


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


td {
td {
border-color: #606060 !important;
border-color: #606060;
}
}


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


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


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


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


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


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


1,010行目: 732行目:
#toc,
#toc,
.toc {
.toc {
background: linear-gradient(135deg, #2a3a80 0%, #7a3080 46%, #c08850 100%) !important;
background: linear-gradient(135deg, #2a3a80 0%, #7a3080 46%, #c08850 100%);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
}


1,027行目: 749行目:
.toctoggle a:hover {
.toctoggle a:hover {
color: #ffb84d !important;
color: #ffb84d !important;
background-color: #3a3a3a !important;
background-color: #3a3a3a;
}
}


.toc .toctogglelabel {
.toc .toctogglelabel {
color: #f0f0f0 !important;
color: #f0f0f0;
}
}


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


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


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


1,054行目: 776行目:


.toc a {
.toc a {
color: #d0d0d0 !important;
color: #d0d0d0;
}
}


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


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


1,070行目: 792行目:
.mwe-math-fallback-image-inline,
.mwe-math-fallback-image-inline,
.mwe-math-fallback-image-display {
.mwe-math-fallback-image-display {
background-color: rgba(255, 255, 255, 0.1) !important;
background-color: rgba(255, 255, 255, 0.1);
}
}


1,078行目: 800行目:
img.mwe-math-fallback-image-inline,
img.mwe-math-fallback-image-inline,
img.mwe-math-fallback-image-display {
img.mwe-math-fallback-image-display {
filter: invert(1) hue-rotate(180deg) !important;
filter: invert(1) hue-rotate(180deg);
background-color: transparent !important;
background-color: transparent;
}
}


1,087行目: 809行目:
table img.mwe-math-fallback-image-inline,
table img.mwe-math-fallback-image-inline,
table img.mwe-math-fallback-image-display {
table img.mwe-math-fallback-image-display {
filter: invert(1) hue-rotate(180deg) !important;
filter: invert(1) hue-rotate(180deg);
}
}
 
/* ===================================
  手動でライトモードを選択した場合
  ライトモードのスタイルを明示的に強制
  =================================== */
 
body.theme-light {
/* 見出し - ライトモードを強制 */
.firstHeading {
border-left-color: #4299e1 !important;
border-right-color: #4299e1 !important;
background: linear-gradient(135deg, #f8faff 0%, #f0f5ff 25%, #e8f0ff 75%, #e0ebff 100%) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
color: #1a365d !important;
}
 
.firstHeading:hover {
border-left-color: #3182ce !important;
border-right-color: #3182ce !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
 
h4::after {
background-color: rgba(30, 30, 30, 0.5) !important;
}
 
h5 .mw-headline {
border-color: rgba(30, 30, 30, 0.7) !important;
}
 
/* コードとプリフォーマット - ライトモード */
pre {
color: #202020 !important;
background: linear-gradient(to bottom right, rgb(250, 250, 250), white) !important;
border-color: rgb(150, 150, 250) !important;
}
 
.mw-highlight > pre {
color: #202020 !important;
background: linear-gradient(to bottom right, rgb(250, 250, 250), white) !important;
border-color: rgb(100, 150, 100) !important;
}
 
code {
color: #ffffff !important;
background-color: rgba(41, 92, 194, 1.0) !important;
border-color: rgba(255, 255, 255, 0.3) !important;
}
 
code a.external {
color: #ffa500 !important;
}
 
/* テーブル - ライトモード */
.wikitable > caption {
background: linear-gradient(180deg, #2B579A 0%, #2B579A 20%, #366DC2 60%, #366DC2 100%) !important;
color: white !important;
border-color: #2B579A !important;
}
 
table {
border-color: #303030 !important;
background-color: #fefefe !important;
}
 
.wikitable th {
color: rgb(250, 250, 250) !important;
border-color: rgb(50, 50, 50) !important;
background: linear-gradient(to bottom, #5c80b9 0%, #4a6ea9 100%) !important;
}
 
.wikitable th:hover {
color: rgb(250, 250, 250) !important;
background: linear-gradient(to bottom, #6890c9 0%, #5a7eb9 100%) !important;
}
 
td {
border-color: rgb(50, 50, 50) !important;
}
 
tr > td:first-child {
border-left-color: #303030 !important;
}
 
tr > td:last-child {
border-right-color: #303030 !important;
}
 
tr:first-child > td {
border-top-color: #303030 !important;
}
 
tr:last-child > td {
border-bottom-color: #303030 !important;
}
 
.wikitable td[rowspan] {
border-color: rgb(50, 50, 50) !important;
}
 
/* カテゴリ - ライトモード */
.mw-normal-catlinks {
border-color: rgba(250, 250, 250, 0.5) !important;
}
 
/* 目次（TOC） - ライトモード */
#toc,
.toc {
background: linear-gradient(135deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}
 
#toc #mw-toc-heading,
.toc .toctitle h2 {
color: #ffffff !important;
}
 
.toctoggle,
.toctoggle a {
color: #ffffff !important;
}
 
.toctoggle:hover,
.toctoggle a:hover {
color: #ff7e00 !important;
background-color: #ffffff !important;
}
 
.toc .toctogglelabel {
color: #ffffff !important;
}
 
.toc .toctogglelabel:hover {
color: #ff7e00 !important;
background-color: #ffffff !important;
}
 
.toc ul {
background-color: rgb(255, 255, 255) !important;
}
 
.toc li > a > span.tocnumber,
.toc-number {
color: #C850C0 !important;
}
 
.toc li > a:hover > span.tocnumber,
.toc a:hover .toc-number {
color: #ffffff !important;
}
 
.toc a {
color: #2d3748 !important;
}
 
.toc a:hover {
color: #ffffff !important;
background: linear-gradient(45deg, #4158D0, #C850C0) !important;
}
 
.toc a:active {
color: #ffffff !important;
background: linear-gradient(45deg, #C850C0, #FFCC70) !important;
}
 
/* 数式 - ライトモード */
.mwe-math-fallback-image-inline,
.mwe-math-fallback-image-display,
img.mwe-math-fallback-image-inline,
img.mwe-math-fallback-image-display {
filter: none !important;
background-color: transparent !important;
}
 
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: none !important;
}
}
}
}
「https://mochiu.net/index.php/MediaWiki:Common.css」から取得