371 lines
7.4 KiB
CSS
371 lines
7.4 KiB
CSS
/**
|
|
* Skeleton loaders for /recipes — list cards, edit panel, drag ghost.
|
|
* Uses page tokens from recipes.html :root and dark --dm-* from wesp-zootech-shell.css.
|
|
*/
|
|
|
|
@keyframes dashboard-skeleton-shimmer {
|
|
0% {
|
|
background-position: 240% 0;
|
|
}
|
|
100% {
|
|
background-position: -240% 0;
|
|
}
|
|
}
|
|
|
|
@keyframes dashboard-stat-card-unfold {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* --- List skeleton container --- */
|
|
|
|
.dashboard-list-skeleton {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding: 2px 0;
|
|
min-height: 11.5rem;
|
|
transition: opacity 150ms ease;
|
|
}
|
|
|
|
.dashboard-list-skeleton--exit {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Card row — matches .list-item */
|
|
.dashboard-skeleton-row {
|
|
border-radius: 8px;
|
|
padding: 1.25rem;
|
|
margin-bottom: 1.25rem;
|
|
background: var(--surface-card, #fff);
|
|
border: 1px solid var(--border-strong, #cbd5e1);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dashboard-skeleton-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dashboard-skeleton-row:nth-child(1) { --skel-i: 0; }
|
|
.dashboard-skeleton-row:nth-child(2) { --skel-i: 1; }
|
|
.dashboard-skeleton-row:nth-child(3) { --skel-i: 2; }
|
|
.dashboard-skeleton-row:nth-child(4) { --skel-i: 3; }
|
|
|
|
.dashboard-skeleton-row--recipe {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.dashboard-skeleton-row--field {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* --- Bars & pills --- */
|
|
|
|
.dashboard-skeleton-bar,
|
|
.dashboard-skeleton-pill {
|
|
border-radius: 5px;
|
|
background: linear-gradient(
|
|
105deg,
|
|
var(--border-subtle, #e2e8f0) 0%,
|
|
var(--border-subtle, #e2e8f0) 34%,
|
|
rgba(255, 255, 255, 0.92) 50%,
|
|
var(--border-subtle, #e2e8f0) 66%,
|
|
var(--border-subtle, #e2e8f0) 100%
|
|
);
|
|
background-size: 240% 100%;
|
|
animation: dashboard-skeleton-shimmer 1.2s ease-in-out infinite;
|
|
animation-delay: calc(var(--skel-i, 0) * 0.08s);
|
|
}
|
|
|
|
.dashboard-skeleton-bar {
|
|
height: 0.72rem;
|
|
margin-bottom: 0.65rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.dashboard-skeleton-bar:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dashboard-skeleton-bar--narrow {
|
|
width: 58%;
|
|
height: 0.62rem;
|
|
}
|
|
|
|
.dashboard-skeleton-bar--head-title {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
max-width: 72%;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dashboard-skeleton-bar--meta-half {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dashboard-skeleton-bar--actions-left {
|
|
width: 32%;
|
|
height: 0.62rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dashboard-skeleton-bar--actions-right {
|
|
width: 38%;
|
|
margin-bottom: 0;
|
|
margin-left: auto;
|
|
max-width: 40%;
|
|
}
|
|
|
|
.dashboard-skeleton-bar--title {
|
|
width: 92%;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dashboard-skeleton-bar--subtitle {
|
|
width: 70%;
|
|
margin-top: 0.65rem;
|
|
}
|
|
|
|
.dashboard-skeleton-bar--meta {
|
|
height: 0.58rem;
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dashboard-skeleton-bar--meta.dashboard-skeleton-bar--narrow {
|
|
flex: 0 0 30%;
|
|
width: auto;
|
|
}
|
|
|
|
.dashboard-skeleton-bar--label {
|
|
width: 40%;
|
|
height: 0.62rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.dashboard-skeleton-bar--input {
|
|
height: 2.5rem;
|
|
margin-bottom: 0;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.dashboard-skeleton-bar--hero-title {
|
|
width: min(420px, 72%);
|
|
height: 1rem;
|
|
}
|
|
|
|
.dashboard-skeleton-bar--hero-sub {
|
|
width: 36%;
|
|
margin-top: 0.65rem;
|
|
}
|
|
|
|
.dashboard-skeleton-pill {
|
|
flex: 0 0 auto;
|
|
width: 4.75rem;
|
|
height: 1.25rem;
|
|
border-radius: 999px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dashboard-skeleton-pill--wide {
|
|
width: 5.5rem;
|
|
}
|
|
|
|
/* --- Layout rows inside skeleton cards --- */
|
|
|
|
.dashboard-skeleton-row-head,
|
|
.dashboard-skeleton-row-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.dashboard-skeleton-row-head {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.dashboard-skeleton-row-foot--end {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.dashboard-skeleton-flex-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.dashboard-skeleton-flex-row--actions {
|
|
margin-bottom: 0.65rem;
|
|
}
|
|
|
|
.dashboard-skeleton-flex-row--actions-end {
|
|
justify-content: flex-end;
|
|
margin-bottom: 0.65rem;
|
|
}
|
|
|
|
.dashboard-skeleton-flex-row--actions-end .dashboard-skeleton-pill {
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
}
|
|
|
|
.dashboard-skeleton-card-inner--mill > .dashboard-skeleton-bar--subtitle {
|
|
margin-bottom: 0.65rem;
|
|
}
|
|
|
|
.dashboard-skeleton-flex-row--meta .dashboard-skeleton-bar {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dashboard-skeleton-card-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
.dashboard-skeleton-card-inner > .dashboard-skeleton-bar--subtitle {
|
|
margin-bottom: 0.65rem;
|
|
}
|
|
|
|
/* --- Edit panel skeleton --- */
|
|
|
|
.recipe-edit-skeleton-panel {
|
|
display: none;
|
|
}
|
|
|
|
.recipe-edit-panel--loading .recipe-edit-skeleton-panel {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.recipe-edit-panel--loading #recipeForm {
|
|
display: none !important;
|
|
}
|
|
|
|
.recipe-edit-skeleton-hero {
|
|
margin-bottom: 1.35rem;
|
|
padding-bottom: 1.25rem;
|
|
border-bottom: 1px solid var(--border-subtle, #e2e8f0);
|
|
}
|
|
|
|
.recipe-edit-skeleton-field {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.recipe-edit-skeleton-table {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.65rem;
|
|
min-height: 10rem;
|
|
padding: 0.25rem 0;
|
|
}
|
|
|
|
.recipe-edit-panel:not(.recipe-edit-panel--loading) #recipeForm.recipe-form--enter {
|
|
animation: dashboard-stat-card-unfold 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
|
}
|
|
|
|
/* --- Drag ghost --- */
|
|
|
|
.recipe-card-drag-ghost {
|
|
box-sizing: border-box;
|
|
padding: 1.25rem;
|
|
margin: 0;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-strong, #cbd5e1);
|
|
background: var(--surface-card, #fff);
|
|
box-shadow: var(--box-shadow-hover, 0 10px 28px rgba(15, 23, 42, 0.14));
|
|
}
|
|
|
|
.recipe-card-drag-ghost--follow {
|
|
position: fixed;
|
|
z-index: 1300;
|
|
pointer-events: none;
|
|
transform: translate(-50%, -50%);
|
|
opacity: 0.96;
|
|
will-change: transform, left, top;
|
|
}
|
|
|
|
.recipe-card-drag-ghost .dashboard-skeleton-bar {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.recipe-card-drag-ghost .dashboard-skeleton-flex-row--actions {
|
|
margin-bottom: 0.65rem;
|
|
}
|
|
|
|
.recipe-card-drag-ghost .dashboard-skeleton-card-inner > .dashboard-skeleton-bar--subtitle {
|
|
margin-bottom: 0.65rem;
|
|
}
|
|
|
|
/* --- Dark theme --- */
|
|
|
|
html[data-theme="dark"] .dashboard-skeleton-row {
|
|
background: var(--dm-surface, #2c3338);
|
|
border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
|
|
}
|
|
|
|
html[data-theme="dark"] .dashboard-skeleton-bar,
|
|
html[data-theme="dark"] .dashboard-skeleton-pill {
|
|
background: linear-gradient(
|
|
105deg,
|
|
rgba(255, 255, 255, 0.06) 0%,
|
|
rgba(255, 255, 255, 0.06) 34%,
|
|
rgba(255, 255, 255, 0.2) 50%,
|
|
rgba(255, 255, 255, 0.06) 66%,
|
|
rgba(255, 255, 255, 0.06) 100%
|
|
);
|
|
background-size: 240% 100%;
|
|
}
|
|
|
|
html[data-theme="dark"] .recipe-card-drag-ghost {
|
|
background: var(--dm-surface) !important;
|
|
border-color: var(--dm-border) !important;
|
|
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
html[data-theme="dark"] #recipeEdit .recipe-edit-skeleton-panel {
|
|
background: var(--dm-surface) !important;
|
|
}
|
|
|
|
html[data-theme="dark"] #recipeEdit .recipe-edit-skeleton-hero {
|
|
border-bottom-color: var(--dm-border) !important;
|
|
}
|
|
|
|
/* --- Reduced motion --- */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.dashboard-skeleton-bar,
|
|
.dashboard-skeleton-pill {
|
|
animation: none !important;
|
|
background: var(--border-subtle, #e2e8f0);
|
|
}
|
|
|
|
html[data-theme="dark"] .dashboard-skeleton-bar,
|
|
html[data-theme="dark"] .dashboard-skeleton-pill {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.dashboard-list-skeleton--exit {
|
|
transition: none;
|
|
}
|
|
|
|
.recipe-edit-panel:not(.recipe-edit-panel--loading) #recipeForm.recipe-form--enter {
|
|
animation: none !important;
|
|
}
|
|
}
|