@micromag/viewer 0.3.193 → 0.3.197

package/assets/css/styles.css

@@ -1,14 +1,14 @@
 .micromag-viewer-buttons-button-container,.micromag-viewer-buttons-button-container.micromag-viewer-buttons-button-asLink{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-buttons-button-container .micromag-viewer-buttons-button-icon{position:relative;display:block}.micromag-viewer-buttons-button-container .micromag-viewer-buttons-button-icon,.micromag-viewer-buttons-button-container .micromag-viewer-buttons-button-label{-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)}.micromag-viewer-buttons-button-container.micromag-viewer-buttons-button-asLink{color:#a13dff;font-weight:700}.micromag-viewer-buttons-button-container.micromag-viewer-buttons-button-withIcon{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-viewer-buttons-button-container.micromag-viewer-buttons-button-withIcon .micromag-viewer-buttons-button-label{margin-left:.5em;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.micromag-viewer-buttons-button-container.micromag-viewer-buttons-button-withIcon .micromag-viewer-buttons-button-right{margin-left:.5em}.micromag-viewer-buttons-button-container.micromag-viewer-buttons-button-withIcon.micromag-viewer-buttons-button-icon-right .micromag-viewer-buttons-button-label{-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.micromag-viewer-buttons-button-container.micromag-viewer-buttons-button-withIconColumns{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-viewer-buttons-button-container.micromag-viewer-buttons-button-linkDisabled{opacity:.4;text-decoration:none;pointer-events:none}
 .micromag-viewer-buttons-icon-button-container{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-buttons-icon-button-container:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-viewer-buttons-icon-button-container{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%;border-radius:0}@media (hover:hover){.micromag-viewer-buttons-icon-button-container:hover .micromag-viewer-buttons-icon-button-icon,.micromag-viewer-buttons-icon-button-container:hover .micromag-viewer-buttons-icon-button-label{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);-webkit-transition:-webkit-transform .3s cubic-bezier(.21,2.59,0,.9);transition:-webkit-transform .3s cubic-bezier(.21,2.59,0,.9);-o-transition:transform .3s cubic-bezier(.21,2.59,0,.9);transition:transform .3s cubic-bezier(.21,2.59,0,.9);transition:transform .3s cubic-bezier(.21,2.59,0,.9), -webkit-transform .3s cubic-bezier(.21,2.59,0,.9)}}.micromag-viewer-buttons-icon-button-container:active .micromag-viewer-buttons-icon-button-icon,.micromag-viewer-buttons-icon-button-container:active .micromag-viewer-buttons-icon-button-label{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-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)}.micromag-viewer-buttons-icon-button-label{font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-viewer-buttons-icon-button-icon svg{display:block;width:1rem;height:auto}
 .micromag-viewer-buttons-toggle-button-container{overflow:hidden}.micromag-viewer-buttons-toggle-button-container,.micromag-viewer-buttons-toggle-button-normal{position:relative}.micromag-viewer-buttons-toggle-button-toggled{position:absolute;white-space:nowrap;top:0;left:0}
-.micromag-viewer-menus-menu-container-backdrop,.micromag-viewer-menus-menu-container-container{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-container-container{z-index:3;top:0;color:#fff}.micromag-viewer-menus-menu-container-heightContainer{overflow:hidden}.micromag-viewer-menus-menu-container-inner{position:relative;z-index:2;height:100%;padding-left:.5rem;padding-right:.5rem}.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-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-container{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;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{position:relative;z-index:3;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.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-content{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-viewer-menus-menu-preview-content,.micromag-viewer-menus-menu-preview-scroll{height:100%}.micromag-viewer-menus-menu-preview-nav{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;margin-bottom:3rem}.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-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-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-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-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-menus-menu-share-content{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-viewer-menus-menu-share-content,.micromag-viewer-menus-menu-share-scroll{height:100%}
-.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-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-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}
+.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}
 .micromag-viewer-screen-container{position:relative;width:100%;height:100%}.micromag-viewer-screen-navigationHint{position:absolute;top:50%;right:10%}
 .micromag-viewer-buttons-navigation-button-arrow{width:1rem;height:auto}.micromag-viewer-buttons-navigation-button-next .micromag-viewer-buttons-navigation-button-arrow{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.micromag-viewer-buttons-navigation-button-previous .micromag-viewer-buttons-navigation-button-arrow{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}
 @media screen and (min-width:1024px){.micromag-viewer-partials-arrow-hint-container{display:none}}.micromag-viewer-partials-arrow-hint-inner:after{content:"";position:absolute;z-index:1;top:50%;left:50%;width:1000%;height:0;padding-bottom:1000%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-animation-name:micromag-viewer-partials-arrow-hint-shadowFade;animation-name:micromag-viewer-partials-arrow-hint-shadowFade;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-timing-function:cubic-bezier(.4,0,.6,1);animation-timing-function:cubic-bezier(.4,0,.6,1);-webkit-animation-delay:.1s;animation-delay:.1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate;background-image:-o-radial-gradient(rgba(28,28,28,.5),rgba(28,28,28,0) 50%);background-image:radial-gradient(rgba(28,28,28,.5),rgba(28,28,28,0) 50%);-webkit-animation-fill-mode:both;animation-fill-mode:both}.micromag-viewer-partials-arrow-hint-arrow{position:relative;z-index:2;width:1.5rem;height:auto;-webkit-animation-name:micromag-viewer-partials-arrow-hint-panX;animation-name:micromag-viewer-partials-arrow-hint-panX;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-timing-function:cubic-bezier(.4,0,.6,1);animation-timing-function:cubic-bezier(.4,0,.6,1);-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes micromag-viewer-partials-arrow-hint-panX{0%{-webkit-transform:translateX(0) rotate(90deg);transform:translateX(0) rotate(90deg)}to{-webkit-transform:translateX(-1rem) rotate(90deg);transform:translateX(-1rem) rotate(90deg)}}@keyframes micromag-viewer-partials-arrow-hint-panX{0%{-webkit-transform:translateX(0) rotate(90deg);transform:translateX(0) rotate(90deg)}to{-webkit-transform:translateX(-1rem) rotate(90deg);transform:translateX(-1rem) rotate(90deg)}}@-webkit-keyframes micromag-viewer-partials-arrow-hint-shadowFade{0%{-webkit-transform:translate(-50%,-50%) translateY(0) scale(.75);transform:translate(-50%,-50%) translateY(0) scale(.75)}to{-webkit-transform:translate(-50%,-50%) translateX(-1rem) scale(1.25);transform:translate(-50%,-50%) translateX(-1rem) scale(1.25)}}@keyframes micromag-viewer-partials-arrow-hint-shadowFade{0%{-webkit-transform:translate(-50%,-50%) translateY(0) scale(.75);transform:translate(-50%,-50%) translateY(0) scale(.75)}to{-webkit-transform:translate(-50%,-50%) translateX(-1rem) scale(1.25);transform:translate(-50%,-50%) translateX(-1rem) scale(1.25)}}

package/es/index.js

@@ -5,7 +5,7 @@ import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react'
 import { Switch, Route, MemoryRouter } from 'react-router';
 import { Link, BrowserRouter } from 'react-router-dom';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { usePlaybackContext, useViewerWebView, useViewerInteraction, VisitorProvider, ScreenSizeProvider, ViewerProvider, useRoutes, useRoutePush, GoogleKeysProvider, GoogleMapsClientProvider, FieldsProvider, ComponentsProvider, SCREENS_NAMESPACE, UserInteractionProvider, PlaybackProvider, TrackingProvider, RoutesProvider } from '@micromag/core/contexts';
+import { useViewerSize, usePlaybackContext, useViewerWebView, useViewerInteraction, VisitorProvider, ScreenSizeProvider, ViewerProvider, useRoutes, useRoutePush, GoogleKeysProvider, GoogleMapsClientProvider, FieldsProvider, ComponentsProvider, SCREENS_NAMESPACE, UserInteractionProvider, PlaybackProvider, TrackingProvider, RoutesProvider } from '@micromag/core/contexts';
 import fieldsManager from '@micromag/fields/manager';
 import { IntlProvider } from '@micromag/intl';
 import { ScreensProvider } from '@micromag/screens';
@@ -552,7 +552,7 @@ var ToggleButton = function ToggleButton(_ref) {
 ToggleButton.propTypes = propTypes$i;
 ToggleButton.defaultProps = defaultProps$i;
 
-var styles$d = {"backdrop":"micromag-viewer-menus-menu-container-backdrop","container":"micromag-viewer-menus-menu-container-container","heightContainer":"micromag-viewer-menus-menu-container-heightContainer","inner":"micromag-viewer-menus-menu-container-inner"};
+var styles$d = {"backdrop":"micromag-viewer-menus-menu-container-backdrop","heightContainer":"micromag-viewer-menus-menu-container-heightContainer","container":"micromag-viewer-menus-menu-container-container"};
 
 var propTypes$h = {
   className: PropTypes.string,
@@ -589,18 +589,12 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$d.heightContainer,
-    style: {
+    style: _objectSpread({
       height: "".concat(transitionProgress * 100, "%"),
       pointerEvents: transitionProgress < 0.25 ? 'none' : 'auto',
-      zIndex: Math.round(1 + transitionProgress)
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$d.inner,
-    style: _objectSpread(_objectSpread({}, backgroundColorStyle), {}, {
-      paddingTop: "".concat(3 * transitionProgress, "rem"),
-      paddingBottom: "".concat(0.5 * transitionProgress, "rem")
-    })
-  }, children)), /*#__PURE__*/React.createElement("div", {
+      zIndex: Math.round(2 + transitionProgress)
+    }, backgroundColorStyle)
+  }, children), /*#__PURE__*/React.createElement("div", {
     className: styles$d.backdrop,
     style: {
       opacity: easings.easeOutQuint(transitionProgress)
@@ -963,7 +957,7 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
 ViewerMenuScreen.propTypes = propTypes$d;
 ViewerMenuScreen.defaultProps = defaultProps$d;
 
-var styles$9 = {"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","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","scroll":"micromag-viewer-menus-menu-preview-scroll","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","screen":"micromag-viewer-menus-menu-preview-screen","loading":"micromag-viewer-menus-menu-preview-loading","fillPulse":"micromag-viewer-menus-menu-preview-fillPulse"};
 
 var propTypes$c = {
   viewerTheme: PropTypes$1.viewerTheme,
@@ -973,6 +967,7 @@ var propTypes$c = {
   focusable: PropTypes.bool,
   onClickScreen: PropTypes.func,
   maxThumbsWidth: PropTypes.number,
+  paddingTop: PropTypes.number,
   // @todo to reimplement:
   // shouldLoad: PropTypes.bool,
   // toggleFullscreen: PropTypes.func,
@@ -989,6 +984,7 @@ var defaultProps$c = {
   // shouldLoad: true,
   onClickScreen: null,
   maxThumbsWidth: 140,
+  paddingTop: null,
   // toggleFullscreen: null,
   // fullscreenActive: false,
   // fullscreenEnabled: false,
@@ -1003,6 +999,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       focusable = _ref.focusable,
       onClickScreen = _ref.onClickScreen,
       maxThumbsWidth = _ref.maxThumbsWidth,
+      paddingTop = _ref.paddingTop,
       className = _ref.className;
 
   var _useDimensionObserver = useDimensionObserver(),
@@ -1047,7 +1044,10 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   }, /*#__PURE__*/React.createElement(Scroll, {
     className: styles$9.scroll
   }, /*#__PURE__*/React.createElement("nav", {
-    className: styles$9.nav
+    className: styles$9.nav,
+    style: {
+      paddingTop: paddingTop
+    }
   }, /*#__PURE__*/React.createElement("ul", {
     className: styles$9.items
   }, items.map(function (item, index) {
@@ -1134,7 +1134,7 @@ var MicromagPreview = function MicromagPreview(_ref) {
 MicromagPreview.propTypes = propTypes$b;
 MicromagPreview.defaultProps = defaultProps$b;
 
-var styles$7 = {"container":"micromag-viewer-menus-menu-share-container","disabled":"micromag-viewer-menus-menu-share-disabled","button":"micromag-viewer-menus-menu-share-button","organisation":"micromag-viewer-menus-menu-share-organisation","icon":"micromag-viewer-menus-menu-share-icon","header":"micromag-viewer-menus-menu-share-header","mode":"micromag-viewer-menus-menu-share-mode","bump":"micromag-viewer-menus-menu-share-bump","options":"micromag-viewer-menus-menu-share-options","content":"micromag-viewer-menus-menu-share-content","scroll":"micromag-viewer-menus-menu-share-scroll"};
+var styles$7 = {"scroll":"micromag-viewer-menus-menu-share-scroll","container":"micromag-viewer-menus-menu-share-container","disabled":"micromag-viewer-menus-menu-share-disabled","button":"micromag-viewer-menus-menu-share-button","content":"micromag-viewer-menus-menu-share-content","inner":"micromag-viewer-menus-menu-share-inner","organisation":"micromag-viewer-menus-menu-share-organisation","icon":"micromag-viewer-menus-menu-share-icon","header":"micromag-viewer-menus-menu-share-header","mode":"micromag-viewer-menus-menu-share-mode","bump":"micromag-viewer-menus-menu-share-bump","options":"micromag-viewer-menus-menu-share-options"};
 
 var propTypes$a = {
   viewerTheme: PropTypes$1.viewerTheme,
@@ -1144,6 +1144,7 @@ var propTypes$a = {
   items: PropTypes$1.menuItems,
   focusable: PropTypes.bool,
   // shouldLoad: PropTypes.bool, // @todo still needed? to re-implement?
+  paddingTop: PropTypes.number,
   currentScreenIndex: PropTypes.number,
   shareUrl: PropTypes.string,
   onShare: PropTypes.func,
@@ -1156,6 +1157,7 @@ var defaultProps$a = {
   description: null,
   items: [],
   focusable: true,
+  paddingTop: null,
   currentScreenIndex: 0,
   shareUrl: null,
   onShare: null,
@@ -1169,6 +1171,7 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
       description = _ref.description,
       items = _ref.items,
       focusable = _ref.focusable,
+      paddingTop = _ref.paddingTop,
       currentScreenIndex = _ref.currentScreenIndex,
       shareUrl = _ref.shareUrl,
       onShare = _ref.onShare,
@@ -1242,6 +1245,11 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
     className: styles$7.content
   }, /*#__PURE__*/React.createElement(Scroll, {
     className: styles$7.scroll
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$7.inner,
+    style: {
+      paddingTop: paddingTop
+    }
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$7.header
   }, /*#__PURE__*/React.createElement(MicromagPreview, {
@@ -1274,13 +1282,13 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
     onShare: onShare,
     theme: viewerTheme,
     shareCurrentScreen: shareCurrentScreen
-  }))));
+  })))));
 };
 
 ViewerMenuShare.propTypes = propTypes$a;
 ViewerMenuShare.defaultProps = defaultProps$a;
 
-var styles$6 = {"container":"micromag-viewer-container","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","menuNavContainer":"micromag-viewer-menuNavContainer","dots":"micromag-viewer-dots","menuTopContainer":"micromag-viewer-menuTopContainer","content":"micromag-viewer-content","withoutGestures":"micromag-viewer-withoutGestures","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuItemScreens":"micromag-viewer-menuItemScreens","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","isHidden":"micromag-viewer-isHidden","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screen":"micromag-viewer-screen","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","arrowHint":"micromag-viewer-arrowHint","webView":"micromag-viewer-webView"};
+var styles$6 = {"container":"micromag-viewer-container","menuContainer":"micromag-viewer-menuContainer","menuPreview":"micromag-viewer-menuPreview","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","menuNavContainer":"micromag-viewer-menuNavContainer","dots":"micromag-viewer-dots","menuTopContainer":"micromag-viewer-menuTopContainer","content":"micromag-viewer-content","withoutGestures":"micromag-viewer-withoutGestures","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuItemScreens":"micromag-viewer-menuItemScreens","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","isHidden":"micromag-viewer-isHidden","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screen":"micromag-viewer-screen","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","arrowHint":"micromag-viewer-arrowHint","webView":"micromag-viewer-webView"};
 
 var propTypes$9 = {
   story: PropTypes$1.story.isRequired,
@@ -1372,6 +1380,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
       _ref4$menuTheme = _ref4.menuTheme,
       menuTheme = _ref4$menuTheme === void 0 ? null : _ref4$menuTheme;
 
+  var _useViewerSize = useViewerSize(),
+      viewerHeight = _useViewerSize.height;
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       menuOpened = _useState2[0],
@@ -1382,6 +1393,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
       shareOpened = _useState4[0],
       setShareOpened = _useState4[1];
 
+  var _useDimensionObserver = useDimensionObserver(),
+      navContainerRef = _useDimensionObserver.ref,
+      _useDimensionObserver2 = _useDimensionObserver.height,
+      navContainerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+
   var items = useMemo(function () {
     return screens.map(function (it) {
       var children = screens.filter(function (s) {
@@ -1473,7 +1489,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
         _ref7$velocity = _slicedToArray(_ref7.velocity, 2),
         vy = _ref7$velocity[1];
 
-    var progress = Math.max(0, my) / (window.innerHeight * 0.8);
+    var progress = Math.max(0, my) / (viewerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
 
     if (!active) {
@@ -1482,7 +1498,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }
 
     return progress;
-  }, [onOpenShare]);
+  }, [onOpenShare, viewerHeight]);
   var computeShareProgressClose = useCallback(function (_ref8) {
     var active = _ref8.active,
         _ref8$direction = _slicedToArray(_ref8.direction, 2),
@@ -1492,7 +1508,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
         _ref8$velocity = _slicedToArray(_ref8.velocity, 2),
         vy = _ref8$velocity[1];
 
-    var progress = Math.max(0, my) / (window.innerHeight * 0.8);
+    var progress = Math.max(0, my) / (viewerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
 
     if (!active) {
@@ -1501,17 +1517,20 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }
 
     return 1 - progress;
-  }, [onCloseShare]);
-
-  var _useDragProgress = useDragProgress({
-    progress: shareOpened ? 1 : 0,
-    computeProgress: shareOpened ? computeShareProgressClose : computeShareProgress,
-    springParams: {
+  }, [onCloseShare, viewerHeight]);
+  var springParams = useMemo(function () {
+    return {
       config: {
         tension: 300,
         friction: 30
       }
-    }
+    };
+  }, []);
+
+  var _useDragProgress = useDragProgress({
+    progress: shareOpened ? 1 : 0,
+    computeProgress: shareOpened ? computeShareProgressClose : computeShareProgress,
+    springParams: springParams
   }),
       bindShareDrag = _useDragProgress.bind,
       shareOpenedProgress = _useDragProgress.progress;
@@ -1558,12 +1577,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
   var _useDragProgress2 = useDragProgress({
     progress: menuOpened ? 1 : 0,
     computeProgress: menuOpened ? computeMenuProgressClose : computeMenuProgress,
-    springParams: {
-      config: {
-        tension: 300,
-        friction: 30
-      }
-    }
+    springParams: springParams
   }),
       bindMenuDrag = _useDragProgress2.bind,
       menuOpenedProgress = _useDragProgress2.progress;
@@ -1588,7 +1602,8 @@ var ViewerMenu = function ViewerMenu(_ref) {
       width: menuWidth
     }
   }, /*#__PURE__*/React.createElement("nav", {
-    className: styles$6.menuTopContainer
+    className: styles$6.menuTopContainer,
+    ref: navContainerRef
   }, !withoutShareMenu ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: classNames([styles$6.menuItem, styles$6.menuShare])
   }, bindShareDrag()), /*#__PURE__*/React.createElement(ToggleButton, {
@@ -1640,7 +1655,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
       pointerEvents: dotsOpacity < 1 ? 'none' : 'auto'
     }
   }))), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
-    className: styles$6.menuContainerShare,
+    className: styles$6.menuContainer,
     transitionProgress: shareOpenedProgress,
     theme: viewerTheme
   }, shareOpenedProgress > 0 ? /*#__PURE__*/React.createElement(ViewerMenuShare, {
@@ -1649,6 +1664,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     title: title,
     description: description,
     menuWidth: menuWidth,
+    paddingTop: navContainerHeight,
     focusable: shareOpened,
     items: items,
     currentScreenIndex: currentScreenIndex,
@@ -1656,7 +1672,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     onShare: onShare,
     onClose: onCloseShare
   }) : null), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
-    className: styles$6.menuContainerScreens,
+    className: styles$6.menuContainer,
     transitionProgress: menuOpenedProgress,
     theme: viewerTheme
   }, menuOpenedProgress > 0 ? /*#__PURE__*/React.createElement(ViewerMenuPreview, {
@@ -1664,6 +1680,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     className: styles$6.menuPreview,
     screenSize: screenSize,
     menuWidth: menuWidth,
+    paddingTop: navContainerHeight,
     items: items,
     currentScreenIndex: currentScreenIndex,
     shareUrl: shareUrl,
@@ -2170,7 +2187,8 @@ function PlaybackControls(_ref) {
         "type": 0,
         "value": "Play"
       }]
-    })
+    }),
+    withoutBootstrapStyles: true
   }), /*#__PURE__*/React.createElement(SeekBar, {
     className: styles$1.seekBar,
     media: mediaElement,
@@ -2228,7 +2246,8 @@ function PlaybackControls(_ref) {
         "type": 0,
         "value": "Mute"
       }]
-    })
+    }),
+    withoutBootstrapStyles: true
   }));
 }
 
