/* ============================================================================ account.css — HivePress アカウント系 + WooCommerce checkout ポリッシュ Phase4/T2 統合：旧 mu-plugin を優先度順(95→98)に連結しカスケードを忠実再現。 統合元: wn-store-account-polish.php(v1) / -v2 / -v3-layoutfix / -v4-darkfix 対象ページ: /account/ 配下 ・ /wp-check/(checkout) 配下 規約: !important不使用 / body プレフィクス / ダークは html[data-theme=dark] ============================================================================ */ /* ===== v1 (旧 priority 95) [元: wn-store-account-polish.php] ===== */ /* ============================================================ 1. レイアウト基盤（hp-page） ============================================================ */ body .hp-page.site-main { padding: clamp(1rem, 3vw, 2rem) clamp(.75rem, 2vw, 1.5rem); background: rgba(0, 0, 0, .015); min-height: 60vh; } body .hp-row { gap: clamp(1rem, 2.5vw, 1.75rem); display: flex; flex-wrap: wrap; } /* ============================================================ 2. サイドバー（hp-page__sidebar） モバイルでは下部に独立カード、デスクトップは sticky ============================================================ */ body .hp-page__sidebar { position: sticky; top: 80px; align-self: flex-start; padding: 1.1rem 1.15rem; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, .05); border: 1px solid rgba(0, 0, 0, .06); } @media (max-width: 800px) { body .hp-page__sidebar { position: static; margin: 0 0 1.25rem; padding: .9rem 1rem; } } /* アカウントナビ（hp-menu--user-account） */ body .hp-menu--user-account ul, body .hp-menu--user-account ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; } body .hp-menu--user-account .menu-item { margin: 0; } body .hp-menu--user-account .menu-item a { display: flex; align-items: center; gap: .5rem; padding: .7rem .85rem; border-radius: 8px; text-decoration: none; color: #2a2f3a; font-size: .92rem; font-weight: 600; min-height: 44px; transition: background .15s ease, color .15s ease; } body .hp-menu--user-account .menu-item a:hover { background: rgba(242, 107, 34, .08); color: var(--c-accent, #F26B22); } body .hp-menu--user-account .menu-item--current > a, body .hp-menu--user-account .menu-item.current-menu-item > a, body .hp-menu--user-account .menu-item--current-menu-item > a { background: linear-gradient(135deg, rgba(242, 107, 34, .14) 0%, rgba(242, 107, 34, .06) 100%); color: var(--c-accent, #F26B22); font-weight: 800; border-left: 3px solid var(--c-accent, #F26B22); padding-left: calc(.85rem - 3px); } body .hp-menu--user-account .menu-item a::before { content: ""; display: inline-block; width: 18px; height: 18px; background: currentColor; mask: center / contain no-repeat; -webkit-mask: center / contain no-repeat; flex-shrink: 0; opacity: .7; } /* アカウントメニュー各項目のアイコン（::before の currentColor 矩形を SVG mask で打ち抜く）。 ── セレクタは .hp-menu--user-account .hp-menu__item--{slug}（ベース矩形ルールと同特異度・後勝ち）。 ベースの `mask: center / contain no-repeat` が mask-image を none に初期化するため、 ここで mask-image を後置（同特異度・ソース順で勝ち）して実アイコンを供給する。 色は currentColor 継承（hover/current/dark のアクセント追随）。!important 不使用。 */ body .hp-menu--user-account .hp-menu__item--vendor-dashboard a::before { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } body .hp-menu--user-account .hp-menu__item--listings-edit a::before { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } body .hp-menu--user-account .hp-menu__item--user-listing-packages-view a::before { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } body .hp-menu--user-account .hp-menu__item--listings-favorite a::before { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } body .hp-menu--user-account .hp-menu__item--vendor-calendar a::before { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } body .hp-menu--user-account .hp-menu__item--bookings-view a::before { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } body .hp-menu--user-account .hp-menu__item--messages-thread a::before { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } body .hp-menu--user-account .hp-menu__item--orders-edit a::before { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } body .hp-menu--user-account .hp-menu__item--orders-view a::before { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } body .hp-menu--user-account .hp-menu__item--payouts-view a::before { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } body .hp-menu--user-account .hp-menu__item--requests-edit a::before { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } body .hp-menu--user-account .hp-menu__item--offers-view a::before { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } body .hp-menu--user-account .hp-menu__item--user-edit-settings a::before { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } body .hp-menu--user-account .hp-menu__item--user-logout a::before { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } /* subscriptions_view — WooCommerce Subscriptions（未導入だが防衛的に追加）*/ body .hp-menu--user-account .hp-menu__item--subscriptions-view a::before { mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); } /* ============================================================ 3. メインカラム（hp-page__content） ============================================================ */ body .hp-page__content { padding: 1.5rem 1.5rem; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, .05); border: 1px solid rgba(0, 0, 0, .06); min-width: 0; } @media (max-width: 800px) { body .hp-page__content { padding: 1.1rem 1rem; } } /* ============================================================ 4. データテーブル（hp-table） モバイル: 横スクロール + 影インジケータ ============================================================ */ body .hp-page__content .hp-table, body .hp-page__content table.hp-table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: .9rem; } body .hp-page__content .hp-table th, body .hp-page__content .hp-table td { padding: .7rem .8rem; border-bottom: 1px solid rgba(0, 0, 0, .06); text-align: left; vertical-align: middle; } body .hp-page__content .hp-table thead th { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #888; background: rgba(0, 0, 0, .02); border-bottom: 2px solid rgba(0, 0, 0, .08); } body .hp-page__content .hp-table tbody tr:hover { background: rgba(242, 107, 34, .04); } /* モバイル: 横スクロール対応 */ @media (max-width: 700px) { body .hp-page__content .hp-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; box-shadow: inset -8px 0 8px -6px rgba(0, 0, 0, .15), inset 8px 0 8px -6px rgba(0, 0, 0, .08); } body .hp-page__content .hp-table th, body .hp-page__content .hp-table td { padding: .55rem .65rem; font-size: .82rem; } } /* ============================================================ 5. フォーム（hp-form / WP login / WooCommerce cart-checkout） ============================================================ */ body .hp-form .hp-field, body #loginform p, body .woocommerce form .form-row { margin: 0 0 1rem; } body .hp-form label, body .hp-form .hp-field__label, body #loginform label, body .woocommerce form label { display: block; margin: 0 0 .35rem; font-size: .82rem; font-weight: 700; color: #2a2f3a; } body .hp-form input[type="text"], body .hp-form input[type="email"], body .hp-form input[type="password"], body .hp-form input[type="number"], body .hp-form input[type="tel"], body .hp-form input[type="url"], body .hp-form input[type="date"], body .hp-form input[type="search"], body .hp-form textarea, body .hp-form select, body #loginform input[type="text"], body #loginform input[type="email"], body #loginform input[type="password"], body .woocommerce form input.input-text, body .woocommerce form textarea, body .woocommerce form select { width: 100%; padding: .65rem .8rem; font-size: 1rem; line-height: 1.5; color: #1a1a1a; background: #fff; border: 1.5px solid rgba(0, 0, 0, .12); border-radius: 8px; transition: border-color .15s ease, box-shadow .15s ease; min-height: 44px; } body .hp-form input:focus, body .hp-form textarea:focus, body .hp-form select:focus, body #loginform input:focus, body .woocommerce form input.input-text:focus, body .woocommerce form textarea:focus, body .woocommerce form select:focus { outline: 0; border-color: var(--c-accent, #F26B22); box-shadow: 0 0 0 3px rgba(242, 107, 34, .15); } body .hp-form input[type="submit"], body .hp-form button[type="submit"], body #loginform input[type="submit"], body .woocommerce button[type="submit"], body .woocommerce input[type="submit"] { min-height: 44px; } /* ============================================================ 6. ボタン（hp-button / button / .button） ============================================================ */ body .hp-button, body .hp-form .hp-button, body .hp-page__content button, body .hp-page__content .button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .65rem 1.25rem; font-size: .92rem; font-weight: 700; text-decoration: none; border-radius: 8px; border: 1.5px solid rgba(0, 0, 0, .12); background: #fff; color: #1a1a1a; cursor: pointer; transition: transform .12s ease, box-shadow .15s ease, background .15s ease; } body .hp-button:hover, body .hp-page__content button:hover, body .hp-page__content .button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); } body .hp-button:active, body .hp-page__content button:active, body .hp-page__content .button:active { transform: translateY(0); } body .hp-button--primary, body .button.alt, body .button-primary, body input[type="submit"].button-primary, body input[type="submit"].alt { background: var(--c-accent, #F26B22); color: #fff; border-color: var(--c-accent, #F26B22); box-shadow: 0 3px 10px rgba(242, 107, 34, .25); } body .hp-button--primary:hover, body .button.alt:hover, body input[type="submit"].alt:hover { background: #d75a1e; border-color: #d75a1e; } /* ============================================================ 7. 見出し（h1, h2, h3） ============================================================ */ body .hp-page__content h1, body .hp-page__content .hp-page__title { margin: 0 0 1rem; font-size: var(--fs-3, clamp(1.4rem, 3vw, 1.85rem)); font-weight: 800; color: #1a1a1a; line-height: 1.35; } body .hp-page__content h2 { margin: 1.5rem 0 .75rem; font-size: 1.2rem; font-weight: 700; color: #1a1a1a; } body .hp-page__content h3 { margin: 1rem 0 .5rem; font-size: 1.05rem; font-weight: 700; color: #1a1a1a; } /* ============================================================ 8. ウィジェット / カード ============================================================ */ body .hp-widget { margin: 0 0 1.1rem; } body .hp-widget__title { margin: 0 0 .65rem; font-size: .85rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: .06em; } /* ============================================================ 9. WooCommerce Checkout（/wp-check/checkout/） ============================================================ */ body.woocommerce-checkout .woocommerce { max-width: 1100px; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) clamp(.75rem, 2vw, 1.5rem); } body.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1fr 380px; gap: clamp(1rem, 2.5vw, 1.75rem); } @media (max-width: 850px) { body.woocommerce-checkout form.checkout { grid-template-columns: 1fr; } } body.woocommerce-checkout #order_review_heading, body.woocommerce-checkout #order_review { background: #fff; border-radius: 12px; padding: 1.25rem 1.25rem; box-shadow: 0 2px 12px rgba(0, 0, 0, .05); border: 1px solid rgba(0, 0, 0, .06); position: sticky; top: 80px; align-self: start; } body.woocommerce-checkout #order_review_heading { position: static; margin: 0 0 .75rem; padding-bottom: 0; box-shadow: none; border: 0; font-size: 1.1rem; font-weight: 800; color: #1a1a1a; } @media (max-width: 850px) { body.woocommerce-checkout #order_review { position: static; } } /* WooCommerce 注文受領 */ body.woocommerce-order-received .woocommerce-order { max-width: 720px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2rem); background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .06); border: 1px solid rgba(0, 0, 0, .06); text-align: center; } body.woocommerce-order-received .woocommerce-notice--success { font-size: 1.15rem; font-weight: 700; color: var(--c-accent, #F26B22); } /* ============================================================ 10. /help/, /guide_market/ 等の通常ページ ============================================================ */ body.page-template-default .entry-content, body.page .entry-content, body.single .entry-content { max-width: 880px; margin: 0 auto; padding: clamp(1rem, 2.5vw, 1.5rem); line-height: 1.85; } /* ============================================================ 11. ダークモード対応 html[data-theme="dark"] スコープで全体上書き ============================================================ */ html[data-theme="dark"] body .hp-page.site-main { background: #15171c; } html[data-theme="dark"] body .hp-page__sidebar, html[data-theme="dark"] body .hp-page__content, html[data-theme="dark"] body.woocommerce-checkout #order_review, html[data-theme="dark"] body.woocommerce-order-received .woocommerce-order { background: #1f2430; border-color: rgba(255, 255, 255, .1); color: #e6e8ed; } html[data-theme="dark"] body .hp-page__content h1, html[data-theme="dark"] body .hp-page__content h2, html[data-theme="dark"] body .hp-page__content h3, html[data-theme="dark"] body .hp-page__content .hp-page__title { color: #e6e8ed; } html[data-theme="dark"] body .hp-menu--user-account .menu-item a { color: #cfd6e2; } html[data-theme="dark"] body .hp-menu--user-account .menu-item a:hover { background: rgba(242, 107, 34, .15); } html[data-theme="dark"] body .hp-menu--user-account .menu-item--current > a, html[data-theme="dark"] body .hp-menu--user-account .menu-item.current-menu-item > a { background: linear-gradient(135deg, rgba(242, 107, 34, .22) 0%, rgba(242, 107, 34, .12) 100%); color: #ffb78a; } html[data-theme="dark"] body .hp-page__content .hp-table th, html[data-theme="dark"] body .hp-page__content .hp-table td { border-color: rgba(255, 255, 255, .1); color: #cfd6e2; } html[data-theme="dark"] body .hp-page__content .hp-table thead th { background: rgba(255, 255, 255, .04); color: #99a1b0; border-bottom-color: rgba(255, 255, 255, .14); } html[data-theme="dark"] body .hp-page__content .hp-table tbody tr:hover { background: rgba(242, 107, 34, .12); } html[data-theme="dark"] body .hp-form label, html[data-theme="dark"] body .hp-form .hp-field__label { color: #cfd6e2; } html[data-theme="dark"] body .hp-form input, html[data-theme="dark"] body .hp-form textarea, html[data-theme="dark"] body .hp-form select, html[data-theme="dark"] body #loginform input, html[data-theme="dark"] body .woocommerce form input.input-text, html[data-theme="dark"] body .woocommerce form textarea, html[data-theme="dark"] body .woocommerce form select { background: #2a3040; border-color: rgba(255, 255, 255, .15); color: #e6e8ed; } html[data-theme="dark"] body .hp-form input::placeholder, html[data-theme="dark"] body .hp-form textarea::placeholder, html[data-theme="dark"] body #loginform input::placeholder, html[data-theme="dark"] body .woocommerce form input::placeholder, html[data-theme="dark"] body .woocommerce form textarea::placeholder { color: #6a7080; } html[data-theme="dark"] body .hp-form input:focus, html[data-theme="dark"] body .hp-form textarea:focus, html[data-theme="dark"] body .hp-form select:focus, html[data-theme="dark"] body #loginform input:focus, html[data-theme="dark"] body .woocommerce form input:focus { border-color: var(--c-accent, #F26B22); box-shadow: 0 0 0 3px rgba(242, 107, 34, .25); } html[data-theme="dark"] body #loginform label, html[data-theme="dark"] body .woocommerce form label { color: #cfd6e2; } html[data-theme="dark"] body .hp-button, html[data-theme="dark"] body .hp-page__content button, html[data-theme="dark"] body .hp-page__content .button { background: #2a3040; color: #e6e8ed; border-color: rgba(255, 255, 255, .15); } /* Primary ボタン（橙）をダーク背景でも視認できるよう復元。 上の gray override が hp-button--primary / button-primary も上書きするため 特異度を同じにしつつ後方に置いて orange を再適用する。 */ html[data-theme="dark"] body .hp-button--primary, html[data-theme="dark"] body .hp-button.hp-button--primary, html[data-theme="dark"] body .hp-page__content .button.alt, html[data-theme="dark"] body .hp-page__content .button-primary, html[data-theme="dark"] body .hp-page__content button.button-primary, html[data-theme="dark"] body .hp-page__content input[type="submit"].button-primary, html[data-theme="dark"] body .hp-page__content input[type="submit"].alt { background: var(--c-accent, #F26B22); color: #fff; border-color: var(--c-accent, #F26B22); box-shadow: 0 3px 10px rgba(242, 107, 34, .30); } html[data-theme="dark"] body .hp-button--primary:hover, html[data-theme="dark"] body .hp-page__content .button.alt:hover, html[data-theme="dark"] body .hp-page__content button.button-primary:hover, html[data-theme="dark"] body .hp-page__content input[type="submit"].button-primary:hover, html[data-theme="dark"] body .hp-page__content input[type="submit"].alt:hover { background: #d75a1e; border-color: #d75a1e; } html[data-theme="dark"] body .hp-widget__title { color: #99a1b0; } /* ============================================================ 12. グローバルレスポンシブ補完 ============================================================ */ @media (max-width: 800px) { body .hp-row { flex-direction: column; } body .hp-page__sidebar.hp-col-sm-4, body .hp-page__content.hp-col-sm-8 { flex: 1 1 100%; width: 100%; max-width: 100%; } } @media (max-width: 480px) { body .hp-page.site-main { padding: .85rem .5rem; } body .hp-page__content, body .hp-page__sidebar { padding: 1rem .85rem; border-radius: 10px; } body .hp-page__content h1 { font-size: 1.3rem; } } /* ============================================================ 13. ボトムシート風モバイル nav 改善（補助） ============================================================ */ @media (max-width: 600px) { body .hp-menu--user-account .menu-item a { padding: .85rem 1rem; font-size: .95rem; } } /* ===== v2 (旧 priority 96 厳格強化) [元: wn-store-account-polish-v2.php] ===== */ /* ============================================================ 1. カラートークン定義（CSS 変数） ライト/ダーク両方で参照、--c-* は既存テーマと衝突回避のため wn 接頭 ============================================================ */ body { --wn-c-success: #15803d; --wn-c-success-bg: rgba(21, 128, 61, .1); --wn-c-warning: #d97706; --wn-c-warning-bg: rgba(217, 119, 6, .1); --wn-c-danger: #dc2626; --wn-c-danger-bg: rgba(220, 38, 38, .1); --wn-c-info: #2563eb; --wn-c-info-bg: rgba(37, 99, 235, .1); --wn-c-muted: #6b7280; --wn-c-border: rgba(0, 0, 0, .1); } html[data-theme="dark"] body { --wn-c-success: #22c55e; --wn-c-success-bg: rgba(34, 197, 94, .15); --wn-c-warning: #f59e0b; --wn-c-warning-bg: rgba(245, 158, 11, .15); --wn-c-danger: #ef4444; --wn-c-danger-bg: rgba(239, 68, 68, .15); --wn-c-info: #3b82f6; --wn-c-info-bg: rgba(59, 130, 246, .15); --wn-c-muted: #99a1b0; --wn-c-border: rgba(255, 255, 255, .12); } /* ============================================================ 2. ステータスバッジ統一（HivePress / WooCommerce 横断） ============================================================ */ body .hp-page__content [class*="hp-order__status"], body .hp-page__content [class*="hp-booking__status"], body .hp-page__content [class*="hp-listing__status"], body .hp-page__content [class*="status-"], body .woocommerce .order-status, body .woocommerce [class*="status-"] { display: inline-flex; align-items: center; gap: .35rem; padding: 3px 10px; font-size: .72rem; font-weight: 700; border-radius: 20px; letter-spacing: .03em; line-height: 1.5; white-space: nowrap; } /* 状態別の色マッピング — HivePress 実 DOM パターン (hp-status--wc-) を直接対象 */ /* 成功（緑） */ body .hp-page__content .hp-status--wc-completed, body .hp-page__content .hp-status--publish, body .hp-page__content .hp-status--published, body .hp-page__content .hp-status--approved, body .hp-page__content .hp-status--active, body .hp-page__content .hp-status--confirmed, body .hp-page__content .hp-status--paid, body .hp-page__content [class*="status-completed"], body .hp-page__content [class*="status-publish"]:not([class*="status-published-out"]), body .woocommerce [class*="status-completed"], body .woocommerce [class*="status-active"] { color: var(--wn-c-success); background: var(--wn-c-success-bg); } /* 警告（橙） */ body .hp-page__content .hp-status--wc-pending, body .hp-page__content .hp-status--pending, body .hp-page__content .hp-status--pending-approval, body .hp-page__content .hp-status--draft, body .hp-page__content .hp-status--wc-on-hold, body .hp-page__content [class*="status-pending"], body .hp-page__content [class*="status-draft"], body .woocommerce [class*="status-pending"] { color: var(--wn-c-warning); background: var(--wn-c-warning-bg); } /* 危険（赤） */ body .hp-page__content .hp-status--wc-cancelled, body .hp-page__content .hp-status--wc-failed, body .hp-page__content .hp-status--wc-refunded, body .hp-page__content .hp-status--cancelled, body .hp-page__content .hp-status--canceled, body .hp-page__content .hp-status--failed, body .hp-page__content .hp-status--refunded, body .hp-page__content .hp-status--trash, body .hp-page__content [class*="status-cancelled"], body .hp-page__content [class*="status-failed"], body .hp-page__content [class*="status-refunded"], body .woocommerce [class*="status-cancelled"], body .woocommerce [class*="status-failed"], body .woocommerce [class*="status-refunded"] { color: var(--wn-c-danger); background: var(--wn-c-danger-bg); } /* 情報（青） */ body .hp-page__content .hp-status--wc-processing, body .hp-page__content .hp-status--processing, body .hp-page__content .hp-status--on-hold, body .hp-page__content [class*="status-processing"], body .woocommerce [class*="status-processing"], body .woocommerce [class*="status-on-hold"] { color: var(--wn-c-info); background: var(--wn-c-info-bg); } /* ============================================================ 3. FontAwesome アイコン正規化 HivePress は パターン ============================================================ */ body .hp-page__content .hp-icon, body .hp-page__content [class*="fa-"] { font-size: 1em; line-height: 1; vertical-align: -0.075em; opacity: .85; } body .hp-page__content a:hover .hp-icon, body .hp-page__content a:focus .hp-icon { opacity: 1; } /* ============================================================ 4. フォーム error / success / required 状態 ============================================================ */ body .hp-form .hp-field.hp-field--invalid input, body .hp-form .hp-field.hp-field--invalid textarea, body .hp-form .hp-field.hp-field--invalid select, body .woocommerce form .form-row.woocommerce-invalid input, body .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--wn-c-danger); box-shadow: 0 0 0 3px var(--wn-c-danger-bg); } body .hp-form .hp-field.hp-field--valid input, body .woocommerce form .form-row.woocommerce-validated input { border-color: var(--wn-c-success); } body .hp-form .hp-field__error, body .woocommerce form .woocommerce-error, body .woocommerce-error { margin-top: .35rem; padding: .35rem .55rem; font-size: .78rem; color: var(--wn-c-danger); background: var(--wn-c-danger-bg); border-radius: 4px; } body .hp-form .hp-field--required > label::after, body .hp-form .hp-field__label--required::after, body .woocommerce form .form-row.validate-required label .required { content: " *"; color: var(--wn-c-danger); font-weight: 700; } /* ============================================================ 5. HivePress vendor / listing / order カード共通 ============================================================ */ body .hp-page__content .hp-vendor, body .hp-page__content .hp-booking, body .hp-page__content .hp-order--edit-block, body .hp-page__content .hp-listing--edit-block { transition: background .15s ease, box-shadow .2s ease; } body .hp-page__content .hp-order--edit-block:hover, body .hp-page__content .hp-listing--edit-block:hover { background: rgba(242, 107, 34, .04); } html[data-theme="dark"] body .hp-page__content .hp-order--edit-block:hover, html[data-theme="dark"] body .hp-page__content .hp-listing--edit-block:hover { background: rgba(242, 107, 34, .12); } /* テーブル内のアクション icon リンク */ body .hp-page__content .hp-table .hp-link { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; border-radius: 6px; color: var(--c-accent, #F26B22); text-decoration: none; font-weight: 600; transition: background .15s ease; } body .hp-page__content .hp-table .hp-link:hover { background: rgba(242, 107, 34, .1); } /* ============================================================ 6. HivePress 副アクションウィジェット (hp-vendor__actions--secondary) ============================================================ */ body .hp-vendor__actions--secondary, body .hp-vendor__actions { display: flex; flex-wrap: wrap; gap: .5rem; } body .hp-vendor__actions a, body .hp-vendor__actions button { min-height: 38px; padding: .45rem .85rem; font-size: .85rem; border-radius: 6px; } /* ============================================================ 7. カレンダー画面 — sidebar なしレイアウト補完 ============================================================ */ body[class*="page-template"] .hp-page__content[class*="hp-col-sm-12"], body .hp-page__content:only-child { max-width: 1100px; margin: 0 auto; } /* HivePress vendor カレンダーが存在する場合の枠 */ body .hp-vendor-calendar, body [id*="calendar"] { background: #fff; border-radius: 10px; padding: 1rem; box-shadow: 0 1px 6px rgba(0, 0, 0, .04); } html[data-theme="dark"] body .hp-vendor-calendar, html[data-theme="dark"] body [id*="calendar"] { background: #1f2430; border: 1px solid rgba(255, 255, 255, .1); } /* ============================================================ 8. WooCommerce 詳細補強（cart / checkout / order-received） ============================================================ */ body.woocommerce-cart .woocommerce table.cart { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, .05); border: 1px solid var(--wn-c-border); } body.woocommerce-cart .woocommerce table.cart th, body.woocommerce-cart .woocommerce table.cart td { padding: .85rem 1rem; border-bottom: 1px solid var(--wn-c-border); } body.woocommerce-cart .woocommerce table.cart thead th { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--wn-c-muted); background: rgba(0, 0, 0, .02); } body.woocommerce-cart .cart-collaterals { margin-top: 1.5rem; } body.woocommerce-cart .cart_totals { background: #fff; border-radius: 12px; padding: 1.25rem; box-shadow: 0 2px 12px rgba(0, 0, 0, .05); border: 1px solid var(--wn-c-border); } /* 数量ボタン */ body.woocommerce-cart .quantity input.qty { min-height: 38px; min-width: 60px; text-align: center; } /* checkout フォーム内のセクション見出し */ body.woocommerce-checkout h3, body.woocommerce-checkout h3#order_review_heading { font-size: 1.1rem; font-weight: 800; margin: 0 0 .85rem; color: #1a1a1a; } /* checkout の payment 部分 */ body.woocommerce-checkout #payment { background: rgba(0, 0, 0, .02); border-radius: 10px; padding: 1rem; border: 1px solid var(--wn-c-border); } body.woocommerce-checkout #payment ul.payment_methods { margin: 0; list-style: none; padding: 0; } body.woocommerce-checkout #payment ul.payment_methods > li { padding: .65rem .85rem; margin: 0 0 .35rem; background: #fff; border-radius: 6px; border: 1px solid var(--wn-c-border); } /* order-received: 詳細テーブル */ body.woocommerce-order-received .woocommerce-table--order-details { width: 100%; margin: 1rem 0; border-collapse: collapse; } body.woocommerce-order-received .woocommerce-table--order-details th, body.woocommerce-order-received .woocommerce-table--order-details td { padding: .65rem .85rem; border-bottom: 1px solid var(--wn-c-border); } /* ============================================================ 9. アクセシビリティ強化: focus-visible 全要素 ============================================================ */ body .hp-page a:focus-visible, body .hp-page button:focus-visible, body .hp-page input:focus-visible, body .hp-page textarea:focus-visible, body .hp-page select:focus-visible, body .hp-page summary:focus-visible, body .woocommerce a:focus-visible, body .woocommerce button:focus-visible { outline: 2px solid var(--c-accent, #F26B22); outline-offset: 2px; border-radius: 4px; } /* ============================================================ 10. モバイル: テーブル sticky header + 横スクロール強化 ============================================================ */ @media (max-width: 700px) { body .hp-page__content .hp-table { position: relative; scroll-snap-type: x proximity; } body .hp-page__content .hp-table thead { position: sticky; top: 0; z-index: 2; } body .hp-page__content .hp-table tbody tr { scroll-snap-align: start; } } /* ============================================================ 11. ダーク モード補強 v1 で漏れた要素のコントラスト確保 ============================================================ */ html[data-theme="dark"] body { color-scheme: dark; } html[data-theme="dark"] body .hp-page__content .hp-icon, html[data-theme="dark"] body .hp-page__content [class*="fa-"] { opacity: .85; } html[data-theme="dark"] body.woocommerce-cart .woocommerce table.cart, html[data-theme="dark"] body.woocommerce-cart .cart_totals, html[data-theme="dark"] body.woocommerce-checkout #payment ul.payment_methods > li { background: #1f2430; border-color: rgba(255, 255, 255, .1); color: #e6e8ed; } html[data-theme="dark"] body.woocommerce-cart .woocommerce table.cart thead th { background: rgba(255, 255, 255, .04); color: var(--wn-c-muted); } html[data-theme="dark"] body.woocommerce-cart .woocommerce table.cart th, html[data-theme="dark"] body.woocommerce-cart .woocommerce table.cart td { border-color: rgba(255, 255, 255, .1); color: #cfd6e2; } html[data-theme="dark"] body.woocommerce-checkout #payment { background: rgba(255, 255, 255, .03); } html[data-theme="dark"] body.woocommerce-checkout h3 { color: #e6e8ed; } html[data-theme="dark"] body.woocommerce-order-received .woocommerce-table--order-details th, html[data-theme="dark"] body.woocommerce-order-received .woocommerce-table--order-details td { border-color: rgba(255, 255, 255, .1); color: #cfd6e2; } /* ============================================================ 11-A. ダークモードでのステータス色 specificity 強化 v1 の dark mode td color (#cfd6e2) が override していたため、 .hp-status と .hp-status--xxx を compound でターゲット (b 値 +1) ============================================================ */ html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--wc-completed, html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--publish, html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--active, html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--confirmed, html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--paid { color: var(--wn-c-success); background: var(--wn-c-success-bg); } html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--wc-pending, html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--pending, html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--draft, html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--wc-on-hold { color: var(--wn-c-warning); background: var(--wn-c-warning-bg); } html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--wc-cancelled, html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--wc-failed, html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--wc-refunded, html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--cancelled, html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--failed, html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--refunded { color: var(--wn-c-danger); background: var(--wn-c-danger-bg); } html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--wc-processing, html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--processing, html[data-theme="dark"] body .hp-page__content .hp-status.hp-status--on-hold { color: var(--wn-c-info); background: var(--wn-c-info-bg); } /* ============================================================ 12. 細部 polish (スクロールバー / セレクトドロップダウン) ============================================================ */ body .hp-page__content ::-webkit-scrollbar { width: 10px; height: 10px; } body .hp-page__content ::-webkit-scrollbar-track { background: transparent; } body .hp-page__content ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .15); border-radius: 10px; } body .hp-page__content ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .25); } html[data-theme="dark"] body .hp-page__content ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); } html[data-theme="dark"] body .hp-page__content ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .25); } /* ============================================================ 13. 印刷スタイル (order-received で領収書を印刷する場合) ============================================================ */ @media print { body .hp-page__sidebar, body .cta-rail, body .site-header, body .site-footer, body .footer-signal { display: none; } body .hp-page__content, body.woocommerce-order-received .woocommerce-order { box-shadow: none; border: 0; padding: 0; } } /* ===== v3 (旧 priority 97 LayoutFix) [元: wn-store-account-polish-v3-layoutfix.php] ===== */ /* ============================================================ 1. .hp-row を CSS Grid に切り替え（デスクトップ ≥801px） ── flex-basis: 33.33% + 66.66% + gap が親幅を超えて flex-wrap が発火する問題を根本解消 ============================================================ */ @media (min-width: 801px) { body .hp-row { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); align-items: start; } /* HivePress の flex-basis / max-width を無効化（Grid に委ねる） */ body .hp-row > .hp-page__sidebar.hp-col-sm-4, body .hp-row > .hp-page__content.hp-col-sm-8, body .hp-row > .hp-page__sidebar, body .hp-row > .hp-page__content { flex: initial; max-width: none; width: auto; min-width: 0; } /* サイドバー無しの単一カラムページ（カレンダー等）対応 */ body .hp-row > .hp-page__content.hp-col-sm-12:only-child { grid-column: 1 / -1; } body .hp-row:not(:has(> .hp-page__sidebar)) { display: block; } body .hp-row:not(:has(> .hp-page__sidebar)) > .hp-page__content { max-width: 1100px; margin-left: auto; margin-right: auto; } } /* ============================================================ 2. モバイル（≤800px）：Grid を block flow に戻し縦積み v1 のメディアクエリと整合 ============================================================ */ @media (max-width: 800px) { body .hp-row { display: flex; flex-direction: column; gap: 1rem; } body .hp-row > .hp-page__sidebar, body .hp-row > .hp-page__content { width: 100%; max-width: 100%; flex: 1 1 auto; min-width: 0; } body .hp-page__sidebar { position: static; top: auto; } } /* ============================================================ 3. サイドバーのスティッキー挙動を Grid 整合に修正 （v1 の `top: 80px sticky` は Grid 子でも有効。 align-self: start は Grid container 側で align-items: start を設定済みのため、子側の align-self: flex-start を削除） ============================================================ */ @media (min-width: 801px) { body .hp-page__sidebar { position: sticky; top: 80px; align-self: start; /* max-height で長い nav が viewport を超えても自然に */ max-height: calc(100vh - 100px); overflow-y: auto; /* スクロールバー領域確保 */ padding-right: calc(1.15rem - 4px); } /* スクロールバー透明化 */ body .hp-page__sidebar::-webkit-scrollbar { width: 4px; } body .hp-page__sidebar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .1); border-radius: 2px; } html[data-theme="dark"] body .hp-page__sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .1); } } /* ===== v4 (旧 priority 98 DarkFix, 2ブロック) [元: wn-store-account-polish-v4-darkfix.php] ===== */ /* ============================================================ 1. ライトモード：HivePress カードブロックのカード化 （listings/orders/bookings の各行 / ブロック） ── --edit-block と --view-block の両 variant を網羅 ============================================================ */ body .hp-page__content .hp-listing.hp-listing--edit-block, body .hp-page__content .hp-listing.hp-listing--view-block, body .hp-page__content .hp-order.hp-order--edit-block, body .hp-page__content .hp-order.hp-order--view-block, body .hp-page__content .hp-booking.hp-booking--edit-block, body .hp-page__content .hp-booking.hp-booking--view-block, body .hp-page__content .hp-vendor.hp-vendor--edit-block, body .hp-page__content .hp-vendor.hp-vendor--view-block { background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 10px; margin: 0 0 .75rem; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; } body .hp-page__content .hp-listing.hp-listing--edit-block:hover, body .hp-page__content .hp-listing.hp-listing--view-block:hover, body .hp-page__content .hp-order.hp-order--edit-block:hover, body .hp-page__content .hp-order.hp-order--view-block:hover, body .hp-page__content .hp-booking.hp-booking--edit-block:hover, body .hp-page__content .hp-booking.hp-booking--view-block:hover, body .hp-page__content .hp-vendor.hp-vendor--edit-block:hover, body .hp-page__content .hp-vendor.hp-vendor--view-block:hover { border-color: rgba(242, 107, 34, .35); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); } /* リスティング内部セルの padding 補強（題名・カテゴリ・日付 等） */ body .hp-page__content .hp-listing__title, body .hp-page__content .hp-listing__categories, body .hp-page__content .hp-listing__date, body .hp-page__content .hp-listing__created-date, body .hp-page__content .hp-order__details, body .hp-page__content .hp-booking__details { padding: .65rem .85rem; font-size: .9rem; line-height: 1.55; } body .hp-page__content .hp-listing__title { font-weight: 700; color: #1a1a1a; } /* ============================================================ 2. ダークモード：HivePress カードブロックの bg 上書き （これが最致命: agent 計測で bg #fff 固定が判明） ============================================================ */ html[data-theme="dark"] body .hp-page__content .hp-listing.hp-listing--edit-block, html[data-theme="dark"] body .hp-page__content .hp-listing.hp-listing--view-block, html[data-theme="dark"] body .hp-page__content .hp-order.hp-order--edit-block, html[data-theme="dark"] body .hp-page__content .hp-order.hp-order--view-block, html[data-theme="dark"] body .hp-page__content .hp-booking.hp-booking--edit-block, html[data-theme="dark"] body .hp-page__content .hp-booking.hp-booking--view-block, html[data-theme="dark"] body .hp-page__content .hp-vendor.hp-vendor--edit-block, html[data-theme="dark"] body .hp-page__content .hp-vendor.hp-vendor--view-block { background: #252b38; border-color: rgba(255, 255, 255, .1); } html[data-theme="dark"] body .hp-page__content .hp-listing.hp-listing--edit-block:hover, html[data-theme="dark"] body .hp-page__content .hp-listing.hp-listing--view-block:hover, html[data-theme="dark"] body .hp-page__content .hp-order.hp-order--edit-block:hover, html[data-theme="dark"] body .hp-page__content .hp-order.hp-order--view-block:hover, html[data-theme="dark"] body .hp-page__content .hp-booking.hp-booking--edit-block:hover, html[data-theme="dark"] body .hp-page__content .hp-booking.hp-booking--view-block:hover, html[data-theme="dark"] body .hp-page__content .hp-vendor.hp-vendor--edit-block:hover, html[data-theme="dark"] body .hp-page__content .hp-vendor.hp-vendor--view-block:hover { border-color: rgba(242, 107, 34, .45); background: #2a3040; } html[data-theme="dark"] body .hp-page__content .hp-listing__title { color: #e6e8ed; } /* ============================================================ 3. フォーム入力のボーダー dark mode 補完 （v1 は border-color を上書きしていない → rgba(0,0,0,.12) のまま不可視） ============================================================ */ html[data-theme="dark"] body .hp-form input[type="text"], html[data-theme="dark"] body .hp-form input[type="email"], html[data-theme="dark"] body .hp-form input[type="password"], html[data-theme="dark"] body .hp-form input[type="number"], html[data-theme="dark"] body .hp-form input[type="tel"], html[data-theme="dark"] body .hp-form input[type="url"], html[data-theme="dark"] body .hp-form input[type="date"], html[data-theme="dark"] body .hp-form input[type="search"], html[data-theme="dark"] body .hp-form textarea, html[data-theme="dark"] body .hp-form select, html[data-theme="dark"] body #loginform input[type="text"], html[data-theme="dark"] body #loginform input[type="email"], html[data-theme="dark"] body #loginform input[type="password"], html[data-theme="dark"] body .woocommerce form input.input-text, html[data-theme="dark"] body .woocommerce form textarea, html[data-theme="dark"] body .woocommerce form select { border-color: rgba(255, 255, 255, .18); } /* checkbox / radio / file もダークで補強 */ html[data-theme="dark"] body .hp-form input[type="checkbox"], html[data-theme="dark"] body .hp-form input[type="radio"] { accent-color: var(--c-accent, #F26B22); } html[data-theme="dark"] body .hp-form input[type="file"] { color: #cfd6e2; background: rgba(255, 255, 255, .03); border: 1px dashed rgba(255, 255, 255, .2); border-radius: 6px; padding: .5rem .75rem; } html[data-theme="dark"] body .hp-form input[type="file"]::file-selector-button { background: #2a3040; color: #e6e8ed; border: 1px solid rgba(255, 255, 255, .15); border-radius: 4px; padding: .3rem .65rem; margin-right: .5rem; cursor: pointer; } /* ============================================================ 4. HivePress カレンダー dark mode 対応 ============================================================ */ html[data-theme="dark"] body .hp-vendor-calendar, html[data-theme="dark"] body [class*="hp-calendar"], html[data-theme="dark"] body [id*="calendar"] { background: #1f2430; border-color: rgba(255, 255, 255, .1); } /* カレンダーセル境界 */ html[data-theme="dark"] body .hp-vendor-calendar td, html[data-theme="dark"] body .hp-vendor-calendar th, html[data-theme="dark"] body [class*="hp-calendar"] td, html[data-theme="dark"] body [class*="hp-calendar"] th { border-color: rgba(255, 255, 255, .08); color: #cfd6e2; } html[data-theme="dark"] body .hp-vendor-calendar td:hover, html[data-theme="dark"] body [class*="hp-calendar"] td:hover { background: rgba(242, 107, 34, .12); } /* ============================================================ 5. メニューリンク dark のホットオレンジを彩度落とし （agent 報告: rgb(255,111,61) が蛍光気味） ============================================================ */ html[data-theme="dark"] body .hp-menu--user-account .menu-item a:hover, html[data-theme="dark"] body .hp-menu--user-account .menu-item--current > a, html[data-theme="dark"] body .hp-menu--user-account .menu-item.current-menu-item > a { color: #ffb78a; } /* ============================================================ 6. メッセージ画面 (/account/messages/) のテキストエリアも補強 ============================================================ */ html[data-theme="dark"] body .hp-message-form textarea, html[data-theme="dark"] body .hp-form--message-send textarea { background: #2a3040; border: 1px solid rgba(255, 255, 255, .18); color: #e6e8ed; } html[data-theme="dark"] body .hp-message-form textarea::placeholder, html[data-theme="dark"] body .hp-form--message-send textarea::placeholder { color: #6a7080; } /* ============================================================ 7. ライトでの input border 強化（agent 確認: 1px rgba(0,0,0,.12) は薄すぎ） ============================================================ */ body .hp-form input[type="text"], body .hp-form input[type="email"], body .hp-form input[type="password"], body .hp-form input[type="number"], body .hp-form input[type="tel"], body .hp-form input[type="url"], body .hp-form input[type="date"], body .hp-form input[type="search"], body .hp-form textarea, body .hp-form select { border-color: rgba(0, 0, 0, .18); } /* ============================================================ 8. .hp-listings.hp-table のテーブル枠線 dark （listings ページ全体は table 構造） ============================================================ */ html[data-theme="dark"] body .hp-page__content .hp-listings.hp-table { border-color: rgba(255, 255, 255, .1); } html[data-theme="dark"] body .hp-page__content .hp-orders.hp-table, html[data-theme="dark"] body .hp-page__content .hp-bookings.hp-table { border-color: rgba(255, 255, 255, .1); } /* ============================================================ 9. フォーム入力の dark border-color 強化（.hp-field 併用で specificity +1） v1/v2/v3 の light shorthand と v4 light Section 7 を確実に上書き ============================================================ */ html[data-theme="dark"] body .hp-form input.hp-field[type="text"], html[data-theme="dark"] body .hp-form input.hp-field[type="email"], html[data-theme="dark"] body .hp-form input.hp-field[type="password"], html[data-theme="dark"] body .hp-form input.hp-field[type="number"], html[data-theme="dark"] body .hp-form input.hp-field[type="tel"], html[data-theme="dark"] body .hp-form input.hp-field[type="url"], html[data-theme="dark"] body .hp-form input.hp-field[type="date"], html[data-theme="dark"] body .hp-form input.hp-field[type="search"], html[data-theme="dark"] body .hp-form textarea.hp-field, html[data-theme="dark"] body .hp-form select.hp-field, html[data-theme="dark"] body .hp-form .hp-field--text, html[data-theme="dark"] body .hp-form .hp-field--email, html[data-theme="dark"] body .hp-form .hp-field--textarea { border-color: rgba(255, 255, 255, .22); background: #2a3040; color: #e6e8ed; } html[data-theme="dark"] body .hp-form input.hp-field:focus, html[data-theme="dark"] body .hp-form textarea.hp-field:focus, html[data-theme="dark"] body .hp-form select.hp-field:focus, html[data-theme="dark"] body .hp-form .hp-field--text:focus, html[data-theme="dark"] body .hp-form .hp-field--textarea:focus { border-color: var(--c-accent, #F26B22); box-shadow: 0 0 0 3px rgba(242, 107, 34, .25); outline: 0; } /* ライトモードでも .hp-field 経由で確実に border 強化 */ body .hp-form input.hp-field[type="text"], body .hp-form input.hp-field[type="email"], body .hp-form input.hp-field[type="password"], body .hp-form input.hp-field[type="number"], body .hp-form input.hp-field[type="tel"], body .hp-form textarea.hp-field, body .hp-form select.hp-field, body .hp-form .hp-field--text, body .hp-form .hp-field--email, body .hp-form .hp-field--textarea { border-color: rgba(0, 0, 0, .22); } /* ============================================================ 10. メッセージ画面（/account/messages/）ダーク補完 ── Messages dark fix。hp-message 系 + .hp-form--message-send 限定。 v4 のカード列挙(hp-listing/order/booking/vendor)が hp-message を 網羅しておらず、ダークで白背景＋低コントラストになる問題を解消。 送信欄(textarea)は本ファイル上部 Section 6 で対応済みのため非追加。 !important 不使用 / html[data-theme="dark"] body スコープ維持。 ============================================================ */ /* (a) 会話一覧テーブル枠線 */ html[data-theme="dark"] body .hp-page__content .hp-messages.hp-table { border-color: rgba(255, 255, 255, .1); } /* (b) 会話一覧 行（border-collapse のため td に背景）。.hp-message--thread-block は */ html[data-theme="dark"] body .hp-page__content tr.hp-message > td { background: #252b38; color: #cfd6e2; border-color: rgba(255, 255, 255, .1); } html[data-theme="dark"] body .hp-page__content tr.hp-message:hover > td { background: #2a3040; } html[data-theme="dark"] body .hp-page__content tr.hp-message .hp-link { color: #e6e8ed; } html[data-theme="dark"] body .hp-page__content tr.hp-message .hp-icon { color: #99a1b0; } /* (c) 会話表示カード。.hp-message--view-block は
*/ html[data-theme="dark"] body .hp-page__content .hp-message.hp-message--view-block { background: #252b38; border-color: rgba(255, 255, 255, .1); } html[data-theme="dark"] body .hp-page__content .hp-message__header { border-bottom-color: rgba(255, 255, 255, .1); } /* (d) 本文・送信者・日付 文字色 */ html[data-theme="dark"] body .hp-page__content .hp-message__content, html[data-theme="dark"] body .hp-page__content .hp-message__text { color: #e6e8ed; } html[data-theme="dark"] body .hp-page__content .hp-message__sender { color: #e6e8ed; } html[data-theme="dark"] body .hp-page__content .hp-message__sent-date, html[data-theme="dark"] body .hp-page__content .hp-message__date { color: #99a1b0; } /* (e) 添付リンク（アクセント追随） */ html[data-theme="dark"] body .hp-page__content .hp-message__attachment.hp-link { color: #ffb78a; } /* (f) 送信フォーム — message form 配下に限定（グローバル P2 には踏み込まない） */ html[data-theme="dark"] body .hp-page__content .hp-form--message-send .hp-form__button.button-primary.alt { background: var(--c-accent, #F26B22); color: #fff; border-color: var(--c-accent, #F26B22); } html[data-theme="dark"] body .hp-page__content .hp-form--message-send .hp-form__button.button-primary.alt:hover { background: #d75a1e; border-color: #d75a1e; } /* ============================================================ 11. Account sidebar dark — 内側 nav.widget.hp-menu の白背景上書き ── 実機 DevTools 確認の結果、白背景の犯人は aside.hp-page__sidebar ではなく内側の