@micromag/viewer 0.3.211 → 0.3.213

package/assets/css/styles.css

@@ -4,8 +4,8 @@
 .micromag-viewer-menus-menu-container-backdrop,.micromag-viewer-menus-menu-container-heightContainer{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-container-container{color:#fff}.micromag-viewer-menus-menu-container-heightContainer{overflow:hidden;z-index:2}.micromag-viewer-menus-menu-container-backdrop{z-index:1;-webkit-backdrop-filter:blur(.75rem);backdrop-filter:blur(.75rem);background-color:rgba(28,28,28,.75)}
 .micromag-viewer-menus-menu-dot-button{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-viewer-menus-menu-dot-progress{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-dot-container{-webkit-flex:1 1;-ms-flex:1 1;flex:1 1}.micromag-viewer-menus-menu-dot-container:last-child{margin-right:0}.micromag-viewer-menus-menu-dot-container.micromag-viewer-menus-menu-dot-vertical .micromag-viewer-menus-menu-dot-button{width:auto;height:100%;padding:2px 10px}.micromag-viewer-menus-menu-dot-container.micromag-viewer-menus-menu-dot-vertical .micromag-viewer-menus-menu-dot-dot{width:2px;height:100%}.micromag-viewer-menus-menu-dot-button{display:block;width:100%;padding:.25rem 2px 1rem}@media (hover:hover){.micromag-viewer-menus-menu-dot-button:hover .micromag-viewer-menus-menu-dot-dot{-webkit-transform:scaleY(4);-ms-transform:scaleY(4);transform:scaleY(4);background-color:#fff!important}}.micromag-viewer-menus-menu-dot-button:active .micromag-viewer-menus-menu-dot-dot{-webkit-transform:scaleY(6);-ms-transform:scaleY(6);transform:scaleY(6)}.micromag-viewer-menus-menu-dot-dot{position:relative;display:block;width:100%;height:3px;-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;-webkit-transition:-webkit-transform .3s cubic-bezier(.4,1.69,0,1);transition:-webkit-transform .3s cubic-bezier(.4,1.69,0,1);-o-transition:transform .3s cubic-bezier(.4,1.69,0,1);transition:transform .3s cubic-bezier(.4,1.69,0,1);transition:transform .3s cubic-bezier(.4,1.69,0,1), -webkit-transform .3s cubic-bezier(.4,1.69,0,1);background-color:hsla(0,0%,100%,.15)}.micromag-viewer-menus-menu-dot-progress{-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.micromag-viewer-menus-menu-dot-subDot{display:block;position:relative;border-radius:0}.micromag-viewer-menus-menu-dot-subDot:after{content:"";position:absolute;left:100%;width:1px;height:100%;background-color:inherit}.micromag-viewer-menus-menu-dot-dots{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%}@-webkit-keyframes micromag-viewer-menus-menu-dot-outlineBounce{to{-webkit-transform:scaleY(4);transform:scaleY(4)}}@keyframes micromag-viewer-menus-menu-dot-outlineBounce{to{-webkit-transform:scaleY(4);transform:scaleY(4)}}
 .micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-viewer-menus-menu-dots-container{position:relative}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-item,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-items{margin:0;padding:0;list-style:none}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-items{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;width:100%}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding-left:10px;font-size:26px}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background:rgba(0,0,0,0)}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-items{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:auto;height:100%}
-.micromag-viewer-menus-menu-screen-button{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-screen-container{position:relative;overflow:hidden;width:100%}.micromag-viewer-menus-menu-screen-button{display:block;z-index:2;-webkit-transition:border-width .4s cubic-bezier(.4,1.69,0,1);-o-transition:border-width .4s cubic-bezier(.4,1.69,0,1);transition:border-width .4s cubic-bezier(.4,1.69,0,1);border:0 solid #fff}.micromag-viewer-menus-menu-screen-button:focus-visible{outline:.25rem solid #a13dff;outline-offset:.25rem}.micromag-viewer-menus-menu-screen-isCurrent .micromag-viewer-menus-menu-screen-button{animation:micromag-viewer-menus-menu-screen-pulse .75s cubic-bezier(.4,0,.6,1) infinite alternate-reverse}@media (hover:hover){.micromag-viewer-menus-menu-screen-button:hover{border:.25rem solid #fff}}.micromag-viewer-menus-menu-screen-inner{z-index:1;pointer-events:none}.micromag-viewer-menus-menu-screen-subScreenBadge{position:absolute;z-index:2;bottom:.15rem;right:.15rem;font-size:1rem;font-weight:700;pointer-events:none}.micromag-viewer-menus-menu-screen-subScreenCount{position:absolute;z-index:2;color:#343434;letter-spacing:-.05rem;top:50%;left:50%;text-align:center;-webkit-transform:translate(-50%,-50%) translate(-.1rem,-.1rem);-ms-transform:translate(-50%,-50%) translate(-.1rem,-.1rem);transform:translate(-50%,-50%) translate(-.1rem,-.1rem)}.micromag-viewer-menus-menu-screen-subScreenIcon{position:relative;z-index:1;width:1.15rem;height:auto;fill:#fff}@-webkit-keyframes micromag-viewer-menus-menu-screen-pulse{0%{border-width:.25rem}to{border-width:.5rem}}@keyframes micromag-viewer-menus-menu-screen-pulse{0%{border-width:.25rem}to{border-width:.5rem}}
-.micromag-viewer-menus-menu-preview-scroll{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-preview-container{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-repeat:no-repeat;background-position:50%;background-size:cover;-ms-touch-action:none;touch-action:none}.micromag-viewer-menus-menu-preview-container.micromag-viewer-menus-menu-preview-disabled .micromag-viewer-menus-menu-preview-screenButton{pointer-events:none}.micromag-viewer-menus-menu-preview-buttons,.micromag-viewer-menus-menu-preview-content{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-viewer-menus-menu-preview-buttons{z-index:3;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-viewer-menus-menu-preview-organisation{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:30px;height:30px;margin-right:10px;border-radius:50%;background-color:#fff;background-repeat:no-repeat;background-position:50%;background-size:contain}.micromag-viewer-menus-menu-preview-icon{display:block;width:1rem;height:auto}.micromag-viewer-menus-menu-preview-title{margin-right:auto;color:#fff;font-family:Helvetica,Arial,sans-serif}.micromag-viewer-menus-menu-preview-nav{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;padding:10px}.micromag-viewer-menus-menu-preview-item,.micromag-viewer-menus-menu-preview-items{margin:0;padding:0;list-style:none}.micromag-viewer-menus-menu-preview-items{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.micromag-viewer-menus-menu-preview-item,.micromag-viewer-menus-menu-preview-items{position:relative}.micromag-viewer-menus-menu-preview-item{width:33.333%}.micromag-viewer-menus-menu-preview-screen{padding:2px}.micromag-viewer-menus-menu-preview-loading{width:100%;height:auto;animation:micromag-viewer-menus-menu-preview-fillPulse 1s cubic-bezier(.4,0,.6,1) infinite alternate-reverse}@-webkit-keyframes micromag-viewer-menus-menu-preview-fillPulse{0%{fill:hsla(0,0%,100%,.1)}to{fill:hsla(0,0%,100%,.15)}}@keyframes micromag-viewer-menus-menu-preview-fillPulse{0%{fill:hsla(0,0%,100%,.1)}to{fill:hsla(0,0%,100%,.15)}}
+.micromag-viewer-menus-menu-screen-button{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-screen-container{position:relative;overflow:hidden;width:100%;height:0}.micromag-viewer-menus-menu-screen-button{display:block;z-index:2;-webkit-transition:border-width .4s cubic-bezier(.4,1.69,0,1);-o-transition:border-width .4s cubic-bezier(.4,1.69,0,1);transition:border-width .4s cubic-bezier(.4,1.69,0,1);border:0 solid #fff}.micromag-viewer-menus-menu-screen-button:focus-visible{outline:.25rem solid #a13dff;outline-offset:.25rem}.micromag-viewer-menus-menu-screen-isCurrent .micromag-viewer-menus-menu-screen-button{animation:micromag-viewer-menus-menu-screen-pulse .75s cubic-bezier(.4,0,.6,1) infinite alternate-reverse}@media (hover:hover){.micromag-viewer-menus-menu-screen-button:hover{border:.25rem solid #fff}}.micromag-viewer-menus-menu-screen-inner{z-index:1;pointer-events:none}.micromag-viewer-menus-menu-screen-subScreenBadge{position:absolute;z-index:2;bottom:.15rem;right:.15rem;font-size:1rem;font-weight:700;pointer-events:none}.micromag-viewer-menus-menu-screen-subScreenCount{position:absolute;z-index:2;color:#343434;letter-spacing:-.05rem;top:50%;left:50%;text-align:center;-webkit-transform:translate(-50%,-50%) translate(-.1rem,-.1rem);-ms-transform:translate(-50%,-50%) translate(-.1rem,-.1rem);transform:translate(-50%,-50%) translate(-.1rem,-.1rem)}.micromag-viewer-menus-menu-screen-subScreenIcon{position:relative;z-index:1;width:1.15rem;height:auto;fill:#fff}@-webkit-keyframes micromag-viewer-menus-menu-screen-pulse{0%{border-width:.25rem}to{border-width:.5rem}}@keyframes micromag-viewer-menus-menu-screen-pulse{0%{border-width:.25rem}to{border-width:.5rem}}
+.micromag-viewer-menus-menu-preview-scroll{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-preview-container{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-repeat:no-repeat;background-position:50%;background-size:cover;-ms-touch-action:none;touch-action:none}.micromag-viewer-menus-menu-preview-container.micromag-viewer-menus-menu-preview-disabled .micromag-viewer-menus-menu-preview-screenButton{pointer-events:none}.micromag-viewer-menus-menu-preview-buttons,.micromag-viewer-menus-menu-preview-content{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-viewer-menus-menu-preview-buttons{z-index:3;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-viewer-menus-menu-preview-organisation{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:30px;height:30px;margin-right:10px;border-radius:50%;background-color:#fff;background-repeat:no-repeat;background-position:50%;background-size:contain}.micromag-viewer-menus-menu-preview-icon{display:block;width:1rem;height:auto}.micromag-viewer-menus-menu-preview-title{margin-right:auto;color:#fff;font-family:Helvetica,Arial,sans-serif}.micromag-viewer-menus-menu-preview-nav{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;padding:10px}.micromag-viewer-menus-menu-preview-item,.micromag-viewer-menus-menu-preview-items{margin:0;padding:0;list-style:none}.micromag-viewer-menus-menu-preview-items{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.micromag-viewer-menus-menu-preview-item,.micromag-viewer-menus-menu-preview-items{position:relative}.micromag-viewer-menus-menu-preview-item{width:33.333%}.micromag-viewer-menus-menu-preview-inner{padding:2px}.micromag-viewer-menus-menu-preview-frame{width:100%;height:0;background-color:#fff;-webkit-animation:micromag-viewer-menus-menu-preview-fillPulse 1s cubic-bezier(.4,0,.6,1) infinite forwards;animation:micromag-viewer-menus-menu-preview-fillPulse 1s cubic-bezier(.4,0,.6,1) infinite forwards;-webkit-animation-play-state:paused;animation-play-state:paused}.micromag-viewer-menus-menu-preview-frame.micromag-viewer-menus-menu-preview-isLoading{-webkit-animation-play-state:running;animation-play-state:running}.micromag-viewer-menus-menu-preview-screen{opacity:0;-webkit-animation:micromag-viewer-menus-menu-preview-intro .4s cubic-bezier(.4,0,.6,1) 50ms 1 forwards;animation:micromag-viewer-menus-menu-preview-intro .4s cubic-bezier(.4,0,.6,1) 50ms 1 forwards}@-webkit-keyframes micromag-viewer-menus-menu-preview-intro{to{opacity:1}}@keyframes micromag-viewer-menus-menu-preview-intro{to{opacity:1}}@-webkit-keyframes micromag-viewer-menus-menu-preview-fillPulse{0%{background-color:hsla(0,0%,100%,.1)}50%{background-color:hsla(0,0%,100%,.15)}to{background-color:hsla(0,0%,100%,.1)}}@keyframes micromag-viewer-menus-menu-preview-fillPulse{0%{background-color:hsla(0,0%,100%,.1)}50%{background-color:hsla(0,0%,100%,.15)}to{background-color:hsla(0,0%,100%,.1)}}
 .micromag-viewer-partials-micromag-preview-container{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.micromag-viewer-partials-micromag-preview-cover{margin-right:.5rem}.micromag-viewer-partials-micromag-preview-info{white-space:normal}.micromag-viewer-partials-micromag-preview-url{margin:.5rem 0;font-size:.75rem}.micromag-viewer-partials-micromag-preview-container .micromag-viewer-partials-micromag-preview-title{font-family:Helvetica,Arial,sans-serif!important;font-size:1.1rem!important;font-weight:700;margin-bottom:.25rem}
 .micromag-viewer-menus-menu-share-scroll{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-share-container{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;max-width:500px;margin:0 auto;height:100%;background-repeat:no-repeat;background-position:50%;background-size:cover;-ms-touch-action:none;touch-action:none}.micromag-viewer-menus-menu-share-container.micromag-viewer-menus-menu-share-disabled .micromag-viewer-menus-menu-share-button{pointer-events:none}.micromag-viewer-menus-menu-share-content{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-viewer-menus-menu-share-inner{padding:10px}.micromag-viewer-menus-menu-share-organisation{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:30px;height:30px;margin-right:10px;border-radius:50%;background-color:#fff;background-repeat:no-repeat;background-position:50%;background-size:contain}.micromag-viewer-menus-menu-share-icon{display:block;width:1rem;height:auto}.micromag-viewer-menus-menu-share-header{max-width:600px;margin:.5rem 0;padding:.5rem;border-radius:.5rem;background-color:rgba(0,0,0,.15)}.micromag-viewer-menus-menu-share-mode{margin-top:.5rem}.micromag-viewer-menus-menu-share-mode label{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;font-size:14px;line-height:1.4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-viewer-menus-menu-share-mode input{margin-right:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1rem;height:1rem;border:2px solid #fff;-webkit-transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);-o-transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1), -webkit-transform .3s cubic-bezier(0,.6,.5,1);animation:micromag-viewer-menus-menu-share-bump .5s cubic-bezier(.6,0,.4,1) 1 alternate-reverse forwards;border-radius:4px}.micromag-viewer-menus-menu-share-mode input:active{-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67), -webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-webkit-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3)}.micromag-viewer-menus-menu-share-mode input:checked{background-color:#fff}.micromag-viewer-menus-menu-share-options{margin-bottom:3rem}
 .micromag-viewer-container{font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.1}.micromag-viewer-container address,.micromag-viewer-container blockquote,.micromag-viewer-container caption,.micromag-viewer-container dl,.micromag-viewer-container figure,.micromag-viewer-container h1,.micromag-viewer-container h2,.micromag-viewer-container h3,.micromag-viewer-container h4,.micromag-viewer-container h5,.micromag-viewer-container h6,.micromag-viewer-container label,.micromag-viewer-container legend,.micromag-viewer-container li,.micromag-viewer-container ol,.micromag-viewer-container p,.micromag-viewer-container pre,.micromag-viewer-container ul{margin:0;padding:0}.micromag-viewer-container *,.micromag-viewer-container :after,.micromag-viewer-container :before{-webkit-box-sizing:border-box;box-sizing:border-box}.micromag-viewer-container h1,.micromag-viewer-container h2,.micromag-viewer-container h3,.micromag-viewer-container h4,.micromag-viewer-container h5,.micromag-viewer-container h6,.micromag-viewer-container li,.micromag-viewer-container p{font-weight:400}.micromag-viewer-menuContainer,.micromag-viewer-menuPreview,.micromag-viewer-screenContainer,.micromag-viewer-screensFrame{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-screenContainer:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-viewer-container{position:relative;width:100%;height:100%;overflow:hidden;background-color:#1c1c1c;color:#fff}.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screensFrame{top:0;bottom:0;left:50%;margin:auto;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%)}.micromag-viewer-container.micromag-viewer-hideMenu .micromag-viewer-menuNavContainer{pointer-events:none;opacity:0}.micromag-viewer-container.micromag-viewer-hideMenu .micromag-viewer-dots,.micromag-viewer-container.micromag-viewer-hideMenu .micromag-viewer-menuTopContainer{opacity:0}.micromag-viewer-content{position:absolute;z-index:1;width:100%;height:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;cursor:-webkit-grab;cursor:grab}.micromag-viewer-content:active{cursor:-webkit-grabbing;cursor:grabbing}.micromag-viewer-withoutGestures .micromag-viewer-content{cursor:inherit}.micromag-viewer-menuNavContainer{position:absolute;z-index:4;top:0;width:100%;-ms-touch-action:none;touch-action:none;-webkit-transition:opacity .5s cubic-bezier(.6,0,.4,1),background-image .5s cubic-bezier(.6,0,.4,1);-o-transition:opacity .5s cubic-bezier(.6,0,.4,1),background-image .5s cubic-bezier(.6,0,.4,1);transition:opacity .5s cubic-bezier(.6,0,.4,1),background-image .5s cubic-bezier(.6,0,.4,1)}.micromag-viewer-fadeMenu .micromag-viewer-menuNavContainer{opacity:.25}.micromag-viewer-menuNavContainer.micromag-viewer-withShadow{background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,.75)),to(rgba(0,0,0,0)));background-image:-o-linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0));background-image:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0))}.micromag-viewer-fadeMenu .micromag-viewer-menuNavContainer.micromag-viewer-withShadow{background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,0)));background-image:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0))}.micromag-viewer-menuNavContainer.micromag-viewer-isOpened{opacity:1}.micromag-viewer-menuNavContainer.micromag-viewer-isOpened .micromag-viewer-dots{opacity:0}.micromag-viewer-menuNavContainer.micromag-viewer-isOpened.micromag-viewer-withShadow{background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,.75)),to(rgba(0,0,0,0)));background-image:-o-linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0));background-image:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0))}.micromag-viewer-menuTopContainer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity .2s cubic-bezier(.6,0,.4,1);-o-transition:opacity .2s cubic-bezier(.6,0,.4,1);transition:opacity .2s cubic-bezier(.6,0,.4,1)}.micromag-viewer-menuItem{display:block;width:50%}.micromag-viewer-menuItemScreens{text-align:right}.micromag-viewer-menuButton{padding:.5rem .75rem;font-size:1rem}.micromag-viewer-slidingButton{display:inline-block}.micromag-viewer-screensMenuButtonToggled{left:auto;right:0}.micromag-viewer-dots{position:relative;z-index:3;top:-.25rem;padding:0 .5rem;-webkit-transition:opacity .3s cubic-bezier(0,.6,.5,1);-o-transition:opacity .3s cubic-bezier(0,.6,.5,1);transition:opacity .3s cubic-bezier(0,.6,.5,1)}.micromag-viewer-dots.micromag-viewer-isHidden{opacity:0;pointer-events:none}.micromag-viewer-menuContainer{z-index:3;top:0}.micromag-viewer-menuPreview{z-index:4}.micromag-viewer-navButton{display:none;visibility:hidden;position:absolute;z-index:3;top:50%;border:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.micromag-viewer-navButton.micromag-viewer-previous{left:1.5rem}.micromag-viewer-navButton.micromag-viewer-next{right:1.5rem}@media screen and (min-width:1024px){.micromag-viewer-navButton{display:block;visibility:visible}}.micromag-viewer-screensFrame{z-index:1;-ms-touch-action:none;touch-action:none}.micromag-viewer-screenContainer{display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;opacity:0}.micromag-viewer-screen{pointer-events:none}.micromag-viewer-current .micromag-viewer-screen{pointer-events:auto}.micromag-viewer-playbackControls{position:absolute;z-index:2;bottom:0;left:0;width:100%;pointer-events:none}.micromag-viewer-arrowHint{position:absolute;top:70%;right:5%}.micromag-viewer-webView{z-index:10}

package/es/index.js

@@ -933,7 +933,10 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
     }]
   })) : '');
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$a.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$a.isCurrent, current), _ref4)])
+    className: classNames([styles$a.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$a.isCurrent, current), _ref4)]),
+    style: {
+      paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
+    }
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: styles$a.button,
@@ -966,7 +969,7 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
 ViewerMenuScreen.propTypes = propTypes$d;
 ViewerMenuScreen.defaultProps = defaultProps$d;
 
-var styles$9 = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","disabled":"micromag-viewer-menus-menu-preview-disabled","screenButton":"micromag-viewer-menus-menu-preview-screenButton","buttons":"micromag-viewer-menus-menu-preview-buttons","content":"micromag-viewer-menus-menu-preview-content","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","screen":"micromag-viewer-menus-menu-preview-screen","loading":"micromag-viewer-menus-menu-preview-loading","fillPulse":"micromag-viewer-menus-menu-preview-fillPulse"};
+var styles$9 = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","disabled":"micromag-viewer-menus-menu-preview-disabled","screenButton":"micromag-viewer-menus-menu-preview-screenButton","buttons":"micromag-viewer-menus-menu-preview-buttons","content":"micromag-viewer-menus-menu-preview-content","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","inner":"micromag-viewer-menus-menu-preview-inner","frame":"micromag-viewer-menus-menu-preview-frame","fillPulse":"micromag-viewer-menus-menu-preview-fillPulse","isLoading":"micromag-viewer-menus-menu-preview-isLoading","screen":"micromag-viewer-menus-menu-preview-screen","intro":"micromag-viewer-menus-menu-preview-intro"};
 
 var propTypes$c = {
   viewerTheme: PropTypes$1.viewerTheme,
@@ -1038,12 +1041,29 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   var brandImageStyle = brandImageUrl !== null ? {
     backgroundImage: "url(".concat(brandImageUrl, ")")
   } : null; // const { url: brandLogoUrl = null } = brandLogo || {};
-  // @todo optimize all of this the proper way
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      screensMounted = _useState2[0],
+      setScreensMounted = _useState2[1]; // @todo optimize all of this the proper way
   // const finalItems = useMemo(
   //     () => (!focusable ? items.map((s, i) => (i > 6 ? { screenId: s.screenId } : s)) : items),
   //     [items, focusable],
   // );
 
+
+  useEffect(function () {
+    if (items.length === screensMounted.length) {
+      return null;
+    }
+
+    var timeout = setTimeout(function () {
+      setScreensMounted([].concat(_toConsumableArray(screensMounted), [true]));
+    }, 40);
+    return function () {
+      clearTimeout(timeout);
+    };
+  }, [items, screensMounted, setScreensMounted]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
     style: _objectSpread(_objectSpread({}, brandImageStyle), {}, {
@@ -1065,38 +1085,36 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     className: styles$9.items
   }, items.map(function (item, index) {
     var _ref6 = item || {},
-        screenId = _ref6.screenId,
-        _ref6$screen = _ref6.screen,
-        screen = _ref6$screen === void 0 ? null : _ref6$screen;
+        screenId = _ref6.screenId;
 
     var itemStyles = {
       width: "".concat(100 / thumbsPerLine, "%")
     };
+
+    var _ref7 = screenSize || {},
+        screenWidth = _ref7.width,
+        screenHeight = _ref7.height;
+
+    var screenMounted = screensMounted[index] || false;
     return /*#__PURE__*/React.createElement("li", {
       key: "item-".concat(screenId),
       className: styles$9.item,
       style: itemStyles
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$9.screen
-    }, screen === null ? /*#__PURE__*/React.createElement("svg", {
-      className: styles$9.loading,
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "10",
-      height: "16",
-      viewBox: "0 0 10 16",
+      className: styles$9.inner
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames([styles$9.frame, _defineProperty({}, styles$9.isLoading, !screenMounted)]),
       style: {
-        animationDelay: "".concat(index * -50, "ms")
+        paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
       }
-    }, /*#__PURE__*/React.createElement("rect", {
-      width: "10",
-      height: "16"
-    })) : /*#__PURE__*/React.createElement(ViewerMenuScreen, {
+    }, screenMounted ? /*#__PURE__*/React.createElement(ViewerMenuScreen, {
+      className: styles$9.screen,
       item: item,
       index: index,
       screenSize: screenSize,
       onClick: onClickScreen,
       focusable: focusable
-    })));
+    }) : null)));
   }))))));
 };
 
@@ -1406,6 +1424,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
       shareOpened = _useState4[0],
       setShareOpened = _useState4[1];
 
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      menuMounted = _useState6[0],
+      setMenuMounted = _useState6[1];
+
   var _useDimensionObserver = useDimensionObserver(),
       navContainerRef = _useDimensionObserver.ref,
       _useDimensionObserver2 = _useDimensionObserver.height,
@@ -1610,6 +1633,13 @@ var ViewerMenu = function ViewerMenu(_ref) {
   useKeyboardShortcuts(keyboardShortcuts); // should be zero if either screens menu or share menu is opened
 
   var dotsOpacity = Math.min(1, Math.max(0, 1 - (menuOpenedProgress + shareOpenedProgress)));
+  useEffect(function () {
+    if ((menuOpened || draggingMenu) && !menuMounted) {
+      setMenuMounted(true);
+    } else if (!menuOpened && !draggingMenu && menuMounted) {
+      setMenuMounted(false);
+    }
+  }, [menuOpened, draggingMenu, menuMounted, setMenuMounted]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$6.menuNavContainer, (_ref11 = {}, _defineProperty(_ref11, styles$6.withShadow, withShadow), _defineProperty(_ref11, styles$6.isOpened, menuOpened || shareOpened), _ref11)]),
     ref: refDots,
@@ -1690,7 +1720,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     className: styles$6.menuContainer,
     progressSpring: menuOpenedProgress,
     theme: viewerTheme
-  }, draggingMenu || menuOpened ? /*#__PURE__*/React.createElement(ViewerMenuPreview, {
+  }, menuMounted ? /*#__PURE__*/React.createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
     className: styles$6.menuPreview,
     screenSize: screenSize,

package/lib/index.js

@@ -953,7 +953,10 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
     }]
   })) : '');
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$a.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles$a.isCurrent, current), _ref4)])
+    className: classNames__default["default"]([styles$a.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles$a.isCurrent, current), _ref4)]),
+    style: {
+      paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
+    }
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     className: styles$a.button,
@@ -986,7 +989,7 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
 ViewerMenuScreen.propTypes = propTypes$d;
 ViewerMenuScreen.defaultProps = defaultProps$d;
 
