/* ============================================ Dark Mode スタイル フック: 対象: body.page-top / body.page-lottery / body.page-coin-conversion ============================================ */ /* ---------- 1. footer-navigation 背景（全ページ共通） ---------- */ html.dark-mode-on .footer-navigation { background: #15172e !important; border-top-color: #2a2d4a !important; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.6); } html.dark-mode-on .footer-navigation::after { background: #15172e !important; } html.dark-mode-on .footer-navigation .footer-nav-label, html.dark-mode-on .footer-navigation .footer-nav-item { color: #d8d9e0; } html.dark-mode-on .footer-navigation .footer-nav-item.active .footer-nav-label { color: #fff; } /* ---------- 2-3-5. 対象ページでは 自体もダーク化 ---------- */ /* project.css の `body { max-width: 768px; margin: 0 auto; }` により body は中央 768px に制限されるため、body 背景だけでは左右の余白（html 領域）が明るいまま残る。 :has() で body のページクラスを参照して html 全体をダーク化する */ html.dark-mode-on:has(body.page-top), html.dark-mode-on:has(body.page-lottery), html.dark-mode-on:has(body.page-coin-conversion) { background: #0e1024 !important; } /* ---------- 2. トップページ (/) 背景 ---------- */ html.dark-mode-on body.page-top, html.dark-mode-on body.page-top #wrapper { background: #0e1024 !important; background-image: none !important; } /* ---------- 3. ガチャ詳細ページ (/lottery/{id}) 背景 ---------- */ html.dark-mode-on body.page-lottery, html.dark-mode-on body.page-lottery #wrapper, html.dark-mode-on body.page-lottery .gacha-detail-wrap { background: #0e1024 !important; background-image: none !important; } /* ---------- 4. gacha-fixed-footer 背景（/lottery/{id} 内） ---------- */ html.dark-mode-on .gacha-fixed-footer { background: #15172e !important; border-top: 1px solid #2a2d4a; color: #e6e8f5; } /* ---------- 5. コイン変換完了ページ (/lottery-coin-conversion-complete/) 背景 ---------- */ html.dark-mode-on body.page-coin-conversion, html.dark-mode-on body.page-coin-conversion #wrapper, html.dark-mode-on body.page-coin-conversion .coin-conversion-page { background: #0e1024 !important; background-image: none !important; } /* ============================================ 争奪戦 (play_type='battle') カードに虹色ボーダー 既存の .rainbow-border-wrapper と同じ conic-gradient + アニメ仕様を踏襲 :has() で battle 札を含む .gacha-card-wrapper の外周に適用するため、 .gacha-card 本体のスタイル（background:#fff, border-radius:15px 等）を 上書きせずに済み !important は不要 ============================================ */ @property --dm-rainbow-angle { syntax: ''; initial-value: 0deg; inherits: false; } /* JS が markActiveBattleNodes() で「現在の開催中 battle と一致する要素」だけに .is-active-dark-battle を付与するため、虹色は本当の対象ガチャだけに当たる */ html.dark-mode-on .gacha-card-wrapper.is-active-dark-battle:has(> .gacha-card[data-play-type="battle"]), html.dark-mode-on .gacha-thumbnail.is-active-dark-battle[data-play-type="battle"] { padding: 4px; border-radius: 18px; background: conic-gradient( from var(--dm-rainbow-angle), #ffc8c8, #ffe6b0, #fffaaa, #b8f0b8, #b0d8ff, #d4b0ff, #ffb8e0, #ffc8c8 ); animation: dm-rainbow-rotate 3s linear infinite; } html.dark-mode-on .gacha-thumbnail.is-active-dark-battle[data-play-type="battle"] > img { border-radius: 14px; } /* カレンダー: .weekly-event-inline-card は padding:8px + background:#fff で白枠を作っているため、 その背景を conic-gradient に置き換えるだけで自然に虹色ボーダーになる */ html.dark-mode-on .swiper-slide.is-active-dark-battle[data-play-type="battle"] .weekly-event-inline-card { background: conic-gradient( from var(--dm-rainbow-angle), #ffc8c8, #ffe6b0, #fffaaa, #b8f0b8, #b0d8ff, #d4b0ff, #ffb8e0, #ffc8c8 ); animation: dm-rainbow-rotate 3s linear infinite; } @keyframes dm-rainbow-rotate { to { --dm-rainbow-angle: 360deg; } } /* ============================================ ダーク背景上で可読性確保のため文字色を白系に変更 - coin-number / stock-gauge-container: ガチャページ (/lottery/{id}) のみ ============================================ */ html.dark-mode-on body.page-lottery .coin-number, html.dark-mode-on body.page-lottery .stock-gauge-container, html.dark-mode-on body.page-lottery .stock-gauge-container * { color: #fff !important; } /* コイン変換完了ページの .section-title を白文字に */ html.dark-mode-on body.page-coin-conversion .section-title { color: #fff !important; } /* ============================================ gacha-catchphrase（/lottery/{id} 内のキャッチコピー） ダーク背景上で読みづらいため角丸白背景に固定 ============================================ */ html.dark-mode-on .gacha-catchphrase { background-color: #fff !important; background-image: none !important; color: #333 !important; border-radius: 12px; padding: 12px 16px; } /* ============================================ ポップアップ / モーダル系は白背景に固定（テキスト可読性確保） ダーク背景の上にダーク文字の白パネルが乗らなくなる事象への恒久対策 ============================================ */ html.dark-mode-on .message-popup-content, html.dark-mode-on .login-popup-modal, html.dark-mode-on .login-popup-body, html.dark-mode-on .coupon-notification-modal-content, html.dark-mode-on .new-arrivals-modal-content, html.dark-mode-on .item-detail-modal-sheet, html.dark-mode-on .popup-content, html.dark-mode-on .popup-body, html.dark-mode-on .feature-announcement-bubble, html.dark-mode-on .push-notification { background-color: #fff !important; background-image: none !important; color: #333 !important; } /* ガチャ確認モーダル系 (.modal-content) は body.page-lottery 限定でダーク化 + 虹枠。 ダブル背景 (padding-box=ダーク / border-box=conic) で transparent border を縁取り。 overflow:hidden があっても境界は box の内側に収まるので壊れない */ html.dark-mode-on body.page-lottery .modal-content { border: 4px solid transparent; background: linear-gradient(#15172e, #15172e) padding-box, conic-gradient( from var(--dm-rainbow-angle), #ffc8c8, #ffe6b0, #fffaaa, #b8f0b8, #b0d8ff, #d4b0ff, #ffb8e0, #ffc8c8 ) border-box; animation: dm-rainbow-rotate 3s linear infinite; color: #e6e8f5; } html.dark-mode-on body.page-lottery .modal-content .modal-catchcopy-text, html.dark-mode-on body.page-lottery .modal-content .coin-current, html.dark-mode-on body.page-lottery .modal-content .coin-after, html.dark-mode-on body.page-lottery .modal-content .coin-arrow { color: #e6e8f5; } html.dark-mode-on body.page-lottery .modal-content .modal-coins-section, html.dark-mode-on body.page-lottery .modal-content .modal-coins-display { background-color: #1a1d36; }