/** * BuddyPress Favorite Notification - Core Styles * * ONLY styles for plugin-specific elements * Does NOT modify theme or BuddyPress elements * * This file is the shared style dependency of favorite-display.css and * realtime.css, so it owns the plugin's --bpfn-* design tokens. */ /* ======================================== Design tokens (--bpfn-*) Theme-aware: BuddyX / BuddyX Pro publish --bx-color-* custom properties on :root and flip them per color mode, so we consume those with literal fallbacks. Reign 8.0.3 sets data-bx-mode on the root element but does NOT define the --bx-color-* variables, which means the fallback literal is what actually renders there. The dark-scoped blocks below therefore use DARK-appropriate fallback literals - never the light values - otherwise Reign dark mode renders light-gray-on-dark-navy text. ======================================== */ :root { --bpfn-surface: var(--bx-color-bg-elevated, #ffffff); --bpfn-surface-hover: var(--bx-color-bg-muted, #f5f5f5); --bpfn-text: var(--bx-color-fg, #333333); --bpfn-text-muted: var(--bx-color-fg-muted, #666666); --bpfn-border: var(--bx-color-border, #e0e0e0); --bpfn-link: var(--bx-color-link, var(--wp--preset--color--primary, #1d84b5)); /* Heart follows the theme brand accent (BuddyX, then Reign, then a block-theme preset) and only lands on the pink literal when the theme publishes nothing. */ --bpfn-heart: var(--bx-color-accent, var(--reign-colors-theme, var(--wp--preset--color--primary, #ff4458))); /* Brand accent scale shared by the realtime toasts + notification count badge. Each chains through the active theme's palette and only falls back to the plugin's own literal when the theme defines nothing - so favorite / comment / mention keep three distinct hues on every theme. */ --bpfn-primary-color: var(--bx-color-accent, var(--wp--preset--color--primary, #ff7b00)); --bpfn-secondary-color: var(--bx-color-link, var(--wp--preset--color--secondary, #1d84b5)); --bpfn-tertiary-color: var(--bx-color-accent-secondary, #8b5cf6); /* Overlay stacking for the fixed realtime toast container. */ --bpfn-z-index-notification: 9999; } /* Manual dark toggle (BuddyX/Reign set data-bx-mode="dark" on ). */ :root[data-bx-mode="dark"] { --bpfn-surface: var(--bx-color-bg-elevated, #1f2430); --bpfn-surface-hover: var(--bx-color-bg-muted, #2a3040); --bpfn-text: var(--bx-color-fg, #e4e6eb); --bpfn-text-muted: var(--bx-color-fg-muted, #a0a0a0); --bpfn-border: var(--bx-color-border, #3b4254); --bpfn-link: var(--bx-color-link, #7cb8e0); } /* ======================================== Notification Count Badge Used in BuddyPress notification areas only ======================================== */ .bpfn-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background-color: var(--bpfn-primary-color, #ff7b00); color: var(--bx-color-fg-inverse, #ffffff); font-size: 11px; font-weight: bold; border-radius: 10px; margin-inline-start: 5px; } /* ======================================== Loading States (for AJAX operations) ======================================== */ .bpfn-loading { opacity: 0.6; pointer-events: none; position: relative; }