upskill-event-manager/assets/css/customizer-style.css
Ben Reed cdc5ea85f4 feat: Add comprehensive CSS, JavaScript and theme asset infrastructure
Add massive collection of CSS, JavaScript and theme assets that were previously excluded:

**CSS Files (681 total):**
- HVAC plugin-specific styles (hvac-*.css): 34 files including dashboard, certificates, registration, mobile nav, accessibility fixes, animations, and welcome popup
- Theme framework files (Astra, builder systems, layouts): 200+ files
- Plugin compatibility styles (WooCommerce, WPForms, Elementor, Contact Form 7): 150+ files
- WordPress core and editor styles: 50+ files
- Responsive and RTL language support: 200+ files

**JavaScript Files (400+ total):**
- HVAC plugin functionality (hvac-*.js): 27 files including menu systems, dashboard enhancements, profile sharing, mobile responsive features, accessibility, and animations
- Framework and library files: jQuery plugins, GSAP, AOS, Swiper, Chart.js, Lottie, Isotope
- Plugin compatibility scripts: WPForms, WooCommerce, Elementor, Contact Form 7, LifterLMS
- WordPress core functionality: customizer, admin, block editor compatibility
- Third-party integrations: Stripe, SMTP, analytics, search functionality

**Assets:**
- Certificate background images and logos
- Comprehensive theme styling infrastructure
- Mobile-responsive design systems
- Cross-browser compatibility assets
- Performance-optimized minified versions

**Updated .gitignore:**
- Fixed asset directory whitelisting patterns to properly include CSS/JS/images
- Added proper directory structure recognition (!/assets/css/, !/assets/js/, etc.)
- Maintains security by excluding sensitive files while including essential assets

This commit provides the complete frontend infrastructure needed for:
- Full theme functionality and styling
- Plugin feature implementations
- Mobile responsiveness and accessibility
- Cross-browser compatibility
- Performance optimization
- Developer workflow support
2025-08-11 16:20:31 -03:00

591 lines
15 KiB
CSS