@@ -2565,6 +2584,8 @@ var Viewer = function Viewer(_ref) {
     screens: deviceScreens
   }, screenSizeOptions)),
       containerRef = _useScreenSizeFromEle.ref,
+      viewerWidth = _useScreenSizeFromEle.fullWidth,
+      viewerHeight = _useScreenSizeFromEle.fullHeight,
       screenSize = _useScreenSizeFromEle.screenSize,
       screenScale = _useScreenSizeFromEle.scale;
 
@@ -2841,6 +2862,8 @@ var Viewer = function Viewer(_ref) {
     events: eventsManager,
     menuVisible: menuVisible,
     menuOverScreen: menuOverScreen,
+    width: viewerWidth,
+    height: viewerHeight,
     topHeight: menuOverScreen && currentScreenInteractionEnabled ? menuDotsContainerHeight / screenScale : 0,
     bottomHeight: playbackControls && (playbackcontrolsVisible || !playing) && currentScreenInteractionEnabled ? playbackControlsContainerHeight / screenScale : 0,
     bottomSidesWidth: (playbackcontrolsVisible || !playing || playbackMedia !== null) && currentScreenInteractionEnabled ? 60 / screenScale : 0,

package/lib/index.js

@@ -572,7 +572,7 @@ var ToggleButton = function ToggleButton(_ref) {
 ToggleButton.propTypes = propTypes$i;
 ToggleButton.defaultProps = defaultProps$i;
 
-var styles$d = {"backdrop":"micromag-viewer-menus-menu-container-backdrop","container":"micromag-viewer-menus-menu-container-container","heightContainer":"micromag-viewer-menus-menu-container-heightContainer","inner":"micromag-viewer-menus-menu-container-inner"};
+var styles$d = {"backdrop":"micromag-viewer-menus-menu-container-backdrop","heightContainer":"micromag-viewer-menus-menu-container-heightContainer","container":"micromag-viewer-menus-menu-container-container"};
 
 var propTypes$h = {
   className: PropTypes__default["default"].string,
@@ -609,18 +609,12 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$d.heightContainer,
-    style: {
+    style: _objectSpread__default["default"]({
       height: "".concat(transitionProgress * 100, "%"),
       pointerEvents: transitionProgress < 0.25 ? 'none' : 'auto',
-      zIndex: Math.round(1 + transitionProgress)
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$d.inner,
-    style: _objectSpread__default["default"](_objectSpread__default["default"]({}, backgroundColorStyle), {}, {
-      paddingTop: "".concat(3 * transitionProgress, "rem"),
-      paddingBottom: "".concat(0.5 * transitionProgress, "rem")
-    })
-  }, children)), /*#__PURE__*/React__default["default"].createElement("div", {
+      zIndex: Math.round(2 + transitionProgress)
+    }, backgroundColorStyle)
+  }, children), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$d.backdrop,
     style: {
       opacity: utils.easings.easeOutQuint(transitionProgress)
@@ -983,7 +977,7 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
 ViewerMenuScreen.propTypes = propTypes$d;
 ViewerMenuScreen.defaultProps = defaultProps$d;
 
-var styles$9 = {"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","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","scroll":"micromag-viewer-menus-menu-preview-scroll","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","screen":"micromag-viewer-menus-menu-preview-screen","loading":"micromag-viewer-menus-menu-preview-loading","fillPulse":"micromag-viewer-menus-menu-preview-fillPulse"};
 
 var propTypes$c = {
   viewerTheme: core.PropTypes.viewerTheme,
@@ -993,6 +987,7 @@ var propTypes$c = {
   focusable: PropTypes__default["default"].bool,
   onClickScreen: PropTypes__default["default"].func,
   maxThumbsWidth: PropTypes__default["default"].number,
+  paddingTop: PropTypes__default["default"].number,
   // @todo to reimplement:
   // shouldLoad: PropTypes.bool,
   // toggleFullscreen: PropTypes.func,
@@ -1009,6 +1004,7 @@ var defaultProps$c = {
   // shouldLoad: true,
   onClickScreen: null,
   maxThumbsWidth: 140,
+  paddingTop: null,
   // toggleFullscreen: null,
   // fullscreenActive: false,
   // fullscreenEnabled: false,
@@ -1023,6 +1019,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       focusable = _ref.focusable,
       onClickScreen = _ref.onClickScreen,
       maxThumbsWidth = _ref.maxThumbsWidth,
+      paddingTop = _ref.paddingTop,
       className = _ref.className;
 
   var _useDimensionObserver = hooks.useDimensionObserver(),
@@ -1067,7 +1064,10 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
     className: styles$9.scroll
   }, /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: styles$9.nav
+    className: styles$9.nav,
+    style: {
+      paddingTop: paddingTop
+    }
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: styles$9.items
   }, items.map(function (item, index) {
@@ -1154,7 +1154,7 @@ var MicromagPreview = function MicromagPreview(_ref) {
 MicromagPreview.propTypes = propTypes$b;
 MicromagPreview.defaultProps = defaultProps$b;
 
-var styles$7 = {"container":"micromag-viewer-menus-menu-share-container","disabled":"micromag-viewer-menus-menu-share-disabled","button":"micromag-viewer-menus-menu-share-button","organisation":"micromag-viewer-menus-menu-share-organisation","icon":"micromag-viewer-menus-menu-share-icon","header":"micromag-viewer-menus-menu-share-header","mode":"micromag-viewer-menus-menu-share-mode","bump":"micromag-viewer-menus-menu-share-bump","options":"micromag-viewer-menus-menu-share-options","content":"micromag-viewer-menus-menu-share-content","scroll":"micromag-viewer-menus-menu-share-scroll"};
+var styles$7 = {"scroll":"micromag-viewer-menus-menu-share-scroll","container":"micromag-viewer-menus-menu-share-container","disabled":"micromag-viewer-menus-menu-share-disabled","button":"micromag-viewer-menus-menu-share-button","content":"micromag-viewer-menus-menu-share-content","inner":"micromag-viewer-menus-menu-share-inner","organisation":"micromag-viewer-menus-menu-share-organisation","icon":"micromag-viewer-menus-menu-share-icon","header":"micromag-viewer-menus-menu-share-header","mode":"micromag-viewer-menus-menu-share-mode","bump":"micromag-viewer-menus-menu-share-bump","options":"micromag-viewer-menus-menu-share-options"};
 
 var propTypes$a = {
   viewerTheme: core.PropTypes.viewerTheme,
@@ -1164,6 +1164,7 @@ var propTypes$a = {
   items: core.PropTypes.menuItems,
   focusable: PropTypes__default["default"].bool,
   // shouldLoad: PropTypes.bool, // @todo still needed? to re-implement?
+  paddingTop: PropTypes__default["default"].number,
   currentScreenIndex: PropTypes__default["default"].number,
   shareUrl: PropTypes__default["default"].string,
   onShare: PropTypes__default["default"].func,
@@ -1176,6 +1177,7 @@ var defaultProps$a = {
   description: null,
   items: [],
   focusable: true,
+  paddingTop: null,
   currentScreenIndex: 0,
   shareUrl: null,
   onShare: null,
@@ -1189,6 +1191,7 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
       description = _ref.description,
       items = _ref.items,
       focusable = _ref.focusable,
+      paddingTop = _ref.paddingTop,
       currentScreenIndex = _ref.currentScreenIndex,
       shareUrl = _ref.shareUrl,
       onShare = _ref.onShare,
@@ -1262,6 +1265,11 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
     className: styles$7.content
   }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
     className: styles$7.scroll
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$7.inner,
+    style: {
+      paddingTop: paddingTop
+    }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$7.header
   }, /*#__PURE__*/React__default["default"].createElement(MicromagPreview, {
@@ -1294,13 +1302,13 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
     onShare: onShare,
     theme: viewerTheme,
     shareCurrentScreen: shareCurrentScreen
-  }))));
+  })))));
 };
 
 ViewerMenuShare.propTypes = propTypes$a;
 ViewerMenuShare.defaultProps = defaultProps$a;
 
