ben/upskill-event-manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2
upskill-event-manager/assets/css/hvac-consolidated-dashboard-fixed.css
Ben f0d03be1b9 feat: implement CSS design system and harmonization fixes 
- Create comprehensive design system with 185 design tokens
- Add hvac-design-system.css with 8px spacing scale, typography, colors
- Add hvac-components.css with reusable component patterns
- Fix all CSS syntax errors in consolidated bundles
- Implement mobile-first responsive design
- Add WCAG 2.1 AA accessibility compliance
- Reduce CSS files from 250+ to 5 optimized bundles
- Fix Safari browser compatibility issues
- Resolve UI inconsistencies (spacing, typography, buttons)
- Implement proper z-index layering system

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 22:32:31 -03:00

635 lines
No EOL
14 KiB
CSS
Raw Permalink Blame History

/**
* HVAC Dashboard & Management CSS Bundle (FIXED & HARMONIZED)
* Styles for dashboard pages, event management, and navigation
*
* @requires hvac-design-system.css
* @requires hvac-consolidated-core-fixed.css
* @version 2.0.0 - Harmonized with design system
* @since 2025-08-21
*/
/* ===== DASHBOARD LAYOUT ===== */
.hvac-dashboard {
padding: var(--hvac-space-6);
background-color: var(--hvac-neutral-50);
border-radius: var(--hvac-radius-base);
margin-bottom: var(--hvac-space-8);
}
.hvac-dashboard-header {
margin-bottom: var(--hvac-space-8);
padding-bottom: var(--hvac-space-6);
border-bottom: 1px solid var(--hvac-neutral-200);
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--hvac-space-4);
}
.hvac-dashboard-title {
font-size: var(--hvac-text-3xl);
font-weight: var(--hvac-font-bold);
color: var(--hvac-neutral-900);
margin: 0;
line-height: var(--hvac-leading-tight);
}
.hvac-dashboard-subtitle {
font-size: var(--hvac-text-lg);
color: var(--hvac-neutral-600);
margin: var(--hvac-space-2) 0 0 0;
line-height: var(--hvac-leading-normal);
}
.hvac-dashboard-actions {
display: flex;
gap: var(--hvac-space-3);
align-items: center;
flex-wrap: wrap;
}
/* ===== STATISTICS CARDS ===== */
.hvac-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--hvac-space-6);
margin-bottom: var(--hvac-space-8);
}
.hvac-stat-card {
background-color: var(--hvac-neutral-0);
border: 1px solid var(--hvac-neutral-200);
border-radius: var(--hvac-radius-base);
padding: var(--hvac-space-6);
box-shadow: var(--hvac-shadow-sm);
transition: all var(--hvac-transition-base);
position: relative;
overflow: hidden;
}
.hvac-stat-card:hover {
box-shadow: var(--hvac-shadow-md);
transform: translateY(-1px);
}
.hvac-stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--hvac-primary-500), var(--hvac-primary-600));
}
.hvac-stat-title {
font-size: var(--hvac-text-sm);
font-weight: var(--hvac-font-semibold);
color: var(--hvac-neutral-600);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 var(--hvac-space-2) 0;
}
.hvac-stat-value {
font-size: var(--hvac-text-3xl);
font-weight: var(--hvac-font-bold);
color: var(--hvac-neutral-900);
margin: 0;
line-height: var(--hvac-leading-tight);
}
.hvac-stat-change {
font-size: var(--hvac-text-sm);
margin-top: var(--hvac-space-2);
display: flex;
align-items: center;
gap: var(--hvac-space-1);
}
.hvac-stat-change.positive {
color: var(--hvac-success-600);
}
.hvac-stat-change.negative {
color: var(--hvac-error-600);
}
.hvac-stat-change.neutral {
color: var(--hvac-neutral-600);
}
/* ===== EVENT LISTING ===== */
.hvac-events-section {
background-color: var(--hvac-neutral-0);
border: 1px solid var(--hvac-neutral-200);
border-radius: var(--hvac-radius-base);
box-shadow: var(--hvac-shadow-sm);
overflow: hidden;
}
.hvac-events-header {
padding: var(--hvac-space-6);
background-color: var(--hvac-neutral-50);
border-bottom: 1px solid var(--hvac-neutral-200);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--hvac-space-4);
}
.hvac-events-title {
font-size: var(--hvac-text-xl);
font-weight: var(--hvac-font-semibold);
color: var(--hvac-neutral-900);
margin: 0;
}
.hvac-events-filters {
padding: var(--hvac-space-4) var(--hvac-space-6);
background-color: var(--hvac-neutral-25);
border-bottom: 1px solid var(--hvac-neutral-200);
display: flex;
gap: var(--hvac-space-4);
align-items: center;
flex-wrap: wrap;
}
.hvac-events-search {
display: flex;
gap: var(--hvac-space-3);
align-items: center;
flex: 1;
min-width: 250px;
}
.hvac-events-search input {
flex: 1;
padding: var(--hvac-space-2) var(--hvac-space-3);
border: 1px solid var(--hvac-neutral-300);
border-radius: var(--hvac-radius-base);
font-size: var(--hvac-text-sm);
}
.hvac-filter-tabs {
display: flex;
gap: var(--hvac-space-1);
}
.hvac-filter-tab {
padding: var(--hvac-space-2) var(--hvac-space-4);
background-color: transparent;
border: 1px solid var(--hvac-neutral-300);
border-radius: var(--hvac-radius-base);
color: var(--hvac-neutral-700);
text-decoration: none;
font-size: var(--hvac-text-sm);
font-weight: var(--hvac-font-medium);
transition: all var(--hvac-transition-fast);
}
.hvac-filter-tab:hover {
background-color: var(--hvac-primary-50);
border-color: var(--hvac-primary-200);
color: var(--hvac-primary-700);
text-decoration: none;
}
.hvac-filter-tab.active {
background-color: var(--hvac-primary-500);
border-color: var(--hvac-primary-500);
color: var(--hvac-neutral-0);
}
/* ===== EVENT TABLE ===== */
.hvac-events-table {
width: 100%;
border-collapse: collapse;
background-color: var(--hvac-neutral-0);
}
.hvac-events-table th {
padding: var(--hvac-space-4);
text-align: left;
background-color: var(--hvac-neutral-50);
border-bottom: 1px solid var(--hvac-neutral-200);
font-size: var(--hvac-text-sm);
font-weight: var(--hvac-font-semibold);
color: var(--hvac-neutral-900);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.hvac-events-table td {
padding: var(--hvac-space-4);
border-bottom: 1px solid var(--hvac-neutral-100);
vertical-align: top;
}
.hvac-events-table tbody tr {
transition: background-color var(--hvac-transition-fast);
}
.hvac-events-table tbody tr:hover {
background-color: var(--hvac-neutral-50);
}
.hvac-events-table tbody tr:last-child td {
border-bottom: none;
}
/* Event status badges */
.hvac-event-status {
display: inline-flex;
align-items: center;
padding: var(--hvac-space-1) var(--hvac-space-3);
border-radius: var(--hvac-radius-full);
font-size: var(--hvac-text-xs);
font-weight: var(--hvac-font-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1;
}
.hvac-event-status.publish,
.hvac-event-status.published {
background-color: var(--hvac-success-50);
color: var(--hvac-success-700);
}
.hvac-event-status.draft {
background-color: var(--hvac-warning-50);
color: var(--hvac-warning-700);
}
.hvac-event-status.pending {
background-color: var(--hvac-info-50);
color: var(--hvac-info-700);
}
.hvac-event-status.private {
background-color: var(--hvac-neutral-100);
color: var(--hvac-neutral-700);
}
/* Event title styling */
.hvac-event-title {
font-weight: var(--hvac-font-semibold);
color: var(--hvac-neutral-900);
margin: 0 0 var(--hvac-space-1) 0;
}
.hvac-event-title a {
color: var(--hvac-primary-600);
text-decoration: none;
}
.hvac-event-title a:hover {
color: var(--hvac-primary-700);
text-decoration: underline;
}
/* Event actions */
.hvac-event-actions {
display: flex;
gap: var(--hvac-space-2);
align-items: center;
}
.hvac-event-action {
color: var(--hvac-primary-600);
text-decoration: none;
font-size: var(--hvac-text-sm);
font-weight: var(--hvac-font-medium);
padding: var(--hvac-space-1) var(--hvac-space-2);
border-radius: var(--hvac-radius-sm);
transition: all var(--hvac-transition-fast);
}
.hvac-event-action:hover {
background-color: var(--hvac-primary-50);
color: var(--hvac-primary-700);
text-decoration: none;
}
/* ===== NAVIGATION MENU ===== */
.hvac-trainer-menu {
background-color: var(--hvac-neutral-0);
border: 1px solid var(--hvac-neutral-200);
border-radius: var(--hvac-radius-base);
box-shadow: var(--hvac-shadow-sm);
margin-bottom: var(--hvac-space-6);
overflow: hidden;
}
.hvac-trainer-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.hvac-trainer-menu li {
position: relative;
margin: 0;
}
.hvac-trainer-menu a {
display: flex;
align-items: center;
padding: var(--hvac-space-4) var(--hvac-space-6);
color: var(--hvac-neutral-700);
text-decoration: none;
font-weight: var(--hvac-font-medium);
transition: all var(--hvac-transition-fast);
border-right: 1px solid var(--hvac-neutral-200);
}
.hvac-trainer-menu a:hover {
background-color: var(--hvac-primary-50);
color: var(--hvac-primary-700);
}
.hvac-trainer-menu li:last-child a {
border-right: none;
}
.hvac-trainer-menu .active a {
background-color: var(--hvac-primary-500);
color: var(--hvac-neutral-0);
}
/* Dropdown menus */
.hvac-trainer-menu .dropdown {
position: relative;
}
.hvac-trainer-menu .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: var(--hvac-neutral-0);
border: 1px solid var(--hvac-neutral-200);
border-radius: var(--hvac-radius-base);
box-shadow: var(--hvac-shadow-lg);
min-width: 200px;
z-index: var(--hvac-z-dropdown);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all var(--hvac-transition-base);
}
.hvac-trainer-menu .dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.hvac-trainer-menu .dropdown-menu a {
border-right: none;
border-bottom: 1px solid var(--hvac-neutral-100);
padding: var(--hvac-space-3) var(--hvac-space-4);
}
.hvac-trainer-menu .dropdown-menu li:last-child a {
border-bottom: none;
}
/* ===== BREADCRUMBS ===== */
.hvac-breadcrumbs {
padding: var(--hvac-space-4) 0;
margin-bottom: var(--hvac-space-6);
border-bottom: 1px solid var(--hvac-neutral-200);
}
.hvac-breadcrumbs nav {
display: flex;
align-items: center;
}
.hvac-breadcrumbs ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: var(--hvac-space-2);
font-size: var(--hvac-text-sm);
}
.hvac-breadcrumbs li {
display: flex;
align-items: center;
margin: 0;
}
.hvac-breadcrumbs li:not(:last-child)::after {
content: ">";
margin-left: var(--hvac-space-2);
color: var(--hvac-neutral-400);
}
.hvac-breadcrumbs a {
color: var(--hvac-primary-600);
text-decoration: none;
}
.hvac-breadcrumbs a:hover {
color: var(--hvac-primary-700);
text-decoration: underline;
}
.hvac-breadcrumbs .current {
color: var(--hvac-neutral-700);
font-weight: var(--hvac-font-medium);
}
/* ===== RESPONSIVE DESIGN ===== */
/* Mobile styles */
@media (max-width: 767px) {
.hvac-dashboard {
padding: var(--hvac-space-4);
margin: 0 calc(-1 * var(--hvac-space-4));
border-radius: 0;
border-left: none;
border-right: none;
}
.hvac-dashboard-header {
flex-direction: column;
align-items: flex-start;
gap: var(--hvac-space-3);
}
.hvac-dashboard-actions {
width: 100%;
justify-content: stretch;
}
.hvac-dashboard-actions .hvac-button {
flex: 1;
}
.hvac-stats-grid {
grid-template-columns: 1fr;
gap: var(--hvac-space-4);
}
.hvac-events-header {
flex-direction: column;
align-items: stretch;
gap: var(--hvac-space-3);
}
.hvac-events-filters {
flex-direction: column;
align-items: stretch;
gap: var(--hvac-space-3);
}
.hvac-events-search {
min-width: auto;
}
.hvac-filter-tabs {
flex-wrap: wrap;
}
.hvac-trainer-menu ul {
flex-direction: column;
}
.hvac-trainer-menu a {
border-right: none;
border-bottom: 1px solid var(--hvac-neutral-200);
}
.hvac-trainer-menu li:last-child a {
border-bottom: none;
}
/* Mobile-friendly table */
.hvac-events-table {
font-size: var(--hvac-text-sm);
}
.hvac-events-table th,
.hvac-events-table td {
padding: var(--hvac-space-2) var(--hvac-space-3);
}
/* Stack event actions vertically */
.hvac-event-actions {
flex-direction: column;
align-items: flex-start;
gap: var(--hvac-space-1);
}
}
/* Tablet styles */
@media (min-width: 768px) and (max-width: 1023px) {
.hvac-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.hvac-events-header {
gap: var(--hvac-space-3);
}
.hvac-events-filters {
gap: var(--hvac-space-3);
}
}
/* Large desktop styles */
@media (min-width: 1200px) {
.hvac-stats-grid {
grid-template-columns: repeat(5, 1fr);
}
}
/* ===== LOADING STATES ===== */
.hvac-loading-container {
display: flex;
align-items: center;
justify-content: center;
padding: var(--hvac-space-8);
color: var(--hvac-neutral-600);
}
.hvac-loading-spinner {
display: inline-block;
width: 24px;
height: 24px;
border: 3px solid var(--hvac-neutral-200);
border-top: 3px solid var(--hvac-primary-500);
border-radius: 50%;
animation: hvac-spin 1s linear infinite;
margin-right: var(--hvac-space-3);
}
@keyframes hvac-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ===== EMPTY STATES ===== */
.hvac-empty-state {
text-align: center;
padding: var(--hvac-space-12) var(--hvac-space-6);
color: var(--hvac-neutral-600);
}
.hvac-empty-state-icon {
font-size: var(--hvac-text-4xl);
color: var(--hvac-neutral-400);
margin-bottom: var(--hvac-space-4);
}
.hvac-empty-state-title {
font-size: var(--hvac-text-xl);
font-weight: var(--hvac-font-semibold);
color: var(--hvac-neutral-900);
margin-bottom: var(--hvac-space-2);
}
.hvac-empty-state-description {
font-size: var(--hvac-text-base);
color: var(--hvac-neutral-600);
margin-bottom: var(--hvac-space-6);
}
/* ===== PRINT STYLES ===== */
@media print {
.hvac-trainer-menu,
.hvac-dashboard-actions,
.hvac-events-filters,
.hvac-event-actions {
display: none !important;
}
.hvac-dashboard {
box-shadow: none !important;
border: 1px solid #000 !important;
padding: 20px !important;
}
.hvac-events-table {
box-shadow: none !important;
border: 1px solid #000 !important;
}
}
Reference in a new issue View git blame Copy permalink