diff --git a/package-lock.json b/package-lock.json index c7b2f49b3..7dc42d04c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -869,11 +869,6 @@ "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz", "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==" }, - "@fancyapps/ui": { - "version": "4.0.31", - "resolved": "https://registry.npmjs.org/@fancyapps/ui/-/ui-4.0.31.tgz", - "integrity": "sha512-D7+PMIloxSOFJyY+lXcNlVDhmssOmDT6PT5fqQUIiws2hT7PH29r0EKZxERmACSQpm6qrFkP7rSguzXWvRJduQ==" - }, "@kyleshockey/object-assign-deep": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/@kyleshockey/object-assign-deep/-/object-assign-deep-0.4.2.tgz", diff --git a/package.json b/package.json index b04acfff6..7748f3de3 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "@babel/plugin-transform-runtime": "7.9.6", "@babel/preset-env": "7.9.6", "@babel/runtime": "7.9.6", - "@fancyapps/ui": "4.0.31", "@primer/octicons": "9.6.0", "axios": "0.21.1", "babel-loader": "8.1.0", diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index 8f48dd8b7..2a15aa6d0 100755 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -36,736 +36,6 @@ img { transform: scale3d(0.8, 0.8, 0.8); } } -.carousel { - position:relative; - box-sizing:border-box -} -.carousel *, -.carousel *:before, -.carousel *:after { - box-sizing:inherit -} -.carousel.is-draggable { - cursor:move; - cursor:grab -} -.carousel.is-dragging { - cursor:move; - cursor:grabbing -} -.carousel__viewport { - position:relative; - overflow:hidden; - max-width:100%; - max-height:100% -} -.carousel__track { - display:flex -} -.carousel__slide { - flex:0 0 auto; - width:var(--carousel-slide-width, 60%); - max-width:100%; - padding:1rem; - position:relative; - overflow-x:hidden; - overflow-y:auto; - overscroll-behavior:contain -} -.has-dots { - margin-bottom:calc(0.5rem + 22px) -} -.carousel__dots { - margin:0 auto; - padding:0; - position:absolute; - top:calc(100% + 0.5rem); - left:0; - right:0; - display:flex; - justify-content:center; - list-style:none; - user-select:none -} -.carousel__dots .carousel__dot { - margin:0; - padding:0; - display:block; - position:relative; - width:22px; - height:22px; - cursor:pointer -} -.carousel__dots .carousel__dot:after { - content:""; - width:8px; - height:8px; - border-radius:50%; - position:absolute; - top:50%; - left:50%; - transform:translate(-50%, -50%); - background-color:currentColor; - opacity:.25; - transition:opacity .15s ease-in-out -} -.carousel__dots .carousel__dot.is-selected:after { - opacity:1 -} -.carousel__button { - width:var(--carousel-button-width, 48px); - height:var(--carousel-button-height, 48px); - padding:0; - border:0; - display:flex; - justify-content:center; - align-items:center; - pointer-events:all; - cursor:pointer; - color:var(--carousel-button-color, currentColor); - background:var(--carousel-button-bg, transparent); - border-radius:var(--carousel-button-border-radius, 50%); - box-shadow:var(--carousel-button-shadow, none); - transition:opacity .15s ease -} -.carousel__button.is-prev, -.carousel__button.is-next { - position:absolute; - top:50%; - transform:translateY(-50%) -} -.carousel__button.is-prev { - left:10px -} -.carousel__button.is-next { - right:10px -} -.carousel__button[disabled] { - cursor:default; - opacity:.3 -} -.carousel__button svg { - width:var(--carousel-button-svg-width, 50%); - height:var(--carousel-button-svg-height, 50%); - fill:none; - stroke:currentColor; - stroke-width:var(--carousel-button-svg-stroke-width, 1.5); - stroke-linejoin:bevel; - stroke-linecap:round; - filter:var(--carousel-button-svg-filter, none); - pointer-events:none -} -html.with-fancybox { - scroll-behavior:auto -} -body.compensate-for-scrollbar { - overflow:hidden !important; - touch-action:none -} -.fancybox__container { - position:fixed; - top:0; - left:0; - bottom:0; - right:0; - direction:ltr; - margin:0; - padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); - box-sizing:border-box; - display:flex; - flex-direction:column; - color:var(--fancybox-color, #fff); - -webkit-tap-highlight-color:rgba(0,0,0,0); - overflow:hidden; - z-index:1050; - outline:none; - transform-origin:top left; - --carousel-button-width: 48px; - --carousel-button-height: 48px; - --carousel-button-svg-width: 24px; - --carousel-button-svg-height: 24px; - --carousel-button-svg-stroke-width: 2.5; - --carousel-button-svg-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4)) -} -.fancybox__container *, -.fancybox__container *::before, -.fancybox__container *::after { - box-sizing:inherit -} -.fancybox__container :focus { - outline:none -} -body:not(.is-using-mouse) .fancybox__container :focus { - box-shadow:0 0 0 1px #fff,0 0 0 2px var(--fancybox-accent-color, rgba(1, 210, 232, 0.94)) -} -@media all and (min-width: 1024px) { - .fancybox__container { - --carousel-button-width:48px; - --carousel-button-height:48px; - --carousel-button-svg-width:27px; - --carousel-button-svg-height:27px - } -} -.fancybox__backdrop { - position:absolute; - top:0; - right:0; - bottom:0; - left:0; - z-index:-1; - background:var(--fancybox-bg, rgba(24, 24, 27, 0.92)) -} -.fancybox__carousel { - position:relative; - flex:1 1 auto; - min-height:0; - height:100%; - z-index:10 -} -.fancybox__carousel.has-dots { - margin-bottom:calc(0.5rem + 22px) -} -.fancybox__viewport { - position:relative; - width:100%; - height:100%; - overflow:visible; - cursor:default -} -.fancybox__track { - display:flex; - height:100% -} -.fancybox__slide { - flex:0 0 auto; - width:100%; - max-width:100%; - margin:0; - padding:48px 8px 8px 8px; - position:relative; - overscroll-behavior:contain; - display:flex; - flex-direction:column; - outline:0; - overflow:auto; - --carousel-button-width: 36px; - --carousel-button-height: 36px; - --carousel-button-svg-width: 22px; - --carousel-button-svg-height: 22px -} -.fancybox__slide::before, -.fancybox__slide::after { - content:""; - flex:0 0 0; - margin:auto -} -@media all and (min-width: 1024px) { - .fancybox__slide { - padding:64px 100px - } -} -.fancybox__content { - margin:0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); - padding:36px; - color:var(--fancybox-content-color, #374151); - background:var(--fancybox-content-bg, #fff); - position:relative; - align-self:center; - display:flex; - flex-direction:column; - z-index:20 -} -.fancybox__content :focus:not(.carousel__button.is-close) { - outline:thin dotted; - box-shadow:none -} -.fancybox__caption { - align-self:center; - max-width:100%; - margin:0; - padding:1rem 0 0 0; - line-height:1.375; - color:var(--fancybox-color, currentColor); - visibility:visible; - cursor:auto; - flex-shrink:0; - overflow-wrap:anywhere -} -.is-loading .fancybox__caption { - visibility:hidden -} -.fancybox__container>.carousel__dots { - top:100%; - color:var(--fancybox-color, #fff) -} -.fancybox__nav .carousel__button { - z-index:40 -} -.fancybox__nav .carousel__button.is-next { - right:8px -} -@media all and (min-width: 1024px) { - .fancybox__nav .carousel__button.is-next { - right:40px - } -} -.fancybox__nav .carousel__button.is-prev { - left:8px -} -@media all and (min-width: 1024px) { - .fancybox__nav .carousel__button.is-prev { - left:40px - } -} -.carousel__button.is-close { - position:absolute; - top:8px; - right:8px; - top:calc(env(safe-area-inset-top, 0px) + 8px); - right:calc(env(safe-area-inset-right, 0px) + 8px); - z-index:40 -} -@media all and (min-width: 1024px) { - .carousel__button.is-close { - right:40px - } -} -.fancybox__content>.carousel__button.is-close { - position:absolute; - top:-40px; - right:0; - color:var(--fancybox-color, #fff) -} -.fancybox__no-click, -.fancybox__no-click button { - pointer-events:none -} -.fancybox__spinner { - position:absolute; - top:50%; - left:50%; - transform:translate(-50%, -50%); - width:50px; - height:50px; - color:var(--fancybox-color, currentColor) -} -.fancybox__slide .fancybox__spinner { - cursor:pointer; - z-index:1053 -} -.fancybox__spinner svg { - animation:fancybox-rotate 2s linear infinite; - transform-origin:center center; - position:absolute; - top:0; - right:0; - bottom:0; - left:0; - margin:auto; - width:100%; - height:100% -} -.fancybox__spinner svg circle { - fill:none; - stroke-width:2.75; - stroke-miterlimit:10; - stroke-dasharray:1,200; - stroke-dashoffset:0; - animation:fancybox-dash 1.5s ease-in-out infinite; - stroke-linecap:round; - stroke:currentColor -} -@keyframes fancybox-rotate { - 100% { - transform:rotate(360deg) - } -} -@keyframes fancybox-dash { - 0% { - stroke-dasharray:1,200; - stroke-dashoffset:0 - } - 50% { - stroke-dasharray:89,200; - stroke-dashoffset:-35px - } - 100% { - stroke-dasharray:89,200; - stroke-dashoffset:-124px - } -} -.fancybox__backdrop, -.fancybox__caption, -.fancybox__nav, -.carousel__dots, -.carousel__button.is-close { - opacity:var(--fancybox-opacity, 1) -} -.fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop, -.fancybox__container.is-animated[aria-hidden=false] .fancybox__caption, -.fancybox__container.is-animated[aria-hidden=false] .fancybox__nav, -.fancybox__container.is-animated[aria-hidden=false] .carousel__dots, -.fancybox__container.is-animated[aria-hidden=false] .carousel__button.is-close { - animation:.15s ease backwards fancybox-fadeIn -} -.fancybox__container.is-animated.is-closing .fancybox__backdrop, -.fancybox__container.is-animated.is-closing .fancybox__caption, -.fancybox__container.is-animated.is-closing .fancybox__nav, -.fancybox__container.is-animated.is-closing .carousel__dots, -.fancybox__container.is-animated.is-closing .carousel__button.is-close { - animation:.15s ease both fancybox-fadeOut -} -.fancybox-fadeIn { - animation:.15s ease both fancybox-fadeIn -} -.fancybox-fadeOut { - animation:.1s ease both fancybox-fadeOut -} -.fancybox-zoomInUp { - animation:.2s ease both fancybox-zoomInUp -} -.fancybox-zoomOutDown { - animation:.15s ease both fancybox-zoomOutDown -} -.fancybox-throwOutUp { - animation:.15s ease both fancybox-throwOutUp -} -.fancybox-throwOutDown { - animation:.15s ease both fancybox-throwOutDown -} -@keyframes fancybox-fadeIn { - from { - opacity:0 - } - to { - opacity:1 - } -} -@keyframes fancybox-fadeOut { - to { - opacity:0 - } -} -@keyframes fancybox-zoomInUp { - from { - transform:scale(0.97) translate3d(0, 16px, 0); - opacity:0 - } - to { - transform:scale(1) translate3d(0, 0, 0); - opacity:1 - } -} -@keyframes fancybox-zoomOutDown { - to { - transform:scale(0.97) translate3d(0, 16px, 0); - opacity:0 - } -} -@keyframes fancybox-throwOutUp { - to { - transform:translate3d(0, -30%, 0); - opacity:0 - } -} -@keyframes fancybox-throwOutDown { - to { - transform:translate3d(0, 30%, 0); - opacity:0 - } -} -.fancybox__carousel .carousel__slide { - scrollbar-width:thin; - scrollbar-color:#ccc rgba(255,255,255,.1) -} -.fancybox__carousel .carousel__slide::-webkit-scrollbar { - width:8px; - height:8px -} -.fancybox__carousel .carousel__slide::-webkit-scrollbar-track { - background-color:rgba(255,255,255,.1) -} -.fancybox__carousel .carousel__slide::-webkit-scrollbar-thumb { - background-color:#ccc; - border-radius:2px; - box-shadow:inset 0 0 4px rgba(0,0,0,.2) -} -.fancybox__carousel.is-draggable .fancybox__slide, -.fancybox__carousel.is-draggable .fancybox__slide .fancybox__content { - cursor:move; - cursor:grab -} -.fancybox__carousel.is-dragging .fancybox__slide, -.fancybox__carousel.is-dragging .fancybox__slide .fancybox__content { - cursor:move; - cursor:grabbing -} -.fancybox__carousel .fancybox__slide .fancybox__content { - cursor:auto -} -.fancybox__carousel .fancybox__slide.can-zoom_in .fancybox__content { - cursor:zoom-in -} -.fancybox__carousel .fancybox__slide.can-zoom_out .fancybox__content { - cursor:zoom-out -} -.fancybox__carousel .fancybox__slide.is-draggable .fancybox__content { - cursor:move; - cursor:grab -} -.fancybox__carousel .fancybox__slide.is-dragging .fancybox__content { - cursor:move; - cursor:grabbing -} -.fancybox__image { - transform-origin:0 0; - user-select:none; - transition:none -} -.has-image .fancybox__content { - padding:0; - background:rgba(0,0,0,0); - min-height:1px -} -.is-closing .has-image .fancybox__content { - overflow:visible -} -.has-image[data-image-fit=contain] { - overflow:visible; - touch-action:none -} -.has-image[data-image-fit=contain] .fancybox__content { - flex-direction:row; - flex-wrap:wrap -} -.has-image[data-image-fit=contain] .fancybox__image { - max-width:100%; - max-height:100%; - object-fit:contain -} -.has-image[data-image-fit=contain-w] { - overflow-x:hidden; - overflow-y:auto -} -.has-image[data-image-fit=contain-w] .fancybox__content { - min-height:auto -} -.has-image[data-image-fit=contain-w] .fancybox__image { - max-width:100%; - height:auto -} -.has-image[data-image-fit=cover] { - overflow:visible; - touch-action:none -} -.has-image[data-image-fit=cover] .fancybox__content { - width:100%; - height:100% -} -.has-image[data-image-fit=cover] .fancybox__image { - width:100%; - height:100%; - object-fit:cover -} -.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content, -.fancybox__carousel .fancybox__slide.has-map .fancybox__content, -.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content, -.fancybox__carousel .fancybox__slide.has-video .fancybox__content, -.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content { - max-width:100%; - flex-shrink:1; - min-height:1px; - overflow:visible -} -.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content, -.fancybox__carousel .fancybox__slide.has-map .fancybox__content, -.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content { - width:100%; - height:80% -} -.fancybox__carousel .fancybox__slide.has-video .fancybox__content, -.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content { - width:960px; - height:540px; - max-width:100%; - max-height:100% -} -.fancybox__carousel .fancybox__slide.has-map .fancybox__content, -.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content, -.fancybox__carousel .fancybox__slide.has-video .fancybox__content, -.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content { - padding:0; - background:rgba(24,24,27,.9); - color:#fff -} -.fancybox__carousel .fancybox__slide.has-map .fancybox__content { - background:#e5e3df -} -.fancybox__html5video, -.fancybox__iframe { - border:0; - display:block; - height:100%; - width:100%; - background:rgba(0,0,0,0) -} -.fancybox-placeholder { - position:absolute; - width:1px; - height:1px; - padding:0; - margin:-1px; - overflow:hidden; - clip:rect(0, 0, 0, 0); - white-space:nowrap; - border-width:0 -} -.fancybox__thumbs { - flex:0 0 auto; - position:relative; - padding:0px 3px; - opacity:var(--fancybox-opacity, 1) -} -.fancybox__container.is-animated[aria-hidden=false] .fancybox__thumbs { - animation:.15s ease-in backwards fancybox-fadeIn -} -.fancybox__container.is-animated.is-closing .fancybox__thumbs { - opacity:0 -} -.fancybox__thumbs .carousel__slide { - flex:0 0 auto; - width:var(--fancybox-thumbs-width, 96px); - margin:0; - padding:8px 3px; - box-sizing:content-box; - display:flex; - align-items:center; - justify-content:center; - overflow:visible; - cursor:pointer -} -.fancybox__thumbs .carousel__slide .fancybox__thumb::after { - content:""; - position:absolute; - top:0; - left:0; - right:0; - bottom:0; - border-width:5px; - border-style:solid; - border-color:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96)); - opacity:0; - transition:opacity .15s ease; - border-radius:var(--fancybox-thumbs-border-radius, 4px) -} -.fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after { - opacity:.92 -} -.fancybox__thumbs .carousel__slide>* { - pointer-events:none; - user-select:none -} -.fancybox__thumb { - position:relative; - width:100%; - padding-top:calc(100%/(var(--fancybox-thumbs-ratio, 1.5))); - background-size:cover; - background-position:center center; - background-color:rgba(255,255,255,.1); - background-repeat:no-repeat; - border-radius:var(--fancybox-thumbs-border-radius, 4px) -} -.fancybox__toolbar { - position:absolute; - top:0; - right:0; - left:0; - z-index:20; - background:linear-gradient(to top, hsla(0deg, 0%, 0%, 0) 0%, hsla(0deg, 0%, 0%, 0.006) 8.1%, hsla(0deg, 0%, 0%, 0.021) 15.5%, hsla(0deg, 0%, 0%, 0.046) 22.5%, hsla(0deg, 0%, 0%, 0.077) 29%, hsla(0deg, 0%, 0%, 0.114) 35.3%, hsla(0deg, 0%, 0%, 0.155) 41.2%, hsla(0deg, 0%, 0%, 0.198) 47.1%, hsla(0deg, 0%, 0%, 0.242) 52.9%, hsla(0deg, 0%, 0%, 0.285) 58.8%, hsla(0deg, 0%, 0%, 0.326) 64.7%, hsla(0deg, 0%, 0%, 0.363) 71%, hsla(0deg, 0%, 0%, 0.394) 77.5%, hsla(0deg, 0%, 0%, 0.419) 84.5%, hsla(0deg, 0%, 0%, 0.434) 91.9%, hsla(0deg, 0%, 0%, 0.44) 100%); - padding:0; - touch-action:none; - display:flex; - justify-content:space-between; - --carousel-button-svg-width: 20px; - --carousel-button-svg-height: 20px; - opacity:var(--fancybox-opacity, 1); - text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.4)) -} -@media all and (min-width: 1024px) { - .fancybox__toolbar { - padding:8px - } -} -.fancybox__container.is-animated[aria-hidden=false] .fancybox__toolbar { - animation:.15s ease-in backwards fancybox-fadeIn -} -.fancybox__container.is-animated.is-closing .fancybox__toolbar { - opacity:0 -} -.fancybox__toolbar__items { - display:flex -} -.fancybox__toolbar__items--left { - margin-right:auto -} -.fancybox__toolbar__items--center { - position:absolute; - left:50%; - transform:translateX(-50%) -} -.fancybox__toolbar__items--right { - margin-left:auto -} -@media(max-width: 640px) { - .fancybox__toolbar__items--center:not(:last-child) { - display:none - } -} -.fancybox__counter { - min-width:72px; - padding:0 10px; - line-height:var(--carousel-button-height, 48px); - text-align:center; - font-size:17px; - font-variant-numeric:tabular-nums; - -webkit-font-smoothing:subpixel-antialiased -} -.fancybox__progress { - background:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96)); - height:3px; - left:0; - position:absolute; - right:0; - top:0; - transform:scaleX(0); - transform-origin:0; - transition-property:transform; - transition-timing-function:linear; - z-index:30; - user-select:none -} -.fancybox__container:fullscreen::backdrop { - opacity:0 -} -.fancybox__button--fullscreen g:nth-child(2) { - display:none -} -.fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(1) { - display:none -} -.fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(2) { - display:block -} -.fancybox__button--slideshow g:nth-child(2) { - display:none -} -.fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(1) { - display:none -} -.fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(2) { - display:block -} -
{{ERROR}}
"),this.setContent(t,i,{suffix:"error"})}showLoading(t){t.state="loading",t.$el.classList.add("is-loading");let e=t.$el.querySelector(".fancybox__spinner");e||(e=document.createElement("div"),e.classList.add("fancybox__spinner"),e.innerHTML=this.option("template.spinner"),e.addEventListener("click",(()=>{this.Carousel.Panzoom.velocity||this.close()})),t.$el.prepend(e))}hideLoading(t){const e=t.$el&&t.$el.querySelector(".fancybox__spinner");e&&(e.remove(),t.$el.classList.remove("is-loading")),"loading"===t.state&&(this.trigger("load",t),t.state="ready")}next(){const t=this.Carousel;t&&t.pages.length>1&&t.slideNext()}prev(){const t=this.Carousel;t&&t.pages.length>1&&t.slidePrev()}jumpTo(...t){this.Carousel&&this.Carousel.slideTo(...t)}isClosing(){return["closing","customClosing","destroy"].includes(this.state)}isTopmost(){return R.getInstance().id==this.id}close(t){if(t&&t.preventDefault(),this.isClosing())return;if(!1===this.trigger("shouldClose",t))return;if(this.state="closing",this.Carousel.Panzoom.destroy(),this.detachEvents(),this.trigger("closing",t),"destroy"===this.state)return;this.$container.setAttribute("aria-hidden","true"),this.$container.classList.add("is-closing");const e=this.getSlide();if(this.Carousel.slides.forEach((t=>{t.$content&&t.index!==e.index&&this.Carousel.trigger("removeSlide",t)})),"closing"===this.state){const t=void 0===e.hideClass?this.option("hideClass"):e.hideClass;this.animateCSS(e.$content,t,(()=>{this.destroy()}),!0)}}destroy(){if("destroy"===this.state)return;this.state="destroy",this.trigger("destroy");const t=this.option("placeFocusBack")?this.option("triggerTarget",this.getSlide().$trigger):null;this.Carousel.destroy(),this.detachPlugins(),this.Carousel=null,this.options={},this.events={},this.$container.remove(),this.$container=this.$backdrop=this.$carousel=null,t&&w(t),I.delete(this.id);const e=R.getInstance();e?e.focus():(document.documentElement.classList.remove("with-fancybox"),document.body.classList.remove("is-using-mouse"),this.revealScrollbar())}static show(t,e={}){return new R(t,e)}static fromEvent(t,e={}){if(t.defaultPrevented)return;if(t.button&&0!==t.button)return;if(t.ctrlKey||t.metaKey||t.shiftKey)return;const i=t.composedPath()[0];let s,o,n,a=i;if((a.matches("[data-fancybox-trigger]")||(a=a.closest("[data-fancybox-trigger]")))&&(e.triggerTarget=a,s=a&&a.dataset&&a.dataset.fancyboxTrigger),s){const t=document.querySelectorAll(`[data-fancybox="${s}"]`),e=parseInt(a.dataset.fancyboxIndex,10)||0;a=t.length?t[e]:a}Array.from(R.openers.keys()).reverse().some((e=>{n=a||i;let s=!1;try{n instanceof Element&&("string"==typeof e||e instanceof String)&&(s=n.matches(e)||(n=n.closest(e)))}catch(t){}return!!s&&(t.preventDefault(),o=e,!0)}));let r=!1;if(o){e.event=t,e.target=n,n.origTarget=i,r=R.fromOpener(o,e);const s=R.getInstance();s&&"ready"===s.state&&t.detail&&document.body.classList.add("is-using-mouse")}return r}static fromOpener(t,i={}){let s=[],o=i.startIndex||0,n=i.target||null;const a=void 0!==(i=e({},i,R.openers.get(t))).groupAll&&i.groupAll,r=void 0===i.groupAttr?"data-fancybox":i.groupAttr,h=r&&n?n.getAttribute(`${r}`):"";if(!n||h||a){const e=i.root||(n?n.getRootNode():document.body);s=[].slice.call(e.querySelectorAll(t))}if(n&&!a&&(s=h?s.filter((t=>t.getAttribute(`${r}`)===h)):[n]),!s.length)return!1;const l=R.getInstance();return!(l&&s.indexOf(l.options.$trigger)>-1)&&(o=n?s.indexOf(n):o,s=s.map((function(t){const e=["false","0","no","null","undefined"],i=["true","1","yes"],s=Object.assign({},t.dataset),o={};for(let[t,n]of Object.entries(s))if("fancybox"!==t)if("width"===t||"height"===t)o[`_${t}`]=n;else if("string"==typeof n||n instanceof String)if(e.indexOf(n)>-1)o[t]=!1;else if(i.indexOf(o[t])>-1)o[t]=!0;else try{o[t]=JSON.parse(n)}catch(e){o[t]=n}else o[t]=n;return t instanceof Element&&(o.$trigger=t),o})),new R(s,e({},i,{startIndex:o,$trigger:n})))}static bind(t,e={}){function i(){document.body.addEventListener("click",R.fromEvent,!1)}v&&(R.openers.size||(/complete|interactive|loaded/.test(document.readyState)?i():document.addEventListener("DOMContentLoaded",i)),R.openers.set(t,e))}static unbind(t){R.openers.delete(t),R.openers.size||R.destroy()}static destroy(){let t;for(;t=R.getInstance();)t.destroy();R.openers=new Map,document.body.removeEventListener("click",R.fromEvent,!1)}static getInstance(t){if(t)return I.get(t);return Array.from(I.values()).reverse().find((t=>!t.isClosing()&&t))||null}static close(t=!0,e){if(t)for(const t of I.values())t.close(e);else{const t=R.getInstance();t&&t.close(e)}}static next(){const t=R.getInstance();t&&t.next()}static prev(){const t=R.getInstance();t&&t.prev()}}R.version="4.0.31",R.defaults=M,R.openers=new Map,R.Plugins=O,R.bind("[data-fancybox]");for(const[t,e]of Object.entries(R.Plugins||{}))"function"==typeof e.create&&e.create(R);export{y as Carousel,R as Fancybox,d as Panzoom}; diff --git a/web_src/less/index.less b/web_src/less/index.less index d3ff37781..fbc9a80fd 100644 --- a/web_src/less/index.less +++ b/web_src/less/index.less @@ -1,6 +1,6 @@ @import "~highlight.js/styles/github.css"; @import "./vendor/gitGraph.css"; -// @import "./vendor/fancyapp.less"; +@import "./vendor/fancyapp.less"; // @import "~/remixicon/fonts/remixicon.css"; @import "_svg"; @import "_tribute"; diff --git a/web_src/less/vendor/fancyapp.less b/web_src/less/vendor/fancyapp.less index bbc8924a4..b4558441e 100644 --- a/web_src/less/vendor/fancyapp.less +++ b/web_src/less/vendor/fancyapp.less @@ -1,730 +1,753 @@ .carousel { - position:relative; - box-sizing:border-box - } - .carousel *, - .carousel *:before, - .carousel *:after { - box-sizing:inherit - } - .carousel.is-draggable { - cursor:move; - cursor:grab - } - .carousel.is-dragging { - cursor:move; - cursor:grabbing - } - .carousel__viewport { - position:relative; - overflow:hidden; - max-width:100%; - max-height:100% - } - .carousel__track { - display:flex - } - .carousel__slide { - flex:0 0 auto; - width:var(--carousel-slide-width, 60%); - max-width:100%; - padding:1rem; - position:relative; - overflow-x:hidden; - overflow-y:auto; - overscroll-behavior:contain - } - .has-dots { - margin-bottom:calc(0.5rem + 22px) - } - .carousel__dots { - margin:0 auto; - padding:0; - position:absolute; - top:calc(100% + 0.5rem); - left:0; - right:0; - display:flex; - justify-content:center; - list-style:none; - user-select:none - } - .carousel__dots .carousel__dot { - margin:0; - padding:0; - display:block; - position:relative; - width:22px; - height:22px; - cursor:pointer - } - .carousel__dots .carousel__dot:after { - content:""; - width:8px; - height:8px; - border-radius:50%; - position:absolute; - top:50%; - left:50%; - transform:translate(-50%, -50%); - background-color:currentColor; - opacity:.25; - transition:opacity .15s ease-in-out - } - .carousel__dots .carousel__dot.is-selected:after { - opacity:1 - } - .carousel__button { - width:var(--carousel-button-width, 48px); - height:var(--carousel-button-height, 48px); - padding:0; - border:0; - display:flex; - justify-content:center; - align-items:center; - pointer-events:all; - cursor:pointer; - color:var(--carousel-button-color, currentColor); - background:var(--carousel-button-bg, transparent); - border-radius:var(--carousel-button-border-radius, 50%); - box-shadow:var(--carousel-button-shadow, none); - transition:opacity .15s ease - } - .carousel__button.is-prev, - .carousel__button.is-next { - position:absolute; - top:50%; - transform:translateY(-50%) - } - .carousel__button.is-prev { - left:10px - } - .carousel__button.is-next { - right:10px - } - .carousel__button[disabled] { - cursor:default; - opacity:.3 - } - .carousel__button svg { - width:var(--carousel-button-svg-width, 50%); - height:var(--carousel-button-svg-height, 50%); - fill:none; - stroke:currentColor; - stroke-width:var(--carousel-button-svg-stroke-width, 1.5); - stroke-linejoin:bevel; - stroke-linecap:round; - filter:var(--carousel-button-svg-filter, none); - pointer-events:none - } - html.with-fancybox { - scroll-behavior:auto - } - body.compensate-for-scrollbar { - overflow:hidden !important; - touch-action:none - } - .fancybox__container { - position:fixed; - top:0; - left:0; - bottom:0; - right:0; - direction:ltr; - margin:0; - padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); - box-sizing:border-box; - display:flex; - flex-direction:column; - color:var(--fancybox-color, #fff); - -webkit-tap-highlight-color:rgba(0,0,0,0); - overflow:hidden; - z-index:1050; - outline:none; - transform-origin:top left; + position: relative; + box-sizing: border-box; +} +.carousel *, +.carousel *:before, +.carousel *:after { + box-sizing: inherit; +} +.carousel.is-draggable { + cursor: move; + cursor: grab; +} +.carousel.is-dragging { + cursor: move; + cursor: grabbing; +} +.carousel__viewport { + position: relative; + overflow: hidden; + max-width: 100%; + max-height: 100%; +} +.carousel__track { + display: flex; +} +.carousel__slide { + flex: 0 0 auto; + width: var(--carousel-slide-width, 60%); + max-width: 100%; + padding: 1rem; + position: relative; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; +} +.has-dots { + margin-bottom: calc(0.5rem + 22px); +} +.carousel__dots { + margin: 0 auto; + padding: 0; + position: absolute; + top: calc(100% + 0.5rem); + left: 0; + right: 0; + display: flex; + justify-content: center; + list-style: none; + user-select: none; +} +.carousel__dots .carousel__dot { + margin: 0; + padding: 0; + display: block; + position: relative; + width: 22px; + height: 22px; + cursor: pointer; +} +.carousel__dots .carousel__dot:after { + content: ""; + width: 8px; + height: 8px; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: currentColor; + opacity: 0.25; + transition: opacity 0.15s ease-in-out; +} +.carousel__dots .carousel__dot.is-selected:after { + opacity: 1; +} +.carousel__button { + width: var(--carousel-button-width, 48px); + height: var(--carousel-button-height, 48px); + padding: 0; + border: 0; + display: flex; + justify-content: center; + align-items: center; + pointer-events: all; + cursor: pointer; + color: var(--carousel-button-color, currentColor); + background: var(--carousel-button-bg, transparent); + border-radius: var(--carousel-button-border-radius, 50%); + box-shadow: var(--carousel-button-shadow, none); + transition: opacity 0.15s ease; +} +.carousel__button.is-prev, +.carousel__button.is-next { + position: absolute; + top: 50%; + transform: translateY(-50%); +} +.carousel__button.is-prev { + left: 10px; +} +.carousel__button.is-next { + right: 10px; +} +.carousel__button[disabled] { + cursor: default; + opacity: 0.3; +} +.carousel__button svg { + width: var(--carousel-button-svg-width, 50%); + height: var(--carousel-button-svg-height, 50%); + fill: none; + stroke: currentColor; + stroke-width: var(--carousel-button-svg-stroke-width, 1.5); + stroke-linejoin: bevel; + stroke-linecap: round; + filter: var(--carousel-button-svg-filter, none); + pointer-events: none; +} +html.with-fancybox { + scroll-behavior: auto; +} +body.compensate-for-scrollbar { + overflow: hidden !important; + touch-action: none; +} +.fancybox__container { + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + direction: ltr; + margin: 0; + padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) + env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); + box-sizing: border-box; + display: flex; + flex-direction: column; + color: var(--fancybox-color, #fff); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + overflow: hidden; + z-index: 1050; + outline: none; + transform-origin: top left; --carousel-button-width: 48px; --carousel-button-height: 48px; --carousel-button-svg-width: 24px; --carousel-button-svg-height: 24px; --carousel-button-svg-stroke-width: 2.5; --carousel-button-svg-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4)); - } - .fancybox__container *, - .fancybox__container *::before, - .fancybox__container *::after { - box-sizing:inherit - } - .fancybox__container :focus { - outline:none - } - body:not(.is-using-mouse) .fancybox__container :focus { - box-shadow:0 0 0 1px #fff,0 0 0 2px var(--fancybox-accent-color, rgba(1, 210, 232, 0.94)) - } - @media all and (min-width: 1024px) { +} +.fancybox__container *, +.fancybox__container *::before, +.fancybox__container *::after { + box-sizing: inherit; +} +.fancybox__container :focus { + outline: none; +} +body:not(.is-using-mouse) .fancybox__container :focus { + box-shadow: 0 0 0 1px #fff, + 0 0 0 2px var(--fancybox-accent-color, rgba(1, 210, 232, 0.94)); +} +@media all and (min-width: 1024px) { .fancybox__container { - --carousel-button-width:48px; - --carousel-button-height:48px; - --carousel-button-svg-width:27px; - --carousel-button-svg-height:27px + --carousel-button-width: 48px; + --carousel-button-height: 48px; + --carousel-button-svg-width: 27px; + --carousel-button-svg-height: 27px; } - } - .fancybox__backdrop { - position:absolute; - top:0; - right:0; - bottom:0; - left:0; - z-index:-1; - background:var(--fancybox-bg, rgba(24, 24, 27, 0.92)) - } - .fancybox__carousel { - position:relative; - flex:1 1 auto; - min-height:0; - height:100%; - z-index:10 - } - .fancybox__carousel.has-dots { - margin-bottom:calc(0.5rem + 22px) - } - .fancybox__viewport { - position:relative; - width:100%; - height:100%; - overflow:visible; - cursor:default - } - .fancybox__track { - display:flex; - height:100% - } - .fancybox__slide { - flex:0 0 auto; - width:100%; - max-width:100%; - margin:0; - padding:48px 8px 8px 8px; - position:relative; - overscroll-behavior:contain; - display:flex; - flex-direction:column; - outline:0; - overflow:auto; +} +.fancybox__backdrop { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + background: var(--fancybox-bg, rgba(24, 24, 27, 0.92)); +} +.fancybox__carousel { + position: relative; + flex: 1 1 auto; + min-height: 0; + height: 100%; + z-index: 10; +} +.fancybox__carousel.has-dots { + margin-bottom: calc(0.5rem + 22px); +} +.fancybox__viewport { + position: relative; + width: 100%; + height: 100%; + overflow: visible; + cursor: default; +} +.fancybox__track { + display: flex; + height: 100%; +} +.fancybox__slide { + flex: 0 0 auto; + width: 100%; + max-width: 100%; + margin: 0; + padding: 48px 8px 8px 8px; + position: relative; + overscroll-behavior: contain; + display: flex; + flex-direction: column; + outline: 0; + overflow: auto; --carousel-button-width: 36px; --carousel-button-height: 36px; --carousel-button-svg-width: 22px; - --carousel-button-svg-height: 22px - } - .fancybox__slide::before, - .fancybox__slide::after { - content:""; - flex:0 0 0; - margin:auto - } - @media all and (min-width: 1024px) { + --carousel-button-svg-height: 22px; +} +.fancybox__slide::before, +.fancybox__slide::after { + content: ""; + flex: 0 0 0; + margin: auto; +} +@media all and (min-width: 1024px) { .fancybox__slide { - padding:64px 100px + padding: 64px 100px; } - } - .fancybox__content { - margin:0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); - padding:36px; - color:var(--fancybox-content-color, #374151); - background:var(--fancybox-content-bg, #fff); - position:relative; - align-self:center; - display:flex; - flex-direction:column; - z-index:20 - } - .fancybox__content :focus:not(.carousel__button.is-close) { - outline:thin dotted; - box-shadow:none - } - .fancybox__caption { - align-self:center; - max-width:100%; - margin:0; - padding:1rem 0 0 0; - line-height:1.375; - color:var(--fancybox-color, currentColor); - visibility:visible; - cursor:auto; - flex-shrink:0; - overflow-wrap:anywhere - } - .is-loading .fancybox__caption { - visibility:hidden - } - .fancybox__container>.carousel__dots { - top:100%; - color:var(--fancybox-color, #fff) - } - .fancybox__nav .carousel__button { - z-index:40 - } - .fancybox__nav .carousel__button.is-next { - right:8px - } - @media all and (min-width: 1024px) { +} +.fancybox__content { + margin: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); + padding: 36px; + color: var(--fancybox-content-color, #374151); + background: var(--fancybox-content-bg, #fff); + position: relative; + align-self: center; + display: flex; + flex-direction: column; + z-index: 20; +} +.fancybox__content :focus:not(.carousel__button.is-close) { + outline: thin dotted; + box-shadow: none; +} +.fancybox__caption { + align-self: center; + max-width: 100%; + margin: 0; + padding: 1rem 0 0 0; + line-height: 1.375; + color: var(--fancybox-color, currentColor); + visibility: visible; + cursor: auto; + flex-shrink: 0; + overflow-wrap: anywhere; +} +.is-loading .fancybox__caption { + visibility: hidden; +} +.fancybox__container > .carousel__dots { + top: 100%; + color: var(--fancybox-color, #fff); +} +.fancybox__nav .carousel__button { + z-index: 40; +} +.fancybox__nav .carousel__button.is-next { + right: 8px; +} +@media all and (min-width: 1024px) { .fancybox__nav .carousel__button.is-next { - right:40px + right: 40px; } - } - .fancybox__nav .carousel__button.is-prev { - left:8px - } - @media all and (min-width: 1024px) { +} +.fancybox__nav .carousel__button.is-prev { + left: 8px; +} +@media all and (min-width: 1024px) { .fancybox__nav .carousel__button.is-prev { - left:40px + left: 40px; } - } - .carousel__button.is-close { - position:absolute; - top:8px; - right:8px; - top:calc(env(safe-area-inset-top, 0px) + 8px); - right:calc(env(safe-area-inset-right, 0px) + 8px); - z-index:40 - } - @media all and (min-width: 1024px) { +} +.carousel__button.is-close { + position: absolute; + top: 8px; + right: 8px; + top: calc(env(safe-area-inset-top, 0px) + 8px); + right: calc(env(safe-area-inset-right, 0px) + 8px); + z-index: 40; +} +@media all and (min-width: 1024px) { .carousel__button.is-close { - right:40px + right: 40px; } - } - .fancybox__content>.carousel__button.is-close { - position:absolute; - top:-40px; - right:0; - color:var(--fancybox-color, #fff) - } - .fancybox__no-click, - .fancybox__no-click button { - pointer-events:none - } - .fancybox__spinner { - position:absolute; - top:50%; - left:50%; - transform:translate(-50%, -50%); - width:50px; - height:50px; - color:var(--fancybox-color, currentColor) - } - .fancybox__slide .fancybox__spinner { - cursor:pointer; - z-index:1053 - } - .fancybox__spinner svg { - animation:fancybox-rotate 2s linear infinite; - transform-origin:center center; - position:absolute; - top:0; - right:0; - bottom:0; - left:0; - margin:auto; - width:100%; - height:100% - } - .fancybox__spinner svg circle { - fill:none; - stroke-width:2.75; - stroke-miterlimit:10; - stroke-dasharray:1,200; - stroke-dashoffset:0; - animation:fancybox-dash 1.5s ease-in-out infinite; - stroke-linecap:round; - stroke:currentColor - } - @keyframes fancybox-rotate { +} +.fancybox__content > .carousel__button.is-close { + position: absolute; + top: -40px; + right: 0; + color: var(--fancybox-color, #fff); +} +.fancybox__no-click, +.fancybox__no-click button { + pointer-events: none; +} +.fancybox__spinner { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 50px; + height: 50px; + color: var(--fancybox-color, currentColor); +} +.fancybox__slide .fancybox__spinner { + cursor: pointer; + z-index: 1053; +} +.fancybox__spinner svg { + animation: fancybox-rotate 2s linear infinite; + transform-origin: center center; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + width: 100%; + height: 100%; +} +.fancybox__spinner svg circle { + fill: none; + stroke-width: 2.75; + stroke-miterlimit: 10; + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: fancybox-dash 1.5s ease-in-out infinite; + stroke-linecap: round; + stroke: currentColor; +} +@keyframes fancybox-rotate { 100% { - transform:rotate(360deg) + transform: rotate(360deg); } - } - @keyframes fancybox-dash { +} +@keyframes fancybox-dash { 0% { - stroke-dasharray:1,200; - stroke-dashoffset:0 + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; } 50% { - stroke-dasharray:89,200; - stroke-dashoffset:-35px + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; } 100% { - stroke-dasharray:89,200; - stroke-dashoffset:-124px + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; } - } - .fancybox__backdrop, - .fancybox__caption, - .fancybox__nav, - .carousel__dots, - .carousel__button.is-close { - opacity:var(--fancybox-opacity, 1) - } - .fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop, - .fancybox__container.is-animated[aria-hidden=false] .fancybox__caption, - .fancybox__container.is-animated[aria-hidden=false] .fancybox__nav, - .fancybox__container.is-animated[aria-hidden=false] .carousel__dots, - .fancybox__container.is-animated[aria-hidden=false] .carousel__button.is-close { - animation:.15s ease backwards fancybox-fadeIn - } - .fancybox__container.is-animated.is-closing .fancybox__backdrop, - .fancybox__container.is-animated.is-closing .fancybox__caption, - .fancybox__container.is-animated.is-closing .fancybox__nav, - .fancybox__container.is-animated.is-closing .carousel__dots, - .fancybox__container.is-animated.is-closing .carousel__button.is-close { - animation:.15s ease both fancybox-fadeOut - } - .fancybox-fadeIn { - animation:.15s ease both fancybox-fadeIn - } - .fancybox-fadeOut { - animation:.1s ease both fancybox-fadeOut - } - .fancybox-zoomInUp { - animation:.2s ease both fancybox-zoomInUp - } - .fancybox-zoomOutDown { - animation:.15s ease both fancybox-zoomOutDown - } - .fancybox-throwOutUp { - animation:.15s ease both fancybox-throwOutUp - } - .fancybox-throwOutDown { - animation:.15s ease both fancybox-throwOutDown - } - @keyframes fancybox-fadeIn { +} +.fancybox__backdrop, +.fancybox__caption, +.fancybox__nav, +.carousel__dots, +.carousel__button.is-close { + opacity: var(--fancybox-opacity, 1); +} +.fancybox__container.is-animated[aria-hidden="false"] .fancybox__backdrop, +.fancybox__container.is-animated[aria-hidden="false"] .fancybox__caption, +.fancybox__container.is-animated[aria-hidden="false"] .fancybox__nav, +.fancybox__container.is-animated[aria-hidden="false"] .carousel__dots, +.fancybox__container.is-animated[aria-hidden="false"] + .carousel__button.is-close { + animation: 0.15s ease backwards fancybox-fadeIn; +} +.fancybox__container.is-animated.is-closing .fancybox__backdrop, +.fancybox__container.is-animated.is-closing .fancybox__caption, +.fancybox__container.is-animated.is-closing .fancybox__nav, +.fancybox__container.is-animated.is-closing .carousel__dots, +.fancybox__container.is-animated.is-closing .carousel__button.is-close { + animation: 0.15s ease both fancybox-fadeOut; +} +.fancybox-fadeIn { + animation: 0.15s ease both fancybox-fadeIn; +} +.fancybox-fadeOut { + animation: 0.1s ease both fancybox-fadeOut; +} +.fancybox-zoomInUp { + animation: 0.2s ease both fancybox-zoomInUp; +} +.fancybox-zoomOutDown { + animation: 0.15s ease both fancybox-zoomOutDown; +} +.fancybox-throwOutUp { + animation: 0.15s ease both fancybox-throwOutUp; +} +.fancybox-throwOutDown { + animation: 0.15s ease both fancybox-throwOutDown; +} +@keyframes fancybox-fadeIn { from { - opacity:0 + opacity: 0; } to { - opacity:1 + opacity: 1; } - } - @keyframes fancybox-fadeOut { +} +@keyframes fancybox-fadeOut { to { - opacity:0 + opacity: 0; } - } - @keyframes fancybox-zoomInUp { +} +@keyframes fancybox-zoomInUp { from { - transform:scale(0.97) translate3d(0, 16px, 0); - opacity:0 + transform: scale(0.97) translate3d(0, 16px, 0); + opacity: 0; } to { - transform:scale(1) translate3d(0, 0, 0); - opacity:1 + transform: scale(1) translate3d(0, 0, 0); + opacity: 1; } - } - @keyframes fancybox-zoomOutDown { +} +@keyframes fancybox-zoomOutDown { to { - transform:scale(0.97) translate3d(0, 16px, 0); - opacity:0 + transform: scale(0.97) translate3d(0, 16px, 0); + opacity: 0; } - } - @keyframes fancybox-throwOutUp { +} +@keyframes fancybox-throwOutUp { to { - transform:translate3d(0, -30%, 0); - opacity:0 + transform: translate3d(0, -30%, 0); + opacity: 0; } - } - @keyframes fancybox-throwOutDown { +} +@keyframes fancybox-throwOutDown { to { - transform:translate3d(0, 30%, 0); - opacity:0 + transform: translate3d(0, 30%, 0); + opacity: 0; } - } - .fancybox__carousel .carousel__slide { - scrollbar-width:thin; - scrollbar-color:#ccc rgba(255,255,255,.1) - } - .fancybox__carousel .carousel__slide::-webkit-scrollbar { - width:8px; - height:8px - } - .fancybox__carousel .carousel__slide::-webkit-scrollbar-track { - background-color:rgba(255,255,255,.1) - } - .fancybox__carousel .carousel__slide::-webkit-scrollbar-thumb { - background-color:#ccc; - border-radius:2px; - box-shadow:inset 0 0 4px rgba(0,0,0,.2) - } - .fancybox__carousel.is-draggable .fancybox__slide, - .fancybox__carousel.is-draggable .fancybox__slide .fancybox__content { - cursor:move; - cursor:grab - } - .fancybox__carousel.is-dragging .fancybox__slide, - .fancybox__carousel.is-dragging .fancybox__slide .fancybox__content { - cursor:move; - cursor:grabbing - } - .fancybox__carousel .fancybox__slide .fancybox__content { - cursor:auto - } - .fancybox__carousel .fancybox__slide.can-zoom_in .fancybox__content { - cursor:zoom-in - } - .fancybox__carousel .fancybox__slide.can-zoom_out .fancybox__content { - cursor:zoom-out - } - .fancybox__carousel .fancybox__slide.is-draggable .fancybox__content { - cursor:move; - cursor:grab - } - .fancybox__carousel .fancybox__slide.is-dragging .fancybox__content { - cursor:move; - cursor:grabbing - } - .fancybox__image { - transform-origin:0 0; - user-select:none; - transition:none - } - .has-image .fancybox__content { - padding:0; - background:rgba(0,0,0,0); - min-height:1px - } - .is-closing .has-image .fancybox__content { - overflow:visible - } - .has-image[data-image-fit=contain] { - overflow:visible; - touch-action:none - } - .has-image[data-image-fit=contain] .fancybox__content { - flex-direction:row; - flex-wrap:wrap - } - .has-image[data-image-fit=contain] .fancybox__image { - max-width:100%; - max-height:100%; - object-fit:contain - } - .has-image[data-image-fit=contain-w] { - overflow-x:hidden; - overflow-y:auto - } - .has-image[data-image-fit=contain-w] .fancybox__content { - min-height:auto - } - .has-image[data-image-fit=contain-w] .fancybox__image { - max-width:100%; - height:auto - } - .has-image[data-image-fit=cover] { - overflow:visible; - touch-action:none - } - .has-image[data-image-fit=cover] .fancybox__content { - width:100%; - height:100% - } - .has-image[data-image-fit=cover] .fancybox__image { - width:100%; - height:100%; - object-fit:cover - } - .fancybox__carousel .fancybox__slide.has-iframe .fancybox__content, - .fancybox__carousel .fancybox__slide.has-map .fancybox__content, - .fancybox__carousel .fancybox__slide.has-pdf .fancybox__content, - .fancybox__carousel .fancybox__slide.has-video .fancybox__content, - .fancybox__carousel .fancybox__slide.has-html5video .fancybox__content { - max-width:100%; - flex-shrink:1; - min-height:1px; - overflow:visible - } - .fancybox__carousel .fancybox__slide.has-iframe .fancybox__content, - .fancybox__carousel .fancybox__slide.has-map .fancybox__content, - .fancybox__carousel .fancybox__slide.has-pdf .fancybox__content { - width:100%; - height:80% - } - .fancybox__carousel .fancybox__slide.has-video .fancybox__content, - .fancybox__carousel .fancybox__slide.has-html5video .fancybox__content { - width:960px; - height:540px; - max-width:100%; - max-height:100% - } - .fancybox__carousel .fancybox__slide.has-map .fancybox__content, - .fancybox__carousel .fancybox__slide.has-pdf .fancybox__content, - .fancybox__carousel .fancybox__slide.has-video .fancybox__content, - .fancybox__carousel .fancybox__slide.has-html5video .fancybox__content { - padding:0; - background:rgba(24,24,27,.9); - color:#fff - } - .fancybox__carousel .fancybox__slide.has-map .fancybox__content { - background:#e5e3df - } - .fancybox__html5video, - .fancybox__iframe { - border:0; - display:block; - height:100%; - width:100%; - background:rgba(0,0,0,0) - } - .fancybox-placeholder { - position:absolute; - width:1px; - height:1px; - padding:0; - margin:-1px; - overflow:hidden; - clip:rect(0, 0, 0, 0); - white-space:nowrap; - border-width:0 - } - .fancybox__thumbs { - flex:0 0 auto; - position:relative; - padding:0px 3px; - opacity:var(--fancybox-opacity, 1) - } - .fancybox__container.is-animated[aria-hidden=false] .fancybox__thumbs { - animation:.15s ease-in backwards fancybox-fadeIn - } - .fancybox__container.is-animated.is-closing .fancybox__thumbs { - opacity:0 - } - .fancybox__thumbs .carousel__slide { - flex:0 0 auto; - width:var(--fancybox-thumbs-width, 96px); - margin:0; - padding:8px 3px; - box-sizing:content-box; - display:flex; - align-items:center; - justify-content:center; - overflow:visible; - cursor:pointer - } - .fancybox__thumbs .carousel__slide .fancybox__thumb::after { - content:""; - position:absolute; - top:0; - left:0; - right:0; - bottom:0; - border-width:5px; - border-style:solid; - border-color:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96)); - opacity:0; - transition:opacity .15s ease; - border-radius:var(--fancybox-thumbs-border-radius, 4px) - } - .fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after { - opacity:.92 - } - .fancybox__thumbs .carousel__slide>* { - pointer-events:none; - user-select:none - } - .fancybox__thumb { - position:relative; - width:100%; - padding-top:calc(100%/(var(--fancybox-thumbs-ratio, 1.5))); - background-size:cover; - background-position:center center; - background-color:rgba(255,255,255,.1); - background-repeat:no-repeat; - border-radius:var(--fancybox-thumbs-border-radius, 4px) - } - .fancybox__toolbar { - position:absolute; - top:0; - right:0; - left:0; - z-index:20; - background:linear-gradient(to top, hsla(0deg, 0%, 0%, 0) 0%, hsla(0deg, 0%, 0%, 0.006) 8.1%, hsla(0deg, 0%, 0%, 0.021) 15.5%, hsla(0deg, 0%, 0%, 0.046) 22.5%, hsla(0deg, 0%, 0%, 0.077) 29%, hsla(0deg, 0%, 0%, 0.114) 35.3%, hsla(0deg, 0%, 0%, 0.155) 41.2%, hsla(0deg, 0%, 0%, 0.198) 47.1%, hsla(0deg, 0%, 0%, 0.242) 52.9%, hsla(0deg, 0%, 0%, 0.285) 58.8%, hsla(0deg, 0%, 0%, 0.326) 64.7%, hsla(0deg, 0%, 0%, 0.363) 71%, hsla(0deg, 0%, 0%, 0.394) 77.5%, hsla(0deg, 0%, 0%, 0.419) 84.5%, hsla(0deg, 0%, 0%, 0.434) 91.9%, hsla(0deg, 0%, 0%, 0.44) 100%); - padding:0; - touch-action:none; - display:flex; - justify-content:space-between; +} +.fancybox__carousel .carousel__slide { + scrollbar-width: thin; + scrollbar-color: #ccc rgba(255, 255, 255, 0.1); +} +.fancybox__carousel .carousel__slide::-webkit-scrollbar { + width: 8px; + height: 8px; +} +.fancybox__carousel .carousel__slide::-webkit-scrollbar-track { + background-color: rgba(255, 255, 255, 0.1); +} +.fancybox__carousel .carousel__slide::-webkit-scrollbar-thumb { + background-color: #ccc; + border-radius: 2px; + box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); +} +.fancybox__carousel.is-draggable .fancybox__slide, +.fancybox__carousel.is-draggable .fancybox__slide .fancybox__content { + cursor: move; + cursor: grab; +} +.fancybox__carousel.is-dragging .fancybox__slide, +.fancybox__carousel.is-dragging .fancybox__slide .fancybox__content { + cursor: move; + cursor: grabbing; +} +.fancybox__carousel .fancybox__slide .fancybox__content { + cursor: auto; +} +.fancybox__carousel .fancybox__slide.can-zoom_in .fancybox__content { + cursor: zoom-in; +} +.fancybox__carousel .fancybox__slide.can-zoom_out .fancybox__content { + cursor: zoom-out; +} +.fancybox__carousel .fancybox__slide.is-draggable .fancybox__content { + cursor: move; + cursor: grab; +} +.fancybox__carousel .fancybox__slide.is-dragging .fancybox__content { + cursor: move; + cursor: grabbing; +} +.fancybox__image { + transform-origin: 0 0; + user-select: none; + transition: none; +} +.has-image .fancybox__content { + padding: 0; + background: rgba(0, 0, 0, 0); + min-height: 1px; +} +.is-closing .has-image .fancybox__content { + overflow: visible; +} +.has-image[data-image-fit="contain"] { + overflow: visible; + touch-action: none; +} +.has-image[data-image-fit="contain"] .fancybox__content { + flex-direction: row; + flex-wrap: wrap; +} +.has-image[data-image-fit="contain"] .fancybox__image { + max-width: 100%; + max-height: 100%; + object-fit: contain; +} +.has-image[data-image-fit="contain-w"] { + overflow-x: hidden; + overflow-y: auto; +} +.has-image[data-image-fit="contain-w"] .fancybox__content { + min-height: auto; +} +.has-image[data-image-fit="contain-w"] .fancybox__image { + max-width: 100%; + height: auto; +} +.has-image[data-image-fit="cover"] { + overflow: visible; + touch-action: none; +} +.has-image[data-image-fit="cover"] .fancybox__content { + width: 100%; + height: 100%; +} +.has-image[data-image-fit="cover"] .fancybox__image { + width: 100%; + height: 100%; + object-fit: cover; +} +.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content, +.fancybox__carousel .fancybox__slide.has-map .fancybox__content, +.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content, +.fancybox__carousel .fancybox__slide.has-video .fancybox__content, +.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content { + max-width: 100%; + flex-shrink: 1; + min-height: 1px; + overflow: visible; +} +.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content, +.fancybox__carousel .fancybox__slide.has-map .fancybox__content, +.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content { + width: 100%; + height: 80%; +} +.fancybox__carousel .fancybox__slide.has-video .fancybox__content, +.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content { + width: 960px; + height: 540px; + max-width: 100%; + max-height: 100%; +} +.fancybox__carousel .fancybox__slide.has-map .fancybox__content, +.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content, +.fancybox__carousel .fancybox__slide.has-video .fancybox__content, +.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content { + padding: 0; + background: rgba(24, 24, 27, 0.9); + color: #fff; +} +.fancybox__carousel .fancybox__slide.has-map .fancybox__content { + background: #e5e3df; +} +.fancybox__html5video, +.fancybox__iframe { + border: 0; + display: block; + height: 100%; + width: 100%; + background: rgba(0, 0, 0, 0); +} +.fancybox-placeholder { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} +.fancybox__thumbs { + flex: 0 0 auto; + position: relative; + padding: 0px 3px; + opacity: var(--fancybox-opacity, 1); +} +.fancybox__container.is-animated[aria-hidden="false"] .fancybox__thumbs { + animation: 0.15s ease-in backwards fancybox-fadeIn; +} +.fancybox__container.is-animated.is-closing .fancybox__thumbs { + opacity: 0; +} +.fancybox__thumbs .carousel__slide { + flex: 0 0 auto; + width: var(--fancybox-thumbs-width, 96px); + margin: 0; + padding: 8px 3px; + box-sizing: content-box; + display: flex; + align-items: center; + justify-content: center; + overflow: visible; + cursor: pointer; +} +.fancybox__thumbs .carousel__slide .fancybox__thumb::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-width: 5px; + border-style: solid; + border-color: var(--fancybox-accent-color, rgba(34, 213, 233, 0.96)); + opacity: 0; + transition: opacity 0.15s ease; + border-radius: var(--fancybox-thumbs-border-radius, 4px); +} +.fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after { + opacity: 0.92; +} +.fancybox__thumbs .carousel__slide > * { + pointer-events: none; + user-select: none; +} +.fancybox__thumb { + position: relative; + width: 100%; + padding-top: calc(100% / (var(--fancybox-thumbs-ratio, 1.5))); + background-size: cover; + background-position: center center; + background-color: rgba(255, 255, 255, 0.1); + background-repeat: no-repeat; + border-radius: var(--fancybox-thumbs-border-radius, 4px); +} +.fancybox__toolbar { + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 20; + background: linear-gradient( + to top, + hsla(0deg, 0%, 0%, 0) 0%, + hsla(0deg, 0%, 0%, 0.006) 8.1%, + hsla(0deg, 0%, 0%, 0.021) 15.5%, + hsla(0deg, 0%, 0%, 0.046) 22.5%, + hsla(0deg, 0%, 0%, 0.077) 29%, + hsla(0deg, 0%, 0%, 0.114) 35.3%, + hsla(0deg, 0%, 0%, 0.155) 41.2%, + hsla(0deg, 0%, 0%, 0.198) 47.1%, + hsla(0deg, 0%, 0%, 0.242) 52.9%, + hsla(0deg, 0%, 0%, 0.285) 58.8%, + hsla(0deg, 0%, 0%, 0.326) 64.7%, + hsla(0deg, 0%, 0%, 0.363) 71%, + hsla(0deg, 0%, 0%, 0.394) 77.5%, + hsla(0deg, 0%, 0%, 0.419) 84.5%, + hsla(0deg, 0%, 0%, 0.434) 91.9%, + hsla(0deg, 0%, 0%, 0.44) 100% + ); + padding: 0; + touch-action: none; + display: flex; + justify-content: space-between; --carousel-button-svg-width: 20px; --carousel-button-svg-height: 20px; - opacity:var(--fancybox-opacity, 1); - text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.4)) - } - @media all and (min-width: 1024px) { + opacity: var(--fancybox-opacity, 1); + text-shadow: var( + --fancybox-toolbar-text-shadow, + 1px 1px 1px rgba(0, 0, 0, 0.4) + ); +} +@media all and (min-width: 1024px) { .fancybox__toolbar { - padding:8px + padding: 8px; } - } - .fancybox__container.is-animated[aria-hidden=false] .fancybox__toolbar { - animation:.15s ease-in backwards fancybox-fadeIn - } - .fancybox__container.is-animated.is-closing .fancybox__toolbar { - opacity:0 - } - .fancybox__toolbar__items { - display:flex - } - .fancybox__toolbar__items--left { - margin-right:auto - } - .fancybox__toolbar__items--center { - position:absolute; - left:50%; - transform:translateX(-50%) - } - .fancybox__toolbar__items--right { - margin-left:auto - } - @media(max-width: 640px) { +} +.fancybox__container.is-animated[aria-hidden="false"] .fancybox__toolbar { + animation: 0.15s ease-in backwards fancybox-fadeIn; +} +.fancybox__container.is-animated.is-closing .fancybox__toolbar { + opacity: 0; +} +.fancybox__toolbar__items { + display: flex; +} +.fancybox__toolbar__items--left { + margin-right: auto; +} +.fancybox__toolbar__items--center { + position: absolute; + left: 50%; + transform: translateX(-50%); +} +.fancybox__toolbar__items--right { + margin-left: auto; +} +@media (max-width: 640px) { .fancybox__toolbar__items--center:not(:last-child) { - display:none + display: none; } - } - .fancybox__counter { - min-width:72px; - padding:0 10px; - line-height:var(--carousel-button-height, 48px); - text-align:center; - font-size:17px; - font-variant-numeric:tabular-nums; - -webkit-font-smoothing:subpixel-antialiased - } - .fancybox__progress { - background:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96)); - height:3px; - left:0; - position:absolute; - right:0; - top:0; - transform:scaleX(0); - transform-origin:0; - transition-property:transform; - transition-timing-function:linear; - z-index:30; - user-select:none - } - .fancybox__container:fullscreen::backdrop { - opacity:0 - } - .fancybox__button--fullscreen g:nth-child(2) { - display:none - } - .fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(1) { - display:none - } - .fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(2) { - display:block - } - .fancybox__button--slideshow g:nth-child(2) { - display:none - } - .fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(1) { - display:none - } - .fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(2) { - display:block - } - \ No newline at end of file +} +.fancybox__counter { + min-width: 72px; + padding: 0 10px; + line-height: var(--carousel-button-height, 48px); + text-align: center; + font-size: 17px; + font-variant-numeric: tabular-nums; + -webkit-font-smoothing: subpixel-antialiased; +} +.fancybox__progress { + background: var(--fancybox-accent-color, rgba(34, 213, 233, 0.96)); + height: 3px; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: scaleX(0); + transform-origin: 0; + transition-property: transform; + transition-timing-function: linear; + z-index: 30; + user-select: none; +} +.fancybox__container:fullscreen::backdrop { + opacity: 0; +} +.fancybox__button--fullscreen g:nth-child(2) { + display: none; +} +.fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(1) { + display: none; +} +.fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(2) { + display: block; +} +.fancybox__button--slideshow g:nth-child(2) { + display: none; +} +.fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(1) { + display: none; +} +.fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(2) { + display: block; +}