влад
@@ -0,0 +1,370 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user