/* Customizer Scroll CSS */
.accordion-section-content::-webkit-scrollbar, .wp-full-overlay-sidebar-content::-webkit-scrollbar {
width: 6px;
background-color: #f1f1f1;
}
.accordion-section-content::-webkit-scrollbar-thumb, .wp-full-overlay-sidebar-content::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #d8d8d8;
}
.accordion-section-content::-webkit-scrollbar-track, .wp-full-overlay-sidebar-content::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.3);
width: 6px;
}
.wp-full-overlay-sidebar:after {
display: none;
}
#customize-theme-controls .control-section-ast-section-separator {
margin-top: 15px;
border-top: 1px solid #ddd;
display: block !important;
}
.customize-control:not(.customize-control-nav_menu_item) {
position: relative;
margin-bottom: 0;
margin-top: 16px;
}
.customize-control.customize-control-ast-color, .customize-control.customize-control-ast-color-group, .customize-control-ast-responsive-background, .customize-control-ast-background {
display: flex;
align-items: center;
min-height: 28px;
flex-wrap: wrap;
}
.customize-control-ast-responsive-background label {
white-space: nowrap;
}
.customize-control .media-position-setting label.components-text {
text-transform: capitalize;
font-size: 12px;
font-weight: 400;
}
.media-position-setting .astra-popover-tabs .components-tab-panel__tabs {
padding-left: 0;
padding-right: 0;
}
.customize-control[ID*="-builder-layout-ast-context-tabs"] {
margin-top: 0;
}
[ID*="-builder-layout-ast-context-tabs"] {
margin-top: 10px;
}
.customize-section-title {
margin: -12px -24px 0 -24px;
}
.customize-section-description-container, #customize-controls .customize-info.section-meta, #customize-controls .customize-info {
margin-bottom: 0;
}
#customize-controls #sub-accordion-panel-nav_menus .customize-info {
margin-bottom: 15px;
}
#customize-control-astra-settings-header-transparent-link-heading {
margin-top: 15px;
}
#customize-controls .components-base-control .components-base-control__field {
margin-bottom: 0;
}
#customize-controls .components-base-control .components-base-control__field .components-input-control__backdrop {
border-color: #D1D5DB !important;
}
.customize-control .customize-inside-control-row {
padding-top: 0;
padding-bottom: 0;
}
.customize-control-title {
display: inline-block;
margin-bottom: 16px;
vertical-align: middle;
}
.customize-control-ast-color .customize-control-title, .customize-control-ast-responsive-background .customize-control-title,
.customize-control-ast-background .customize-control-title, .customize-control-ast-responsive-color .customize-control-title {
display: contents;
}
.customize-control .ast-control-tooltip {
position: absolute;
top: 0;
right: 0;
color: var(--ast-customizer-color-6);
cursor: help;
}
.customize-control .ast-control-tooltip:hover {
color: var(--ast-customizer-color-1);
}
.customize-control.customize-control-ast-responsive-background .ast-control-tooltip {
top: 50%;
right: 36px;
transform: translateY(-50%);
}
.customize-control.customize-control-ast-responsive-background:has(.ast-color-btn-reset-wrap) .ast-control-tooltip {
right: 60px;
}
.customize-control.customize-control-ast-toggle-control .ast-control-tooltip {
position: absolute;
top: 50%;
right: 40px;
transform: translateY(-50%);
z-index: 1;
}
#customize-control-astra-settings-learndash-distraction-free-learning .ast-control-tooltip {
padding-top: 32px;
}
.customize-control.customize-control-ast-toggle-control.ast-top-dotted-divider .ast-control-tooltip {
position: absolute;
top: 55%;
right: 40px;
transform: translateY(0);
}
.customize-control-ast-selector.customize-control .ast-control-tooltip {
top: -3px;
}
.customize-control.customize-control-ast-toggle-control.ast-top-divider .ast-control-tooltip {
top: calc(50% + 15px);
}
.customize-control.customize-control-ast-toggle-control.ast-bottom-divider .ast-control-tooltip {
top: calc(50% - 11px);
}
.customize-control.customize-control-ast-toggle-control .ast-description-enabled .components-form-toggle {
margin-left: 25px;
}
.customize-control.customize-control-ast-divider .ast-control-tooltip {
position: absolute;
top: auto;
bottom: 3px;
right: 0;
}
.ast-fields-wrap .customize-control .ast-control-tooltip {
right: 15px;
top: 6px;
}
.customize-control .ast-sortable-subfields-wrap .ast-control-tooltip {
position: absolute !important;
top: 40%;
right: 0px;
transform: translateY(-50%);
z-index: 1;
}
.customize-control .ast-sortable-subfields-wrap .customize-control-ast-toggle .ast-control-tooltip {
right: 30px;
top: 50%;
}
.ast-top-dotted-divider .dashicons-editor-help[data-title]:hover ~ .ast-dashicons-custom-tooltip,
.ast-top-section-divider .dashicons-editor-help[data-title]:hover ~ .ast-dashicons-custom-tooltip {
top: 24px;
}
/* Select2 WP 5.3 compatibility */
.customize-control .select2-search input[type="text"].select2-search__field {
min-height: 17px;
}
input[type="text"].select2-search__field {
line-height: 1;
border-radius: 0;
}
/* CSS for a Description as a Notice. */
.ast-customizer-notice {
margin: 0 -12px;
padding: 12px;
}
/* CSS to show popups without scroll */
#customize-theme-controls .control-section.open {
height: 100%;
padding: 12px 24px 25px 24px;
}
/* Safari Browser specific CSS */
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) {
#customize-control-astra-settings-ast-header-responsive-logo-width .wrapper {
display: inline-block;
width: 100%;
}
.dashicons-desktop:before, .dashicons-tablet:before, .dashicons-smartphone:before {
color: #000000;
opacity: .75;
}
.ast-reset-btn.components-button svg {
padding: 0px;
height: 13px;
}
}
}
/* Firefox Browser specific CSS */
@-moz-document url-prefix() {
.control-section.open .customize-control:last-child {
margin-bottom: 20px;
}
}
/* IE Browser specific CSS */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.control-section.open .customize-control:last-child {
padding-bottom: 20px;
}
#customize-control-astra-settings-blog-archive-image-width .customize-control-title, #customize-control-astra-settings-blog-archive-image-height .customize-control-title, #customize-control-astra-settings-blog-single-post-image-width .customize-control-title, #customize-control-astra-settings-blog-single-post-image-height .customize-control-title {
margin-left: 0px;
margin-right: 20px;
}
}
.wp-customizer li:not(.customize-control-sidebar_block_editor) h1,
.wp-customizer li:not(.customize-control-sidebar_block_editor) h2,
.wp-customizer li:not(.customize-control-sidebar_block_editor) h3,
.wp-customizer li:not(.customize-control-sidebar_block_editor) h4,
.wp-customizer li:not(.customize-control-sidebar_block_editor) h5,
.wp-customizer li:not(.customize-control-sidebar_block_editor) h6 {
font-weight: 600;
}
/* Customizer - widget appender bottom space CSS */
.block-list-appender {
margin-bottom: 20px;
}
.block-editor-block-inspector .block-editor-block-card {
margin-top: 12px;
}
/* Customizer - builder widget area's block gets round shapes in more-settings tab */
.components-circular-option-picker__option-wrapper::before {
background: unset;
}
.block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper {
position: relative;
}
/* Hiding this specific control on responsive devices. */
.preview-tablet #customize-control-astra-settings-woo-desktop-cart-flyout-width {
display: none;
}
.preview-tablet #customize-control-astra-settings-woo-desktop-cart-flyout-direction {
display: none;
}
.preview-mobile #customize-control-astra-settings-woo-desktop-cart-flyout-width {
display: none;
}
.preview-mobile #customize-control-astra-settings-woo-desktop-cart-flyout-direction {
display: none;
}
#customize-theme-controls .accordion-section-title, #customize-outer-theme-controls .accordion-section-title,
#customize-controls .control-section.control-section-ast_section .accordion-section-title {
border-bottom: 1px solid var(--ast-customizer-color-7);
}
/* To remove extra spacing for customizer button */
#customize-theme-controls .accordion-section-title button.accordion-trigger {
max-height: fit-content;
}
.wp-core-ui #customize-controls .control-section:hover > .accordion-section-title,
.wp-core-ui #customize-controls .control-section .accordion-section-title:hover,
.wp-core-ui #customize-controls .control-section .accordion-section-title:focus,
.wp-core-ui .customize-panel-back:hover,
.wp-core-ui .customize-panel-back:focus,
.wp-core-ui .customize-section-back:hover,
.wp-core-ui .customize-section-back:focus {
border-left-color: var(--ast-customizer-color-1);
}
/* Toggle Section Control */
.ast-section-toggle {
display: grid;
grid-template-columns: 70% 20% 10%;
align-items: center;
padding: 0 0 0 12px;
height: 100%;
align-items: center;
align-content: center;
max-height: 46px;
}
.ast-section-toggle label {
font-size: 14px;
line-height: 1;
font-weight: 600;
height: 100%;
display: inline-flex;
align-items: center;
}
.ast-section-toggle > label {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: auto;
line-height: 50px;
}
.ast-section-toggle:not(.active) > label {
cursor: default;
}
.customize-control.customize-control-ast-section-toggle {
border: 1px dashed var(--ast-customizer-color-1);
background: var(--ast-customizer-color-11);
cursor: pointer;
box-shadow: none !important;
line-height: 42px;
font-size: 14px;
display: inline-grid;
align-items: center;
height: auto;
color: var(--ast-customizer-color-5);
position: relative;
white-space: nowrap;
border-radius: 4px;
transition: all 0.2s;
padding-top: 0;
padding-bottom: 0;
margin-top: 24px;
margin-bottom: 9px;
margin-top: 24px;
}
.customize-control.customize-control-ast-section-toggle:hover {
background: var(--ast-customizer-color-9);
border-style: solid;
}
.ast-section-toggle-icon {
color: var(--wp-admin-theme-color);
cursor: pointer;
line-height: 20px;
height: 100%;
display: inline-flex;
align-items: center;
}
.ast-section-toggle-icon span {
font-size: 16px;
line-height: 16px;
width: 16px;
height: 16px;
}
.customize-control-ast-section-toggle {
padding-top: 25px;
padding-bottom: 16px;
}
li#customize-control-astra-settings-related-posts-title {
margin-top: 32px;
}
li[ID*="accordion-section-ast-dynamic-single-"].control-section-ast_section,
li[ID*="accordion-section-ast-dynamic-archive-"].control-section-ast_section,
li#accordion-section-section-search-page-title.control-section-ast_section,
li[ID*="accordion-section-ast-sub-section-"].control-section-ast_section {
display: none !important;
}
.item-customizer-focus svg {
min-width: 12px;
min-height: 12px;
width: 12px;
height: 12px;
fill: #fff;
margin-left: -1px;
}
/* Customizer - Adjusting Style Guide Trigger Button */
.wp-full-overlay-sidebar #customize-header-actions {
padding-left: 6px;
padding-right: 6px;
}
#customize-header-actions button#astra-tour {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 48px;
width: 45px;
margin-top: 0 !important;
padding: 0;
background: #f0f0f1;
border: none;
border-radius: 0;
border-top: 4px solid #f0f0f1;
border-right: 1px solid #dcdcde;
color: #3c434a;
fill: #3c434a;
stroke: #3c434a;
}
#customize-header-actions button#astra-tour:hover, #customize-header-actions button#astra-tour:focus {
background: #fff;
color: #2271b1;
fill: #2271b1;
stroke: #2271b1;
border-top-color: #2271b1;
box-shadow: none;
outline: 1px solid transparent;
}
#customize-header-actions button#astra-tour svg {
margin-top: 7px;
margin-left: 3px;
width: 16px;
height: 16px;
}
@media screen and (max-width: 640px) {
#customize-header-actions button#astra-tour {
left: 153px;
}
}
/* To highlight style guide option */
.indicator-dot {
z-index: 1000;
position: relative;
height: 5px;
width: 5px;
background-color: red;
border-radius: 50%;
display: inline-block;
margin-left: 80px;
margin-bottom: 15px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Styling for the tooltip */
.ast-style-guide-tooltip {
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
margin-bottom: 5px;
background-color: #e5e5e5;
color: #494948;
border-radius: 3px;
white-space: nowrap;
font-size: 12px;
z-index: 1000;
opacity: 0;
transition: opacity .3s ease;
padding: 0 8px;
top: 45px;
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
/* Show the ast-style-guide-tooltip on hover */
#astra-tour:hover .ast-style-guide-tooltip {
display: block;
opacity: 1;
}
/* Focus Management Styles - WCAG 2.1 Compliance */
/* Added for keyboard accessibility and screen reader support */
/* Button Focus Styles */
.hvac-button:focus,
.hvac-content .button:focus,
.hvac-content button:focus,
.hvac-content input[type="submit"]:focus,
.hvac-email-submit:focus,
.hvac-filter-submit:focus,
.hvac-certificate-actions button:focus,
.hvac-certificate-actions a:focus {
outline: 2px solid #005fcc;
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2);
border-radius: 4px;
}
/* Input Focus Styles */
.hvac-form-input:focus,
.hvac-content input[type="text"]:focus,
.hvac-content input[type="email"]:focus,
.hvac-content input[type="password"]:focus,
.hvac-content input[type="url"]:focus,
.hvac-content textarea:focus,
.hvac-content select:focus,
.hvac-email-form-row input:focus,
.hvac-email-form-row textarea:focus,
.hvac-filter-group input:focus,
.hvac-filter-group select:focus {
outline: 2px solid #005fcc;
outline-offset: 2px;
border-color: #005fcc;
box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2);
}
/* Link Focus Styles */
.hvac-content a:focus,
.hvac-event-link:focus,
.hvac-certificate-link:focus,
.hvac-attendee-profile-icon:focus,
.hvac-dashboard-nav a:focus,
.hvac-email-navigation a:focus {
outline: 2px solid #005fcc;
outline-offset: 2px;
text-decoration: underline;
background-color: rgba(0, 95, 204, 0.1);
border-radius: 2px;
}
/* Interactive Element Focus Styles */
.hvac-attendee-checkbox:focus,
.hvac-select-all-container input[type="checkbox"]:focus,
.hvac-modal-close:focus,
.hvac-certificate-table tr:focus {
outline: 2px solid #005fcc;
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2);
}
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
.hvac-content *:focus {
outline: 3px solid #000000;
outline-offset: 2px;
background-color: #ffff00;
color: #000000;
}
}
/* Focus-visible polyfill support */
/* Reset focus for mouse users while preserving keyboard accessibility */
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
box-shadow: none;
}
/* Ensure focus is visible for keyboard users */
.js-focus-visible .focus-visible {
outline: 2px solid #005fcc;
outline-offset: 2px;
}