; у каждой | — data-label="Подпись".
* Ячейка с классом .cell-main идёт заголовком блока без подписи,
* .cell-actions — кнопки внизу блока.
*/
@media (max-width: 640px) {
table.data.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
table.data.stack, table.data.stack tbody { display: block; }
table.data.stack tr { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
table.data.stack td { display: contents; }
table.data.stack td::before { content: attr(data-label); color: var(--ink-2); font-size: 14px; }
table.data.stack td > * { min-width: 0; }
table.data.stack td.num { text-align: left; }
table.data.stack td.cell-main, table.data.stack td.cell-actions { display: block; grid-column: 1 / -1; padding: 0; border: 0; }
table.data.stack td.cell-main::before, table.data.stack td.cell-actions::before { content: none; }
table.data.stack td.cell-actions { padding-top: 6px; }
table.data.stack tbody tr:hover { background: transparent; }
}
@media (max-width: 640px) {
table.data.stack td::before { font-weight: 400; }
}
/* ---------- Загрузка и появление ----------
* .skeleton — плейсхолдер той же формы, что будущий контент (shimmer).
* Модификаторы: .sk-text (строка текста), .sk-title, .sk-num (крупная цифра),
* .sk-circle, .sk-pill, .sk-block (произвольный блок, высоту задаёт страница).
* На тёмной панели (.panel-dark или .on-dark) цвета переключаются сами.
* .reveal — блок, который плавно проявляется, когда получает .is-in
* (через reveal() из shell.js).
* .stagger — контейнер: прямые потомки появляются каскадом (--i ставит reveal()).
* .swap-area — контейнер, у которого анимируется высота при смене состояния (swapView()).
* .btn.is-busy — кнопка в состоянии загрузки (setBusy() из shell.js).
*/
:root {
--sk-a: #DDE4DE;
--sk-b: #E8ECE7;
--ease-out: cubic-bezier(.22, .61, .36, 1);
--reveal-ms: 300ms;
}
.panel-dark, .on-dark { --sk-a: #1E4A40; --sk-b: #2A5247; }
.skeleton {
display: block; height: 16px; border-radius: 6px;
background: linear-gradient(90deg, var(--sk-a) 0%, var(--sk-b) 40%, var(--sk-a) 80%) var(--sk-a);
background-size: 240% 100%;
animation: sk-shimmer 1.4s linear infinite;
color: transparent; pointer-events: none; user-select: none;
}
.skeleton + .skeleton { margin-top: 10px; }
.sk-text { height: 14px; margin: 5px 0; }
.sk-title { height: 30px; border-radius: 8px; width: 60%; }
.sk-num { height: 80px; width: 120px; border-radius: 12px; }
.sk-circle { border-radius: 50%; }
.sk-pill { height: 36px; width: 96px; border-radius: 10px; display: inline-block; }
.sk-block { height: 120px; border-radius: 14px; }
.sk-row { display: flex; align-items: center; gap: 20px; min-height: 56px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sk-row > .skeleton { margin: 0; }
.panel-dark .sk-row { border-bottom-color: var(--dark-line); }
@keyframes sk-shimmer { from { background-position: 100% 0; } to { background-position: -140% 0; } }
[aria-busy="true"] { cursor: progress; }
.reveal { opacity: 0; transform: translateY(4px); }
.reveal.is-in {
opacity: 1; transform: none;
transition: opacity var(--reveal-ms) var(--ease-out), transform var(--reveal-ms) var(--ease-out);
}
.stagger > * { opacity: 0; transform: translateY(4px); }
.stagger.is-in > * {
opacity: 1; transform: none;
transition: opacity var(--reveal-ms) var(--ease-out), transform var(--reveal-ms) var(--ease-out);
transition-delay: calc(var(--i, 0) * 35ms);
}
.swap-area { transition: height 280ms var(--ease-out); overflow: hidden; }
.fade-in { animation: fade-in 260ms var(--ease-out) both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
dialog.modal[open] { animation: modal-in 220ms var(--ease-out); }
dialog.modal[open]::backdrop { animation: backdrop-in 220ms var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
/* Кнопка в состоянии загрузки: ширину фиксирует setBusy() */
.btn.is-busy, button.is-busy { cursor: progress; opacity: 1; }
.btn-spinner {
width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%;
border: 2px solid currentColor; border-right-color: transparent;
animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Шапка до загрузки пользователя: плейсхолдеры меню той же высоты */
.app-nav .skeleton { display: inline-block; height: 42.5px; width: 104px; margin: 0; border-radius: var(--r-m); }
.app-user .skeleton { margin: 0; }
@media (prefers-reduced-motion: reduce) {
.skeleton { animation: none; background: var(--sk-a); }
.reveal, .stagger > * { transform: none; }
.reveal.is-in, .stagger.is-in > * { transition: none; }
.swap-area { transition: none; }
.btn-spinner { animation: none; border-right-color: currentColor; opacity: .6; }
.fade-in, dialog.modal[open], dialog.modal[open]::backdrop { animation: none; }
}
|