@vctrl/viewer/index.css

vctrl/viewer is a React component library for rendering and interacting with 3D models. It's part of the vectreal ecosystem and is designed to work seamlessly with the vctrl/hooks package for model loading and management.

._viewer_j8ez9_33{--vctrl-bg: #f3f4f6;--vctrl-hover-bg: #e5e7eb;--vctrl-active-bg: #d1d5db;--vctrl-text: #1f2937;--vctrl-border: #181818}@media (prefers-color-scheme: dark){._viewer_j8ez9_33{--vctrl-bg: #141414;--vctrl-hover-bg: #363636;--vctrl-active-bg: #585858;--vctrl-text: #959595;--vctrl-border: rgba(229, 231, 235, .5)}}._viewer_j8ez9_33._dark_j8ez9_44,html._dark_j8ez9_44{--vctrl-bg: #141414;--vctrl-hover-bg: #363636;--vctrl-active-bg: #585858;--vctrl-text: #959595;--vctrl-border: rgba(229, 231, 235, .5)}._viewer_j8ez9_33._light_j8ez9_49,html._light_j8ez9_49{--vctrl-bg: #f3f4f6;--vctrl-hover-bg: #e5e7eb;--vctrl-active-bg: #d1d5db;--vctrl-text: #1f2937;--vctrl-border: #181818}._viewer_j8ez9_33{overflow:clip;font-family:poppins,sans-serif;font-size:16px}._viewer_j8ez9_33 button{border:none}._viewer_j8ez9_33 a{text-decoration:none;color:unset}._viewer_j8ez9_33 p{margin:0}._viewer_j8ez9_33,._viewer-canvas_j8ez9_74,._spinner-wrapper_j8ez9_75{width:100%;height:100%}._spinner-wrapper_j8ez9_75{display:flex;align-items:center;justify-content:center}._popover_j8ez9_86{position:absolute;bottom:0;margin:.5rem}._popover_j8ez9_86 ._popover-trigger_j8ez9_91{position:relative;width:1.5rem;height:1.5rem}._popover_j8ez9_86 ._popover-trigger_j8ez9_91 button{background-color:var(--vctrl-bg);cursor:pointer}._popover_j8ez9_86 ._popover-trigger_j8ez9_91 button:hover{background-color:var(--vctrl-hover-bg)}._popover_j8ez9_86 ._popover-trigger_j8ez9_91 button:active{background-color:var(--vctrl-active-bg)}._popover_j8ez9_86 ._popover-trigger_j8ez9_91 button{width:inherit;height:inherit;padding:.25rem;border-radius:50%;z-index:10}._popover_j8ez9_86 ._popover-trigger_j8ez9_91 button svg{color:var(--vctrl-text);width:1rem;height:1rem}._popover_j8ez9_86 ._popover-modal_j8ez9_112{position:absolute;bottom:0;left:0;width:16rem;display:flex;flex-direction:column;border-radius:.5rem;overflow:hidden;background-color:var(--vctrl-bg);transition:all .3s ease-out}._popover_j8ez9_86 ._popover-modal_j8ez9_112._hide_j8ez9_127{translate:-.5rem .5rem;opacity:0;visibility:hidden}._popover_j8ez9_86 ._popover-modal_j8ez9_112._show_j8ez9_133{translate:0 0;opacity:1;visibility:visible}._popover_j8ez9_86 ._popover-modal_j8ez9_112 ._text-container_j8ez9_139{flex-grow:1;padding:1rem}._popover_j8ez9_86 ._popover-modal_j8ez9_112 ._text-container_j8ez9_139 p{font-size:.875rem;color:var(--vctrl-text)}._popover_j8ez9_86 ._popover-modal_j8ez9_112 ._popover-close_j8ez9_149{background-color:var(--vctrl-bg);cursor:pointer}._popover_j8ez9_86 ._popover-modal_j8ez9_112 ._popover-close_j8ez9_149:hover{background-color:var(--vctrl-hover-bg)}._popover_j8ez9_86 ._popover-modal_j8ez9_112 ._popover-close_j8ez9_149:active{background-color:var(--vctrl-active-bg)}._popover_j8ez9_86 ._popover-modal_j8ez9_112 ._popover-close_j8ez9_149{position:absolute;right:0;top:0;width:2rem;height:2rem;margin:.5rem;padding:.5rem;border-radius:.25rem;color:var(--vctrl-text);transition:all .3s ease-in-out}._popover_j8ez9_86 ._popover-modal_j8ez9_112 ._popover-footer_j8ez9_163{background-color:var(--vctrl-bg);cursor:pointer}._popover_j8ez9_86 ._popover-modal_j8ez9_112 ._popover-footer_j8ez9_163:hover{background-color:var(--vctrl-hover-bg)}._popover_j8ez9_86 ._popover-modal_j8ez9_112 ._popover-footer_j8ez9_163:active{background-color:var(--vctrl-active-bg)}._popover_j8ez9_86 ._popover-modal_j8ez9_112 ._popover-footer_j8ez9_163{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;border-top:1px solid var(--vctrl-border);color:var(--vctrl-text);transition:color .3s,background-color .3s}._popover_j8ez9_86 ._popover-modal_j8ez9_112 ._popover-footer_j8ez9_163 svg{height:1rem;width:1rem}