-var styles$6 = {"container":"micromag-viewer-container","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","menuNavContainer":"micromag-viewer-menuNavContainer","dots":"micromag-viewer-dots","menuTopContainer":"micromag-viewer-menuTopContainer","content":"micromag-viewer-content","withoutGestures":"micromag-viewer-withoutGestures","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuItemScreens":"micromag-viewer-menuItemScreens","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","isHidden":"micromag-viewer-isHidden","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screen":"micromag-viewer-screen","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","arrowHint":"micromag-viewer-arrowHint","webView":"micromag-viewer-webView"};
+var styles$6 = {"container":"micromag-viewer-container","menuContainer":"micromag-viewer-menuContainer","menuPreview":"micromag-viewer-menuPreview","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","menuNavContainer":"micromag-viewer-menuNavContainer","dots":"micromag-viewer-dots","menuTopContainer":"micromag-viewer-menuTopContainer","content":"micromag-viewer-content","withoutGestures":"micromag-viewer-withoutGestures","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuItemScreens":"micromag-viewer-menuItemScreens","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","isHidden":"micromag-viewer-isHidden","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screen":"micromag-viewer-screen","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","arrowHint":"micromag-viewer-arrowHint","webView":"micromag-viewer-webView"};
 
 var propTypes$9 = {
   story: core.PropTypes.story.isRequired,
@@ -1392,6 +1400,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
       _ref4$menuTheme = _ref4.menuTheme,
       menuTheme = _ref4$menuTheme === void 0 ? null : _ref4$menuTheme;
 
+  var _useViewerSize = contexts.useViewerSize(),
+      viewerHeight = _useViewerSize.height;
+
   var _useState = React.useState(false),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
       menuOpened = _useState2[0],
@@ -1402,6 +1413,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
       shareOpened = _useState4[0],
       setShareOpened = _useState4[1];
 
+  var _useDimensionObserver = hooks.useDimensionObserver(),
+      navContainerRef = _useDimensionObserver.ref,
+      _useDimensionObserver2 = _useDimensionObserver.height,
+      navContainerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+
   var items = React.useMemo(function () {
     return screens.map(function (it) {
       var children = screens.filter(function (s) {
@@ -1493,7 +1509,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
         _ref7$velocity = _slicedToArray__default["default"](_ref7.velocity, 2),
         vy = _ref7$velocity[1];
 
-    var progress = Math.max(0, my) / (window.innerHeight * 0.8);
+    var progress = Math.max(0, my) / (viewerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
 
     if (!active) {
@@ -1502,7 +1518,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }
 
     return progress;
-  }, [onOpenShare]);
+  }, [onOpenShare, viewerHeight]);
   var computeShareProgressClose = React.useCallback(function (_ref8) {
     var active = _ref8.active,
         _ref8$direction = _slicedToArray__default["default"](_ref8.direction, 2),
@@ -1512,7 +1528,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
         _ref8$velocity = _slicedToArray__default["default"](_ref8.velocity, 2),
         vy = _ref8$velocity[1];
 
-    var progress = Math.max(0, my) / (window.innerHeight * 0.8);
+    var progress = Math.max(0, my) / (viewerHeight * 0.8);
     var reachedThreshold = (vy > 0.3 || Math.abs(progress) > 0.3) && dy !== -1;
 
     if (!active) {
@@ -1521,17 +1537,20 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }
 
     return 1 - progress;
-  }, [onCloseShare]);
-
-  var _useDragProgress = hooks.useDragProgress({
-    progress: shareOpened ? 1 : 0,
-    computeProgress: shareOpened ? computeShareProgressClose : computeShareProgress,
-    springParams: {
+  }, [onCloseShare, viewerHeight]);
+  var springParams = React.useMemo(function () {
+    return {
       config: {
         tension: 300,
         friction: 30
       }
-    }
+    };
+  }, []);
+
+  var _useDragProgress = hooks.useDragProgress({
+    progress: shareOpened ? 1 : 0,
+    computeProgress: shareOpened ? computeShareProgressClose : computeShareProgress,
+    springParams: springParams
   }),
       bindShareDrag = _useDragProgress.bind,
       shareOpenedProgress = _useDragProgress.progress;
@@ -1578,12 +1597,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
   var _useDragProgress2 = hooks.useDragProgress({
     progress: menuOpened ? 1 : 0,
     computeProgress: menuOpened ? computeMenuProgressClose : computeMenuProgress,
-    springParams: {
-      config: {
-        tension: 300,
-        friction: 30
-      }
-    }
+    springParams: springParams
   }),
       bindMenuDrag = _useDragProgress2.bind,
       menuOpenedProgress = _useDragProgress2.progress;
@@ -1608,7 +1622,8 @@ var ViewerMenu = function ViewerMenu(_ref) {
       width: menuWidth
     }
   }, /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: styles$6.menuTopContainer
+    className: styles$6.menuTopContainer,
+    ref: navContainerRef
   }, !withoutShareMenu ? /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     className: classNames__default["default"]([styles$6.menuItem, styles$6.menuShare])
   }, bindShareDrag()), /*#__PURE__*/React__default["default"].createElement(ToggleButton, {
@@ -1660,7 +1675,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
       pointerEvents: dotsOpacity < 1 ? 'none' : 'auto'
     }
   }))), /*#__PURE__*/React__default["default"].createElement(ViewerMenuContainer, {
-    className: styles$6.menuContainerShare,
+    className: styles$6.menuContainer,
     transitionProgress: shareOpenedProgress,
     theme: viewerTheme
   }, shareOpenedProgress > 0 ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuShare, {
@@ -1669,6 +1684,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     title: title,
     description: description,
     menuWidth: menuWidth,
+    paddingTop: navContainerHeight,
     focusable: shareOpened,
     items: items,
     currentScreenIndex: currentScreenIndex,
@@ -1676,7 +1692,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     onShare: onShare,
     onClose: onCloseShare
   }) : null), /*#__PURE__*/React__default["default"].createElement(ViewerMenuContainer, {
-    className: styles$6.menuContainerScreens,
+    className: styles$6.menuContainer,
     transitionProgress: menuOpenedProgress,
     theme: viewerTheme
   }, menuOpenedProgress > 0 ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuPreview, {
@@ -1684,6 +1700,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     className: styles$6.menuPreview,
     screenSize: screenSize,
     menuWidth: menuWidth,
+    paddingTop: navContainerHeight,
     items: items,
     currentScreenIndex: currentScreenIndex,
     shareUrl: shareUrl,
@@ -2190,7 +2207,8 @@ function PlaybackControls(_ref) {
         "type": 0,
         "value": "Play"
       }]
-    })
+    }),
+    withoutBootstrapStyles: true
   }), /*#__PURE__*/React__default["default"].createElement(SeekBar, {
     className: styles$1.seekBar,
     media: mediaElement,
@@ -2248,7 +2266,8 @@ function PlaybackControls(_ref) {
         "type": 0,
         "value": "Mute"
       }]
-    })
+    }),
+    withoutBootstrapStyles: true
   }));
 }
 
