e0ea997c24
- Split admin.css (3228 lines) into 12 focused files: variables, base, forms, buttons, layout, components, tables, skeleton, datepicker, filemanager, pagination, responsive - Extracted shared styles from offers.css and dashboard.css into components.css and forms.css (offers-* → admin-* prefix) - Standardized naming: dash-kpi-* → admin-kpi-*, session-* → dash-session-*, rich-editor → admin-rich-editor - Deleted duplicate offers-tabs (using admin-tabs everywhere) - Deduplicated DatePicker and FileManager CSS (~360 lines removed) - Added 16 utility classes to base.css (font sizes, widths, gaps, margins) - Deleted empty admin.css Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
73 lines
1.3 KiB
CSS
73 lines
1.3 KiB
CSS
/* ============================================================================
|
|
Skeleton Loading
|
|
============================================================================ */
|
|
|
|
.admin-skeleton {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: 1.5rem;
|
|
opacity: 0;
|
|
animation: skeleton-fade-in 0.15s ease 0.08s forwards;
|
|
}
|
|
|
|
@keyframes skeleton-fade-in {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.admin-skeleton-row {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.admin-skeleton-line {
|
|
height: 14px;
|
|
border-radius: 6px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--bg-tertiary) 25%,
|
|
var(--border-color) 50%,
|
|
var(--bg-tertiary) 75%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
.admin-skeleton-line.w-full {
|
|
width: 100%;
|
|
}
|
|
.admin-skeleton-line.w-3\/4 {
|
|
width: 75%;
|
|
}
|
|
.admin-skeleton-line.w-1\/2 {
|
|
width: 50%;
|
|
}
|
|
.admin-skeleton-line.w-1\/3 {
|
|
width: 33%;
|
|
}
|
|
.admin-skeleton-line.w-1\/4 {
|
|
width: 25%;
|
|
}
|
|
.admin-skeleton-line.h-8 {
|
|
height: 32px;
|
|
}
|
|
.admin-skeleton-line.h-10 {
|
|
height: 40px;
|
|
}
|
|
.admin-skeleton-line.circle {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Skeleton loading on mobile */
|
|
@media (max-width: 640px) {
|
|
.admin-skeleton {
|
|
border-radius: 4px;
|
|
}
|
|
}
|