feat: Enhance plugin UI with improved styling and accessibility
- Add responsive button styles with mobile optimization - Implement accessibility focus styles and keyboard navigation support - Create animation system for smoother interactive elements - Add mobile navigation menu for dashboard and main pages - Include print stylesheet for better printable event summaries - Optimize all UI components for better usability and consistency 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
bengizmo
parent
4262221115
commit
9a930ea1fc
13 changed files with 2821 additions and 270 deletions
|
|
@ -1,96 +1,211 @@
|
|||
/**
|
||||
* HVAC Community Events: Community Login Styles
|
||||
* HVAC Community Events: Enhanced Community Login Styles
|
||||
*
|
||||
* Styles for the custom login form page.
|
||||
*
|
||||
* @version 1.0.0
|
||||
* @version 2.0.0
|
||||
*/
|
||||
|
||||
/* Login Page Container */
|
||||
.hvac-community-login-wrapper {
|
||||
/* Add styles to center the card vertically/horizontally if needed */
|
||||
padding: 40px 0; /* Example padding */
|
||||
padding: var(--hvac-spacing-xl) 0;
|
||||
min-height: 60vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* Login Card */
|
||||
.hvac-login-form-card {
|
||||
max-width: 400px; /* Adjust as needed based on design */
|
||||
max-width: 450px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 30px;
|
||||
background-color: #ffffff; /* White card background */
|
||||
border: 1px solid #e0e0e0; /* Light border */
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
|
||||
border-radius: 4px; /* Rounded corners */
|
||||
padding: var(--hvac-spacing-xl);
|
||||
background-color: white;
|
||||
border: 1px solid var(--hvac-border);
|
||||
box-shadow: var(--hvac-shadow-lg);
|
||||
border-radius: var(--hvac-border-radius-lg);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.hvac-login-form-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Login Card Header */
|
||||
.hvac-login-form-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
}
|
||||
|
||||
.hvac-login-form-header h2 {
|
||||
color: var(--hvac-primary);
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: var(--hvac-spacing-sm);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hvac-login-form-header p {
|
||||
color: var(--hvac-text-light);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Login Form Elements */
|
||||
#hvac_community_loginform {
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
}
|
||||
|
||||
/* Style the form generated by wp_login_form */
|
||||
#hvac_community_loginform p {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: var(--hvac-spacing-md);
|
||||
}
|
||||
|
||||
#hvac_community_loginform label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
margin-bottom: var(--hvac-spacing-sm);
|
||||
font-weight: 600;
|
||||
color: var(--hvac-text);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
#hvac_community_loginform input[type="text"],
|
||||
#hvac_community_loginform input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box; /* Include padding and border in the element's total width and height */
|
||||
padding: 0.85rem;
|
||||
border: 1px solid var(--hvac-border);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
#hvac_community_loginform input[type="text"]:focus,
|
||||
#hvac_community_loginform input[type="password"]:focus {
|
||||
border-color: var(--hvac-primary);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px var(--hvac-primary-light);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* Remember Me Checkbox */
|
||||
.login-remember {
|
||||
margin-bottom: var(--hvac-spacing-md) !important;
|
||||
}
|
||||
|
||||
#hvac_community_loginform .login-remember label {
|
||||
font-weight: normal;
|
||||
display: inline-block; /* Align checkbox and label */
|
||||
}
|
||||
#hvac_community_loginform .login-remember input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: var(--hvac-text-light);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#hvac_community_loginform .login-remember input[type="checkbox"] {
|
||||
margin-right: var(--hvac-spacing-sm);
|
||||
cursor: pointer;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* Login Button */
|
||||
.login-submit {
|
||||
margin-bottom: var(--hvac-spacing-md) !important;
|
||||
}
|
||||
|
||||
#hvac_community_loginform .login-submit #wp-submit {
|
||||
/* Use Astra button styles if possible, or define custom */
|
||||
/* Example using Astra's class structure (might need adjustment) */
|
||||
/* @extend .ast-button; */
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #0073aa; /* Example blue */
|
||||
color: #ffffff;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.85rem;
|
||||
background-color: var(--hvac-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
border-radius: var(--hvac-border-radius);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font-size: 1em;
|
||||
width: 100%; /* Make button full width */
|
||||
text-align: center;
|
||||
transition: background-color 0.2s, transform 0.1s;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
box-shadow: var(--hvac-shadow);
|
||||
}
|
||||
|
||||
#hvac_community_loginform .login-submit #wp-submit:hover {
|
||||
background-color: #005a87; /* Darker blue on hover */
|
||||
background-color: var(--hvac-primary-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--hvac-shadow-lg);
|
||||
}
|
||||
|
||||
#hvac_community_loginform .login-submit #wp-submit:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Additional Links */
|
||||
.hvac-login-links {
|
||||
margin-top: 20px;
|
||||
margin-top: var(--hvac-spacing-lg);
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: var(--hvac-spacing-md);
|
||||
border-top: 1px solid var(--hvac-border-light);
|
||||
}
|
||||
|
||||
.hvac-login-links a {
|
||||
color: #0073aa; /* Link color */
|
||||
color: var(--hvac-primary);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.hvac-login-links a:hover {
|
||||
color: var(--hvac-primary-dark);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Add responsive adjustments if needed */
|
||||
@media (max-width: 544px) { /* Example using Astra mobile breakpoint */
|
||||
/* Login Error Message */
|
||||
.login-error {
|
||||
background-color: var(--hvac-error-light);
|
||||
color: var(--hvac-error);
|
||||
padding: var(--hvac-spacing-md);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
border-left: 4px solid var(--hvac-error);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Image/Logo Placeholder if needed */
|
||||
.hvac-login-logo {
|
||||
text-align: center;
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
}
|
||||
|
||||
.hvac-login-logo img {
|
||||
max-width: 180px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 767px) {
|
||||
.hvac-login-form-card {
|
||||
max-width: 90%;
|
||||
padding: 20px;
|
||||
padding: var(--hvac-spacing-lg);
|
||||
}
|
||||
|
||||
.hvac-login-links {
|
||||
flex-direction: column;
|
||||
gap: var(--hvac-spacing-md);
|
||||
}
|
||||
|
||||
.hvac-login-form-header h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hvac-login-form-card {
|
||||
padding: var(--hvac-spacing-md);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,250 @@
|
|||
/**
|
||||
* HVAC Community Events Animation Effects
|
||||
*
|
||||
* This stylesheet contains animations and transitions for UI elements
|
||||
* to create a more polished, responsive feel to the interface.
|
||||
*/
|
||||
|
||||
/* Base transition properties */
|
||||
:root {
|
||||
--hvac-transition-speed: 0.2s;
|
||||
--hvac-transition-timing: ease-out;
|
||||
}
|
||||
|
||||
/* Scale-up animation for cards and important elements */
|
||||
@keyframes scale-up {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 0.95;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.02);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fade-in animation */
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pulse animation for notices and alerts */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1.01);
|
||||
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Slide-in animation */
|
||||
@keyframes slide-in-right {
|
||||
0% {
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-left {
|
||||
0% {
|
||||
transform: translateX(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-bottom {
|
||||
0% {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Common element transitions */
|
||||
|
||||
/* Card hover animation */
|
||||
.hvac-card {
|
||||
transition: transform var(--hvac-transition-speed) var(--hvac-transition-timing),
|
||||
box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing),
|
||||
border-color var(--hvac-transition-speed) var(--hvac-transition-timing);
|
||||
}
|
||||
|
||||
.hvac-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--hvac-shadow-lg);
|
||||
border-color: var(--hvac-primary-light);
|
||||
}
|
||||
|
||||
/* Stat cards animation */
|
||||
.hvac-event-stat-card,
|
||||
.hvac-stat-card {
|
||||
transition: transform var(--hvac-transition-speed) var(--hvac-transition-timing),
|
||||
box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing);
|
||||
}
|
||||
|
||||
.hvac-event-stat-card:hover,
|
||||
.hvac-stat-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--hvac-shadow-lg);
|
||||
}
|
||||
|
||||
/* Button hover animations */
|
||||
.hvac-button,
|
||||
.hvac-content .button,
|
||||
.hvac-content button[type="submit"],
|
||||
.hvac-content input[type="submit"] {
|
||||
transition: background-color var(--hvac-transition-speed) var(--hvac-transition-timing),
|
||||
color var(--hvac-transition-speed) var(--hvac-transition-timing),
|
||||
transform var(--hvac-transition-speed) var(--hvac-transition-timing),
|
||||
box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing);
|
||||
}
|
||||
|
||||
/* Form field transitions */
|
||||
.hvac-form-input,
|
||||
.hvac-content input[type="text"],
|
||||
.hvac-content input[type="email"],
|
||||
.hvac-content input[type="password"],
|
||||
.hvac-content input[type="url"],
|
||||
.hvac-content textarea,
|
||||
.hvac-content select {
|
||||
transition: border-color var(--hvac-transition-speed) var(--hvac-transition-timing),
|
||||
box-shadow var(--hvac-transition-speed) var(--hvac-transition-timing),
|
||||
background-color var(--hvac-transition-speed) var(--hvac-transition-timing);
|
||||
}
|
||||
|
||||
/* Table row hover transition */
|
||||
.hvac-table tbody tr,
|
||||
.events-table tbody tr,
|
||||
.hvac-transactions-table tbody tr {
|
||||
transition: background-color var(--hvac-transition-speed) var(--hvac-transition-timing);
|
||||
}
|
||||
|
||||
/* Link hover transition */
|
||||
.hvac-content a {
|
||||
transition: color var(--hvac-transition-speed) var(--hvac-transition-timing),
|
||||
text-decoration var(--hvac-transition-speed) var(--hvac-transition-timing);
|
||||
}
|
||||
|
||||
/* Alert/message transitions */
|
||||
.hvac-alert,
|
||||
.hvac-email-sent,
|
||||
.hvac-email-error,
|
||||
.login-error,
|
||||
.hvac-errors,
|
||||
.hvac-success {
|
||||
transition: background-color var(--hvac-transition-speed) var(--hvac-transition-timing),
|
||||
transform var(--hvac-transition-speed) var(--hvac-transition-timing);
|
||||
}
|
||||
|
||||
/* Animation classes that can be applied to elements */
|
||||
|
||||
/* Apply fade-in animation */
|
||||
.hvac-animate-fade-in {
|
||||
animation: fade-in 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Apply scale-up animation */
|
||||
.hvac-animate-scale-up {
|
||||
animation: scale-up 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Apply pulse animation */
|
||||
.hvac-animate-pulse {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
/* Apply slide-in animations */
|
||||
.hvac-animate-slide-in-right {
|
||||
animation: slide-in-right 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
.hvac-animate-slide-in-left {
|
||||
animation: slide-in-left 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
.hvac-animate-slide-in-bottom {
|
||||
animation: slide-in-bottom 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Apply animations to specific elements */
|
||||
.hvac-dashboard-stats .hvac-stat-card:nth-child(1) {
|
||||
animation: slide-in-bottom 0.3s ease-out 0.1s both;
|
||||
}
|
||||
|
||||
.hvac-dashboard-stats .hvac-stat-card:nth-child(2) {
|
||||
animation: slide-in-bottom 0.3s ease-out 0.2s both;
|
||||
}
|
||||
|
||||
.hvac-dashboard-stats .hvac-stat-card:nth-child(3) {
|
||||
animation: slide-in-bottom 0.3s ease-out 0.3s both;
|
||||
}
|
||||
|
||||
.hvac-dashboard-stats .hvac-stat-card:nth-child(4) {
|
||||
animation: slide-in-bottom 0.3s ease-out 0.4s both;
|
||||
}
|
||||
|
||||
/* Event summary stats sequence */
|
||||
.hvac-event-summary-stats .hvac-event-stat-card:nth-child(1) {
|
||||
animation: slide-in-bottom 0.3s ease-out 0.1s both;
|
||||
}
|
||||
|
||||
.hvac-event-summary-stats .hvac-event-stat-card:nth-child(2) {
|
||||
animation: slide-in-bottom 0.3s ease-out 0.2s both;
|
||||
}
|
||||
|
||||
.hvac-event-summary-stats .hvac-event-stat-card:nth-child(3) {
|
||||
animation: slide-in-bottom 0.3s ease-out 0.3s both;
|
||||
}
|
||||
|
||||
/* Initial loading state for animated elements */
|
||||
.hvac-animate-fade-in,
|
||||
.hvac-animate-scale-up,
|
||||
.hvac-animate-slide-in-right,
|
||||
.hvac-animate-slide-in-left,
|
||||
.hvac-animate-slide-in-bottom,
|
||||
.hvac-dashboard-stats .hvac-stat-card,
|
||||
.hvac-event-summary-stats .hvac-event-stat-card {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Disable animations for users who prefer reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.001s !important;
|
||||
animation-delay: 0s !important;
|
||||
transition-duration: 0.001s !important;
|
||||
}
|
||||
|
||||
.hvac-animate-fade-in,
|
||||
.hvac-animate-scale-up,
|
||||
.hvac-animate-slide-in-right,
|
||||
.hvac-animate-slide-in-left,
|
||||
.hvac-animate-slide-in-bottom,
|
||||
.hvac-dashboard-stats .hvac-stat-card,
|
||||
.hvac-event-summary-stats .hvac-event-stat-card {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,479 @@
|
|||
/**
|
||||
* HVAC Community Events Common Styles
|
||||
*
|
||||
* These styles apply to all pages in the HVAC Community Events plugin.
|
||||
* They enhance buttons, links, typography, and spacing for a consistent look.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Primary colors */
|
||||
--hvac-primary: #0274be;
|
||||
--hvac-primary-dark: #005fa3;
|
||||
--hvac-primary-light: #e6f3fb;
|
||||
|
||||
/* Secondary colors */
|
||||
--hvac-secondary: #54595f;
|
||||
--hvac-secondary-dark: #3a3f44;
|
||||
--hvac-secondary-light: #f0f0f1;
|
||||
|
||||
/* Success/Error colors */
|
||||
--hvac-success: #4caf50;
|
||||
--hvac-success-light: #e8f5e9;
|
||||
--hvac-error: #d63638;
|
||||
--hvac-error-light: #ffebe9;
|
||||
|
||||
/* Neutral colors */
|
||||
--hvac-border: #e0e0e0;
|
||||
--hvac-border-light: #f0f0f0;
|
||||
--hvac-text: #333333;
|
||||
--hvac-text-light: #757575;
|
||||
|
||||
/* Spacing */
|
||||
--hvac-spacing-xs: 0.25rem; /* 4px */
|
||||
--hvac-spacing-sm: 0.5rem; /* 8px */
|
||||
--hvac-spacing-md: 1rem; /* 16px */
|
||||
--hvac-spacing-lg: 1.5rem; /* 24px */
|
||||
--hvac-spacing-xl: 2rem; /* 32px */
|
||||
|
||||
/* Border radius */
|
||||
--hvac-border-radius: 4px;
|
||||
--hvac-border-radius-lg: 8px;
|
||||
|
||||
/* Box shadow */
|
||||
--hvac-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
--hvac-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* Focus styles */
|
||||
--hvac-focus-color: #2271b1;
|
||||
--hvac-focus-width: 2px;
|
||||
--hvac-focus-offset: 2px;
|
||||
}
|
||||
|
||||
/* Typography Enhancements */
|
||||
.hvac-content h1,
|
||||
.hvac-content h2,
|
||||
.hvac-content h3,
|
||||
.hvac-content h4 {
|
||||
color: var(--hvac-text);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--hvac-spacing-md);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.hvac-content h1 {
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
}
|
||||
|
||||
.hvac-content h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-top: var(--hvac-spacing-xl);
|
||||
}
|
||||
|
||||
.hvac-content h3 {
|
||||
font-size: 1.25rem;
|
||||
margin-top: var(--hvac-spacing-lg);
|
||||
}
|
||||
|
||||
.hvac-content p {
|
||||
margin-bottom: var(--hvac-spacing-md);
|
||||
line-height: 1.6;
|
||||
color: var(--hvac-text);
|
||||
}
|
||||
|
||||
/* Enhanced Button Styles */
|
||||
.hvac-button,
|
||||
.hvac-content .button,
|
||||
.hvac-content button[type="submit"],
|
||||
.hvac-content input[type="submit"],
|
||||
.hvac-content .ast-button {
|
||||
display: inline-block;
|
||||
background-color: var(--hvac-primary);
|
||||
color: white !important;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border: none;
|
||||
border-radius: var(--hvac-border-radius);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
|
||||
box-shadow: var(--hvac-shadow);
|
||||
line-height: 1.4;
|
||||
min-height: 44px; /* Minimum touch target size */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hvac-button:hover,
|
||||
.hvac-content .button:hover,
|
||||
.hvac-content button[type="submit"]:hover,
|
||||
.hvac-content input[type="submit"]:hover,
|
||||
.hvac-content .ast-button:hover {
|
||||
background-color: var(--hvac-primary-dark);
|
||||
text-decoration: none;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--hvac-shadow-lg);
|
||||
}
|
||||
|
||||
.hvac-button:active,
|
||||
.hvac-content .button:active,
|
||||
.hvac-content button[type="submit"]:active,
|
||||
.hvac-content input[type="submit"]:active,
|
||||
.hvac-content .ast-button:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: var(--hvac-shadow);
|
||||
}
|
||||
|
||||
/* Button ripple effect */
|
||||
.hvac-button::after,
|
||||
.hvac-content .button::after,
|
||||
.hvac-content button[type="submit"]::after,
|
||||
.hvac-content input[type="submit"]::after,
|
||||
.hvac-content .ast-button::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
opacity: 0;
|
||||
border-radius: 100%;
|
||||
transform: scale(1, 1) translate(-50%, -50%);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.hvac-button:active::after,
|
||||
.hvac-content .button:active::after,
|
||||
.hvac-content button[type="submit"]:active::after,
|
||||
.hvac-content input[type="submit"]:active::after,
|
||||
.hvac-content .ast-button:active::after {
|
||||
animation: ripple 0.4s ease-out;
|
||||
}
|
||||
|
||||
/* Secondary buttons */
|
||||
.hvac-button-secondary,
|
||||
.hvac-content .button-secondary {
|
||||
background-color: var(--hvac-secondary);
|
||||
}
|
||||
|
||||
.hvac-button-secondary:hover,
|
||||
.hvac-content .button-secondary:hover {
|
||||
background-color: var(--hvac-secondary-dark);
|
||||
}
|
||||
|
||||
/* Success/danger button variants */
|
||||
.hvac-button-success,
|
||||
.hvac-content .button-success {
|
||||
background-color: var(--hvac-success);
|
||||
}
|
||||
|
||||
.hvac-button-success:hover,
|
||||
.hvac-content .button-success:hover {
|
||||
background-color: var(--hvac-success);
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
.hvac-button-danger,
|
||||
.hvac-content .button-danger {
|
||||
background-color: var(--hvac-error);
|
||||
}
|
||||
|
||||
.hvac-button-danger:hover,
|
||||
.hvac-content .button-danger:hover {
|
||||
background-color: var(--hvac-error);
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
/* Outline button variant */
|
||||
.hvac-button-outline,
|
||||
.hvac-content .button-outline {
|
||||
background-color: transparent;
|
||||
color: var(--hvac-primary) !important;
|
||||
border: 2px solid var(--hvac-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.hvac-button-outline:hover,
|
||||
.hvac-content .button-outline:hover {
|
||||
background-color: var(--hvac-primary-light);
|
||||
color: var(--hvac-primary) !important;
|
||||
box-shadow: var(--hvac-shadow);
|
||||
}
|
||||
|
||||
/* Mobile optimized buttons */
|
||||
@media (max-width: 480px) {
|
||||
.hvac-button,
|
||||
.hvac-content .button,
|
||||
.hvac-content button[type="submit"],
|
||||
.hvac-content input[type="submit"],
|
||||
.hvac-content .ast-button {
|
||||
padding: 0.85rem 1rem;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
margin-bottom: var(--hvac-spacing-sm);
|
||||
}
|
||||
|
||||
/* Fix for buttons in a row on mobile */
|
||||
.hvac-button-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--hvac-spacing-sm);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
transform: scale(0, 0);
|
||||
opacity: 0.7;
|
||||
}
|
||||
20% {
|
||||
transform: scale(25, 25);
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(40, 40);
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced Link Styles */
|
||||
.hvac-content a:not(.button):not(.hvac-button) {
|
||||
color: var(--hvac-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.hvac-content a:not(.button):not(.hvac-button):hover {
|
||||
color: var(--hvac-primary-dark);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Responsive Table Improvements */
|
||||
.hvac-table-wrapper {
|
||||
overflow-x: auto;
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
}
|
||||
|
||||
.hvac-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid var(--hvac-border);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.hvac-table th {
|
||||
background-color: var(--hvac-secondary-light);
|
||||
color: var(--hvac-secondary-dark);
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
padding: var(--hvac-spacing-md);
|
||||
border-bottom: 2px solid var(--hvac-border);
|
||||
}
|
||||
|
||||
.hvac-table td {
|
||||
padding: var(--hvac-spacing-md);
|
||||
border-bottom: 1px solid var(--hvac-border-light);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.hvac-table tbody tr:hover {
|
||||
background-color: var(--hvac-primary-light);
|
||||
}
|
||||
|
||||
/* Card Component Styles */
|
||||
.hvac-card {
|
||||
background-color: white;
|
||||
border-radius: var(--hvac-border-radius);
|
||||
box-shadow: var(--hvac-shadow);
|
||||
padding: var(--hvac-spacing-lg);
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
border: 1px solid var(--hvac-border);
|
||||
}
|
||||
|
||||
.hvac-card-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--hvac-spacing-md);
|
||||
padding-bottom: var(--hvac-spacing-sm);
|
||||
border-bottom: 1px solid var(--hvac-border-light);
|
||||
}
|
||||
|
||||
/* Form Element Improvements */
|
||||
.hvac-form-group {
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
}
|
||||
|
||||
.hvac-form-label {
|
||||
display: block;
|
||||
margin-bottom: var(--hvac-spacing-sm);
|
||||
font-weight: 600;
|
||||
color: var(--hvac-text);
|
||||
}
|
||||
|
||||
.hvac-form-input,
|
||||
.hvac-content input[type="text"],
|
||||
.hvac-content input[type="email"],
|
||||
.hvac-content input[type="password"],
|
||||
.hvac-content input[type="url"],
|
||||
.hvac-content textarea,
|
||||
.hvac-content select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--hvac-border);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
font-size: 1rem;
|
||||
background-color: white;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.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 {
|
||||
border-color: var(--hvac-primary);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px var(--hvac-primary-light);
|
||||
}
|
||||
|
||||
/* Alert/Message Styles */
|
||||
.hvac-alert {
|
||||
padding: var(--hvac-spacing-md);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
|
||||
.hvac-alert-success {
|
||||
background-color: var(--hvac-success-light);
|
||||
border-color: var(--hvac-success);
|
||||
color: var(--hvac-success);
|
||||
}
|
||||
|
||||
.hvac-alert-error {
|
||||
background-color: var(--hvac-error-light);
|
||||
border-color: var(--hvac-error);
|
||||
color: var(--hvac-error);
|
||||
}
|
||||
|
||||
/* Layout Helper Classes */
|
||||
.hvac-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hvac-flex-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hvac-flex-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hvac-flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hvac-mt-sm { margin-top: var(--hvac-spacing-sm); }
|
||||
.hvac-mt-md { margin-top: var(--hvac-spacing-md); }
|
||||
.hvac-mb-sm { margin-bottom: var(--hvac-spacing-sm); }
|
||||
.hvac-mb-md { margin-bottom: var(--hvac-spacing-md); }
|
||||
.hvac-mb-lg { margin-bottom: var(--hvac-spacing-lg); }
|
||||
.hvac-mr-sm { margin-right: var(--hvac-spacing-sm); }
|
||||
|
||||
/* Accessibility Focus Styles */
|
||||
.hvac-button:focus,
|
||||
.hvac-content .button:focus,
|
||||
.hvac-content button:focus,
|
||||
.hvac-content input[type="submit"]:focus,
|
||||
.hvac-content input[type="button"]:focus,
|
||||
.hvac-content .ast-button:focus {
|
||||
outline: var(--hvac-focus-width) solid var(--hvac-focus-color);
|
||||
outline-offset: var(--hvac-focus-offset);
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hvac-content a:focus,
|
||||
.hvac-content [tabindex="0"]:focus {
|
||||
outline: var(--hvac-focus-width) solid var(--hvac-focus-color);
|
||||
outline-offset: var(--hvac-focus-offset);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
outline: none; /* Remove default outline */
|
||||
border-color: var(--hvac-focus-color);
|
||||
box-shadow: 0 0 0 var(--hvac-focus-width) rgba(34, 113, 177, 0.3);
|
||||
}
|
||||
|
||||
/* High contrast focus style for keyboard navigation */
|
||||
.keyboard-nav-active :focus {
|
||||
outline: 3px solid #ffbf47 !important;
|
||||
outline-offset: var(--hvac-focus-offset) !important;
|
||||
}
|
||||
|
||||
/* Skip link for keyboard users */
|
||||
.hvac-skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
background: var(--hvac-primary);
|
||||
color: white;
|
||||
padding: 10px;
|
||||
transition: top 0.2s;
|
||||
}
|
||||
|
||||
.hvac-skip-link:focus {
|
||||
top: 0;
|
||||
outline: var(--hvac-focus-width) solid var(--hvac-focus-color);
|
||||
}
|
||||
|
||||
/* Responsive improvements */
|
||||
@media (max-width: 767px) {
|
||||
.hvac-flex {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hvac-form-group {
|
||||
margin-bottom: var(--hvac-spacing-md);
|
||||
}
|
||||
|
||||
.hvac-card {
|
||||
padding: var(--hvac-spacing-md);
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply to all plugin pages */
|
||||
body.page-hvac-dashboard,
|
||||
body.page-community-login,
|
||||
body.page-trainer-registration,
|
||||
body.page-trainer-profile,
|
||||
body.page-event-summary,
|
||||
body.page-email-attendees,
|
||||
body.page-my-events,
|
||||
body.page-manage-event {
|
||||
/* Base font settings */
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--hvac-text);
|
||||
}
|
||||
|
||||
/* Enable detection of keyboard navigation for better accessibility */
|
||||
body:not(.user-is-tabbing) :focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
|
@ -1,27 +1,58 @@
|
|||
/*
|
||||
* HVAC Trainer Dashboard Styles
|
||||
* HVAC Trainer Dashboard Styles - Enhanced Version
|
||||
*
|
||||
* Styles specific to the template-hvac-dashboard.php template.
|
||||
* Styles specific to the trainer dashboard page.
|
||||
*/
|
||||
|
||||
/* Dashboard Container */
|
||||
.hvac-dashboard {
|
||||
padding: var(--hvac-spacing-lg);
|
||||
background-color: #f9f9f9;
|
||||
border-radius: var(--hvac-border-radius);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.hvac-dashboard-header {
|
||||
margin-bottom: 2em;
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid #eee; /* Consider using theme variable for border color */
|
||||
border-bottom: 1px solid var(--hvac-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap; /* Allow wrapping on smaller screens */
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hvac-dashboard-header h1 {
|
||||
margin: 0 0 var(--hvac-spacing-sm) 0;
|
||||
color: var(--hvac-text);
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hvac-dashboard-nav {
|
||||
display: flex;
|
||||
gap: var(--hvac-spacing-sm);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hvac-dashboard-nav a {
|
||||
margin-left: 0.5em; /* Add some space between nav buttons */
|
||||
margin: 0;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Stats Section */
|
||||
.hvac-dashboard-stats {
|
||||
margin-bottom: 2em;
|
||||
margin-bottom: var(--hvac-spacing-xl);
|
||||
}
|
||||
|
||||
.hvac-dashboard-stats h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--hvac-spacing-md);
|
||||
font-size: 1.4rem;
|
||||
color: var(--hvac-text);
|
||||
padding-bottom: var(--hvac-spacing-sm);
|
||||
border-bottom: 1px solid var(--hvac-border-light);
|
||||
}
|
||||
|
||||
/* Row layout for stats */
|
||||
|
|
@ -29,84 +60,176 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin: -10px; /* Counteract the padding on columns */
|
||||
margin: -10px;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.hvac-stat-col {
|
||||
flex: 1;
|
||||
min-width: 160px; /* Ensure minimum width for readability */
|
||||
min-width: 160px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Target column padding specifically within the stats section - maintain compatibility */
|
||||
.hvac-dashboard-stats .ast-row > [class*="ast-col-"] {
|
||||
padding: 10px; /* Replicates removed inline style */
|
||||
display: flex; /* Ensure cards fill height if needed */
|
||||
flex-direction: column;
|
||||
margin-bottom: var(--hvac-spacing-sm);
|
||||
}
|
||||
|
||||
.hvac-stat-card {
|
||||
border: 1px solid #eee; /* Consider using theme variable */
|
||||
padding: 15px;
|
||||
background: #fff; /* Consider using theme variable */
|
||||
border: 1px solid var(--hvac-border);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
padding: var(--hvac-spacing-lg);
|
||||
background: white;
|
||||
text-align: center;
|
||||
width: 100%; /* Make card fill column */
|
||||
flex-grow: 1; /* Allow card to grow if needed */
|
||||
height: 100%; /* Ensure equal height */
|
||||
/* Add box-shadow or other theme-consistent styling if desired */
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
box-shadow: var(--hvac-shadow);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.hvac-stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--hvac-shadow-lg);
|
||||
}
|
||||
|
||||
.hvac-stat-card h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 1em; /* Adjust as needed */
|
||||
margin-bottom: var(--hvac-spacing-sm);
|
||||
font-size: 1.1em;
|
||||
color: var(--hvac-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hvac-stat-card p {
|
||||
font-size: 2em; /* Replicates removed inline style */
|
||||
margin: 0.2em 0; /* Replicates removed inline style */
|
||||
font-weight: bold;
|
||||
font-size: 2.2em;
|
||||
margin: 0.2em 0;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: var(--hvac-primary);
|
||||
}
|
||||
|
||||
.hvac-stat-card small {
|
||||
display: block;
|
||||
margin-top: 0.5em;
|
||||
font-size: 0.8em;
|
||||
color: #777; /* Consider using theme variable */
|
||||
margin-top: var(--hvac-spacing-sm);
|
||||
font-size: 0.85em;
|
||||
color: var(--hvac-text-light);
|
||||
}
|
||||
|
||||
/* Events Section */
|
||||
.hvac-dashboard-events {
|
||||
background: white;
|
||||
border-radius: var(--hvac-border-radius);
|
||||
padding: var(--hvac-spacing-lg);
|
||||
box-shadow: var(--hvac-shadow);
|
||||
margin-bottom: var(--hvac-spacing-xl);
|
||||
}
|
||||
|
||||
.hvac-dashboard-events h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--hvac-spacing-md);
|
||||
font-size: 1.4rem;
|
||||
color: var(--hvac-text);
|
||||
padding-bottom: var(--hvac-spacing-sm);
|
||||
border-bottom: 1px solid var(--hvac-border-light);
|
||||
}
|
||||
|
||||
/* Event Filters */
|
||||
.hvac-event-filters {
|
||||
margin-bottom: 1em; /* Replicates removed inline style */
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
padding: var(--hvac-spacing-md);
|
||||
background-color: var(--hvac-secondary-light);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--hvac-spacing-sm);
|
||||
}
|
||||
|
||||
.hvac-event-filters span {
|
||||
margin-right: 0.5em;
|
||||
font-weight: bold;
|
||||
margin-right: var(--hvac-spacing-md);
|
||||
font-weight: 600;
|
||||
color: var(--hvac-secondary-dark);
|
||||
}
|
||||
|
||||
.hvac-event-filters .ast-button {
|
||||
margin-right: 0.3em; /* Space between filter buttons */
|
||||
.hvac-filter {
|
||||
padding: 0.5rem 1rem !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.hvac-filter-active {
|
||||
background-color: var(--hvac-primary) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Events Table */
|
||||
.hvac-events-table-wrapper {
|
||||
overflow-x: auto; /* Add horizontal scroll for smaller screens */
|
||||
position: relative; /* For loading indicator positioning */
|
||||
min-height: 100px; /* Ensure space for loading indicator */
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
border: 1px solid var(--hvac-border);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
}
|
||||
|
||||
/* Ensure table uses standard WP/Theme styling */
|
||||
.events-table {
|
||||
/* Add any specific overrides if needed, but rely on .wp-list-table first */
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.events-table th {
|
||||
background-color: #f8f9fa;
|
||||
color: var(--hvac-secondary-dark);
|
||||
padding: var(--hvac-spacing-md);
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
border-bottom: 2px solid var(--hvac-border);
|
||||
}
|
||||
|
||||
.events-table td {
|
||||
padding: var(--hvac-spacing-md);
|
||||
border-bottom: 1px solid var(--hvac-border-light);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.events-table tbody tr:hover {
|
||||
background-color: var(--hvac-primary-light);
|
||||
}
|
||||
|
||||
.events-table .column-actions {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.events-table .column-actions a {
|
||||
margin-right: 0.5em;
|
||||
margin-right: var(--hvac-spacing-sm);
|
||||
color: var(--hvac-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.events-table .column-actions a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Status indicators */
|
||||
.status-indicator {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.85em;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-published {
|
||||
background-color: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.status-draft {
|
||||
background-color: #eceff1;
|
||||
color: #546e7a;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background-color: #fff3e0;
|
||||
color: #ef6c00;
|
||||
}
|
||||
|
||||
/* Loading indicator */
|
||||
|
|
@ -133,10 +256,53 @@
|
|||
|
||||
/* Error message */
|
||||
.hvac-error {
|
||||
color: #d63638;
|
||||
padding: 10px;
|
||||
color: var(--hvac-error);
|
||||
padding: var(--hvac-spacing-md);
|
||||
border: 1px solid #ffb8bb;
|
||||
background-color: #ffebe9;
|
||||
margin: 10px 0;
|
||||
border-radius: 4px;
|
||||
background-color: var(--hvac-error-light);
|
||||
margin: var(--hvac-spacing-md) 0;
|
||||
border-radius: var(--hvac-border-radius);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.hvac-dashboard-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hvac-dashboard-nav {
|
||||
margin-top: var(--hvac-spacing-md);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hvac-dashboard-nav a {
|
||||
flex: 1;
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.hvac-stat-col {
|
||||
min-width: 140px;
|
||||
flex-basis: calc(50% - 20px);
|
||||
}
|
||||
|
||||
.hvac-event-filters {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hvac-event-filters span {
|
||||
margin-bottom: var(--hvac-spacing-sm);
|
||||
}
|
||||
|
||||
.hvac-filter {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hvac-stat-col {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,120 +1,307 @@
|
|||
/**
|
||||
* Styles for the Email Attendees page
|
||||
* Enhanced Styles for the Email Attendees page
|
||||
*
|
||||
* @version 2.0.0
|
||||
*/
|
||||
|
||||
/* Main Container */
|
||||
.hvac-email-attendees-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
padding: var(--hvac-spacing-xl);
|
||||
background-color: #f9fafb;
|
||||
border-radius: var(--hvac-border-radius);
|
||||
}
|
||||
|
||||
/* Header Section */
|
||||
.hvac-email-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: var(--hvac-spacing-xl);
|
||||
flex-wrap: wrap;
|
||||
border-bottom: 1px solid var(--hvac-border);
|
||||
padding-bottom: var(--hvac-spacing-md);
|
||||
}
|
||||
|
||||
.hvac-email-title h1 {
|
||||
margin: 0 0 10px 0;
|
||||
margin: 0 0 var(--hvac-spacing-sm) 0;
|
||||
color: var(--hvac-text);
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hvac-email-title h2 {
|
||||
margin: 0;
|
||||
color: var(--hvac-text-light);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hvac-email-navigation {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: var(--hvac-spacing-sm);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hvac-email-navigation a {
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Email Form */
|
||||
.hvac-email-form {
|
||||
margin-top: 20px;
|
||||
background-color: white;
|
||||
padding: var(--hvac-spacing-lg);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
box-shadow: var(--hvac-shadow);
|
||||
margin-bottom: var(--hvac-spacing-xl);
|
||||
}
|
||||
|
||||
/* Event Info Section */
|
||||
.hvac-email-info {
|
||||
background-color: #f9f9f9;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
background-color: var(--hvac-primary-light);
|
||||
padding: var(--hvac-spacing-md) var(--hvac-spacing-lg);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
border-left: 4px solid var(--hvac-primary);
|
||||
}
|
||||
|
||||
.hvac-email-info p {
|
||||
margin: var(--hvac-spacing-sm) 0;
|
||||
color: var(--hvac-text);
|
||||
}
|
||||
|
||||
.hvac-email-info strong {
|
||||
color: var(--hvac-primary);
|
||||
}
|
||||
|
||||
/* Form Rows */
|
||||
.hvac-email-form-row {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
}
|
||||
|
||||
.hvac-email-form-row label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: var(--hvac-spacing-sm);
|
||||
font-weight: 600;
|
||||
color: var(--hvac-text);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.hvac-email-form-row input[type="text"],
|
||||
.hvac-email-form-row textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
padding: 0.85rem;
|
||||
border: 1px solid var(--hvac-border);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.hvac-email-form-row input[type="text"]:focus,
|
||||
.hvac-email-form-row textarea:focus {
|
||||
border-color: var(--hvac-primary);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px var(--hvac-primary-light);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.hvac-email-form-row textarea {
|
||||
min-height: 200px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* Recipients Section */
|
||||
.hvac-email-recipients {
|
||||
margin-top: 20px;
|
||||
border: 1px solid #ddd;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
margin-top: var(--hvac-spacing-xl);
|
||||
border: 1px solid var(--hvac-border);
|
||||
padding: var(--hvac-spacing-lg);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.hvac-email-recipients h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--hvac-spacing-md);
|
||||
color: var(--hvac-text);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
padding-bottom: var(--hvac-spacing-sm);
|
||||
border-bottom: 1px solid var(--hvac-border-light);
|
||||
}
|
||||
|
||||
/* Filter Section */
|
||||
.hvac-email-filter {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
gap: var(--hvac-spacing-md);
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: var(--hvac-spacing-md);
|
||||
background-color: white;
|
||||
border-radius: var(--hvac-border-radius);
|
||||
box-shadow: var(--hvac-shadow);
|
||||
}
|
||||
|
||||
.hvac-email-filter label {
|
||||
font-weight: 600;
|
||||
margin-right: var(--hvac-spacing-sm);
|
||||
color: var(--hvac-text);
|
||||
}
|
||||
|
||||
.hvac-email-filter select {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--hvac-border);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
background-color: white;
|
||||
min-width: 200px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Attendee List */
|
||||
.hvac-attendee-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #eee;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--hvac-border);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
background-color: white;
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
}
|
||||
|
||||
.hvac-attendee-item {
|
||||
margin-bottom: 10px;
|
||||
padding: 5px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 3px;
|
||||
padding: var(--hvac-spacing-md);
|
||||
border-bottom: 1px solid var(--hvac-border-light);
|
||||
transition: background-color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hvac-attendee-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.hvac-attendee-item:hover {
|
||||
background-color: var(--hvac-primary-light);
|
||||
}
|
||||
|
||||
.hvac-attendee-checkbox {
|
||||
margin-right: 10px;
|
||||
margin-right: var(--hvac-spacing-md);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hvac-attendee-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hvac-attendee-name {
|
||||
font-weight: 600;
|
||||
color: var(--hvac-text);
|
||||
margin-bottom: var(--hvac-spacing-xs);
|
||||
}
|
||||
|
||||
.hvac-attendee-email {
|
||||
color: var(--hvac-text-light);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.hvac-attendee-ticket {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background-color: var(--hvac-secondary-light);
|
||||
color: var(--hvac-secondary-dark);
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
margin-left: var(--hvac-spacing-md);
|
||||
}
|
||||
|
||||
/* Select All Option */
|
||||
.hvac-select-all-container {
|
||||
margin-bottom: var(--hvac-spacing-md);
|
||||
padding: var(--hvac-spacing-sm) var(--hvac-spacing-md);
|
||||
background-color: white;
|
||||
border-radius: var(--hvac-border-radius);
|
||||
border: 1px solid var(--hvac-border);
|
||||
}
|
||||
|
||||
.hvac-select-all-container label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hvac-select-all-container input[type="checkbox"] {
|
||||
margin-right: var(--hvac-spacing-sm);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Count Badge */
|
||||
.hvac-count-badge {
|
||||
background-color: var(--hvac-primary);
|
||||
color: white;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 10px;
|
||||
font-size: 0.75rem;
|
||||
margin-left: var(--hvac-spacing-sm);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Form Submit Button */
|
||||
.hvac-email-submit-row {
|
||||
margin-top: var(--hvac-spacing-xl);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button.hvac-email-submit {
|
||||
padding: 0.85rem 2rem;
|
||||
background-color: var(--hvac-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--hvac-border-radius);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, transform 0.1s;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
box-shadow: var(--hvac-shadow);
|
||||
}
|
||||
|
||||
button.hvac-email-submit:hover {
|
||||
background-color: var(--hvac-primary-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--hvac-shadow-lg);
|
||||
}
|
||||
|
||||
button.hvac-email-submit:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Success/Error Messages */
|
||||
.hvac-email-sent {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
background-color: var(--hvac-success-light);
|
||||
color: var(--hvac-success);
|
||||
padding: var(--hvac-spacing-md) var(--hvac-spacing-lg);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
border-left: 4px solid var(--hvac-success);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hvac-email-error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hvac-count-badge {
|
||||
background-color: #007cba;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.8em;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.hvac-select-all-container {
|
||||
margin-bottom: 10px;
|
||||
background-color: var(--hvac-error-light);
|
||||
color: var(--hvac-error);
|
||||
padding: var(--hvac-spacing-md) var(--hvac-spacing-lg);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
border-left: 4px solid var(--hvac-error);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Responsive styles */
|
||||
|
|
@ -125,12 +312,54 @@
|
|||
}
|
||||
|
||||
.hvac-email-navigation {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
margin-top: var(--hvac-spacing-md);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hvac-email-navigation a {
|
||||
flex: 1;
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.hvac-email-filter {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hvac-email-filter select {
|
||||
width: 100%;
|
||||
margin-top: var(--hvac-spacing-xs);
|
||||
}
|
||||
|
||||
.hvac-email-attendees-wrapper {
|
||||
padding: var(--hvac-spacing-md);
|
||||
}
|
||||
|
||||
.hvac-email-form {
|
||||
padding: var(--hvac-spacing-md);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hvac-email-title h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.hvac-email-title h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.hvac-attendee-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hvac-attendee-checkbox {
|
||||
margin-bottom: var(--hvac-spacing-xs);
|
||||
}
|
||||
|
||||
.hvac-attendee-ticket {
|
||||
margin-left: 0;
|
||||
margin-top: var(--hvac-spacing-xs);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,71 +1,338 @@
|
|||
/**
|
||||
* Styles for the HVAC Community Events Single Event Summary Template
|
||||
* Enhanced Styles for the HVAC Community Events Single Event Summary Template
|
||||
*
|
||||
* @version 2.0.0
|
||||
*/
|
||||
|
||||
.hvac-event-summary-details,
|
||||
.hvac-event-summary-transactions {
|
||||
margin-bottom: 2em; /* Add spacing between sections */
|
||||
padding: 1.5em;
|
||||
border: 1px solid #e2e2e2; /* Basic border like theme cards */
|
||||
border-radius: 4px; /* Slight rounding */
|
||||
background-color: #fff; /* White background */
|
||||
/* Main Container */
|
||||
.hvac-event-summary-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: var(--hvac-spacing-xl) var(--hvac-spacing-md);
|
||||
}
|
||||
|
||||
.hvac-event-summary-details h2,
|
||||
.hvac-event-summary-transactions h2 {
|
||||
/* Page Header */
|
||||
.hvac-event-summary-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--hvac-spacing-xl);
|
||||
flex-wrap: wrap;
|
||||
border-bottom: 1px solid var(--hvac-border);
|
||||
padding-bottom: var(--hvac-spacing-md);
|
||||
}
|
||||
|
||||
.hvac-event-summary-title h1 {
|
||||
margin: 0 0 var(--hvac-spacing-sm) 0;
|
||||
color: var(--hvac-text);
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hvac-event-summary-title .event-date {
|
||||
color: var(--hvac-text-light);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hvac-event-summary-actions {
|
||||
display: flex;
|
||||
gap: var(--hvac-spacing-sm);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hvac-event-summary-actions a {
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Quick Stats Cards */
|
||||
.hvac-event-summary-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--hvac-spacing-md);
|
||||
margin-bottom: var(--hvac-spacing-xl);
|
||||
}
|
||||
|
||||
.hvac-event-stat-card {
|
||||
flex: 1;
|
||||
min-width: 180px;
|
||||
background-color: white;
|
||||
border-radius: var(--hvac-border-radius);
|
||||
box-shadow: var(--hvac-shadow);
|
||||
padding: var(--hvac-spacing-lg);
|
||||
text-align: center;
|
||||
border: 1px solid var(--hvac-border-light);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.hvac-event-stat-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--hvac-shadow-lg);
|
||||
}
|
||||
|
||||
.hvac-event-stat-card h3 {
|
||||
margin: 0 0 var(--hvac-spacing-sm) 0;
|
||||
font-size: 1rem;
|
||||
color: var(--hvac-text-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hvac-event-stat-card .stat-value {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--hvac-primary);
|
||||
line-height: 1.2;
|
||||
margin-bottom: var(--hvac-spacing-sm);
|
||||
}
|
||||
|
||||
.hvac-event-stat-card .stat-subtext {
|
||||
font-size: 0.85rem;
|
||||
color: var(--hvac-text-light);
|
||||
}
|
||||
|
||||
/* Event Details Section */
|
||||
.hvac-event-summary-details {
|
||||
margin-bottom: var(--hvac-spacing-xl);
|
||||
padding: var(--hvac-spacing-xl);
|
||||
border: 1px solid var(--hvac-border);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
background-color: white;
|
||||
box-shadow: var(--hvac-shadow);
|
||||
}
|
||||
|
||||
.hvac-event-summary-details h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
font-size: 1.5em; /* Adjust as needed */
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 0.5em;
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
font-size: 1.4rem;
|
||||
color: var(--hvac-text);
|
||||
padding-bottom: var(--hvac-spacing-sm);
|
||||
border-bottom: 1px solid var(--hvac-border-light);
|
||||
}
|
||||
|
||||
.hvac-event-summary-details h3 {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 1.2em;
|
||||
.hvac-event-detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: var(--hvac-spacing-lg);
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
}
|
||||
|
||||
.hvac-event-summary-details p,
|
||||
.hvac-event-summary-transactions p {
|
||||
margin-bottom: 0.8em;
|
||||
.hvac-event-detail-item h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--hvac-spacing-sm);
|
||||
font-size: 1.1rem;
|
||||
color: var(--hvac-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hvac-event-summary-details .event-description {
|
||||
margin-top: 1em;
|
||||
padding-top: 1em;
|
||||
border-top: 1px dashed #eee;
|
||||
.hvac-event-detail-item p {
|
||||
color: var(--hvac-text);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.hvac-event-description {
|
||||
margin-top: var(--hvac-spacing-lg);
|
||||
padding-top: var(--hvac-spacing-lg);
|
||||
border-top: 1px dashed var(--hvac-border);
|
||||
}
|
||||
|
||||
.hvac-event-description h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--hvac-spacing-md);
|
||||
font-size: 1.2rem;
|
||||
color: var(--hvac-text);
|
||||
}
|
||||
|
||||
/* Attendees Section */
|
||||
.hvac-event-summary-attendees {
|
||||
margin-bottom: var(--hvac-spacing-xl);
|
||||
padding: var(--hvac-spacing-xl);
|
||||
border: 1px solid var(--hvac-border);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
background-color: white;
|
||||
box-shadow: var(--hvac-shadow);
|
||||
}
|
||||
|
||||
.hvac-event-summary-attendees h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
font-size: 1.4rem;
|
||||
color: var(--hvac-text);
|
||||
padding-bottom: var(--hvac-spacing-sm);
|
||||
border-bottom: 1px solid var(--hvac-border-light);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hvac-attendee-count {
|
||||
display: inline-block;
|
||||
padding: 0.3rem 0.8rem;
|
||||
background-color: var(--hvac-primary-light);
|
||||
color: var(--hvac-primary);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Table Styling */
|
||||
.hvac-transactions-table-wrapper {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--hvac-border);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
}
|
||||
|
||||
/* Basic Table Styling - Inherit Astra's base styles where possible */
|
||||
.hvac-transactions-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.hvac-transactions-table th,
|
||||
.hvac-transactions-table td {
|
||||
text-align: left;
|
||||
padding: 0.8em 1em;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.hvac-transactions-table th {
|
||||
background-color: #f8f8f8; /* Light background for header */
|
||||
font-weight: bold;
|
||||
background-color: #f8f9fa;
|
||||
color: var(--hvac-secondary-dark);
|
||||
padding: var(--hvac-spacing-md);
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
border-bottom: 2px solid var(--hvac-border);
|
||||
}
|
||||
|
||||
.hvac-transactions-table tbody tr:nth-child(odd) {
|
||||
background-color: #fdfdfd; /* Subtle striping */
|
||||
.hvac-transactions-table td {
|
||||
padding: var(--hvac-spacing-md);
|
||||
border-bottom: 1px solid var(--hvac-border-light);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.hvac-transactions-table tbody tr:hover {
|
||||
background-color: #f1f1f1; /* Hover effect */
|
||||
background-color: var(--hvac-primary-light);
|
||||
}
|
||||
|
||||
/* Ensure edit button has some margin */
|
||||
.entry-header .button.astra-button {
|
||||
margin-left: 1em;
|
||||
vertical-align: middle; /* Align with title */
|
||||
.hvac-transactions-table .attendee-name {
|
||||
font-weight: 600;
|
||||
color: var(--hvac-text);
|
||||
}
|
||||
|
||||
.hvac-transactions-table .ticket-type {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background-color: var(--hvac-secondary-light);
|
||||
color: var(--hvac-secondary-dark);
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Revenue & Transactions Section */
|
||||
.hvac-event-summary-transactions {
|
||||
margin-bottom: var(--hvac-spacing-xl);
|
||||
padding: var(--hvac-spacing-xl);
|
||||
border: 1px solid var(--hvac-border);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
background-color: white;
|
||||
box-shadow: var(--hvac-shadow);
|
||||
}
|
||||
|
||||
.hvac-event-summary-transactions h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
font-size: 1.4rem;
|
||||
color: var(--hvac-text);
|
||||
padding-bottom: var(--hvac-spacing-sm);
|
||||
border-bottom: 1px solid var(--hvac-border-light);
|
||||
}
|
||||
|
||||
.hvac-revenue-summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--hvac-spacing-md);
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
padding: var(--hvac-spacing-md);
|
||||
background-color: var(--hvac-primary-light);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
}
|
||||
|
||||
.hvac-revenue-item {
|
||||
flex: 1;
|
||||
min-width: 180px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hvac-revenue-item h3 {
|
||||
margin: 0 0 var(--hvac-spacing-xs) 0;
|
||||
font-size: 0.9rem;
|
||||
color: var(--hvac-text-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hvac-revenue-item .revenue-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--hvac-primary);
|
||||
}
|
||||
|
||||
/* No Attendees Message */
|
||||
.hvac-no-attendees {
|
||||
padding: var(--hvac-spacing-lg);
|
||||
background-color: var(--hvac-secondary-light);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
text-align: center;
|
||||
color: var(--hvac-secondary-dark);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.hvac-event-summary-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hvac-event-summary-actions {
|
||||
margin-top: var(--hvac-spacing-md);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hvac-event-summary-actions a {
|
||||
flex: 1;
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.hvac-event-summary-details,
|
||||
.hvac-event-summary-attendees,
|
||||
.hvac-event-summary-transactions {
|
||||
padding: var(--hvac-spacing-md);
|
||||
}
|
||||
|
||||
.hvac-event-detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--hvac-spacing-md);
|
||||
}
|
||||
|
||||
.hvac-revenue-item {
|
||||
flex-basis: calc(50% - var(--hvac-spacing-md));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hvac-event-summary-title h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.hvac-event-stat-card {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.hvac-revenue-item {
|
||||
flex-basis: 100%;
|
||||
margin-bottom: var(--hvac-spacing-sm);
|
||||
}
|
||||
|
||||
.hvac-event-summary-attendees h2 {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hvac-attendee-count {
|
||||
margin-top: var(--hvac-spacing-xs);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
/**
|
||||
* HVAC Community Events Mobile Navigation
|
||||
*
|
||||
* This stylesheet provides an enhanced mobile navigation experience
|
||||
* for the dashboard and other main pages of the HVAC Community Events plugin.
|
||||
*/
|
||||
|
||||
/* Mobile Navigation Container */
|
||||
.hvac-mobile-nav-container {
|
||||
display: none; /* Hidden by default, shows on mobile */
|
||||
}
|
||||
|
||||
/* Responsive nav toggle button */
|
||||
.hvac-mobile-nav-toggle {
|
||||
display: none;
|
||||
background-color: var(--hvac-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
border-radius: var(--hvac-border-radius);
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-bottom: var(--hvac-spacing-md);
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.hvac-mobile-nav-toggle::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 18px;
|
||||
height: 2px;
|
||||
background-color: white;
|
||||
box-shadow: 0 -5px 0 0 white, 0 5px 0 0 white;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hvac-mobile-nav-toggle.active::before {
|
||||
box-shadow: none;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.hvac-mobile-nav-toggle.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 50%;
|
||||
width: 18px;
|
||||
height: 2px;
|
||||
background-color: white;
|
||||
transform: translateY(-50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* Mobile navigation menu */
|
||||
.hvac-mobile-nav {
|
||||
display: none;
|
||||
background-color: white;
|
||||
border: 1px solid var(--hvac-border);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--hvac-shadow);
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
transition: max-height 0.3s ease, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.hvac-mobile-nav.open {
|
||||
display: block;
|
||||
max-height: 500px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hvac-mobile-nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hvac-mobile-nav li {
|
||||
border-bottom: 1px solid var(--hvac-border-light);
|
||||
}
|
||||
|
||||
.hvac-mobile-nav li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.hvac-mobile-nav a {
|
||||
display: block;
|
||||
padding: var(--hvac-spacing-md);
|
||||
text-decoration: none;
|
||||
color: var(--hvac-text);
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.hvac-mobile-nav a:hover,
|
||||
.hvac-mobile-nav a:focus {
|
||||
background-color: var(--hvac-primary-light);
|
||||
color: var(--hvac-primary);
|
||||
}
|
||||
|
||||
.hvac-mobile-nav a.active {
|
||||
background-color: var(--hvac-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Mobile nav icon indicator */
|
||||
.hvac-mobile-nav a i,
|
||||
.hvac-mobile-nav a svg {
|
||||
margin-right: var(--hvac-spacing-sm);
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Apply to screens smaller than 768px */
|
||||
@media (max-width: 767px) {
|
||||
/* Hide original navigation */
|
||||
.hvac-dashboard-nav,
|
||||
.hvac-event-summary-actions,
|
||||
.hvac-email-navigation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show mobile navigation components */
|
||||
.hvac-mobile-nav-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hvac-mobile-nav-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Adjust header spacing */
|
||||
.hvac-dashboard-header,
|
||||
.hvac-event-summary-header,
|
||||
.hvac-email-header {
|
||||
margin-bottom: var(--hvac-spacing-md);
|
||||
padding-bottom: var(--hvac-spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
/* Slide-out navigation for larger mobile screens */
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
.hvac-mobile-nav {
|
||||
position: relative;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
max-height: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hvac-mobile-nav.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,271 @@
|
|||
/**
|
||||
* HVAC Community Events Print Styles
|
||||
*
|
||||
* This stylesheet optimizes event summary and other pages for printing,
|
||||
* hiding unnecessary elements and formatting content for paper output.
|
||||
*/
|
||||
|
||||
@media print {
|
||||
/* Global print styles */
|
||||
* {
|
||||
background: transparent !important;
|
||||
color: #000 !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
filter: none !important;
|
||||
-ms-filter: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 12pt;
|
||||
line-height: 1.4;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/* Hide non-essential elements */
|
||||
header,
|
||||
footer,
|
||||
nav,
|
||||
aside,
|
||||
.sidebar,
|
||||
.navigation,
|
||||
.hvac-event-summary-actions,
|
||||
.hvac-dashboard-header,
|
||||
.hvac-dashboard-nav,
|
||||
.hvac-mobile-nav-container,
|
||||
.hvac-dashboard-filter,
|
||||
.hvac-event-filters,
|
||||
.hvac-email-navigation,
|
||||
.site-header,
|
||||
.site-footer,
|
||||
#site-navigation,
|
||||
#comments,
|
||||
#respond,
|
||||
#secondary,
|
||||
.widget-area,
|
||||
button,
|
||||
input[type="submit"],
|
||||
.hvac-button,
|
||||
.button,
|
||||
.ast-button,
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Allow wrapping of URLs and words */
|
||||
a, blockquote {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
page-break-after: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
page-break-after: avoid;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
table, pre {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
ul, ol, dl {
|
||||
page-break-before: avoid;
|
||||
}
|
||||
|
||||
/* Show URLs after links */
|
||||
a[href^="http"]:after {
|
||||
content: " (" attr(href) ")";
|
||||
font-size: 90%;
|
||||
color: #555 !important;
|
||||
}
|
||||
|
||||
/* Don't show URLs for same-domain links */
|
||||
a[href^="/"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Event Summary specific print styles */
|
||||
.hvac-event-summary-wrapper {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.hvac-event-summary-title h1 {
|
||||
font-size: 18pt;
|
||||
margin-bottom: 1cm;
|
||||
padding-bottom: 0.5cm;
|
||||
border-bottom: 1pt solid #ddd;
|
||||
}
|
||||
|
||||
.hvac-event-summary-stats {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 0.5cm !important;
|
||||
border: 1pt solid #ddd !important;
|
||||
padding: 0.5cm !important;
|
||||
margin-bottom: 1cm !important;
|
||||
}
|
||||
|
||||
.hvac-event-stat-card {
|
||||
flex: 1 1 45% !important;
|
||||
border: 1pt solid #eee !important;
|
||||
padding: 0.5cm !important;
|
||||
text-align: center !important;
|
||||
box-shadow: none !important;
|
||||
page-break-inside: avoid !important;
|
||||
min-width: 5cm !important;
|
||||
}
|
||||
|
||||
.hvac-event-stat-card .stat-value {
|
||||
font-size: 16pt !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
/* Details and tables for printing */
|
||||
.hvac-event-summary-details,
|
||||
.hvac-event-summary-attendees,
|
||||
.hvac-event-summary-transactions {
|
||||
border: 1pt solid #ddd !important;
|
||||
padding: 0.5cm !important;
|
||||
margin-bottom: 1cm !important;
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
|
||||
.hvac-event-summary-details h2,
|
||||
.hvac-event-summary-attendees h2,
|
||||
.hvac-event-summary-transactions h2 {
|
||||
font-size: 14pt !important;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0.5cm !important;
|
||||
padding-bottom: 0.25cm !important;
|
||||
border-bottom: 1pt solid #ddd !important;
|
||||
}
|
||||
|
||||
.hvac-table,
|
||||
.hvac-transactions-table,
|
||||
.events-table {
|
||||
width: 100% !important;
|
||||
border-collapse: collapse !important;
|
||||
margin-bottom: 0.5cm !important;
|
||||
font-size: 9pt !important;
|
||||
}
|
||||
|
||||
.hvac-table th,
|
||||
.hvac-transactions-table th,
|
||||
.events-table th {
|
||||
text-align: left !important;
|
||||
padding: 0.25cm !important;
|
||||
border-bottom: 1pt solid #000 !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.hvac-table td,
|
||||
.hvac-transactions-table td,
|
||||
.events-table td {
|
||||
padding: 0.25cm !important;
|
||||
border-bottom: 1pt solid #ddd !important;
|
||||
}
|
||||
|
||||
/* Add print header with logo and date */
|
||||
.hvac-event-summary-wrapper::before {
|
||||
content: "HVAC Community Events - Event Summary" !important;
|
||||
display: block !important;
|
||||
font-size: 10pt !important;
|
||||
text-align: right !important;
|
||||
color: #999 !important;
|
||||
margin-bottom: 0.25cm !important;
|
||||
}
|
||||
|
||||
/* Dashboard specific print styles */
|
||||
.hvac-dashboard {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.hvac-dashboard-stats {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 0.5cm !important;
|
||||
margin-bottom: 1cm !important;
|
||||
}
|
||||
|
||||
.hvac-stat-card {
|
||||
flex: 1 1 45% !important;
|
||||
border: 1pt solid #eee !important;
|
||||
padding: 0.5cm !important;
|
||||
text-align: center !important;
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
|
||||
.hvac-dashboard-events {
|
||||
margin-bottom: 1cm !important;
|
||||
}
|
||||
|
||||
/* Email attendees specific print styles */
|
||||
.hvac-email-attendees-wrapper {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.hvac-email-form {
|
||||
display: none !important; /* Hide the email form when printing */
|
||||
}
|
||||
|
||||
.hvac-attendee-list {
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Page break control */
|
||||
.hvac-event-summary-attendees {
|
||||
page-break-before: always !important;
|
||||
}
|
||||
|
||||
/* QR code for event details (if available) */
|
||||
.hvac-event-qr-code {
|
||||
display: block !important;
|
||||
max-width: 4cm !important;
|
||||
margin: 0.5cm auto 1cm auto !important;
|
||||
}
|
||||
|
||||
/* Add page numbering */
|
||||
@page {
|
||||
margin: 1.5cm !important;
|
||||
}
|
||||
|
||||
@page :first {
|
||||
margin-top: 2cm !important;
|
||||
}
|
||||
|
||||
@page :left {
|
||||
margin-right: 2cm !important;
|
||||
}
|
||||
|
||||
@page :right {
|
||||
margin-left: 2cm !important;
|
||||
}
|
||||
|
||||
/* Add page numbers */
|
||||
body::after {
|
||||
content: "Page " counter(page) !important;
|
||||
counter-increment: page !important;
|
||||
position: fixed !important;
|
||||
bottom: 0.5cm !important;
|
||||
right: 0.5cm !important;
|
||||
font-size: 8pt !important;
|
||||
color: #999 !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +1,96 @@
|
|||
/* HVAC Trainer Registration Form Styles */
|
||||
/**
|
||||
* HVAC Trainer Registration Form Enhanced Styles
|
||||
*
|
||||
* @version 2.0.0
|
||||
*/
|
||||
|
||||
/* Main Container */
|
||||
.hvac-registration-form-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: var(--hvac-spacing-xl) var(--hvac-spacing-md);
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* Form Card */
|
||||
.hvac-registration-form {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.05);
|
||||
padding: var(--hvac-spacing-xl);
|
||||
background-color: white;
|
||||
border-radius: var(--hvac-border-radius);
|
||||
box-shadow: var(--hvac-shadow-lg);
|
||||
border: 1px solid var(--hvac-border);
|
||||
}
|
||||
|
||||
/* Form Header */
|
||||
.hvac-registration-form-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--hvac-spacing-xl);
|
||||
padding-bottom: var(--hvac-spacing-md);
|
||||
border-bottom: 1px solid var(--hvac-border-light);
|
||||
}
|
||||
|
||||
.hvac-registration-form h2 {
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
color: var(--hvac-primary);
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: var(--hvac-spacing-sm);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hvac-registration-form-header p {
|
||||
color: var(--hvac-text-light);
|
||||
font-size: 1rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Form Sections */
|
||||
.hvac-registration-form .form-section {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom: var(--hvac-spacing-xl);
|
||||
padding-bottom: var(--hvac-spacing-lg);
|
||||
border-bottom: 1px solid var(--hvac-border-light);
|
||||
}
|
||||
|
||||
.hvac-registration-form .form-section:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.hvac-registration-form .form-section h3 {
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--hvac-secondary-dark);
|
||||
margin-bottom: var(--hvac-spacing-md);
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
padding-bottom: var(--hvac-spacing-sm);
|
||||
border-bottom: 1px dashed var(--hvac-border-light);
|
||||
}
|
||||
|
||||
/* Form Grid Layout */
|
||||
.hvac-registration-form .form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: var(--hvac-spacing-md);
|
||||
}
|
||||
|
||||
/* Form Rows */
|
||||
.hvac-registration-form .form-row {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: var(--hvac-spacing-md);
|
||||
}
|
||||
|
||||
/* Form Fields */
|
||||
.hvac-registration-form label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-bottom: var(--hvac-spacing-sm);
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
color: var(--hvac-text);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.hvac-registration-form label .required {
|
||||
color: var(--hvac-error);
|
||||
margin-left: var(--hvac-spacing-xs);
|
||||
}
|
||||
|
||||
.hvac-registration-form input[type="text"],
|
||||
|
|
@ -43,64 +100,237 @@
|
|||
.hvac-registration-form textarea,
|
||||
.hvac-registration-form select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 0.85rem;
|
||||
border: 1px solid var(--hvac-border);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.hvac-registration-form input[type="text"]:focus,
|
||||
.hvac-registration-form input[type="email"]:focus,
|
||||
.hvac-registration-form input[type="password"]:focus,
|
||||
.hvac-registration-form input[type="url"]:focus,
|
||||
.hvac-registration-form textarea:focus,
|
||||
.hvac-registration-form select:focus {
|
||||
border-color: var(--hvac-primary);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px var(--hvac-primary-light);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.hvac-registration-form textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.hvac-registration-form select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
background-size: 16px 12px;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
/* Field Helper Text */
|
||||
.hvac-registration-form .field-help {
|
||||
margin-top: var(--hvac-spacing-xs);
|
||||
font-size: 0.85rem;
|
||||
color: var(--hvac-text-light);
|
||||
}
|
||||
|
||||
/* Submit Button Section */
|
||||
.hvac-registration-form .form-submit {
|
||||
margin-top: 2rem;
|
||||
margin-top: var(--hvac-spacing-xl);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hvac-registration-form input[type="submit"] {
|
||||
background-color: #0274be;
|
||||
display: inline-block;
|
||||
padding: 0.85rem 2.5rem;
|
||||
background-color: var(--hvac-primary);
|
||||
color: white;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--hvac-border-radius);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: background-color 0.3s;
|
||||
text-align: center;
|
||||
transition: background-color 0.2s, transform 0.1s;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
box-shadow: var(--hvac-shadow);
|
||||
}
|
||||
|
||||
.hvac-registration-form input[type="submit"]:hover {
|
||||
background-color: #0261a0;
|
||||
background-color: var(--hvac-primary-dark);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--hvac-shadow-lg);
|
||||
}
|
||||
|
||||
/* Checkbox/Radio Group Styles */
|
||||
.hvac-registration-form input[type="submit"]:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Checkbox & Radio Styles */
|
||||
.hvac-registration-form .checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
gap: var(--hvac-spacing-sm);
|
||||
margin-top: var(--hvac-spacing-sm);
|
||||
}
|
||||
|
||||
.hvac-registration-form .checkbox-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
gap: var(--hvac-spacing-sm);
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.hvac-registration-form .checkbox-group input[type="checkbox"],
|
||||
.hvac-registration-form .checkbox-group input[type="radio"] {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Error message styling */
|
||||
/* Error Messages */
|
||||
.hvac-registration-form .hvac-errors {
|
||||
background-color: #fff0f0;
|
||||
border: 1px solid #ffcccc;
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
background-color: var(--hvac-error-light);
|
||||
border: 1px solid var(--hvac-error);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
padding: var(--hvac-spacing-md);
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
color: var(--hvac-error);
|
||||
}
|
||||
|
||||
.hvac-registration-form .hvac-errors .error {
|
||||
color: #d63638;
|
||||
margin: 0.25rem 0;
|
||||
margin: var(--hvac-spacing-xs) 0;
|
||||
}
|
||||
|
||||
.hvac-registration-form .form-row.has-error input,
|
||||
.hvac-registration-form .form-row.has-error select,
|
||||
.hvac-registration-form .form-row.has-error textarea {
|
||||
border-color: var(--hvac-error);
|
||||
}
|
||||
|
||||
.hvac-registration-form .form-row.has-error .field-error {
|
||||
color: var(--hvac-error);
|
||||
font-size: 0.85rem;
|
||||
margin-top: var(--hvac-spacing-xs);
|
||||
}
|
||||
|
||||
/* Success Message */
|
||||
.hvac-registration-form .hvac-success {
|
||||
background-color: var(--hvac-success-light);
|
||||
border: 1px solid var(--hvac-success);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
padding: var(--hvac-spacing-md);
|
||||
margin-bottom: var(--hvac-spacing-lg);
|
||||
color: var(--hvac-success);
|
||||
}
|
||||
|
||||
/* Login Link */
|
||||
.hvac-login-link {
|
||||
margin-top: var(--hvac-spacing-lg);
|
||||
text-align: center;
|
||||
padding-top: var(--hvac-spacing-md);
|
||||
border-top: 1px solid var(--hvac-border-light);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.hvac-login-link a {
|
||||
color: var(--hvac-primary);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hvac-login-link a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Progress Indicator for Multi-step Forms */
|
||||
.hvac-registration-progress {
|
||||
margin-bottom: var(--hvac-spacing-xl);
|
||||
padding: var(--hvac-spacing-md);
|
||||
background-color: var(--hvac-secondary-light);
|
||||
border-radius: var(--hvac-border-radius);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hvac-registration-progress::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: var(--hvac-spacing-md);
|
||||
right: var(--hvac-spacing-md);
|
||||
height: 2px;
|
||||
background-color: var(--hvac-border);
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hvac-registration-step {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
border: 2px solid var(--hvac-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hvac-registration-step.active {
|
||||
background-color: var(--hvac-primary);
|
||||
border-color: var(--hvac-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hvac-registration-step.completed {
|
||||
background-color: var(--hvac-success);
|
||||
border-color: var(--hvac-success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.hvac-registration-form {
|
||||
padding: var(--hvac-spacing-lg);
|
||||
}
|
||||
|
||||
.hvac-registration-form .form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hvac-registration-form h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.hvac-registration-progress {
|
||||
padding: var(--hvac-spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hvac-registration-form {
|
||||
padding: var(--hvac-spacing-md);
|
||||
}
|
||||
|
||||
.hvac-registration-form h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.hvac-registration-form .form-submit input[type="submit"] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* HVAC Community Events Accessibility Helper
|
||||
*
|
||||
* This script helps improve accessibility by:
|
||||
* 1. Detecting keyboard navigation to show focus styles only when needed
|
||||
* 2. Adding skip links for keyboard users
|
||||
*/
|
||||
|
||||
(function() {
|
||||
// Function to run when DOM is fully loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add keyboard navigation detection
|
||||
function handleFirstTab(e) {
|
||||
if (e.keyCode === 9) { // Tab key
|
||||
document.body.classList.add('user-is-tabbing');
|
||||
|
||||
// Remove the event listener after first tab press
|
||||
window.removeEventListener('keydown', handleFirstTab);
|
||||
|
||||
// Add listener for mouse use
|
||||
window.addEventListener('mousedown', handleMouseDownOnce);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove tabbing class when mouse is used
|
||||
function handleMouseDownOnce() {
|
||||
document.body.classList.remove('user-is-tabbing');
|
||||
|
||||
// Re-add tab listener
|
||||
window.removeEventListener('mousedown', handleMouseDownOnce);
|
||||
window.addEventListener('keydown', handleFirstTab);
|
||||
}
|
||||
|
||||
// Add initial keyboard detection
|
||||
window.addEventListener('keydown', handleFirstTab);
|
||||
|
||||
// Add skip links to all HVAC pages
|
||||
const mainContent = document.querySelector('.hvac-content, #primary, .entry-content');
|
||||
if (mainContent) {
|
||||
// Create skip link
|
||||
const skipLink = document.createElement('a');
|
||||
skipLink.href = '#content';
|
||||
skipLink.className = 'hvac-skip-link';
|
||||
skipLink.innerText = 'Skip to main content';
|
||||
skipLink.setAttribute('tabindex', '0');
|
||||
|
||||
// Add ID to main content
|
||||
mainContent.setAttribute('id', 'content');
|
||||
|
||||
// Insert skip link as first element in body
|
||||
document.body.insertBefore(skipLink, document.body.firstChild);
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
/**
|
||||
* HVAC Community Events Animation Helper
|
||||
*
|
||||
* This script adds animation support for dynamic elements and
|
||||
* provides animation utility functions.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Apply animations to elements with data-animate attribute
|
||||
function animateElements() {
|
||||
const elements = document.querySelectorAll('[data-animate]');
|
||||
|
||||
elements.forEach(element => {
|
||||
const animationClass = element.getAttribute('data-animate');
|
||||
const delay = element.getAttribute('data-animate-delay') || 0;
|
||||
|
||||
setTimeout(() => {
|
||||
element.classList.add(animationClass);
|
||||
element.style.opacity = '1';
|
||||
}, delay);
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize animations when page loads
|
||||
animateElements();
|
||||
|
||||
// Apply animations to dynamically added content
|
||||
function setupMutationObserver() {
|
||||
// Watch for new elements being added to the DOM
|
||||
const observer = new MutationObserver(mutations => {
|
||||
mutations.forEach(mutation => {
|
||||
if (mutation.addedNodes && mutation.addedNodes.length > 0) {
|
||||
// Check if any added node has animation attributes
|
||||
mutation.addedNodes.forEach(node => {
|
||||
// Skip non-element nodes
|
||||
if (node.nodeType !== 1) return;
|
||||
|
||||
// Check for data-animate attribute
|
||||
if (node.getAttribute('data-animate')) {
|
||||
const animationClass = node.getAttribute('data-animate');
|
||||
const delay = node.getAttribute('data-animate-delay') || 0;
|
||||
|
||||
setTimeout(() => {
|
||||
node.classList.add(animationClass);
|
||||
node.style.opacity = '1';
|
||||
}, delay);
|
||||
}
|
||||
|
||||
// Check children for data-animate attribute
|
||||
const childElements = node.querySelectorAll('[data-animate]');
|
||||
if (childElements.length > 0) {
|
||||
childElements.forEach(element => {
|
||||
const animationClass = element.getAttribute('data-animate');
|
||||
const delay = element.getAttribute('data-animate-delay') || 0;
|
||||
|
||||
setTimeout(() => {
|
||||
element.classList.add(animationClass);
|
||||
element.style.opacity = '1';
|
||||
}, delay);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Start observing the document
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
}
|
||||
|
||||
// Start the observer
|
||||
setupMutationObserver();
|
||||
|
||||
// Animate table rows in sequence
|
||||
function animateTableRows() {
|
||||
const tables = document.querySelectorAll('.hvac-table, .events-table, .hvac-transactions-table');
|
||||
|
||||
tables.forEach(table => {
|
||||
const rows = table.querySelectorAll('tbody tr');
|
||||
|
||||
rows.forEach((row, index) => {
|
||||
row.style.opacity = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
row.classList.add('hvac-animate-slide-in-bottom');
|
||||
row.style.opacity = '1';
|
||||
}, 50 * (index + 1)); // Stagger animation
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Run table row animations
|
||||
setTimeout(animateTableRows, 300);
|
||||
|
||||
// Add animation class to alerts and messages
|
||||
const alerts = document.querySelectorAll('.hvac-alert, .hvac-email-sent, .hvac-email-error, .login-error, .hvac-errors, .hvac-success');
|
||||
alerts.forEach(alert => {
|
||||
alert.classList.add('hvac-animate-fade-in');
|
||||
});
|
||||
|
||||
// Expose animation API to global scope
|
||||
window.hvacAnimations = {
|
||||
animateElement: function(element, animationClass, delay = 0) {
|
||||
if (!element) return;
|
||||
|
||||
element.style.opacity = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
element.classList.add(animationClass);
|
||||
element.style.opacity = '1';
|
||||
}, delay);
|
||||
},
|
||||
|
||||
animateElements: animateElements,
|
||||
animateTableRows: animateTableRows
|
||||
};
|
||||
|
||||
// Check if user prefers reduced motion
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
if (prefersReducedMotion) {
|
||||
document.body.classList.add('reduced-motion');
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
/**
|
||||
* HVAC Community Events Mobile Navigation
|
||||
*
|
||||
* This script handles the mobile navigation functionality including:
|
||||
* - Creating mobile menu from existing navigation elements
|
||||
* - Toggle functionality for mobile menu
|
||||
* - Highlighting active menu items
|
||||
* - Handling page-specific navigation setups
|
||||
*/
|
||||
|
||||
(function() {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Mobile navigation setup
|
||||
function setupMobileNavigation() {
|
||||
// Target pages that need mobile navigation
|
||||
const dashboardPage = document.querySelector('.hvac-dashboard');
|
||||
const eventSummaryPage = document.querySelector('.hvac-event-summary-wrapper');
|
||||
const emailAttendeesPage = document.querySelector('.hvac-email-attendees-wrapper');
|
||||
|
||||
// Only run on pages with these elements
|
||||
if (!dashboardPage && !eventSummaryPage && !emailAttendeesPage) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Find the appropriate existing navigation element
|
||||
let existingNav = null;
|
||||
let headerElement = null;
|
||||
let pageType = '';
|
||||
|
||||
if (dashboardPage) {
|
||||
existingNav = document.querySelector('.hvac-dashboard-nav');
|
||||
headerElement = document.querySelector('.hvac-dashboard-header');
|
||||
pageType = 'dashboard';
|
||||
} else if (eventSummaryPage) {
|
||||
existingNav = document.querySelector('.hvac-event-summary-actions');
|
||||
headerElement = document.querySelector('.hvac-event-summary-header');
|
||||
pageType = 'event-summary';
|
||||
} else if (emailAttendeesPage) {
|
||||
existingNav = document.querySelector('.hvac-email-navigation');
|
||||
headerElement = document.querySelector('.hvac-email-header');
|
||||
pageType = 'email-attendees';
|
||||
}
|
||||
|
||||
// If no existing navigation found, exit
|
||||
if (!existingNav || !headerElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create mobile nav container
|
||||
const mobileNavContainer = document.createElement('div');
|
||||
mobileNavContainer.className = 'hvac-mobile-nav-container';
|
||||
|
||||
// Create toggle button
|
||||
const toggleButton = document.createElement('button');
|
||||
toggleButton.className = 'hvac-mobile-nav-toggle';
|
||||
toggleButton.setAttribute('aria-label', 'Toggle navigation menu');
|
||||
toggleButton.setAttribute('aria-expanded', 'false');
|
||||
toggleButton.innerText = 'Menu';
|
||||
|
||||
// Create mobile nav menu
|
||||
const mobileNav = document.createElement('nav');
|
||||
mobileNav.className = 'hvac-mobile-nav';
|
||||
mobileNav.setAttribute('aria-label', 'Mobile navigation');
|
||||
|
||||
// Create list of menu items by cloning original nav links
|
||||
const navList = document.createElement('ul');
|
||||
const links = existingNav.querySelectorAll('a');
|
||||
|
||||
links.forEach(link => {
|
||||
const listItem = document.createElement('li');
|
||||
const newLink = link.cloneNode(true);
|
||||
|
||||
// Highlight active page in mobile nav
|
||||
if (newLink.getAttribute('href') === window.location.pathname ||
|
||||
newLink.getAttribute('href') === window.location.href) {
|
||||
newLink.classList.add('active');
|
||||
}
|
||||
|
||||
listItem.appendChild(newLink);
|
||||
navList.appendChild(listItem);
|
||||
});
|
||||
|
||||
mobileNav.appendChild(navList);
|
||||
|
||||
// Add components to container
|
||||
mobileNavContainer.appendChild(toggleButton);
|
||||
mobileNavContainer.appendChild(mobileNav);
|
||||
|
||||
// Insert container after the header
|
||||
headerElement.after(mobileNavContainer);
|
||||
|
||||
// Toggle button functionality
|
||||
toggleButton.addEventListener('click', function() {
|
||||
const isOpen = mobileNav.classList.contains('open');
|
||||
|
||||
if (isOpen) {
|
||||
mobileNav.classList.remove('open');
|
||||
toggleButton.classList.remove('active');
|
||||
toggleButton.setAttribute('aria-expanded', 'false');
|
||||
} else {
|
||||
mobileNav.classList.add('open');
|
||||
toggleButton.classList.add('active');
|
||||
toggleButton.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu when a link is clicked
|
||||
mobileNav.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', function() {
|
||||
mobileNav.classList.remove('open');
|
||||
toggleButton.classList.remove('active');
|
||||
toggleButton.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener('click', function(event) {
|
||||
if (!mobileNavContainer.contains(event.target)) {
|
||||
mobileNav.classList.remove('open');
|
||||
toggleButton.classList.remove('active');
|
||||
toggleButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
// Add keyboard navigation
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Escape' && mobileNav.classList.contains('open')) {
|
||||
mobileNav.classList.remove('open');
|
||||
toggleButton.classList.remove('active');
|
||||
toggleButton.setAttribute('aria-expanded', 'false');
|
||||
toggleButton.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Run setup
|
||||
setupMobileNavigation();
|
||||
});
|
||||
})();
|
||||
|
|
@ -168,21 +168,116 @@ register_deactivation_hook(__FILE__, 'hvac_ce_remove_roles');
|
|||
|
||||
|
||||
/**
|
||||
* Enqueue styles specifically for the HVAC Dashboard page.
|
||||
* Enqueue common styles and scripts for all HVAC Community Events pages
|
||||
*/
|
||||
function hvac_ce_enqueue_dashboard_styles() {
|
||||
// Check if we are on the specific dashboard page
|
||||
// Assumes the page slug is 'hvac-dashboard' as created in the activation hook
|
||||
function hvac_ce_enqueue_common_assets() {
|
||||
// Enqueue the common CSS file for all pages
|
||||
wp_enqueue_style(
|
||||
'hvac-common-style',
|
||||
HVAC_CE_PLUGIN_URL . 'assets/css/hvac-common.css',
|
||||
[], // No dependencies
|
||||
HVAC_CE_VERSION
|
||||
);
|
||||
|
||||
// Enqueue animations CSS file
|
||||
wp_enqueue_style(
|
||||
'hvac-animations',
|
||||
HVAC_CE_PLUGIN_URL . 'assets/css/hvac-animations.css',
|
||||
['hvac-common-style'], // Depends on common styles
|
||||
HVAC_CE_VERSION
|
||||
);
|
||||
|
||||
// Enqueue mobile navigation CSS file
|
||||
wp_enqueue_style(
|
||||
'hvac-mobile-nav',
|
||||
HVAC_CE_PLUGIN_URL . 'assets/css/hvac-mobile-nav.css',
|
||||
['hvac-common-style'], // Depends on common styles
|
||||
HVAC_CE_VERSION
|
||||
);
|
||||
|
||||
// Enqueue print stylesheet
|
||||
wp_enqueue_style(
|
||||
'hvac-print-style',
|
||||
HVAC_CE_PLUGIN_URL . 'assets/css/hvac-print.css',
|
||||
['hvac-common-style'], // Depends on common styles
|
||||
HVAC_CE_VERSION,
|
||||
'print' // Print media only
|
||||
);
|
||||
|
||||
// Enqueue the accessibility helper JS for all pages
|
||||
wp_enqueue_script(
|
||||
'hvac-accessibility-js',
|
||||
HVAC_CE_PLUGIN_URL . 'assets/js/hvac-accessibility.js',
|
||||
[], // No dependencies
|
||||
HVAC_CE_VERSION,
|
||||
true // Load in footer
|
||||
);
|
||||
|
||||
// Enqueue animations JS for all pages
|
||||
wp_enqueue_script(
|
||||
'hvac-animations-js',
|
||||
HVAC_CE_PLUGIN_URL . 'assets/js/hvac-animations.js',
|
||||
[], // No dependencies
|
||||
HVAC_CE_VERSION,
|
||||
true // Load in footer
|
||||
);
|
||||
|
||||
// Enqueue mobile navigation JS for all pages
|
||||
wp_enqueue_script(
|
||||
'hvac-mobile-nav-js',
|
||||
HVAC_CE_PLUGIN_URL . 'assets/js/hvac-mobile-nav.js',
|
||||
[], // No dependencies
|
||||
HVAC_CE_VERSION,
|
||||
true // Load in footer
|
||||
);
|
||||
|
||||
// Enqueue page-specific styles based on current page
|
||||
if (is_page('hvac-dashboard')) {
|
||||
wp_enqueue_style(
|
||||
'hvac-dashboard-style',
|
||||
HVAC_CE_PLUGIN_URL . 'assets/css/hvac-dashboard.css',
|
||||
[], // No dependencies for now
|
||||
['hvac-common-style'], // Depends on common styles
|
||||
HVAC_CE_VERSION
|
||||
);
|
||||
}
|
||||
|
||||
if (is_page('community-login')) {
|
||||
wp_enqueue_style(
|
||||
'hvac-community-login-style',
|
||||
HVAC_CE_PLUGIN_URL . 'assets/css/community-login.css',
|
||||
['hvac-common-style'], // Depends on common styles
|
||||
HVAC_CE_VERSION
|
||||
);
|
||||
}
|
||||
|
||||
if (is_page('trainer-registration')) {
|
||||
wp_enqueue_style(
|
||||
'hvac-registration-style',
|
||||
HVAC_CE_PLUGIN_URL . 'assets/css/hvac-registration.css',
|
||||
['hvac-common-style'], // Depends on common styles
|
||||
HVAC_CE_VERSION
|
||||
);
|
||||
}
|
||||
|
||||
if (is_page('email-attendees')) {
|
||||
wp_enqueue_style(
|
||||
'hvac-email-attendees-style',
|
||||
HVAC_CE_PLUGIN_URL . 'assets/css/hvac-email-attendees.css',
|
||||
['hvac-common-style'], // Depends on common styles
|
||||
HVAC_CE_VERSION
|
||||
);
|
||||
}
|
||||
|
||||
if (is_singular(Tribe__Events__Main::POSTTYPE) || is_page('event-summary')) {
|
||||
wp_enqueue_style(
|
||||
'hvac-event-summary-style',
|
||||
HVAC_CE_PLUGIN_URL . 'assets/css/hvac-event-summary.css',
|
||||
['hvac-common-style'], // Depends on common styles
|
||||
HVAC_CE_VERSION
|
||||
);
|
||||
}
|
||||
}
|
||||
add_action( 'wp_enqueue_scripts', 'hvac_ce_enqueue_dashboard_styles' );
|
||||
add_action('wp_enqueue_scripts', 'hvac_ce_enqueue_common_assets');
|
||||
|
||||
/**
|
||||
* Enqueue styles and scripts for admin dashboard
|
||||
|
|
@ -216,40 +311,6 @@ function hvac_ce_enqueue_admin_assets($hook) {
|
|||
'nonce' => wp_create_nonce('hvac_admin_nonce')
|
||||
));
|
||||
}
|
||||
add_action('admin_enqueue_scripts', 'hvac_ce_enqueue_admin_assets');
|
||||
|
||||
|
||||
/**
|
||||
* Enqueue styles specifically for the HVAC Event Summary page.
|
||||
*/
|
||||
function hvac_ce_enqueue_event_summary_styles() {
|
||||
// Check if we are on a single event page
|
||||
if ( is_singular( Tribe__Events__Main::POSTTYPE ) ) {
|
||||
wp_enqueue_style(
|
||||
'hvac-event-summary-style',
|
||||
HVAC_CE_PLUGIN_URL . 'assets/css/hvac-event-summary.css',
|
||||
[], // No dependencies for now
|
||||
HVAC_CE_VERSION
|
||||
);
|
||||
}
|
||||
}
|
||||
add_action( 'wp_enqueue_scripts', 'hvac_ce_enqueue_event_summary_styles' );
|
||||
|
||||
/**
|
||||
* Enqueue styles specifically for the HVAC Email Attendees page.
|
||||
*/
|
||||
function hvac_ce_enqueue_email_attendees_styles() {
|
||||
// Check if we are on the email attendees page
|
||||
if ( is_page( 'email-attendees' ) ) {
|
||||
wp_enqueue_style(
|
||||
'hvac-email-attendees-style',
|
||||
HVAC_CE_PLUGIN_URL . 'assets/css/hvac-email-attendees.css',
|
||||
[], // No dependencies for now
|
||||
HVAC_CE_VERSION
|
||||
);
|
||||
}
|
||||
}
|
||||
add_action( 'wp_enqueue_scripts', 'hvac_ce_enqueue_email_attendees_styles' );
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue