@egjs/view3d
Version:
Fast & Customizable glTF 3D model viewer, packed with full of features!
1 lines • 3.77 kB
CSS
:root{--view3d-cb-primary:#ffffff;--view3d-cb-bg:rgba(0, 0, 0, 0.3);--view3d-cb-track:rgba(230, 230, 230, 0.4);--view3d-cb-thumb-bg:rgba(30, 30, 30, 0.4);--view3d-cb-thumb-text:rgba(255, 255, 255, 0.8)}.view3d-control-bar{position:absolute;padding:8px 12px 8px 12px;left:0;bottom:0;display:flex;opacity:0;width:100%;box-sizing:border-box;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;font-size:16px;transition:opacity .3s}.view3d-control-bar.visible{opacity:1}@media (max-width:996px){.view3d-control-bar{opacity:1}}.view3d-controls-background{width:100%;height:100%;position:absolute;left:0;bottom:0;background:var(--view3d-cb-bg)}.view3d-top-controls{margin-bottom:8px}.view3d-top-controls:empty{margin-bottom:0}.view3d-top-controls>.view3d-progress-bar{margin-top:8px}.view3d-side-controls{display:flex;flex-direction:row;height:32px;position:relative}.view3d-left-controls{display:flex;flex:1;white-space:nowrap;text-overflow:ellipsis;align-items:center}.view3d-left-controls:not(:only-child){margin-right:8px}.view3d-left-controls>:not(:last-child){margin-right:8px}.view3d-right-controls>:not(:last-child){margin-right:8px}.view3d-control-item{display:inline-block;background-color:transparent;cursor:pointer;border:0;padding:0;margin:0;height:100%;position:relative;border-radius:16px;fill:var(--view3d-cb-primary)}.view3d-control-item>svg{width:24px;height:24px;margin:4px}.view3d-control-item.disabled{display:none}.view3d-control-item:not(:first-child){margin-left:1em}.view3d-control-item:hover{background-color:rgba(0,0,0,.3)}.view3d-progress-bar{flex:1;width:100%;height:13px;position:relative;cursor:pointer;pointer-events:all}.view3d-progress-track{width:100%;height:3px;position:absolute;top:5px;left:0;background-color:var(--view3d-cb-track)}.view3d-progress-filler{position:absolute;left:0;top:0;width:0;height:100%;background-color:var(--view3d-cb-primary)}.view3d-progress-thumb{width:13px;height:13px;position:absolute;top:-5px;left:-6.5px;border-radius:50%;background-color:var(--view3d-cb-primary);box-sizing:border-box}.view3d-progress-thumb::before{content:attr(data-time);opacity:0;transition:opacity .2s ease-in-out;font-size:12px;display:inline-block;position:absolute;top:-48px;left:50%;transform:translateX(-50%);background-color:var(--view3d-cb-thumb-bg);padding:4px 8px;border-radius:5px;color:var(--view3d-cb-thumb-text);box-sizing:border-box}.view3d-progress-thumb.visible::before{opacity:1}.view3d-animation-name{display:inline-flex;align-items:center;height:100%;color:var(--view3d-cb-primary);padding-left:12px;padding-right:24px;position:relative}.view3d-animation-name::after{content:"";display:inline-block;width:0;height:0;border:4px solid transparent;border-top:4px solid var(--view3d-cb-primary);position:absolute;top:50%;right:12px}.view3d-animation-list{position:absolute;left:0;bottom:calc(100% + 5px);background-color:rgba(0,0,0,.3);padding:.5em;display:none;border-radius:5px}.view3d-animation-list.visible{display:block}.view3d-animation-item{height:100%;color:var(--view3d-cb-primary);padding:0 1em;position:relative;border-radius:5px}.view3d-animation-item.selected{font-weight:700}.view3d-animation-item.selected::before{position:absolute;left:6px;top:calc(50% - 2px);content:"";width:4px;height:4px;border-radius:50%;background-color:var(--view3d-cb-primary)}.view3d-animation-item:hover{background-color:rgba(255,255,255,.3)}.view3d-gizmo{position:absolute;top:10px;right:10px;width:120px;height:120px;padding:0;margin:0;overflow:hidden;pointer-events:none}.view3d-gizmo>canvas{width:100%;height:100%}.view3d-gizmo .view3d-gizmo-axis{position:absolute;width:20px;height:20px;pointer-events:all;cursor:pointer;transform:translate(-50%,-50%)}