/* CSS Custom Properties (Variables) */ :root { /* Colors */ --bppfa-primary-color: #007cba; --bppfa-primary-color-alpha: rgba(0, 124, 186, 0.1); /* Content */ --bppfa-content-bg-color: #fff; --bppfa-content-border-color: #e5e5e5; /* Text */ --bppfa-text-color: #333; --bppfa-heading-color: #333; --bppfa-placeholder-color: #999; /* Input */ --bppfa-input-bg-color: #f8f9fa; --bppfa-input-border-color: #ddd; --bppfa-input-border-hover-color: #bbb; /* Buttons */ --bppfa-button-bg-color: #007cba; --bppfa-button-bg-hover-color: #005a87; --bppfa-button-text-color: #fff; --bppfa-button-disabled-bg-color: #d1d1d1; /* Feedback */ --bppfa-success-bg-color: #d4edda; --bppfa-success-text-color: #155724; --bppfa-success-border-color: #c3e6cb; --bppfa-error-bg-color: #f8d7da; --bppfa-error-text-color: #721c24; --bppfa-error-border-color: #f5c6cb; /* UI Elements */ --bppfa-divider-color: #eee; --bppfa-spinner-border-color: #f3f3f3; --bppfa-select-arrow: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2714%27%20height%3D%278%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1%201l6%206%206-6%27%20stroke%3D%27%23333%27%20stroke-width%3D%272%27%20fill%3D%27none%27%20fill-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E'); } /* * Dark Mode Support - EXPLICIT theme dark mode only. * * The form follows the theme's explicit dark mode: BuddyX 5.1+, BuddyX Pro 5.1+ * and Reign 8.0+ set , and older stacks use the body * classes buddyx-dark-theme (BuddyX Pro legacy), dark-mode (Reign legacy * wp-dark-mode) and dark-scheme (generic). * * It intentionally does NOT react to the OS/system ("auto") preference - there * is deliberately no @media (prefers-color-scheme: dark) block - so the form * only turns dark when the theme itself is switched to dark. Do not re-add a * prefers-color-scheme override. */ :root[data-bx-mode="dark"], html.dark-mode, body.dark-mode, body.dark-scheme, body.buddyx-dark-theme { --bppfa-primary-color: var(--color-theme-primary, var(--reign-accent-color, #E94560)); /* Match the focus glow to the dark accent (light default is a blue rgba). */ --bppfa-primary-color-alpha: rgba(233, 69, 96, 0.15); --bppfa-content-bg-color: var(--color-theme-white-box, var(--reign-site-sections-bg-color, #1a1a1a)); --bppfa-content-border-color: var(--global-border-color, var(--reign-site-border-color, #333)); --bppfa-text-color: var(--global-font-color, var(--reign-site-body-text-color, #ccc)); --bppfa-heading-color: var(--global-title-color, var(--reign-site-headings-color, #fff)); --bppfa-placeholder-color: var(--color-meta, var(--reign-site-alternate-text-color, #999)); --bppfa-input-bg-color: var(--global-body-lightcolor, var(--reign-site-secondary-bg-color, #2a2a2a)); --bppfa-input-border-color: var(--global-border-color, var(--reign-site-border-color, #444)); --bppfa-input-border-hover-color: #555; --bppfa-divider-color: var(--color-hr, var(--reign-site-hr-color, #444)); --bppfa-button-bg-color: var(--button-background-color, var(--reign-site-button-bg-color, #E94560)); --bppfa-button-bg-hover-color: var(--button-background-hover-color, var(--reign-site-button-bg-hover-color, #d6334e)); --bppfa-button-disabled-bg-color: #3a3a3a; --bppfa-success-bg-color: #14331d; --bppfa-success-text-color: #a3d9b1; --bppfa-success-border-color: #2d5a36; --bppfa-error-bg-color: #40161c; --bppfa-error-text-color: #f1aeb5; --bppfa-error-border-color: #842029; --bppfa-spinner-border-color: #444; --bppfa-select-arrow: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2714%27%20height%3D%278%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1%201l6%206%206-6%27%20stroke%3D%27%23ccc%27%20stroke-width%3D%272%27%20fill%3D%27none%27%20fill-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E'); } /* * Context notices rendered by the shortcode when the form can't show (logged * out, BuddyPress inactive, activity component off, no permission). Token-driven * so they follow the theme in light AND explicit dark, instead of the old * hardcoded light inline styles. Scoped under #bppfa-buddypress like everything * else so they never leak onto native BuddyPress markup. */ #bppfa-buddypress .bppfa-notice { text-align: center; padding: 20px; border-radius: 8px; background: var(--bppfa-input-bg-color, #f8f9fa); color: var(--bppfa-text-color, #555); border-left: 4px solid var(--bppfa-primary-color, #007cba); } #bppfa-buddypress .bppfa-notice p { margin: 0; color: inherit; } #bppfa-buddypress .bppfa-notice--warning { border-left-color: #ffc107; } #bppfa-buddypress .bppfa-notice--activation { border-left-color: #17a2b8; } #bppfa-buddypress .bppfa-notice--error { border-left-color: #dc3545; } /* * The shortcode form intentionally reuses the native BuddyPress activity * form IDs (whats-new-form, whats-new, whats-new-options, ...) so media * integrations (rtMedia, MediaPress) work. Every rule below is scoped to * the #bppfa-buddypress shortcode wrapper so these styles never leak onto * the native activity composer. */ /* Modern BuddyPress/BuddyBoss compatible styling */ #bppfa-buddypress form#whats-new-form { position: relative; margin: 0 0 20px 0; padding: 20px; background: var(--bppfa-content-bg-color, #fff); border: 1px solid var(--bppfa-content-border-color, #e5e5e5); border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } /* Form content wrapper */ #bppfa-buddypress form#whats-new-form #whats-new-content { clear: both; } #bppfa-buddypress form#whats-new-form:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } /* Theme compatibility */ .bp-nouveau #bppfa-buddypress form#whats-new-form { background: var(--bppfa-content-bg-color, #fff); border-color: var(--bppfa-content-border-color, #e5e5e5); } .buddyboss-theme #bppfa-buddypress form#whats-new-form { background: var(--bb-content-background-color, #fff); border-color: var(--bb-content-border-color, #e5e5e5); } #bppfa-buddypress form#whats-new-form #whats-new-avatar { float: left; margin-right: 15px; width: 50px; height: 50px; flex-shrink: 0; } #bppfa-buddypress form#whats-new-form #whats-new-avatar a { display: block; position: relative; } #bppfa-buddypress form#whats-new-form #whats-new-avatar a::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid transparent; border-radius: 50%; transition: border-color 0.2s; } #bppfa-buddypress form#whats-new-form #whats-new-avatar a:hover::after { border-color: var(--bppfa-primary-color, #007cba); } #bppfa-buddypress form#whats-new-form p.activity-greeting { font-size: 16px; line-height: 1.5; margin-bottom: 15px; margin-left: 65px; color: var(--bppfa-text-color, #333); font-weight: 500; min-height: 50px; display: flex; align-items: center; } .bp-nouveau #bppfa-buddypress form#whats-new-form p.activity-greeting, .buddyboss-theme #bppfa-buddypress form#whats-new-form p.activity-greeting { color: var(--bppfa-heading-color, #333); } #bppfa-buddypress form#whats-new-form textarea { background: var(--bppfa-input-bg-color, #f8f9fa); border: 2px solid transparent; border-radius: 8px; box-sizing: border-box; color: var(--bppfa-text-color, #333); font-family: inherit; font-size: 15px; line-height: 1.5; padding: 12px 16px; width: 100%; min-height: 90px; height: 90px; resize: vertical; transition: all 0.2s ease; outline: none; clear: both; display: block; margin-top: 10px; } #bppfa-buddypress form#whats-new-form textarea:focus { background: var(--bppfa-content-bg-color, #fff); border-color: var(--bppfa-primary-color, #007cba); box-shadow: 0 0 0 3px var(--bppfa-primary-color-alpha, rgba(0, 124, 186, 0.1)); } #bppfa-buddypress form#whats-new-form textarea::placeholder { color: var(--bppfa-placeholder-color, #999); } #bppfa-buddypress div#whats-new-content .quote-btn, #bppfa-buddypress div#whats-new-content .bpstatus-icon { margin-top: 0; } /* Textarea active state */ #bppfa-buddypress form#whats-new-form textarea.active { min-height: 90px; height: 90px; } #bppfa-buddypress #whats-new-options::after { clear: both; content: ""; display: table; } #bppfa-buddypress form#whats-new-form #whats-new-submit { display: flex !important; align-items: center; justify-content: flex-end; gap: 12px; margin: 0; visibility: visible !important; opacity: 1 !important; order: 2; margin-left: auto; } /* Inline feedback message */ .bppfa-feedback-message { display: none; align-items: center; padding: 12px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; animation: slideIn 0.3s ease; margin-bottom: 15px; margin-top: 15px; width: 100%; box-sizing: border-box; } .bppfa-feedback-message.success { background: var(--bppfa-success-bg-color, #d4edda); color: var(--bppfa-success-text-color, #155724); border: 1px solid var(--bppfa-success-border-color, #c3e6cb); } .bppfa-feedback-message.error { background: var(--bppfa-error-bg-color, #f8d7da); color: var(--bppfa-error-text-color, #721c24); border: 1px solid var(--bppfa-error-border-color, #f5c6cb); } .bppfa-feedback-message svg { width: 16px; height: 16px; margin-right: 8px; flex-shrink: 0; } @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } #bppfa-buddypress div#whats-new-options { margin: 12px 0 0 0; padding-top: 12px; border-top: 1px solid var(--bppfa-divider-color, #eee); display: flex !important; flex-flow: row wrap; align-items: center; gap: 12px; animation: fadeIn 0.3s ease; overflow: visible; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Group selector modern styling */ #bppfa-buddypress #whats-new-post-in-box { margin: 0; flex: 0 0 auto; order: 1; } #bppfa-buddypress #whats-new-post-in-box select { width: 100%; min-width: 180px; max-width: 250px; padding: 8px 32px 8px 12px; border: 1px solid var(--bppfa-input-border-color, #ddd); border-radius: 6px; background: var(--bppfa-content-bg-color, #fff) var(--bppfa-select-arrow) no-repeat right 12px center; background-size: 12px; appearance: none; cursor: pointer; font-size: 14px; color: var(--bppfa-text-color, #333); transition: border-color 0.2s; text-align: left; } #bppfa-buddypress #whats-new-post-in-box select:hover { border-color: var(--bppfa-input-border-hover-color, #bbb); } #bppfa-buddypress #whats-new-post-in-box select:focus { outline: none; border-color: var(--bppfa-primary-color, #007cba); box-shadow: 0 0 0 3px var(--bppfa-primary-color-alpha, rgba(0, 124, 186, 0.1)); } #bppfa-buddypress input[type="submit"], #bppfa-buddypress input[type="button"] { background: var(--bppfa-button-bg-color, #007cba); border: none; border-radius: 6px; color: var(--bppfa-button-text-color, #fff); font-size: 14px; font-weight: 500; cursor: pointer; outline: none; text-align: center; text-decoration: none; padding: 10px 24px; transition: all 0.2s ease; position: relative; overflow: hidden; display: inline-block; } #bppfa-buddypress input[type="submit"]:hover, #bppfa-buddypress input[type="button"]:hover { background: var(--bppfa-button-bg-hover-color, #005a87); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } #bppfa-buddypress input[type="submit"]:active, #bppfa-buddypress input[type="button"]:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } #bppfa-buddypress input[type="submit"]:focus-visible, #bppfa-buddypress input[type="button"]:focus-visible { outline: 2px solid var(--bppfa-primary-color, #007cba); outline-offset: 2px; } #bppfa-buddypress input[type="submit"]:disabled, #bppfa-buddypress input[type="button"]:disabled { background: var(--bppfa-button-disabled-bg-color, #d1d1d1); cursor: not-allowed; opacity: 0.7; transform: none; box-shadow: none; } #bppfa-buddypress input[type="submit"].loading::after { content: ''; position: absolute; width: 16px; height: 16px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; border: 2px solid transparent; border-top-color: var(--bppfa-button-text-color, #fff); border-radius: 50%; animation: button-loading-spinner 0.8s linear infinite; } #bppfa-buddypress input[type="submit"].loading { color: transparent; } @keyframes button-loading-spinner { from { transform: rotate(0turn); } to { transform: rotate(1turn); } } #bppfa-buddypress #whats-new-avatar img.avatar { width: 50px; height: 50px; border-radius: 50%; vertical-align: middle; transition: transform 0.2s ease; display: block; } #bppfa-buddypress #whats-new-avatar a:hover img.avatar { transform: scale(1.05); } .bppfa-spinner { display: none; width: 20px; height: 20px; border: 2px solid var(--bppfa-spinner-border-color, #f3f3f3); border-top: 2px solid var(--bppfa-primary-color, #007cba); border-radius: 50%; animation: bppfa-spin 0.8s linear infinite; margin-left: 0; } @keyframes bppfa-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #bppfa-buddypress #whats-new-options .post-elements-buttons-item { margin-right: 10px; margin-top: 10px; display: inline-block; position: relative; vertical-align: middle; line-height: 1; } /* BuddyPress Checkin */ body .bpchk-marker-container { margin-left: 0; } body .bp-checkins.bp-checkin-panel.bp-checkin-panel { width: 100%; margin-left: 0; order: 2; } /* BuddyPress Quote */ body .quote-btn { margin-left: 0; } body.bp-nouveau .bpquotes-bg-selection-div { margin: 0; order: 2; } /* BuddyPress Polls */ body.bp-nouveau .bpolls-polls-option-html.bpolls-polls-option-html { width: 100%; margin-left: 0; margin: 12px 0 0; } /* BuddyPress Status */ .bpstatus-option-panel { width: 100%; order: 2; } /* Media integrations (rtMedia / MediaPress) render inside the options row */ #bppfa-buddypress #whats-new-options .rtmedia-uploader-div, #bppfa-buddypress #whats-new-options #mpp-activity-upload-buttons { order: 1; } #bppfa-buddypress #whats-new-form .rtmedia-plupload-container, #bppfa-buddypress #whats-new-form .mpp-dropzone, #bppfa-buddypress #whats-new-form #mpp-activity-media-list { width: 100%; order: 3; } /* Responsive Design */ @media (max-width: 768px) { #bppfa-buddypress form#whats-new-form { padding: 15px; } #bppfa-buddypress form#whats-new-form #whats-new-avatar { float: none; margin-bottom: 15px; text-align: center; } #bppfa-buddypress form#whats-new-form p.activity-greeting { margin-left: 0; text-align: center; font-size: 15px; min-height: auto; } #bppfa-buddypress form#whats-new-form #whats-new-submit { width: 100%; justify-content: center; } #bppfa-buddypress div#whats-new-options[style*="display: block"] { flex-direction: column !important; gap: 12px; } #bppfa-buddypress #whats-new-post-in-box { max-width: 100%; order: 1; } #bppfa-buddypress input[type="submit"] { width: 100%; } .bppfa-feedback-message { font-size: 13px; margin-bottom: 10px; } #bppfa-buddypress #whats-new-post-in-box select { width: 100%; max-width: 100%; } }