/** * Симпатичная стилизация онбординг-туров (Driver.js). * Мягкие тени, скругления, дружелюбная палитра. */ .driver-popover.driver-onboarding-friendly { background: var(--md-sys-color-surface-container-high, #fff); border-radius: 20px; box-shadow: 0 12px 40px rgba(103, 80, 164, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08); border: 1px solid rgba(103, 80, 164, 0.12); padding: 20px 24px; max-width: 360px; } .driver-popover.driver-onboarding-friendly .driver-popover-title { font-size: 18px; font-weight: 600; color: var(--md-sys-color-on-surface, #1c1b1f); margin-bottom: 10px; line-height: 1.35; letter-spacing: -0.01em; } .driver-popover.driver-onboarding-friendly .driver-popover-description { font-size: 15px; line-height: 1.5; color: var(--md-sys-color-on-surface-variant, #49454f); margin-bottom: 20px; } .driver-popover.driver-onboarding-friendly .driver-popover-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; } .driver-popover.driver-onboarding-friendly .driver-popover-prev-btn, .driver-popover.driver-onboarding-friendly .driver-popover-next-btn { padding: 10px 20px; border-radius: 12px; font-size: 15px; font-weight: 600; border: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .driver-popover.driver-onboarding-friendly .driver-popover-prev-btn:hover, .driver-popover.driver-onboarding-friendly .driver-popover-next-btn:hover { transform: translateY(-1px); } .driver-popover.driver-onboarding-friendly .driver-popover-prev-btn { background: var(--md-sys-color-surface-variant, #e7e0ec); color: var(--md-sys-color-on-surface-variant, #49454f); } .driver-popover.driver-onboarding-friendly .driver-popover-next-btn { background: var(--md-sys-color-primary, #6750a4); color: var(--md-sys-color-on-primary, #fff); } .driver-popover.driver-onboarding-friendly .driver-popover-progress-text { font-size: 13px; color: var(--md-sys-color-outline, #79747e); font-weight: 500; } .driver-popover.driver-onboarding-friendly .driver-popover-arrow { border-color: var(--md-sys-color-surface-container-high, #fff); } .driver-overlay { background: rgba(0, 0, 0, 0) !important; } .driver-active-element { border-radius: 16px !important; box-shadow: 0 0 0 4px rgba(103, 80, 164, 0.9), 0 0 0 8px rgba(103, 80, 164, 0.25), 0 0 32px rgba(103, 80, 164, 0.35) !important; }