/** * Hanse Logistic – Trucky Integration Styles * =========================================== * Einbinden in der index.html: * * * Passt sich dem eBusiness-Bootstrap-Template an. * Farben orientieren sich am bestehenden Hanse-Logistic-Farbschema. */ /* ─── LOADING STATE ─────────────────────────────────────────────────────────── */ .trucky-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; color: #6c757d; gap: 1rem; } .trucky-loading p { margin: 0; font-size: 0.95rem; } /* ─── SECTION HEADINGS ──────────────────────────────────────────────────────── */ .trucky-section { padding: 60px 0; } .trucky-section-title { text-align: center; padding-bottom: 30px; } .trucky-section-title h2 { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; } .trucky-section-title p { color: #6c757d; max-width: 600px; margin: 0 auto; } /* ─── MEMBER CARDS ──────────────────────────────────────────────────────────── */ .trucky-member-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); padding: 1.5rem; height: 100%; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; } .trucky-member-card:hover { transform: translateY(-4px); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12); } .trucky-member-avatar { width: 72px; height: 72px; flex-shrink: 0; } .trucky-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #e9ecef; } .trucky-avatar-placeholder { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #0d6efd, #0dcaf0); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; } .trucky-member-info { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 100%; } .trucky-member-name { font-size: 1rem; font-weight: 600; margin: 0; color: #212529; } .trucky-member-role { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 2px 10px; border-radius: 20px; letter-spacing: 0.3px; } .trucky-member-meta { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: #6c757d; } .trucky-member-meta span { display: flex; align-items: center; justify-content: center; gap: 5px; } /* ─── JOB TABLE ─────────────────────────────────────────────────────────────── */ .trucky-table { font-size: 0.9rem; } .trucky-table thead th { background: #f8f9fa; font-weight: 600; border-bottom: 2px solid #dee2e6; white-space: nowrap; } .trucky-table tbody tr:hover { background: #f0f4ff; } .trucky-table td { vertical-align: middle; } .badge-success { background-color: #198754; color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 0.78rem; } .badge-danger { background-color: #dc3545; color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 0.78rem; } .badge-primary { background-color: #0d6efd; color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 0.78rem; } .badge-secondary{ background-color: #6c757d; color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 0.78rem; } .badge-warning { background-color: #ffc107; color: #1a1a1a; padding: 4px 10px; border-radius: 20px; font-size: 0.78rem; } /* ─── VEHICLE CARDS ─────────────────────────────────────────────────────────── */ .trucky-vehicle-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); overflow: hidden; height: 100%; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; } .trucky-vehicle-card:hover { transform: translateY(-4px); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12); } .trucky-vehicle-img-wrap { width: 100%; height: 140px; background: #f0f4ff; display: flex; align-items: center; justify-content: center; overflow: hidden; } .trucky-vehicle-photo { width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; } .trucky-vehicle-icon { width: 52px; height: 52px; background: #e7f1ff; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #0d6efd; } .trucky-vehicle-info { flex: 1; padding: 1rem 1.25rem 1.25rem; min-width: 0; } .trucky-vehicle-name { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.5rem; color: #212529; } .trucky-vehicle-plate, .trucky-vehicle-driver, .trucky-vehicle-km { font-size: 0.82rem; color: #6c757d; margin-bottom: 0.2rem; display: flex; align-items: center; gap: 5px; } /* ─── STAT COUNTERS (Hero-Bereich) ──────────────────────────────────────────── */ .trucky-stat-number { font-size: 2.5rem; font-weight: 700; line-height: 1; } .trucky-stat-label { font-size: 0.85rem; color: rgba(255,255,255,0.75); margin-top: 4px; } /* ─── ABOUT STATS ───────────────────────────────────────────────────────────── */ .trucky-about-stat { display: flex; flex-direction: column; align-items: center; text-align: center; } .trucky-about-stat .number { font-size: 2rem; font-weight: 700; color: #0d6efd; } .trucky-about-stat .label { font-size: 0.85rem; color: #6c757d; } /* ─── DARK MODE SUPPORT ─────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { .trucky-member-card, .trucky-vehicle-card { background: #1e2430; box-shadow: 0 2px 15px rgba(0,0,0,0.3); } .trucky-member-name, .trucky-vehicle-name { color: #e9ecef; } .trucky-table thead th { background: #1e2430; color: #e9ecef; } } /* ─── RESPONSIVE ────────────────────────────────────────────────────────────── */ @media (max-width: 576px) { .trucky-member-card, .trucky-vehicle-card { padding: 1rem; } .trucky-stat-number { font-size: 1.8rem; } } /* ─── ROLLEN-GRUPPEN (Fahrerübersicht) ──────────────────────────────────────── */ .trucky-role-group { border-top: 2px solid var(--bs-border-color, #dee2e6); padding-top: 1.25rem; } .trucky-role-group:first-child { border-top: none; padding-top: 0; } .trucky-role-heading { font-size: 1rem; font-weight: 600; color: #495057; margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; } .trucky-role-count { display: inline-flex; align-items: center; justify-content: center; background: #e9ecef; color: #495057; border-radius: 20px; font-size: 0.75rem; font-weight: 600; padding: 1px 8px; min-width: 24px; }