Initial commit: site monorepo with API, web, and infra.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
влад
+5
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,239 @@
|
||||
.lab-profiles-page .lab-profiles-header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.lab-profiles-page .lab-profiles-header h1 {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.35rem;
|
||||
}
|
||||
|
||||
.lab-profiles-page.lab-sandbox-page .lab-profiles-header p {
|
||||
color: #f8fafc;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.lab-profiles-page.lab-sandbox-page .lab-profiles-header a {
|
||||
color: #f8fafc;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.lab-profiles-page.lab-sandbox-page .lab-profiles-header a:hover {
|
||||
color: #fde047;
|
||||
}
|
||||
|
||||
.lab-profiles-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.lab-profiles-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.lab-profiles-list {
|
||||
max-height: calc(100vh - 12rem);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.lab-profiles-list button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0.45rem 0.5rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.8125rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lab-profiles-list button:hover {
|
||||
background: rgba(3, 105, 161, 0.08);
|
||||
}
|
||||
|
||||
.lab-profiles-list button.is-active {
|
||||
background: #e0f2fe;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .lab-profiles-list button.is-active {
|
||||
background: rgba(3, 105, 161, 0.25);
|
||||
}
|
||||
|
||||
.lab-profiles-list .profile-key {
|
||||
display: block;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted, #64748b);
|
||||
}
|
||||
|
||||
.lab-profiles-editor table {
|
||||
width: 100%;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.lab-profiles-editor th {
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--text-muted, #64748b);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lab-profiles-editor td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.lab-profiles-editor input[type="number"] {
|
||||
min-width: 5.5rem;
|
||||
max-width: 7rem;
|
||||
}
|
||||
|
||||
.lab-profiles-editor .norm-calc-badge {
|
||||
font-size: 0.65rem;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 4px;
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.lab-profiles-editor .norm-source-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.62rem;
|
||||
padding: 0.08rem 0.32rem;
|
||||
border-radius: 4px;
|
||||
margin-right: 0.2rem;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.lab-profiles-editor .norm-source-badge--db {
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.lab-profiles-editor .norm-source-badge--racion {
|
||||
background: #fef3c7;
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.lab-profiles-editor .norm-source-badge--derived {
|
||||
background: #ede9fe;
|
||||
color: #6d28d9;
|
||||
}
|
||||
|
||||
.lab-profiles-editor .norm-source-badge--fallback,
|
||||
.lab-profiles-editor .norm-source-badge--stored {
|
||||
background: #dcfce7;
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.lab-profiles-editor .norm-source-badge--gfe {
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.lab-profiles-editor .norm-source-badge--empty {
|
||||
background: transparent;
|
||||
color: var(--text-muted, #94a3b8);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.lab-profiles-source-cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lab-profiles-norms-summary strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .lab-profiles-editor .norm-calc-badge {
|
||||
background: rgba(29, 78, 216, 0.25);
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.lab-profiles-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.lab-profiles-meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.lab-profiles-table-wrap {
|
||||
max-height: calc(100vh - 18rem);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.lab-profiles-gfe {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.lab-profiles-gfe strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lab-profiles-seed {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.lab-profiles-seed select {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime .lab-profiles-list button:hover {
|
||||
background: rgba(0, 200, 255, 0.1);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime .lab-profiles-list button.is-active {
|
||||
background: rgba(253, 224, 71, 0.15);
|
||||
color: var(--lab-prime-yellow, #fde047);
|
||||
box-shadow: inset 0 0 0 1px rgba(253, 224, 71, 0.3);
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime .lab-profiles-list .profile-key {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime .lab-profiles-editor th {
|
||||
color: var(--lab-prime-crystal, #00c8ff);
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime .lab-profiles-editor .norm-calc-badge {
|
||||
background: rgba(0, 200, 255, 0.15);
|
||||
color: var(--lab-prime-crystal, #00c8ff);
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime .lab-profiles-editor .norm-source-badge--racion {
|
||||
background: rgba(253, 224, 71, 0.2);
|
||||
color: var(--lab-prime-yellow, #fde047);
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime .lab-profiles-editor .norm-source-badge--derived {
|
||||
background: rgba(167, 139, 250, 0.2);
|
||||
color: #c4b5fd;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime .lab-profiles-editor .norm-source-badge--fallback,
|
||||
.lab-heisenberg-prime .lab-profiles-editor .norm-source-badge--stored {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: #86efac;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime .lab-profiles-editor .norm-source-badge--db {
|
||||
background: rgba(148, 163, 184, 0.2);
|
||||
color: #cbd5e1;
|
||||
}
|
||||
@@ -0,0 +1,667 @@
|
||||
.lab-sandbox-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Прозрачный body — иначе --bg-page перекрывает фон Heisenberg (::before) */
|
||||
body.zootech-app-body.lab-sandbox-page {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
html:has(body.lab-sandbox-page) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.lab-sandbox-page::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
background: url("/static/img/lab-heisenberg-bg.jpg") center center / cover no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.lab-sandbox-page::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.35) 0%,
|
||||
rgba(0, 0, 0, 0.08) 40%,
|
||||
rgba(0, 0, 0, 0.2) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.lab-sandbox-page .wesp-page-main {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.lab-sandbox-page .lab-sandbox-header {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.lab-sandbox-page .lab-sandbox-header h1,
|
||||
.lab-sandbox-page .lab-sandbox-header h2,
|
||||
.lab-sandbox-page .lab-sandbox-header p,
|
||||
.lab-sandbox-page .lab-sandbox-header a {
|
||||
color: #f8fafc;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.lab-sandbox-page .lab-sandbox-header a:hover {
|
||||
color: #fde047;
|
||||
}
|
||||
|
||||
.lab-sandbox-page .lab-sandbox-header h1 {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.35rem;
|
||||
}
|
||||
|
||||
.lab-sandbox-page .lab-sandbox-header p {
|
||||
margin: 0;
|
||||
color: var(--text-muted, #64748b);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.lab-sandbox-flow {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 320px) 1fr minmax(280px, 360px);
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.lab-sandbox-flow {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.lab-sandbox-panel {
|
||||
background: var(--bg-white, #fff);
|
||||
border: 1px solid var(--border-light, #e2e8f0);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .lab-sandbox-panel {
|
||||
background: var(--bg-white, #1e2428);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.lab-sandbox-panel__title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--text-muted, #64748b);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.lab-sandbox-field {
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.lab-sandbox-field label {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.lab-sandbox-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.lab-sandbox-table {
|
||||
width: 100%;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.lab-sandbox-table th {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--text-muted, #64748b);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lab-sandbox-table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.lab-sandbox-table .form-control,
|
||||
.lab-sandbox-table .form-select {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.lab-sandbox-results table {
|
||||
width: 100%;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.lab-sandbox-results th,
|
||||
.lab-sandbox-results td {
|
||||
padding: 0.35rem 0.4rem;
|
||||
border-bottom: 1px solid var(--border-light, #e2e8f0);
|
||||
}
|
||||
|
||||
.lab-sandbox-diff--ok {
|
||||
color: #15803d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lab-sandbox-diff--bad {
|
||||
color: #b91c1c;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lab-sandbox-diff--na {
|
||||
color: var(--text-muted, #94a3b8);
|
||||
}
|
||||
|
||||
.lab-sandbox-norm--empty {
|
||||
color: var(--text-muted, #94a3b8);
|
||||
font-style: italic;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.lab-sandbox-norms {
|
||||
font-size: 0.78rem;
|
||||
max-height: 220px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.lab-sandbox-norms dt {
|
||||
font-weight: 600;
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.lab-sandbox-norms dd {
|
||||
margin: 0 0 0.25rem;
|
||||
color: var(--text-muted, #64748b);
|
||||
}
|
||||
|
||||
.lab-sandbox-empty {
|
||||
color: var(--text-muted, #94a3b8);
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
padding: 1.5rem 0.5rem;
|
||||
}
|
||||
|
||||
.lab-sandbox-step {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .lab-sandbox-step {
|
||||
background: rgba(3, 105, 161, 0.25);
|
||||
color: #7dd3fc;
|
||||
}
|
||||
|
||||
.lab-formulate-section {
|
||||
border-top: 1px solid var(--border-light, #e2e8f0);
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.lab-agrostar-section {
|
||||
border-top: 1px solid var(--border-light, #e2e8f0);
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.lab-agrostar-drop {
|
||||
border: 2px dashed var(--border-light, #cbd5e1);
|
||||
border-radius: 0.75rem;
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
background: rgba(248, 250, 252, 0.6);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .lab-agrostar-drop {
|
||||
background: rgba(15, 23, 42, 0.35);
|
||||
}
|
||||
|
||||
.lab-agrostar-drop:hover,
|
||||
.lab-agrostar-drop:focus-visible {
|
||||
border-color: #38bdf8;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.lab-agrostar-drop--active {
|
||||
border-color: #0ea5e9;
|
||||
background: rgba(224, 242, 254, 0.45);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .lab-agrostar-drop--active {
|
||||
background: rgba(3, 105, 161, 0.2);
|
||||
}
|
||||
|
||||
.lab-agrostar-drop__icon {
|
||||
font-size: 2rem;
|
||||
color: #0ea5e9;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.lab-agrostar-drop__title {
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lab-agrostar-drop__file {
|
||||
color: #0369a1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.lab-agrostar-warn {
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 0.25rem;
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
margin: 0.1rem 0.15rem 0.1rem 0;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .lab-agrostar-warn {
|
||||
background: rgba(146, 64, 14, 0.25);
|
||||
color: #fcd34d;
|
||||
}
|
||||
|
||||
.lab-agrostar-result--ok {
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.lab-agrostar-result--err {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.lab-agrostar-sniff {
|
||||
margin-top: 1rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px dashed rgba(148, 163, 184, 0.45);
|
||||
}
|
||||
|
||||
.lab-agrostar-sniff-card {
|
||||
background: rgba(248, 250, 252, 0.85);
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem 1.1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .lab-agrostar-sniff-card {
|
||||
background: rgba(15, 23, 42, 0.55);
|
||||
border-color: rgba(71, 85, 105, 0.6);
|
||||
}
|
||||
|
||||
.lab-agrostar-sniff-card__head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.lab-agrostar-sniff__target--warn {
|
||||
color: #92400e;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .lab-agrostar-sniff__target--warn {
|
||||
color: #fcd34d;
|
||||
}
|
||||
|
||||
.lab-agrostar-sniff-meta th {
|
||||
width: 38%;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.lab-agrostar-sniff-nutrients td:first-child {
|
||||
max-width: 14rem;
|
||||
}
|
||||
|
||||
.lab-agrostar-sniff__skip {
|
||||
color: var(--bs-secondary-color);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.lab-agrostar-sniff__notes ul {
|
||||
padding-left: 1.1rem;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .lab-agrostar-sniff__notes ul {
|
||||
color: #fcd34d;
|
||||
}
|
||||
|
||||
/* —— Heisenberg prime (ошибка на /lab) —— */
|
||||
.lab-heisenberg-prime-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 6500;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.35s ease;
|
||||
--lab-prime-eye-y: 26.5vh;
|
||||
--lab-prime-eye-gap: 78px;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime-active .lab-heisenberg-prime-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime-active.lab-sandbox-page::before {
|
||||
filter: saturate(0.45) contrast(1.2) brightness(0.62) sepia(0.15);
|
||||
transform: scale(1.06);
|
||||
background-position: center 28%;
|
||||
transition: filter 0.4s ease, transform 0.6s ease, background-position 0.5s ease;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime-active.lab-sandbox-page::after {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(40, 0, 0, 0.35) 0%,
|
||||
rgba(10, 0, 0, 0.08) 38%,
|
||||
rgba(50, 0, 0, 0.55) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* UI убираем — остаётся Walter и баннер prime */
|
||||
.lab-heisenberg-prime-active #wespZootechNavMount,
|
||||
.lab-heisenberg-prime-active .lab-sandbox-header,
|
||||
.lab-heisenberg-prime-active .lab-sandbox-flow,
|
||||
.lab-heisenberg-prime-active .lab-agrostar-section,
|
||||
.lab-heisenberg-prime-active .lab-formulate-section {
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
transform: translateY(16px) scale(0.97);
|
||||
transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime-active .wesp-page-main {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime__vignette {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(
|
||||
ellipse at 50% var(--lab-prime-eye-y),
|
||||
transparent 0%,
|
||||
rgba(0, 0, 0, 0.12) 38%,
|
||||
rgba(80, 0, 0, 0.78) 100%
|
||||
);
|
||||
animation: labPrimeVignette 0.9s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime__glow {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: var(--lab-prime-eye-y);
|
||||
width: min(36vw, 280px);
|
||||
height: min(28vw, 200px);
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(220, 38, 38, 0.42) 0%, transparent 68%);
|
||||
animation: labPrimeGlow 1.1s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime__eyes {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime__eye {
|
||||
position: absolute;
|
||||
top: var(--lab-prime-eye-y);
|
||||
width: 102px;
|
||||
height: 58px;
|
||||
margin: 0;
|
||||
border-radius: 50%;
|
||||
background: #ef4444;
|
||||
box-shadow:
|
||||
0 0 10px 3px rgba(239, 98, 98, 0.95),
|
||||
0 0 22px 8px rgba(185, 28, 28, 0.6),
|
||||
0 0 40px 16px rgba(127, 29, 29, 0.35);
|
||||
animation: labPrimeEyePulse 0.55s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime__eye--left {
|
||||
left: calc(50% - var(--lab-prime-eye-gap));
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime__eye--right {
|
||||
left: calc(50% + var(--lab-prime-eye-gap));
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime__scanlines {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.12;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(255, 255, 255, 0.04) 2px,
|
||||
rgba(255, 255, 255, 0.04) 4px
|
||||
);
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime__banner {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: clamp(1.5rem, 8vh, 4rem);
|
||||
transform: translateX(-50%);
|
||||
width: min(92vw, 520px);
|
||||
padding: 0.85rem 1.1rem;
|
||||
border-radius: 0.75rem;
|
||||
text-align: center;
|
||||
background: rgba(15, 0, 0, 0.82);
|
||||
border: 1px solid rgba(239, 68, 68, 0.45);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
|
||||
color: #fecaca;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime__title {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 18px rgba(239, 68, 68, 0.8);
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime__subtitle {
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: #f87171;
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime__reason {
|
||||
margin-top: 0.55rem;
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.35;
|
||||
color: #fee2e2;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime__source {
|
||||
margin-top: 0.35rem;
|
||||
font-size: 0.72rem;
|
||||
color: #fca5a5;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@keyframes labPrimeEyePulse {
|
||||
from {
|
||||
opacity: 0.75;
|
||||
filter: brightness(0.92);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes labPrimeVignette {
|
||||
from {
|
||||
opacity: 0.85;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes labPrimeGlow {
|
||||
from {
|
||||
opacity: 0.45;
|
||||
transform: translate(-50%, -50%) scale(0.96);
|
||||
}
|
||||
to {
|
||||
opacity: 0.85;
|
||||
transform: translate(-50%, -50%) scale(1.04);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.lab-heisenberg-prime-overlay {
|
||||
--lab-prime-eye-y: 24.5vh;
|
||||
--lab-prime-eye-gap: 1198px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.lab-heisenberg-prime-overlay {
|
||||
--lab-prime-eye-y: 27vh;
|
||||
--lab-prime-eye-gap: 74px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.lab-heisenberg-prime__eye,
|
||||
.lab-heisenberg-prime__vignette,
|
||||
.lab-heisenberg-prime__glow {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.lab-heisenberg-prime-overlay {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.lab-formulate-steps {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.lab-formulate-step {
|
||||
border: 1px solid var(--border-light, #e2e8f0);
|
||||
background: transparent;
|
||||
border-radius: 999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 0.25rem 0.65rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lab-formulate-step--active {
|
||||
background: #e0f2fe;
|
||||
border-color: #7dd3fc;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.lab-formulate-step-panel--calc.d-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.lab-formulate-pool-wrap {
|
||||
max-height: 320px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.lab-formulate-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
padding: 0.1rem 0.45rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.lab-formulate-badge--ok {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.lab-formulate-badge--bad {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.lab-formulate-row--ineligible {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.lab-formulate-opt-keys {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
max-height: 220px;
|
||||
overflow: auto;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.lab-formulate-opt-key {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.25rem 0.5rem;
|
||||
align-items: start;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lab-formulate-opt-key small {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.lab-formulate-result-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted, #64748b);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.lab-formulate-row--target td {
|
||||
background: rgba(14, 165, 233, 0.08);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lab-formulate-row--target td.lab-sandbox-diff--bad,
|
||||
.lab-formulate-row--target td.lab-sandbox-diff--ok {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
@@ -0,0 +1,521 @@
|
||||
/**
|
||||
* Recipe editor — form grid, section cards, CSS Grid data tables (#recipeEdit).
|
||||
* Loaded after zootech shell/components; replaces Bootstrap .table in editor sections.
|
||||
*/
|
||||
|
||||
/* —— Form 2×2 grid —— */
|
||||
#recipeEdit .recipe-form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1rem 1.25rem;
|
||||
margin-bottom: 0;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-form-grid .form-group {
|
||||
margin-bottom: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-form-grid .form-group label,
|
||||
#recipeEdit .recipe-form-grid .zt-form-label-with-help {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
min-height: 1.375rem;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-form-label-with-help {
|
||||
position: relative;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-form-label-with-help .recipe-help-icon-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin: 0;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-form-grid .form-control {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-form-grid + .zt-notice {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-section-card__help.zt-notice {
|
||||
margin: 0.75rem 1.5rem 0;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-section-card__help.zt-notice.is-visible {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#recipeEdit .card-body > .zt-notice.is-visible {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#recipeEdit .recipe-plain-help.zt-notice {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
#recipeEdit .recipe-form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* —— Section cards (single border, no nested shell) —— */
|
||||
#recipeEdit .recipe-section-card {
|
||||
margin-bottom: 0 !important;
|
||||
flex-shrink: 0;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-section-card > .card-header {
|
||||
background: var(--surface-muted) !important;
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
/* Глобальный .card .card-header = 14px; карточка секции = 12px — без сброса виден «ступень» в углу */
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-section-card > .card-body {
|
||||
padding: 1rem 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-section-card > .card-body.recipe-section-card__body--grid {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#recipeEdit #recipeForm > .card-body > .recipe-section-card + .recipe-section-card {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-section-card__help {
|
||||
padding: 0.75rem 1.5rem 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-section-card__body--grid .recipe-section-card__help:last-child {
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #recipeEdit .recipe-section-card > .card-header {
|
||||
background: var(--dm-field) !important;
|
||||
border-bottom-color: var(--dm-border);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #recipeEdit .recipe-section-card {
|
||||
border-color: var(--dm-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* —— Data grid base —— */
|
||||
#recipeEdit .zt-data-grid__scroll {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.625rem;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__head,
|
||||
#recipeEdit .zt-data-grid__row {
|
||||
display: grid;
|
||||
grid-template-columns: var(--zt-data-grid-cols);
|
||||
min-width: min(100%, 52rem);
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid--ingredients {
|
||||
--zt-data-grid-actions-col: 10.75rem;
|
||||
--zt-data-grid-cols: minmax(0, 1.5fr) repeat(5, minmax(0, 0.72fr)) var(--zt-data-grid-actions-col);
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid--unloading-groups {
|
||||
--zt-data-grid-actions-col: 10.75rem;
|
||||
--zt-data-grid-cols: minmax(0, 1.35fr) minmax(0, 1.15fr) minmax(0, 0.78fr) minmax(0, 0.78fr) var(--zt-data-grid-actions-col);
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__cell {
|
||||
min-width: 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-family: var(--font-numeric, inherit);
|
||||
background: var(--surface, #fff);
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__cell--head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 0.625rem 0.75rem;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
font-family: inherit;
|
||||
font-variant-numeric: normal;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__cell--num {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__cell--actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__cell--head.zt-data-grid__cell--actions {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__body .zt-data-grid__row:last-child .zt-data-grid__cell {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__body .zt-data-grid__row:hover .zt-data-grid__cell {
|
||||
background: rgba(var(--primary-rgb), 0.05);
|
||||
}
|
||||
|
||||
/* Итого: gap у .zt-data-grid отделяет body от foot; внутри foot — только боковые отступы */
|
||||
#recipeEdit .zt-data-grid__foot {
|
||||
padding: 0 0.75rem 0.75rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__foot .zt-data-grid__row--total {
|
||||
background: var(--surface-muted);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__foot .zt-data-grid__cell {
|
||||
padding: 0.625rem 0.75rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__foot .zt-data-grid__cell--foot-label,
|
||||
#recipeEdit .zt-data-grid__foot .zt-data-grid__cell--span-2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__foot .zt-data-grid__cell--num {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-total-line {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-total-label {
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #recipeEdit .zt-total-label {
|
||||
color: var(--dm-muted);
|
||||
}
|
||||
|
||||
#recipeEdit .zt-total-value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__foot .zt-data-grid__cell--actions {
|
||||
padding: 0.625rem 0.75rem;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__cell--span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid .form-control,
|
||||
#recipeEdit .zt-data-grid .form-select {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 2.25rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid .text-cell {
|
||||
display: inline-block;
|
||||
min-height: 2.25rem;
|
||||
line-height: 2.25rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid input[type="number"]::-webkit-outer-spin-button,
|
||||
#recipeEdit .zt-data-grid input[type="number"]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Row actions — кнопки по высоте полей строки, колонка без лишнего воздуха */
|
||||
#recipeEdit .recipe-table-row-actions {
|
||||
gap: 0.375rem;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Список рейсов: не width:100% — иначе прозрачный слой перекрывает .recipe-drag-handle слева */
|
||||
#recipesList .recipe-table-row-actions {
|
||||
gap: 0.375rem;
|
||||
justify-content: flex-end;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#recipesList .recipe-table-row-actions .btn,
|
||||
#recipesList .recipe-table-row-actions .btn-group {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#recipesList .list-item-leading {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex-shrink: 0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-table-move-group,
|
||||
#recipesList .recipe-table-move-group,
|
||||
.feed-dispensers-page .dispenser-card .recipe-table-move-group,
|
||||
.components-page .component-card .recipe-table-move-group {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-table-move-group > .btn + .btn,
|
||||
#recipesList .recipe-table-move-group > .btn + .btn,
|
||||
.feed-dispensers-page .dispenser-card .recipe-table-move-group > .btn + .btn,
|
||||
.components-page .component-card .recipe-table-move-group > .btn + .btn {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-table-move-group .btn,
|
||||
#recipeEdit .recipe-table-delete-btn,
|
||||
#recipesList .recipe-table-move-group .btn,
|
||||
#recipesList .recipe-table-delete-btn,
|
||||
.feed-dispensers-page .dispenser-card .recipe-table-move-group .btn,
|
||||
.feed-dispensers-page .dispenser-card .recipe-table-delete-btn,
|
||||
.components-page .component-card .recipe-table-move-group .btn,
|
||||
.components-page .component-card .recipe-table-delete-btn,
|
||||
#recipesList .recipe-drag-handle {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
min-width: 2.5rem;
|
||||
min-height: 2.5rem;
|
||||
padding: 0 !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
border-radius: var(--zt-radius-sm, 8px) !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-table-move-group .btn i,
|
||||
#recipeEdit .recipe-table-delete-btn i,
|
||||
#recipesList .recipe-table-move-group .btn i,
|
||||
#recipesList .recipe-table-delete-btn i,
|
||||
.feed-dispensers-page .dispenser-card .recipe-table-move-group .btn i,
|
||||
.feed-dispensers-page .dispenser-card .recipe-table-delete-btn i,
|
||||
.components-page .component-card .recipe-table-move-group .btn i,
|
||||
.components-page .component-card .recipe-table-delete-btn i,
|
||||
#recipesList .recipe-drag-handle i {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
#recipesList .recipe-drag-handle {
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
#recipesList .recipe-drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
#recipesList .recipe-drag-handle:focus-visible {
|
||||
outline: 2px solid var(--primary-color, #0d6efd);
|
||||
outline-offset: 2px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#recipesList .recipe-drag-handle i {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-table-move-group .btn:focus,
|
||||
#recipesList .recipe-table-move-group .btn:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-table-delete-btn,
|
||||
#recipesList .recipe-table-delete-btn,
|
||||
.feed-dispensers-page .dispenser-card .recipe-table-delete-btn,
|
||||
.components-page .component-card .recipe-table-delete-btn {
|
||||
background: transparent !important;
|
||||
border: 1px solid var(--border-light, rgba(148, 163, 184, 0.35)) !important;
|
||||
color: var(--text-muted, #94a3b8) !important;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-table-delete-btn:hover,
|
||||
#recipeEdit .recipe-table-delete-btn:focus,
|
||||
#recipesList .recipe-table-delete-btn:hover,
|
||||
#recipesList .recipe-table-delete-btn:focus,
|
||||
.feed-dispensers-page .dispenser-card .recipe-table-delete-btn:hover,
|
||||
.feed-dispensers-page .dispenser-card .recipe-table-delete-btn:focus,
|
||||
.components-page .component-card .recipe-table-delete-btn:hover,
|
||||
.components-page .component-card .recipe-table-delete-btn:focus {
|
||||
color: var(--danger-color, #ef4444) !important;
|
||||
background: rgba(239, 68, 68, 0.08) !important;
|
||||
border-color: rgba(239, 68, 68, 0.35) !important;
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
html[data-theme="dark"] #recipeEdit .zt-data-grid__cell {
|
||||
background: var(--dm-surface);
|
||||
border-bottom-color: var(--dm-border);
|
||||
color: var(--dm-text);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #recipeEdit .zt-data-grid__cell--head {
|
||||
background: var(--dm-field);
|
||||
color: var(--dm-muted);
|
||||
border-bottom-color: var(--dm-border);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #recipeEdit .zt-data-grid__body .zt-data-grid__row:hover .zt-data-grid__cell {
|
||||
background: rgba(var(--primary-rgb), 0.15);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #recipeEdit .zt-data-grid__foot .zt-data-grid__row--total {
|
||||
background: var(--dm-field);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #recipeEdit .zt-data-grid__foot .zt-data-grid__cell {
|
||||
background: transparent;
|
||||
color: var(--dm-text);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #recipeEdit .recipe-table-delete-btn,
|
||||
html[data-theme="dark"] #recipesList .recipe-table-delete-btn,
|
||||
html[data-theme="dark"] .feed-dispensers-page .dispenser-card .recipe-table-delete-btn,
|
||||
html[data-theme="dark"] .components-page .component-card .recipe-table-delete-btn {
|
||||
color: var(--dm-muted) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #recipeEdit .recipe-table-delete-btn:hover,
|
||||
html[data-theme="dark"] #recipeEdit .recipe-table-delete-btn:focus,
|
||||
html[data-theme="dark"] #recipesList .recipe-table-delete-btn:hover,
|
||||
html[data-theme="dark"] #recipesList .recipe-table-delete-btn:focus,
|
||||
html[data-theme="dark"] .feed-dispensers-page .dispenser-card .recipe-table-delete-btn:hover,
|
||||
html[data-theme="dark"] .feed-dispensers-page .dispenser-card .recipe-table-delete-btn:focus,
|
||||
html[data-theme="dark"] .components-page .component-card .recipe-table-delete-btn:hover,
|
||||
html[data-theme="dark"] .components-page .component-card .recipe-table-delete-btn:focus {
|
||||
color: #f87171 !important;
|
||||
background: rgba(239, 68, 68, 0.12) !important;
|
||||
border-color: rgba(239, 68, 68, 0.35) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #recipeEdit .zt-data-grid .form-control {
|
||||
min-height: 2.5rem;
|
||||
line-height: 1.5;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
box-shadow: none !important;
|
||||
opacity: 1 !important;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
background-color: var(--dm-field) !important;
|
||||
color: var(--dm-text) !important;
|
||||
border-color: var(--dm-border) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #recipeEdit .zt-data-grid .form-control:focus:not(:disabled):not(.mode-locked-field) {
|
||||
box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #recipeEdit .zt-data-grid .form-control.mode-locked-field,
|
||||
html[data-theme="dark"] #recipeEdit .zt-data-grid .form-control:disabled,
|
||||
html[data-theme="dark"] #recipeEdit .zt-data-grid .form-control[readonly] {
|
||||
background-color: #23292f !important;
|
||||
background-image: none !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.38) !important;
|
||||
color: var(--dm-text) !important;
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35) !important;
|
||||
min-height: 2.5rem;
|
||||
-webkit-text-fill-color: var(--dm-text) !important;
|
||||
}
|
||||
@@ -0,0 +1,888 @@
|
||||
/**
|
||||
* Mobile layout for /recipes — dashboard steps, card tables, fullscreen editor.
|
||||
* Breakpoint matches recipes.html mobile-nav (@768px).
|
||||
*/
|
||||
|
||||
.ingredient-mobile-summary,
|
||||
.ingredient-mobile-sheet,
|
||||
.unloading-group-mobile-summary,
|
||||
.unloading-group-mobile-sheet {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* --- Dashboard step navigation --- */
|
||||
.recipes-mobile-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.65rem 0.85rem;
|
||||
background: var(--surface-card, #fff);
|
||||
border: 1px solid var(--border-subtle, #e2e8f0);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--box-shadow, 0 1px 3px rgba(15, 23, 42, 0.06));
|
||||
}
|
||||
|
||||
.recipes-mobile-nav[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.recipes-mobile-nav-back {
|
||||
flex-shrink: 0;
|
||||
min-height: 44px;
|
||||
padding: 0.4rem 0.75rem;
|
||||
border-radius: 10px;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.recipes-mobile-nav-title {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #0f172a);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
body.dashboard-mobile-step-dispensers #periodsCol,
|
||||
body.dashboard-mobile-step-dispensers #recipesCol {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.dashboard-mobile-step-periods #dispensersCol,
|
||||
body.dashboard-mobile-step-periods #recipesCol {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.dashboard-mobile-step-recipes #dispensersCol,
|
||||
body.dashboard-mobile-step-recipes #periodsCol {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.dashboard-mobile-step-periods #periodsCol,
|
||||
body.dashboard-mobile-step-recipes #recipesCol {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
body.dashboard-mobile-step-dispensers #dispensersCol {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* --- Recipe list cards --- */
|
||||
#recipesList .recipe-actions .btn {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
padding: 0.45rem 0.65rem;
|
||||
}
|
||||
|
||||
#recipesList .recipe-actions-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#recipesList .recipe-drag-handle {
|
||||
touch-action: none;
|
||||
-webkit-user-drag: element;
|
||||
}
|
||||
|
||||
#recipesList .list-item.recipe-card-dragging {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
#recipesList.recipe-list-reorder-active {
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
body.recipe-list-reorder-tracking {
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.recipe-reorder-edge-hints {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1295;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.recipe-reorder-edge-hint {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.18s ease;
|
||||
}
|
||||
|
||||
.recipe-reorder-edge-hint--top {
|
||||
top: 0;
|
||||
background: linear-gradient(to bottom, rgba(var(--primary-rgb), 0.28), rgba(var(--primary-rgb), 0));
|
||||
}
|
||||
|
||||
.recipe-reorder-edge-hint--bottom {
|
||||
bottom: 0;
|
||||
background: linear-gradient(to top, rgba(var(--primary-rgb), 0.28), rgba(var(--primary-rgb), 0));
|
||||
}
|
||||
|
||||
.recipe-reorder-edge-hint.is-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.recipe-reorder-hint--floating {
|
||||
position: fixed;
|
||||
left: 0.75rem;
|
||||
right: 0.75rem;
|
||||
bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
|
||||
z-index: 1296;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.recipe-list-scroll-zone-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.28rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color, #2196f3);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.recipe-reorder-hint,
|
||||
.recipe-reorder-hint--floating {
|
||||
padding: 0.55rem 0.75rem;
|
||||
border-radius: 10px;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
color: var(--primary-color, #2196f3);
|
||||
background: rgba(var(--primary-rgb), 0.1);
|
||||
border: 1px solid rgba(var(--primary-rgb), 0.22);
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
transition: opacity 0.22s ease, transform 0.22s ease;
|
||||
}
|
||||
|
||||
.recipe-reorder-hint.is-visible,
|
||||
.recipe-reorder-hint--floating.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
#recipesList {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#recipesList .recipe-card-insert-indicator {
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
right: 0.5rem;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
background: var(--primary-color, #2196f3);
|
||||
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18);
|
||||
pointer-events: none;
|
||||
z-index: 8;
|
||||
}
|
||||
|
||||
#recipesList .list-item.recipe-card-dragging {
|
||||
opacity: 0.35;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.recipe-card-drag-ghost--card-clone {
|
||||
position: fixed;
|
||||
z-index: 1300;
|
||||
pointer-events: none;
|
||||
opacity: 0.96;
|
||||
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.22);
|
||||
margin: 0 !important;
|
||||
transition: none !important;
|
||||
transform: none;
|
||||
will-change: left, top;
|
||||
}
|
||||
|
||||
body.recipe-mobile-transfer-armed #recipesList .recipe-drag-handle {
|
||||
color: var(--primary-color, #2196f3);
|
||||
border-color: rgba(var(--primary-rgb), 0.45);
|
||||
background: rgba(var(--primary-rgb), 0.12);
|
||||
}
|
||||
|
||||
body.recipe-mobile-transfer-armed #recipesCol .card-header::after {
|
||||
content: "Режим переноса: выберите период или оборудование";
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 0.35rem;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
color: var(--primary-color, #2196f3);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* --- Transfer drag: show hidden dashboard columns as overlay --- */
|
||||
body.recipe-transfer-session #recipesMobileNav {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.recipe-transfer-session #dispensersCol,
|
||||
body.recipe-transfer-session #periodsCol {
|
||||
display: block !important;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1250;
|
||||
margin: 0 !important;
|
||||
padding: 0 0.5rem;
|
||||
max-height: 42vh;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: var(--surface-page, #f5f7fa);
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
|
||||
}
|
||||
|
||||
body.recipe-transfer-session #dispensersCol {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
body.recipe-transfer-session #periodsCol {
|
||||
top: 42vh;
|
||||
max-height: 38vh;
|
||||
}
|
||||
|
||||
body.recipe-transfer-session #recipesCol {
|
||||
display: block !important;
|
||||
margin-top: 80vh;
|
||||
}
|
||||
|
||||
body.recipe-transfer-session #recipesCol .card-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#recipesList .recipe-card-meta {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem 0.75rem;
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
#recipesList .recipe-card-meta > * {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
/* --- Fullscreen recipe editor --- */
|
||||
body.recipe-edit-mobile-open {
|
||||
overflow: hidden;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open .mobile-navbar,
|
||||
body.recipe-edit-mobile-open .app-footer,
|
||||
body.recipe-edit-mobile-open .page-content {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open #recipesDashboard,
|
||||
body.recipe-edit-mobile-open #recipesMobileNav {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open #recipeEdit,
|
||||
#recipeEdit.recipe-edit--mobile-active {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
height: 100dvh;
|
||||
z-index: 1200;
|
||||
margin: 0 !important;
|
||||
overflow: hidden !important;
|
||||
background: var(--surface-page, #f5f7fa);
|
||||
padding-bottom: 0;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open #recipeEdit .recipe-edit-panel,
|
||||
#recipeEdit.recipe-edit--mobile-active .recipe-edit-panel {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
overflow: hidden !important;
|
||||
touch-action: pan-x pan-y;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open #recipeEdit #recipeForm,
|
||||
#recipeEdit.recipe-edit--mobile-active #recipeForm {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open #recipeEdit #recipeForm > .card-body,
|
||||
#recipeEdit.recipe-edit--mobile-active #recipeForm > .card-body {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior-y: contain;
|
||||
touch-action: pan-y;
|
||||
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open #recipeEdit #recipeForm > .card-header,
|
||||
#recipeEdit.recipe-edit--mobile-active #recipeForm > .card-header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open #recipeEdit .card-body,
|
||||
#recipeEdit.recipe-edit--mobile-active .card-body {
|
||||
padding-left: 0.85rem;
|
||||
padding-right: 0.85rem;
|
||||
}
|
||||
|
||||
/* --- Compact recipe edit header --- */
|
||||
body.recipe-edit-mobile-open #recipeEdit .recipe-edit-header,
|
||||
#recipeEdit.recipe-edit--mobile-active .recipe-edit-header {
|
||||
padding: 0.4rem 0.85rem;
|
||||
padding-top: calc(0.4rem + env(safe-area-inset-top, 0px));
|
||||
background: var(--surface-card, #fff);
|
||||
border-bottom: 1px solid var(--border-subtle, #e2e8f0);
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open #recipeEdit .recipe-edit-header-text,
|
||||
#recipeEdit.recipe-edit--mobile-active .recipe-edit-header-text {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open #recipeEdit .recipe-edit-header-inner,
|
||||
#recipeEdit.recipe-edit--mobile-active .recipe-edit-header-inner {
|
||||
justify-content: flex-end;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open #recipeEdit .recipe-edit-header-actions,
|
||||
#recipeEdit.recipe-edit--mobile-active .recipe-edit-header-actions {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open #recipeEdit .recipe-edit-header-actions .d-flex,
|
||||
#recipeEdit.recipe-edit--mobile-active .recipe-edit-header-actions .d-flex {
|
||||
justify-content: flex-end;
|
||||
gap: 0.35rem;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open #recipeEdit .recipe-edit-header-icon-btn,
|
||||
#recipeEdit.recipe-edit--mobile-active .recipe-edit-header-icon-btn {
|
||||
min-width: 36px;
|
||||
min-height: 36px;
|
||||
padding: 0.28rem 0.38rem;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-section-toolbar > .btn-primary,
|
||||
#recipeEdit .recipe-section-toolbar .recipe-section-toggle-btn {
|
||||
min-height: 36px;
|
||||
padding: 0.32rem 0.7rem;
|
||||
font-size: 0.875rem;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-section-card > .card-header {
|
||||
padding: 0.65rem 0.85rem;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-section-card > .card-body {
|
||||
padding: 0.75rem 1rem 1rem;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-section-toolbar {
|
||||
margin-bottom: 0.75rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-section-toolbar-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open #recipeEdit #recipeForm > .card-body > .row,
|
||||
#recipeEdit.recipe-edit--mobile-active #recipeForm > .card-body > .row {
|
||||
margin-bottom: 0.65rem !important;
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open #recipeEdit #recipeForm > .card-body > .row .form-group,
|
||||
#recipeEdit.recipe-edit--mobile-active #recipeForm > .card-body > .row .form-group {
|
||||
margin-bottom: 0.55rem;
|
||||
}
|
||||
|
||||
/* --- Card layout for edit data grids --- */
|
||||
#recipeEdit .zt-data-grid__scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__head {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#recipeEdit #ingredientsTable.ingredients-table--dm-unlocked .ingredient-detail-cell.dry-matter-per-head {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* --- Compact ingredient list (mobile) --- */
|
||||
#recipeEdit #ingredientsTableBody .ingredient-row {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid var(--border-subtle, #e2e8f0);
|
||||
}
|
||||
|
||||
#recipeEdit #ingredientsTableBody .ingredient-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#recipeEdit #ingredientsTableBody .ingredient-row .zt-data-grid__cell {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#recipeEdit #ingredientsTableBody .ingredient-row .ingredient-mobile-summary {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#recipeEdit #ingredientsTableBody .ingredient-row .ingredient-detail-cell {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* --- Compact unloading groups list (mobile) --- */
|
||||
#recipeEdit #unloadingGroupsTableBody .unloading-group-row {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid var(--border-subtle, #e2e8f0);
|
||||
}
|
||||
|
||||
#recipeEdit #unloadingGroupsTableBody .unloading-group-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#recipeEdit #unloadingGroupsTableBody .unloading-group-row .zt-data-grid__cell {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#recipeEdit #unloadingGroupsTableBody .unloading-group-row .unloading-group-mobile-summary {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#recipeEdit #unloadingGroupsTableBody .unloading-group-row .unloading-group-detail-cell {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#recipeEdit #unloadingGroupsTable .zt-data-grid__foot,
|
||||
#recipeEdit #ingredientsTable .zt-data-grid__foot {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-table-row-actions {
|
||||
justify-content: flex-start !important;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-table-move-group .btn,
|
||||
#recipeEdit .recipe-table-delete-btn {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.recipe-mobile-row-summary-btn,
|
||||
.ingredient-mobile-summary-btn,
|
||||
.unloading-group-mobile-summary-btn {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0.75rem 0.85rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
gap: 0.55rem;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ingredient-mobile-name,
|
||||
.unloading-group-mobile-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-primary, #0f172a);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ingredient-mobile-trip,
|
||||
.unloading-group-mobile-meta {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary, #64748b);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.recipe-mobile-row-summary-chevron,
|
||||
.ingredient-mobile-summary-chevron {
|
||||
flex-shrink: 0;
|
||||
color: var(--text-secondary, #64748b);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Hide desktop totals block — values are in edit sheet or recalculated */
|
||||
|
||||
/* --- Mobile edit bottom sheets --- */
|
||||
.recipe-mobile-edit-sheet[hidden],
|
||||
.ingredient-mobile-sheet[hidden],
|
||||
.unloading-group-mobile-sheet[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.recipe-mobile-edit-sheet:not([hidden]),
|
||||
.ingredient-mobile-sheet:not([hidden]),
|
||||
.unloading-group-mobile-sheet:not([hidden]) {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1400;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
body.ingredient-mobile-sheet-open,
|
||||
body.unloading-group-mobile-sheet-open,
|
||||
body.recipe-help-modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.recipe-mobile-edit-sheet-backdrop,
|
||||
.ingredient-mobile-sheet-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: rgba(15, 23, 42, 0.45);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.recipe-mobile-edit-sheet-panel,
|
||||
.ingredient-mobile-sheet-panel {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: min(82dvh, 620px);
|
||||
min-height: 0;
|
||||
background: var(--surface-card, #fff);
|
||||
border-radius: 16px 16px 0 0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.15);
|
||||
touch-action: pan-y;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.recipe-mobile-edit-sheet-grab {
|
||||
flex-shrink: 0;
|
||||
width: 2.75rem;
|
||||
height: 0.28rem;
|
||||
margin: 0.55rem auto 0.15rem;
|
||||
border-radius: 999px;
|
||||
background: var(--border-subtle, rgba(148, 163, 184, 0.55));
|
||||
touch-action: none;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.recipe-mobile-edit-sheet--dragging .recipe-mobile-edit-sheet-grab {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.recipe-mobile-edit-sheet--dragging .recipe-mobile-edit-sheet-body,
|
||||
.recipe-mobile-edit-sheet--dragging .ingredient-mobile-sheet-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.recipe-mobile-edit-sheet-header,
|
||||
.ingredient-mobile-sheet-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.65rem;
|
||||
padding: 0.85rem 1.1rem 0.75rem;
|
||||
border-bottom: 1px solid var(--border-subtle, #e2e8f0);
|
||||
flex-shrink: 0;
|
||||
touch-action: none;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.recipe-mobile-edit-sheet-done,
|
||||
.ingredient-mobile-sheet-done {
|
||||
min-height: 36px;
|
||||
min-width: 5.5rem;
|
||||
padding-left: 0.85rem;
|
||||
padding-right: 0.85rem;
|
||||
font-size: 0.875rem;
|
||||
flex-shrink: 0;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.recipe-mobile-edit-sheet-title,
|
||||
.ingredient-mobile-sheet-title {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
padding-right: 0.35rem;
|
||||
}
|
||||
|
||||
.recipe-mobile-edit-sheet-body,
|
||||
.ingredient-mobile-sheet-body {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
.ingredient-mobile-sheet-field,
|
||||
.unloading-group-mobile-sheet-field {
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border-subtle, #e2e8f0);
|
||||
}
|
||||
|
||||
.ingredient-mobile-sheet-field:last-child,
|
||||
.unloading-group-mobile-sheet-field:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ingredient-mobile-sheet-label,
|
||||
.unloading-group-mobile-sheet-label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.ingredient-mobile-sheet-field .form-control,
|
||||
.ingredient-mobile-sheet-field .form-select,
|
||||
.unloading-group-mobile-sheet-field .form-control,
|
||||
.unloading-group-mobile-sheet-field .form-select {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.ingredient-mobile-sheet-field.ingredient-mobile-sheet-actions,
|
||||
.unloading-group-mobile-sheet-field.unloading-group-mobile-sheet-actions {
|
||||
padding-top: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0;
|
||||
border-top: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.ingredient-mobile-sheet-actions .recipe-table-row-actions,
|
||||
.unloading-group-mobile-sheet-actions .recipe-table-row-actions {
|
||||
display: grid !important;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
justify-content: stretch !important;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ingredient-mobile-sheet-actions .recipe-table-move-group,
|
||||
.unloading-group-mobile-sheet-actions .recipe-table-move-group {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.ingredient-mobile-sheet-actions .recipe-table-move-group .btn,
|
||||
.unloading-group-mobile-sheet-actions .recipe-table-move-group .btn,
|
||||
.ingredient-mobile-sheet-actions .recipe-table-delete-btn,
|
||||
.unloading-group-mobile-sheet-actions .recipe-table-delete-btn {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
min-width: 0;
|
||||
padding: 0.55rem 0.75rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.05rem;
|
||||
border-radius: 0.5rem !important;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.ingredient-mobile-sheet-actions .recipe-table-delete-btn,
|
||||
.unloading-group-mobile-sheet-actions .recipe-table-delete-btn {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.ingredient-mobile-sheet.ingredients-table--dm-unlocked .ingredient-mobile-sheet-field.dry-matter-per-head {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-help-icon-btn {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.recipe-help-modal-body {
|
||||
padding: 0 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.recipe-help-modal-body .zt-notice--static {
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Footer actions: hidden on mobile — use header icons (save / print / close) */
|
||||
body.recipe-edit-mobile-open #recipeEdit .recipe-form-footer-actions,
|
||||
#recipeEdit.recipe-edit--mobile-active .recipe-form-footer-actions {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* iOS zoom prevention for top-level form fields */
|
||||
#recipeEdit .form-control,
|
||||
#recipeEdit .form-select {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
#recipesList .recipe-card-meta {
|
||||
flex-direction: column;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
html[data-theme="dark"] .recipes-mobile-nav {
|
||||
background: var(--dm-surface, #1a2228);
|
||||
border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .recipes-mobile-nav-title {
|
||||
color: var(--dm-text, #e9ecef);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #recipeEdit #ingredientsTableBody .ingredient-row,
|
||||
html[data-theme="dark"] #recipeEdit #unloadingGroupsTableBody .unloading-group-row {
|
||||
border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #recipeEdit .zt-data-grid__foot .zt-data-grid__row {
|
||||
border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body.recipe-edit-mobile-open #recipeEdit,
|
||||
html[data-theme="dark"] #recipeEdit.recipe-edit--mobile-active {
|
||||
background: var(--dm-bg, #12181b);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body.recipe-transfer-session #dispensersCol,
|
||||
html[data-theme="dark"] body.recipe-transfer-session #periodsCol {
|
||||
background: var(--dm-bg, #12181b);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body.recipe-edit-mobile-open #recipeEdit .recipe-edit-header,
|
||||
html[data-theme="dark"] #recipeEdit.recipe-edit--mobile-active .recipe-edit-header {
|
||||
background: var(--dm-surface, #1a2228);
|
||||
border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .recipe-help-modal-panel,
|
||||
html[data-theme="dark"] .recipe-mobile-edit-sheet-panel,
|
||||
html[data-theme="dark"] .ingredient-mobile-sheet-panel {
|
||||
background: var(--dm-surface, #1a2228);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .recipe-mobile-edit-sheet-header,
|
||||
html[data-theme="dark"] .ingredient-mobile-sheet-header {
|
||||
border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .recipe-mobile-edit-sheet-grab {
|
||||
background: rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .ingredient-mobile-sheet-field,
|
||||
html[data-theme="dark"] .unloading-group-mobile-sheet-field {
|
||||
border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .ingredient-mobile-name,
|
||||
html[data-theme="dark"] .unloading-group-mobile-name {
|
||||
color: var(--dm-text, #e9ecef);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #recipeEdit #ingredientsTableBody .ingredient-row,
|
||||
html[data-theme="dark"] #recipeEdit #unloadingGroupsTableBody .unloading-group-row {
|
||||
border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #recipesList .recipe-card-insert-indicator {
|
||||
box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.22);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .recipe-card-drag-ghost--card-clone {
|
||||
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .recipe-list-scroll-zone-label {
|
||||
background: rgba(26, 34, 40, 0.94);
|
||||
color: #64b5f6;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .recipe-reorder-hint {
|
||||
background: rgba(100, 181, 246, 0.1);
|
||||
border-color: rgba(100, 181, 246, 0.24);
|
||||
color: #64b5f6;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,986 @@
|
||||
/**
|
||||
* /reports — таблицы, фильтры, отступы (карточки — inline в reports.html как на /components).
|
||||
*/
|
||||
|
||||
/* Карточки отчётов не интерактивные — без hover-подсветки (кроме контроля отклонений) */
|
||||
.zootech-app-body.reports-page .report-card.list-item:not(.deviation-report-card):hover {
|
||||
background: var(--bg-white, #fff) !important;
|
||||
border-color: var(--border-light) !important;
|
||||
box-shadow: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .zootech-app-body.reports-page .report-card.list-item:not(.deviation-report-card):hover {
|
||||
background: var(--bg-white, #2c3338) !important;
|
||||
border-color: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
|
||||
.reports-page .reports-container {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.reports-page .period-selectors {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* Шапка и вкладки */
|
||||
.reports-page .reports-controls__head {
|
||||
margin-bottom: var(--zt-space-3, 1rem);
|
||||
}
|
||||
|
||||
.reports-page .reports-controls__head .form-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.reports-page .reports-controls__block + .reports-controls__block {
|
||||
margin-top: var(--zt-space-3, 1rem);
|
||||
padding-top: var(--zt-space-3, 1rem);
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.reports-page .reports-controls__block--tabs {
|
||||
padding-top: 0;
|
||||
border-top: none;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.reports-page .reports-controls__block--filters {
|
||||
margin-bottom: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.reports-page .reports-controls .zt-tabs {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.reports-page .reports-view-tabs-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--zt-space-2, 0.5rem) var(--zt-space-3, 0.75rem);
|
||||
}
|
||||
|
||||
.reports-page .reports-view-tabs-row__sep {
|
||||
width: 1px;
|
||||
height: 1.25rem;
|
||||
background: var(--border-light);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.reports-page .reports-journal-tabs-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--zt-space-2, 0.5rem);
|
||||
}
|
||||
|
||||
/* Компактная строка фильтров — единая сетка */
|
||||
.reports-page .reports-filter-bar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(11rem, 1.15fr) minmax(8.5rem, 0.95fr) minmax(7.5rem, 0.85fr) auto;
|
||||
gap: var(--zt-space-2, 0.5rem);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-bar--with-farm {
|
||||
grid-template-columns:
|
||||
minmax(10rem, 1fr)
|
||||
minmax(7.5rem, 0.85fr)
|
||||
minmax(7rem, 0.8fr)
|
||||
minmax(6.5rem, 0.75fr)
|
||||
auto;
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-bar__control,
|
||||
.reports-page .reports-filter-bar__select,
|
||||
.reports-page .reports-drp__trigger,
|
||||
.reports-page .reports-filter-bar__apply {
|
||||
width: 100%;
|
||||
min-height: var(--zt-btn-height, 40px);
|
||||
height: var(--zt-btn-height, 40px);
|
||||
font-size: var(--zt-font-body, 0.875rem);
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-bar__apply {
|
||||
width: auto;
|
||||
min-width: 7.5rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
white-space: nowrap;
|
||||
padding-inline: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-select {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-select__native {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-dropdown__trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.45rem;
|
||||
width: 100%;
|
||||
padding: 0 0.75rem;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--zt-radius-md, 10px);
|
||||
background: var(--surface, var(--bg-white, #fff));
|
||||
color: var(--text, var(--text-dark));
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
box-shadow: none;
|
||||
appearance: none;
|
||||
font-size: var(--zt-font-body, 0.875rem);
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-dropdown__label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-dropdown__chev {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.65rem;
|
||||
color: var(--muted, var(--text-muted));
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-dropdown__trigger:hover {
|
||||
border-color: rgba(var(--primary-rgb, 13, 110, 253), 0.35);
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-dropdown__trigger:focus,
|
||||
.reports-page .reports-filter-dropdown__trigger[aria-expanded="true"] {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 13, 110, 253), 0.15);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-dropdown__menu {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: calc(100% + 0.35rem);
|
||||
z-index: 1200;
|
||||
max-height: 16rem;
|
||||
overflow-y: auto;
|
||||
padding: 0.35rem;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--zt-radius-md, 10px);
|
||||
background: var(--surface, var(--bg-white, #fff));
|
||||
box-shadow: var(--shadow-soft, 0 8px 24px rgba(15, 23, 42, 0.12));
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-dropdown__item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
padding: 0.45rem 0.65rem;
|
||||
border-radius: var(--zt-radius-sm, 8px);
|
||||
cursor: pointer;
|
||||
color: var(--text, var(--text-dark));
|
||||
font-size: var(--zt-font-body, 0.875rem);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-dropdown__item:hover,
|
||||
.reports-page .reports-filter-dropdown__item--active {
|
||||
background: rgba(var(--primary-rgb, 13, 110, 253), 0.08);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-dropdown__check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.65rem;
|
||||
border-radius: var(--zt-radius-sm, 8px);
|
||||
cursor: pointer;
|
||||
color: var(--text, var(--text-dark));
|
||||
font-size: var(--zt-font-body, 0.875rem);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-dropdown__check:hover {
|
||||
background: rgba(var(--primary-rgb, 13, 110, 253), 0.06);
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-dropdown__check-label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .reports-filter-dropdown__trigger,
|
||||
html[data-theme="dark"] .reports-page .reports-filter-dropdown__menu {
|
||||
background: var(--dm-field, var(--bg-white, #2c3338));
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .reports-filter-dropdown__item {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .reports-filter-dropdown__check {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-select .form-select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
padding-right: 2rem;
|
||||
background-color: var(--surface, var(--bg-white, #fff));
|
||||
color: var(--text, var(--text-dark));
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--zt-radius-md, 10px);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-select .form-select:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 13, 110, 253), 0.15);
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-select__chev {
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
font-size: 0.65rem;
|
||||
color: var(--muted, var(--text-muted));
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .reports-filter-select .form-select {
|
||||
background-color: var(--dm-field, var(--bg-white, #2c3338));
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
.reports-page .reports-export-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.reports-page .reports-export-dropdown__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.reports-page .reports-export-dropdown__chev {
|
||||
font-size: 0.6rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.reports-page .reports-export-dropdown__menu {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 0.35rem);
|
||||
z-index: 1200;
|
||||
min-width: 16.5rem;
|
||||
max-width: 19rem;
|
||||
padding: 0.35rem;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--zt-radius-md, 10px);
|
||||
background: var(--surface, var(--bg-white, #fff));
|
||||
box-shadow: var(--shadow-soft, 0 8px 24px rgba(15, 23, 42, 0.12));
|
||||
}
|
||||
|
||||
.reports-page .reports-export-dropdown__group + .reports-export-dropdown__group {
|
||||
margin-top: 0.35rem;
|
||||
padding-top: 0.35rem;
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.reports-page .reports-export-dropdown__group-label {
|
||||
padding: 0.2rem 0.65rem 0.35rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted, var(--text-muted));
|
||||
}
|
||||
|
||||
.reports-page .reports-export-dropdown__item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.55rem;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
padding: 0.55rem 0.65rem;
|
||||
border-radius: var(--zt-radius-sm, 8px);
|
||||
cursor: pointer;
|
||||
color: var(--text, var(--text-dark));
|
||||
}
|
||||
|
||||
.reports-page .reports-export-dropdown__icon {
|
||||
flex-shrink: 0;
|
||||
width: 1.125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 0.05rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.reports-page .reports-export-dropdown__text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.reports-page .reports-export-dropdown__item:hover {
|
||||
background: rgba(var(--primary-rgb, 13, 110, 253), 0.08);
|
||||
}
|
||||
|
||||
.reports-page .reports-export-dropdown__item strong {
|
||||
display: block;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.reports-page .reports-export-dropdown__item small {
|
||||
display: block;
|
||||
color: var(--muted, var(--text-muted));
|
||||
font-size: 0.6875rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .reports-export-dropdown__menu {
|
||||
background: var(--dm-field, #2c3338);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.reports-page .reports-drp {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0 0.75rem;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--zt-radius-md, 10px);
|
||||
background: var(--surface, var(--bg-white, #fff));
|
||||
color: var(--text, var(--text-dark));
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
box-shadow: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__trigger:hover {
|
||||
border-color: rgba(var(--primary-rgb, 13, 110, 253), 0.35);
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__trigger:focus,
|
||||
.reports-page .reports-drp__trigger[aria-expanded="true"] {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 13, 110, 253), 0.15);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__trigger .fa-calendar-alt {
|
||||
color: var(--primary-color);
|
||||
flex-shrink: 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__trigger #reportsDateRangeLabel {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__chev {
|
||||
margin-left: auto;
|
||||
font-size: 0.65rem;
|
||||
color: var(--muted, var(--text-muted));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__panel {
|
||||
position: fixed;
|
||||
z-index: 2500;
|
||||
width: min(19rem, calc(100vw - 1.5rem));
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--zt-radius-lg, 12px);
|
||||
background: var(--surface, var(--bg-white, #fff));
|
||||
box-shadow: var(--shadow-soft, 0 8px 24px rgba(15, 23, 42, 0.12));
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__presets {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__preset {
|
||||
flex: 1;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--zt-radius-sm, 8px);
|
||||
background: transparent;
|
||||
color: var(--text, var(--text-dark));
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 0.35rem 0.35rem;
|
||||
min-height: 2rem;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition, 0.15s), border-color var(--transition, 0.15s);
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__preset.active,
|
||||
.reports-page .reports-drp__preset:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
background: rgba(var(--primary-rgb, 13, 110, 253), 0.08);
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__cal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.35rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text, var(--text-dark));
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__nav {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--muted, var(--text-muted));
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: var(--zt-radius-sm, 8px);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__nav:hover {
|
||||
background: rgba(var(--primary-rgb, 13, 110, 253), 0.08);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__weekdays,
|
||||
.reports-page .reports-drp__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__weekdays {
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
color: var(--muted, var(--text-muted));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__day {
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: var(--zt-radius-sm, 8px);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.75rem;
|
||||
height: 1.75rem;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: var(--text, var(--text-dark));
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__day--empty {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__day--today {
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__day--in-range {
|
||||
background: rgba(var(--primary-rgb, 13, 110, 253), 0.12);
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__day--edge {
|
||||
background: var(--primary-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__day--edge.reports-drp__day--today {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
html[data-theme="dark"] .reports-page .reports-drp__trigger,
|
||||
html[data-theme="dark"] .reports-page .reports-drp__panel {
|
||||
background: var(--dm-field, var(--bg-white, #2c3338));
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .reports-drp__preset {
|
||||
color: #f5f5f5;
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .reports-drp__day {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .reports-drp__cal-head {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .reports-drp__weekdays {
|
||||
color: #a8b0b8;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.reports-page .reports-filter-bar,
|
||||
.reports-page .reports-filter-bar--with-farm {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.reports-page .reports-drp {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.reports-page .reports-filter-bar__apply {
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.reports-page .reports-filter-bar__apply-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.reports-page .calendar-inputs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.reports-page .calendar-group {
|
||||
flex: 1;
|
||||
min-width: min(100%, 200px);
|
||||
}
|
||||
|
||||
.reports-page .filters-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.reports-page .filter-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.reports-page .report-section {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.reports-page .report-section__title {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.reports-page .report-section__title i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.reports-page .report-table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--zt-radius-sm, 8px);
|
||||
}
|
||||
|
||||
.reports-page .components-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.8125rem;
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.reports-page .components-table th,
|
||||
.reports-page .components-table td {
|
||||
padding: 0.5rem 0.65rem;
|
||||
text-align: right;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.reports-page .components-table th:first-child,
|
||||
.reports-page .components-table td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.reports-page .components-table th {
|
||||
background: rgba(var(--primary-rgb, 33, 150, 243), 0.06);
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.reports-page .components-table th:hover {
|
||||
background: rgba(var(--primary-rgb, 33, 150, 243), 0.1);
|
||||
}
|
||||
|
||||
.reports-page .components-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.reports-page .components-table tbody tr:hover {
|
||||
background: rgba(var(--primary-rgb, 33, 150, 243), 0.04);
|
||||
}
|
||||
|
||||
.reports-page .deviation-negative {
|
||||
color: #ef4444;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.reports-page .deviation-positive {
|
||||
color: #10b981;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.reports-page .deviation-significant {
|
||||
color: #ef4444;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.reports-page .loading-duration {
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.reports-page .empty-state {
|
||||
text-align: center;
|
||||
padding: 2.5rem 1rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.reports-page .empty-state .empty-icon {
|
||||
font-size: 3rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.reports-page .reports-controls .btn-outline-success {
|
||||
--bs-btn-color: #059669;
|
||||
--bs-btn-border-color: rgba(5, 150, 105, 0.45);
|
||||
--bs-btn-hover-bg: rgba(5, 150, 105, 0.08);
|
||||
--bs-btn-hover-border-color: #059669;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .report-section__title {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .components-table th {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .components-table th,
|
||||
html[data-theme="dark"] .reports-page .components-table td {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .report-table-wrap {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .reports-controls .btn-outline-success {
|
||||
--bs-btn-color: #6ee7b7;
|
||||
--bs-btn-border-color: rgba(110, 231, 183, 0.35);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.reports-page .report-card__top {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.reports-page .component-info {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.reports-page .calendar-inputs {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.reports-page .filter-buttons {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reports-page .filter-buttons .btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.reports-page .reports-controls__head-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.reports-page .feed-alerts-summary-chip {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--warning-color, #d97706);
|
||||
background: rgba(217, 119, 6, 0.12);
|
||||
border-radius: 999px;
|
||||
padding: 0.25rem 0.65rem;
|
||||
}
|
||||
|
||||
.reports-page .reports-view-tabs,
|
||||
.reports-page .alerts-severity-tabs {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Лента отклонений — карточки как на /components */
|
||||
.reports-page .deviation-feed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.reports-page .deviation-alert-card.list-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
background: var(--bg-white, #fff);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 1rem;
|
||||
padding: 1rem 1.25rem;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-soft);
|
||||
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.reports-page .deviation-alert-card.list-item:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: var(--shadow-soft), 0 0 0 1px rgba(var(--primary-rgb, 33, 150, 243), 0.2);
|
||||
background-color: rgba(var(--primary-rgb), 0.04);
|
||||
}
|
||||
|
||||
.reports-page .deviation-alert-card__top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.reports-page .deviation-alert-card__head {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.reports-page .deviation-alert-card__title {
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
margin: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.reports-page .deviation-alert-card__title i {
|
||||
color: var(--primary-color);
|
||||
font-size: 0.8rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.reports-page .deviation-type-badge {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.reports-page .deviation-type-badge--warning {
|
||||
background: rgba(245, 158, 11, 0.14);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.reports-page .deviation-type-badge--error {
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.reports-page .deviation-alert-card__info {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 0.35rem 1rem;
|
||||
}
|
||||
|
||||
.reports-page .deviation-alert-card__context {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-dark);
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.reports-page .deviation-alert-card__meta {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.reports-page .deviation-feed-item__dot {
|
||||
flex-shrink: 0;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
margin-top: 0.45rem;
|
||||
}
|
||||
|
||||
.reports-page .deviation-feed-item__dot--warning {
|
||||
background: var(--warning-color, #f59e0b);
|
||||
}
|
||||
|
||||
.reports-page .deviation-feed-item__dot--error {
|
||||
background: var(--danger-color, #ef4444);
|
||||
}
|
||||
|
||||
.reports-page .deviation-feed-item__dot--info {
|
||||
background: var(--info-color, #0ea5e9);
|
||||
}
|
||||
|
||||
.reports-page .deviation-feed-item__delta {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.reports-page .deviation-feed-item__chevron {
|
||||
align-self: flex-end;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.45;
|
||||
font-size: 0.7rem;
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.reports-page .deviation-alert-card:hover .deviation-feed-item__chevron {
|
||||
opacity: 0.85;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .deviation-alert-card.list-item {
|
||||
background: var(--bg-white) !important;
|
||||
border-color: rgba(255, 255, 255, 0.12) !important;
|
||||
box-shadow: none !important;
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .deviation-alert-card.list-item:hover {
|
||||
background-color: rgba(var(--primary-rgb), 0.1) !important;
|
||||
border-color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .deviation-alert-card__title,
|
||||
html[data-theme="dark"] .reports-page .deviation-alert-card__context {
|
||||
color: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .deviation-alert-card__meta {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .deviation-type-badge--warning {
|
||||
background: rgba(251, 191, 36, 0.22);
|
||||
color: #fcd34d;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .deviation-type-badge--error {
|
||||
background: rgba(248, 113, 113, 0.22);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .deviation-feed-item__delta {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .deviation-negative,
|
||||
html[data-theme="dark"] .reports-page .deviation-significant {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .deviation-positive {
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .feed-alerts-summary-chip {
|
||||
color: #fbbf24;
|
||||
background: rgba(251, 191, 36, 0.16);
|
||||
}
|
||||
@@ -0,0 +1,807 @@
|
||||
/**
|
||||
* Компоненты операторского UI — карточки, кнопки, формы, табы, loading, empty.
|
||||
* После wesp-zootech-layout.css
|
||||
*/
|
||||
|
||||
/* —— Section —— */
|
||||
.zt-section {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--zt-radius-lg);
|
||||
box-shadow: var(--shadow-soft);
|
||||
padding: var(--zt-space-4);
|
||||
margin-bottom: var(--zt-space-4);
|
||||
}
|
||||
|
||||
.zt-section__head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--zt-space-3);
|
||||
margin-bottom: var(--zt-space-3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.zt-section__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--zt-space-2);
|
||||
font-size: var(--zt-font-section);
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.zt-section__title i {
|
||||
color: var(--primary-color);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.zt-section__subtitle {
|
||||
font-size: var(--zt-font-body);
|
||||
color: var(--muted);
|
||||
margin: 0.25rem 0 0;
|
||||
}
|
||||
|
||||
.zt-section__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--zt-space-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* —— Card —— */
|
||||
.zt-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--zt-radius-lg);
|
||||
padding: var(--zt-space-4);
|
||||
box-shadow: var(--shadow-soft);
|
||||
transition: border-color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
.zt-card--interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zt-card--interactive:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: var(--shadow-soft), 0 0 0 2px rgba(var(--primary-rgb), 0.18);
|
||||
}
|
||||
|
||||
.zt-card--dashed {
|
||||
border-style: dashed;
|
||||
border-color: var(--border-light);
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: var(--zt-space-3);
|
||||
}
|
||||
|
||||
.zt-card--stat {
|
||||
border-left: 3px solid var(--primary-color);
|
||||
padding: var(--zt-space-3) var(--zt-space-4);
|
||||
}
|
||||
|
||||
.zt-card-grid {
|
||||
display: grid;
|
||||
gap: var(--zt-space-3);
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
}
|
||||
|
||||
/* Legacy aliases */
|
||||
.component-card,
|
||||
.dispenser-card,
|
||||
.consumption-block .zt-card {
|
||||
/* migrated pages use zt-card; keep hooks for gradual migration */
|
||||
}
|
||||
|
||||
/* —— Loading placeholder —— */
|
||||
.zt-loading-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--zt-space-2);
|
||||
min-height: 8rem;
|
||||
padding: var(--zt-space-3) 0;
|
||||
}
|
||||
|
||||
.zt-loading-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--zt-space-2);
|
||||
}
|
||||
|
||||
.zt-loading-list.dashboard-list-skeleton--exit,
|
||||
.dashboard-list-skeleton--exit {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.16s ease;
|
||||
}
|
||||
|
||||
.zt-card--loading {
|
||||
pointer-events: none;
|
||||
min-height: 5.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--zt-space-2);
|
||||
animation: zt-card-pulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes zt-card-pulse {
|
||||
0%,
|
||||
100% {
|
||||
border-color: var(--border-light);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
border-color: rgba(var(--primary-rgb), 0.35);
|
||||
opacity: 0.92;
|
||||
}
|
||||
}
|
||||
|
||||
.zt-spinner {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid var(--border-light);
|
||||
border-top-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: zt-spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
.zt-spinner--lg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
@keyframes zt-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.zt-loading-caption {
|
||||
font-size: var(--zt-font-caption);
|
||||
color: var(--muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.zt-loading-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--zt-space-3);
|
||||
padding: var(--zt-space-5);
|
||||
min-height: 12rem;
|
||||
}
|
||||
|
||||
/* —— Tabs —— */
|
||||
.zt-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--zt-space-1);
|
||||
margin-bottom: var(--zt-space-3);
|
||||
}
|
||||
|
||||
.zt-tab,
|
||||
.fa-tab-btn.period-btn {
|
||||
border: 1px solid var(--border-light);
|
||||
background: transparent;
|
||||
border-radius: var(--zt-radius-sm);
|
||||
padding: 0.45rem 0.85rem;
|
||||
font-size: var(--zt-font-body);
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition), border-color var(--transition),
|
||||
color var(--transition);
|
||||
min-height: var(--zt-btn-height);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.zt-tab:hover,
|
||||
.fa-tab-btn:not(.active):hover {
|
||||
background: rgba(var(--primary-rgb), 0.06);
|
||||
border-color: rgba(var(--primary-rgb), 0.25);
|
||||
}
|
||||
|
||||
.zt-tab.active,
|
||||
.zt-tab--active,
|
||||
.fa-tab-btn.active,
|
||||
.period-btn.active {
|
||||
background: var(--gradient-blue) !important;
|
||||
border-color: transparent !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* —— Empty state —— */
|
||||
.zt-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: var(--zt-space-5) var(--zt-space-4);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.zt-empty__icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: var(--zt-space-3);
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.zt-empty__title {
|
||||
font-size: var(--zt-font-section);
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin: 0 0 var(--zt-space-1);
|
||||
}
|
||||
|
||||
.zt-empty__hint {
|
||||
font-size: var(--zt-font-body);
|
||||
margin: 0;
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
/* —— Inline notices & toasts (единый вид подсказок и уведомлений) —— */
|
||||
.zt-notice {
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: var(--zt-font-body);
|
||||
line-height: 1.55;
|
||||
color: var(--text);
|
||||
background: var(--bg-light);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--zt-radius-md);
|
||||
border-left-width: 3px;
|
||||
border-left-style: solid;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.zt-notice.is-visible,
|
||||
.zt-notice--static {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.zt-notice--info {
|
||||
border-left-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.zt-notice--success {
|
||||
border-left-color: var(--success-color);
|
||||
background: rgba(16, 185, 129, 0.08);
|
||||
}
|
||||
|
||||
.zt-notice--warning {
|
||||
border-left-color: var(--warning-color);
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
}
|
||||
|
||||
.zt-notice--error {
|
||||
border-left-color: var(--danger-color);
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
}
|
||||
|
||||
.zt-notice__p {
|
||||
margin: 0 0 0.65rem;
|
||||
}
|
||||
|
||||
.zt-notice__p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.zt-notice__p strong {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .zt-notice {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
color: var(--text);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .zt-notice--success {
|
||||
background: rgba(16, 185, 129, 0.12);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .zt-notice--warning {
|
||||
background: rgba(245, 158, 11, 0.12);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .zt-notice--error {
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
}
|
||||
|
||||
/* —— Bottom-center toast (Yandex Music style) —— */
|
||||
@keyframes wesp-zt-toast-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wesp-zt-toast-exit {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wesp-zt-toast-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wesp-zt-toast-fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wesp-zt-toast-host {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 24px;
|
||||
transform: translateX(-50%);
|
||||
z-index: 6000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
width: max-content;
|
||||
max-width: min(28rem, calc(100vw - 2rem));
|
||||
}
|
||||
|
||||
.wesp-zt-toast {
|
||||
pointer-events: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
width: max-content;
|
||||
max-width: min(28rem, calc(100vw - 2rem));
|
||||
min-height: 40px;
|
||||
padding: 0.45rem 0.55rem 0.45rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(12, 12, 14, 0.88);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
|
||||
animation: wesp-zt-toast-enter 280ms ease-out both;
|
||||
}
|
||||
|
||||
.wesp-zt-toast.is-exiting {
|
||||
animation: wesp-zt-toast-exit 220ms ease-in both;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wesp-zt-toast {
|
||||
animation: wesp-zt-toast-fade-in 200ms ease-out both;
|
||||
}
|
||||
|
||||
.wesp-zt-toast.is-exiting {
|
||||
animation: wesp-zt-toast-fade-out 180ms ease-in both;
|
||||
}
|
||||
}
|
||||
|
||||
.wesp-zt-toast__accent {
|
||||
flex-shrink: 0;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
align-self: center;
|
||||
border-radius: 50%;
|
||||
background: var(--success-color);
|
||||
box-shadow: 0 0 6px rgba(16, 185, 129, 0.45);
|
||||
}
|
||||
|
||||
.wesp-zt-toast--error .wesp-zt-toast__accent {
|
||||
background: var(--danger-color);
|
||||
box-shadow: 0 0 6px rgba(239, 68, 68, 0.45);
|
||||
}
|
||||
|
||||
.wesp-zt-toast--warning .wesp-zt-toast__accent {
|
||||
background: var(--warning-color);
|
||||
box-shadow: 0 0 6px rgba(245, 158, 11, 0.45);
|
||||
}
|
||||
|
||||
.wesp-zt-toast__message {
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding-right: 0.15rem;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.35;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.wesp-zt-toast--multiline .wesp-zt-toast__message {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.wesp-zt-toast__message strong {
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wesp-zt-toast__close {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.wesp-zt-toast__close:hover {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
html[data-theme="light"] .wesp-zt-toast {
|
||||
background: rgba(30, 30, 34, 0.9);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
html[data-theme="light"] .wesp-zt-toast__message {
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
/* —— Notification center FAB (bottom-left) —— */
|
||||
.wesp-zt-notify-fab {
|
||||
position: fixed;
|
||||
left: max(20px, calc(env(safe-area-inset-left, 0px) + 16px));
|
||||
bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 20px));
|
||||
z-index: 5500;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
background: rgba(12, 12, 14, 0.88);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.wesp-zt-notify-fab:hover {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.wesp-zt-notify-fab:focus-visible {
|
||||
outline: 2px solid rgba(var(--primary-rgb), 0.85);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.wesp-zt-notify-fab__glyph {
|
||||
font-family: Inter, Arial, Helvetica, "DejaVu Sans", sans-serif;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
transform: translateY(0.5px);
|
||||
}
|
||||
|
||||
.wesp-zt-notify-fab__badge {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 4px;
|
||||
border-radius: 999px;
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
box-shadow: 0 0 0 2px rgba(12, 12, 14, 0.95);
|
||||
}
|
||||
|
||||
.wesp-zt-notify-fab__badge[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* —— Button grid (modals) —— */
|
||||
.zt-btn-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--zt-space-2);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.zt-btn-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* —— Form grid —— */
|
||||
.zt-form-grid {
|
||||
display: grid;
|
||||
gap: var(--zt-space-3);
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
.zootech-app-body .form-label,
|
||||
.zt-section .form-label {
|
||||
font-size: var(--zt-font-caption);
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
/* —— Bootstrap overrides (operator pages) —— */
|
||||
.zootech-app-body .btn {
|
||||
min-height: var(--zt-btn-height);
|
||||
padding: 0.45rem 1rem;
|
||||
border-radius: var(--zt-radius-md);
|
||||
font-weight: 500;
|
||||
font-size: var(--zt-font-body);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--zt-space-1);
|
||||
transition: transform var(--transition), filter var(--transition),
|
||||
background var(--transition), border-color var(--transition);
|
||||
}
|
||||
|
||||
.zootech-app-body .btn:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.zootech-app-body .btn:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--zt-focus-ring);
|
||||
}
|
||||
|
||||
.zootech-app-body .btn-primary {
|
||||
background: var(--gradient-blue) !important;
|
||||
border: none !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.zootech-app-body .btn-primary:hover:not(:disabled) {
|
||||
filter: brightness(1.06);
|
||||
}
|
||||
|
||||
.zootech-app-body .btn-success {
|
||||
background: var(--success-color) !important;
|
||||
border-color: var(--success-color) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.zootech-app-body .btn-success:hover:not(:disabled) {
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
|
||||
.zootech-app-body .btn-secondary {
|
||||
background: var(--field) !important;
|
||||
border-color: var(--border-light) !important;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
.zootech-app-body .btn-outline-primary {
|
||||
color: var(--primary-color) !important;
|
||||
border-color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.zootech-app-body .btn-outline-primary:hover:not(:disabled) {
|
||||
background: rgba(var(--primary-rgb), 0.08) !important;
|
||||
}
|
||||
|
||||
.zootech-app-body .btn-outline-secondary {
|
||||
color: var(--text) !important;
|
||||
border-color: var(--border-light) !important;
|
||||
}
|
||||
|
||||
.zootech-app-body .btn-outline-danger {
|
||||
color: var(--danger-color) !important;
|
||||
border-color: rgba(239, 68, 68, 0.5) !important;
|
||||
}
|
||||
|
||||
.zootech-app-body .btn-outline-success {
|
||||
color: var(--success-color) !important;
|
||||
border-color: rgba(16, 185, 129, 0.5) !important;
|
||||
}
|
||||
|
||||
.zootech-app-body .btn-outline-success:hover:not(:disabled) {
|
||||
background: rgba(16, 185, 129, 0.1) !important;
|
||||
}
|
||||
|
||||
.zootech-app-body .form-control,
|
||||
.zootech-app-body .form-select {
|
||||
min-height: var(--zt-btn-height);
|
||||
border-radius: var(--zt-radius-md);
|
||||
border-color: var(--border-light);
|
||||
font-size: var(--zt-font-body);
|
||||
}
|
||||
|
||||
.zootech-app-body .form-control:focus,
|
||||
.zootech-app-body .form-select:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
|
||||
}
|
||||
|
||||
/* Magic / modern btn aliases */
|
||||
.zootech-app-body .magic-button,
|
||||
.zootech-app-body .modern-btn.btn-primary-modern,
|
||||
.zootech-app-body .btn-primary-modern {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--zt-space-1);
|
||||
padding: 0.55rem 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: var(--gradient-blue);
|
||||
border: none;
|
||||
border-radius: var(--zt-radius-md);
|
||||
cursor: pointer;
|
||||
min-height: var(--zt-btn-height);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.zootech-app-body .magic-button:hover {
|
||||
filter: brightness(1.06);
|
||||
}
|
||||
|
||||
/* Recipe editor — квадратные icon-кнопки в шапке */
|
||||
#recipeEdit .recipe-edit-header-icon-btn {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
min-width: 2.5rem;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--zt-radius-md);
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-section-toolbar > .btn-primary,
|
||||
#recipeEdit .recipe-form-footer-actions .btn-primary {
|
||||
min-height: var(--zt-btn-height);
|
||||
padding: 0.45rem 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#recipeEdit .recipe-save-exit-btn {
|
||||
min-width: 11rem;
|
||||
}
|
||||
|
||||
@keyframes zt-reveal {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Recipes boot overlay — только зона контента, navbar остаётся виден */
|
||||
#wesp-recipes-boot {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
z-index: 900;
|
||||
background: var(--bg-page);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 0.35s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#wesp-recipes-boot.wesp-recipes-boot--hide {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #wesp-recipes-boot {
|
||||
background: var(--bg-page);
|
||||
}
|
||||
|
||||
#wesp-recipes-boot .wesp-logo-loader--embedded {
|
||||
width: min(480px, 90vw);
|
||||
height: min(222px, 36vh);
|
||||
}
|
||||
|
||||
/* Gray scale legacy (reports) */
|
||||
:root {
|
||||
--gray-50: var(--bg-light);
|
||||
--gray-100: #f3f4f6;
|
||||
--gray-200: var(--border-light);
|
||||
--gray-300: #d1d5db;
|
||||
--gray-400: #9ca3af;
|
||||
--gray-500: var(--text-muted);
|
||||
--gray-600: #4b5563;
|
||||
--gray-700: #374151;
|
||||
--gray-800: #1f2937;
|
||||
--gray-900: var(--text-dark);
|
||||
--white: var(--surface);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--gray-50: var(--bg-page);
|
||||
--gray-100: var(--surface);
|
||||
--gray-200: #2a3036;
|
||||
--gray-300: var(--field);
|
||||
--gray-400: var(--muted);
|
||||
--gray-500: #b8c0c8;
|
||||
--gray-600: #d0d4d8;
|
||||
--gray-700: #e8eaec;
|
||||
--gray-800: #f0f4f8;
|
||||
--gray-900: var(--text);
|
||||
--white: var(--surface);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.zootech-app-body .btn {
|
||||
min-height: var(--zt-btn-height-touch);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.zt-card--loading {
|
||||
animation: none;
|
||||
}
|
||||
.zt-spinner {
|
||||
animation: none;
|
||||
border-top-color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,946 @@
|
||||
/**
|
||||
* Общая вёрстка операторских (зоотех) страниц: токены, шрифт, навбар, футер.
|
||||
* Подключать после wesp-zootech-shell.css и bootstrap.min.css.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--primary-color: #2196f3;
|
||||
--primary-rgb: 33, 150, 243;
|
||||
--primary: var(--primary-color);
|
||||
--gradient-border: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color),
|
||||
var(--primary-light),
|
||||
var(--primary-dark)
|
||||
);
|
||||
--primary-light: #42a5f5;
|
||||
--primary-dark: #1976d2;
|
||||
--primary-darker: #1565c0;
|
||||
--primary-blue: var(--primary-color);
|
||||
--light-blue: #42a5f5;
|
||||
--accent-blue: #1565c0;
|
||||
--secondary-color: #6c757d;
|
||||
--success-color: #10b981;
|
||||
--danger-color: #ef4444;
|
||||
--warning-color: #f59e0b;
|
||||
--info-color: #0ea5e9;
|
||||
--bg-page: #f5f7fa;
|
||||
--bg-light: #f8fafc;
|
||||
--bg-white: #ffffff;
|
||||
--surface-muted: #f2f5f9;
|
||||
/* Слот логотипа: logo2.png 2222×1024; contain + left (обе темы — один файл) */
|
||||
--nav-logo-slot-h: 38px;
|
||||
--nav-logo-slot-w: 115px;
|
||||
--mobile-menu-logo-slot-h: 32px;
|
||||
--mobile-menu-logo-slot-w: 96px;
|
||||
--text-dark: #1e293b;
|
||||
--text-muted: #64748b;
|
||||
--border-light: #e2e8f0;
|
||||
--border-radius: 10px;
|
||||
--box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
|
||||
--box-shadow-hover: 0 8px 22px rgba(15, 23, 42, 0.1),
|
||||
0 0 0 1px rgba(15, 23, 42, 0.04);
|
||||
--shadow-soft: 0 4px 6px -1px rgb(15 23 42 / 0.08),
|
||||
0 2px 4px -2px rgb(15 23 42 / 0.06);
|
||||
--shadow-medium: 0 10px 20px -4px rgb(15 23 42 / 0.12);
|
||||
--gradient-blue: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color) 0%,
|
||||
var(--primary-light) 100%
|
||||
);
|
||||
--transition: 0.22s ease;
|
||||
--zootech-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Roboto, sans-serif;
|
||||
--zootech-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
||||
--zootech-content-max: 1400px;
|
||||
--zootech-content-pad-x: clamp(0.75rem, 2.5vw, 1.25rem);
|
||||
--zootech-nav-pad-y: 0.875rem;
|
||||
/* Semantic aliases */
|
||||
--surface: var(--bg-white);
|
||||
--field: #ffffff;
|
||||
--text: var(--text-dark);
|
||||
--muted: var(--text-muted);
|
||||
/* Spacing (8px grid) */
|
||||
--zt-space-1: 8px;
|
||||
--zt-space-2: 12px;
|
||||
--zt-space-3: 16px;
|
||||
--zt-space-4: 24px;
|
||||
--zt-space-5: 32px;
|
||||
--zt-radius-sm: 8px;
|
||||
--zt-radius-md: 10px;
|
||||
--zt-radius-lg: 12px;
|
||||
--zt-font-caption: 0.8125rem;
|
||||
--zt-font-body: 0.9375rem;
|
||||
--zt-font-section: 1.125rem;
|
||||
--zt-font-page: 1.5rem;
|
||||
--zt-btn-height: 40px;
|
||||
--zt-btn-height-touch: 44px;
|
||||
--zt-focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px rgba(var(--primary-rgb), 0.45);
|
||||
}
|
||||
|
||||
html[data-theme="organic"] {
|
||||
--primary-color: #48816d;
|
||||
--primary-rgb: 72, 129, 109;
|
||||
--primary-light: #5a9a82;
|
||||
--primary-dark: #3a6b58;
|
||||
--primary-darker: #2f5748;
|
||||
--bg-page: #f6f6f4;
|
||||
--bg-light: #f6f6f4;
|
||||
--bg-white: #ffffff;
|
||||
--surface-muted: #eff4f2;
|
||||
--text-dark: #1a1e1c;
|
||||
--text-muted: #4a5a52;
|
||||
--border-light: #e8e8e2;
|
||||
--box-shadow: 0 2px 4px rgba(26, 30, 28, 0.04);
|
||||
--box-shadow-hover: 0 8px 22px rgba(26, 30, 28, 0.08),
|
||||
0 0 0 1px rgba(26, 30, 28, 0.03);
|
||||
--shadow-soft: 0 5px 20px rgba(0, 0, 0, 0.02);
|
||||
--shadow-medium: 0 10px 20px -4px rgba(26, 30, 28, 0.1);
|
||||
--surface: var(--bg-white);
|
||||
--field: #ffffff;
|
||||
--text: var(--text-dark);
|
||||
--muted: var(--text-muted);
|
||||
--zt-radius-lg: 24px;
|
||||
--zt-radius-md: 16px;
|
||||
--organic-logo-filter: brightness(0) saturate(100%) invert(43%) sepia(19%) saturate(747%)
|
||||
hue-rotate(118deg) brightness(92%) contrast(87%);
|
||||
--bs-primary: #48816d;
|
||||
--bs-primary-rgb: 72, 129, 109;
|
||||
--bs-link-color: #48816d;
|
||||
--bs-link-hover-color: #3a6b58;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .nav-brand .logo.logo--light-theme,
|
||||
html[data-theme="organic"] .mobile-brand .logo.logo--light-theme {
|
||||
filter: var(--organic-logo-filter) !important;
|
||||
}
|
||||
|
||||
/* Усиленный контраст — все темы (ручной data-high-contrast или системный prefers-contrast) */
|
||||
html[data-high-contrast="true"][data-theme="light"],
|
||||
html[data-high-contrast="true"]:not([data-theme]) {
|
||||
--text-dark: #0f172a;
|
||||
--text-muted: #334155;
|
||||
--border-light: #94a3b8;
|
||||
--primary-color: #1565c0;
|
||||
--primary-rgb: 21, 101, 192;
|
||||
--primary-dark: #0d47a1;
|
||||
--primary-darker: #0a3d91;
|
||||
--box-shadow: none;
|
||||
--box-shadow-hover: 0 0 0 1px var(--border-light), 0 4px 12px rgba(15, 23, 42, 0.1);
|
||||
--zt-focus-ring: 0 0 0 2px var(--bg-white), 0 0 0 4px var(--text-dark);
|
||||
}
|
||||
|
||||
html[data-high-contrast="true"][data-theme="organic"] {
|
||||
--primary-color: #2f6b57;
|
||||
--primary-rgb: 47, 107, 87;
|
||||
--primary-light: #3d8570;
|
||||
--primary-dark: #234a3d;
|
||||
--primary-darker: #1a3830;
|
||||
--text-dark: #0f1211;
|
||||
--text-muted: #2e3834;
|
||||
--border-light: #b0b8b2;
|
||||
--box-shadow: none;
|
||||
--box-shadow-hover: 0 0 0 1px var(--border-light), 0 4px 12px rgba(15, 18, 17, 0.08);
|
||||
--zt-focus-ring: 0 0 0 2px var(--bg-white), 0 0 0 4px var(--text-dark);
|
||||
--organic-logo-filter: brightness(0) saturate(100%) invert(28%) sepia(22%) saturate(900%)
|
||||
hue-rotate(118deg) brightness(88%) contrast(96%);
|
||||
--bs-primary: #2f6b57;
|
||||
--bs-primary-rgb: 47, 107, 87;
|
||||
--bs-link-color: #2f6b57;
|
||||
--bs-link-hover-color: #234a3d;
|
||||
--bs-success: #2f6b57;
|
||||
--bs-success-rgb: 47, 107, 87;
|
||||
}
|
||||
|
||||
html[data-high-contrast="true"][data-theme="dark"] {
|
||||
--text-dark: #ffffff;
|
||||
--text-muted: #d1d9e0;
|
||||
--border-light: rgba(255, 255, 255, 0.28);
|
||||
--bg-white: #353d44;
|
||||
--field: #4a5259;
|
||||
--box-shadow: none;
|
||||
--box-shadow-hover: 0 0 0 1px var(--border-light);
|
||||
--zt-focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px #ffffff;
|
||||
}
|
||||
|
||||
@media (prefers-contrast: more) {
|
||||
html:not([data-high-contrast="false"])[data-theme="light"],
|
||||
html:not([data-high-contrast="false"]):not([data-theme]) {
|
||||
--text-dark: #0f172a;
|
||||
--text-muted: #334155;
|
||||
--border-light: #94a3b8;
|
||||
--primary-color: #1565c0;
|
||||
--primary-rgb: 21, 101, 192;
|
||||
--primary-dark: #0d47a1;
|
||||
--primary-darker: #0a3d91;
|
||||
--box-shadow: none;
|
||||
--box-shadow-hover: 0 0 0 1px var(--border-light), 0 4px 12px rgba(15, 23, 42, 0.1);
|
||||
--zt-focus-ring: 0 0 0 2px var(--bg-white), 0 0 0 4px var(--text-dark);
|
||||
}
|
||||
|
||||
html:not([data-high-contrast="false"])[data-theme="organic"] {
|
||||
--primary-color: #2f6b57;
|
||||
--primary-rgb: 47, 107, 87;
|
||||
--primary-light: #3d8570;
|
||||
--primary-dark: #234a3d;
|
||||
--primary-darker: #1a3830;
|
||||
--text-dark: #0f1211;
|
||||
--text-muted: #2e3834;
|
||||
--border-light: #b0b8b2;
|
||||
--box-shadow: none;
|
||||
--box-shadow-hover: 0 0 0 1px var(--border-light), 0 4px 12px rgba(15, 18, 17, 0.08);
|
||||
--zt-focus-ring: 0 0 0 2px var(--bg-white), 0 0 0 4px var(--text-dark);
|
||||
--organic-logo-filter: brightness(0) saturate(100%) invert(28%) sepia(22%) saturate(900%)
|
||||
hue-rotate(118deg) brightness(88%) contrast(96%);
|
||||
--bs-primary: #2f6b57;
|
||||
--bs-primary-rgb: 47, 107, 87;
|
||||
--bs-link-color: #2f6b57;
|
||||
--bs-link-hover-color: #234a3d;
|
||||
--bs-success: #2f6b57;
|
||||
--bs-success-rgb: 47, 107, 87;
|
||||
}
|
||||
|
||||
html:not([data-high-contrast="false"])[data-theme="dark"] {
|
||||
--text-dark: #ffffff;
|
||||
--text-muted: #d1d9e0;
|
||||
--border-light: rgba(255, 255, 255, 0.28);
|
||||
--bg-white: #353d44;
|
||||
--field: #4a525a;
|
||||
--box-shadow: none;
|
||||
--box-shadow-hover: 0 0 0 1px var(--border-light);
|
||||
--zt-focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--bg-page: #12181b;
|
||||
--bg-light: #12181b;
|
||||
--bg-white: #2c3338;
|
||||
--text-dark: #f5f5f5;
|
||||
--text-muted: #a8b0b8;
|
||||
--border-light: rgba(255, 255, 255, 0.12);
|
||||
--shadow-soft: 0 4px 12px rgb(0 0 0 / 0.35);
|
||||
--shadow-medium: 0 12px 24px rgb(0 0 0 / 0.45);
|
||||
--box-shadow-hover: 0 8px 22px rgb(0 0 0 / 0.35);
|
||||
--surface: var(--bg-white);
|
||||
--field: #3e444a;
|
||||
--text: var(--text-dark);
|
||||
--muted: var(--text-muted);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.zootech-app-body,
|
||||
body:has(.mobile-navbar) {
|
||||
margin: 0;
|
||||
font-family: var(--zootech-font);
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-dark);
|
||||
line-height: 1.55;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--bg-page);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.zootech-app-body .container,
|
||||
body:has(.mobile-navbar) .container {
|
||||
max-width: var(--zootech-content-max);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: var(--zootech-content-pad-x);
|
||||
padding-right: var(--zootech-content-pad-x);
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
margin-top: auto;
|
||||
padding: 14px var(--zootech-content-pad-x) 20px;
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .app-footer,
|
||||
html[data-theme="dark"] .app-footer .text-muted {
|
||||
color: var(--text-muted) !important;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
flex: 1 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1 1 auto;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* —— Верхняя панель —— */
|
||||
.mobile-navbar {
|
||||
background: var(--gradient-blue);
|
||||
padding: var(--zootech-nav-pad-y) 0;
|
||||
margin-bottom: 1.75rem;
|
||||
box-shadow: var(--box-shadow-hover);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 1.05rem;
|
||||
letter-spacing: 0.01em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-brand i {
|
||||
font-size: 1.35rem;
|
||||
color: #ffd54f;
|
||||
}
|
||||
|
||||
.nav-brand .nav-logo-link {
|
||||
position: relative;
|
||||
width: var(--nav-logo-slot-w);
|
||||
height: var(--nav-logo-slot-h);
|
||||
flex-shrink: 0;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/* Блик только по контуру букв (mask = тот же PNG, что и логотип) */
|
||||
.nav-logo-link::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0) 30%,
|
||||
rgba(255, 255, 255, 0.72) 50%,
|
||||
rgba(255, 255, 255, 0) 70%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
background-size: 280% 100%;
|
||||
background-position: 100% 0;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-mask-image: url("/static/logo2.png");
|
||||
mask-image: url("/static/logo2.png");
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: left center;
|
||||
mask-position: left center;
|
||||
mix-blend-mode: soft-light;
|
||||
will-change: background-position, opacity;
|
||||
}
|
||||
|
||||
/* Блик после появления navbar (ready → done), иначе анимация обрывается */
|
||||
html.wesp-page-enter-ready .nav-logo-link::after,
|
||||
html.wesp-page-enter-done .nav-logo-link::after {
|
||||
animation: wesp-nav-logo-shimmer 3s cubic-bezier(0.42, 0, 0.18, 1) infinite;
|
||||
animation-delay: 0.35s;
|
||||
}
|
||||
|
||||
@keyframes wesp-nav-logo-shimmer {
|
||||
0%,
|
||||
100% {
|
||||
background-position: 100% 0;
|
||||
opacity: 0;
|
||||
}
|
||||
6% {
|
||||
opacity: 1;
|
||||
}
|
||||
24% {
|
||||
background-position: 0% 0;
|
||||
opacity: 1;
|
||||
}
|
||||
32%,
|
||||
100% {
|
||||
background-position: 0% 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .nav-logo-link::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .nav-logo-link--canvas-shimmer .nav-logo__shimmer-canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mobile-brand .nav-logo-link {
|
||||
position: relative;
|
||||
width: var(--mobile-menu-logo-slot-w);
|
||||
height: var(--mobile-menu-logo-slot-h);
|
||||
flex-shrink: 0;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.nav-brand .logo,
|
||||
.mobile-brand .logo {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-position: left center;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.nav-brand .logo--dark-theme,
|
||||
.mobile-brand .logo--dark-theme {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .nav-brand .logo--light-theme,
|
||||
html[data-theme="dark"] .mobile-brand .logo--light-theme {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .nav-brand .logo--dark-theme,
|
||||
html[data-theme="dark"] .mobile-brand .logo--dark-theme {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hamburger-menu {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
transition: background var(--transition), transform var(--transition);
|
||||
}
|
||||
|
||||
.hamburger-menu:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.hamburger-line {
|
||||
width: 24px;
|
||||
height: 2.5px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
transition: transform var(--transition), opacity var(--transition);
|
||||
}
|
||||
|
||||
.hamburger-menu.active .hamburger-line:nth-child(1) {
|
||||
transform: rotate(45deg) translate(5px, 5px);
|
||||
}
|
||||
|
||||
.hamburger-menu.active .hamburger-line:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hamburger-menu.active .hamburger-line:nth-child(3) {
|
||||
transform: rotate(-45deg) translate(6px, -6px);
|
||||
}
|
||||
|
||||
.desktop-menu {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.55rem 0.9rem;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
transition: transform var(--transition), background var(--transition),
|
||||
box-shadow var(--transition);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
border-color: rgba(255, 255, 255, 0.28);
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu-btn.active {
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
border-color: rgba(255, 255, 255, 0.35);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.menu-btn i {
|
||||
font-size: 0.95rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
max-width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
color: #ffc9c9;
|
||||
text-decoration: none;
|
||||
padding: 0.45rem 0.85rem;
|
||||
border-radius: 8px;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background: rgba(255, 107, 107, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Мобильное меню */
|
||||
.mobile-menu-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.55);
|
||||
backdrop-filter: blur(6px);
|
||||
z-index: 2000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity var(--transition), visibility var(--transition);
|
||||
}
|
||||
|
||||
.mobile-menu-overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
width: min(88vw, 340px);
|
||||
height: 100%;
|
||||
background: var(--gradient-blue);
|
||||
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25);
|
||||
transition: right 0.28s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mobile-menu-overlay.active .mobile-menu {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mobile-menu-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.25rem 1.25rem 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.mobile-brand i {
|
||||
font-size: 1.35rem;
|
||||
color: #ffd54f;
|
||||
}
|
||||
|
||||
.close-menu {
|
||||
color: #fff;
|
||||
font-size: 1.35rem;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
line-height: 1;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.close-menu:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.mobile-menu-items {
|
||||
flex: 1;
|
||||
padding: 0.5rem 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mobile-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 0.9rem 1.25rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.9375rem;
|
||||
border-left: 3px solid transparent;
|
||||
transition: background var(--transition), border-color var(--transition);
|
||||
}
|
||||
|
||||
.mobile-menu-item:hover,
|
||||
.mobile-menu-item.active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-left-color: #ffd54f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mobile-menu-item i {
|
||||
font-size: 1.1rem;
|
||||
width: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mobile-menu-footer {
|
||||
padding: 1.25rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.mobile-user-info {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.85rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mobile-logout-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #ffc9c9;
|
||||
text-decoration: none;
|
||||
padding: 0.7rem 0.85rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
background: rgba(255, 107, 107, 0.12);
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.mobile-logout-btn:hover {
|
||||
background: rgba(255, 107, 107, 0.22);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Светлая тема: навбар как заголовки таблиц (surface-muted), без синего градиента */
|
||||
html:not([data-theme="dark"]) .mobile-navbar {
|
||||
background: var(--surface-muted);
|
||||
box-shadow: var(--box-shadow);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .nav-brand {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .nav-brand i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]):not([data-theme="organic"]) .nav-brand .logo,
|
||||
html:not([data-theme="dark"]):not([data-theme="organic"]) .mobile-brand .logo {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]):not([data-theme="organic"]) .nav-brand .logo--dark-theme,
|
||||
html:not([data-theme="dark"]):not([data-theme="organic"]) .mobile-brand .logo--dark-theme {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .hamburger-line {
|
||||
background: var(--text-dark);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .hamburger-menu:hover {
|
||||
background: rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .menu-btn {
|
||||
background: var(--bg-white);
|
||||
border: 1px solid var(--border-light);
|
||||
color: var(--text-dark);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .menu-btn:hover {
|
||||
background: var(--bg-white);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-darker);
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .menu-btn.active {
|
||||
background: rgba(var(--primary-rgb), 0.1);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-darker);
|
||||
box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.12);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .menu-btn i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .user-info {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .logout-btn {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .logout-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .mobile-menu {
|
||||
background: var(--bg-white);
|
||||
box-shadow: -4px 0 24px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .mobile-menu-header {
|
||||
background: var(--surface-muted);
|
||||
border-bottom-color: var(--border-light);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .mobile-brand {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .mobile-brand i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .close-menu {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .close-menu:hover {
|
||||
background: rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .mobile-menu-item {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .mobile-menu-item:hover,
|
||||
html:not([data-theme="dark"]) .mobile-menu-item.active {
|
||||
background: rgba(var(--primary-rgb), 0.08);
|
||||
border-left-color: var(--primary-color);
|
||||
color: var(--primary-darker);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .mobile-menu-item i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .mobile-menu-footer {
|
||||
border-top-color: var(--border-light);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .mobile-user-info {
|
||||
color: var(--text-dark);
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .mobile-logout-btn {
|
||||
color: var(--danger-color);
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .mobile-logout-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
/* Заголовок раздела (общий паттерн) */
|
||||
.page-header {
|
||||
background: var(--bg-white);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1.5rem 1.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: var(--shadow-soft);
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-dark);
|
||||
margin: 0 0 0.35rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.desktop-menu {
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.menu-btn {
|
||||
padding: 0.5rem 0.7rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.desktop-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hamburger-menu {
|
||||
display: flex;
|
||||
}
|
||||
.user-section {
|
||||
display: none;
|
||||
}
|
||||
:root {
|
||||
--nav-logo-slot-h: 32px;
|
||||
--nav-logo-slot-w: 96px;
|
||||
--mobile-menu-logo-slot-h: 28px;
|
||||
--mobile-menu-logo-slot-w: 84px;
|
||||
}
|
||||
.page-header {
|
||||
padding: 1.15rem 1.25rem;
|
||||
}
|
||||
.page-title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* —— Page enter (navbar → main → blocks), только opacity — без translate (иначе «дёргается») —— */
|
||||
:root {
|
||||
--wesp-enter-duration: 350ms;
|
||||
--wesp-enter-duration-fast: 350ms;
|
||||
--wesp-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--wesp-enter-stagger: 55ms;
|
||||
--wesp-enter-nav-delay: 0ms;
|
||||
--wesp-enter-items-base-delay: 80ms;
|
||||
}
|
||||
|
||||
@keyframes wesp-enter-fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
html.wesp-page-enter-pending .mobile-navbar {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
html.wesp-page-enter-ready .mobile-navbar {
|
||||
animation: wesp-enter-fade var(--wesp-enter-duration-fast) var(--wesp-enter-ease) both;
|
||||
animation-delay: var(--wesp-enter-nav-delay);
|
||||
}
|
||||
|
||||
html.wesp-page-enter-pending .wesp-page-main {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
html.wesp-page-enter-grid-page.wesp-page-enter-pending .wesp-page-main,
|
||||
html.wesp-page-enter-grid-page.wesp-page-enter-ready .wesp-page-main {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
html.wesp-page-enter-ready .wesp-page-main {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
html.wesp-page-enter-pending .wesp-page-enter-item {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
html.wesp-page-enter-ready .wesp-page-enter-item {
|
||||
animation: wesp-enter-fade var(--wesp-enter-duration) var(--wesp-enter-ease) both;
|
||||
animation-delay: calc(
|
||||
var(--wesp-enter-items-base-delay) + var(--wesp-enter-i, 0) * var(--wesp-enter-stagger)
|
||||
);
|
||||
}
|
||||
|
||||
html.wesp-page-enter-done .mobile-navbar,
|
||||
html.wesp-page-enter-done .wesp-page-main,
|
||||
html.wesp-page-enter-done .wesp-page-enter-item {
|
||||
animation: none !important;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
will-change: auto;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html.wesp-page-enter-pending .mobile-navbar,
|
||||
html.wesp-page-enter-pending .wesp-page-main,
|
||||
html.wesp-page-enter-pending .wesp-page-enter-item {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
html.wesp-page-enter-ready .mobile-navbar,
|
||||
html.wesp-page-enter-ready .wesp-page-main,
|
||||
html.wesp-page-enter-ready .wesp-page-enter-item {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.nav-logo-link::after {
|
||||
animation: none !important;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,629 @@
|
||||
/**
|
||||
* Общая доводка UI зоотех-страниц (consumption, components, feed_dispensers, reports).
|
||||
* Подключать после page-inline <style>, до </head>.
|
||||
*/
|
||||
|
||||
.page-content,
|
||||
.zootech-app-body .wesp-page-main {
|
||||
flex: 1 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Панели (отчёты): компактная шапка, скругление на контейнере */
|
||||
.zootech-panel {
|
||||
background: var(--surface, var(--bg-white));
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-soft);
|
||||
margin-bottom: var(--zt-space-4, 1.5rem);
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.zootech-panel > .card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5rem 0.875rem 0.375rem;
|
||||
margin: 0;
|
||||
min-height: 0;
|
||||
line-height: 1.25;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text, var(--text-dark));
|
||||
background: var(--surface, var(--bg-white)) !important;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.zootech-panel > .card-header i {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.zootech-panel > .card-header .btn-sm,
|
||||
.zootech-panel > .card-header .btn {
|
||||
padding: 0.15rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.2;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.zootech-panel > .card-body {
|
||||
padding: 0.875rem 1rem 1rem;
|
||||
}
|
||||
|
||||
/* Секции components / consumption / reports */
|
||||
.zootech-app-body .form-section.zt-section,
|
||||
.zootech-app-body .consumption-block.zt-section {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
padding: var(--zt-space-4, 1.5rem);
|
||||
margin-bottom: var(--zt-space-4, 1.5rem);
|
||||
}
|
||||
|
||||
/* /reports: выпадающий календарь не должен обрезаться карточкой */
|
||||
.zootech-app-body.reports-page .form-section.zt-section.reports-controls {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.zootech-app-body .form-section .form-title,
|
||||
.zootech-app-body .consumption-block .section-title {
|
||||
font-size: var(--zt-font-section, 1.125rem);
|
||||
font-weight: 600;
|
||||
margin: 0 0 var(--zt-space-3, 1rem);
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.zootech-app-body .consumption-section {
|
||||
margin: 1.25rem 0 0;
|
||||
}
|
||||
|
||||
/* Карточки: без поднятия, подсветка как на dashboard рецептов */
|
||||
.zootech-app-body .report-card,
|
||||
.zootech-app-body .component-card,
|
||||
.zootech-app-body .dispenser-card.list-item,
|
||||
.zootech-app-body .zt-card,
|
||||
.zootech-app-body .zt-section,
|
||||
.zootech-app-body .list-item,
|
||||
.zootech-app-body .role-card {
|
||||
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.zootech-app-body .report-card:hover,
|
||||
.zootech-app-body .component-card.zt-card--interactive:hover,
|
||||
.zootech-app-body .component-card.component-card--clickable:hover,
|
||||
.zootech-app-body .dispenser-card.list-item:hover,
|
||||
.zootech-app-body .zt-card--interactive:hover,
|
||||
.zootech-app-body .zt-card:hover,
|
||||
.zootech-app-body .zt-section:hover,
|
||||
.zootech-app-body .list-item:hover,
|
||||
.zootech-app-body .role-card:hover {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.zootech-app-body .report-card:hover {
|
||||
box-shadow: var(--shadow-soft);
|
||||
background-color: rgba(var(--primary-rgb), 0.04);
|
||||
border-color: rgba(var(--primary-rgb), 0.35);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .zootech-app-body .report-card:hover {
|
||||
background-color: rgba(var(--primary-rgb), 0.08);
|
||||
border-color: rgba(var(--primary-rgb), 0.4);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.zootech-app-body .component-card.zt-card--interactive:hover,
|
||||
.zootech-app-body .component-card.component-card--clickable:hover {
|
||||
box-shadow: var(--shadow-soft), 0 0 0 1px rgba(var(--primary-rgb, 33, 150, 243), 0.2);
|
||||
border-color: var(--primary-color);
|
||||
background-color: rgba(var(--primary-rgb), 0.04);
|
||||
}
|
||||
|
||||
.zootech-app-body .dispenser-card.list-item:hover {
|
||||
box-shadow: none !important;
|
||||
border-color: var(--primary-color);
|
||||
background-color: rgba(var(--primary-rgb), 0.05);
|
||||
}
|
||||
|
||||
/* Кнопки: без translateY на hover */
|
||||
.zootech-app-body .btn-secondary:hover,
|
||||
.zootech-app-body .btn-danger:hover,
|
||||
.zootech-app-body .btn-success:hover,
|
||||
.zootech-app-body .magic-button:hover,
|
||||
.zootech-app-body .modern-btn:hover,
|
||||
.zootech-app-body .nav-link:hover {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.zootech-app-body .magic-button:hover,
|
||||
.zootech-app-body .modern-btn.btn-primary-modern:hover {
|
||||
filter: brightness(1.06);
|
||||
}
|
||||
|
||||
/* Не дублировать page-enter и fade-in / content-reveal */
|
||||
html.wesp-page-enter-pending .fade-in,
|
||||
html.wesp-page-enter-ready .fade-in,
|
||||
html.wesp-page-enter-pending .wesp-content-reveal,
|
||||
html.wesp-page-enter-ready .wesp-content-reveal {
|
||||
animation: none !important;
|
||||
opacity: inherit;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
html.wesp-page-enter-done .fade-in {
|
||||
animation: zt-reveal 0.45s var(--wesp-enter-ease, ease) both;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html.wesp-page-enter-done .fade-in {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading на странице оборудования */
|
||||
.zootech-app-body .loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--zt-space-2, 12px);
|
||||
min-height: 8rem;
|
||||
padding: var(--zt-space-4, 24px);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--zt-font-body, 0.9375rem);
|
||||
}
|
||||
|
||||
.zootech-app-body .loading-state i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Dashed add-cards — единая min-height */
|
||||
.zootech-app-body .add-devices-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--zt-space-3, 16px);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.zootech-app-body .add-devices-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.zootech-app-body .add-devices-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Analytics: итоги и сравнение на /reports */
|
||||
.analytics-kpi-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.analytics-kpi-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.analytics-kpi-card {
|
||||
background: var(--bg-white, #fff);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 1rem;
|
||||
padding: 1rem 1.125rem;
|
||||
}
|
||||
|
||||
.analytics-kpi-card__title {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.analytics-kpi-card__value {
|
||||
font-size: 1.375rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.analytics-kpi-card__value--warn {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.analytics-kpi-card__value--loss {
|
||||
color: #dc3545;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.analytics-kpi-card__value--risk {
|
||||
color: #d97706;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .analytics-kpi-card__value--risk {
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.analytics-kpi-card__hint {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.analytics-section-title {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.analytics-top-list {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(8.5rem, 12rem) minmax(5rem, 1fr) minmax(7.5rem, max-content);
|
||||
column-gap: 1rem;
|
||||
row-gap: 0.55rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.analytics-top-row {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.analytics-top-row__name {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.35;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.analytics-top-row__bar {
|
||||
height: 8px;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
background: var(--border-light);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.analytics-top-row__bar span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: var(--primary-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.analytics-pf-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.analytics-pf-card {
|
||||
background: var(--bg-white, #fff);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 1rem;
|
||||
padding: 1rem 1.125rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.analytics-pf-card__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.analytics-pf-section + .analytics-pf-section {
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.analytics-pf-section__title {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.analytics-pf-mixer-line {
|
||||
margin: 0.75rem 0 0;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px dashed var(--border-light);
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.analytics-pf-mixer-line strong {
|
||||
color: var(--text-primary, inherit);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.analytics-pf-mixer-line--negative strong {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.analytics-pf-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.analytics-pf-legend__dot {
|
||||
display: inline-block;
|
||||
width: 0.65rem;
|
||||
height: 0.65rem;
|
||||
border-radius: 2px;
|
||||
margin-right: 0.25rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.analytics-pf-legend__dot--base { background: #94a3b8; }
|
||||
.analytics-pf-legend__dot--plan { background: #3b82f6; }
|
||||
.analytics-pf-legend__dot--actual { background: #10b981; }
|
||||
|
||||
.analytics-pf-bars {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.analytics-pf-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.analytics-pf-bar span {
|
||||
display: block;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
min-width: 2px;
|
||||
}
|
||||
|
||||
.analytics-pf-bar--base span { background: #94a3b8; }
|
||||
.analytics-pf-bar--plan span { background: #3b82f6; }
|
||||
.analytics-pf-bar--actual span { background: #10b981; }
|
||||
|
||||
.analytics-pf-bar em {
|
||||
font-style: normal;
|
||||
min-width: 3rem;
|
||||
text-align: right;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.analytics-top-row__value {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.analytics-top-row__value--loss {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.analytics-top-row__value--risk {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.analytics-top-row__bar--loss span {
|
||||
background: #dc3545;
|
||||
}
|
||||
|
||||
.analytics-top-row__bar--risk span {
|
||||
background: #d97706;
|
||||
}
|
||||
|
||||
.analytics-pf-comp--excluded {
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.analytics-pf-comp--excluded .analytics-pf-comp__name {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .analytics-pf-comp--excluded .analytics-pf-comp__name {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.analytics-pf-comp__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.analytics-pf-fault {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
padding: 0.15rem 0.45rem;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.analytics-pf-fault--execution {
|
||||
color: #dc3545;
|
||||
background: rgba(220, 53, 69, 0.1);
|
||||
}
|
||||
|
||||
.analytics-pf-fault--zootech,
|
||||
.analytics-pf-fault--excluded {
|
||||
color: #4b5563;
|
||||
background: rgba(107, 114, 128, 0.12);
|
||||
}
|
||||
|
||||
.analytics-pf-fault--adjusted {
|
||||
color: #2563eb;
|
||||
background: rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .analytics-pf-fault--zootech,
|
||||
html[data-theme="dark"] .analytics-pf-fault--excluded {
|
||||
color: #d1d5db;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .analytics-pf-fault--adjusted {
|
||||
color: #93c5fd;
|
||||
background: rgba(147, 197, 253, 0.12);
|
||||
}
|
||||
|
||||
.analytics-pf-note--execution {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.analytics-pf-note--zootech {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .analytics-pf-note--zootech {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .analytics-pf-note--execution {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.analytics-pf-notes {
|
||||
margin: 0.25rem 0 0;
|
||||
padding-left: 1.1rem;
|
||||
font-size: 0.8125rem;
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.stock-forecast-banner {
|
||||
margin: 0 0 1rem;
|
||||
padding: 0.65rem 0.875rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid rgba(220, 53, 69, 0.35);
|
||||
background: rgba(220, 53, 69, 0.08);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.info-item--warn .info-value {
|
||||
color: #dc3545;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stock-card-explanation {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Оборудование: отступ от navbar как на /recipes (только margin-bottom у navbar) */
|
||||
.zootech-app-body.feed-dispensers-page .page-content > .container {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.zootech-app-body.components-page .page-content > .container {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.zootech-app-body.reports-page .page-content > .container {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.zootech-app-body.feed-dispensers-page .add-devices-container {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Унифицированный чекбокс (фильтры /reports, настройки и др.) */
|
||||
.zt-checkbox {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.zt-checkbox__input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.zt-checkbox__box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 1.5px solid var(--border-light, #cbd5e1);
|
||||
border-radius: 4px;
|
||||
background: var(--surface, var(--bg-white, #fff));
|
||||
color: #fff;
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
border-color 0.15s ease,
|
||||
box-shadow 0.15s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.zt-checkbox__box::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0.28rem;
|
||||
height: 0.5rem;
|
||||
border: solid currentColor;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg) scale(0);
|
||||
margin-top: -0.12rem;
|
||||
transition: transform 0.12s ease;
|
||||
}
|
||||
|
||||
.zt-checkbox__input:checked + .zt-checkbox__box {
|
||||
background: var(--primary-color, #2196f3);
|
||||
border-color: var(--primary-color, #2196f3);
|
||||
}
|
||||
|
||||
.zt-checkbox__input:checked + .zt-checkbox__box::after {
|
||||
transform: rotate(45deg) scale(1);
|
||||
}
|
||||
|
||||
.zt-checkbox__input:focus-visible + .zt-checkbox__box {
|
||||
box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 33, 150, 243), 0.22);
|
||||
}
|
||||
|
||||
.zt-checkbox__input:disabled + .zt-checkbox__box {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .zt-checkbox__box {
|
||||
background: var(--dm-field, #2c3338);
|
||||
border-color: rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .zt-checkbox__input:checked + .zt-checkbox__box {
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
@@ -0,0 +1,658 @@
|
||||
/**
|
||||
* Bootstrap shell-модалки + настройки (стиль WespDialog).
|
||||
* Без Bootstrap .fade — анимация через .wesp-shell-visible / .wesp-shell-closing (JS).
|
||||
*/
|
||||
|
||||
:root {
|
||||
--wesp-modal-duration: 0.22s;
|
||||
--wesp-modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
/* Backdrop (Bootstrap создаёт .modal-backdrop без fade, если у modal нет .fade) */
|
||||
body.modal-open .modal-backdrop.show {
|
||||
opacity: 0.55;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal {
|
||||
--bs-modal-bg: transparent;
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal.show {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--bs-modal-margin, 0.5rem);
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal .modal-dialog.modal-dialog--shell {
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
min-height: 0 !important;
|
||||
height: auto;
|
||||
flex: 0 0 auto;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: scale(0.97) translateY(8px);
|
||||
transition:
|
||||
transform var(--wesp-modal-duration) var(--wesp-modal-ease),
|
||||
opacity var(--wesp-modal-duration) var(--wesp-modal-ease);
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal .modal-dialog.modal-dialog--shell-wide {
|
||||
max-width: min(520px, calc(100vw - 1rem));
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal.wesp-shell-visible .modal-dialog.modal-dialog--shell {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal.wesp-shell-closing .modal-dialog.modal-dialog--shell {
|
||||
opacity: 0;
|
||||
transform: scale(0.97) translateY(8px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal .modal-content.wesp-shell-bsmodal {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal .modal-content.wesp-shell-bsmodal {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-height: min(90vh, 560px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 20px 22px;
|
||||
font-family: var(--zootech-font, Inter, system-ui, sans-serif);
|
||||
font-size: var(--zt-font-body, 0.9375rem);
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
color: #111827;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e5e7eb !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal .modal-content.wesp-shell-bsmodal--settings {
|
||||
max-height: min(92vh, 720px);
|
||||
}
|
||||
|
||||
.wesp-shell-bsmodal-title-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.wesp-shell-bsmodal-title-row .wesp-shell-bsmodal-title {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wesp-shell-bsmodal-close {
|
||||
flex-shrink: 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: background 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.wesp-shell-bsmodal-close:hover {
|
||||
background: rgba(15, 23, 42, 0.06);
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal .wesp-shell-bsmodal-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal .wesp-shell-bsmodal-body {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal .wesp-shell-bsmodal-body .form-label {
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal .wesp-shell-bsmodal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal .wesp-shell-bsmodal-btn {
|
||||
min-width: 120px;
|
||||
padding: 10px 18px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
border: 1px solid #e5e7eb;
|
||||
background: #fff;
|
||||
color: #374151;
|
||||
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, filter 0.2s;
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal .wesp-shell-bsmodal-btn:hover {
|
||||
filter: brightness(0.97);
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal .wesp-shell-bsmodal-btn-primary {
|
||||
background: var(--primary-color, #2196f3);
|
||||
border-color: var(--primary-color, #2196f3);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal .wesp-shell-bsmodal-btn-primary:hover {
|
||||
filter: none;
|
||||
box-shadow: 0 4px 12px rgba(var(--primary-rgb, 33, 150, 243), 0.25);
|
||||
}
|
||||
|
||||
/* Внутренние блоки модалки настроек */
|
||||
.wesp-shell-bsmodal-body--settings .settings-user-card,
|
||||
.wesp-shell-bsmodal-body--settings .settings-credentials-form,
|
||||
.wesp-shell-bsmodal-body--settings .settings-sync-card,
|
||||
.wesp-shell-bsmodal-body--settings .settings-sync-form,
|
||||
.wesp-shell-bsmodal-body--settings .settings-theme-card {
|
||||
background: var(--surface-muted, #f8fafc);
|
||||
border-radius: 8px;
|
||||
padding: 0.875rem 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border: 1px solid var(--border-light, #e5e7eb);
|
||||
}
|
||||
|
||||
.wesp-shell-bsmodal-body--settings .settings-theme-card {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wesp-shell-bsmodal-body--settings .settings-card-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: var(--text, #1e293b);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.wesp-shell-bsmodal-body--settings .settings-user-card--clickable,
|
||||
.wesp-shell-bsmodal-body--settings .settings-sync-card--clickable {
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s ease, background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.wesp-shell-bsmodal-body--settings .settings-user-card--clickable:hover,
|
||||
.wesp-shell-bsmodal-body--settings .settings-sync-card--clickable:hover {
|
||||
border-color: var(--primary-color, #2196f3);
|
||||
background: rgba(var(--primary-rgb, 33, 150, 243), 0.04);
|
||||
}
|
||||
|
||||
.wesp-shell-bsmodal-body--settings .settings-credentials-form,
|
||||
.wesp-shell-bsmodal-body--settings .settings-sync-form {
|
||||
animation: wesp-settings-panel-in 0.22s var(--wesp-modal-ease) both;
|
||||
}
|
||||
|
||||
@keyframes wesp-settings-panel-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.modal.wesp-shell-modal .wesp-shell-bsmodal-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal .wesp-shell-bsmodal-actions .wesp-shell-bsmodal-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .modal.wesp-shell-modal .modal-content.wesp-shell-bsmodal {
|
||||
background: var(--dm-surface, #2c3338) !important;
|
||||
color: var(--dm-text, #f5f5f5) !important;
|
||||
border-color: var(--dm-border, rgba(255, 255, 255, 0.12)) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .modal.wesp-shell-modal .wesp-shell-bsmodal-title,
|
||||
html[data-theme="dark"] .wesp-shell-bsmodal-close:hover {
|
||||
color: var(--dm-text, #f5f5f5);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .wesp-shell-bsmodal-close {
|
||||
color: var(--dm-muted, #a8b0b8);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .wesp-shell-bsmodal-close:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--dm-text, #f5f5f5);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .modal.wesp-shell-modal .wesp-shell-bsmodal-body,
|
||||
html[data-theme="dark"] .modal.wesp-shell-modal .wesp-shell-bsmodal-body p,
|
||||
html[data-theme="dark"] .modal.wesp-shell-modal .wesp-shell-bsmodal-body strong {
|
||||
color: var(--dm-text, #f5f5f5) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .modal.wesp-shell-modal .wesp-shell-bsmodal-body .form-label {
|
||||
color: var(--dm-text, #f5f5f5) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .modal.wesp-shell-modal .wesp-shell-bsmodal-body .text-muted {
|
||||
color: var(--dm-muted, #a8b0b8) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .modal.wesp-shell-modal .wesp-shell-bsmodal-body .form-control {
|
||||
background-color: var(--dm-field, #3e444a) !important;
|
||||
color: var(--dm-text, #f5f5f5) !important;
|
||||
border-color: var(--dm-border, rgba(255, 255, 255, 0.12)) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .wesp-shell-bsmodal-body--settings .settings-user-card,
|
||||
html[data-theme="dark"] .wesp-shell-bsmodal-body--settings .settings-credentials-form,
|
||||
html[data-theme="dark"] .wesp-shell-bsmodal-body--settings .settings-sync-card,
|
||||
html[data-theme="dark"] .wesp-shell-bsmodal-body--settings .settings-sync-form,
|
||||
html[data-theme="dark"] .wesp-shell-bsmodal-body--settings .settings-theme-card {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .wesp-shell-bsmodal-body--settings .settings-card-title {
|
||||
color: var(--dm-text, #f5f5f5);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .modal.wesp-shell-modal .wesp-shell-bsmodal-btn {
|
||||
background: var(--dm-field, #3e444a) !important;
|
||||
border-color: var(--dm-border, rgba(255, 255, 255, 0.12)) !important;
|
||||
color: var(--dm-text, #f5f5f5) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .modal.wesp-shell-modal .wesp-shell-bsmodal-btn-primary {
|
||||
background: var(--primary-color) !important;
|
||||
border-color: var(--primary-color) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* Появление карточек сетки */
|
||||
@keyframes wesp-grid-item-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.feed-dispensers-page .dispenser-card.wesp-grid-enter-item,
|
||||
.components-page .component-card.wesp-grid-enter-item,
|
||||
.reports-page .report-card.wesp-grid-enter-item {
|
||||
animation: wesp-grid-item-enter var(--wesp-enter-duration, 350ms) var(--wesp-enter-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
|
||||
animation-delay: calc(var(--wesp-grid-i, 0) * 45ms);
|
||||
}
|
||||
|
||||
html.wesp-page-enter-pending .feed-dispensers-page .dispenser-card.wesp-grid-enter-item,
|
||||
html.wesp-page-enter-ready .feed-dispensers-page .dispenser-card.wesp-grid-enter-item,
|
||||
html.wesp-page-enter-pending .components-page .component-card.wesp-grid-enter-item,
|
||||
html.wesp-page-enter-ready .components-page .component-card.wesp-grid-enter-item,
|
||||
html.wesp-page-enter-pending .reports-page .report-card.wesp-grid-enter-item,
|
||||
html.wesp-page-enter-ready .reports-page .report-card.wesp-grid-enter-item {
|
||||
animation: none !important;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.feed-dispensers-page .empty-state.wesp-content-reveal,
|
||||
.feed-dispensers-page .loading-state.wesp-content-reveal,
|
||||
.components-page .empty-state.wesp-content-reveal,
|
||||
.components-page .loading-state.wesp-content-reveal,
|
||||
.reports-page .empty-state.wesp-content-reveal,
|
||||
.reports-page .loading-state.wesp-content-reveal {
|
||||
animation: wesp-enter-fade var(--wesp-enter-duration-fast, 350ms) var(--wesp-enter-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modal.wesp-shell-modal .modal-dialog.modal-dialog--shell {
|
||||
transition: opacity 0.12s ease !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
body.modal-open .modal-backdrop.show {
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
.feed-dispensers-page .dispenser-card.wesp-grid-enter-item,
|
||||
.components-page .component-card.wesp-grid-enter-item,
|
||||
.feed-dispensers-page .empty-state.wesp-content-reveal,
|
||||
.feed-dispensers-page .loading-state.wesp-content-reveal,
|
||||
.components-page .empty-state.wesp-content-reveal,
|
||||
.components-page .loading-state.wesp-content-reveal,
|
||||
.reports-page .report-card.wesp-grid-enter-item,
|
||||
.reports-page .empty-state.wesp-content-reveal,
|
||||
.reports-page .loading-state.wesp-content-reveal,
|
||||
.wesp-shell-bsmodal-body--settings .settings-credentials-form,
|
||||
.wesp-shell-bsmodal-body--settings .settings-sync-form {
|
||||
animation: none !important;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* —— Notification center modal —— */
|
||||
.zt-notify-center__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.zt-notify-center__title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.zt-notify-center__read-all {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--primary-color, #2196f3);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
padding: 0.25rem 0.35rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zt-notify-center__body {
|
||||
min-height: 200px;
|
||||
max-height: min(52vh, 380px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.zt-notify-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.zt-notify-toolbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.45rem;
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.zt-notify-toolbar__filters {
|
||||
margin-bottom: 0;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.zt-notify-toolbar__filters .zt-tab {
|
||||
padding: 0.35rem 0.55rem;
|
||||
font-size: 0.75rem;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.zt-notify-toolbar__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.zt-notify-toolbar__unread {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted, #64748b);
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.zt-notify-toolbar__unread input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.zt-notify-load-more {
|
||||
padding: 0.5rem 0 0.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zt-notify-load-more__hint {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted, #64748b);
|
||||
}
|
||||
|
||||
.zt-notify-load-more__spinner {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted, #64748b);
|
||||
}
|
||||
|
||||
.zt-notify-empty--loading .zt-spinner {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.zt-notify-toolbar__sort {
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.zt-notify-toolbar__sort select {
|
||||
border: 1px solid var(--border-light, #e2e8f0);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-light, #f8fafc);
|
||||
color: var(--text-dark, #1e293b);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
padding: 0.35rem 1.75rem 0.35rem 0.55rem;
|
||||
cursor: pointer;
|
||||
max-width: 11rem;
|
||||
}
|
||||
|
||||
.zt-notify-group {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted, #64748b);
|
||||
padding: 0.35rem 0.15rem 0.15rem;
|
||||
}
|
||||
|
||||
.zt-notify-group:not(:first-child) {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.zt-notify-item__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.zt-notify-item__category {
|
||||
font-size: 0.6875rem;
|
||||
color: var(--text-muted, #64748b);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.zt-notify-empty {
|
||||
text-align: center;
|
||||
color: var(--text-muted, #64748b);
|
||||
padding: 2.5rem 1rem;
|
||||
}
|
||||
|
||||
.zt-notify-empty i {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.75rem;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.zt-notify-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.65rem;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border: 1px solid var(--border-light, #e2e8f0);
|
||||
border-radius: 10px;
|
||||
background: var(--bg-light, #f8fafc);
|
||||
padding: 0.65rem 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.zt-notify-item:hover {
|
||||
background: #fff;
|
||||
border-color: rgba(var(--primary-rgb), 0.25);
|
||||
}
|
||||
|
||||
.zt-notify-item--unread {
|
||||
background: #fff;
|
||||
border-color: rgba(var(--primary-rgb), 0.35);
|
||||
}
|
||||
|
||||
.zt-notify-item__dot {
|
||||
flex-shrink: 0;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
margin-top: 0.45rem;
|
||||
background: var(--info-color, #0ea5e9);
|
||||
}
|
||||
|
||||
.zt-notify-item__dot--success {
|
||||
background: var(--success-color, #10b981);
|
||||
}
|
||||
|
||||
.zt-notify-item__dot--error {
|
||||
background: var(--danger-color, #ef4444);
|
||||
}
|
||||
|
||||
.zt-notify-item__dot--warning {
|
||||
background: var(--warning-color, #f59e0b);
|
||||
}
|
||||
|
||||
.zt-notify-item__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.zt-notify-item__title {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-dark, #1e293b);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.zt-notify-item--unread .zt-notify-item__title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.zt-notify-item__preview {
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.45;
|
||||
color: var(--text-muted, #64748b);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.zt-notify-item__time {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted, #64748b);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.zt-notify-detail__back {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--primary-color, #2196f3);
|
||||
font-size: 0.875rem;
|
||||
padding: 0;
|
||||
margin-bottom: 0.75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zt-notify-detail__kind {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.zt-notify-detail__text {
|
||||
margin: 0 0 0.75rem;
|
||||
line-height: 1.55;
|
||||
color: var(--text-dark, #1e293b);
|
||||
}
|
||||
|
||||
.zt-notify-detail__when {
|
||||
margin: 0;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted, #64748b);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .zt-notify-item {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .zt-notify-item--unread,
|
||||
html[data-theme="dark"] .zt-notify-item:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .zt-notify-toolbar__sort select {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
@@ -0,0 +1,644 @@
|
||||
/**
|
||||
* Общая оболочка зоотех-страниц: тёмная палитра как у страницы входа,
|
||||
* футер, модалка настроек, базовые тёмные стили Bootstrap.
|
||||
* Подключать после bootstrap.min.css.
|
||||
* Токены и навбар — wesp-zootech-layout.css (подключать после этого файла).
|
||||
*/
|
||||
|
||||
/* Светлая тема: единый фон страницы */
|
||||
body {
|
||||
background-color: var(--bg-page, #f5f7fa);
|
||||
}
|
||||
|
||||
/* Клик по логотипу в шапке → страница рецептов */
|
||||
.nav-brand .nav-logo-link,
|
||||
.mobile-brand .nav-logo-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--wesp-accent: var(--primary-color, #2196f3);
|
||||
--dm-bg: var(--bg-page, #12181b);
|
||||
--dm-surface: var(--surface, #2c3338);
|
||||
--dm-field: var(--field, #3e444a);
|
||||
--dm-field-disabled: #353a40;
|
||||
--dm-field-hover: #4a525a;
|
||||
--dm-text: var(--text, #f5f5f5);
|
||||
--dm-muted: var(--muted, #a8b0b8);
|
||||
--dm-border: var(--border-light, rgba(255, 255, 255, 0.12));
|
||||
--dm-border-hover: rgba(255, 255, 255, 0.25);
|
||||
--locked-field-bg: var(--dm-field-disabled);
|
||||
--locked-field-border: rgba(255, 255, 255, 0.22);
|
||||
--locked-field-text: var(--dm-text);
|
||||
--locked-field-stripe: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="dark"] body {
|
||||
background-color: var(--dm-bg) !important;
|
||||
color: var(--dm-text) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .app-footer {
|
||||
color: var(--dm-muted) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .app-footer .text-muted {
|
||||
color: var(--dm-muted) !important;
|
||||
}
|
||||
|
||||
/* Bootstrap-модалки и формы в тёмной теме (не shell/settings — у них свои поверхности) */
|
||||
html[data-theme="dark"] body {
|
||||
background-color: var(--dm-bg) !important;
|
||||
color: var(--dm-text) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .modal:not(.wesp-shell-modal) .modal-content,
|
||||
html[data-theme="dark"] .modal:not(.wesp-shell-modal) .modal-body {
|
||||
background-color: var(--dm-bg) !important;
|
||||
color: var(--dm-text) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .modal:not(.wesp-shell-modal) .modal-content {
|
||||
border-color: var(--dm-border) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .modal-header,
|
||||
html[data-theme="dark"] .modal-footer {
|
||||
border-color: var(--dm-border) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .modal-footer {
|
||||
background-color: var(--dm-surface) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .form-control,
|
||||
html[data-theme="dark"] input:not([readonly]),
|
||||
html[data-theme="dark"] select,
|
||||
html[data-theme="dark"] textarea {
|
||||
background-color: var(--dm-field) !important;
|
||||
color: var(--dm-text) !important;
|
||||
border-color: var(--dm-border) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .form-control[readonly] {
|
||||
background-color: var(--dm-field-disabled) !important;
|
||||
color: var(--dm-muted) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .text-muted,
|
||||
html[data-theme="dark"] .modal-body label {
|
||||
color: var(--dm-muted) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] ::placeholder {
|
||||
color: rgba(245, 245, 245, 0.65) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .btn {
|
||||
color: var(--dm-text) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .btn-secondary {
|
||||
background-color: var(--dm-field) !important;
|
||||
border-color: var(--dm-border) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .btn-secondary:hover {
|
||||
background-color: var(--dm-field-hover) !important;
|
||||
border-color: var(--dm-border-hover) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .modal-footer .btn-secondary {
|
||||
background-color: var(--dm-field) !important;
|
||||
border-color: var(--dm-border) !important;
|
||||
color: var(--dm-text) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .modal-footer .btn-secondary:hover {
|
||||
background-color: var(--dm-field-hover) !important;
|
||||
border-color: var(--dm-border-hover) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .btn-primary,
|
||||
html[data-theme="dark"] .modal-footer .btn-primary {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color, #2196f3),
|
||||
var(--primary-dark, #1976d2)
|
||||
) !important;
|
||||
border: none !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .btn-primary:hover,
|
||||
html[data-theme="dark"] .modal-footer .btn-primary:hover {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-dark, #1976d2),
|
||||
var(--primary-darker, #1565c0)
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* Модалка настроек */
|
||||
.settings-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 3000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.settings-modal-content {
|
||||
background-color: #fff;
|
||||
margin: 3vh auto;
|
||||
padding: 0;
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
max-width: 520px;
|
||||
max-height: min(92vh, 720px);
|
||||
box-shadow: 0 8px 18px rgba(17, 24, 39, 0.16), 0 0 0 1px rgba(17, 24, 39, 0.06);
|
||||
overflow: hidden;
|
||||
font-family: var(--zootech-font);
|
||||
font-size: var(--zt-font-body, 0.9375rem);
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.settings-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 1px solid var(--border-light, #e2e8f0);
|
||||
background: var(--surface, #ffffff);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.settings-modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text, #1e293b);
|
||||
}
|
||||
|
||||
.settings-modal-header h3 i {
|
||||
margin-right: 0.5rem;
|
||||
color: var(--primary-color, #2196f3);
|
||||
}
|
||||
|
||||
.settings-close {
|
||||
cursor: pointer;
|
||||
font-size: 1.8rem;
|
||||
line-height: 1;
|
||||
opacity: 0.7;
|
||||
user-select: none;
|
||||
color: var(--text, #1e293b);
|
||||
}
|
||||
|
||||
.settings-close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.settings-modal-body {
|
||||
padding: 1rem 1.25rem;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.settings-field-hint {
|
||||
margin: 0 0 0.75rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.settings-modal-body .form-group {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.settings-user-card {
|
||||
background: var(--surface-muted, #f8fafc);
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border: 1px solid var(--border-light, #e2e8f0);
|
||||
}
|
||||
|
||||
.settings-user-card--clickable {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.settings-user-card--clickable:hover {
|
||||
background: rgba(var(--primary-rgb, 33, 150, 243), 0.05);
|
||||
border-color: var(--primary-color, #2196f3);
|
||||
}
|
||||
|
||||
.settings-user-card--clickable .settings-card-title {
|
||||
margin: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.settings-chevron {
|
||||
transition: transform 0.3s ease;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted, #64748b);
|
||||
}
|
||||
|
||||
.settings-user-card--clickable.open .settings-chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.settings-credentials-form {
|
||||
background: var(--surface-muted, #f8fafc);
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
border: 1px solid var(--border-light, #e2e8f0);
|
||||
animation: wespSlideDown 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes wespSlideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.settings-card-title {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 1rem 0;
|
||||
color: var(--text, #1e293b);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.settings-card-title i {
|
||||
color: var(--primary-color, #2196f3);
|
||||
}
|
||||
|
||||
.settings-theme-card {
|
||||
background: var(--surface-muted, #f8fafc);
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.25rem;
|
||||
border: 1px solid var(--border-light, #e2e8f0);
|
||||
min-width: 380px;
|
||||
}
|
||||
|
||||
.settings-theme-card .settings-card-title {
|
||||
margin: 0 0 0.75rem 0;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.settings-theme-card .settings-card-title > i:first-child {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.theme-toggle-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.theme-label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--muted, #64748b);
|
||||
}
|
||||
|
||||
.theme-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 48px;
|
||||
height: 26px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.theme-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.theme-slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #e2e8f0;
|
||||
border-radius: 26px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.theme-slider::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: 0.3s;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.theme-switch input:checked + .theme-slider {
|
||||
background: var(--primary-color, #2196f3);
|
||||
}
|
||||
|
||||
.theme-switch input:checked + .theme-slider::before {
|
||||
transform: translateX(22px);
|
||||
}
|
||||
|
||||
.settings-contrast-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--border-light, #e2e8f0);
|
||||
}
|
||||
|
||||
.settings-contrast-row__label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--text, #1e293b);
|
||||
}
|
||||
|
||||
.settings-modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem 1.25rem;
|
||||
border-top: 1px solid var(--border-light, #e2e8f0);
|
||||
flex-shrink: 0;
|
||||
background: var(--surface, #ffffff);
|
||||
}
|
||||
|
||||
.settings-sync-card {
|
||||
background: var(--surface-muted, #f8fafc);
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border: 1px solid var(--border-light, #e2e8f0);
|
||||
}
|
||||
|
||||
.settings-sync-card.settings-sync-card--clickable {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.settings-sync-card.settings-sync-card--clickable:hover {
|
||||
background: rgba(var(--primary-rgb, 33, 150, 243), 0.05);
|
||||
border-color: var(--primary-color, #2196f3);
|
||||
}
|
||||
|
||||
.settings-sync-card.settings-sync-card--clickable.open .settings-chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.settings-sync-card .settings-card-title {
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.settings-sync-card .settings-card-title > i:first-child {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.settings-sync-card .settings-card-title .settings-chevron {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.settings-sync-form {
|
||||
background: var(--surface-muted, #f8fafc);
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
border: 1px solid var(--border-light, #e2e8f0);
|
||||
animation: wespSlideDown 0.3s ease;
|
||||
}
|
||||
|
||||
.settings-sync-client-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 0;
|
||||
border-bottom: 1px solid var(--border-light, #e2e8f0);
|
||||
}
|
||||
|
||||
.settings-sync-client-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.settings-sync-client-name {
|
||||
font-weight: 500;
|
||||
color: var(--text, #1e293b);
|
||||
}
|
||||
|
||||
.settings-sync-client-actions {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.settings-sync-client-actions .btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.settings-sync-edit-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.settings-sync-edit-row select {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
/* Тёмная тема: модалка настроек и карточки */
|
||||
html[data-theme="dark"] .settings-user-card--clickable:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: var(--dm-border-hover);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-credentials-form {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: var(--dm-border);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-modal-content {
|
||||
background-color: var(--dm-surface) !important;
|
||||
color: var(--dm-text) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-modal-header {
|
||||
background: var(--dm-field) !important;
|
||||
border-color: var(--dm-border) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-modal-header h3 {
|
||||
color: var(--dm-text) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-modal-header h3 i {
|
||||
color: var(--primary-color, #2196f3) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-card-title i {
|
||||
color: var(--primary-color, #2196f3);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-close {
|
||||
color: var(--dm-text) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-sync-client-name {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-sync-card,
|
||||
html[data-theme="dark"] .settings-sync-form {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: var(--dm-border);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-sync-card--clickable:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-user-card,
|
||||
html[data-theme="dark"] .settings-theme-card {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: var(--dm-border);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-card-title {
|
||||
color: var(--dm-text);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-modal-body label,
|
||||
html[data-theme="dark"] .settings-modal-body .form-label,
|
||||
html[data-theme="dark"] .settings-credentials-form label,
|
||||
html[data-theme="dark"] .settings-sync-form label {
|
||||
color: var(--dm-text) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-modal-body .text-muted,
|
||||
html[data-theme="dark"] .settings-chevron {
|
||||
color: var(--dm-muted) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .theme-label {
|
||||
color: var(--dm-muted);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .theme-switch input:checked + .theme-slider {
|
||||
background: var(--primary-color, #2196f3) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-modal-footer {
|
||||
border-color: var(--dm-border);
|
||||
background: var(--dm-field);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-modal-footer .btn-secondary {
|
||||
background-color: var(--dm-field) !important;
|
||||
border-color: var(--dm-border) !important;
|
||||
color: var(--dm-text) !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-modal-footer .btn-primary {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color, #2196f3),
|
||||
var(--primary-dark, #1976d2)
|
||||
) !important;
|
||||
border: none !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-modal-footer .btn-primary:hover {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-dark, #1976d2),
|
||||
var(--primary-darker, #1565c0)
|
||||
) !important;
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
|
||||
/* Верхняя панель и мобильное меню: в тёмной теме без яркого синего (как фон/карточки) */
|
||||
html[data-theme="dark"] .mobile-navbar {
|
||||
background: linear-gradient(180deg, #2c3338 0%, #1e2529 100%) !important;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .mobile-menu {
|
||||
background: linear-gradient(180deg, #2c3338 0%, #252b30 100%) !important;
|
||||
box-shadow: -4px 0 28px rgba(0, 0, 0, 0.55) !important;
|
||||
}
|
||||
|
||||
#wesp-recipes-boot {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
z-index: 900;
|
||||
background: #f5f7fa;
|
||||
pointer-events: none;
|
||||
opacity: 1;
|
||||
transition: opacity 0.28s ease;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #wesp-recipes-boot {
|
||||
background: #12181b;
|
||||
}
|
||||
|
||||
#wesp-recipes-boot.wesp-recipes-boot--hide {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -0,0 +1,335 @@
|
||||
/**
|
||||
* Organic Tech / Earthy Digital — третья тема зоотехника.
|
||||
* Подключать ПОСЛЕДНИМ в <head> (после page-inline стилей).
|
||||
*/
|
||||
|
||||
/* —— Theme picker (3-way) —— */
|
||||
.theme-picker {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0.35rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.theme-picker__btn {
|
||||
flex: 1 1 auto;
|
||||
min-width: 5.5rem;
|
||||
padding: 0.55rem 0.75rem;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 40px;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
font-family: var(--zootech-font);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.theme-picker__btn:hover {
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.theme-picker__btn.is-active {
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.22);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .theme-picker__btn.is-active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* —— Navbar glassmorphism —— */
|
||||
html[data-theme="organic"] .mobile-navbar {
|
||||
background: rgba(246, 246, 244, 0.9) !important;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
will-change: backdrop-filter;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
html[data-theme="organic"] .mobile-navbar {
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* —— Logo (дублируем с !important поверх page-inline) —— */
|
||||
html[data-theme="organic"] .nav-brand .logo.logo--light-theme,
|
||||
html[data-theme="organic"] .mobile-brand .logo.logo--light-theme {
|
||||
filter: var(--organic-logo-filter) !important;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .nav-logo-link::after {
|
||||
background: linear-gradient(
|
||||
105deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0) 30%,
|
||||
rgba(72, 129, 109, 0.35) 50%,
|
||||
rgba(255, 255, 255, 0) 70%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* —— Cards & sections —— */
|
||||
html[data-theme="organic"] .zt-card:hover,
|
||||
html[data-theme="organic"] .zt-section:hover {
|
||||
box-shadow: var(--box-shadow-hover);
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .zt-card,
|
||||
html[data-theme="organic"] .zt-section {
|
||||
transition: box-shadow 0.2s ease, border-color var(--transition);
|
||||
}
|
||||
|
||||
/* —— Monospace accents —— */
|
||||
html[data-theme="organic"] .zt-mono,
|
||||
html[data-theme="organic"] code,
|
||||
html[data-theme="organic"] .lab-sandbox-step span,
|
||||
html[data-theme="organic"] .norm-calc-badge {
|
||||
font-family: var(--zootech-font-mono);
|
||||
}
|
||||
|
||||
/* —— Primary buttons (pill) —— */
|
||||
html[data-theme="organic"] .zootech-app-body .btn-primary,
|
||||
html[data-theme="organic"] .btn-primary {
|
||||
background-color: var(--primary-color) !important;
|
||||
border-color: var(--primary-color) !important;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .zootech-app-body .btn-primary:hover:not(:disabled),
|
||||
html[data-theme="organic"] .btn-primary:hover:not(:disabled) {
|
||||
background-color: var(--primary-dark) !important;
|
||||
border-color: var(--primary-dark) !important;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .btn-outline-primary,
|
||||
html[data-theme="organic"] .btn-outline-secondary {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* —— Settings cards —— */
|
||||
html[data-theme="organic"] .settings-theme-card,
|
||||
html[data-theme="organic"] .settings-user-card,
|
||||
html[data-theme="organic"] .settings-sync-card {
|
||||
background: var(--surface-muted);
|
||||
border-color: var(--border-light);
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .settings-card-title {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .settings-user-card--clickable:hover,
|
||||
html[data-theme="organic"] .settings-sync-card--clickable:hover,
|
||||
html[data-theme="organic"] .wesp-shell-bsmodal-body--settings .settings-user-card--clickable:hover,
|
||||
html[data-theme="organic"] .wesp-shell-bsmodal-body--settings .settings-sync-card--clickable:hover {
|
||||
border-color: var(--primary-color);
|
||||
background: rgba(var(--primary-rgb), 0.06);
|
||||
}
|
||||
|
||||
/* —— Login —— */
|
||||
html[data-theme="organic"] body.zootech-login-body {
|
||||
background-color: var(--z-login-bg, #f6f6f4);
|
||||
}
|
||||
|
||||
/* —— Bootstrap tokens & ссылки —— */
|
||||
html[data-theme="organic"] {
|
||||
--bs-primary: #48816d;
|
||||
--bs-primary-rgb: 72, 129, 109;
|
||||
--bs-link-color: #48816d;
|
||||
--bs-link-hover-color: #3a6b58;
|
||||
--bs-success: #48816d;
|
||||
--bs-success-rgb: 72, 129, 109;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .text-primary,
|
||||
html[data-theme="organic"] .text-primary i,
|
||||
html[data-theme="organic"] i.text-primary {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .badge.bg-primary {
|
||||
background-color: var(--primary-color) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .btn-outline-primary {
|
||||
color: var(--primary-color) !important;
|
||||
border-color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .btn-outline-primary:hover:not(:disabled) {
|
||||
background-color: var(--primary-color) !important;
|
||||
border-color: var(--primary-color) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .zootech-app-body .btn-outline-success,
|
||||
html[data-theme="organic"] .paste-recipe-btn.btn-outline-success {
|
||||
color: var(--primary-color) !important;
|
||||
border-color: rgba(var(--primary-rgb), 0.45) !important;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .zootech-app-body .btn-outline-success:hover:not(:disabled),
|
||||
html[data-theme="organic"] .paste-recipe-btn.btn-outline-success:hover:not(:disabled) {
|
||||
color: var(--primary-darker) !important;
|
||||
background: rgba(var(--primary-rgb), 0.1) !important;
|
||||
border-color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .btn-link {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .form-check-input:checked {
|
||||
background-color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .form-control:focus,
|
||||
html[data-theme="organic"] .form-select:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.2);
|
||||
}
|
||||
|
||||
/* —— Дашборд рецептов: иконки в строках (календарь и др.) —— */
|
||||
html[data-theme="organic"] .dashboard-stat-card > .card-header i,
|
||||
html[data-theme="organic"] .dashboard-stat-card > .card-header .route-icon,
|
||||
html[data-theme="organic"] .dashboard-summary-row .list-item-title i,
|
||||
html[data-theme="organic"] .dashboard-summary-row .list-item-title i.fas,
|
||||
html[data-theme="organic"] .dashboard-summary-row .list-item-leading i {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .dashboard-summary-row .list-container .list-item.active {
|
||||
border-color: var(--primary-color) !important;
|
||||
background-color: rgba(var(--primary-rgb), 0.08) !important;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .dashboard-summary-row .list-container .list-item:hover {
|
||||
border-color: var(--primary-color) !important;
|
||||
background-color: rgba(var(--primary-rgb), 0.05) !important;
|
||||
}
|
||||
|
||||
/* —— Иконки по всему UI —— */
|
||||
html[data-theme="organic"] .mobile-navbar i.fas:not(.fa-sign-out-alt),
|
||||
html[data-theme="organic"] .mobile-navbar i.far,
|
||||
html[data-theme="organic"] .zt-section__title > i,
|
||||
html[data-theme="organic"] .zt-empty__icon,
|
||||
html[data-theme="organic"] .page-title > i,
|
||||
html[data-theme="organic"] .page-header i.fas,
|
||||
html[data-theme="organic"] .settings-card-title > i:first-child,
|
||||
html[data-theme="organic"] .lab-sandbox-header .text-primary,
|
||||
html[data-theme="organic"] .lab-sandbox-header i.fas,
|
||||
html[data-theme="organic"] .recipe-table-move-group .btn i,
|
||||
html[data-theme="organic"] .recipe-drag-handle i,
|
||||
html[data-theme="organic"] .zt-k-hub-card__icon,
|
||||
html[data-theme="organic"] .zt-k-hub-card__icon i,
|
||||
html[data-theme="organic"] .info-label i.fas,
|
||||
html[data-theme="organic"] .dispenser-card .list-item-title i,
|
||||
html[data-theme="organic"] .alert-info i.fas {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] #recipeEdit .recipe-help-icon-btn {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] #recipeEdit .recipe-help-icon-btn:hover,
|
||||
html[data-theme="organic"] #recipeEdit .recipe-help-icon-btn:focus {
|
||||
color: var(--primary-dark) !important;
|
||||
background: rgba(var(--primary-rgb), 0.14) !important;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .z-login-field-icon svg {
|
||||
stroke: var(--primary-color);
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .zootech-app-body .magic-button,
|
||||
html[data-theme="organic"] .zootech-app-body .btn-primary-modern {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] .zt-spinner {
|
||||
border-top-color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
@media (prefers-contrast: more) {
|
||||
html:not([data-high-contrast="false"])[data-theme="organic"] .mobile-navbar,
|
||||
html[data-high-contrast="true"][data-theme="organic"] .mobile-navbar {
|
||||
background: var(--bg-white) !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
html:not([data-high-contrast="false"])[data-theme="organic"] .zt-card,
|
||||
html:not([data-high-contrast="false"])[data-theme="organic"] .zt-section,
|
||||
html[data-high-contrast="true"][data-theme="organic"] .zt-card,
|
||||
html[data-high-contrast="true"][data-theme="organic"] .zt-section {
|
||||
border-color: var(--border-light);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html:not([data-high-contrast="false"]) .form-control:focus,
|
||||
html:not([data-high-contrast="false"]) .form-select:focus,
|
||||
html[data-high-contrast="true"] .form-control:focus,
|
||||
html[data-high-contrast="true"] .form-select:focus {
|
||||
box-shadow: 0 0 0 2px var(--bg-white), 0 0 0 4px var(--primary-color);
|
||||
}
|
||||
|
||||
html:not([data-high-contrast="false"])[data-theme="organic"] .btn-outline-primary,
|
||||
html:not([data-high-contrast="false"])[data-theme="organic"] .zootech-app-body .btn-outline-success,
|
||||
html:not([data-high-contrast="false"])[data-theme="organic"] .paste-recipe-btn.btn-outline-success,
|
||||
html[data-high-contrast="true"][data-theme="organic"] .btn-outline-primary,
|
||||
html[data-high-contrast="true"][data-theme="organic"] .zootech-app-body .btn-outline-success,
|
||||
html[data-high-contrast="true"][data-theme="organic"] .paste-recipe-btn.btn-outline-success {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
html:not([data-high-contrast="false"])[data-theme="organic"] .dashboard-summary-row .list-container .list-item.active,
|
||||
html[data-high-contrast="true"] .dashboard-summary-row .list-container .list-item.active {
|
||||
border-left-width: 3px;
|
||||
border-left-style: solid;
|
||||
border-left-color: var(--primary-color);
|
||||
background-color: rgba(var(--primary-rgb), 0.12) !important;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-high-contrast="true"][data-theme="organic"] .mobile-navbar {
|
||||
background: var(--bg-white) !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
html[data-high-contrast="true"] .zt-card,
|
||||
html[data-high-contrast="true"] .zt-section {
|
||||
border-color: var(--border-light);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html[data-high-contrast="true"] .form-control:focus,
|
||||
html[data-high-contrast="true"] .form-select:focus {
|
||||
box-shadow: 0 0 0 2px var(--bg-white), 0 0 0 4px var(--primary-color);
|
||||
}
|
||||
|
||||
html[data-high-contrast="true"] .btn-outline-primary,
|
||||
html[data-high-contrast="true"] .zootech-app-body .btn-outline-success,
|
||||
html[data-high-contrast="true"] .paste-recipe-btn.btn-outline-success {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
html[data-high-contrast="true"] .dashboard-summary-row .list-container .list-item.active {
|
||||
border-left-width: 3px;
|
||||
border-left-style: solid;
|
||||
border-left-color: var(--primary-color);
|
||||
background-color: rgba(var(--primary-rgb), 0.12) !important;
|
||||
}
|
||||
Reference in New Issue
Block a user