/** * BuddyPress styles for FansPaysite theme. * * Applies the theme's CSS variables (--text-color, --background-color, * --link-color) to core BuddyPress elements so they follow the active * light/dark mode automatically. * * Theme mode is driven by [data-theme="light"|"dark"] on , set by * mode.php / theme.js — no extra JS required here. * * Sections: * 1. Base * 2. Navigation tabs * 3. Activity feed * 4. Profile / member header * 5. Extended profile fields * 6. Member directory * 7. Groups directory * 8. Buttons & actions * 9. Forms * 10. Notifications * 11. Pagination * 12. Private messages * 13. Light-mode border & shadow overrides * 14. Dark-mode overrides * * @package FansPaysite * @since 2.3 */ /* ============================================================ 1. BASE ============================================================ */ #buddypress, #buddypress * { box-sizing: border-box; } #buddypress { color: var(--text-color); } #buddypress a { color: var(--link-color); } #buddypress a:hover { opacity: 0.85; } /* ============================================================ 2. NAVIGATION TABS ============================================================ */ #buddypress #object-nav ul, #buddypress #subnav ul, #buddypress .item-list-tabs ul { background: var(--background-color); border-bottom: 2px solid var(--link-color); margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 2px; } #buddypress #object-nav ul li a, #buddypress #subnav ul li a, #buddypress .item-list-tabs ul li a { color: var(--text-color); background: transparent; border-radius: 4px 4px 0 0; padding: 8px 14px; display: block; transition: background 0.2s, color 0.2s; text-decoration: none; font-size: 0.9em; } #buddypress #object-nav ul li a:hover, #buddypress #subnav ul li a:hover, #buddypress .item-list-tabs ul li a:hover { color: var(--link-color); background: rgba(119, 20, 93, 0.08); } #buddypress #object-nav ul li.current a, #buddypress #subnav ul li.current a, #buddypress .item-list-tabs ul li.current a, #buddypress #object-nav ul li.selected a { color: var(--link-color); background: rgba(119, 20, 93, 0.12); font-weight: 600; } #buddypress #object-nav ul li a span, #buddypress #subnav ul li a span, #buddypress .item-list-tabs ul li a span { font-size: 0.8em; opacity: 0.7; } /* ============================================================ 3. ACTIVITY FEED ============================================================ */ #buddypress .activity-list { list-style: none; margin: 0; padding: 0; } #buddypress .activity-list .activity-item { background: var(--background-color); border: 1px solid transparent; border-radius: 6px; margin-bottom: 12px; padding: 16px; transition: border-color 0.2s; } #buddypress .activity-list .activity-avatar { float: left; margin-right: 12px; } #buddypress .activity-list .activity-avatar img { border-radius: 50%; display: block; } #buddypress .activity-list .activity-header, #buddypress .activity-list .activity-header a { color: var(--text-color); } #buddypress .activity-list .activity-header a:hover { color: var(--link-color); } #buddypress .activity-list .activity-header .time-since { color: var(--text-color); opacity: 0.55; font-size: 0.82em; } #buddypress .activity-list .activity-content { color: var(--text-color); overflow: hidden; } #buddypress .activity-list .activity-content p a, #buddypress .activity-list .activity-inner a { color: var(--link-color); } #buddypress .activity-list .activity-meta { margin-top: 10px; } /* Activity comments */ #buddypress .activity-list .activity-comments { border-top: 1px solid transparent; margin-top: 12px; padding-top: 12px; list-style: none; } #buddypress .activity-list .activity-comments li { display: flex; gap: 10px; margin-bottom: 10px; } #buddypress .activity-list .activity-comments .acomment-avatar img { border-radius: 50%; } #buddypress .activity-list .activity-comments .acomment-content, #buddypress .activity-list .activity-comments .acomment-meta { color: var(--text-color); } #buddypress .activity-list .activity-comments .acomment-meta { font-size: 0.82em; opacity: 0.55; } /* Activity update/post form */ #buddypress #whats-new-form textarea, #buddypress #whats-new-post-form textarea { background: var(--background-color); color: var(--text-color); border: 1px solid transparent; border-radius: 6px; padding: 10px; width: 100%; resize: vertical; } /* ============================================================ 4. PROFILE / MEMBER HEADER ============================================================ */ #buddypress #item-header { background: var(--background-color); border-radius: 6px; padding: 20px; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 16px; } #buddypress #item-header-avatar img { border-radius: 50%; } #buddypress #item-header-content h1, #buddypress #item-header-content h2, #buddypress #item-header-content h3, #buddypress #item-header h1, #buddypress #item-header h2 { color: var(--text-color); margin: 0 0 4px; } #buddypress #item-header .highlight, #buddypress #item-header .user-nicename, #buddypress #item-header .activity { color: var(--text-color); opacity: 0.65; font-size: 0.85em; } #buddypress #item-header-content .generic-button { margin-top: 10px; } /* ============================================================ 5. EXTENDED PROFILE FIELDS ============================================================ */ #buddypress .bp-profile .profile-fields, #buddypress #profile-edit-form .profile-fields { background: var(--background-color); border-radius: 6px; } /* profile-fields class sits on the itself in BP Nouveau */ #buddypress table.profile-fields, #buddypress table.bp-tables-user { width: 100%; border-collapse: collapse; background: var(--background-color); color: var(--text-color); } #buddypress table.profile-fields tr, #buddypress table.bp-tables-user tr { border-bottom: 1px solid transparent; } #buddypress table.profile-fields th, #buddypress table.bp-tables-user th, #buddypress .profile-fields dl dt { color: var(--text-color); opacity: 0.7; font-weight: 600; padding: 10px 12px 10px 0; vertical-align: top; width: 30%; } #buddypress table.profile-fields td, #buddypress table.bp-tables-user td, #buddypress .profile-fields dl dd { color: var(--text-color); padding: 10px 0; } #buddypress #profile-edit-form .field-visibility-settings { color: var(--text-color); font-size: 0.85em; opacity: 0.7; } /* ============================================================ 6. MEMBER DIRECTORY ============================================================ */ #buddypress .members-list, #buddypress #members-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } #buddypress .members-list li, #buddypress #members-list li { background: var(--background-color); border: 1px solid transparent; border-radius: 6px; padding: 14px; transition: border-color 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; align-items: center; text-align: center; } #buddypress .members-list .item-avatar img { border-radius: 50%; margin-bottom: 8px; } #buddypress .members-list .item-title, #buddypress .members-list .item-title a { color: var(--text-color); font-weight: 600; } #buddypress .members-list .item-title a:hover { color: var(--link-color); } #buddypress .members-list .item-meta { color: var(--text-color); opacity: 0.6; font-size: 0.82em; margin-top: 4px; } #buddypress .members-list .action { margin-top: 10px; } /* ============================================================ 7. GROUPS DIRECTORY ============================================================ */ #buddypress .groups-list, #buddypress #groups-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } #buddypress .groups-list li, #buddypress #groups-list li { background: var(--background-color); border: 1px solid transparent; border-radius: 6px; padding: 14px; transition: border-color 0.2s, box-shadow 0.2s; } #buddypress .groups-list .item-avatar img, #buddypress .groups-list .group-avatar img { border-radius: 4px; margin-bottom: 8px; } #buddypress .groups-list .item-title a, #buddypress .groups-list .group-title a { color: var(--text-color); font-weight: 600; text-decoration: none; } #buddypress .groups-list .item-title a:hover, #buddypress .groups-list .group-title a:hover { color: var(--link-color); } #buddypress .groups-list .item-meta, #buddypress .groups-list .group-status { color: var(--text-color); opacity: 0.6; font-size: 0.82em; margin-top: 4px; } #buddypress .groups-list .action { margin-top: 10px; } /* ============================================================ 8. BUTTONS & ACTIONS ============================================================ */ #buddypress .generic-button a, #buddypress .generic-button button, #buddypress input[type="submit"], #buddypress button[type="submit"], #buddypress a.button, #buddypress button.button { background: var(--link-color); color: #fff !important; border: none; border-radius: 4px; padding: 7px 16px; cursor: pointer; transition: opacity 0.2s; font-size: var(--font-size-sm, 14px); text-decoration: none; display: inline-block; line-height: 1.4; } #buddypress .generic-button a:hover, #buddypress .generic-button button:hover, #buddypress input[type="submit"]:hover, #buddypress button[type="submit"]:hover, #buddypress a.button:hover, #buddypress button.button:hover { opacity: 0.85; color: #fff !important; } /* Secondary / outline style */ #buddypress .generic-button.remove a, #buddypress a.button.remove, #buddypress a.button-secondary, #buddypress button.button-secondary { background: transparent; color: var(--link-color) !important; border: 1px solid var(--link-color); } #buddypress .generic-button.remove a:hover, #buddypress a.button-secondary:hover { background: rgba(119, 20, 93, 0.08); opacity: 1; } /* Pending / disabled state */ #buddypress .generic-button a[disabled], #buddypress input[type="submit"][disabled] { opacity: 0.45; cursor: not-allowed; } /* ============================================================ 9. FORMS ============================================================ */ #buddypress input[type="text"], #buddypress input[type="email"], #buddypress input[type="password"], #buddypress input[type="search"], #buddypress input[type="url"], #buddypress input[type="tel"], #buddypress textarea, #buddypress select, #buddypress .standard-form input[type="text"], #buddypress .standard-form input[type="email"], #buddypress .standard-form input[type="password"], #buddypress .standard-form textarea, #buddypress .standard-form select { background: var(--background-color); color: var(--text-color); border: 1px solid transparent; border-radius: 4px; padding: 8px 10px; width: 100%; font-family: var(--font-family-base); font-size: var(--font-size-base, 16px); transition: border-color 0.2s, box-shadow 0.2s; } #buddypress label, #buddypress .standard-form label { color: var(--text-color); font-weight: 600; margin-bottom: 4px; display: block; } #buddypress .standard-form .description { color: var(--text-color); opacity: 0.65; font-size: 0.85em; margin-top: 4px; } #buddypress .field-visibility-settings-toggle, #buddypress .field-visibility-settings-toggle a { color: var(--text-color); opacity: 0.7; font-size: 0.85em; } /* ============================================================ 10. NOTIFICATIONS ============================================================ */ #buddypress .notification-page .notification-description, #buddypress .bp-notifications-feedback, #buddypress .bp-feedback { color: var(--text-color); } #buddypress .bp-feedback.error { background: rgba(200, 40, 40, 0.1); border-left: 4px solid #c82828; border-radius: 4px; padding: 10px 14px; } #buddypress .bp-feedback.success, #buddypress .bp-feedback.info { background: rgba(119, 20, 93, 0.08); border-left: 4px solid var(--link-color); border-radius: 4px; padding: 10px 14px; } /* ============================================================ 11. PAGINATION ============================================================ */ #buddypress .pagination { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0; } #buddypress .pagination .pag-count, #buddypress .pagination .no-results { color: var(--text-color); opacity: 0.65; font-size: 0.85em; } #buddypress .pagination-links { display: flex; gap: 4px; flex-wrap: wrap; } #buddypress .pagination-links a, #buddypress .pagination-links span { color: var(--text-color); border: 1px solid transparent; border-radius: 4px; padding: 4px 10px; text-decoration: none; font-size: 0.9em; display: inline-block; transition: border-color 0.2s, color 0.2s; } #buddypress .pagination-links a:hover { color: var(--link-color); } #buddypress .pagination-links .current { background: var(--link-color); color: #fff; border-color: var(--link-color); } /* ============================================================ 12. PRIVATE MESSAGES ============================================================ */ #buddypress #message-threads, #buddypress .message-threads { list-style: none; margin: 0; padding: 0; } #buddypress #message-threads li, #buddypress .message-threads li { background: var(--background-color); border: 1px solid transparent; border-radius: 6px; padding: 12px 16px; margin-bottom: 8px; transition: border-color 0.2s; } #buddypress #message-threads li.unread { font-weight: 600; } #buddypress .message-subject a, #buddypress .thread-subject a { color: var(--text-color); text-decoration: none; } #buddypress .message-subject a:hover, #buddypress .thread-subject a:hover { color: var(--link-color); } #buddypress .message-metadata, #buddypress .thread-info { color: var(--text-color); opacity: 0.6; font-size: 0.82em; margin-top: 4px; } /* Message thread view */ #buddypress #message-content, #buddypress .message-box { background: var(--background-color); border: 1px solid transparent; border-radius: 6px; padding: 16px; margin-bottom: 12px; } #buddypress .message-box .message-header { color: var(--text-color); opacity: 0.7; font-size: 0.85em; margin-bottom: 8px; } #buddypress .message-box .message-content { color: var(--text-color); } /* ============================================================ 13. LIGHT MODE — border and shadow overrides (html prefix increases specificity above BP's own stylesheet) ============================================================ */ html[data-theme="light"] #buddypress ul.activity-list li.activity-item, html[data-theme="light"] #buddypress .members-list li, html[data-theme="light"] #buddypress #members-list li, html[data-theme="light"] #buddypress .groups-list li, html[data-theme="light"] #buddypress #groups-list li, html[data-theme="light"] #buddypress #message-threads li, html[data-theme="light"] #buddypress #message-content, html[data-theme="light"] #buddypress .message-box { border-color: #e0e0e0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } html[data-theme="light"] #buddypress ul.activity-list li.activity-item:hover, html[data-theme="light"] #buddypress .members-list li:hover, html[data-theme="light"] #buddypress .groups-list li:hover, html[data-theme="light"] #buddypress #message-threads li:hover { border-color: var(--link-color); box-shadow: 0 2px 8px rgba(119, 20, 93, 0.1); } html[data-theme="light"] #buddypress .activity-list .activity-comments { border-top-color: #e0e0e0; } html[data-theme="light"] #buddypress #item-header { border: 1px solid #e0e0e0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } html[data-theme="light"] #buddypress table.profile-fields tr, html[data-theme="light"] #buddypress table.bp-tables-user tr { border-bottom-color: #f0f0f0; } html[data-theme="light"] #buddypress input[type="text"], html[data-theme="light"] #buddypress input[type="email"], html[data-theme="light"] #buddypress input[type="password"], html[data-theme="light"] #buddypress input[type="search"], html[data-theme="light"] #buddypress input[type="url"], html[data-theme="light"] #buddypress input[type="tel"], html[data-theme="light"] #buddypress textarea, html[data-theme="light"] #buddypress select, html[data-theme="light"] #buddypress #whats-new-form textarea { border-color: #cccccc; } html[data-theme="light"] #buddypress input:focus, html[data-theme="light"] #buddypress textarea:focus, html[data-theme="light"] #buddypress select:focus { border-color: var(--link-color); outline: none; box-shadow: 0 0 0 2px rgba(119, 20, 93, 0.15); } html[data-theme="light"] #buddypress .pagination-links a, html[data-theme="light"] #buddypress .pagination-links span { border-color: #ddd; } html[data-theme="light"] #buddypress #object-nav ul, html[data-theme="light"] #buddypress #subnav ul, html[data-theme="light"] #buddypress .item-list-tabs ul { border-bottom-color: var(--link-color); } /* ============================================================ 14. DARK MODE — overrides for derived colors BP hardcodes (html prefix increases specificity above BP's own stylesheet) ============================================================ */ html[data-theme="dark"] #buddypress { background-color: var(--background-color); } /* Activity feed — stream container and UL */ html[data-theme="dark"] #buddypress #activity-stream, html[data-theme="dark"] #buddypress div.activity, html[data-theme="dark"] #buddypress ul.activity-list { background-color: var(--background-color) !important; } /* Activity feed items */ html[data-theme="dark"] #buddypress ul.activity-list li.activity-item, html[data-theme="dark"] #buddypress .members-list li, html[data-theme="dark"] #buddypress #members-list li, html[data-theme="dark"] #buddypress .groups-list li, html[data-theme="dark"] #buddypress #groups-list li, html[data-theme="dark"] #buddypress #message-threads li, html[data-theme="dark"] #buddypress #message-content, html[data-theme="dark"] #buddypress .message-box { border-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.04) !important; } html[data-theme="dark"] #buddypress ul.activity-list li.activity-item:hover, html[data-theme="dark"] #buddypress .members-list li:hover, html[data-theme="dark"] #buddypress .groups-list li:hover, html[data-theme="dark"] #buddypress #message-threads li:hover { border-color: var(--link-color); background-color: rgba(255, 255, 255, 0.07) !important; } /* Inner content divs — BP Nouveau often puts background on these too */ html[data-theme="dark"] #buddypress ul.activity-list li.activity-item .activity-content, html[data-theme="dark"] #buddypress ul.activity-list li.activity-item .activity-header, html[data-theme="dark"] #buddypress ul.activity-list li.activity-item .activity-inner, html[data-theme="dark"] #buddypress ul.activity-list li.activity-item .activity-meta, html[data-theme="dark"] #buddypress ul.activity-list li.activity-item .activity-meta.action { background-color: transparent !important; color: var(--text-color); } html[data-theme="dark"] #buddypress .activity-list .activity-comments { border-top-color: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] #buddypress #item-header { background-color: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.1); } /* Profile widget container (.bp-widget wraps the heading + table) */ html[data-theme="dark"] #buddypress .bp-widget { background-color: var(--background-color) !important; color: var(--text-color); } html[data-theme="dark"] #buddypress .bp-widget h3, html[data-theme="dark"] #buddypress .bp-widget .profile-group-title { color: var(--text-color); } /* Profile fields table — bp-widget > table.profile-fields.bp-tables-user */ html[data-theme="dark"] #buddypress table.profile-fields, html[data-theme="dark"] #buddypress table.bp-tables-user { background-color: var(--background-color) !important; color: var(--text-color); } /* Normal rows */ html[data-theme="dark"] #buddypress table.profile-fields tr, html[data-theme="dark"] #buddypress table.bp-tables-user tr { background-color: transparent !important; border-bottom-color: rgba(255, 255, 255, 0.07); } /* BP Nouveau zebra-striped .alt rows */ html[data-theme="dark"] #buddypress table.profile-fields tr.alt, html[data-theme="dark"] #buddypress table.bp-tables-user tr.alt { background-color: rgba(255, 255, 255, 0.04) !important; } /* Individual cells */ html[data-theme="dark"] #buddypress table.profile-fields th, html[data-theme="dark"] #buddypress table.bp-tables-user th, html[data-theme="dark"] #buddypress table.profile-fields td, html[data-theme="dark"] #buddypress table.bp-tables-user td, html[data-theme="dark"] #buddypress table.profile-fields td.label, html[data-theme="dark"] #buddypress table.bp-tables-user td.label, html[data-theme="dark"] #buddypress table.profile-fields td.data, html[data-theme="dark"] #buddypress table.bp-tables-user td.data { color: var(--text-color) !important; background-color: transparent !important; } html[data-theme="dark"] #buddypress #object-nav ul, html[data-theme="dark"] #buddypress #subnav ul, html[data-theme="dark"] #buddypress .item-list-tabs ul { border-bottom-color: rgba(255, 255, 255, 0.15); } html[data-theme="dark"] #buddypress #object-nav ul li a:hover, html[data-theme="dark"] #buddypress #subnav ul li a:hover, html[data-theme="dark"] #buddypress .item-list-tabs ul li a:hover { background: rgba(211, 158, 216, 0.12); color: var(--link-color); } html[data-theme="dark"] #buddypress #object-nav ul li.current a, html[data-theme="dark"] #buddypress #subnav ul li.current a, html[data-theme="dark"] #buddypress .item-list-tabs ul li.current a, html[data-theme="dark"] #buddypress #object-nav ul li.selected a { background: rgba(211, 158, 216, 0.18); color: var(--link-color); } html[data-theme="dark"] #buddypress input[type="text"], html[data-theme="dark"] #buddypress input[type="email"], html[data-theme="dark"] #buddypress input[type="password"], html[data-theme="dark"] #buddypress input[type="search"], html[data-theme="dark"] #buddypress input[type="url"], html[data-theme="dark"] #buddypress input[type="tel"], html[data-theme="dark"] #buddypress textarea, html[data-theme="dark"] #buddypress select, html[data-theme="dark"] #buddypress #whats-new-form textarea { border-color: rgba(255, 255, 255, 0.18); background-color: rgba(255, 255, 255, 0.06); color: var(--text-color); } html[data-theme="dark"] #buddypress input:focus, html[data-theme="dark"] #buddypress textarea:focus, html[data-theme="dark"] #buddypress select:focus { border-color: var(--link-color); outline: none; box-shadow: 0 0 0 2px rgba(211, 158, 216, 0.25); } html[data-theme="dark"] #buddypress .pagination-links a, html[data-theme="dark"] #buddypress .pagination-links span { border-color: rgba(255, 255, 255, 0.15); } html[data-theme="dark"] #buddypress .generic-button.remove a, html[data-theme="dark"] #buddypress a.button-secondary, html[data-theme="dark"] #buddypress button.button-secondary { border-color: var(--link-color); color: var(--link-color) !important; } html[data-theme="dark"] #buddypress .bp-feedback.success, html[data-theme="dark"] #buddypress .bp-feedback.info { background: rgba(211, 158, 216, 0.1); }