formstone
Version:
Library of modular front end components.
2 lines • 4.67 kB
CSS
/*! formstone v1.4.7 [viewer.css] 2018-05-22 | GPL-3.0 License | formstone.it */
.fs-viewer{position:relative}.fs-viewer.fs-light .fs-viewer-source{display:none}.fs-viewer.fs-light .fs-viewer-wrapper{position:relative;background:#eceff1;overflow:hidden;-webkit-transition:none;transition:none;height:300px}.fs-viewer.fs-light .fs-viewer-viewport{position:absolute;top:30px;right:30px;bottom:30px;left:30px}.fs-viewer.fs-light .fs-viewer-container{width:1px;height:1px;position:absolute;z-index:1;margin:0;opacity:1;-webkit-transform:translate3D(0,0,0);transform:translate3D(0,0,0);-webkit-transition:opacity .25s ease;transition:opacity .25s ease}.fs-viewer.fs-light.fs-viewer-loading .fs-viewer-container{opacity:0}.fs-viewer.fs-light.fs-viewer-image{position:absolute}.fs-viewer.fs-light.fs-viewer-scaling .fs-viewer-container{-webkit-transition:none;transition:none}.fs-viewer.fs-light.fs-viewer-scaling .fs-viewer-image{-webkit-transition:none;transition:none}.fs-viewer.fs-light .fs-viewer-controls{width:70px;height:40px;position:absolute;right:0;bottom:10px;left:0;z-index:4;background:#fff;border-radius:4px;-webkit-box-shadow:0 0 5px rgba(20,26,30,.25);box-shadow:0 0 5px rgba(20,26,30,.25);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;margin:0 auto;padding:5px}.fs-viewer.fs-light .fs-viewer-control{width:30px;height:30px;position:relative;background:#fff;border:none;border-radius:2px;color:#546e7a;display:block;overflow:hidden;text-indent:200%;white-space:nowrap}.fs-viewer.fs-light .fs-viewer-control:after,.fs-viewer.fs-light .fs-viewer-control:before{width:0;height:0;position:absolute;top:0;right:0;bottom:0;left:0;content:'';margin:auto}.no-touchevents .fs-viewer.fs-light .fs-viewer-control:hover{background:#cfd8dc;color:#263238}.no-touchevents .fs-viewer.fs-light .fs-viewer-control_disabled,.no-touchevents .fs-viewer.fs-light:hover .fs-viewer-control_disabled{opacity:0;cursor:default;visibility:hidden}.fs-viewer.fs-light .fs-viewer-control_next,.fs-viewer.fs-light .fs-viewer-control_previous{display:none;font-size:10px}.fs-viewer.fs-light .fs-viewer-control_next:after,.fs-viewer.fs-light .fs-viewer-control_previous:after{display:none}.fs-viewer.fs-light .fs-viewer-control_previous:before{border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8.4px solid #546e7a;margin-left:9.9px}.fs-viewer.fs-light .fs-viewer-control_next:before{border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8.4px solid #546e7a;margin-right:9.9px}.fs-viewer.fs-light .fs-viewer-control_zoom_in,.fs-viewer.fs-light .fs-viewer-control_zoom_out{font-size:20px}.fs-viewer.fs-light .fs-viewer-control_zoom_in:after,.fs-viewer.fs-light .fs-viewer-control_zoom_in:before,.fs-viewer.fs-light .fs-viewer-control_zoom_out:after,.fs-viewer.fs-light .fs-viewer-control_zoom_out:before{background:#546e7a}.fs-viewer.fs-light .fs-viewer-control_zoom_in:before,.fs-viewer.fs-light .fs-viewer-control_zoom_out:before{width:11px;height:3px}.fs-viewer.fs-light .fs-viewer-control_zoom_out:after{display:none}.fs-viewer.fs-light .fs-viewer-control_zoom_in:after{width:3px;height:11px;background:#546e7a}.fs-viewer.fs-light.fs-viewer-gallery .fs-viewer-controls{width:130px}.fs-viewer.fs-light.fs-viewer-gallery .fs-viewer-control_next,.fs-viewer.fs-light.fs-viewer-gallery .fs-viewer-control_previous{display:block}.fs-viewer.fs-light .fs-viewer-loading_icon{width:50px;height:50px;position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;display:block;margin:auto;opacity:0;-webkit-transition:opacity .25s linear,visibility .25s linear;transition:opacity .25s linear,visibility .25s linear;visibility:hidden}.fs-viewer.fs-light .fs-viewer-loading_icon:after,.fs-viewer.fs-light .fs-viewer-loading_icon:before{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:110%;content:'';display:block}.fs-viewer.fs-light .fs-viewer-loading_icon:before{border:5px solid rgba(38,50,56,.25)}.fs-viewer.fs-light .fs-viewer-loading_icon:after{-webkit-animation:fs-lightbox-loading-spin .75s linear infinite;animation:fs-lightbox-loading-spin .75s linear infinite;border:5px solid transparent;border-top-color:#263238}@-webkit-keyframes fs-lightbox-loading-spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes fs-lightbox-loading-spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.fs-light.fs-viewer-loading .fs-viewer-loading_icon{opacity:1;visibility:visible}