влад
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user