/* ===================================================================== おせっかいコミュニティ — BuddyPress (BP Nouveau) 着せ替えCSS 会員登録 / 会員一覧 / プロフィール / 1対1メッセージ を おせっかいの世界観（海テーマ：白×オーシャンブルー×アクア＋砂／丸カード）に。 ===================================================================== */ /* ---- 全体の土台。BPコンテンツを読みやすい幅に整える ---- */ #buddypress, .buddypress-wrap{ font-family:var(--jp); color:var(--ink); line-height:1.85; max-width:880px; margin:0 auto; } #buddypress a{color:var(--coral);text-decoration:none} #buddypress a:hover{color:var(--coral-d)} #buddypress *{box-sizing:border-box} /* BPデフォルトの余計な枠線・背景を一旦リセット */ #buddypress .bp-wrap, #buddypress div.item-list-tabs, #buddypress .dir-search, #buddypress table, #buddypress fieldset{border:none;background:none} /* ---- 見出し ---- */ #buddypress h2, #buddypress h3, #buddypress h4{ font-family:var(--jp);font-weight:900;letter-spacing:.02em;color:var(--ink); line-height:1.35;margin:.2em 0 .6em; } #buddypress h2{font-size:1.7rem} #buddypress h3{font-size:1.3rem} #buddypress h4{font-size:1.08rem} /* ===================================================================== フィードバック / お知らせメッセージ（青箱→おせっかいの丸枠） ===================================================================== */ #buddypress .bp-feedback, #buddypress #message, #buddypress aside.bp-feedback{ background:var(--cream2); border:2.5px solid var(--ink); border-left:9px solid var(--mustard); border-radius:18px; box-shadow:0 6px 0 -2px rgba(20,57,91,.14); padding:14px 18px;margin:0 0 26px; color:var(--ink);font-weight:500; } #buddypress .bp-feedback.success, #buddypress #message.success{border-left-color:var(--sage)} #buddypress .bp-feedback.error, #buddypress #message.error{border-left-color:var(--coral)} #buddypress .bp-feedback .bp-icon{display:none} #buddypress .bp-feedback p{margin:0} /* ===================================================================== フォーム共通（登録・プロフィール編集・メッセージ作成） ===================================================================== */ #buddypress .standard-form label, #buddypress label{ display:block;font-weight:700;font-size:.95rem;color:var(--ink); margin:0 0 8px;letter-spacing:.01em; } #buddypress .standard-form input[type=text], #buddypress .standard-form input[type=email], #buddypress .standard-form input[type=password], #buddypress .standard-form input[type=search], #buddypress .standard-form input[type=tel], #buddypress .standard-form input[type=url], #buddypress .standard-form textarea, #buddypress .standard-form select, #buddypress input[type=text], #buddypress input[type=email], #buddypress input[type=password], #buddypress input[type=search], #buddypress textarea, #buddypress select{ width:100%; font-family:var(--jp);font-size:1rem;font-weight:500;color:var(--ink); background:#fff; border:2.5px solid var(--line); border-radius:16px; padding:13px 16px; transition:.16s; -webkit-appearance:none;appearance:none; } #buddypress .standard-form textarea, #buddypress textarea{min-height:120px;line-height:1.7;resize:vertical} #buddypress .standard-form input:focus, #buddypress .standard-form textarea:focus, #buddypress .standard-form select:focus, #buddypress input:focus, #buddypress textarea:focus, #buddypress select:focus{ outline:none;border-color:var(--coral); box-shadow:0 0 0 4px rgba(30,136,200,.16); } /* 必須マーク等の小注釈 */ #buddypress .description, #buddypress .field-visibility-settings-notoggle, #buddypress p.description, #buddypress .field-visibility-settings-toggle{ font-size:.82rem;color:var(--ink-soft);font-weight:500;margin-top:6px; } /* セクション（アカウント詳細 / プロフィール詳細）を丸カード化 */ #buddypress .register-section, #buddypress #signup-form .register-section, #buddypress .editfield, #buddypress .submit{ background:var(--cream2); border:2.5px solid var(--line); border-radius:22px; padding:24px 24px 22px; margin:0 0 22px; } #buddypress .editfield{padding:20px 22px} #buddypress .register-section legend, #buddypress .register-section > h3, #buddypress .register-section > h4{ margin-top:0;color:var(--coral);font-weight:900; } /* プロフィール編集：チェックボックス／ラジオを「ぷっくりピル」に */ #buddypress .editfield .checkbox label, #buddypress .editfield .radio label, #buddypress .field_type_checkbox label.option-label, #buddypress .editfield fieldset label{ display:inline-flex;align-items:center;gap:8px; font-weight:700;font-size:.92rem; background:#fff;border:2.5px solid var(--line);border-radius:40px; padding:9px 18px;margin:0 8px 8px 0;cursor:pointer;transition:.15s; } #buddypress .editfield .checkbox label:hover, #buddypress .editfield .radio label:hover{border-color:var(--coral);color:var(--coral)} #buddypress .editfield input[type=checkbox], #buddypress .editfield input[type=radio]{ width:18px;height:18px;accent-color:var(--coral);margin:0;cursor:pointer; } /* チェック中のピルを強調（:has 対応ブラウザ） */ #buddypress .editfield label:has(input:checked){ background:rgba(30,136,200,.12);border-color:var(--coral);color:var(--coral); } #buddypress .editfield fieldset{border:none;padding:0;margin:0} #buddypress .editfield legend{font-weight:700;margin-bottom:10px;color:var(--ink)} /* 各項目見出し */ #buddypress .editfield > label:first-child, #buddypress .editfield .label{ font-weight:700;font-size:.98rem;color:var(--ink);margin-bottom:8px;display:block; } /* 公開範囲の切替UI（「このフィールドは…会員」＋変更ボタン）は会員制では不要→非表示 */ #buddypress .field-visibility-settings, #buddypress .field-visibility-settings-toggle, #buddypress .field-visibility-settings-notoggle, #buddypress .field-visibility-settings-header, #buddypress .visibility-toggle-link{ display:none !important; } /* パスワード強度メーター周り */ #buddypress #pass-strength-result{ border-radius:12px;border:2px solid var(--line);background:#fff; padding:8px 14px;font-weight:700;font-size:.85rem;margin-top:10px; } #buddypress #pass-strength-result.strong{border-color:var(--sage);background:rgba(47,167,181,.12)} #buddypress #pass-strength-result.good{border-color:var(--mustard)} #buddypress #pass-strength-result.short, #buddypress #pass-strength-result.bad{border-color:var(--coral);background:rgba(30,136,200,.1)} #buddypress .pw-weak{margin-top:8px} /* パスワード表示トグルのアイコン（巨大化バグ対策＝サイズ固定） */ #buddypress button.bb-toggle-password, #buddypress .password-toggle, #buddypress button[class*="toggle"]{ background:#fff;border:2px solid var(--line);border-radius:12px; width:auto;padding:8px 12px;cursor:pointer;color:var(--ink-soft); } #buddypress .bb-toggle-password .dashicons, #buddypress button[class*="toggle"] .dashicons, #buddypress button[class*="toggle"] svg{ width:20px;height:20px;font-size:20px;line-height:20px;vertical-align:middle; } /* ===================================================================== ボタン（おせっかいのぷっくりボタン） ===================================================================== */ #buddypress input[type=submit], #buddypress button[type=submit], #buddypress .standard-form button, #buddypress a.button, #buddypress .generic-button a, #buddypress .submit input, #buddypress .button{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--jp);font-weight:700;font-size:1rem; padding:14px 30px;border-radius:50px;border:none;cursor:pointer; background:var(--coral);color:#fff; box-shadow:0 6px 0 var(--coral-d); transition:.16s;text-decoration:none;line-height:1; } #buddypress input[type=submit]:hover, #buddypress button[type=submit]:hover, #buddypress a.button:hover, #buddypress .generic-button a:hover, #buddypress .submit input:hover, #buddypress .button:hover{ transform:translateY(-3px);box-shadow:0 9px 0 var(--coral-d);color:#fff; } #buddypress input[type=submit]:active, #buddypress button[type=submit]:active, #buddypress .submit input:active, #buddypress .button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--coral-d)} /* サブ的なボタン（マスタード） */ #buddypress .generic-button.secondary a, #buddypress a.button.outline, #buddypress .bp-secondary-action{ background:var(--mustard);color:var(--ink);box-shadow:0 6px 0 var(--mustard-d); } #buddypress .generic-button.secondary a:hover, #buddypress a.button.outline:hover, #buddypress .bp-secondary-action:hover{ box-shadow:0 9px 0 var(--mustard-d);color:var(--ink); } /* ===================================================================== タブナビ（プロフィール内 / 一覧の絞り込み） ===================================================================== */ #buddypress .item-list-tabs ul, #buddypress nav.main-navs ul, #buddypress #subnav ul, #buddypress .bp-navs ul{ display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 24px;padding:0; background:none; } #buddypress .item-list-tabs ul li a, #buddypress .bp-navs ul li a{ display:inline-block;font-weight:700;font-size:.9rem; padding:9px 18px;border-radius:40px; background:#fff;border:2.5px solid var(--line);color:var(--ink); transition:.15s; } #buddypress .item-list-tabs ul li a:hover, #buddypress .bp-navs ul li a:hover{ border-color:var(--coral);color:var(--coral);transform:translateY(-2px); } #buddypress .item-list-tabs ul li.current a, #buddypress .item-list-tabs ul li.selected a, #buddypress .bp-navs ul li.current a, #buddypress .bp-navs ul li.selected a{ background:var(--coral);border-color:var(--coral);color:#fff; } #buddypress .item-list-tabs ul li a span, #buddypress .bp-navs ul li a span{ background:rgba(0,0,0,.12);border-radius:20px;padding:1px 8px; font-size:.78rem;margin-left:6px; } #buddypress .item-list-tabs ul li.current a span{background:rgba(255,255,255,.28)} /* ===================================================================== 会員一覧（メンバーディレクトリ） ===================================================================== */ #buddypress .dir-search, #buddypress #members-dir-search{margin-bottom:22px} #buddypress .dir-search form{display:flex;gap:10px;max-width:420px;align-items:stretch} #buddypress .dir-search input[type=search]{margin:0;flex:1 1 auto} #buddypress .dir-search button{ flex:0 0 auto;padding:0 22px;border-radius:16px;align-self:stretch; } #buddypress ul.item-list, #buddypress ul#members-list, #buddypress ul.bp-list, #buddypress .members-list{ list-style:none !important;margin:0 !important;padding:0 !important;float:none !important; display:grid !important; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important; gap:20px !important; justify-content:start !important;justify-items:stretch !important; width:100% !important; } #buddypress ul.item-list > li, #buddypress #members-list > li, #buddypress ul.bp-list > li, #buddypress .members-list > li{ /* BP標準の float/width 指定を解除して、グリッドに左から並べる */ float:none !important;clear:none !important;width:auto !important;max-width:none !important;margin:0 !important; background:var(--cream2); border:2.5px solid var(--ink); border-radius:24px; box-shadow:0 8px 0 -3px rgba(20,57,91,.16); padding:22px 18px;text-align:center; transition:.18s;position:relative; } #buddypress ul.item-list > li:hover, #buddypress #members-list > li:hover, #buddypress .members-list > li:hover{ transform:translateY(-4px);box-shadow:0 12px 0 -3px rgba(20,57,91,.18); } /* BP Nouveau は li > .list-wrap > (.item-avatar / .item) の入れ子。 横並びfloatを解除して「アバター上・名前下・横書き中央」に積み直す。 */ #buddypress .members-list > li .list-wrap, #buddypress ul.item-list > li .list-wrap{ display:block;text-align:center; } #buddypress .members-list .item-avatar, #buddypress ul.item-list .item-avatar{ float:none;display:block;margin:0 auto 12px;width:84px; } #buddypress .members-list .item-avatar img.avatar, #buddypress ul.item-list img.avatar{ width:84px;height:84px;border-radius:50%; border:3px solid #fff;box-shadow:0 0 0 2.5px var(--mustard); object-fit:cover;background:#fff;display:inline-block; } #buddypress .members-list .item, #buddypress ul.item-list .item{margin:0;width:100%} /* 名前：BP Nouveau は .list-title / .member-name（旧テーマは .item-title）。 縦書き化を防ぐため横書き固定＋full幅＋日本語は単語途中で折らない。 */ #buddypress .members-list .item-title, #buddypress .members-list .list-title, #buddypress .members-list .member-name, #buddypress ul.item-list .item-title, #buddypress ul.item-list .list-title{ display:block;width:100%; writing-mode:horizontal-tb; font-weight:900;font-size:1.05rem;margin:0 0 4px;line-height:1.45; word-break:keep-all;overflow-wrap:anywhere;white-space:normal; } #buddypress .members-list .item-title a, #buddypress .members-list .list-title a, #buddypress .members-list .member-name a{color:var(--ink)} #buddypress .members-list .item-title a:hover, #buddypress .members-list .list-title a:hover{color:var(--coral)} #buddypress .members-list .item-meta, #buddypress ul.item-list .item-meta, #buddypress .members-list .last-activity{ display:block;width:100%; font-size:.78rem;color:var(--ink-soft);font-weight:500;margin:2px 0; } /* カード内のアクションボタン（メッセージを送る等） */ #buddypress .members-list .action, #buddypress ul.item-list .action{ margin:12px 0 0;position:static;display:flex;justify-content:center;gap:8px;flex-wrap:wrap; } #buddypress .members-list .action .button, #buddypress ul.item-list .action a{ font-size:.82rem;padding:9px 18px;box-shadow:0 4px 0 var(--coral-d); } /* ページネーション */ #buddypress .pagination, #buddypress .bp-pagination{ display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px; margin-top:26px;font-size:.85rem;color:var(--ink-soft); } #buddypress .pagination-links a, #buddypress .pagination-links span{ display:inline-block;padding:6px 12px;border-radius:12px; border:2px solid var(--line);background:#fff;font-weight:700;margin:0 2px; } #buddypress .pagination-links span.current{background:var(--coral);border-color:var(--coral);color:#fff} /* ===================================================================== 単独プロフィール（ヘッダー：カバー＋アバター） ===================================================================== */ /* ── シンプル構成：カバー（バナー1枚）→ アバター → 名前/状態（クリーム地・濃い文字）→ CTA ── 重要：BP Nouveauは #header-cover-image = 本物のカバー画像（空のバナー） #item-header-cover-image = アバター/名前を入れる“ラッパー”（カバーではない！） なので、バナー背景は #header-cover-image のみに付け、ラッパーは透明にする。 */ #buddypress #item-header, #buddypress #cover-image-container, #buddypress #item-header-cover-image{ position:relative; background:none !important;border:none !important;box-shadow:none !important; min-height:0 !important;height:auto !important;border-radius:0 !important;padding:0 !important; overflow:visible !important; } #buddypress #item-header, #buddypress #cover-image-container{margin-bottom:22px} /* 本物のカバー＝バナー1枚。 BPがアップロード画像を background-image で付与するので、ここでは上書きしない。 グラデーションは背面の擬似要素に置き、画像が無いときだけ見えるようにする。 */ #buddypress #header-cover-image{ position:relative;display:block;width:100%; height:170px;min-height:170px; border-radius:24px;overflow:hidden;border:3px solid var(--ink) !important; box-shadow:0 8px 0 -4px rgba(20,57,91,.14) !important; /* ↓ background-image はここでは指定しない（BPがカバー写真を付与するので尊重） */ background-color:var(--mustard); background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important; margin-bottom:0; } /* カバー未設定時のグラデーション・フォールバック。 BPはカバーがある時だけ「#buddypress #header-cover-image{background-image:url(...)}」(id×2)を出力する。 こちらを id×1（低詳細度）にしておくと → カバー有り＝写真が勝つ／カバー無し＝このグラデが出る。 ※ 以前の ::after{z-index:-1} は“親の背景画像の上”に描画され写真を覆っていた（バグ）。 */ #header-cover-image{ background-image:linear-gradient(120deg,var(--mustard),var(--coral)); } /* アバター：BPの絶対配置を解除して、カバー直下に重ねて中央配置 */ #buddypress #item-header-avatar{ position:static !important;float:none !important;clear:both !important; text-align:center !important;margin:-56px 0 0 !important;padding:0 !important;width:auto !important; } #buddypress #item-header-avatar a{position:static !important;display:inline-block;margin:0 !important} #buddypress #item-header-avatar img.avatar{ width:108px;height:108px;border-radius:50%; border:4px solid var(--cream);box-shadow:0 0 0 3px var(--coral); object-fit:cover;background:#fff;display:inline-block; } /* 名前・状態：絶対配置を解除して中央・クリーム地に濃い文字 */ #buddypress #item-header-content{ position:static !important;float:none !important;width:auto !important; text-align:center !important;margin:10px 0 0 !important;padding:0 16px !important; } #buddypress #item-header-content h2, #buddypress #item-header-content h2 a, #buddypress #item-header-content .user-nicename, #buddypress #item-header-content .name{ color:var(--ink) !important;text-shadow:none !important; font-weight:900;font-size:1.4rem;line-height:1.3;margin:0; } #buddypress #item-header-content .activity{ color:var(--ink-soft) !important;text-shadow:none !important;font-size:.85rem;margin-top:4px; } /* 既定のヘッダーボタン群（プライベートメッセージ等）は隠し、下のCTA1つに集約。 BPのバージョンでコンテナ名が違うため、ヘッダー内のボタン類をまとめて非表示。 */ #buddypress #item-buttons, #buddypress #item-header-actions, #buddypress .bp-profile-buttons, #buddypress #item-header .generic-button, #buddypress #item-header-content .generic-button, #buddypress #item-header-content .bp-profile-buttons{ display:none !important; } /* プロフィール下の「メッセージを送る」CTA（functions.phpで出力） ※ #buddypress a{color:coral} に負けてコーラル文字で透明化していたので !important で白固定 */ #buddypress .osekkai-msg-cta, .osekkai-msg-cta{text-align:center;margin:16px 0 26px} #buddypress .osekkai-msg-cta a, .osekkai-msg-cta a{ display:inline-flex;align-items:center;gap:.5em; font-family:var(--jp);font-weight:700;font-size:1.02rem; background:var(--coral) !important;color:#fff !important; padding:14px 34px;border-radius:50px;text-decoration:none; box-shadow:0 6px 0 var(--coral-d);transition:.16s;border:none; } #buddypress .osekkai-msg-cta a:hover, .osekkai-msg-cta a:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--coral-d);color:#fff !important} #buddypress .osekkai-msg-cta a:active, .osekkai-msg-cta a:active{transform:translateY(3px);box-shadow:0 2px 0 var(--coral-d)} /* プロフィール本文のデータテーブル */ #buddypress table.profile-fields, #buddypress .bp-tables-user{ width:100%;border-collapse:separate;border-spacing:0;margin:0 0 22px; background:var(--cream2);border:2.5px solid var(--line);border-radius:20px;overflow:hidden; } #buddypress table.profile-fields tr td, #buddypress table.profile-fields tr th, #buddypress .bp-tables-user tr td, #buddypress .bp-tables-user tr th{ padding:14px 18px;border-bottom:1.5px solid var(--line);text-align:left;vertical-align:top; } #buddypress table.profile-fields tr:last-child td, #buddypress .bp-tables-user tr:last-child td{border-bottom:none} #buddypress table.profile-fields th, #buddypress .bp-tables-user th{width:30%;font-weight:700;color:var(--ink-soft);background:rgba(207,230,242,.25)} /* ===================================================================== 1対1メッセージ（受信箱 / スレッド / 作成） ===================================================================== */ /* スレッド一覧テーブル */ #buddypress #message-threads, #buddypress table.messages-notices{ width:100%;border-collapse:separate;border-spacing:0 10px; } #buddypress #message-threads tr, #buddypress table.messages-notices tr{background:transparent} #buddypress #message-threads tr td, #buddypress table.messages-notices tr td{ background:var(--cream2);border-top:2.5px solid var(--line);border-bottom:2.5px solid var(--line); padding:14px 16px;vertical-align:middle; } #buddypress #message-threads tr td:first-child{border-left:2.5px solid var(--line);border-radius:18px 0 0 18px} #buddypress #message-threads tr td:last-child{border-right:2.5px solid var(--line);border-radius:0 18px 18px 0} #buddypress #message-threads tr.unread td{border-color:var(--coral);background:rgba(30,136,200,.06)} #buddypress #message-threads .thread-from img.avatar, #buddypress .messages-notices img.avatar{ width:46px;height:46px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px var(--mustard); } #buddypress #message-threads .thread-subject .from{font-weight:900} #buddypress .thread-count{color:var(--coral);font-weight:700} /* スレッド（吹き出し） */ #buddypress .message-box, #buddypress .bp-messages-content{margin-bottom:18px} #buddypress .message-metadata{ display:flex;align-items:center;gap:10px;margin-bottom:8px; font-size:.8rem;color:var(--ink-soft); } #buddypress .message-metadata img.avatar{ width:40px;height:40px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px var(--mustard); } #buddypress .message-content{ background:#fff;border:2.5px solid var(--line);border-radius:20px 20px 20px 6px; padding:14px 18px;line-height:1.8;box-shadow:0 4px 0 -2px rgba(20,57,91,.1); } /* 自分の発言（送信メッセージ）はコーラル寄りに */ #buddypress .message-box.alt .message-content, #buddypress .sent .message-content{ background:rgba(30,136,200,.1);border-color:var(--coral); border-radius:20px 20px 6px 20px; } /* 既読・日時 */ #buddypress .activity-read-status, #buddypress .message-metadata time, #buddypress .message-metadata .activity{font-size:.74rem;color:var(--ink-soft)} /* メッセージ作成フォームの宛先（オートコンプリート） */ #buddypress #send-to-input, #buddypress .ac_results{border-radius:14px} #buddypress .ac_results{border:2.5px solid var(--ink);background:#fff;box-shadow:var(--sh);overflow:hidden} #buddypress .ac_results li.ac_over, #buddypress .ac_results li:hover{background:rgba(30,136,200,.12)} /* ===================================================================== 余白：固定ヘッダーぶんの逃がし＋レスポンシブ ===================================================================== */ @media(max-width:640px){ #buddypress ul.item-list, #buddypress #members-list, #buddypress .members-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px} #buddypress .register-section, #buddypress .submit{padding:18px 16px} #buddypress .dir-search form{flex-direction:column;max-width:none} #buddypress #item-header-avatar img.avatar{width:96px;height:96px} } /* ===================================================================== メンバーカード内部の確実な縦積み・横書き 実際の