@@ -2585,6 +2604,8 @@ var Viewer = function Viewer(_ref) {
     screens: deviceScreens
   }, screenSizeOptions)),
       containerRef = _useScreenSizeFromEle.ref,
+      viewerWidth = _useScreenSizeFromEle.fullWidth,
+      viewerHeight = _useScreenSizeFromEle.fullHeight,
       screenSize = _useScreenSizeFromEle.screenSize,
       screenScale = _useScreenSizeFromEle.scale;
 
@@ -2861,6 +2882,8 @@ var Viewer = function Viewer(_ref) {
     events: eventsManager,
     menuVisible: menuVisible,
     menuOverScreen: menuOverScreen,
+    width: viewerWidth,
+    height: viewerHeight,
     topHeight: menuOverScreen && currentScreenInteractionEnabled ? menuDotsContainerHeight / screenScale : 0,
     bottomHeight: playbackControls && (playbackcontrolsVisible || !playing) && currentScreenInteractionEnabled ? playbackControlsContainerHeight / screenScale : 0,
     bottomSidesWidth: (playbackcontrolsVisible || !playing || playbackMedia !== null) && currentScreenInteractionEnabled ? 60 / screenScale : 0,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.193",
+    "version": "0.3.197",
     "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.190",
-        "@micromag/element-scroll": "^0.3.190",
-        "@micromag/element-share-options": "^0.3.190",
-        "@micromag/element-webview": "^0.3.190",
-        "@micromag/elements": "^0.3.193",
-        "@micromag/fields": "^0.3.190",
-        "@micromag/intl": "^0.3.190",
-        "@micromag/screens": "^0.3.193",
+        "@micromag/core": "^0.3.196",
+        "@micromag/element-scroll": "^0.3.196",
+        "@micromag/element-share-options": "^0.3.196",
+        "@micromag/element-webview": "^0.3.196",
+        "@micromag/elements": "^0.3.196",
+        "@micromag/fields": "^0.3.196",
+        "@micromag/intl": "^0.3.196",
+        "@micromag/screens": "^0.3.196",
         "@react-spring/core": "^9.1.1",
         "@react-spring/web": "^9.1.1",
         "@use-gesture/react": "^10.2.4",
@@ -84,5 +84,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "baa77c4946627fec9822955390e547ad8639f07f"
+    "gitHead": "06823c6f0bde3a34e1a1c237aff76bfcd135a4b0"
 }