:root { /* RebelSLP Colours The following colours are here as a reference ONLY and should not be used as HEX values in CSS. Below the colours is a list of BuddyBoss CSS variables as configured in https://prod.rebelslp.ca/wp-admin/admin.php?page=buddyboss_theme_options and the BuddyBoss vars should be used for all css unless the colour you require is not used by BuddyBoss and therefore not available as a BuddyBoss CSS cariable (this is noted in the colour list). CSS usage rules: - All custom CSS must use variables for all shared values - almost NOTHING should be hardcoded in any custom CSS file. - If a colour is used by BuddyBoss (doesn't have Not Used in BuddyBoss below) you MUST use the BuddyBoss var. - If a colour is NOT used by BuddyBoss you may uncomment the appropreate colour in the RebelSLP Custom CSS Variables section below and use that instead. - If the variable you are looking for is not a colour (borders, font size, tooltips, backgrounds, etc.) you should use a BuddyBoss variable if one is close enough to work. If BuddyBoss doesn't have a close enough variable for you only then may you add the appropreate variable in RebelSLP Custom CSS Variables below. Blue: rebelslp-primary: #1a73d9; rebelslp-primary-shade20: #155cae; rebelslp-primary-shade40: #104582; rebelslp-primary-tint20: #488fe1; <- Not Used in BuddyBoss rebelslp-primary-tint40: #76abe8; Green: rebelslp-secondary: #24c2a8; rebelslp-secondary-shade20: #1d9b86; <- Not Used in BuddyBoss rebelslp-secondary-shade40: #167465; <- Not Used in BuddyBoss rebelslp-secondary-tint20: #50ceb9; <- Not Used in BuddyBoss rebelslp-secondary-tint40: #7cdacb; <- Not Used in BuddyBoss Orange: rebelslp-tertiary: #bf884a; rebelslp-tertiary-shade20: #996d3b; <- Not Used in BuddyBoss rebelslp-tertiary-shade40: #73522c; <- Not Used in BuddyBoss rebelslp-tertiary-tint20: #cca06e; <- Not Used in BuddyBoss rebelslp-tertiary-tint40: #d9b892; <- Not Used in BuddyBoss Red: rebelslp-error: #bf4d4c; rebelslp-error-shade20: #993e3d; <- Not Used in BuddyBoss rebelslp-error-shade40: #732e2e; <- Not Used in BuddyBoss rebelslp-error-tint20: #cc7170; <- Not Used in BuddyBoss rebelslp-error-tint40: #d99494; <- Not Used in BuddyBoss */ /* RebelSLP Custom CSS Variables Uncomment variables below ONLY if needed. The colours below are not available via BuddyBoss vars as of Feb 2023. */ /* --rebelslp-primary-tint20: #488fe1;*/ /* --rebelslp-secondary-shade20: #1d9b86;*/ /* --rebelslp-secondary-shade40: #167465;*/ /* --rebelslp-secondary-tint20: #50ceb9;*/ /* --rebelslp-secondary-tint40: #7cdacb;*/ /* --rebelslp-tertiary-shade20: #996d3b;*/ /* --rebelslp-tertiary-shade40: #73522c;*/ /* --rebelslp-tertiary-tint20: #cca06e;*/ /* --rebelslp-tertiary-tint40: #d9b892;*/ /* --rebelslp-error-shade20: #993e3d;*/ /* --rebelslp-error-shade40: #732e2e;*/ /* --rebelslp-error-tint20: #cc7170; */ /* --rebelslp-error-tint40: #d99494;*/ /* BuddyBoss Variables: To find the current value of these variables: Go to any front-end page on the site and right-click -> Inspect. Go to the Elements tab if needed, and ensure the Styles tab is selected on the right pane of this tab. Scroll down until you see the variables below. They are about 2/3rds down on most pages. You should see this exact set of variables except with values. Use this to help you decide which BuddyBoss var to use. --bb-primary-color --bb-primary-color-rgb --bb-body-background-color --bb-body-background-color-rgb --bb-content-background-color --bb-content-alternate-background-color --bb-content-border-color --bb-content-border-color-rgb --bb-cover-image-background-color --bb-headings-color --bb-headings-color-rgb --bb-body-text-color --bb-body-text-color-rgb --bb-alternate-text-color --bb-alternate-text-color-rgb --bb-primary-button-background-regular --bb-primary-button-background-hover --bb-primary-button-border-regular --bb-primary-button-border-hover --bb-primary-button-text-regular --bb-primary-button-text-regular-rgb --bb-primary-button-text-hover --bb-primary-button-text-hover-rgb --bb-secondary-button-background-regular --bb-secondary-button-background-hover --bb-secondary-button-border-regular --bb-secondary-button-border-hover --bb-secondary-button-text-regular --bb-secondary-button-text-hover --bb-header-background --bb-header-alternate-background --bb-header-links --bb-header-links-hover --bb-header-mobile-logo-size --bb-header-height --bb-sidenav-background --bb-sidenav-text-regular --bb-sidenav-text-hover --bb-sidenav-text-active --bb-sidenav-menu-background-color-regular --bb-sidenav-menu-background-color-hover --bb-sidenav-menu-background-color-active --bb-sidenav-count-text-color-regular --bb-sidenav-count-text-color-hover --bb-sidenav-count-text-color-active --bb-sidenav-count-background-color-regular --bb-sidenav-count-background-color-hover --bb-sidenav-count-background-color-active --bb-footer-background --bb-footer-widget-background --bb-footer-text-color --bb-footer-menu-link-color-regular --bb-footer-menu-link-color-hover --bb-footer-menu-link-color-active --bb-admin-screen-bgr-color --bb-admin-screen-txt-color --bb-login-register-link-color-regular --bb-login-register-link-color-hover --bb-login-register-button-background-color-regular --bb-login-register-button-background-color-hover --bb-login-register-button-border-color-regular --bb-login-register-button-border-color-hover --bb-login-register-button-text-color-regular --bb-login-register-button-text-color-hover --bb-label-background-color --bb-label-text-color --bb-tooltip-background --bb-tooltip-background-rgb --bb-tooltip-color --bb-default-notice-color --bb-default-notice-color-rgb --bb-success-color --bb-success-color-rgb --bb-warning-color --bb-warning-color-rgb --bb-danger-color --bb-danger-color-rgb --bb-login-custom-heading-color --bb-button-radius --bb-block-radius --bb-option-radius --bb-block-radius-inner --bb-input-radius --bb-label-type-radius --bb-checkbox-radius --bb-primary-button-focus-shadow --bb-secondary-button-focus-shadow --bb-outline-button-focus-shadow --bb-input-focus-shadow --bb-input-focus-border-color */ /* * RebelSLP Custom Variables */ }