-var styles$9 = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","disabled":"micromag-viewer-menus-menu-preview-disabled","screenButton":"micromag-viewer-menus-menu-preview-screenButton","buttons":"micromag-viewer-menus-menu-preview-buttons","content":"micromag-viewer-menus-menu-preview-content","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","screen":"micromag-viewer-menus-menu-preview-screen","loading":"micromag-viewer-menus-menu-preview-loading","fillPulse":"micromag-viewer-menus-menu-preview-fillPulse"};
+var styles$9 = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","disabled":"micromag-viewer-menus-menu-preview-disabled","screenButton":"micromag-viewer-menus-menu-preview-screenButton","buttons":"micromag-viewer-menus-menu-preview-buttons","content":"micromag-viewer-menus-menu-preview-content","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","inner":"micromag-viewer-menus-menu-preview-inner","frame":"micromag-viewer-menus-menu-preview-frame","fillPulse":"micromag-viewer-menus-menu-preview-fillPulse","isLoading":"micromag-viewer-menus-menu-preview-isLoading","screen":"micromag-viewer-menus-menu-preview-screen","intro":"micromag-viewer-menus-menu-preview-intro"};
 
 var propTypes$c = {
   viewerTheme: core.PropTypes.viewerTheme,
@@ -1058,12 +1061,29 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   var brandImageStyle = brandImageUrl !== null ? {
     backgroundImage: "url(".concat(brandImageUrl, ")")
   } : null; // const { url: brandLogoUrl = null } = brandLogo || {};
-  // @todo optimize all of this the proper way
+
+  var _useState = React.useState([]),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      screensMounted = _useState2[0],
+      setScreensMounted = _useState2[1]; // @todo optimize all of this the proper way
   // const finalItems = useMemo(
   //     () => (!focusable ? items.map((s, i) => (i > 6 ? { screenId: s.screenId } : s)) : items),
   //     [items, focusable],
   // );
 
+
+  React.useEffect(function () {
+    if (items.length === screensMounted.length) {
+      return null;
+    }
+
+    var timeout = setTimeout(function () {
+      setScreensMounted([].concat(_toConsumableArray__default["default"](screensMounted), [true]));
+    }, 40);
+    return function () {
+      clearTimeout(timeout);
+    };
+  }, [items, screensMounted, setScreensMounted]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)]),
     style: _objectSpread__default["default"](_objectSpread__default["default"]({}, brandImageStyle), {}, {
@@ -1085,38 +1105,36 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     className: styles$9.items
   }, items.map(function (item, index) {
     var _ref6 = item || {},
-        screenId = _ref6.screenId,
-        _ref6$screen = _ref6.screen,
-        screen = _ref6$screen === void 0 ? null : _ref6$screen;
+        screenId = _ref6.screenId;
 
     var itemStyles = {
       width: "".concat(100 / thumbsPerLine, "%")
     };
+
+    var _ref7 = screenSize || {},
+        screenWidth = _ref7.width,
+        screenHeight = _ref7.height;
+
+    var screenMounted = screensMounted[index] || false;
     return /*#__PURE__*/React__default["default"].createElement("li", {
       key: "item-".concat(screenId),
       className: styles$9.item,
       style: itemStyles
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles$9.screen
-    }, screen === null ? /*#__PURE__*/React__default["default"].createElement("svg", {
-      className: styles$9.loading,
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "10",
-      height: "16",
-      viewBox: "0 0 10 16",
+      className: styles$9.inner
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classNames__default["default"]([styles$9.frame, _defineProperty__default["default"]({}, styles$9.isLoading, !screenMounted)]),
       style: {
-        animationDelay: "".concat(index * -50, "ms")
+        paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
       }
-    }, /*#__PURE__*/React__default["default"].createElement("rect", {
-      width: "10",
-      height: "16"
-    })) : /*#__PURE__*/React__default["default"].createElement(ViewerMenuScreen, {
+    }, screenMounted ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuScreen, {
+      className: styles$9.screen,
       item: item,
       index: index,
       screenSize: screenSize,
       onClick: onClickScreen,
       focusable: focusable
-    })));
+    }) : null)));
   }))))));
 };
 
