/** * The Events Calendar v2 Design Style Resets & Fixes * Version: 2.1.0 * Details: https://github.com/mrwweb/the-events-calendar-reset * * # What this file does * * This file remaps a number of TEC custom properties to use equivalent default values from WordPress. * This will give your site consistent colors, spacing, font sizing, etc. based on common theme.json properties. * Fallbacks to the original TEC values are always provided, so there will always be a valid property value. * * # How to use this file * * 1. Review the "REMAP" sections. You may need to update custom property names to match your theme.json. Better yet, try to follow theme.json color/size conventions so this file "just works". * * 2. Review the "OPTIONAL" sections. Either customize the custom properties to match your them -OR- delete these sections. Why delete? Because they are the default TEC values and so are unnecessary. */ body { /* Hippo Colors for TEC admin */ --tec-admin-core-grey-80: #f2f2f2; --tec-admin-core-grey-50: #e5e5e5; --tec-admin-core-grey-20: #c8c8c8; --tec-admin-core-grey-10: #767676; --tec-admin-core-grey-5: #424242; /* end Hippo Colors for TEC admin */ /* REMAP base colors to WP presets */ --tec-color-background: var(--wp--preset--color--background, #01284d); --tec-color-text-primary: var(--ast-global-color-0, #fff); --tec-color-text-event-title: var(--ast-global-color-3, #fff); --tec-color-accent-primary: var(--ast-global-color-6, #a0bace); --tec-color-link-primary: var( --ast-global-color-6: , var( --tec-color-text-primary, ) ); --tec-color-accent-primary-hover: var( --wp--preset--color--accent, rgba(51, 74, 255, 0.8) ); --tec-color-button-primary: var( --ast-global-color-6: , var( --tec-color-text-primary, ) ); --tec-color-accent-primary-active: var( --wp--preset--color--accent, rgba(51, 74, 255, 0.8) ); --tec-color-link-accent: var(--ast-global-color-6: ); --tec-color-link-accent-hover: var( --ast-global-color-6: , rgba( 51, 74, 255, 0.8, ) ); --tec-color-background-events-bar-submit-button: var(--ast-global-color-6: ); /* OPTIONAL additional colors (showing TEC defaults) */ --tec-color-accent-primary-background: rgba(51, 74, 255, 0.07); --tec-color-accent-secondary: #141827; --tec-color-accent-secondary-hover: rgba(20, 24, 39, 0.8); --tec-color-accent-secondary-active: rgba(20, 24, 39, 0.9); --tec-color-accent-secondary-background: rgba(20, 24, 39, 0.07); --tec-color-background-events: transparent; --tec-color-background-transparent: hsla(0, 0%, 100%, 0.6); --tec-color-background-secondary: #f7f6f6; --tec-color-background-messages: rgba(20, 24, 39, 0.07); --tec-color-background-secondary-hover: #f0eeee; --tec-color-background-error: rgba(218, 57, 77, 0.08); --tec-color-text-primary-light: #fff; /* rgba(20, 24, 39, 0.62); */ --tec-color-text-secondary: var(--tec-color-accent-primary); --tec-color-text-disabled: var(--ast-global-color-4); /* OPTIONAL border radius (showing TEC defaults) */ --tec-border-radius-default: 4px; /* Remap font sizes to WP presets */ /* Note: type scale is slightly collapsed to accommodate the number of default spacing presets along with some calculations to interpolate sizes */ /* You are strongly encouraged to define font-sizes in ems or rems for better accessibility! */ --tec-font-size-0: calc(var(--wp--preset--font-size--small, 14px) - 3px); --tec-font-size-1: calc(var(--wp--preset--font-size--small, 14px) - 2px); --tec-font-size-2: var(--wp--preset--font-size--small, 14px); --tec-font-size-3: var(--wp--preset--font-size--normal, 16px); --tec-font-size-4: var(--wp--preset--font-size--medium, 18px); --tec-font-size-5: var(--wp--preset--font-size--medium, 20px); --tec-font-size-6: var(--wp--preset--font-size--medium, 22px); --tec-font-size-7: calc(var(--wp--preset--font-size--medium, 20px) + 4px); --tec-font-size-8: var(--wp--preset--font-size--large, 28px); --tec-font-size-9: var(--wp--preset--font-size--large, 32px); --tec-font-size-10: var(--wp--preset--font-size--x-large, 42px); /* OPTIONAL Typography (showing TEC defaults) */ --tec-font-family-sans-serif: 'Helvetica Neue', Helvetica, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; --tec-font-weight-regular: 400; --tec-font-weight-bold: 700; --tec-line-height-0: 1.38; --tec-line-height-1: 1.42; --tec-line-height-2: 1.5; --tec-line-height-3: 1.62; /* REMAP spacing to WP presets */ /* Note: spacing scale is slightly collapsed to accommodate the number of default spacing presets */ --tec-spacer-0: var( --wp--preset--spacing--10, calc(var(--wp--preset--spacing--20) / 2), 4px ); --tec-spacer-1: var(--wp--preset--spacing--20, 8px); --tec-spacer-2: var(--wp--preset--spacing--30, 12px); --tec-spacer-3: var(--wp--preset--spacing--40, 16px); --tec-spacer-4: var(--wp--preset--spacing--40, 20px); --tec-spacer-5: var(--wp--preset--spacing--50, 24px); --tec-spacer-6: var(--wp--preset--spacing--50, 28px); --tec-spacer-7: var(--wp--preset--spacing--60, 32px); --tec-spacer-8: var(--wp--preset--spacing--60, 40px); --tec-spacer-9: var(--wp--preset--spacing--70, 48px); --tec-spacer-10: var(--wp--preset--spacing--70, 56px); --tec-spacer-11: calc( ( var(--wp--preset--spacing--70, 56px) + var(--wp--preset--spacing--80, 80px) ) / 2 ); /* Average of 70 and 80 */ --tec-spacer-12: var(--wp--preset--spacing--80, 80px); --tec-spacer-13: var( --wp--preset--spacing--90, calc(var(--wp--preset--spacing--80, 80px) * 1.2) ); --tec-spacer-14: var( --wp--preset--spacing--100, calc(var(--wp--preset--spacing--80, 80px) * 2) ); /* REMAP gutters to WP presets */ --tec-grid-gutter: var(--wp--style--block-gap, 48px); --tec-grid-gutter-small: var(--wp--style--block-gap, 42px); /* You probably want to adjust the small size, they're the same otherwise */ --tec-grid-gutter-page: var( --wp--style--block-gap, var(--tec-grid-gutter-small) ); --tec-grid-gutter-page-small: calc(var(--tec-grid-gutter-page) / 2); /* REMAP Layout sizes */ --tec-grid-width-default: var(--wp--style--global--wide-size, 1176px); /* OPTIONAL shadows (showing TEC defaults) */ --tec-color-box-shadow: rgba(0, 0, 0, 0.14); --tec-color-box-shadow-secondary: rgba(0, 0, 0, 0.1); --tec-box-shadow-default: 0 2px 5px 0 var(--tec-color-box-shadow); --tec-box-shadow-tooltip: 0 2px 12px 0 var(--tec-color-box-shadow); --tec-box-shadow-card: 0 1px 6px 2px var(--tec-color-box-shadow); --tec-box-shadow-multiday: 16px 6px 6px -2px var(--tec-color-box-shadow-secondary); /* REMAP Icon Colors to WP presets */ --tec-color-icon-primary: var(--ast-global-color-6: , #5d5d5d); /* OPTIONAL Icon Colors (showing TEC defaults) */ --tec-color-icon-primary-alt: #757575; --tec-color-icon-secondary: #bababa; --tec-color-icon-active: #141827; --tec-color-icon-disabled: #d5d5d5; --tec-color-icon-focus: #a0bace; --tec-color-icon-error: #da394d; --tec-color-event-icon: #141827; --tec-color-event-icon-hover: #a0bace; /* OPTIONAL border colors (showing TEC defaults) */ --tec-color-border-default: #d5d5d5; --tec-color-border-secondary: #e4e4e4; --tec-color-border-tertiary: #7d7d7d; --tec-color-border-hover: #5d5d5d; --tec-color-border-active: #141827; /* OPTIONAL transitions (showing TEC defaults customized for easier modification) */ --my-transition-timing: 0.2s; --tec-transition: all var(--my-transition-timing) ease; --tec-transition-background-color: background-color var(--my-transition-timing) ease; --tec-transition-color-border-color: color 0.2s ease, border-color var(--my-transition-timing) ease; --tec-transition-transform: transform var(--my-transition-timing) ease; --tec-transition-border-color: border-color var(--my-transition-timing) ease; --tec-transition-color: color var(--my-transition-timing) ease; --tec-transition-opacity: opacity var(--my-transition-timing) ease; } .tribe_events_page_tec-events-settings #tec-settings-form, .tribe_events_page_tec-events-settings .tec-settings-form, .tribe_events_page_tec-events-settings .tec-settings-form__sidebar > .tec-settings-form__sidebar-section { color: var(--tec-admin-core-grey-80); h3 { color: var(--tec-admin-core-grey-50); } } .tribe_events_page_tec-events-settings .tribe_settings.wrap h1 { color: var(--tec-admin-core-grey-50); }