@photo-sphere-viewer/video-plugin/index.css.map

Photo Sphere Viewer plugin to add video controls.

{"version":3,"sources":["/home/runner/work/Photo-Sphere-Viewer/Photo-Sphere-Viewer/packages/video-plugin/src/index.scss","/home/runner/work/Photo-Sphere-Viewer/Photo-Sphere-Viewer/packages/video-plugin/src/_vars.scss","/home/runner/work/Photo-Sphere-Viewer/Photo-Sphere-Viewer/packages/video-plugin/src/../../../core/src/styles/_vars.scss"],"sourcesContent":["@forward 'vars';\n@use 'sass:map';\n@use '../../../core/src/styles/vars' as psv;\n@use 'vars' as video;\n\n.psv-container {\n    --psv-video-plugin-loaded: true;\n}\n\n.psv-video {\n    &-progressbar {\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: video.$progressbar-container;\n        cursor: pointer;\n        z-index: psv.$navbar-zindex - 1;\n\n        @at-root .psv--has-navbar & {\n            bottom: psv.$navbar-height;\n        }\n\n        & > * {\n            position: absolute;\n            left: 0;\n            bottom: 0;\n            width: 100%;\n            height: video.$progressbar-height;\n            transition: height 0.2s linear;\n        }\n\n        &:hover > * {\n            height: video.$progressbar-height-active;\n        }\n\n        &__progress {\n            background-color: video.$progressbar-progress-color;\n        }\n\n        &__buffer {\n            background-color: video.$progressbar-buffer-color;\n        }\n\n        &__handle {\n            display: none;\n            height: video.$progressbar-handle-size !important;\n            width: video.$progressbar-handle-size;\n            border-radius: 50%;\n            margin-bottom: #{- (video.$progressbar-handle-size - video.$progressbar-height-active) * 0.5};\n            margin-left: #{- video.$progressbar-handle-size * 0.5};\n            background: video.$progressbar-handle-color;\n        }\n    }\n\n    &-time {\n        flex: 0 0 auto;\n\n        .psv-caption-content {\n            min-width: 6em;\n            text-align: center;\n        }\n    }\n\n    &-volume {\n        &__container {\n            position: absolute;\n            left: 0;\n            bottom: psv.$navbar-height;\n            padding: psv.$buttons-height 0;\n            width: psv.$navbar-height;\n            height: 0;\n            opacity: 0;\n            background: psv.$navbar-background;\n            transition:\n                opacity 0.2s linear,\n                height 0.3s step-end;\n\n            @at-root .psv--is-touch & {\n                display: none;\n            }\n        }\n\n        &__range {\n            position: relative;\n            height: video.$volume-height;\n        }\n\n        &__progress,\n        &__track {\n            position: absolute;\n            bottom: 0;\n            left: #{(psv.$navbar-height - video.$volume-width) * 0.5};\n            width: video.$volume-width;\n            background: video.$volume-bar-color;\n        }\n\n        &__track {\n            height: 100%;\n            background: video.$volume-track-color;\n        }\n\n        &__handle {\n            position: absolute;\n            left: #{(psv.$navbar-height - video.$volume-width) * 0.5};\n            height: video.$volume-handle-size;\n            width: video.$volume-handle-size;\n            border-radius: 50%;\n            margin-left: #{- (video.$volume-handle-size - video.$volume-width) * 0.5};\n            margin-bottom: #{- video.$volume-handle-size * 0.5};\n            background: video.$volume-handle-color;\n        }\n    }\n\n    &-volume-button {\n        position: relative;\n\n        &:hover .psv-video-volume__container {\n            height: video.$volume-height;\n            opacity: 1;\n            transition-timing-function: linear, step-start;\n            transition-delay: 0.2s;\n        }\n\n        &--0 .psv-button-svg {\n            #lvl1,\n            #lvl2,\n            #lvl3 {\n                fill: none;\n            }\n        }\n\n        &--1 .psv-button-svg {\n            #lvl0,\n            #lvl2,\n            #lvl3 {\n                fill: none;\n            }\n        }\n\n        &--2 .psv-button-svg {\n            #lvl0,\n            #lvl3 {\n                fill: none;\n            }\n        }\n\n        &--3 .psv-button-svg {\n            #lvl0 {\n                fill: none;\n            }\n        }\n    }\n\n    &-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: psv.$overlay-zindex;\n        pointer-events: none;\n    }\n\n    &-bigbutton {\n        display: block;\n        border: none;\n        background: none;\n        padding: 0;\n        color: video.$bigbutton-color;\n        pointer-events: auto;\n        cursor: pointer;\n        opacity: 0;\n        width: 0;\n        transition:\n            opacity 0.2s linear,\n            width 0.3s step-end;\n\n        &--pause {\n            width: map.get(video.$bigbutton-size, portrait);\n            opacity: 1;\n            transition-timing-function: linear, step-start;\n\n            @container psv-container (orientation: landscape) {\n                width: map.get(video.$bigbutton-size, landscape);\n            }\n        }\n\n        svg {\n            width: 100%;\n        }\n    }\n}\n","@use '../../../core/src/styles/vars' as psv;\n\n$progressbar-height: 3px !default;\n$progressbar-height-active: 5px !default;\n$progressbar-container: 20px !default;\n$progressbar-progress-color: psv.$buttons-color !default;\n$progressbar-buffer-color: psv.$buttons-active-background !default;\n$progressbar-handle-size: 9px !default;\n$progressbar-handle-color: white !default;\n\n$volume-height: 80px !default;\n$volume-width: $progressbar-height-active !default;\n$volume-bar-color: $progressbar-progress-color !default;\n$volume-track-color: $progressbar-buffer-color !default;\n$volume-handle-size: $progressbar-handle-size !default;\n$volume-handle-color: $progressbar-handle-color !default;\n\n$bigbutton-size: (\n    portrait: 20vw,\n    landscape: 10vw,\n) !default;\n$bigbutton-color: psv.$buttons-color !default;\n","// *** MAIN ***\n$main-background-stops: #fff 0%,\n    #fdfdfd 16%,\n    #fbfbfb 33%,\n    #f8f8f8 49%,\n    #efefef 66%,\n    #dfdfdf 82%,\n    #bfbfbf 100% !default;\n$main-background: radial-gradient($main-background-stops) !default;\n$element-focus-outline: 2px solid #007cff !default;\n\n// *** LOADER ***\n$loader-bg-color: rgba(61, 61, 61, 0.5) !default;\n$loader-color: rgba(255, 255, 255, 0.7) !default;\n$loader-width: 150px !default;\n$loader-tickness: 10px !default;\n$loader-border: 3px !default;\n$loader-font: 600 16px sans-serif !default;\n\n// *** NAVBAR ***\n$navbar-height: 40px !default;\n$navbar-background: rgba(61, 61, 61, 0.5) !default;\n\n$caption-font: 16px sans-serif !default;\n$caption-text-color: rgba(255, 255, 255, 0.7) !default;\n\n$buttons-height: 20px !default;\n$buttons-padding: (($navbar-height - $buttons-height) * 0.5) !default;\n$buttons-background: transparent !default;\n$buttons-active-background: rgba(255, 255, 255, 0.2) !default;\n$buttons-color: rgba(255, 255, 255, 0.7) !default;\n$buttons-disabled-opacity: 0.5 !default;\n\n$buttons-hover-scale: 1.2 !default;\n$buttons-hover-scale-delay: 200ms !default;\n\n$zoom-range-width: 80px !default;\n$zoom-range-tickness: 1px !default;\n$zoom-range-diameter: 7px !default;\n$zoom-range-media-min-width: 600px !default;\n\n// *** TOOLTIP ***\n$tooltip-background: rgba(61, 61, 61, 0.8) !default;\n$tooltip-animate-offset: 5px !default;\n$tooltip-animate-delay: 100ms !default;\n$tooltip-radius: 4px !default;\n$tooltip-padding: 0.5em 1em !default;\n$tooltip-arrow-size: 7px !default;\n$tooltip-max-width: 200px !default;\n\n$tooltip-text-color: rgb(255, 255, 255) !default;\n$tooltip-font: 14px sans-serif !default;\n$tooltip-text-shadow: 0 1px #000 !default;\n\n$tooltip-shadow-color: rgba(90, 90, 90, 0.7) !default;\n$tooltip-shadow-offset: 3px !default; // the shadow is always at the opposite side of the arrow\n\n// *** PANEL ***\n$panel-background: rgba(10, 10, 10, 0.7) !default;\n$panel-text-color: rgb(220, 220, 220) !default;\n$panel-font: 16px sans-serif !default;\n$panel-width: 400px !default;\n$panel-padding: 1em !default;\n$panel-animate-delay: 100ms !default;\n\n$panel-resizer-width: 9px !default; // must be odd\n$panel-resizer-background: rgba(0, 0, 0, 0.9) !default;\n$panel-resizer-grip-color: #fff !default;\n$panel-resizer-grip-height: 29px !default; // must be odd\n$panel-close-button-size: 32px !default;\n$panel-close-button-background: $panel-resizer-background !default;\n$panel-close-button-color: #fff !default;\n$panel-close-button-animate-delay: 300ms !default;\n\n$panel-title-font: 24px sans-serif !default;\n$panel-title-icon-size: 24px !default;\n$panel-title-margin: 24px !default;\n\n$panel-menu-item-height: 1.5em !default;\n$panel-menu-item-padding: 0.5em 1em !default;\n$panel-menu-item-active-outline: 1px !default;\n$panel-menu-odd-background: rgba(255, 255, 255, 0.1) !default;\n$panel-menu-even-background: transparent !default;\n$panel-menu-hover-background: rgba(255, 255, 255, 0.2) !default;\n\n// *** NOTIFICATION ***\n$notification-position-from: -$navbar-height !default;\n$notification-position-to: $navbar-height * 2 !default;\n$notification-animate-delay: 200ms !default;\n$notification-background: $tooltip-background !default;\n$notification-radius: $tooltip-radius !default;\n$notification-padding: $tooltip-padding !default;\n$notification-font: $tooltip-font !default;\n$notification-text-color: $tooltip-text-color !default;\n\n// *** OVERLAY ***\n$overlay-opacity: 0.8 !default;\n$overlay-icon-color: rgb(48, 48, 48) !default;\n$overlay-title-font: 30px sans-serif !default;\n$overlay-title-color: black !default;\n$overlay-text-font: 20px sans-serif !default;\n$overlay-text-color: rgba(0, 0, 0, 0.8) !default;\n$overlay-image-size: (\n    portrait: 50%,\n    landscape: 33%,\n) !default;\n\n// *** Z-INDEXES ***\n$canvas-zindex: 0 !default;\n$hud-zindex: 10 !default;\n$polygon-marker-zindex: 20 !default;\n$marker-zindex: 30 !default;\n$ui-zindex: 40 !default;\n$tooltip-zindex: 50 !default;\n$loader-zindex: 80 !default;\n$panel-zindex: 90 !default;\n$navbar-zindex: 90 !default;\n$notification-zindex: 100 !default;\n$overlay-zindex: 110 !default;\n"],"mappings":";;;;;;AAKA,CAAA;AACI,6BAAA;;AAIA,CAAA;AACI,YAAA;AACA,QAAA;AACA,UAAA;AACA,SAAA;AACA,UCXgB;ADYhB,UAAA;AACA,WAAA;;AAES,CAAA,gBAAA,CATb;AAUQ,UAAA;;AAGJ,CAbJ,sBAaI,EAAA;AACI,YAAA;AACA,QAAA;AACA,UAAA;AACA,SAAA;AACA,UC1BS;AD2BT,cAAA,OAAA,KAAA;;AAGJ,CAtBJ,qBAsBI,OAAA,EAAA;AACI,UC9BgB;;ADiCpB,CAAA;AACI,oBEPI,KAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;;AFUR,CAAA;AACI,oBEZgB,KAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;;AFepB,CAAA;AACI,WAAA;AACA,UAAA;AACA,SCxCc;ADyCd,iBAAA;AACA,iBAAA;AACA,eAAA;AACA,cC3Ce;;AD+CvB,CAAA;AACI,QAAA,EAAA,EAAA;;AAEA,CAHJ,eAGI,CAAA;AACI,aAAA;AACA,cAAA;;AAKJ,CAAA;AACI,YAAA;AACA,QAAA;AACA,UEhDI;AFiDJ,WAAA,KAAA;AACA,SElDI;AFmDJ,UAAA;AACA,WAAA;AACA,cEpDQ,KAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AFqDR,cACI,QAAA,KAAA,MAAA,EAAA,OAAA,KAAA;;AAGK,CAAA,cAAA,CAbb;AAcQ,WAAA;;AAIR,CAAA;AACI,YAAA;AACA,UC3EI;;AD8ER,CAAA;AAAA,CAAA;AAEI,YAAA;AACA,UAAA;AACA,QAAA;AACA,SC1FgB;AD2FhB,cEhEI,KAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;;AFmER,CATA;AAUI,UAAA;AACA,cEtEgB,KAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;;AFyEpB,CAAA;AACI,YAAA;AACA,QAAA;AACA,UClGc;ADmGd,SCnGc;ADoGd,iBAAA;AACA,eAAA;AACA,iBAAA;AACA,cCtGe;;AD0GvB,CAAA;AACI,YAAA;;AAEA,CAHJ,uBAGI,OAAA,CApDA;AAqDI,UC5GI;AD6GJ,WAAA;AACA,8BAAA,MAAA,EAAA;AACA,oBAAA;;AAIA,CAAA,2BAAA,CAAA,eAAA,CAAA;AAAA,CAAA,2BAAA,CAAA,eAAA,CAAA;AAAA,CAAA,2BAAA,CAAA,eAAA,CAAA;AAGI,QAAA;;AAKJ,CAAA,2BAAA,CARA,eAQA,CAAA;AAAA,CAAA,2BAAA,CARA,eAQA,CARA;AAQA,CAAA,2BAAA,CARA,eAQA,CARA;AAWI,QAAA;;AAKJ,CAAA,2BAAA,CAhBA,eAgBA,CARA;AAQA,CAAA,2BAAA,CAhBA,eAgBA,CAhBA;AAkBI,QAAA;;AAKJ,CAAA,2BAAA,CAvBA,eAuBA,CAfA;AAgBI,QAAA;;AAKZ,CAAA;AACI,YAAA;AACA,OAAA;AACA,QAAA;AACA,SAAA;AACA,UAAA;AACA,WAAA;AACA,eAAA;AACA,mBAAA;AACA,WE7CS;AF8CT,kBAAA;;AAGJ,CAAA;AACI,WAAA;AACA,UAAA;AACA,cAAA;AACA,WAAA;AACA,SE9IQ,KAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;AF+IR,kBAAA;AACA,UAAA;AACA,WAAA;AACA,SAAA;AACA,cACI,QAAA,KAAA,MAAA,EAAA,MAAA,KAAA;;AAGJ,CAAA;AACI,SAAA;AACA,WAAA;AACA,8BAAA,MAAA,EAAA;;AAEA,WAAA,cAAA,CAAA,WAAA,EAAA;AALJ,GAAA;AAMQ,WAAA;;;AAIR,CAxBJ,oBAwBI;AACI,SAAA;;","names":[]}