@@ -1426,6 +1444,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
       shareOpened = _useState4[0],
       setShareOpened = _useState4[1];
 
+  var _useState5 = React.useState(false),
+      _useState6 = _slicedToArray__default["default"](_useState5, 2),
+      menuMounted = _useState6[0],
+      setMenuMounted = _useState6[1];
+
   var _useDimensionObserver = hooks.useDimensionObserver(),
       navContainerRef = _useDimensionObserver.ref,
       _useDimensionObserver2 = _useDimensionObserver.height,
@@ -1630,6 +1653,13 @@ var ViewerMenu = function ViewerMenu(_ref) {
   useKeyboardShortcuts(keyboardShortcuts); // should be zero if either screens menu or share menu is opened
 
   var dotsOpacity = Math.min(1, Math.max(0, 1 - (menuOpenedProgress + shareOpenedProgress)));
+  React.useEffect(function () {
+    if ((menuOpened || draggingMenu) && !menuMounted) {
+      setMenuMounted(true);
+    } else if (!menuOpened && !draggingMenu && menuMounted) {
+      setMenuMounted(false);
+    }
+  }, [menuOpened, draggingMenu, menuMounted, setMenuMounted]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$6.menuNavContainer, (_ref11 = {}, _defineProperty__default["default"](_ref11, styles$6.withShadow, withShadow), _defineProperty__default["default"](_ref11, styles$6.isOpened, menuOpened || shareOpened), _ref11)]),
     ref: refDots,
