/** * Codex Vivendi - Light Mode Overrides * * ARCHITECTURE: * - Dark mode: 100% controlled by BuddyBoss Theme Options (database). * - Light mode: These overrides activate when data-theme="light" is on . * * We NEVER define :root values. We ONLY override when light mode is active. * * To change light mode colors, edit the hex values below. * * @package Codex_Vivendi_Core * @since 1.0.0 */ /* ========================================================================== LIGHT MODE - BuddyBoss Variable Overrides ========================================================================== */ html[data-theme="light"] { /* Backgrounds ---------------------------------------- */ --bb-body-background-color: #FDFCF9; --bb-body-background-color-rgb: 253, 252, 249; --bb-content-background-color: #FFFFFF; --bb-content-alternate-background-color: #F8F6F1; --bb-cover-image-background-color: #F8F6F1; /* Borders ---------------------------------------- */ --bb-content-border-color: #E2DFD6; --bb-content-border-color-rgb: 226, 223, 214; /* Typography ---------------------------------------- */ --bb-headings-color: #1B2436; --bb-headings-color-rgb: 27, 36, 54; --bb-body-text-color: #4A5568; --bb-body-text-color-rgb: 74, 85, 104; --bb-alternate-text-color: #374151; --bb-alternate-text-color-rgb: 55, 65, 81; /* Secondary Buttons (Gold Outline) ---------------------------------------- */ --bb-secondary-button-background-regular: #FFFFFF; --bb-secondary-button-background-hover: #C5A059; --bb-secondary-button-text-hover: #FFFFFF; /* Tooltips ---------------------------------------- */ --bb-tooltip-background: #1B2436; --bb-tooltip-background-rgb: 27, 36, 54; --bb-tooltip-color: #FFFFFF; /* Labels ---------------------------------------- */ --bb-label-background-color: #2A9D8F; --bb-label-text-color: #FFFFFF; /* Custom CV Variables (used by child theme Tailwind config) ---------------------------------------- */ --cv-cream: #F8F6F1; --cv-cream-dark: #F0EDE6; } /* ========================================================================== COMPONENT-SPECIFIC OVERRIDES Some BuddyBoss components need explicit fixes in light mode. ========================================================================== */ html[data-theme="light"] .activity-list .activity-item { background-color: var(--bb-content-background-color); border-color: var(--bb-content-border-color); } /* Widgets: match post card styling in light mode */ html[data-theme="light"] .widget-area .widget { background-color: var(--bb-content-background-color); border-color: var(--bb-content-border-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } html[data-theme="light"] .bp-messages-content { background-color: var(--bb-content-background-color); } /* ========================================================================== HEADER BAR - Keep light text on dark header The header stays dark in light mode. Force username + arrow to stay light. DOM: .user-wrap > a.user-link > .user-name / .bb-icon-angle-down ========================================================================== */ html[data-theme="light"] .header-aside .user-wrap > a.user-link .user-name { color: #F1F0EA !important; } html[data-theme="light"] .header-aside .user-wrap > a.user-link .bb-icon-angle-down { color: #F1F0EA !important; } /* User-link hover ::before — BB uses --bb-content-alternate-background-color which changes in light mode. Override to use header-specific variable in both modes. */ .site-header .user-wrap.menu-item-has-children > .user-link:hover:before, .site-header .user-wrap.menu-item-has-children.selected > .user-link:before { background-color: var(--bb-header-alternate-background) !important; } /* ========================================================================== USER DROPDOWN MENU - Light Mode Fixes Direct color overrides (not relying on variable cascade). BB DOM: .user-wrap > .sub-menu > .wrapper > ul.sub-menu-inner ========================================================================== */ html[data-theme="light"] .site-header .header-aside .user-wrap .sub-menu, html[data-theme="light"] .site-header .header-aside .user-wrap .sub-menu .wrapper { background-color: #FFFFFF !important; border-color: #C5A059 !important; } html[data-theme="light"] .site-header .sub-menu span.user-name, html[data-theme="light"] .site-header .sub-menu-inner .user-name { color: #1B2436 !important; } html[data-theme="light"] .site-header .sub-menu .user-mention { color: #718096 !important; } html[data-theme="light"] .site-header .sub-menu-inner a, html[data-theme="light"] .site-header .sub-menu-inner li a { color: #1B2436 !important; } html[data-theme="light"] .site-header .sub-menu-inner a:hover { color: #C5A059 !important; background-color: #F8F6F1 !important; } html[data-theme="light"] .site-header .sub-menu-inner a i, html[data-theme="light"] .site-header .sub-menu-inner a .bb-icon-l { color: #4A5568 !important; } html[data-theme="light"] .site-header .sub-menu-inner a:hover i, html[data-theme="light"] .site-header .sub-menu-inner a:hover .bb-icon-l { color: #C5A059 !important; } /* ========================================================================== DROPDOWNS & POPUPS - Light Mode Softer shadows, warm gold borders, cream hover backgrounds. ========================================================================== */ /* Activity three-dots dropdown */ html[data-theme="light"] .bb-activity-more-options.open { background-color: #FFFFFF !important; border: 1px solid #C5A059 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; } /* Share dropdown */ html[data-theme="light"] .buddyboss-share-dropdown { background-color: #FFFFFF !important; border: 1px solid #C5A059 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; } html[data-theme="light"] .buddyboss-share-dropdown .share-dropdown-item, html[data-theme="light"] .buddyboss-share-dropdown .share-dropdown-item span { color: #4A5568 !important; } html[data-theme="light"] .buddyboss-share-dropdown .share-dropdown-item i { color: #4A5568 !important; } html[data-theme="light"] .buddyboss-share-dropdown .share-dropdown-item:hover, html[data-theme="light"] .buddyboss-share-dropdown .share-dropdown-item:active { color: #C5A059 !important; background-color: #F8F6F1 !important; } html[data-theme="light"] .buddyboss-share-dropdown .share-dropdown-item:hover i, html[data-theme="light"] .buddyboss-share-dropdown .share-dropdown-item:active i { color: #C5A059 !important; } /* More options dropdown (Report/Block) */ html[data-theme="light"] .bb_more_options_list.bb_more_dropdown { background-color: #FFFFFF !important; border: 1px solid #C5A059 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; } /* Header search overlay */ html[data-theme="light"] .header-search-wrap { background: #FDFCF9 !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] .header-search-wrap input.search-field, html[data-theme="light"] .header-search-wrap .search-field-top { background-color: #FFFFFF !important; border: 1px solid rgba(197, 160, 89, 0.4) !important; color: #1B2436 !important; } html[data-theme="light"] .header-search-wrap input.search-field::placeholder { color: rgba(74, 85, 104, 0.5) !important; } /* Search results */ html[data-theme="light"] .bp-search-ac-header, html[data-theme="light"] .bp-search-ac { background-color: #FFFFFF !important; border: 1px solid rgba(197, 160, 89, 0.2) !important; } html[data-theme="light"] .bp-search-ac-header > li, html[data-theme="light"] .bp-search-ac > li { border-color: #E2DFD6 !important; } html[data-theme="light"] .bp-search-ac-header > li:hover, html[data-theme="light"] .bp-search-ac > li:hover { background-color: #F8F6F1 !important; } /* Notification settings mobile dropdown */ html[data-theme="light"] .bb-mobile-setting .bb-mobile-setting-anchor { background-color: #FFFFFF !important; color: #C5A059 !important; border: 1px solid #C5A059 !important; } html[data-theme="light"] .bb-mobile-setting ul { background-color: #FFFFFF !important; border: 1px solid #C5A059 !important; } /* Registration page divider — warm grey instead of white */ html[data-theme="light"] #register-page .bp-feedback.info p strong { border-top-color: #E2DFD6; } /* ========================================================================== HIDE BUDDYBOSS NATIVE DARK MODE TOGGLE We use our own toggle instead. ========================================================================== */ .bb-toggle-darkmode, .dark-mode-toggle-wrap, li.dark-mode-toggle-wrap { display: none !important; } /* ========================================================================== TOGGLE BUTTON STYLES - Header Icon Row ========================================================================== */ /* Reset BB global button styles — our toggle is a