PluginProbe
Depicter — Popup & Slider Builder / 1.3.8
Depicter — Popup & Slider Builder v1.3.8
4.8.1 trunk 1.0.0 1.1.0 1.1.2 1.1.4 1.1.6 1.1.7 1.1.8 1.1.9 1.2.0 1.3.0 1.3.1 1.3.2 1.3.3 1.3.5 1.3.8 1.5.0 1.5.1 1.5.2 1.5.5 1.6.0 1.6.1 1.6.2 1.7.0 All 76 releases
depicter / resources / styles / player / depicter.css

depicter.css in Depicter — Popup & Slider Builder 1.3.8, at resources/styles/player/depicter.css

13 lines 16.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .depicter-view-container{position:relative}.depicter-view{position:relative;height:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-depicter-user-select:none;user-select:none;touch-action:manipulation}.depicter-sections{will-change:transform}.depicter-auto-height .depicter-view{transition:height 300ms}.depicter-stack-view .depicter-sections{transform-style:preserve-3d}.depicter-transform-view{perspective:2000px}.depicter-transform-view .depicter-sections{transform-style:preserve-3d}.depicter-mask-view .depicter-section-mask{overflow:hidden;position:absolute;pointer-events:none}.depicter-mask-view .depicter-section-mask .depicter-section{position:relative}.depicter-cube-view{perspective:2000px}.depicter-cube-view .depicter-sections{perspective:2000px;transform-style:preserve-3d;perspective-origin:center;height:100%}.depicter-cube-view .depicter-section{backface-visibility:hidden}.depicter-section{position:absolute;overflow:hidden}.depicter-bg-container{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.depicter-section{display:flex;flex-direction:column;justify-content:center;align-items:center}.depicter-section .depicter-bg-container>img{width:100%;height:100%;opacity:0;transition:opacity 300ms}.depicter-section.depicter-ready .depicter-bg-container>img{opacity:1}.depicter-section.depicter-section-hidden,.depicter-section.depicter-section-hidden *{visibility:hidden !important}.depicter-section>a.depicter-section-link:not(.depicter-layer):not(.depicter-not-section-link):first-child{position:absolute;top:0;left:0;display:block;width:100%;height:100%;z-index:2;overflow:hidden;text-indent:-100em}.depicter-section>a.depicter-section-link:not(.depicter-layer):not(.depicter-not-section-link):first-child.depicter-over-all{z-index:1000}.depicter-layers-container{position:relative;display:flex;width:100%;height:100%;align-items:center;flex-direction:row;pointer-events:none}.depicter-fade-layers .depicter-layer-frame:not(.depicter-interactive-anim):not(.depicter-static){transition:opacity 300ms,visibility 300ms;visibility:hidden;opacity:0}.depicter-fade-layers .depicter-active .depicter-layer-frame:not(.depicter-interactive-anim):not(.depicter-static){opacity:1;visibility:visible}.depicter-layers-wrapper{position:relative;padding:0 0;box-sizing:content-box;margin:0 auto;height:100%;width:100%}.depicter-layers-fold{position:relative;height:100%;pointer-events:none}.depicter-layers-fold>*{pointer-events:all}.depicter-content-first .depicter-layers-container{position:relative}.depicter-content-first .depicter-layers-container,.depicter-content-first .depicter-layers-wrapper,.depicter-content-first .depicter-layers-fold{height:auto}.depicter-content-first .depicter-bg-container{position:absolute;height:100%;top:0}.depicter-layer-frame{visibility:visible}.depicter-layer-frame.depicter-pos-absolute{position:absolute}.depicter-layer-frame .depicter-mask-frame{overflow:hidden}.depicter-layer-frame>a{text-decoration:none;color:inherit}.depicter-relative-width *:not(.depicter-relative-width .depicter-layer *),.depicter-relative-width .depicter-relative-width *:not(.depicter-relative-width .depicter-relative-width .depicter-layer *){width:100%}.depicter-relative-height *:not(.depicter-relative-height .depicter-layer *),.depicter-relative-height .depicter-relative-height *:not(.depicter-relative-height .depicter-relative-height .depicter-layer *){height:100%}.depicter-layer.depicter-has-action{cursor:pointer}.depicter-layer.depicter-layer-hidden,.depicter-layer.depicter-is-hidden,.depicter-layer-frame.depicter-layer-hidden,.depicter-layer-frame.depicter-is-hidden{visibility:hidden !important}.depicter-layer.depicter-layer-hidden *,.depicter-layer.depicter-is-hidden *,.depicter-layer-frame.depicter-layer-hidden *,.depicter-layer-frame.depicter-is-hidden *{visibility:hidden !important}.depicter-no-wrap{white-space:nowrap}.depicter-fixed-layers{pointer-events:none}.depicter-fixed-layers .depicter-layer{pointer-events:auto}.depicter-float-width *{width:100%}.depicter-float-width .depicter-layer>*{width:auto}.depicter-float-height *{height:100%}.depicter-float-height .depicter-layer>*{height:auto}.depicter-image-layer .depicter-layer{width:100%;height:100%}.depicter-image-layer .depicter-layer:not(.depicter-is-hidden) img{opacity:0;visibility:hidden;transition:opacity 150ms ease-out}.depicter-image-layer .depicter-layer:not(.depicter-is-hidden) img.depicter-loaded{opacity:1;visibility:visible}.depicter-image-layer picture{overflow:hidden}.depicter-image-layer img{position:relative;min-width:100%}.depicter-shape-layer svg{width:100%;height:100%}.depicter-video-layer iframe{border:none}.depicter-video-layer iframe,.depicter-video-layer img{width:100%;height:100%}.depicter-video-layer img{position:absolute;top:0;z-index:2;object-fit:cover;transition:opacity 400ms,visibility 400ms}.depicter-video-layer .depicter-layer{overflow:hidden}.depicter-video-layer .depicter-video-player{z-index:1}.depicter-video-layer .depicter-video-btn{transition:opacity 400ms,visibility 400ms}.depicter-video-layer video{display:block;width:100%;height:100%}.depicter-video-layer .depicter-playing img,.depicter-video-layer .depicter-playing .depicter-video-btn{opacity:0;visibility:hidden}.depicter-hotspot-layer{cursor:pointer}.depicter-hotspot-layer .depicter-hotspot-point{position:relative;transform:translateX(-50%) translateY(-50%)}.depicter-hotspot-layer .depicter-point-center{width:20px;height:20px;background:#dedede;border-radius:50%}.depicter-hotspot-tooltip{position:absolute;top:0;left:0;z-index:200;pointer-events:none;visibility:hidden;opacity:0;transition:opacity 900ms cubic-bezier(0.19, 1, 0.22, 1),transform 900ms cubic-bezier(0.19, 1, 0.22, 1),visibility 900ms cubic-bezier(0.19, 1, 0.22, 1)}.depicter-hotspot-tooltip .depicter-tooltip-cont{position:relative;padding:10px;background:rgba(240,240,240,0.88);text-shadow:0 1px 0px white;pointer-events:auto}.depicter-hotspot-tooltip::after{content:'';position:absolute;top:15px;left:-12px;display:block;transform-origin:center -15px;width:0;height:0;border-bottom:10px solid rgba(240,240,240,0.88);border-left:12px solid transparent;border-right:12px solid transparent}.depicter-hotspot-tooltip.depicter-align-right{transform:translateX(50px)}.depicter-hotspot-tooltip.depicter-align-right::after{transform:rotate(-90deg)}.depicter-hotspot-tooltip.depicter-align-right .depicter-tooltip-cont{transform:translateY(-50%) translateX(25px)}.depicter-hotspot-tooltip.depicter-align-left{transform:translateX(-50px)}.depicter-hotspot-tooltip.depicter-align-left::after{transform:rotate(90deg)}.depicter-hotspot-tooltip.depicter-align-left .depicter-tooltip-cont{transform:translateY(-50%) translateX(-100%) translateX(-25px)}.depicter-hotspot-tooltip.depicter-align-bottom{transform:translateY(50px)}.depicter-hotspot-tooltip.depicter-align-bottom .depicter-tooltip-cont{transform:translateX(-50%) translateY(25px)}.depicter-hotspot-tooltip.depicter-align-top{transform:translateY(-50px)}.depicter-hotspot-tooltip.depicter-align-top::after{transform:rotate(180deg)}.depicter-hotspot-tooltip.depicter-align-top .depicter-tooltip-cont{transform:translateX(-50%) translateY(-100%) translateY(-25px)}.depicter-hotspot-tooltip.depicter-tooltip-active{transform:none;opacity:1;visibility:visible}.depicter-hotspot-tooltip.depicter-no-transition{transition:none !important}.depicter-arrow-layer{cursor:pointer}.depicter-arrow-layer .depicter-layer{display:flex;align-items:center;justify-content:center}.depicter-bullet-layer .depicter-layer{display:inline-flex;align-items:center;justify-content:center}.depicter-bullet-layer .depicter-bullet-item{display:inline-block;cursor:pointer}.depicter-bullet-layer .depicter-bullet-item:last-of-type{margin-right:0}.depicter-lineTimer-layer .depicter-layer{overflow:hidden}.depicter-lineTimer-layer .depicter-timer-bar{height:100%;transition:width 200ms}.depicter-scroll-layer{cursor:pointer}.depicter-scroll-layer .depicter-layer{display:flex;align-items:center;justify-content:center}.depicter-playAndPause-layer{cursor:pointer}.depicter-playAndPause-layer .depicter-layer{display:flex;align-items:center;justify-content:center}.depicter-playAndPause-layer svg{display:none}.depicter-playAndPause-layer .depicter-active{display:inline-block}.depicter-button-layer{cursor:pointer}.depicter-button-layer .depicter-layer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.depicter-flex-layer .depicter-layer{display:flex;flex-wrap:wrap;position:relative}.depicter-overlay-layers{position:absolute;top:0;width:100%;height:100%;pointer-events:none;display:flex;align-items:center;justify-content:center;flex-direction:column}.depicter-animation-wrap{visibility:visible}.depicter-video-layer .depicter-video-btn,.depicter-section .depicter-section-video-btn{position:absolute;top:50%;left:50%;margin-left:-23px;margin-top:-23px;width:46px;height:46px;background:#dedede;border-radius:50%;text-align:center;cursor:pointer;z-index:2}.depicter-video-layer .depicter-video-btn::after,.depicter-section .depicter-section-video-btn::after{content:'\25BA';position:relative;top:1px;left:2px;color:#666;line-height:46px}.depicter-section .depicter-section-video-close-btn{position:absolute;width:36px;height:36px;background:#666;color:#dedede;border-radius:50%;text-align:center;cursor:pointer}.depicter-section .depicter-section-video-close-btn::after{content:'\2715';position:relative;top:1px;line-height:36px}.depicter-section .depicter-section-video{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:#000;transition:opacity 400ms,visibility 400ms;visibility:hidden;opacity:0}.depicter-section .depicter-section-video-btn{z-index:101;transition:opacity 400ms,visibility 400ms}.depicter-section .depicter-section-video-close-btn{top:2em;right:2em;z-index:102;transition:opacity 400ms,visibility 400ms;visibility:hidden;opacity:0}.depicter-section.depicter-video-open .depicter-section-video,.depicter-section.depicter-video-open .depicter-section-video-close-btn{visibility:visible;opacity:1}.depicter-section.depicter-video-open .depicter-section-video-btn{opacity:0;visibility:hidden}.depicter-bg-video-container{position:absolute;top:0;width:100%;height:100%;overflow:hidden;z-index:1}.depicter-bg-video-container>video{width:100%;height:100%}.depicter-section>a:not(.depicter-layer):not(.depicter-not-section-link):first-child{position:absolute;top:0;left:0;display:block;width:100%;height:100%;z-index:2;overflow:hidden;text-indent:-100em}.depicter-section>a:not(.depicter-layer):not(.depicter-not-section-link):first-child.depicter-over-all{z-index:1000}@media screen and (min-width: 1025px){.depicter-revert .depicter-hide-on-desktop,.depicter-revert.depicter-hide-on-desktop{position:fixed;opacity:0;visibility:hidden;pointer-events:none;top:-100%;left:-100%}}@media screen and (max-width: 1024px) and (min-width: 769px){.depicter-revert .depicter-hide-on-tablet,.depicter-revert.depicter-hide-on-tablet{position:fixed;opacity:0;visibility:hidden;pointer-events:none;top:-100%;left:-100%}}@media screen and (max-width: 767px){.depicter-revert .depicter-hide-on-mobile,.depicter-revert.depicter-hide-on-mobile{position:fixed;opacity:0;visibility:hidden;pointer-events:none;top:-100%;left:-100%}}.depicter-cursor-grab{cursor:-webkit-grab;cursor:grab}.depicter-cursor-grabbing{cursor:-webkit-grabbing;cursor:grabbing}.depicter-auto-height .depicter-primary-container{height:auto}.depicter-has-mouse-action{cursor:pointer !important;pointer-events:all !important}.depicter-section:not(.depicter-active) .depicter-has-animation-in{display:none}.depicter-dot-flashing{display:inline-flex;align-items:center;justify-content:center}.depicter-dot-flashing span{display:inline-block;width:12px;height:12px;margin-right:9px;border-radius:50%}.depicter-dot-flashing span:last-of-type{margin-right:0}.depicter-dot-flashing.depicter-loading-dark span{background-color:#050a0e}.depicter-dot-flashing.depicter-loading-light span{background-color:#fff}.depicter-dot-flashing span{will-change:opacity;animation:middleDotFlashing 1500ms infinite cubic-bezier(0.5, 0, 0.75, 0)}.depicter-dot-flashing span:first-of-type{animation:firstDotFlashing 1500ms infinite cubic-bezier(0.5, 0, 0.75, 0)}.depicter-dot-flashing span:last-of-type{animation:lastDotFlashing 1500ms infinite cubic-bezier(0.5, 0, 0.75, 0)}@keyframes firstDotFlashing{0%{opacity:1}33.3%{opacity:0.2}66.6%,
2 100%{opacity:1}}@keyframes middleDotFlashing{0%,
3 5%{opacity:1}38.8%{opacity:0.2}72.2%,
4 100%{opacity:1}}@keyframes lastDotFlashing{0%,
5 23.3%{opacity:1}56.6%{opacity:0.2}90%,
6 100%{opacity:1}}.depicter-dot-straight-swing{display:inline-flex;align-items:center;justify-content:center}.depicter-dot-straight-swing span{display:inline-block;width:12px;height:12px;margin-right:0;border-radius:50%}.depicter-dot-straight-swing span:last-of-type{margin-right:0}.depicter-dot-straight-swing.depicter-loading-dark span{background-color:#050a0e}.depicter-dot-straight-swing.depicter-loading-light span{background-color:#fff}.depicter-dot-straight-swing span{will-change:transform}.depicter-dot-straight-swing span:first-of-type{animation:firstDotStraightSwing 1400ms infinite}.depicter-dot-straight-swing span:last-of-type{animation:lastDotStraightSwing 1400ms infinite}@keyframes firstDotStraightSwing{0%{transform:translateX(-9px);animation-timing-function:cubic-bezier(0.5, 0, 0.75, 0)}33.3%{transform:translateX(0);animation-timing-function:linear}62%{transform:translateX(0);animation-timing-function:cubic-bezier(0.25, 1, 0.5, 1)}100%{transform:translateX(-9px)}}@keyframes lastDotStraightSwing{0%{transform:translateX(0);animation-timing-function:linear}33%{transform:translateX(0);animation-timing-function:cubic-bezier(0.25, 1, 0.5, 1)}52%{transform:translateX(9px);animation-timing-function:cubic-bezier(0.5, 0, 0.75, 0)}70%,
7 100%{transform:translateX(0);animation-timing-function:linear}}.depicter-dot-swing{display:inline-flex;align-items:center;justify-content:center}.depicter-dot-swing span{display:inline-block;width:12px;height:12px;margin-right:0;border-radius:50%}.depicter-dot-swing span:last-of-type{margin-right:0}.depicter-dot-swing.depicter-loading-dark span{background-color:#050a0e}.depicter-dot-swing.depicter-loading-light span{background-color:#fff}.depicter-dot-swing span{transform-origin:center -10px;will-change:transform}.depicter-dot-swing span:first-of-type{animation:firstDotSwing 2000ms infinite}.depicter-dot-swing span:last-of-type{animation:lastDotSwing 2000ms infinite}@keyframes firstDotSwing{0%{transform:rotate(45deg);animation-timing-function:cubic-bezier(0.5, 0, 0.75, 0)}23.3%{transform:rotate(0);animation-timing-function:linear}74.1%{transform:rotate(0);animation-timing-function:cubic-bezier(0.25, 1, 0.5, 1)}100%{transform:rotate(45deg)}}@keyframes lastDotSwing{0%{transform:rotate(0);animation-timing-function:linear}23.3%{transform:rotate(0);animation-timing-function:cubic-bezier(0.25, 1, 0.5, 1)}49.1%{transform:rotate(-45deg);animation-timing-function:cubic-bezier(0.5, 0, 0.75, 0)}74.1%,
8 100%{transform:rotate(0);animation-timing-function:linear}}.depicter-dot-replacing{display:inline-flex;align-items:center;justify-content:center}.depicter-dot-replacing span{display:inline-block;width:12px;height:12px;margin-right:9px;border-radius:50%}.depicter-dot-replacing span:last-of-type{margin-right:0}.depicter-dot-replacing.depicter-loading-dark span{background-color:#050a0e}.depicter-dot-replacing.depicter-loading-light span{background-color:#fff}.depicter-dot-replacing span{animation:middleDotReplacing 1500ms infinite cubic-bezier(0.25, 1, 0.5, 1);will-change:transform}.depicter-dot-replacing span:first-of-type{animation:firstDotReplacing 1500ms infinite cubic-bezier(0.76, 0, 0.24, 1)}.depicter-dot-replacing span:last-of-type{animation:lastDotReplacing 1500ms infinite cubic-bezier(0.25, 1, 0.5, 1)}@keyframes firstDotReplacing{from{transform:translateX(0)}to{transform:translateX(40px)}}@keyframes middleDotReplacing{0%,
9 38.8%{transform:translateX(0)}66%,
10 100%{transform:translateX(-20px)}}@keyframes lastDotReplacing{0%,
11 66%{transform:translateX(0)}91.5%,
12 100%{transform:translateX(-20px)}}.depicter-single-svg-loading{max-width:40px;max-height:40px;width:100%}.depicter-single-svg-loading.depicter-small{max-width:20px;max-height:20px}.depicter-loading-symbol{display:inline-flex;align-items:center;justify-content:center}
13