|
|
| (同じ利用者による、間の51版が非表示) |
| 1行目: |
1行目: |
| /* MediaWiki:Common.css */
| |
| /* ライトモード/ダークモード対応版（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;
| |
| }
| |
|
| |
| 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;
| |
| }
| |
|
| |
| /* 目次全体にグラスモーフィズム効果を追加 */
| |
| .toc::before {
| |
| content: '';
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| border-radius: 16px;
| |
| backdrop-filter: blur(8px);
| |
| z-index: -1;
| |
| }
| |
|
| |
| /* ===================================
| |
| 数式のスタイル（ライトモード）
| |
| =================================== */
| |
|
| |
| .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) {
| |
| /* 見出し */
| |
| .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);
| |
| }
| |
| }
| |
