/* Skeleton peste DataTables (AJAX) — implicit DARK (tema app folosește data-bs-theme pe ) */ .dataTables_wrapper, .dt-container { position: relative; } /* În timpul încărcării: nu lăsăm rândurile skeleton să iasă din wrapper */ .dataTables_wrapper.dt-skeleton-loading, .dt-container.dt-skeleton-loading { overflow: hidden; min-height: 240px; } .datatable-skeleton-overlay { position: absolute; inset: 0; z-index: 6; box-sizing: border-box; padding: 0.85rem 1rem 0.75rem; margin: 0; border-radius: 8px; overflow: hidden; /* fundal solid închis — nu transparent peste fundal alb DataTables */ background: #0f172a; border: 1px solid rgba(148, 163, 184, 0.12); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease; } .datatable-skeleton-overlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } .datatable-skeleton-label { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(148, 163, 184, 0.75); margin-bottom: 0.75rem; font-weight: 600; } .datatable-skeleton-row { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem; } /* Bare discrete, fără „white flash” în gradient */ .datatable-skeleton-cell { height: 12px; border-radius: 6px; flex: 1 1 auto; min-width: 40px; background: linear-gradient( 90deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.85) 35%, rgba(71, 85, 105, 0.65) 50%, rgba(51, 65, 85, 0.85) 65%, rgba(30, 41, 59, 0.95) 100% ); background-size: 240% 100%; animation: dt-sk-shimmer 1.35s ease-in-out infinite; } .datatable-skeleton-cell.dt-sk-narrow { flex: 0 0 52px; max-width: 52px; } .datatable-skeleton-cell.dt-sk-wide { flex: 2 1 40%; } @keyframes dt-sk-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } } @media (prefers-reduced-motion: reduce) { .datatable-skeleton-cell { animation: none; background: rgba(51, 65, 85, 0.65); } } /* Tema light: DOAR când e setat explicit pe (nu pe body) */ html[data-bs-theme="light"] .datatable-skeleton-overlay { background: #f1f5f9; border-color: rgba(15, 23, 42, 0.08); box-shadow: none; } html[data-bs-theme="light"] .datatable-skeleton-label { color: rgba(71, 85, 105, 0.9); } html[data-bs-theme="light"] .datatable-skeleton-cell { background: linear-gradient( 90deg, rgba(226, 232, 240, 0.95) 0%, rgba(203, 213, 225, 0.9) 45%, rgba(226, 232, 240, 0.95) 100% ); background-size: 200% 100%; } @media (prefers-reduced-motion: reduce) { html[data-bs-theme="light"] .datatable-skeleton-cell { background: rgba(203, 213, 225, 0.95); } } /* —— Skeleton card grid (Tickete etc.) —— */ .dt-skeleton-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .dt-skeleton-card { min-height: 220px; padding: 1rem 1.1rem; border-radius: 14px; background: linear-gradient(145deg, rgba(30, 32, 44, 0.95), rgba(22, 24, 35, 0.98)); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } .dt-skeleton-card .datatable-skeleton-row { margin-bottom: 0.75rem; } .dt-skeleton-label { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(148, 163, 184, 0.85); margin-bottom: 0.75rem; font-weight: 600; } /* —— Mock table: cap de tabel + coloane ca în UI (Clienți, AMEF, etc.) —— */ .dt-sk-mock .dt-sk-mock__head { display: grid; align-items: end; gap: 0.5rem; margin-bottom: 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(148, 163, 184, 0.14); } .dt-sk-mock .dt-sk-mock__head span:not(.dt-sk-mock__head-skip) { font-size: 0.62rem; letter-spacing: 0.05em; font-weight: 600; text-transform: uppercase; color: rgba(203, 213, 225, 0.55); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dt-sk-mock .dt-sk-mock__head-skip { visibility: hidden; pointer-events: none; } .dt-sk-mock__row { display: grid; align-items: center; gap: 0.5rem; margin-bottom: 0.42rem; min-height: 22px; } /* Blocuri „text” + badge rotund/pill + acțiuni */ .dt-sk-block { height: 11px; border-radius: 6px; width: 100%; max-width: 100%; min-width: 0; background: linear-gradient( 90deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.85) 35%, rgba(71, 85, 105, 0.65) 50%, rgba(51, 65, 85, 0.85) 65%, rgba(30, 41, 59, 0.95) 100% ); background-size: 240% 100%; animation: dt-sk-shimmer 1.35s ease-in-out infinite; } .dt-sk-block--xs { max-width: 72%; } .dt-sk-block--sm { max-width: 88%; } .dt-sk-block--md { max-width: 94%; } .dt-sk-badge { width: 38px; height: 20px; border-radius: 10px; justify-self: center; background: linear-gradient( 90deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.8) 50%, rgba(30, 41, 59, 0.95) 100% ); background-size: 240% 100%; animation: dt-sk-shimmer 1.35s ease-in-out infinite; } .dt-sk-pill { min-width: 56px; height: 18px; border-radius: 9px; max-width: 100%; justify-self: start; background: linear-gradient( 90deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.8) 50%, rgba(30, 41, 59, 0.95) 100% ); background-size: 240% 100%; animation: dt-sk-shimmer 1.35s ease-in-out infinite; } .dt-sk-dot { width: 30px; height: 30px; border-radius: 50%; justify-self: center; background: linear-gradient( 145deg, rgba(51, 65, 85, 0.9) 0%, rgba(30, 41, 59, 0.95) 100% ); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12); animation: dt-sk-shimmer 1.35s ease-in-out infinite; background-size: 200% 200%; } .dt-sk-logo { width: 36px; height: 36px; border-radius: 8px; justify-self: center; align-self: center; background: linear-gradient( 145deg, rgba(51, 65, 85, 0.85) 0%, rgba(30, 41, 59, 0.95) 100% ); animation: dt-sk-shimmer 1.35s ease-in-out infinite; background-size: 200% 200%; } /* Coloane — proporții apropiate de #clientsTable / AMEF */ .dt-sk-mock__head--clients, .dt-sk-mock__row--clients { grid-template-columns: minmax(108px, 1.7fr) minmax(52px, 0.4fr) 46px minmax(56px, 0.42fr) minmax(120px, 1.5fr) minmax(52px, 0.38fr) minmax(70px, 0.5fr) minmax(70px, 0.5fr) 40px; } .dt-sk-mock__head--clients span:nth-child(3), .dt-sk-mock__row--clients .dt-sk-badge { text-align: center; justify-self: center; } .dt-sk-mock__head--clients span:nth-child(9), .dt-sk-mock__row--clients .dt-sk-dot { justify-self: center; } .dt-sk-mock__head--amefs, .dt-sk-mock__row--amefs { grid-template-columns: 44px minmax(100px, 1.35fr) minmax(52px, 0.48fr) minmax(52px, 0.45fr) minmax(48px, 0.42fr) minmax(100px, 1.15fr) minmax(56px, 0.48fr) minmax(56px, 0.5fr) minmax(56px, 0.48fr) 42px; } .dt-sk-mock__head--amefs span:nth-child(1), .dt-sk-mock__row--amefs .dt-sk-logo { justify-self: center; } .dt-sk-mock__head--amefs span:nth-child(10), .dt-sk-mock__row--amefs .dt-sk-dot { justify-self: center; } .dt-sk-mock__head--client-amefs, .dt-sk-mock__row--client-amefs { grid-template-columns: minmax(72px, 0.55fr) minmax(72px, 0.55fr) minmax(56px, 0.42fr) minmax(120px, 1.25fr) minmax(72px, 0.5fr) minmax(72px, 0.5fr) 44px; } .dt-sk-mock__head--client-amefs span:nth-child(7), .dt-sk-mock__row--client-amefs .dt-sk-dot { justify-self: center; } .dt-sk-mock__head--contacts-index, .dt-sk-mock__row--contacts-index { grid-template-columns: minmax(88px, 1.05fr) minmax(88px, 1.05fr) minmax(72px, 0.62fr) minmax(80px, 0.72fr) minmax(48px, 0.38fr) minmax(48px, 0.38fr) minmax(64px, 0.45fr) minmax(64px, 0.48fr) 40px; } .dt-sk-mock__head--contacts-index span:nth-child(9), .dt-sk-mock__row--contacts-index .dt-sk-dot { justify-self: center; } .dt-sk-mock__head--client-contacts, .dt-sk-mock__row--client-contacts { grid-template-columns: minmax(80px, 0.95fr) minmax(88px, 1fr) minmax(72px, 0.62fr) minmax(80px, 0.72fr) minmax(64px, 0.48fr) minmax(44px, 0.36fr) minmax(44px, 0.36fr) minmax(64px, 0.45fr) 40px; } .dt-sk-mock__head--client-contacts span:nth-child(9), .dt-sk-mock__row--client-contacts .dt-sk-dot { justify-self: center; } .dt-sk-mock__head--client-tickets, .dt-sk-mock__row--client-tickets { grid-template-columns: minmax(52px, 0.4fr) minmax(88px, 0.62fr) minmax(64px, 0.48fr) minmax(56px, 0.42fr) minmax(52px, 0.38fr) minmax(100px, 1fr) minmax(56px, 0.4fr) minmax(72px, 0.48fr) 40px; } .dt-sk-mock__head--client-tickets span:nth-child(9), .dt-sk-mock__row--client-tickets .dt-sk-dot { justify-self: center; } @media (prefers-reduced-motion: reduce) { .dt-sk-block, .dt-sk-badge, .dt-sk-pill, .dt-sk-dot, .dt-sk-logo { animation: none; background: rgba(51, 65, 85, 0.72); } .dt-sk-dot, .dt-sk-logo { background: rgba(51, 65, 85, 0.72); } } html[data-bs-theme="light"] .dt-sk-mock .dt-sk-mock__head { border-bottom-color: rgba(15, 23, 42, 0.1); } html[data-bs-theme="light"] .dt-sk-mock .dt-sk-mock__head span:not(.dt-sk-mock__head-skip) { color: rgba(100, 116, 139, 0.85); } html[data-bs-theme="light"] .dt-sk-block { background: linear-gradient( 90deg, rgba(226, 232, 240, 0.95) 0%, rgba(203, 213, 225, 0.9) 45%, rgba(226, 232, 240, 0.95) 100% ); background-size: 200% 100%; } html[data-bs-theme="light"] .dt-sk-badge, html[data-bs-theme="light"] .dt-sk-pill { background: linear-gradient( 90deg, rgba(226, 232, 240, 0.95) 0%, rgba(203, 213, 225, 0.85) 50%, rgba(226, 232, 240, 0.95) 100% ); background-size: 200% 100%; } html[data-bs-theme="light"] .dt-sk-dot, html[data-bs-theme="light"] .dt-sk-logo { background: rgba(203, 213, 225, 0.9); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06); } @media (prefers-reduced-motion: reduce) { html[data-bs-theme="light"] .dt-sk-block, html[data-bs-theme="light"] .dt-sk-badge, html[data-bs-theme="light"] .dt-sk-pill { background: rgba(203, 213, 225, 0.95); } html[data-bs-theme="light"] .dt-sk-dot, html[data-bs-theme="light"] .dt-sk-logo { background: rgba(203, 213, 225, 0.95); } }