я косяк, поправил веб. Капитан, работайте!
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
влад
@@ -0,0 +1,35 @@
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: url('/static/fonts/inter/inter-300.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('/static/fonts/inter/inter-400.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('/static/fonts/inter/inter-500.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('/static/fonts/inter/inter-600.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('/static/fonts/inter/inter-700.ttf') format('truetype');
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
.kiosk-calibration-backdrop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(26, 30, 28, 0.45);
|
||||
z-index: 5000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.kiosk-calibration-backdrop.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.kiosk-calibration-panel {
|
||||
width: min(920px, 100%);
|
||||
max-height: min(92vh, 900px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 16px 48px rgba(26, 30, 28, 0.18);
|
||||
}
|
||||
|
||||
.kiosk-calibration-panel--dark {
|
||||
background: #1f1f1f;
|
||||
color: #fff;
|
||||
border: 1px solid #2f2f2f;
|
||||
}
|
||||
|
||||
.kiosk-calibration-panel--light {
|
||||
background: #fff;
|
||||
color: #1a1e1c;
|
||||
border: 1px solid rgba(26, 30, 28, 0.08);
|
||||
}
|
||||
|
||||
.kiosk-calibration-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 14px 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.kiosk-calibration-panel--dark .kiosk-calibration-head {
|
||||
border-bottom: 1px solid #2f2f2f;
|
||||
}
|
||||
|
||||
.kiosk-calibration-panel--light .kiosk-calibration-head {
|
||||
border-bottom: 1px solid rgba(26, 30, 28, 0.08);
|
||||
}
|
||||
|
||||
.kiosk-calibration-title {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.kiosk-calibration-close {
|
||||
padding: 8px 14px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.kiosk-calibration-panel--dark .kiosk-calibration-close {
|
||||
border: 1px solid #7a7a7a;
|
||||
background: #3a3a3a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.kiosk-calibration-panel--light .kiosk-calibration-close {
|
||||
border: 1px solid rgba(26, 30, 28, 0.14);
|
||||
background: #fff;
|
||||
color: #1a1e1c;
|
||||
}
|
||||
|
||||
.kiosk-calibration-frame {
|
||||
border: 0;
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
min-height: 320px;
|
||||
max-height: calc(92vh - 64px);
|
||||
background: #fff;
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
/* Киоск: скрыть указатель мыши (Chromium + labwc). */
|
||||
html.wesp-kiosk-hide-cursor,
|
||||
html.wesp-kiosk-hide-cursor body,
|
||||
html.wesp-kiosk-hide-cursor * {
|
||||
cursor: none !important;
|
||||
}
|
||||
@@ -0,0 +1,404 @@
|
||||
/**
|
||||
* Тема киоск-модалок: в светлой теме (html[data-theme="light"]) шапки и панели
|
||||
* совпадают со светлым интерфейсом, без «тёмного» вида заголовков.
|
||||
*/
|
||||
|
||||
/* --- Меню ☰ --- */
|
||||
html[data-theme="light"] #wespKioskMenuOverlay .wesp-kiosk-menu-panel {
|
||||
background: #ffffff !important;
|
||||
border-color: #e5e7eb !important;
|
||||
color: #111827 !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #wespKioskMenuOverlay .wesp-kiosk-menu-link {
|
||||
background: #f3f4f6 !important;
|
||||
border-color: #e5e7eb !important;
|
||||
color: #111827 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #wespKioskMenuOverlay .wesp-kiosk-menu-link:hover {
|
||||
background: #1b66a8 !important;
|
||||
border-color: #4ea8ff !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #wespKioskMenuOverlay .wesp-kiosk-menu-close {
|
||||
border-color: #d1d5db !important;
|
||||
background: #f3f4f6 !important;
|
||||
color: #111827 !important;
|
||||
}
|
||||
|
||||
/* --- Проверка БД / калибровка (iframe) --- */
|
||||
html[data-theme="light"] #kioskDbCheckModal .kiosk-db-check-panel,
|
||||
html[data-theme="light"] #kioskCalibrationModal .kiosk-calibration-panel {
|
||||
background: #ffffff !important;
|
||||
color: #111827 !important;
|
||||
border-color: #e5e7eb !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskDbCheckModal .kiosk-db-check-panel > div:first-child,
|
||||
html[data-theme="light"] #kioskCalibrationModal .kiosk-calibration-panel > div:first-child {
|
||||
border-bottom-color: #e5e7eb !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskDbCheckModal .kiosk-db-check-panel h2,
|
||||
html[data-theme="light"] #kioskCalibrationModal .kiosk-calibration-panel h2 {
|
||||
color: #111827 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskDbCheckClose,
|
||||
html[data-theme="light"] #kioskCalibrationClose {
|
||||
border-color: #d1d5db !important;
|
||||
background: #f3f4f6 !important;
|
||||
color: #111827 !important;
|
||||
}
|
||||
|
||||
/* --- Привязка терминала (QR) --- */
|
||||
@keyframes kioskPairSpin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
#kioskPairModal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 5000;
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
padding:
|
||||
max(8px, env(safe-area-inset-top, 0px))
|
||||
max(8px, env(safe-area-inset-right, 0px))
|
||||
max(8px, env(safe-area-inset-bottom, 0px))
|
||||
max(8px, env(safe-area-inset-left, 0px));
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#kioskPairModal.kiosk-pair-open {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
body.kiosk-pair-modal-open {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-panel {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: min(480px, 100%);
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
min-height: 0;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
background: #1f1f1f;
|
||||
color: #fff;
|
||||
border-radius: 14px;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
border: 1px solid #2f2f2f;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-header {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-body {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
#kioskPairModal h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: clamp(0.95rem, 3.6vw, 1.1rem);
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-subtitle {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: clamp(0.8rem, 3vw, 0.9rem);
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-steps {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 auto 8px auto;
|
||||
text-align: left;
|
||||
max-width: 400px;
|
||||
font-size: clamp(0.72rem, 2.6vw, 0.8rem);
|
||||
line-height: 1.35;
|
||||
color: #d7d7d7;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-loading {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin: 8px auto;
|
||||
color: #d7d7d7;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-spinner {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #5a5a5a;
|
||||
border-top-color: #4ea8ff;
|
||||
border-radius: 50%;
|
||||
animation: kioskPairSpin 0.8s linear infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-qr-wrap {
|
||||
display: none;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
margin: 4px auto;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-qr-wrap.kiosk-pair-qr-visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-qr {
|
||||
display: block;
|
||||
width: min(92vw, 52vh, 360px);
|
||||
min-width: min(160px, 78vw);
|
||||
height: auto;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: contain;
|
||||
border: 1px solid #3b3b3b;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-url {
|
||||
flex: 0 0 auto;
|
||||
font-size: clamp(0.62rem, 2.2vw, 0.72rem);
|
||||
word-break: break-all;
|
||||
margin: 6px 0;
|
||||
color: #b8d8ff;
|
||||
text-align: left;
|
||||
max-height: 3.6em;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-status {
|
||||
flex: 0 0 auto;
|
||||
font-size: clamp(0.72rem, 2.6vw, 0.8rem);
|
||||
color: #d7d7d7;
|
||||
margin: 4px 0 6px;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-actions {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
flex-wrap: nowrap;
|
||||
margin: 8px -12px -12px;
|
||||
padding: 12px;
|
||||
border-top: 1px solid #333;
|
||||
border-radius: 0 0 14px 14px;
|
||||
background: #1f1f1f;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-btn {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #7a7a7a;
|
||||
background: #3a3a3a;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: clamp(0.75rem, 2.8vw, 0.875rem);
|
||||
line-height: 1.25;
|
||||
min-height: 42px;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-btn--primary {
|
||||
border-color: #4ea8ff;
|
||||
background: #1b66a8;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-btn--secondary {
|
||||
border-color: #5a5a5a;
|
||||
background: #2a2a2a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-btn--ghost {
|
||||
border-color: #6a6a6a;
|
||||
background: #333;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-btn:focus-visible {
|
||||
outline: 2px solid #4ea8ff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (max-height: 520px) {
|
||||
#kioskPairModal .kiosk-pair-panel {
|
||||
padding: 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-qr {
|
||||
width: min(88vw, 38vh, 280px);
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-steps {
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-btn {
|
||||
min-height: 38px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-btn {
|
||||
flex: 1 1 calc(50% - 4px);
|
||||
}
|
||||
|
||||
#kioskPairModal .kiosk-pair-btn--ghost {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#kioskBlockedOverlay {
|
||||
box-sizing: border-box;
|
||||
padding: max(16px, env(safe-area-inset-top, 0px)) 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#kioskBlockedOverlay > div {
|
||||
max-width: min(520px, 100%);
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskPairModal .kiosk-pair-panel {
|
||||
background: #ffffff !important;
|
||||
color: #111827 !important;
|
||||
border-color: #e5e7eb !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskPairModal h3 {
|
||||
color: #111827 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskPairModal .kiosk-pair-subtitle {
|
||||
color: #374151 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskPairModal .kiosk-pair-steps {
|
||||
color: #4b5563 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskPairLoading,
|
||||
html[data-theme="light"] #kioskPairModal .kiosk-pair-loading {
|
||||
color: #4b5563 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskPairLoading span:first-child,
|
||||
html[data-theme="light"] #kioskPairModal .kiosk-pair-spinner {
|
||||
border-color: #d1d5db !important;
|
||||
border-top-color: #2563eb !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskPairUrl {
|
||||
color: #2563eb !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskPairStatus {
|
||||
color: #6b7280 !important;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #kioskPairStatus {
|
||||
color: #d7d7d7 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskPairModal .kiosk-pair-actions {
|
||||
background: #ffffff !important;
|
||||
border-top-color: #e5e7eb !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskPairModal .kiosk-pair-btn--primary,
|
||||
html[data-theme="light"] #kioskPairCopy {
|
||||
border-color: #2563eb !important;
|
||||
background: #2563eb !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskPairModal .kiosk-pair-btn--secondary,
|
||||
html[data-theme="light"] #kioskPairRefresh {
|
||||
border-color: #d1d5db !important;
|
||||
background: #ffffff !important;
|
||||
color: #111827 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskPairModal .kiosk-pair-btn--ghost,
|
||||
html[data-theme="light"] #kioskPairClose {
|
||||
border-color: #d1d5db !important;
|
||||
background: #f3f4f6 !important;
|
||||
color: #111827 !important;
|
||||
}
|
||||
|
||||
/* --- Блокировка до привязки --- */
|
||||
html[data-theme="light"] #kioskBlockedOverlay {
|
||||
background: rgba(15, 23, 42, 0.45) !important;
|
||||
color: #111827 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskBlockedOverlay h2 {
|
||||
color: #111827 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskBlockedOverlay p {
|
||||
color: #4b5563 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] #kioskBlockedPairBtn {
|
||||
background: #2563eb !important;
|
||||
border: 1px solid #2563eb !important;
|
||||
color: #ffffff !important;
|
||||
padding: 10px 18px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-stretch: normal;
|
||||
font-display: swap;
|
||||
src: url('/static/fonts/roboto/roboto-400.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-display: swap;
|
||||
src: url('/static/fonts/roboto/roboto-500.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-stretch: normal;
|
||||
font-display: swap;
|
||||
src: url('/static/fonts/roboto/roboto-700.ttf') format('truetype');
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,139 @@
|
||||
/* Карточка в главных настройках + модалка контроля отклонений */
|
||||
|
||||
/* Поверх #settingsModal (z-index: 3000) */
|
||||
#feedQualitySettingsModal.modal.wesp-shell-modal {
|
||||
z-index: 3100;
|
||||
}
|
||||
|
||||
.modal.wesp-shell-modal .modal-dialog.modal-dialog--shell-fq {
|
||||
max-width: min(760px, calc(100vw - 1rem));
|
||||
}
|
||||
|
||||
#feedQualitySettingsModal .modal-content.fq-settings-modal__content {
|
||||
max-height: min(94vh, 900px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#feedQualitySettingsModal .wesp-shell-bsmodal-body {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
max-height: min(calc(94vh - 8rem), 760px);
|
||||
}
|
||||
|
||||
#feedQualitySettingsModal .wesp-shell-bsmodal-actions {
|
||||
flex-shrink: 0;
|
||||
margin-top: 0;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border-light, #e2e8f0);
|
||||
}
|
||||
|
||||
.settings-feed-quality-card {
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.settings-feed-quality-card--clickable {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.settings-feed-quality-card--clickable:hover {
|
||||
background: rgba(var(--primary-rgb), 0.05);
|
||||
border-color: var(--primary-color, #2196f3);
|
||||
}
|
||||
|
||||
.settings-feed-quality-card .settings-card-title {
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.settings-feed-quality-card .settings-card-title > i:first-child {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.settings-feed-quality-card .settings-card-title .settings-chevron {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.fq-settings-modal .fq-settings-section {
|
||||
border: 1px solid var(--border-light, #e2e8f0);
|
||||
border-radius: 10px;
|
||||
padding: 0.85rem 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
background: var(--bg-light, #f8fafc);
|
||||
}
|
||||
|
||||
.fq-settings-modal .fq-settings-section__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.fq-settings-modal .fq-settings-section__title {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark, #1e293b);
|
||||
}
|
||||
|
||||
.fq-settings-modal .fq-settings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 0.65rem 1rem;
|
||||
}
|
||||
|
||||
.fq-settings-modal .fq-settings-field label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted, #64748b);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.fq-settings-modal .fq-settings-checks {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem 1.25rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.fq-settings-modal .fq-settings-check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-dark, #334155);
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-feed-quality-card {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .settings-feed-quality-card--clickable:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .fq-settings-modal .fq-settings-section {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .fq-settings-modal .fq-settings-section__title,
|
||||
html[data-theme="dark"] .fq-settings-modal .fq-settings-check {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
/**
|
||||
* Kiosk/operator skeleton layouts — builds on wesp-recipes-skeleton.css primitives.
|
||||
*/
|
||||
|
||||
/* --- Grid cards (direct children of .dispenser-grid) --- */
|
||||
|
||||
.dispenser-card.kiosk-skeleton-card {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.dispenser-card.kiosk-skeleton-card:nth-child(1) { --skel-i: 0; }
|
||||
.dispenser-card.kiosk-skeleton-card:nth-child(2) { --skel-i: 1; }
|
||||
.dispenser-card.kiosk-skeleton-card:nth-child(3) { --skel-i: 2; }
|
||||
.dispenser-card.kiosk-skeleton-card:nth-child(4) { --skel-i: 3; }
|
||||
|
||||
.dispenser-grid.kiosk-skeleton-host--exit {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.dashboard-skeleton-bar--kiosk-title {
|
||||
width: 72%;
|
||||
height: 1.75rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.kiosk-skeleton-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dashboard-skeleton-bar--kiosk-meta {
|
||||
width: 88%;
|
||||
height: 0.72rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dashboard-skeleton-bar--kiosk-meta:last-child {
|
||||
width: 62%;
|
||||
}
|
||||
|
||||
/* Legacy grid wrapper (unused on recipes_selection; kept for compatibility) */
|
||||
|
||||
.kiosk-skeleton-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
min-height: 8rem;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.kiosk-skeleton-grid--exit {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* --- Unloading groups list --- */
|
||||
|
||||
.kiosk-skeleton-groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-height: 6rem;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.kiosk-skeleton-groups--exit {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.kiosk-skeleton-group-item {
|
||||
background: var(--white, #fff);
|
||||
border: 1px solid var(--gray-200, #e5e7eb);
|
||||
border-radius: 8px;
|
||||
padding: 16px 20px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.kiosk-skeleton-group-item:nth-child(1) { --skel-i: 0; }
|
||||
.kiosk-skeleton-group-item:nth-child(2) { --skel-i: 1; }
|
||||
.kiosk-skeleton-group-item:nth-child(3) { --skel-i: 2; }
|
||||
|
||||
.kiosk-skeleton-group-item .dashboard-skeleton-bar--title {
|
||||
width: 55%;
|
||||
height: 1.1rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.kiosk-skeleton-group-item .dashboard-skeleton-bar--meta {
|
||||
width: 40%;
|
||||
height: 0.85rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* --- Duplicate / weight panel --- */
|
||||
|
||||
.kiosk-skeleton-panel {
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.kiosk-skeleton-panel--exit {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.kiosk-skeleton-weight-hero {
|
||||
width: min(280px, 70%);
|
||||
height: clamp(2.5rem, 8vmin, 4rem);
|
||||
margin: 0 auto 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.kiosk-skeleton-recipe-header {
|
||||
padding: clamp(10px, 2.5vmin, 16px) clamp(12px, 3vw, 20px);
|
||||
}
|
||||
|
||||
.kiosk-skeleton-recipe-header .dashboard-skeleton-bar--title {
|
||||
width: 65%;
|
||||
height: 1.25rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.kiosk-skeleton-recipe-header .dashboard-skeleton-bar--subtitle {
|
||||
width: 45%;
|
||||
height: 0.85rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.kiosk-skeleton-component-name {
|
||||
width: min(320px, 85%);
|
||||
height: 1.5rem;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
/* --- Ingredients table skeleton --- */
|
||||
|
||||
.kiosk-skeleton-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
min-height: 12rem;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.kiosk-skeleton-table--exit {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.kiosk-skeleton-table-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.kiosk-skeleton-table-row:nth-child(1) { --skel-i: 0; }
|
||||
.kiosk-skeleton-table-row:nth-child(2) { --skel-i: 1; }
|
||||
.kiosk-skeleton-table-row:nth-child(3) { --skel-i: 2; }
|
||||
.kiosk-skeleton-table-row:nth-child(4) { --skel-i: 3; }
|
||||
.kiosk-skeleton-table-row:nth-child(5) { --skel-i: 4; }
|
||||
.kiosk-skeleton-table-row:nth-child(6) { --skel-i: 5; }
|
||||
|
||||
.kiosk-skeleton-table-row .dashboard-skeleton-bar {
|
||||
margin-bottom: 0;
|
||||
height: 0.85rem;
|
||||
}
|
||||
|
||||
.kiosk-skeleton-table-row .dashboard-skeleton-bar:first-child {
|
||||
flex: 2 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.kiosk-skeleton-table-row .dashboard-skeleton-bar:last-child {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
max-width: 35%;
|
||||
}
|
||||
|
||||
/* --- Dark theme --- */
|
||||
|
||||
html[data-theme="dark"] .dispenser-card.kiosk-skeleton-card {
|
||||
background: #242424;
|
||||
border-color: #3a3a3a;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .kiosk-skeleton-group-item {
|
||||
background: #242424;
|
||||
border-color: #3a3a3a;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.dispenser-grid.kiosk-skeleton-host--exit,
|
||||
.kiosk-skeleton-grid--exit,
|
||||
.kiosk-skeleton-groups--exit,
|
||||
.kiosk-skeleton-panel--exit,
|
||||
.kiosk-skeleton-table--exit {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
.wesp-logo-loader {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
background: #f6f6f4;
|
||||
transition: opacity 0.48s ease, visibility 0.48s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wesp-logo-loader--exiting {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.wesp-logo-loader--exiting .wesp-logo-loader__canvas {
|
||||
transform: scale(1.03);
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.wesp-logo-loader--hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wesp-logo-loader--embedded {
|
||||
position: relative;
|
||||
inset: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wesp-logo-loader--embedded.wesp-logo-loader--transparent,
|
||||
.wesp-logo-loader--plain.wesp-logo-loader--transparent {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.wesp-logo-loader--embedded .wesp-logo-loader__canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.wesp-logo-loader--embedded:not(.wesp-logo-loader--no-chrome) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wesp-logo-loader--embedded:not(.wesp-logo-loader--no-chrome) .wesp-logo-loader__canvas {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
inset: auto;
|
||||
}
|
||||
|
||||
.wesp-logo-loader--embedded:not(.wesp-logo-loader--no-chrome) .wesp-logo-loader__footer {
|
||||
flex: 0 0 auto;
|
||||
padding: 0 12px 10px;
|
||||
}
|
||||
|
||||
.wesp-logo-loader--embedded:not(.wesp-logo-loader--no-chrome) .wesp-logo-loader__footer-row {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.wesp-logo-loader--plain {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.wesp-logo-loader--no-chrome .wesp-logo-loader__footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wesp-logo-loader__canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: crisp-edges;
|
||||
transition: transform 0.52s ease, opacity 0.52s ease;
|
||||
transform-origin: 50% 44%;
|
||||
}
|
||||
|
||||
.wesp-logo-loader__footer {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 0 12px 12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wesp-logo-loader__footer-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.wesp-logo-loader__label,
|
||||
.wesp-logo-loader__percent {
|
||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(26, 30, 28, 0.72);
|
||||
}
|
||||
|
||||
.wesp-logo-loader__percent {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.wesp-logo-loader__bar {
|
||||
position: relative;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
background: rgba(26, 30, 28, 0.08);
|
||||
}
|
||||
|
||||
.wesp-logo-loader__bar-fill {
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: 0;
|
||||
background: rgb(148, 152, 158);
|
||||
transition: width 0.08s linear, background 0.18s ease;
|
||||
}
|
||||
|
||||
.wesp-logo-loader__tagline {
|
||||
margin: 14px 0 0;
|
||||
padding: 0 8px;
|
||||
text-align: center;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.45;
|
||||
color: rgba(26, 30, 28, 0.52);
|
||||
min-height: 1.45em;
|
||||
transition: opacity 0.35s ease;
|
||||
}
|
||||
|
||||
.wesp-logo-loader__tagline:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wesp-logo-loader__tagline--fade {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wesp-logo-loader__bar-fill {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Demo page helpers */
|
||||
.wesp-logo-loader-demo {
|
||||
min-height: 100vh;
|
||||
background: #f6f6f4;
|
||||
color: rgba(26, 30, 28, 0.72);
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.wesp-logo-loader-demo__panel {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 72px;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 1px solid rgba(26, 30, 28, 0.08);
|
||||
box-shadow: 0 8px 24px rgba(26, 30, 28, 0.06);
|
||||
}
|
||||
|
||||
.wesp-logo-loader-demo__btn {
|
||||
appearance: none;
|
||||
border: 1px solid rgba(26, 30, 28, 0.12);
|
||||
background: rgba(72, 129, 109, 0.12);
|
||||
color: #1a1e1c;
|
||||
border-radius: 8px;
|
||||
padding: 8px 14px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wesp-logo-loader-demo__btn:hover {
|
||||
background: rgba(72, 129, 109, 0.22);
|
||||
}
|
||||
|
||||
.wesp-logo-loader-demo__hint {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
opacity: 0.65;
|
||||
}
|
||||
@@ -283,8 +283,13 @@
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open .mobile-navbar,
|
||||
body.recipe-edit-mobile-open .mobile-menu-overlay,
|
||||
body.recipe-edit-mobile-open .app-footer,
|
||||
body.recipe-edit-mobile-open .page-content {
|
||||
body.recipe-edit-mobile-open .page-content,
|
||||
body.recipe-edit-mobile-open .wesp-zt-notify-fab,
|
||||
body.ingredient-mobile-sheet-open .wesp-zt-notify-fab,
|
||||
body.unloading-group-mobile-sheet-open .wesp-zt-notify-fab,
|
||||
body.recipe-help-modal-open .wesp-zt-notify-fab {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -345,7 +350,14 @@
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior-y: contain;
|
||||
touch-action: pan-y;
|
||||
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
|
||||
padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
/* Nested section cards inherit global .card { height: 100% } and stretch to fill the scroll viewport */
|
||||
body.recipe-edit-mobile-open #recipeEdit .recipe-section-card,
|
||||
#recipeEdit.recipe-edit--mobile-active .recipe-section-card {
|
||||
height: auto !important;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
body.recipe-edit-mobile-open #recipeEdit #recipeForm > .card-header,
|
||||
@@ -435,12 +447,23 @@
|
||||
}
|
||||
|
||||
/* --- Card layout for edit data grids --- */
|
||||
/* !important: wesp-recipes-editor.css loads later and sets display:grid on __head/__row */
|
||||
#recipeEdit .zt-data-grid__scroll {
|
||||
overflow: visible;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid {
|
||||
gap: 0 !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
#recipeEdit .zt-data-grid__head {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#recipeEdit #ingredientsTableBody .ingredient-row,
|
||||
#recipeEdit #unloadingGroupsTableBody .unloading-group-row {
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
#recipeEdit #ingredientsTable.ingredients-table--dm-unlocked .ingredient-detail-cell.dry-matter-per-head {
|
||||
|
||||
@@ -300,13 +300,12 @@ html[data-theme="dark"] .reports-page .reports-filter-select .form-select {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.reports-page .reports-export-dropdown__menu {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 0.35rem);
|
||||
z-index: 1200;
|
||||
.reports-page .reports-export-dropdown__menu,
|
||||
#reportsExportMenu.reports-export-dropdown__menu {
|
||||
position: fixed;
|
||||
z-index: 3600;
|
||||
min-width: 16.5rem;
|
||||
max-width: 19rem;
|
||||
max-width: min(19rem, calc(100vw - 1.5rem));
|
||||
padding: 0.35rem;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--zt-radius-md, 10px);
|
||||
@@ -314,6 +313,16 @@ html[data-theme="dark"] .reports-page .reports-filter-select .form-select {
|
||||
box-shadow: var(--shadow-soft, 0 8px 24px rgba(15, 23, 42, 0.12));
|
||||
}
|
||||
|
||||
#reportsExportMenu.reports-export-dropdown__menu[hidden] {
|
||||
display: none !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
#reportsExportMenu.reports-export-dropdown__menu--open {
|
||||
display: block !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.reports-page .reports-export-dropdown__group + .reports-export-dropdown__group {
|
||||
margin-top: 0.35rem;
|
||||
padding-top: 0.35rem;
|
||||
@@ -375,7 +384,8 @@ html[data-theme="dark"] .reports-page .reports-filter-select .form-select {
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .reports-page .reports-export-dropdown__menu {
|
||||
html[data-theme="dark"] .reports-page .reports-export-dropdown__menu,
|
||||
html[data-theme="dark"] #reportsExportMenu.reports-export-dropdown__menu {
|
||||
background: var(--dm-field, #2c3338);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
@@ -432,9 +442,10 @@ html[data-theme="dark"] .reports-page .reports-export-dropdown__menu {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__panel {
|
||||
.reports-page .reports-drp__panel,
|
||||
#reportsDateRangePanel.reports-drp__panel {
|
||||
position: fixed;
|
||||
z-index: 2500;
|
||||
z-index: 3600;
|
||||
width: min(19rem, calc(100vw - 1.5rem));
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border-light);
|
||||
@@ -443,6 +454,16 @@ html[data-theme="dark"] .reports-page .reports-export-dropdown__menu {
|
||||
box-shadow: var(--shadow-soft, 0 8px 24px rgba(15, 23, 42, 0.12));
|
||||
}
|
||||
|
||||
#reportsDateRangePanel.reports-drp__panel[hidden] {
|
||||
display: none !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
#reportsDateRangePanel.reports-drp__panel--open {
|
||||
display: block !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.reports-page .reports-drp__presets {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
@@ -549,7 +570,8 @@ html[data-theme="dark"] .reports-page .reports-export-dropdown__menu {
|
||||
|
||||
|
||||
html[data-theme="dark"] .reports-page .reports-drp__trigger,
|
||||
html[data-theme="dark"] .reports-page .reports-drp__panel {
|
||||
html[data-theme="dark"] .reports-page .reports-drp__panel,
|
||||
html[data-theme="dark"] #reportsDateRangePanel.reports-drp__panel {
|
||||
background: var(--dm-field, var(--bg-white, #2c3338));
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
color: #f5f5f5;
|
||||
|
||||
@@ -0,0 +1,737 @@
|
||||
:root {
|
||||
--setup-page-bg: #fff;
|
||||
--setup-overlay-bg: #fff;
|
||||
--setup-surface: #fff;
|
||||
--setup-surface-muted: rgba(26, 30, 28, 0.04);
|
||||
--setup-border: rgba(26, 30, 28, 0.08);
|
||||
--setup-border-strong: rgba(26, 30, 28, 0.14);
|
||||
--setup-text: #1a1e1c;
|
||||
--setup-text-muted: rgba(26, 30, 28, 0.72);
|
||||
--setup-text-soft: rgba(26, 30, 28, 0.55);
|
||||
--setup-text-faint: rgba(26, 30, 28, 0.5);
|
||||
--setup-accent: #2c7be5;
|
||||
--setup-accent-soft: rgba(44, 123, 229, 0.08);
|
||||
--setup-accent-text: #1a5bb8;
|
||||
--setup-shadow: 0 16px 48px rgba(26, 30, 28, 0.08);
|
||||
--setup-busy-bg: rgba(255, 255, 255, 0.82);
|
||||
--setup-info-bg: rgba(44, 123, 229, 0.08);
|
||||
--setup-info-text: rgba(26, 30, 28, 0.78);
|
||||
--setup-warn-bg: #fff7e6;
|
||||
--setup-warn-border: #ffd591;
|
||||
--setup-warn-text: #874d00;
|
||||
--setup-error: #b42318;
|
||||
--setup-ok: #067647;
|
||||
--setup-loader-bg: #fff;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--setup-page-bg: #0f1114;
|
||||
--setup-overlay-bg: #0f1114;
|
||||
--setup-surface: #181b20;
|
||||
--setup-surface-muted: rgba(255, 255, 255, 0.05);
|
||||
--setup-border: rgba(255, 255, 255, 0.1);
|
||||
--setup-border-strong: rgba(255, 255, 255, 0.16);
|
||||
--setup-text: #eef0f3;
|
||||
--setup-text-muted: rgba(238, 240, 243, 0.78);
|
||||
--setup-text-soft: rgba(238, 240, 243, 0.58);
|
||||
--setup-text-faint: rgba(238, 240, 243, 0.45);
|
||||
--setup-accent: #4d93ef;
|
||||
--setup-accent-soft: rgba(77, 147, 239, 0.14);
|
||||
--setup-accent-text: #8eb8ff;
|
||||
--setup-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
|
||||
--setup-busy-bg: rgba(24, 27, 32, 0.88);
|
||||
--setup-info-bg: rgba(77, 147, 239, 0.12);
|
||||
--setup-info-text: rgba(238, 240, 243, 0.86);
|
||||
--setup-warn-bg: rgba(255, 169, 64, 0.12);
|
||||
--setup-warn-border: rgba(255, 169, 64, 0.35);
|
||||
--setup-warn-text: #ffd591;
|
||||
--setup-error: #ff8a80;
|
||||
--setup-ok: #6ee7a8;
|
||||
--setup-loader-bg: #181b20;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--setup-page-bg);
|
||||
color: var(--setup-text);
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.wesp-setup {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10000;
|
||||
background: var(--setup-overlay-bg);
|
||||
}
|
||||
|
||||
.wesp-setup__intro {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10001;
|
||||
width: min(520px, calc(100vw - 32px));
|
||||
height: min(240px, 36vh);
|
||||
background: transparent;
|
||||
transition: opacity 0.45s ease, visibility 0.45s;
|
||||
}
|
||||
|
||||
.wesp-setup__intro--done {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wesp-setup__intro .wesp-logo-loader,
|
||||
.wesp-setup__intro .wesp-logo-loader--embedded,
|
||||
.wesp-setup__intro .wesp-logo-loader--plain {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.wesp-setup__panel {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10002;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: min(520px, calc(100vw - 32px));
|
||||
max-height: min(85vh, 620px);
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
border-radius: 16px;
|
||||
background: var(--setup-surface);
|
||||
border: 1px solid var(--setup-border);
|
||||
box-shadow: var(--setup-shadow);
|
||||
color: var(--setup-text);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: opacity 0.35s ease 0.08s, visibility 0.35s ease 0.08s, background 0.2s ease, color 0.2s ease;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.wesp-setup__header {
|
||||
flex: 0 0 auto;
|
||||
padding: 22px 24px 0;
|
||||
}
|
||||
|
||||
.wesp-setup__content {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 16px 24px 8px;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.wesp-setup__footer {
|
||||
flex: 0 0 auto;
|
||||
padding: 12px 24px calc(16px + env(safe-area-inset-bottom, 0px));
|
||||
border-top: 1px solid var(--setup-border);
|
||||
background: var(--setup-surface);
|
||||
}
|
||||
|
||||
.wesp-setup__panel--busy {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wesp-setup__busy {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
border-radius: 16px;
|
||||
background: var(--setup-busy-bg);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.wesp-setup__spinner {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 2px solid var(--setup-border-strong);
|
||||
border-top-color: var(--setup-accent);
|
||||
border-radius: 50%;
|
||||
animation: wesp-setup-spin 0.75s linear infinite;
|
||||
}
|
||||
|
||||
.wesp-setup__busy-label {
|
||||
font-size: 13px;
|
||||
color: var(--setup-text-muted);
|
||||
}
|
||||
|
||||
@keyframes wesp-setup-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.wesp-setup__panel--hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wesp-setup__title {
|
||||
margin: 0 0 6px;
|
||||
font-size: 21px;
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.25;
|
||||
color: var(--setup-text);
|
||||
}
|
||||
|
||||
.wesp-setup__lead {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
color: var(--setup-text-muted);
|
||||
}
|
||||
|
||||
.wesp-setup__step-indicator {
|
||||
margin-bottom: 10px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--setup-text-faint);
|
||||
}
|
||||
|
||||
.wesp-setup__field {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.wesp-setup__label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--setup-text);
|
||||
}
|
||||
|
||||
.wesp-setup__input,
|
||||
.wesp-setup__select {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 11px 12px;
|
||||
border: 1px solid var(--setup-border-strong);
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
background: var(--setup-surface);
|
||||
color: var(--setup-text);
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.wesp-setup__input:focus,
|
||||
.wesp-setup__select:focus {
|
||||
outline: none;
|
||||
border-color: var(--setup-accent);
|
||||
box-shadow: 0 0 0 3px var(--setup-accent-soft);
|
||||
}
|
||||
|
||||
.wesp-setup__input:-webkit-autofill,
|
||||
.wesp-setup__input:-webkit-autofill:hover,
|
||||
.wesp-setup__input:-webkit-autofill:focus,
|
||||
.wesp-setup__input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: 0 0 0 1000px var(--setup-surface) inset !important;
|
||||
box-shadow: 0 0 0 1000px var(--setup-surface) inset !important;
|
||||
-webkit-text-fill-color: var(--setup-text) !important;
|
||||
caret-color: var(--setup-text);
|
||||
transition: background-color 600000s ease-in-out 0s;
|
||||
}
|
||||
|
||||
.wesp-setup__input:autofill {
|
||||
box-shadow: 0 0 0 1000px var(--setup-surface) inset !important;
|
||||
-webkit-text-fill-color: var(--setup-text) !important;
|
||||
caret-color: var(--setup-text);
|
||||
}
|
||||
|
||||
.wesp-setup__input--readonly {
|
||||
background: var(--setup-surface-muted);
|
||||
color: var(--setup-text-muted);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.wesp-setup__input-group {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wesp-setup__input-group .wesp-setup__input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.wesp-setup__input-suffix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--setup-border-strong);
|
||||
border-left: none;
|
||||
border-radius: 0 8px 8px 0;
|
||||
background: var(--setup-surface-muted);
|
||||
color: var(--setup-text-soft);
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.wesp-setup__checkbox-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wesp-setup__role-grid {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.wesp-setup__role-grid--cards {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.wesp-setup__role-btn {
|
||||
text-align: left;
|
||||
padding: 12px 14px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--setup-border-strong);
|
||||
background: var(--setup-surface);
|
||||
color: var(--setup-text);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.wesp-setup__role-btn:hover {
|
||||
border-color: var(--setup-accent);
|
||||
}
|
||||
|
||||
.wesp-setup__role-btn:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px var(--setup-accent-soft);
|
||||
}
|
||||
|
||||
.wesp-setup__role-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 84px;
|
||||
padding: 20px 18px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wesp-setup__theme-grid .wesp-setup__theme-card {
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0;
|
||||
min-height: 0;
|
||||
padding: 12px 14px 12px 62px;
|
||||
text-align: left;
|
||||
background: var(--setup-surface-muted);
|
||||
border-color: var(--setup-border);
|
||||
color: var(--setup-text);
|
||||
transition: border-color 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.wesp-setup__theme-grid .wesp-setup__theme-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: -16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--setup-border-strong);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wesp-setup__theme-card--light::before {
|
||||
background: linear-gradient(145deg, #ffffff 0%, #d8dee8 100%);
|
||||
}
|
||||
|
||||
.wesp-setup__theme-card--dark::before {
|
||||
background: linear-gradient(145deg, #505662 0%, #171b21 100%);
|
||||
}
|
||||
|
||||
.wesp-setup__theme-card span {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
font-weight: 400;
|
||||
color: var(--setup-text-soft);
|
||||
}
|
||||
|
||||
.wesp-setup__role-btn strong {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.wesp-setup__role-card strong {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
color: var(--setup-text);
|
||||
}
|
||||
|
||||
.wesp-setup__theme-card strong {
|
||||
margin-bottom: 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.wesp-setup__role-btn.is-selected:not(.wesp-setup__theme-card) {
|
||||
border-color: var(--setup-accent);
|
||||
background: var(--setup-accent-soft);
|
||||
box-shadow: 0 0 0 1px rgba(44, 123, 229, 0.18);
|
||||
}
|
||||
|
||||
.wesp-setup__theme-card.is-selected {
|
||||
border-color: var(--setup-accent);
|
||||
background: var(--setup-accent-soft);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wesp-setup__role-card.is-selected:not(.wesp-setup__theme-card) strong {
|
||||
color: var(--setup-accent-text);
|
||||
}
|
||||
|
||||
.wesp-setup__theme-grid .wesp-setup__theme-card strong {
|
||||
color: var(--setup-text);
|
||||
}
|
||||
|
||||
.wesp-setup__theme-grid .wesp-setup__theme-card.is-selected strong {
|
||||
color: var(--setup-accent-text);
|
||||
}
|
||||
|
||||
.wesp-setup__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.wesp-setup__actions-fill {
|
||||
flex: 1 1 12px;
|
||||
min-width: 8px;
|
||||
}
|
||||
|
||||
.wesp-setup__btn {
|
||||
appearance: none;
|
||||
border: 1px solid var(--setup-border-strong);
|
||||
border-radius: 10px;
|
||||
padding: 10px 16px;
|
||||
min-height: 42px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
background: var(--setup-surface);
|
||||
color: var(--setup-text);
|
||||
transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.wesp-setup__btn:hover:not(:disabled) {
|
||||
border-color: var(--setup-accent);
|
||||
}
|
||||
|
||||
.wesp-setup__btn:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px var(--setup-accent-soft);
|
||||
}
|
||||
|
||||
.wesp-setup__btn--ghost {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--setup-text-muted);
|
||||
}
|
||||
|
||||
.wesp-setup__btn--ghost:hover:not(:disabled) {
|
||||
background: var(--setup-surface-muted);
|
||||
border-color: var(--setup-border);
|
||||
color: var(--setup-text);
|
||||
}
|
||||
|
||||
.wesp-setup__btn--primary {
|
||||
background: var(--setup-accent);
|
||||
border-color: var(--setup-accent);
|
||||
color: #fff;
|
||||
padding-inline: 20px;
|
||||
}
|
||||
|
||||
.wesp-setup__btn--primary:hover:not(:disabled) {
|
||||
filter: brightness(1.06);
|
||||
border-color: var(--setup-accent);
|
||||
}
|
||||
|
||||
.wesp-setup__btn:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.wesp-setup__msg {
|
||||
margin: 10px 0 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
min-height: 1.4em;
|
||||
}
|
||||
|
||||
.wesp-setup__msg--error {
|
||||
color: var(--setup-error);
|
||||
}
|
||||
|
||||
.wesp-setup__msg--ok {
|
||||
color: var(--setup-ok);
|
||||
}
|
||||
|
||||
.wesp-setup__hint {
|
||||
margin: 0 0 12px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--setup-text-soft);
|
||||
}
|
||||
|
||||
.wesp-setup__info {
|
||||
margin: 0 0 12px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
background: var(--setup-info-bg);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--setup-info-text);
|
||||
}
|
||||
|
||||
.wesp-setup__info--warn {
|
||||
background: var(--setup-warn-bg);
|
||||
border: 1px solid var(--setup-warn-border);
|
||||
color: var(--setup-warn-text);
|
||||
}
|
||||
|
||||
.wesp-setup__section-title {
|
||||
margin: 18px 0 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wesp-setup__qr-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 8px 0 10px;
|
||||
padding: 14px;
|
||||
border-radius: 12px;
|
||||
background: var(--setup-surface-muted);
|
||||
border: 1px solid var(--setup-border);
|
||||
}
|
||||
|
||||
.wesp-setup__qr {
|
||||
display: block;
|
||||
width: min(200px, 100%);
|
||||
height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wesp-setup__url {
|
||||
word-break: break-all;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
color: var(--setup-text-muted);
|
||||
}
|
||||
|
||||
.wesp-setup__progress-bar {
|
||||
height: 6px;
|
||||
background: var(--setup-surface-muted);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.wesp-setup__progress-fill {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: var(--setup-accent);
|
||||
transition: width 0.2s linear;
|
||||
}
|
||||
|
||||
.wesp-setup__summary-list {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.wesp-setup__input--touch {
|
||||
cursor: text;
|
||||
caret-color: var(--setup-accent);
|
||||
}
|
||||
|
||||
.wesp-setup__keyboard {
|
||||
flex: 0 0 auto;
|
||||
display: none;
|
||||
padding: 10px 16px 4px;
|
||||
border-top: 1px solid var(--setup-border);
|
||||
background: var(--setup-surface);
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.wesp-setup__keyboard.is-visible {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.wesp-setup__keyboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wesp-setup__keyboard-key {
|
||||
appearance: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 42px;
|
||||
padding: 8px 4px;
|
||||
border: 1px solid var(--setup-border-strong);
|
||||
border-radius: 8px;
|
||||
background: var(--setup-surface-muted);
|
||||
color: var(--setup-text);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
|
||||
}
|
||||
|
||||
.wesp-setup__keyboard-key:active {
|
||||
transform: scale(0.96);
|
||||
background: var(--setup-accent-soft);
|
||||
border-color: var(--setup-accent);
|
||||
}
|
||||
|
||||
.wesp-setup__keyboard-key--wide {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.wesp-setup__keyboard-key--action {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.wesp-setup__intro {
|
||||
height: min(200px, 32vh);
|
||||
}
|
||||
|
||||
.wesp-setup__panel {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
transform: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: min(92dvh, 720px);
|
||||
border-radius: 18px 18px 0 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.wesp-setup__header {
|
||||
padding: 18px 18px 0;
|
||||
}
|
||||
|
||||
.wesp-setup__content {
|
||||
padding: 14px 18px 6px;
|
||||
}
|
||||
|
||||
.wesp-setup__footer {
|
||||
padding: 10px 18px calc(14px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
.wesp-setup__title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.wesp-setup__role-card {
|
||||
min-height: 72px;
|
||||
padding: 16px 14px;
|
||||
}
|
||||
|
||||
.wesp-setup__theme-grid .wesp-setup__theme-card {
|
||||
padding: 11px 12px 11px 56px;
|
||||
}
|
||||
|
||||
.wesp-setup__theme-grid .wesp-setup__theme-card::before {
|
||||
left: 12px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-top: -14px;
|
||||
}
|
||||
|
||||
.wesp-setup__btn {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.wesp-setup__actions {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.wesp-setup__actions-fill {
|
||||
flex-basis: 100%;
|
||||
height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wesp-setup__btn--primary {
|
||||
flex: 1 1 auto;
|
||||
min-width: calc(50% - 4px);
|
||||
}
|
||||
|
||||
.wesp-setup__keyboard {
|
||||
padding: 8px 14px 2px;
|
||||
}
|
||||
|
||||
.wesp-setup__keyboard-grid {
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.wesp-setup__keyboard-key {
|
||||
min-height: 44px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wesp-setup__keyboard-key--action {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
/* Экран /starting — тот же масштаб логотипа, что intro в setup wizard */
|
||||
.wesp-startup-screen {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
background: #f6f6f4;
|
||||
color: rgba(26, 30, 28, 0.72);
|
||||
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
.wesp-startup__stage {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10001;
|
||||
width: min(520px, calc(100vw - 32px));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.wesp-startup__stage .wesp-setup__intro {
|
||||
position: relative;
|
||||
left: auto;
|
||||
top: auto;
|
||||
transform: none;
|
||||
width: 100%;
|
||||
height: min(240px, 36vh);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.wesp-startup__stage .wesp-logo-loader,
|
||||
.wesp-startup__stage .wesp-logo-loader--embedded,
|
||||
.wesp-startup__stage .wesp-logo-loader--plain {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Подпись только снаружи (#startupQuip), не пустой tagline внутри лоадера */
|
||||
.wesp-startup__stage .wesp-logo-loader__tagline {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.wesp-startup__quip {
|
||||
flex: 0 0 auto;
|
||||
margin: 10px 0 0;
|
||||
padding: 0 12px;
|
||||
text-align: center;
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.5;
|
||||
color: rgba(26, 30, 28, 0.58);
|
||||
min-height: 3em;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.wesp-startup__quip--fade {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.wesp-startup__quip--error {
|
||||
color: #cf1322;
|
||||
}
|
||||
|
||||
/* Киоск / логин зоотехника: --z-login-bg из zootechnician-login.css */
|
||||
html[data-theme="dark"] .wesp-startup-screen {
|
||||
background: #12181b;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .wesp-startup__quip {
|
||||
color: #a8b0b8;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .wesp-startup__quip--error {
|
||||
color: #ff7875;
|
||||
}
|
||||
@@ -0,0 +1,227 @@
|
||||
/* Ненавязчивый баннер «доступно обновление» — киоск и операторские страницы */
|
||||
|
||||
#wespUpdateBanner {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 4500;
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 14px;
|
||||
padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
|
||||
background: linear-gradient(180deg, rgba(30, 58, 138, 0.97), rgba(29, 78, 216, 0.98));
|
||||
color: #f8fafc;
|
||||
font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.25);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
#wespUpdateBanner.wesp-update-banner--visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wespUpdateBanner .wesp-update-banner-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px 14px;
|
||||
}
|
||||
|
||||
#wespUpdateBanner .wesp-update-banner-text {
|
||||
flex: 1 1 200px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#wespUpdateBanner .wesp-update-banner-text strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#wespUpdateBanner .wesp-update-banner-changelog {
|
||||
display: none;
|
||||
width: 100%;
|
||||
margin: 4px 0 0;
|
||||
padding: 8px 10px;
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
max-height: 120px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#wespUpdateBanner.wesp-update-banner--expanded .wesp-update-banner-changelog {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wespUpdateBanner .wesp-update-banner-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#wespUpdateBanner .wesp-update-banner-btn {
|
||||
border: 1px solid rgba(255, 255, 255, 0.35);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 8px 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
#wespUpdateBanner .wesp-update-banner-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
#wespUpdateBanner .wesp-update-banner-btn--primary {
|
||||
background: #fff;
|
||||
color: #1d4ed8;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
#wespUpdateBanner .wesp-update-banner-btn--primary:hover {
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
#wespUpdateOverlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 6000;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background: rgba(15, 23, 42, 0.72);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#wespUpdateOverlay.wesp-update-overlay--visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#wespUpdateOverlay .wesp-update-overlay-panel {
|
||||
background: #fff;
|
||||
color: #111827;
|
||||
border-radius: 10px;
|
||||
padding: 24px 28px;
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-family: Inter, system-ui, sans-serif;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
#wespUpdateOverlay .wesp-update-overlay-title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#wespUpdateOverlay .wesp-update-overlay-body {
|
||||
margin: 0 0 16px;
|
||||
font-size: 0.95rem;
|
||||
color: #4b5563;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#wespUpdateOverlay .wesp-update-progress-wrap {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#wespUpdateOverlay .wesp-update-progress-track {
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: #e5e7eb;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#wespUpdateOverlay .wesp-update-progress-bar {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--primary-color, #2196f3),
|
||||
var(--primary-dark, #1976d2)
|
||||
);
|
||||
transition: width 0.25s ease;
|
||||
}
|
||||
|
||||
#wespUpdateOverlay .wesp-update-progress-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
font-size: 0.8125rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
#wespUpdateOverlay .wesp-update-progress-percent {
|
||||
font-weight: 600;
|
||||
color: #1d4ed8;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#wespUpdateOverlay .wesp-update-progress-detail {
|
||||
text-align: right;
|
||||
min-width: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #wespUpdateOverlay .wesp-update-overlay-panel {
|
||||
background: #242424;
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
#wespUpdateOverlay .wesp-update-progress-bar.wesp-update-progress-bar--error {
|
||||
background: linear-gradient(90deg, #dc2626, #b91c1c);
|
||||
}
|
||||
|
||||
#wespUpdateOverlay .wesp-update-overlay-panel--rollback {
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #wespUpdateOverlay .wesp-update-overlay-panel--rollback {
|
||||
border-color: #7f1d1d;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #wespUpdateOverlay .wesp-update-overlay-body {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #wespUpdateOverlay .wesp-update-progress-track {
|
||||
background: #374151;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #wespUpdateOverlay .wesp-update-progress-meta {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] #wespUpdateOverlay .wesp-update-progress-percent {
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#wespUpdateBanner .wesp-update-banner-inner {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
#wespUpdateBanner .wesp-update-banner-actions {
|
||||
justify-content: stretch;
|
||||
}
|
||||
#wespUpdateBanner .wesp-update-banner-btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -544,32 +544,44 @@ html[data-theme="dark"] .mobile-brand .logo--dark-theme {
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.55);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
z-index: 2000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity var(--transition), visibility var(--transition);
|
||||
}
|
||||
|
||||
.mobile-menu-overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
right: 0;
|
||||
width: min(88vw, 340px);
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
height: 100dvh;
|
||||
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);
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.mobile-menu-overlay.active .mobile-menu {
|
||||
right: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
body.mobile-menu-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mobile-menu-header {
|
||||
@@ -578,6 +590,7 @@ html[data-theme="dark"] .mobile-brand .logo--dark-theme {
|
||||
align-items: center;
|
||||
padding: 1.25rem 1.25rem 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
@@ -609,9 +622,11 @@ html[data-theme="dark"] .mobile-brand .logo--dark-theme {
|
||||
}
|
||||
|
||||
.mobile-menu-items {
|
||||
flex: 1;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
padding: 0.5rem 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.mobile-menu-item {
|
||||
@@ -643,6 +658,7 @@ html[data-theme="dark"] .mobile-brand .logo--dark-theme {
|
||||
.mobile-menu-footer {
|
||||
padding: 1.25rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-user-info {
|
||||
|
||||
@@ -0,0 +1,345 @@
|
||||
/* Страница входа зоотехника — тёмная тема по референсу, светлая — отдельная палитра */
|
||||
|
||||
:root {
|
||||
--z-login-bg: var(--bg-page, #f5f7fa);
|
||||
--z-login-surface: var(--surface, #ffffff);
|
||||
--z-login-input-bg: #e8edf2;
|
||||
--z-login-text: var(--text, #1e293b);
|
||||
--z-login-muted: var(--muted, #64748b);
|
||||
--z-login-icon: #4b5563;
|
||||
--z-login-btn: var(--primary-color, #2196f3);
|
||||
--z-login-btn-hover: var(--primary-dark, #1976d2);
|
||||
--z-login-shadow: 0 16px 48px rgba(17, 24, 39, 0.1),
|
||||
0 0 0 1px rgba(17, 24, 39, 0.06);
|
||||
--z-login-switch-track: #cbd5e1;
|
||||
--z-login-switch-thumb: #ffffff;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--z-login-bg: var(--bg-page, #12181b);
|
||||
--z-login-surface: var(--surface, #2c3338);
|
||||
--z-login-input-bg: var(--field, #3e444a);
|
||||
--z-login-text: var(--text, #f5f5f5);
|
||||
--z-login-muted: var(--muted, #a8b0b8);
|
||||
--z-login-icon: #ffffff;
|
||||
--z-login-btn: var(--primary-color, #2196f3);
|
||||
--z-login-btn-hover: var(--primary-light, #42a5f5);
|
||||
--z-login-shadow: 0 20px 56px rgba(0, 0, 0, 0.45),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.04);
|
||||
--z-login-switch-track: #252b30;
|
||||
--z-login-switch-thumb: #ffffff;
|
||||
}
|
||||
|
||||
html[data-theme="organic"] {
|
||||
--z-login-bg: var(--bg-page, #f6f6f4);
|
||||
--z-login-surface: var(--surface, #ffffff);
|
||||
--z-login-input-bg: #eff4f2;
|
||||
--z-login-text: var(--text, #1a1e1c);
|
||||
--z-login-muted: var(--muted, #4a5a52);
|
||||
--z-login-icon: #4a5a52;
|
||||
--z-login-btn: var(--primary-color, #48816d);
|
||||
--z-login-btn-hover: var(--primary-dark, #3a6b58);
|
||||
--z-login-shadow: 0 16px 48px rgba(26, 30, 28, 0.08),
|
||||
0 0 0 1px rgba(26, 30, 28, 0.04);
|
||||
--z-login-switch-track: #e8e8e2;
|
||||
--z-login-switch-thumb: #ffffff;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.zootech-login-body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: var(--zootech-font, "Inter", system-ui, sans-serif);
|
||||
background: var(--z-login-bg);
|
||||
color: var(--z-login-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.z-login-page {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
transition: opacity 0.25s ease, visibility 0.25s;
|
||||
}
|
||||
|
||||
.z-login-page--hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.z-login-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10000;
|
||||
background: var(--z-login-bg);
|
||||
}
|
||||
|
||||
.z-login-loader {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10001;
|
||||
width: min(520px, calc(100vw - 32px));
|
||||
height: min(240px, 36vh);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.z-login-loader .wesp-logo-loader,
|
||||
.z-login-loader .wesp-logo-loader--embedded,
|
||||
.z-login-loader .wesp-logo-loader--plain {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.z-login-loader .wesp-logo-loader__label,
|
||||
.z-login-loader .wesp-logo-loader__percent {
|
||||
color: var(--z-login-muted);
|
||||
}
|
||||
|
||||
.z-login-loader .wesp-logo-loader__bar {
|
||||
background: rgba(26, 30, 28, 0.1);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .z-login-loader .wesp-logo-loader__bar {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.z-login-card {
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--z-login-shadow);
|
||||
background: var(--z-login-surface);
|
||||
}
|
||||
|
||||
.z-login-form-panel {
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.z-login-title {
|
||||
font-family: inherit;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: var(--z-login-text);
|
||||
margin: 0 0 28px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.z-login-field {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.z-login-field--with-icon {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
background: var(--z-login-input-bg);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.z-login-field-icon {
|
||||
flex: 0 0 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--z-login-icon);
|
||||
}
|
||||
|
||||
.z-login-field-icon svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.z-login-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 14px 14px 14px 0;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--z-login-text);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.z-login-input::placeholder {
|
||||
color: var(--z-login-muted);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.z-login-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.z-login-input:-webkit-autofill,
|
||||
.z-login-input:-webkit-autofill:hover,
|
||||
.z-login-input:-webkit-autofill:focus,
|
||||
.z-login-input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: 0 0 0 1000px var(--z-login-input-bg) inset !important;
|
||||
box-shadow: 0 0 0 1000px var(--z-login-input-bg) inset !important;
|
||||
-webkit-text-fill-color: var(--z-login-text) !important;
|
||||
caret-color: var(--z-login-text);
|
||||
transition: background-color 600000s ease-in-out 0s;
|
||||
}
|
||||
|
||||
.z-login-input:autofill {
|
||||
box-shadow: 0 0 0 1000px var(--z-login-input-bg) inset !important;
|
||||
-webkit-text-fill-color: var(--z-login-text) !important;
|
||||
caret-color: var(--z-login-text);
|
||||
}
|
||||
|
||||
.z-login-field--with-icon:focus-within {
|
||||
box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 33, 150, 243), 0.45);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .z-login-field--with-icon:focus-within {
|
||||
box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 33, 150, 243), 0.5);
|
||||
}
|
||||
|
||||
.z-login-submit {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
padding: 14px 20px;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
font-family: inherit;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
background: var(--gradient-blue, var(--z-login-btn));
|
||||
box-shadow: 0 4px 14px rgba(var(--primary-rgb, 33, 150, 243), 0.35);
|
||||
transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.z-login-submit:hover:not(:disabled) {
|
||||
background: var(--z-login-btn-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.z-login-submit:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.z-login-remember {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 22px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.z-login-switch-input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.z-login-switch-ui {
|
||||
flex-shrink: 0;
|
||||
width: 44px;
|
||||
height: 26px;
|
||||
border-radius: 13px;
|
||||
background: var(--z-login-switch-track);
|
||||
position: relative;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.z-login-switch-ui::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: var(--z-login-switch-thumb);
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.z-login-switch-input:checked + .z-login-switch-ui::after {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
|
||||
.z-login-switch-input:focus-visible + .z-login-switch-ui {
|
||||
outline: 2px solid var(--z-login-btn);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.z-login-switch-input:disabled + .z-login-switch-ui {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.z-login-remember-text {
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
color: var(--z-login-text);
|
||||
}
|
||||
|
||||
.z-login-msg {
|
||||
padding: 12px 14px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 0.9rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.z-login-msg--error {
|
||||
background: #dc3545;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.z-login-spinner {
|
||||
display: none;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin: 0 auto;
|
||||
border: 2px solid rgba(255, 255, 255, 0.35);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: z-login-spin 0.85s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes z-login-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.z-login-loader {
|
||||
height: min(200px, 32vh);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.z-login-form-panel {
|
||||
padding: 28px 22px 32px;
|
||||
}
|
||||
|
||||
.z-login-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user