/** * TrustWeb Builder — Off-Canvas Widget Styles * Tương thích Elementor Free, không phụ thuộc Elementor Pro * @since 1.2.0 */ /* ── Reset & Variables ─────────────────────────────────────────────────────── */ .twb-oc-wrapper *, .twb-oc-wrapper *::before, .twb-oc-wrapper *::after { box-sizing: border-box; } /* ── Trigger wrap ──────────────────────────────────────────────────────────── */ .twb-oc-trigger-wrap { display: flex; align-items: center; } /* ── Trigger button ────────────────────────────────────────────────────────── */ .twb-oc-trigger { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none; background: none; padding: 8px 16px; font-family: inherit; font-size: inherit; line-height: 1.5; color: inherit; transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none; } .twb-oc-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .twb-oc-trigger i, .twb-oc-trigger svg { display: inline-flex; flex-shrink: 0; line-height: 1; /* SVG icon (eicon-*) kế thừa màu từ color của button */ fill: currentColor; color: inherit; } /* SVG path bên trong cũng cần inherit */ .twb-oc-trigger svg path { fill: currentColor; } .twb-oc-trigger img { display: block; max-width: 100%; height: auto; } /* ── Overlay ───────────────────────────────────────────────────────────────── */ .twb-oc-overlay { position: fixed; inset: 0; /* top/right/bottom/left: 0 */ background-color: rgba(0, 0, 0, 0.5); z-index: 9998; opacity: 0; visibility: hidden; transition-property: opacity, visibility; transition-duration: 0.4s; transition-timing-function: ease; /* Tách overlay ra khỏi stacking context của wrapper */ transform: translateZ(0); } .twb-oc-overlay.is-active { opacity: 1; visibility: visible; } /* ── Panel base ────────────────────────────────────────────────────────────── */ .twb-oc-panel { position: fixed; z-index: 9999; background: #fff; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; /* Transition mượt — duration override bằng JS inline style */ transition-property: transform, opacity, visibility; transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); visibility: hidden; /* Scroll snap cho touch */ scroll-behavior: smooth; /* Khoá text select khi đang animate */ user-select: none; } .twb-oc-panel.is-open { user-select: auto; visibility: visible; } /* Khi panel open, remove pointer-events từ wrapper để click overlay hoạt động */ .twb-oc-wrapper:not(.is-open) .twb-oc-panel { pointer-events: none; } /* Panel ẩn hoàn toàn — cả trước khi JS init (not ready) lẫn sau khi init nhưng đóng */ /* Đây là fallback; critical CSS inline trong xử lý trường hợp CSS bị defer */ .twb-oc-wrapper:not(.twb-oc-ready) .twb-oc-panel, .twb-oc-wrapper.twb-oc-ready:not(.is-open) .twb-oc-panel { visibility: hidden !important; transition: none !important; } /* Chỉ enable transition sau khi JS ready VÀ panel đang open */ .twb-oc-wrapper.twb-oc-ready.is-open .twb-oc-panel { transition-property: transform, opacity, visibility; } .twb-oc-wrapper.is-open .twb-oc-panel { pointer-events: auto; } /* ── Panel positions & entrance/exit ──────────────────────────────────────── */ /* LEFT */ .twb-oc-panel--left { top: 0; left: 0; bottom: 0; width: var(--twb-oc-size, 300px); max-width: 100vw; transform: translateX(-100%); visibility: hidden; } .twb-oc-panel--left.is-open { transform: translateX(0); visibility: visible; } /* RIGHT */ .twb-oc-panel--right { top: 0; right: 0; bottom: 0; width: var(--twb-oc-size, 300px); max-width: 100vw; transform: translateX(100%); visibility: hidden; } .twb-oc-panel--right.is-open { transform: translateX(0); visibility: visible; } /* TOP */ .twb-oc-panel--top { top: 0; left: 0; right: 0; height: var(--twb-oc-size, 300px); max-height: 100vh; transform: translateY(-100%); visibility: hidden; } .twb-oc-panel--top.is-open { transform: translateY(0); visibility: visible; } /* BOTTOM */ .twb-oc-panel--bottom { bottom: 0; left: 0; right: 0; height: var(--twb-oc-size, 300px); max-height: 100vh; transform: translateY(100%); visibility: hidden; } .twb-oc-panel--bottom.is-open { transform: translateY(0); visibility: visible; } /* ── Entrance: Fade ────────────────────────────────────────────────────────── */ .twb-oc-wrapper[data-entrance="fade"] .twb-oc-panel, .twb-oc-wrapper[data-exit="fade"] .twb-oc-panel { opacity: 0; /* Override transform — fade không cần slide */ transform: none !important; visibility: hidden; } .twb-oc-wrapper[data-entrance="fade"] .twb-oc-panel.is-open { opacity: 1; visibility: visible; } /* ── Entrance: Push (đẩy body) ─────────────────────────────────────────────── */ /* JS sẽ thêm class twb-oc-push-active + CSS variable vào */ html.twb-oc-push-left { transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1); margin-left: var(--twb-oc-push-size, 300px); } html.twb-oc-push-right { transition: margin-right 0.4s cubic-bezier(0.4, 0, 0.2, 1); margin-right: var(--twb-oc-push-size, 300px); } /* ── Close Button ──────────────────────────────────────────────────────────── */ .twb-oc-close { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; cursor: pointer; border: none; background: none; color: inherit; padding: 0; transition: color .2s ease, background-color .2s ease; -webkit-appearance: none; appearance: none; z-index:999999; flex-shrink: 0; } .twb-oc-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .twb-oc-close i, .twb-oc-close svg { line-height: 1; display: flex; height: auto; } /* Position helpers */ .twb-oc-close--h-left { left: 12px; } .twb-oc-close--h-right { right: 12px; } .twb-oc-close--v-top { top: 12px; } .twb-oc-close--v-center { top: 50%; transform: translateY(-50%); } .twb-oc-close--v-bottom { bottom: 12px; } /* ── Panel Inner ───────────────────────────────────────────────────────────── */ .twb-oc-panel-inner { flex: 1 1 auto; padding: 20px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* ── Placeholder (editor only) ─────────────────────────────────────────────── */ .twb-oc-placeholder { color: #aaa; font-style: italic; font-size: 13px; text-align: center; padding: 20px; border: 1px dashed #ddd; border-radius: 4px; pointer-events: none; margin: 0; } /* ── Template notice (editor only) ────────────────────────────────────────── */ .twb-oc-template-notice { color: #4a90d9; font-size: 13px; text-align: center; padding: 20px; border: 1px dashed #4a90d9; border-radius: 4px; margin: 0; line-height: 1.6; } .twb-oc-template-notice small { color: #888; } /* ── Body lock khi panel mở ────────────────────────────────────────────────── */ body.twb-oc-scroll-locked { overflow: hidden !important; /* Compensate scrollbar width để tránh layout shift */ padding-right: var(--twb-oc-scrollbar-width, 0px); } /* ── Elementor Editor: panel ẩn/hiện theo toggle control ───────────────────── */ /* Mặc định trong editor: panel ẩn (collapsed), không chiếm không gian */ .elementor-editor-active .twb-oc-panel { position: relative !important; transform: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; width: 100% !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; margin-top: 0 !important; border: none !important; box-shadow: none !important; transition: none !important; } /* Khi editor_preview = 'yes': hiển thị panel dạng inline để kéo widget */ .elementor-editor-active .twb-oc-editor-open .twb-oc-panel { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; height: auto !important; min-height: 120px !important; margin-top: 12px !important; border: 2px dashed #b3bfe7 !important; border-radius: 4px !important; box-shadow: none !important; } /* Panel inner khi mở: đủ cao để thấy rõ vùng nội dung */ .elementor-editor-active .twb-oc-editor-open .twb-oc-panel-inner { min-height: 100px; } /* Overlay luôn ẩn trong editor */ .elementor-editor-active .twb-oc-overlay { display: none !important; } /* Close button: hiển thị mờ khi panel đang preview, không click được */ .elementor-editor-active .twb-oc-editor-open .twb-oc-close { position: absolute; pointer-events: none; opacity: 0.4; } /* Khi panel đóng: hiển thị badge nhỏ để biết widget đang ở đây */ .elementor-editor-active .twb-oc-editor-closed::after { content: '☰ Off-Canvas — đang đóng'; display: block; font-size: 11px; color: #b3bfe7; border: 1px dashed #b3bfe7; border-radius: 4px; padding: 6px 10px; margin-top: 6px; pointer-events: none; text-align: center; letter-spacing: 0.3px; } /* ── Accessibility: reduced motion ─────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .twb-oc-panel, .twb-oc-overlay, html.twb-oc-push-left, html.twb-oc-push-right { transition-duration: 0.01ms !important; } } /* ── Mobile tweaks ──────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .twb-oc-panel--left, .twb-oc-panel--right { width: min(var(--twb-oc-size, 300px), 90vw); } .twb-oc-panel--top, .twb-oc-panel--bottom { height: min(var(--twb-oc-size, 300px), 80vh); } }