7 lines
15 KiB
CSS
7 lines
15 KiB
CSS
/*!
|
|
* Photo Sphere Viewer 3.5.1
|
|
* Copyright (c) 2014-2015 Jérémy Heleine
|
|
* Copyright (c) 2015-2019 Damien "Mistic" Sorel
|
|
* Licensed under MIT (https://opensource.org/licenses/MIT)
|
|
*/
|
|
.psv-container{width:100%;height:100%;margin:0;padding:0;position:relative;background:radial-gradient(#fff 0,#fdfdfd 16%,#fbfbfb 33%,#f8f8f8 49%,#efefef 66%,#dfdfdf 82%,#bfbfbf 100%);overflow:hidden}.psv-canvas-container{position:absolute;top:0;left:0;z-index:0;-webkit-transition:opacity linear .1s;transition:opacity linear .1s}.psv-canvas{display:block}.psv-loader-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%;z-index:100}.psv-loader{position:relative;text-align:center;color:rgba(61,61,61,.7);width:150px;height:150px;border:10px solid transparent}.psv-loader::before{content:'';display:inline-block;height:100%;vertical-align:middle}.psv-loader,.psv-loader-image,.psv-loader-text{display:inline-block;vertical-align:middle}.psv-loader-canvas{position:absolute;top:0;left:0;width:100%;height:100%}.psv-loader-text{font:14px sans-serif}.psv-navbar{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;z-index:90;bottom:-40px;left:0;width:100%;height:40px;background:rgba(61,61,61,.5);-webkit-transition:bottom ease-in-out .1s;transition:bottom ease-in-out .1s}.psv-navbar--open{bottom:0}.psv-navbar,.psv-navbar *{-webkit-box-sizing:content-box;box-sizing:content-box}.psv-caption{-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%;color:rgba(255,255,255,.7);overflow:hidden;text-align:center}.psv-caption-icon{height:20px;width:20px;cursor:pointer}.psv-caption-icon *{fill:rgba(255,255,255,.7)}.psv-caption-content{display:inline-block;padding:10px;font:16px sans-serif;white-space:nowrap}.psv-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding:10px;position:relative;cursor:pointer;height:20px;width:20px;background:0 0;color:rgba(255,255,255,.7)}.psv-button--active{background:rgba(255,255,255,.2)}.psv-button--disabled{pointer-events:none;opacity:.5}.psv-button .psv-button-svg{width:100%;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .2s ease;transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}.psv-button .psv-button-svg *{fill:rgba(255,255,255,.7)}.psv-button--hover-scale:not(.psv-button--disabled):hover .psv-button-svg{-webkit-transform:scale(1.2);transform:scale(1.2)}.psv-hud{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;z-index:10;width:100%;height:100%}.psv-hud-svg-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20}.psv-marker{cursor:pointer;display:none}.psv-marker--normal{position:absolute;top:0;left:0;z-index:30;background-size:contain;background-repeat:no-repeat}.psv-marker--transparent{display:block;opacity:0}.psv-marker--visible{display:block}.psv-panel{position:absolute;z-index:90;right:0;height:100%;width:400px;max-width:calc(100% - 24px);background:rgba(10,10,10,.7);-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-duration:.1s;transition-duration:.1s;cursor:default;margin-left:9px}.psv-container--has-navbar .psv-panel{height:calc(100% - 40px)}.psv-panel-close-button{display:none;position:absolute;top:0;left:-24px;width:24px;height:24px;background:rgba(0,0,0,.9)}.psv-panel-close-button::after,.psv-panel-close-button::before{content:'';position:absolute;top:50%;left:4px;width:15px;height:1px;background-color:#fff;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out;-webkit-transition-property:width,left,-webkit-transform;transition-property:width,left,-webkit-transform;transition-property:width,left,transform;transition-property:width,left,transform,-webkit-transform}.psv-panel-close-button::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.psv-panel-close-button::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.psv-panel-close-button:hover::after,.psv-panel-close-button:hover::before{left:0;width:23px}.psv-panel-close-button:hover::before{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.psv-panel-close-button:hover::after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.psv-panel-resizer{display:none;position:absolute;top:0;left:-9px;width:9px;height:100%;background-color:rgba(0,0,0,.9);cursor:col-resize}.psv-panel-resizer::before{content:'';position:absolute;top:50%;left:1px;margin-top:-14.5px;width:1px;height:1px;-webkit-box-shadow:1px 0 #fff,3px 0 #fff,5px 0 #fff,1px 2px #fff,3px 2px #fff,5px 2px #fff,1px 4px #fff,3px 4px #fff,5px 4px #fff,1px 6px #fff,3px 6px #fff,5px 6px #fff,1px 8px #fff,3px 8px #fff,5px 8px #fff,1px 10px #fff,3px 10px #fff,5px 10px #fff,1px 12px #fff,3px 12px #fff,5px 12px #fff,1px 14px #fff,3px 14px #fff,5px 14px #fff,1px 16px #fff,3px 16px #fff,5px 16px #fff,1px 18px #fff,3px 18px #fff,5px 18px #fff,1px 20px #fff,3px 20px #fff,5px 20px #fff,1px 22px #fff,3px 22px #fff,5px 22px #fff,1px 24px #fff,3px 24px #fff,5px 24px #fff,1px 26px #fff,3px 26px #fff,5px 26px #fff,1px 28px #fff,3px 28px #fff,5px 28px #fff;box-shadow:1px 0 #fff,3px 0 #fff,5px 0 #fff,1px 2px #fff,3px 2px #fff,5px 2px #fff,1px 4px #fff,3px 4px #fff,5px 4px #fff,1px 6px #fff,3px 6px #fff,5px 6px #fff,1px 8px #fff,3px 8px #fff,5px 8px #fff,1px 10px #fff,3px 10px #fff,5px 10px #fff,1px 12px #fff,3px 12px #fff,5px 12px #fff,1px 14px #fff,3px 14px #fff,5px 14px #fff,1px 16px #fff,3px 16px #fff,5px 16px #fff,1px 18px #fff,3px 18px #fff,5px 18px #fff,1px 20px #fff,3px 20px #fff,5px 20px #fff,1px 22px #fff,3px 22px #fff,5px 22px #fff,1px 24px #fff,3px 24px #fff,5px 24px #fff,1px 26px #fff,3px 26px #fff,5px 26px #fff,1px 28px #fff,3px 28px #fff,5px 28px #fff;background:0 0}.psv-panel-content{width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;color:#dcdcdc;font:16px sans-serif;overflow:auto}.psv-panel-content:not(.psv-panel-content--no-margin){padding:1em}.psv-panel-content--no-interaction{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.psv-panel--open{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;-webkit-transition-duration:.2s;transition-duration:.2s}.psv-panel--open .psv-panel-close-button,.psv-panel--open .psv-panel-resizer{display:block}.psv-tooltip{position:absolute;z-index:50;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:200px;background-color:rgba(61,61,61,.8);border-radius:4px;padding:.5em 1em;opacity:0;-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-duration:.1s;transition-duration:.1s}.psv-tooltip-content{color:#fff;font:14px sans-serif;text-shadow:0 1px #000}.psv-tooltip-arrow{position:absolute;height:0;width:0;border:7px solid transparent}.psv-tooltip--bottom-center{-webkit-box-shadow:0 3px 0 rgba(90,90,90,.7);box-shadow:0 3px 0 rgba(90,90,90,.7);-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0);-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}.psv-tooltip--bottom-center .psv-tooltip-arrow{border-bottom-color:rgba(61,61,61,.8)}.psv-tooltip--center-left{-webkit-box-shadow:-3px 0 0 rgba(90,90,90,.7);box-shadow:-3px 0 0 rgba(90,90,90,.7);-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0);-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}.psv-tooltip--center-left .psv-tooltip-arrow{border-left-color:rgba(61,61,61,.8)}.psv-tooltip--top-center{-webkit-box-shadow:0 -3px 0 rgba(90,90,90,.7);box-shadow:0 -3px 0 rgba(90,90,90,.7);-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0);-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}.psv-tooltip--top-center .psv-tooltip-arrow{border-top-color:rgba(61,61,61,.8)}.psv-tooltip--center-right{-webkit-box-shadow:3px 0 0 rgba(90,90,90,.7);box-shadow:3px 0 0 rgba(90,90,90,.7);-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0);-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}.psv-tooltip--center-right .psv-tooltip-arrow{border-right-color:rgba(61,61,61,.8)}.psv-tooltip--bottom-left{-webkit-box-shadow:-3px 3px 0 rgba(90,90,90,.7);box-shadow:-3px 3px 0 rgba(90,90,90,.7);-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0);-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}.psv-tooltip--bottom-left .psv-tooltip-arrow{border-bottom-color:rgba(61,61,61,.8)}.psv-tooltip--bottom-right{-webkit-box-shadow:3px 3px 0 rgba(90,90,90,.7);box-shadow:3px 3px 0 rgba(90,90,90,.7);-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0);-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}.psv-tooltip--bottom-right .psv-tooltip-arrow{border-bottom-color:rgba(61,61,61,.8)}.psv-tooltip--top-left{-webkit-box-shadow:-3px -3px 0 rgba(90,90,90,.7);box-shadow:-3px -3px 0 rgba(90,90,90,.7);-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0);-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}.psv-tooltip--top-left .psv-tooltip-arrow{border-top-color:rgba(61,61,61,.8)}.psv-tooltip--top-right{-webkit-box-shadow:3px -3px 0 rgba(90,90,90,.7);box-shadow:3px -3px 0 rgba(90,90,90,.7);-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0);-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}.psv-tooltip--top-right .psv-tooltip-arrow{border-top-color:rgba(61,61,61,.8)}.psv-tooltip--visible{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;-webkit-transition-duration:.1s;transition-duration:.1s}.psv-notification{position:absolute;z-index:100;bottom:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0 2em;opacity:0;-webkit-transition-property:opacity,bottom;transition-property:opacity,bottom;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-duration:.2s;transition-duration:.2s}.psv-notification-content{max-width:50em;background-color:rgba(61,61,61,.8);border-radius:4px;padding:.5em 1em;font:14px sans-serif;color:#fff}.psv-notification--visible{opacity:100;bottom:80px}.psv-overlay{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;z-index:110;top:0;left:0;bottom:0;right:0;background:radial-gradient(#fff 0,#fdfdfd 16%,#fbfbfb 33%,#f8f8f8 49%,#efefef 66%,#dfdfdf 82%,#bfbfbf 100%);opacity:.8}.psv-overlay-image{margin-bottom:4vh}.psv-overlay-image svg{width:50vw}@media screen and (orientation:landscape){.psv-overlay-image svg{width:25vw}}.psv-overlay-text{font:30px sans-serif;text-align:center}.psv-overlay-subtext{font:20px sans-serif;opacity:.8;text-align:center}.psv-markers-list-title{font:24px sans-serif;margin:1em 0;text-align:center;text-shadow:2px 1px #000}.psv-markers-list{list-style:none;margin:0;padding:0;overflow:hidden}.psv-markers-list-item{clear:both;min-height:20px;padding:.5em 1em;cursor:pointer;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out}.psv-markers-list-item::before{content:'';position:absolute;top:0;left:0;height:100%;width:10px;margin-left:-10px}.psv-markers-list-item:nth-child(odd),.psv-markers-list-item:nth-child(odd)::before{background:rgba(255,255,255,.1)}.psv-markers-list-item:nth-child(even),.psv-markers-list-item:nth-child(even)::before{background:0 0}.psv-markers-list-item:hover{-webkit-transform:translateX(10px);transform:translateX(10px);-webkit-transition:-webkit-transform .1s ease-in-out;transition:-webkit-transform .1s ease-in-out;transition:transform .1s ease-in-out;transition:transform .1s ease-in-out,-webkit-transform .1s ease-in-out}.psv-markers-list-image{float:left;width:20px}.psv-markers-list-name{margin:0;padding:0}.psv-markers-list-image+.psv-markers-list-name{padding-left:calc(20px + .5em)}.psv-autorotate-button{width:25px;height:25px;padding:7.5px}.psv-zoom-button{cursor:default;width:128px}.psv-zoom-button-minus,.psv-zoom-button-plus{float:left;position:relative;cursor:pointer;width:16px;height:16px}.psv-zoom-button-minus .psv-button-svg,.psv-zoom-button-plus .psv-button-svg{position:relative;top:20%}.psv-zoom-button-range{float:left;padding:9.5px 8px}.psv-zoom-button-line{position:relative;cursor:pointer;width:80px;height:1px;background:rgba(255,255,255,.7);-webkit-transition:all .3s ease;transition:all .3s ease}.psv-zoom-button-handle{position:absolute;border-radius:50%;top:-3px;width:7px;height:7px;background:rgba(255,255,255,.7);-webkit-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.psv-zoom-button:not(.psv-button--disabled):hover .psv-zoom-button-line{-webkit-box-shadow:0 0 2px rgba(255,255,255,.7);box-shadow:0 0 2px rgba(255,255,255,.7)}.psv-zoom-button:not(.psv-button--disabled):hover .psv-zoom-button-handle{-webkit-transform:scale(1.3);transform:scale(1.3)}@media (max-width:600px){.psv-zoom-button{width:auto;padding:0}.psv-zoom-button-range{display:none}.psv-zoom-button-minus,.psv-zoom-button-plus{width:20px;height:20px;padding:10px}.psv-zoom-button-minus .psv-button-svg,.psv-zoom-button-plus .psv-button-svg{top:0}}@media (max-width:600px){.psv-is-touch .psv-zoom-button{display:none}} |