/* ========================================================= テーマ共通レイヤー（ライト / ダーク） - で切替 - 各ページのインライン :root より高い詳細度でトークンを上書きするため 既存ページの CSS をほぼ書き換えずにテーマ対応できる ========================================================= */ /* ---- ダーク（既定）: 背景とカードのコントラストを強化 ---- */ :root[data-theme="dark"]{ color-scheme:dark; --bg:#080a10; --bg2:#0c0f17; --panel:#171d2c; --panel2:#1e2638; --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.22); --paper:#f3f1ea; --muted:#9aa3b6; --muted2:#6c7589; --red:#e8123b; --red-soft:rgba(232,18,59,.12); --red-line:rgba(232,18,59,.5); --gold:#cbae72; --grain:.05; --glow-1:rgba(232,18,59,.13); --glow-2:rgba(46,78,150,.18); } /* ---- ライト ---- */ :root[data-theme="light"]{ color-scheme:light; --bg:#e9edf4; --bg2:#f3f6fb; --panel:#ffffff; --panel2:#ffffff; --line:rgba(16,22,38,.12); --line2:rgba(16,22,38,.2); --paper:#141a24; --muted:#5a6172; --muted2:#8a93a6; --red:#d50f33; --red-soft:rgba(213,15,51,.08); --red-line:rgba(213,15,51,.4); --gold:#9a7a2b; --grain:.02; --glow-1:rgba(213,15,51,.06); --glow-2:rgba(46,78,150,.07); } /* グレイン濃度をテーマ追従に（各ページの body::after を上書き）*/ :root[data-theme] body::after{ opacity:var(--grain); } /* ========================================================= ライト時：ダーク前提でハードコードされた色を読みやすく上書き ========================================================= */ /* 強い白系テキスト → 濃色 */ :root[data-theme="light"] .player-name, :root[data-theme="light"] .card-name, :root[data-theme="light"] .tips dt, :root[data-theme="light"] .notice b{ color:#101620; } /* 本文グレー（#d8dce5 / #cfd3dc / #d9dde6 等）→ 読みやすい濃グレー */ :root[data-theme="light"] td, :root[data-theme="light"] .club, :root[data-theme="light"] .card-club, :root[data-theme="light"] .chip, :root[data-theme="light"] .matches li, :root[data-theme="light"] .notice, :root[data-theme="light"] .profile-text, :root[data-theme="light"] .svc-text, :root[data-theme="light"] .tips dd{ color:#3a4250; } /* 表ヘッダの暗背景 → 明背景 */ :root[data-theme="light"] th{ background:#eaedf3; } /* ハイライトチップ（薄ピンク）→ 濃赤 */ :root[data-theme="light"] .svc-key span.hot{ color:#a60d29; } /* 節番号のグラデ文字（白→灰）→ 濃いグレーグラデ */ :root[data-theme="light"] .round-no{ background:linear-gradient(180deg,#1b2230,#6b7488); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } /* 装飾ウォーターマーク（白の極薄）→ 濃色の極薄 */ :root[data-theme="light"] .watermark, :root[data-theme="light"] .op-card::after, :root[data-theme="light"] .profile-card::after, :root[data-theme="light"] .svc::after{ color:rgba(18,24,40,.055) !important; } /* ========================================================= テーマ切替ボタン（theme.js が body 末尾に挿入） ========================================================= */ .theme-toggle{ position:fixed; right:18px; bottom:18px; z-index:60; width:46px; height:46px; border-radius:999px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line2); background:var(--panel2); color:var(--paper); cursor:pointer; box-shadow:0 12px 30px -12px rgba(0,0,0,.6); transition:transform .18s ease, border-color .18s ease, background .18s ease; } .theme-toggle:hover{ transform:translateY(-2px); border-color:var(--gold); } .theme-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; } .theme-toggle svg{ width:21px; height:21px; display:block; } .theme-toggle .i-sun, .theme-toggle .i-moon{ display:none; } :root[data-theme="dark"] .theme-toggle .i-sun{ display:block; } :root[data-theme="light"] .theme-toggle .i-moon{ display:block; } @media (prefers-reduced-motion:reduce){ .theme-toggle{ transition:none; } }