@@ -1710,7 +1740,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     className: styles$6.menuContainer,
     progressSpring: menuOpenedProgress,
     theme: viewerTheme
-  }, draggingMenu || menuOpened ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuPreview, {
+  }, menuMounted ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
     className: styles$6.menuPreview,
     screenSize: screenSize,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.211",
+    "version": "0.3.213",
     "description": "",
     "keywords": [
         "javascript"
@@ -59,14 +59,14 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.211",
-        "@micromag/element-scroll": "^0.3.211",
-        "@micromag/element-share-options": "^0.3.211",
-        "@micromag/element-webview": "^0.3.211",
-        "@micromag/elements": "^0.3.211",
-        "@micromag/fields": "^0.3.211",
-        "@micromag/intl": "^0.3.211",
-        "@micromag/screens": "^0.3.211",
+        "@micromag/core": "^0.3.213",
+        "@micromag/element-scroll": "^0.3.213",
+        "@micromag/element-share-options": "^0.3.213",
+        "@micromag/element-webview": "^0.3.213",
+        "@micromag/elements": "^0.3.213",
+        "@micromag/fields": "^0.3.213",
+        "@micromag/intl": "^0.3.213",
+        "@micromag/screens": "^0.3.213",
         "@react-spring/core": "^9.1.1",
         "@react-spring/web": "^9.1.1",
         "@use-gesture/react": "^10.2.4",
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "2eebe38f4253de953042e9ccf1afe593c824e8e0"
+    "gitHead": "e7dcbfd9c59763758e35c37bacf6749e95c1cbac"
 }