npm - @micromag/viewer - Versions diffs - 0.2.384 → 0.2.389 - Mend

@micromag/viewer 0.2.384 → 0.2.389

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/assets/css/styles.css CHANGED Viewed

@@ -1,8 +1,8 @@
-.micromag-viewer-screen-container{position:relative;height:100%;pointer-events:none}.micromag-viewer-screen-container.micromag-viewer-screen-current{pointer-events:auto}
+.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 .micromag-viewer-menuPreview,.micromag-viewer-container .micromag-viewer-menuPreviewContainer,.micromag-viewer-container .micromag-viewer-screen,.micromag-viewer-container .micromag-viewer-screenInner{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-container .micromag-viewer-screen:focus-visible{outline:3px solid #a13dff}.micromag-viewer-container{background-color:#1c1c1c;color:#fff}.micromag-viewer-container,.micromag-viewer-container .micromag-viewer-content{position:relative;width:100%;height:100%;overflow:hidden}.micromag-viewer-container .micromag-viewer-content{z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-viewer-container .micromag-viewer-menuDotsContainer{-ms-touch-action:none;touch-action:none;visibility:hidden;position:absolute;z-index:2;top:0;right:50%;width:100%;-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%)}.micromag-viewer-container .micromag-viewer-menuDots{position:relative;padding:8px 10px;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease}.micromag-viewer-container .micromag-viewer-menuPreviewContainer{visibility:hidden;z-index:3;top:-100%}.micromag-viewer-container .micromag-viewer-menuPreview{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.micromag-viewer-container .micromag-viewer-screen{display:-webkit-flex;display:-ms-flexbox;display:flex;opacity:0}.micromag-viewer-container .micromag-viewer-screen.micromag-viewer-current{opacity:1}.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screen{top:0;right:auto;bottom:0;left:50%;margin:auto;-webkit-transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,-webkit-transform .3s ease;-o-transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease,-webkit-transform .3s ease;opacity:.2;cursor:pointer}.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screen:focus-visible,.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screen:hover{opacity:.3}.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screen.micromag-viewer-current{opacity:1;cursor:auto}.micromag-viewer-container.micromag-viewer-hideMenu:not(.micromag-viewer-landscape) .micromag-viewer-menuDotsContainer{pointer-events:none}.micromag-viewer-container.micromag-viewer-hideMenu:not(.micromag-viewer-landscape) .micromag-viewer-menuDots{opacity:0}.micromag-viewer-container.micromag-viewer-ready .micromag-viewer-menuDotsContainer,.micromag-viewer-container.micromag-viewer-ready .micromag-viewer-menuPreviewContainer{visibility:visible}
 .micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-item .micromag-viewer-menus-menu-dots-button,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuButton{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-menuButton{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton:focus-visible,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuButton:focus-visible{outline:3px solid #a13dff}.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-item{-webkit-flex:1 1;-ms-flex:1 1;flex:1 1}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-item .micromag-viewer-menus-menu-dots-button{display:block;width:100%;padding:10px 2px}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-item .micromag-viewer-menus-menu-dots-dot{display:block;width:100%;height:2px;border-radius:2px}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-item:last-child{margin-right:0}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menu{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;width:16px;height:16px;padding-left:10px}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuIcon{display:block;height: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{background:rgba(0,0,0,0)}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical,.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}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-items{width:auto;height:100%}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-item .micromag-viewer-menus-menu-dots-button{width:auto;height:100%;padding:2px 10px}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-item .micromag-viewer-menus-menu-dots-dot{width:2px;height:100%}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-menu{position:absolute;top:10px;right:10px;padding-left:0}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-withShadow{background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.4)),to(rgba(0,0,0,0)));background:-o-linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0));background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0))}
 .micromag-viewer-partials-share-modal-container{pointer-events:none}.micromag-viewer-partials-share-modal-container .micromag-viewer-partials-share-modal-content{padding:5px;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);-webkit-transform-origin:center top;-ms-transform-origin:center top;transform-origin:center top;-webkit-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;border-radius:10px;opacity:0;background-color:#fff}.micromag-viewer-partials-share-modal-container .micromag-viewer-partials-share-modal-content:before{content:"";position:absolute;bottom:100%;left:50%;width:0;height:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);border-right:8px solid rgba(0,0,0,0);border-bottom:8px solid #fff;border-left:8px solid rgba(0,0,0,0)}.micromag-viewer-partials-share-modal-container button{display:block;margin:5px}.micromag-viewer-partials-share-modal-container.micromag-viewer-partials-share-modal-opened{pointer-events:auto}.micromag-viewer-partials-share-modal-container.micromag-viewer-partials-share-modal-opened .micromag-viewer-partials-share-modal-content{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}
 .micromag-viewer-partials-share-button-container{position:relative;white-space:nowrap}.micromag-viewer-partials-share-button-container .micromag-viewer-partials-share-button-shareModal{position:absolute;top:100%;right:50%;margin-top:15px;-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%)}
 .micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton{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-preview-container .micromag-viewer-menus-menu-preview-activeScreenBorder,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-itemContent,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-scroll{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button:focus-visible,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-shareButton:focus-visible{outline:3px solid #a13dff}.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%;padding:10px;background-color:#000;background-repeat:no-repeat;background-position:50%;background-size:cover;color:#fff}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton{display:block}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton:focus-visible{border:4px solid #a13dff;outline: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-container .micromag-viewer-menus-menu-preview-header{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-bottom:20px}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-shareButton{display:inline-block;border:0;border-radius:0;background-color:rgba(0,0,0,0);color:inherit;font-size:.9rem;font-weight:600;line-height:1.4;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button{width:20px;margin-left:10px;padding:0}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button:first-child{margin-left:0}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-shareButton{z-index:1}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-icon{display:block;width:100%;height:100%}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-buttons{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-viewer-menus-menu-preview-container .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-container .micromag-viewer-menus-menu-preview-title{margin-right:auto;color:#fff;font-family:Helvetica,Arial,sans-serif}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-content,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-nav{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-nav{overflow:hidden}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-item,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-items{margin:0;padding:0;list-style:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-items{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-item{position:relative;height:0}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-item.micromag-viewer-menus-menu-preview-active .micromag-viewer-menus-menu-preview-screenButton{pointer-events:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-itemContent{padding:2px}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenContainer{position:relative;height:100%}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-activeScreenBorder{border:2px solid #fff}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenContent{-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;background-color:#2b2b2b}
-.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 .micromag-viewer-menuPreview,.micromag-viewer-container .micromag-viewer-menuPreviewContainer,.micromag-viewer-container .micromag-viewer-screen,.micromag-viewer-container .micromag-viewer-screenInner{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-container .micromag-viewer-screen:focus-visible{outline:3px solid #a13dff}.micromag-viewer-container{background-color:#1c1c1c;color:#fff}.micromag-viewer-container,.micromag-viewer-container .micromag-viewer-content{position:relative;width:100%;height:100%;overflow:hidden}.micromag-viewer-container .micromag-viewer-content{z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-viewer-container .micromag-viewer-menuDotsContainer{-ms-touch-action:none;touch-action:none;visibility:hidden;position:absolute;z-index:2;top:0;right:50%;width:100%;-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%)}.micromag-viewer-container .micromag-viewer-menuDots{position:relative;padding:8px 10px;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease}.micromag-viewer-container .micromag-viewer-menuPreviewContainer{visibility:hidden;z-index:3;top:-100%}.micromag-viewer-container .micromag-viewer-menuPreview{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.micromag-viewer-container .micromag-viewer-screen{display:-webkit-flex;display:-ms-flexbox;display:flex;opacity:0}.micromag-viewer-container .micromag-viewer-screen.micromag-viewer-current{opacity:1}.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screen{top:0;right:auto;bottom:0;left:50%;margin:auto;-webkit-transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,-webkit-transform .3s ease;-o-transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease,-webkit-transform .3s ease;opacity:.2;cursor:pointer}.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screen:focus-visible,.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screen:hover{opacity:.3}.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screen.micromag-viewer-current{opacity:1;cursor:auto}.micromag-viewer-container.micromag-viewer-hideMenu:not(.micromag-viewer-landscape) .micromag-viewer-menuDotsContainer{pointer-events:none}.micromag-viewer-container.micromag-viewer-hideMenu:not(.micromag-viewer-landscape) .micromag-viewer-menuDots{opacity:0}.micromag-viewer-container.micromag-viewer-ready .micromag-viewer-menuDotsContainer,.micromag-viewer-container.micromag-viewer-ready .micromag-viewer-menuPreviewContainer{visibility:visible}
+.micromag-viewer-screen-container{position:relative;height:100%;pointer-events:none}.micromag-viewer-screen-container.micromag-viewer-screen-current{pointer-events:auto}
 .micromag-screen-audio-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-audio-disabled.micromag-screen-audio-container{overflow:hidden;pointer-events:none}.micromag-screen-audio-hidden.micromag-screen-audio-container{display:none;visibility:hidden}.micromag-screen-audio-placeholder.micromag-screen-audio-container .micromag-screen-audio-content{position:relative;padding:6px}.micromag-screen-audio-container .micromag-screen-audio-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-audio-container .micromag-screen-audio-mediaControls{padding:10px 20px 0}.micromag-screen-audio-container .micromag-screen-audio-audio{position:absolute;bottom:50%;left:0;width:100%;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}.micromag-screen-audio-container .micromag-screen-audio-bottomContent{position:relative}.micromag-screen-audio-container .micromag-screen-audio-empty{width:100%;height:100px;margin:0 auto}.micromag-screen-audio-container.micromag-screen-audio-isPreview{pointer-events:none}.micromag-screen-contribution-container .micromag-screen-contribution-content{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit:focus-visible{outline:3px solid #a13dff}.micromag-screen-contribution-container{position:relative}@-webkit-keyframes micromag-screen-contribution-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes micromag-screen-contribution-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputName,.micromag-screen-contribution-container .micromag-screen-contribution-emptySubmit,.micromag-screen-contribution-container .micromag-screen-contribution-emptyTitle{margin-bottom:10px;padding:10px}.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputMessage{height:100px}.micromag-screen-contribution-container .micromag-screen-contribution-title{padding-bottom:20px}.micromag-screen-contribution-container .micromag-screen-contribution-interactiveContainer{-webkit-transition-property:height;-o-transition-property:height;transition-property:height;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-contribution-container .micromag-screen-contribution-form{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit,.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-inputName{display:block;width:100%;padding:4px}.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-inputName{margin-bottom:10px}.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage{height:100px}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit{border:0}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit:disabled{opacity:1}.micromag-screen-contribution-container .micromag-screen-contribution-formContent{-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading{position:absolute;top:50%;left:50%;width:40px;height:40px;margin-top:-20px;margin-left:-20px;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease;-webkit-animation:micromag-screen-contribution-rotate 1s linear infinite;animation:micromag-screen-contribution-rotate 1s linear infinite;opacity:0;pointer-events:none}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading .micromag-screen-contribution-loadingIcon{display:block;width:100%;height:100%}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContainer{position:relative;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease;opacity:0}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContent{position:absolute;width:100%;height:0;overflow:hidden}.micromag-screen-contribution-container .micromag-screen-contribution-contributions{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-contribution{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #fff}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:first-child{padding-top:20px;border-top:1px solid #fff}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}.micromag-screen-contribution-container .micromag-screen-contribution-callToAction{position:absolute;bottom:0;left:0;width:100%}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-form{pointer-events:none}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-formContent{opacity:.4}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-formLoading{opacity:1}.micromag-screen-contribution-container.micromag-screen-contribution-submitted .micromag-screen-contribution-formContent{opacity:0}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-form{display:none}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-contributionsContainer{opacity:1}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-contributionsContent{position:relative;height:auto;overflow:visible}.micromag-screen-contribution-container.micromag-screen-contribution-isPlaceholder .micromag-screen-contribution-content{padding:10px}.micromag-screen-conversation-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-conversation-disabled.micromag-screen-conversation-container{overflow:hidden;pointer-events:none}.micromag-screen-conversation-hidden.micromag-screen-conversation-container{display:none;visibility:hidden}.micromag-screen-conversation-placeholder.micromag-screen-conversation-container .micromag-screen-conversation-content{position:relative;padding:6px}.micromag-screen-conversation-container{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.micromag-screen-conversation-container .micromag-screen-conversation-conversationHeader{width:100%;padding-bottom:16px;font-style:italic}.micromag-screen-conversation-container .micromag-screen-conversation-empty{height:200px}.micromag-screen-conversation-container .micromag-screen-conversation-title{padding-bottom:16px}.micromag-screen-conversation-container .micromag-screen-conversation-callToAction a{padding:0}.micromag-screen-conversation-messageContainer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:#000}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message{max-width:80%;margin:1px 0;padding:10px;-webkit-transition:border-radius .2s ease;-o-transition:border-radius .2s ease;transition:border-radius .2s ease;background-color:#fff;overflow-wrap:break-word}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-normalLeft{border-radius:1px 15px 15px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-inBetweenLeft{border-radius:1px 15px 15px 1px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-normalRight{border-radius:15px 1px 15px 15px;background-color:#58afff}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-inBetweenRight{border-radius:15px 1px 1px 15px;background-color:#58afff}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-message.micromag-screen-conversation-last{margin:1px 0 16px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-speakerDetails{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;width:100%;padding-bottom:10px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-speakerDetails.micromag-screen-conversation-right{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-avatarContainer{width:30px;height:30px;margin-right:10px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-avatarContainer.micromag-screen-conversation-right{margin-right:0;margin-left:10px}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-avatar{display:inline-block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:50%}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-imageContainer{width:100%;height:100%;padding-bottom:10px}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-withAnimation .micromag-screen-conversation-message{-webkit-animation:micromag-screen-conversation-appear .18s ease forwards;animation:micromag-screen-conversation-appear .18s ease forwards}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-withAnimation .micromag-screen-conversation-message.micromag-screen-conversation-normalLeft{-webkit-transform:translate(-300px) scale(.5);-ms-transform:translate(-300px) scale(.5);transform:translate(-300px) scale(.5)}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-withAnimation .micromag-screen-conversation-message.micromag-screen-conversation-inBetweenLeft{border-radius:1px 15px 15px 1px}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-withAnimation .micromag-screen-conversation-message.micromag-screen-conversation-normalRight{-webkit-transform:translate(300px) scale(.5);-ms-transform:translate(300px) scale(.5);transform:translate(300px) scale(.5)}@-webkit-keyframes micromag-screen-conversation-appear{to{-webkit-transform:translate(0) scale(1);transform:translate(0) scale(1)}}@keyframes micromag-screen-conversation-appear{to{-webkit-transform:translate(0) scale(1);transform:translate(0) scale(1)}}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loadingContainer{display:-webkit-flex;display:-ms-flexbox;display:flex;color:#fff}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading,.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loadingContainer{-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin:5px 0 10px;padding:7px 10px;border-radius:10px;background:#fff}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading .micromag-screen-conversation-dot{width:5px;height:5px;margin-right:4px;-webkit-animation:micromag-screen-conversation-bounce .35s linear infinite alternate;animation:micromag-screen-conversation-bounce .35s linear infinite alternate;border-radius:50%;background:#000}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading .micromag-screen-conversation-dot:nth-child(2){-webkit-animation-delay:.08s;animation-delay:.08s}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loading .micromag-screen-conversation-dot:nth-child(3){margin-right:0;-webkit-animation-delay:.16s;animation-delay:.16s}@-webkit-keyframes micromag-screen-conversation-bounce{0%{-webkit-transform:translateY(-2px);transform:translateY(-2px);opacity:.5}to{-webkit-transform:translateY(2px);transform:translateY(2px);opacity:1}}@keyframes micromag-screen-conversation-bounce{0%{-webkit-transform:translateY(-2px);transform:translateY(-2px);opacity:.5}to{-webkit-transform:translateY(2px);transform:translateY(2px);opacity:1}}.micromag-screen-conversation-messageContainer .micromag-screen-conversation-loadingSpeakerName{margin:0 5px;opacity:.6;font-size:12px;font-style:italic}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-right{-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.micromag-screen-conversation-messageContainer.micromag-screen-conversation-right .micromag-screen-conversation-loadingContainer{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.micromag-screen-gallery-container .micromag-screen-gallery-content,.micromag-screen-gallery-container .micromag-screen-gallery-image{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-gallery-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-gallery-disabled.micromag-screen-gallery-container{overflow:hidden;pointer-events:none}.micromag-screen-gallery-hidden.micromag-screen-gallery-container{display:none;visibility:hidden}.micromag-screen-gallery-placeholder.micromag-screen-gallery-container .micromag-screen-gallery-content{position:relative;padding:6px}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption,.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-gallery-container .micromag-screen-gallery-grid{position:relative;height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-placeholder{height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption,.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{width:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption{height:50px;margin-top:10px}.micromag-screen-gallery-container .micromag-screen-gallery-gridItem{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-imageContainer{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-screen-gallery-container .micromag-screen-gallery-caption{padding:10px 0}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyCaption,.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyImage{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-gallery-feed-container{position:relative}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyCaption,.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyImage{width:100%;margin:10px auto}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyImage{height:200px}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-emptyCaption{height:50px}.micromag-screen-gallery-feed-container .micromag-screen-gallery-feed-callToAction{position:absolute;bottom:0;left:0;width:100%}.micromag-screen-gallery-feed-container.micromag-screen-gallery-feed-isPlaceholder .micromag-screen-gallery-feed-layout{padding:10px}.micromag-screen-image-container .micromag-screen-image-image{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-image-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-image-disabled.micromag-screen-image-container{overflow:hidden;pointer-events:none}.micromag-screen-image-hidden.micromag-screen-image-container{display:none;visibility:hidden}.micromag-screen-image-placeholder.micromag-screen-image-container .micromag-screen-image-content{position:relative;padding:6px}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-image-container .micromag-screen-image-content{position:relative;height:100%}.micromag-screen-image-container .micromag-screen-image-emptyImage,.micromag-screen-image-container .micromag-screen-image-emptyLegend,.micromag-screen-image-container .micromag-screen-image-emptyText,.micromag-screen-image-container .micromag-screen-image-emptyTitle{width:100%;margin:10px auto}.micromag-screen-image-container .micromag-screen-image-emptyImage{height:100%}.micromag-screen-image-container .micromag-screen-image-emptyTitle{height:100px}.micromag-screen-image-container .micromag-screen-image-emptyText{height:80px}.micromag-screen-image-container .micromag-screen-image-emptyLegend{height:50px}.micromag-screen-image-container .micromag-screen-image-imageContainer{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-screen-image-container .micromag-screen-image-placeholderImage{height:100%}.micromag-screen-image-container .micromag-screen-image-callToAction{margin-top:-10px}.micromag-screen-image-container.micromag-screen-image-isPlaceholder .micromag-screen-image-layout{padding:10px}.micromag-screen-image-container.micromag-screen-image-isCard .micromag-screen-image-placeholderImage{margin:-10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-placeholderImage{margin:10px -10px 0}.micromag-screen-image-container.micromag-screen-image-isCardReverse .micromag-screen-image-callToAction{position:absolute;bottom:0;left:0;width:100%}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-layout{padding:0}.micromag-screen-image-container.micromag-screen-image-isFullscreen .micromag-screen-image-callToAction{position:absolute;bottom:10px;width:100%;margin-top:0}.micromag-screen-map-container .micromag-screen-map-markerOverlayContainer,.micromag-screen-map-container .micromag-screen-map-markerOverlayScrollable,.micromag-screen-map-container .micromag-screen-map-splash{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-map-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-map-disabled.micromag-screen-map-container{overflow:hidden;pointer-events:none}.micromag-screen-map-hidden.micromag-screen-map-container{display:none;visibility:hidden}.micromag-screen-map-placeholder.micromag-screen-map-container .micromag-screen-map-content{position:relative;padding:6px}.micromag-screen-map-container .micromag-screen-map-placeholder{height:100%}.micromag-screen-map-container .micromag-screen-map-markerOverlayContainer{-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;opacity:0;background-color:rgba(28,28,28,.4);pointer-events:none}.micromag-screen-map-container .micromag-screen-map-markerOverlaySafe{display:block;width:100%}.micromag-screen-map-container .micromag-screen-map-markerOverlay{width:100%;overflow:hidden}.micromag-screen-map-container .micromag-screen-map-markerOverlay,.micromag-screen-map-container .micromag-screen-map-markerOverlayContent{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.micromag-screen-map-container .micromag-screen-map-markerOverlayContent{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:0 20px;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease;background-color:#fff}.micromag-screen-map-container .micromag-screen-map-markerOverlayContentInner{color:#1c1c1c}.micromag-screen-map-container .micromag-screen-map-swipeIndicator{width:30px;margin:10px auto;border:2px solid #adadad;border-radius:2px}.micromag-screen-map-container .micromag-screen-map-splash{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:20px;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;background-color:rgba(28,28,28,.75)}.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-description,.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-title{margin:10px 0}.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-button{display:inline-block}.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-emptyButton,.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-emptyDescription,.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-emptyTitle{width:100%;margin:5px auto}.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-emptyTitle{height:50px}.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-emptyDescription{height:80px}.micromag-screen-map-container .micromag-screen-map-splash .micromag-screen-map-emptyButton{height:70px}.micromag-screen-map-container .micromag-screen-map-splashButton{margin-top:10px}.micromag-screen-map-container .micromag-screen-map-closeButton{display:block;position:absolute;top:20px;right:20px;width:44px;height:44px;padding:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;border-radius:50%;opacity:0;background-color:rgba(43,43,43,.8);font-size:30px;line-height:0;text-align:center;pointer-events:none}.micromag-screen-map-container .micromag-screen-map-markerDescription,.micromag-screen-map-container .micromag-screen-map-markerImage,.micromag-screen-map-container .micromag-screen-map-markerSubtitle,.micromag-screen-map-container .micromag-screen-map-markerTitle{margin-bottom:20px}.micromag-screen-map-container.micromag-screen-map-hasSelectedMarker .micromag-screen-map-markerOverlayContainer{opacity:1;pointer-events:auto}.micromag-screen-map-container.micromag-screen-map-hasSelectedMarker .micromag-screen-map-markerOverlayContent{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.micromag-screen-map-container.micromag-screen-map-opened .micromag-screen-map-splash{opacity:0;pointer-events:none}.micromag-screen-map-container.micromag-screen-map-opened .micromag-screen-map-closeButton{opacity:1;pointer-events:all}.micromag-screen-quiz-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-quiz-disabled.micromag-screen-quiz-container{overflow:hidden;pointer-events:none}.micromag-screen-quiz-hidden.micromag-screen-quiz-container{display:none;visibility:hidden}.micromag-screen-quiz-placeholder.micromag-screen-quiz-container .micromag-screen-quiz-content{position:relative;padding:6px}.micromag-screen-quiz-container .micromag-screen-quiz-emptyAnswer,.micromag-screen-quiz-container .micromag-screen-quiz-emptyResult,.micromag-screen-quiz-container .micromag-screen-quiz-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-quiz-container .micromag-screen-quiz-button:focus-visible{outline:3px solid #a13dff}.micromag-screen-quiz-container .micromag-screen-quiz-question{margin-bottom:10px}.micromag-screen-quiz-container .micromag-screen-quiz-answers,.micromag-screen-quiz-container .micromag-screen-quiz-items{position:relative}.micromag-screen-quiz-container .micromag-screen-quiz-item{-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:.15s;-o-transition-duration:.15s;transition-duration:.15s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-quiz-container .micromag-screen-quiz-item.micromag-screen-quiz-rightAnswer{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.micromag-screen-quiz-container .micromag-screen-quiz-item.micromag-screen-quiz-rightAnswer .micromag-screen-quiz-resultIcon{background-color:#0ed88f}.micromag-screen-quiz-container .micromag-screen-quiz-itemContent{padding:5px 0}.micromag-screen-quiz-container .micromag-screen-quiz-button{position:relative;width:100%;padding:10px 40px;border:2px solid #6c6c6c}.micromag-screen-quiz-container .micromag-screen-quiz-button:disabled{opacity:1;pointer-events:none}.micromag-screen-quiz-container .micromag-screen-quiz-resultIcon{display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;top:50%;left:5px;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:32px;height:32px;margin-top:-16px;padding:5px;-webkit-transition:opacity .15s ease;-o-transition:opacity .15s ease;transition:opacity .15s ease;border:2px solid #1c1c1c;border-radius:50%;opacity:0;background-color:#ff2945}.micromag-screen-quiz-container .micromag-screen-quiz-result{position:absolute;-webkit-transition:opacity .5s ease;-o-transition:opacity .5s ease;transition:opacity .5s ease;opacity:0;pointer-events:none}.micromag-screen-quiz-container .micromag-screen-quiz-resultContent{padding:20px 0}.micromag-screen-quiz-container .micromag-screen-quiz-emptyAnswer,.micromag-screen-quiz-container .micromag-screen-quiz-emptyResult,.micromag-screen-quiz-container .micromag-screen-quiz-emptyTitle{width:100%;margin:0 auto}.micromag-screen-quiz-container .micromag-screen-quiz-emptyTitle{height:60px}.micromag-screen-quiz-container .micromag-screen-quiz-emptyAnswer{height:50px}.micromag-screen-quiz-container .micromag-screen-quiz-emptyResult{height:100px}.micromag-screen-quiz-container .micromag-screen-quiz-callToAction{position:absolute;bottom:0;left:0;width:100%}.micromag-screen-quiz-container.micromag-screen-quiz-answered .micromag-screen-quiz-resultIcon{opacity:1}.micromag-screen-quiz-container.micromag-screen-quiz-showResults .micromag-screen-quiz-item{opacity:0}.micromag-screen-quiz-container.micromag-screen-quiz-showResults .micromag-screen-quiz-item.micromag-screen-quiz-rightAnswer{opacity:1}.micromag-screen-quiz-container.micromag-screen-quiz-answerTransitionComplete .micromag-screen-quiz-item.micromag-screen-quiz-rightAnswer{-webkit-transition:none;-o-transition:none;transition:none}.micromag-screen-quiz-container.micromag-screen-quiz-answerTransitionComplete .micromag-screen-quiz-result{position:relative;opacity:1;pointer-events:all}.micromag-screen-quiz-container.micromag-screen-quiz-isPlaceholder .micromag-screen-quiz-layout{padding:10px}.micromag-screen-quiz-container.micromag-screen-quiz-isPlaceholder .micromag-screen-quiz-item{padding:1px 0}.micromag-screen-quote-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-quote-disabled.micromag-screen-quote-container{overflow:hidden;pointer-events:none}.micromag-screen-quote-hidden.micromag-screen-quote-container{display:none;visibility:hidden}.micromag-screen-quote-placeholder.micromag-screen-quote-container .micromag-screen-quote-content{position:relative;padding:6px}.micromag-screen-quote-container .micromag-screen-quote-emptyAuthor,.micromag-screen-quote-container .micromag-screen-quote-emptyQuote{border:2px dashed #343434;color:#343434;width:100%;margin:10px auto}.micromag-screen-quote-container .micromag-screen-quote-emptyQuote{height:200px}.micromag-screen-quote-container .micromag-screen-quote-emptyAuthor{height:50px}.micromag-screen-quote-container .micromag-screen-quote-quote{font-size:2em}.micromag-screen-quote-container .micromag-screen-quote-quote.micromag-screen-quote-withMargin{margin-bottom:1em}.micromag-screen-quote-container.micromag-screen-quote-isPlaceholder .micromag-screen-quote-layout{padding:10px}.micromag-screen-ranking-container .micromag-screen-ranking-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-ranking-container{position:relative}.micromag-screen-ranking-container .micromag-screen-ranking-empty{height:50px;margin-right:10px}.micromag-screen-ranking-container .micromag-screen-ranking-item{position:relative;padding:10px 0}.micromag-screen-ranking-container .micromag-screen-ranking-rankText{font-size:48px}.micromag-screen-ranking-container .micromag-screen-ranking-description,.micromag-screen-ranking-container .micromag-screen-ranking-title{padding:8px 0}.micromag-screen-ranking-container .micromag-screen-ranking-callToAction{position:absolute;bottom:0;left:0;width:100%}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-layout{display:table;width:100%}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-item{display:table-row;padding:0}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-content,.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{display:table-cell;padding:10px 0;vertical-align:top}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{padding-right:20px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-rank{color:rgba(28,28,28,.5);font-size:16px;text-align:left}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-scroll{padding:5px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-description,.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-title{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:0}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-item{padding:1px 0}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{width:24px;padding-top:8px;padding-right:4px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder.micromag-screen-ranking-sideLayout .micromag-screen-ranking-content{padding:5px 0}.micromag-screen-survey-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-survey-disabled.micromag-screen-survey-container{overflow:hidden;pointer-events:none}.micromag-screen-survey-hidden.micromag-screen-survey-container{display:none;visibility:hidden}.micromag-screen-survey-placeholder.micromag-screen-survey-container .micromag-screen-survey-content{position:relative;padding:6px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-survey-container .micromag-screen-survey-question{margin-bottom:20px}.micromag-screen-survey-container .micromag-screen-survey-answers,.micromag-screen-survey-container .micromag-screen-survey-items{position:relative}.micromag-screen-survey-container .micromag-screen-survey-item{padding:5px 0}.micromag-screen-survey-container .micromag-screen-survey-item:first-child .micromag-screen-survey-placeholderAnswer{width:80%}.micromag-screen-survey-container .micromag-screen-survey-item:last-child .micromag-screen-survey-placeholderAnswer{width:90%}.micromag-screen-survey-container .micromag-screen-survey-itemContent{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-screen-survey-container .micromag-screen-survey-resultContainer{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;padding:15px 0;-webkit-transition-property:padding;-o-transition-property:padding;transition-property:padding;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-survey-container .micromag-screen-survey-resultContent{width:0;height:1em;-webkit-transition-property:width opacity;-o-transition-property:width opacity;transition-property:width opacity;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;opacity:0}.micromag-screen-survey-container .micromag-screen-survey-result{position:relative;height:100%;background-color:#fff}.micromag-screen-survey-container .micromag-screen-survey-resultLabel{position:absolute;top:50%;left:100%;margin-left:5px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);color:#fff}.micromag-screen-survey-container .micromag-screen-survey-itemInner{width:100%;-webkit-transition-property:width;-o-transition-property:width;transition-property:width;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-survey-container .micromag-screen-survey-button{position:relative;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;padding:0;border:2px solid #6c6c6c;-webkit-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out}.micromag-screen-survey-container .micromag-screen-survey-button:disabled{opacity:1;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-itemLabel{display:inline-block;padding:10px;margin-left:50%;-webkit-transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;-o-transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%)}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{width:100%;margin:0 auto}.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{height:75px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer{height:50px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContainer{padding-right:50px;padding-left:15px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContent{width:100%;opacity:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0)}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-result,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultLabel{opacity:.6}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-itemLabel{margin-left:0;text-align:left;-webkit-transform:translate(-10px);-ms-transform:translate(-10px);transform:translate(-10px)}.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-button,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-result,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-resultLabel{opacity:1}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-layout{padding:10px}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-item{padding:1px 0}.micromag-screen-text-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-text-disabled.micromag-screen-text-container{overflow:hidden;pointer-events:none}.micromag-screen-text-hidden.micromag-screen-text-container{display:none;visibility:hidden}.micromag-screen-text-placeholder.micromag-screen-text-container .micromag-screen-text-content{position:relative;padding:6px}.micromag-screen-text-container .micromag-screen-text-emptyText,.micromag-screen-text-container .micromag-screen-text-emptyTitle{border:2px dashed #343434;color:#343434;width:100%;margin:10px auto}.micromag-screen-text-container .micromag-screen-text-emptyTitle{height:100px}.micromag-screen-text-container .micromag-screen-text-emptyText{height:50px}.micromag-screen-text-container .micromag-screen-text-title.micromag-screen-text-withMargin{margin-bottom:20px}.micromag-screen-text-container.micromag-screen-text-isPlaceholder .micromag-screen-text-layout{padding:10px}.micromag-screen-timeline-container .micromag-screen-timeline-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-timeline-container{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-empty{height:50px;margin-right:10px}.micromag-screen-timeline-container .micromag-screen-timeline-item{position:relative}.micromag-screen-timeline-container .micromag-screen-timeline-element,.micromag-screen-timeline-container .micromag-screen-timeline-timeline{display:-webkit-flex;display:-ms-flexbox;display:flex}.micromag-screen-timeline-container .micromag-screen-timeline-timeline{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:15px;padding-right:20px}.micromag-screen-timeline-container .micromag-screen-timeline-line{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:1px}.micromag-screen-timeline-container .micromag-screen-timeline-line.micromag-screen-timeline-hidden{width:auto}.micromag-screen-timeline-container .micromag-screen-timeline-bullet{width:15px;height:15px;margin:2px 0;border-width:1px;border-style:solid}.micromag-screen-timeline-container .micromag-screen-timeline-content{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-screen-timeline-container .micromag-screen-timeline-content.micromag-screen-timeline-lastContent{margin-bottom:20px}.micromag-screen-timeline-container .micromag-screen-timeline-description,.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container .micromag-screen-timeline-title{padding:8px 0}.micromag-screen-timeline-container .micromag-screen-timeline-imageContainer{position:relative;overflow:hidden}.micromag-screen-timeline-container .micromag-screen-timeline-callToAction{position:absolute;bottom:0;left:0;width:100%}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-scroll{padding:10px}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-timeline{padding-right:0}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-bullet{width:10px;height:10px;border-color:rgba(28,28,28,.5);background-color:rgba(28,28,28,.5)}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-content.micromag-screen-timeline-lastContent{margin-bottom:4px}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-description,.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-imageContainer,.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-title{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%;padding:2px 0}.micromag-screen-timeline-container.micromag-screen-timeline-isPlaceholder .micromag-screen-timeline-line{background-color:rgba(28,28,28,.5)}.micromag-screen-timeline-container.micromag-screen-timeline-circleBulletShape .micromag-screen-timeline-bullet{border-radius:50%}.micromag-screen-timeline-container.micromag-screen-timeline-withoutLines .micromag-screen-timeline-timeline{visibility:hidden}.micromag-screen-title-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-title-disabled.micromag-screen-title-container{overflow:hidden;pointer-events:none}.micromag-screen-title-hidden.micromag-screen-title-container{display:none;visibility:hidden}.micromag-screen-title-placeholder.micromag-screen-title-container .micromag-screen-title-content{position:relative;padding:6px}.micromag-screen-title-container .micromag-screen-title-emptyDescription,.micromag-screen-title-container .micromag-screen-title-emptySubtitle,.micromag-screen-title-container .micromag-screen-title-emptyTitle{border:2px dashed #343434;color:#343434;width:100%;margin:10px auto}.micromag-screen-title-container .micromag-screen-title-emptyTitle{height:100px}.micromag-screen-title-container .micromag-screen-title-emptyDescription,.micromag-screen-title-container .micromag-screen-title-emptySubtitle{height:50px}.micromag-screen-title-container .micromag-screen-title-subtitle.micromag-screen-title-withMargin,.micromag-screen-title-container .micromag-screen-title-title.micromag-screen-title-withMargin{margin-bottom:.2em}.micromag-screen-title-container.micromag-screen-title-isPlaceholder .micromag-screen-title-layout{padding:10px}.micromag-screen-video-container .micromag-screen-video-content,.micromag-screen-video-container .micromag-screen-video-empty,.micromag-screen-video-container .micromag-screen-video-emptyContainer,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-image,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-placeholder,.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-video-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-video-disabled.micromag-screen-video-container{overflow:hidden;pointer-events:none}.micromag-screen-video-hidden.micromag-screen-video-container{display:none;visibility:hidden}.micromag-screen-video-placeholder.micromag-screen-video-container .micromag-screen-video-content{position:relative;padding:6px}.micromag-screen-video-container .micromag-screen-video-empty{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-video-container .micromag-screen-video-emptyContainer{top:50%;height:0;padding-bottom:56.25%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.micromag-screen-video-container .micromag-screen-video-empty{margin:0}.micromag-screen-video-container .micromag-screen-video-content{overflow:hidden}.micromag-screen-video-container .micromag-screen-video-mediaControls{padding:10px 20px 20px}.micromag-screen-video-container .micromag-screen-video-placeholder{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}.micromag-screen-video-container .micromag-screen-video-videoContainer{position:absolute}.micromag-screen-video-container .micromag-screen-video-bottomContent{position:absolute;bottom:0;width:100%}.micromag-screen-video-container.micromag-screen-video-fullscreen .micromag-screen-video-emptyContainer{top:0;height:100%;padding-bottom:0;-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-video-360-container .micromag-screen-video-360-canvasButton{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-screen-video-360-container .micromag-screen-video-360-canvas,.micromag-screen-video-360-container .micromag-screen-video-360-canvasButton,.micromag-screen-video-360-container .micromag-screen-video-360-content,.micromag-screen-video-360-container .micromag-screen-video-360-placeholder,.micromag-screen-video-360-container .micromag-screen-video-360-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-video-360-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-video-360-disabled.micromag-screen-video-360-container{overflow:hidden;pointer-events:none}.micromag-screen-video-360-hidden.micromag-screen-video-360-container{display:none;visibility:hidden}.micromag-screen-video-360-placeholder.micromag-screen-video-360-container .micromag-screen-video-360-content{position:relative;padding:6px}.micromag-screen-video-360-container .micromag-screen-video-360-empty{border:2px dashed #343434;color:#343434;height:100%;margin:0}.micromag-screen-video-360-container .micromag-screen-video-360-canvasButton{-ms-touch-action:none;touch-action:none}.micromag-screen-video-360-container .micromag-screen-video-360-videoContainer{position:absolute}.micromag-screen-video-360-container .micromag-screen-video-360-video{visibility:hidden}.micromag-screen-video-360-container .micromag-screen-video-360-video video{height:100%}.micromag-screen-video-360-container .micromag-screen-video-360-mediaControls{padding:10px 20px 20px}.micromag-screen-video-360-container .micromag-screen-video-360-placeholder{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}.micromag-screen-video-360-container .micromag-screen-video-360-bottomContent{position:absolute;bottom:0;width:100%}.micromag-screen-video-360-container.micromag-screen-video-360-showVideo .micromag-screen-video-360-video{visibility:visible}.micromag-element-audio-audio-wave-container .micromag-element-audio-audio-wave-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-element-audio-audio-wave-container .micromag-element-audio-audio-wave-button,.micromag-element-audio-audio-wave-container .micromag-element-audio-audio-wave-canvasBackground,.micromag-element-audio-audio-wave-container .micromag-element-audio-audio-wave-canvasProgress{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-element-audio-audio-wave-container{position:relative;height:100px;-ms-touch-action:pan-y;touch-action:pan-y}.micromag-element-audio-container .micromag-element-audio-wave{height:150px}.micromag-element-background-container,.micromag-element-background-layer,.micromag-element-background-layers,.micromag-element-background-video,.micromag-element-background-videoContainer{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-element-background-container{z-index:0;overflow:hidden}.micromag-element-background-layer,.micromag-element-background-layers{z-index:0}.micromag-element-background-right .micromag-element-background-background{right:0;left:auto}.micromag-element-background-bottom .micromag-element-background-background{top:auto;bottom:0}.micromag-element-button-container{display:inline-block;position:relative;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:5px 10px;border-radius:0;background-color:hsla(0,0%,100%,.1)}.micromag-element-button-container.micromag-element-button-active,.micromag-element-button-container.micromag-element-button-focus,.micromag-element-button-container:active,.micromag-element-button-container:focus{-webkit-box-shadow:none!important;box-shadow:none!important}.micromag-element-button-container.micromag-element-button-disabled,.micromag-element-button-container:disabled{cursor:auto}@-webkit-keyframes micromag-element-call-to-action-appear{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes micromag-element-call-to-action-appear{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.micromag-element-call-to-action-container{position:relative;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;opacity:1;text-align:center}.micromag-element-call-to-action-container .micromag-element-call-to-action-arrow{-webkit-animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate;animation:micromag-element-call-to-action-upAndDown .5s ease-in-out infinite alternate}.micromag-element-call-to-action-container .micromag-element-call-to-action-label{display:block}.micromag-element-call-to-action-container .micromag-element-call-to-action-button{display:block;margin:0 auto;padding:20px 0;-ms-touch-action:none;touch-action:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-button:hover{text-decoration:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-selfTargetLink{display:none}.micromag-element-call-to-action-container .micromag-element-call-to-action-leavingFrame{position:fixed;top:0;left:0;width:100vw;height:100vh;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:micromag-element-call-to-action-appear .5s ease both;animation:micromag-element-call-to-action-appear .5s ease both;opacity:0;background-color:#fff}.micromag-element-call-to-action-container.micromag-element-call-to-action-animationDisabled .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl{opacity:.5;pointer-events:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-invalidUrl .micromag-element-call-to-action-arrow{-webkit-animation:none;animation:none}.micromag-element-call-to-action-container.micromag-element-call-to-action-disabled{opacity:0;pointer-events:none}@-webkit-keyframes micromag-element-call-to-action-upAndDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(25%);transform:translateY(25%)}}@keyframes micromag-element-call-to-action-upAndDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(25%);transform:translateY(25%)}}.micromag-element-checkbox-container{position:relative}.micromag-element-checkbox-container .micromag-element-checkbox-label{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;margin-bottom:0}.micromag-element-checkbox-container .micromag-element-checkbox-input{margin-right:5px}.micromag-element-closed-captions-container{position:relative;text-align:center}.micromag-element-closed-captions-container .micromag-element-closed-captions-captions{display:inline-block;padding:10px;background-color:#1c1c1c;color:#fff;word-break:break-word}.micromag-element-container-container{position:relative;overflow:hidden}.micromag-element-grid-container{position:relative}.micromag-element-grid-container .micromag-element-grid-items{-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;height:100%}.micromag-element-grid-container .micromag-element-grid-cross,.micromag-element-grid-container .micromag-element-grid-items{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative}.micromag-element-grid-container .micromag-element-grid-axis{position:relative}.micromag-element-heading-container em,.micromag-element-heading-container i{font-style:italic}.micromag-element-heading-container b,.micromag-element-heading-container strong{font-weight:700}.micromag-element-heading-container p{margin-top:.5em;margin-bottom:.5em}.micromag-element-heading-container mark{padding:0;-webkit-box-decoration-break:clone;box-decoration-break:clone}.micromag-element-heading-container{line-height:1}.micromag-element-heading-container,.micromag-element-heading-container p{margin:0;padding:0}.micromag-element-image-container .micromag-element-image-showEmpty{margin:5px auto}.micromag-element-image-container{position:relative;overflow:hidden}.micromag-element-image-container .micromag-element-image-img{display:block;position:relative}.micromag-element-image-container .micromag-element-image-showEmpty{width:300px;height:200px;border:2px dashed #343434;color:#343434}.micromag-element-layout-container.micromag-element-layout-fullscreen{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-element-layout-container{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.micromag-element-layout-container,.micromag-element-layout-container .micromag-element-layout-horizontal{display:-webkit-flex;display:-ms-flexbox;display:flex}.micromag-element-layout-container .micromag-element-layout-horizontal{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.micromag-element-link-container{margin:0;padding:0}.micromag-element-map-container,.micromag-element-map-container .micromag-element-map-map{width:100%;height:100%}.micromag-element-map-container.micromag-element-map-preventScroll .micromag-element-map-map div{cursor:default}.micromag-element-map-container{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0}.micromag-element-media-controls-seek-bar-container .micromag-element-media-controls-seek-bar-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-element-media-controls-seek-bar-container .micromag-element-media-controls-seek-bar-button,.micromag-element-media-controls-seek-bar-container .micromag-element-media-controls-seek-bar-progress{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-element-media-controls-seek-bar-container{position:relative;height:10px}.micromag-element-media-controls-seek-bar-container .micromag-element-media-controls-seek-bar-progress{position:relative;-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}.micromag-element-media-controls-container .micromag-element-media-controls-muteButton,.micromag-element-media-controls-container .micromag-element-media-controls-playPauseButton{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-element-media-controls-container .micromag-element-media-controls-toggles{position:relative;color:#fff}.micromag-element-media-controls-container .micromag-element-media-controls-seekBar{margin-bottom:10px}.micromag-element-media-controls-container .micromag-element-media-controls-muteButton,.micromag-element-media-controls-container .micromag-element-media-controls-playPauseButton{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:60px;height:60px}.micromag-element-media-controls-container .micromag-element-media-controls-playPauseButton{visibility:hidden;margin:0 auto;border:2px solid #fff;border-radius:50%}.micromag-element-media-controls-container .micromag-element-media-controls-playPauseButton .micromag-element-media-controls-icon{display:block;width:40%;height:40%;-webkit-transform:translateX(5%);-ms-transform:translateX(5%);transform:translateX(5%)}.micromag-element-media-controls-container .micromag-element-media-controls-muteButton{visibility:hidden;position:absolute;top:50%;right:0;width:40px;height:40px;margin-top:-20px}.micromag-element-media-controls-container .micromag-element-media-controls-muteButton .micromag-element-media-controls-icon{display:block;width:90%;height:90%}.micromag-element-media-controls-container .micromag-element-media-controls-muteButton:after{content:"";display:none;position:absolute;top:0;left:50%;width:2px;height:100%;margin-left:-1px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);background-color:#fff}.micromag-element-media-controls-container.micromag-element-media-controls-playing .micromag-element-media-controls-playPauseButton .micromag-element-media-controls-icon{-webkit-transform:none;-ms-transform:none;transform:none}.micromag-element-media-controls-container.micromag-element-media-controls-muted .micromag-element-media-controls-muteButton{visibility:visible}.micromag-element-media-controls-container.micromag-element-media-controls-muted .micromag-element-media-controls-muteButton:after{display:block}.micromag-element-media-controls-container.micromag-element-media-controls-withPlayPause .micromag-element-media-controls-playPauseButton{visibility:visible}.micromag-element-quote-container{font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.1}.micromag-element-quote-container em,.micromag-element-quote-container i{font-style:italic}.micromag-element-quote-container b,.micromag-element-quote-container strong{font-weight:700}.micromag-element-quote-container p{margin-top:.5em;margin-bottom:.5em}.micromag-element-quote-container mark{padding:0;-webkit-box-decoration-break:clone;box-decoration-break:clone}.micromag-element-quote-container{line-height:1.3}.micromag-element-quote-container h2{font-size:2em}.micromag-element-quote-container h3{font-size:1.75em}.micromag-element-quote-container h4{font-size:1.5em}.micromag-element-quote-container blockquote{padding:0 0 0 1em}.micromag-element-quote-container{margin:0;padding:0}.micromag-element-quote-container.micromag-element-quote-showEmpty{display:inline-block;width:300px;height:80px;border:2px dashed #343434;color:#343434}.micromag-element-scroll-container.micromag-element-scroll-withScroll .micromag-element-scroll-scrollable{scrollbar-width:none}.micromag-element-scroll-container.micromag-element-scroll-withScroll .micromag-element-scroll-scrollable::-webkit-scrollbar{display:none}.micromag-element-scroll-container{position:relative;height:100%;min-height:inherit;margin:0 auto}.micromag-element-scroll-container .micromag-element-scroll-scrollable{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;min-height:inherit}.micromag-element-scroll-container .micromag-element-scroll-arrowContainer{position:absolute;bottom:0;left:0;width:100%;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;opacity:0;text-align:center;pointer-events:none}.micromag-element-scroll-container .micromag-element-scroll-arrow{display:inline-block;width:20px;height:20px;-webkit-animation:micromag-element-scroll-upAndDown .75s ease-in-out infinite alternate;animation:micromag-element-scroll-upAndDown .75s ease-in-out infinite alternate;color:#fff}.micromag-element-scroll-container .micromag-element-scroll-arrow path{stroke-width:20;stroke:#1c1c1c}.micromag-element-scroll-container.micromag-element-scroll-withScroll .micromag-element-scroll-scrollable{overflow-x:hidden;overflow-y:auto}.micromag-element-scroll-container.micromag-element-scroll-withScroll.micromag-element-scroll-containOverscroll .micromag-element-scroll-scrollable,.micromag-element-scroll-container.micromag-element-scroll-withScroll .micromag-element-scroll-scrollable{-ms-scroll-chaining:none;overscroll-behavior:contain}.micromag-element-scroll-container.micromag-element-scroll-top .micromag-element-scroll-scrollee{margin-bottom:auto}.micromag-element-scroll-container.micromag-element-scroll-middle .micromag-element-scroll-scrollee{margin:auto 0}.micromag-element-scroll-container.micromag-element-scroll-bottom .micromag-element-scroll-scrollee{margin-top:auto}.micromag-element-scroll-container.micromag-element-scroll-withArrow .micromag-element-scroll-arrowContainer{opacity:1}@-webkit-keyframes micromag-element-scroll-upAndDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes micromag-element-scroll-upAndDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.micromag-element-stack-spacer-container{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-element-stack-spacer-container.micromag-element-stack-spacer-hasSize{-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0}.micromag-element-stack-container{display:-webkit-flex;display:-ms-flexbox;display:flex}.micromag-element-text-container{font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.1}.micromag-element-text-container em,.micromag-element-text-container i{font-style:italic}.micromag-element-text-container b,.micromag-element-text-container strong{font-weight:700}.micromag-element-text-container p{margin-top:.5em;margin-bottom:.5em}.micromag-element-text-container mark{padding:0;-webkit-box-decoration-break:clone;box-decoration-break:clone}.micromag-element-text-container{line-height:1.3}.micromag-element-text-container h2{font-size:2em}.micromag-element-text-container h3{font-size:1.75em}.micromag-element-text-container h4{font-size:1.5em}.micromag-element-text-container blockquote{padding:0 0 0 1em}.micromag-element-text-container{margin:0;padding:0}.micromag-element-text-container.micromag-element-text-showEmpty{display:inline-block;width:300px;height:80px;border:2px dashed #343434;color:#343434}.micromag-element-text-container.micromag-element-text-withLineClamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.micromag-element-text-input-container{font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.1}.micromag-element-text-input-container em,.micromag-element-text-input-container i{font-style:italic}.micromag-element-text-input-container b,.micromag-element-text-input-container strong{font-weight:700}.micromag-element-text-input-container p{margin-top:.5em;margin-bottom:.5em}.micromag-element-text-input-container mark{padding:0;-webkit-box-decoration-break:clone;box-decoration-break:clone}.micromag-element-text-input-container{line-height:1.3}.micromag-element-text-input-container h2{font-size:2em}.micromag-element-text-input-container h3{font-size:1.75em}.micromag-element-text-input-container h4{font-size:1.5em}.micromag-element-text-input-container blockquote{padding:0 0 0 1em}.micromag-element-text-input-container{margin:0;padding:0}.micromag-element-text-input-element{border:0;outline:0;background-color:hsla(0,0%,100%,.1)}.micromag-element-video-container.micromag-element-video-withSize .micromag-element-video-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-element-video-container{position:relative}.micromag-element-video-container .micromag-element-video-video{display:block;width:100%}.micromag-element-visual-container{position:relative;overflow:hidden}.micromag-element-visual-container .micromag-element-visual-videoContainer{position:absolute;overflow:hidden}.sr-only:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;-webkit-clip-path:inset(50%);clip-path:inset(50%)}

package/es/index.js CHANGED Viewed

@@ -12,17 +12,17 @@ import { ScreenSizeProvider, ViewerProvider, useRoutes, useRoutePush, GoogleKeys
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { Helmet } from 'react-helmet';
+import { Button, ScreenPreview, Screen, Meta, FontFaces } from '@micromag/core/components';
+import { useDocumentEvent, useParsedStory, useLoadedFonts, useTrackScreenView, useTrackEvent, useScreenSizeFromElement, useResizeObserver, useFullscreen } from '@micromag/core/hooks';
+import { getStyleFromColor, getStyleFromText, getDeviceScreens } from '@micromag/core/utils';
+import { useSpring, config } from '@react-spring/core';
+import { animated } from '@react-spring/web';
 import classNames from 'classnames';
+import { Helmet } from 'react-helmet';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { useDrag } from 'react-use-gesture';
-import { useSpring, config } from '@react-spring/core';
-import { animated } from '@react-spring/web';
-import { useDocumentEvent, useParsedStory, useLoadedFonts, useTrackScreenView, useTrackEvent, useScreenSizeFromElement, useResizeObserver, useFullscreen } from '@micromag/core/hooks';
-import { getStyleFromColor, getStyleFromText, getDeviceScreens } from '@micromag/core/utils';
-import { Screen, Button, ScreenPreview, Meta, FontFaces } from '@micromag/core/components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes, faShare, faCompress, faExpand } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Scroll from '@micromag/element-scroll';
 import { FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, EmailShareButton, EmailIcon } from 'react-share';
@@ -31,71 +31,19 @@ var routes = PropTypes.shape({
   screen: PropTypes.string.isRequired
 });
-var styles$6 = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
+var styles$6 = {"container":"micromag-viewer-container","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screen":"micromag-viewer-screen","screenInner":"micromag-viewer-screenInner","content":"micromag-viewer-content","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","current":"micromag-viewer-current","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready"};
-var propTypes$8 = {
-  screen: PropTypes$1.screenComponent,
-  renderContext: PropTypes$1.renderContext,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  onPrevious: PropTypes.func,
-  onNext: PropTypes.func,
-  onEnableInteraction: PropTypes.func,
-  onDisableInteraction: PropTypes.func,
-  getMediaRef: PropTypes.func
-};
-var defaultProps$8 = {
-  screen: null,
-  renderContext: null,
-  current: false,
-  active: true,
-  onPrevious: null,
-  onNext: null,
-  onEnableInteraction: null,
-  onDisableInteraction: null,
-  getMediaRef: null
-};
+var styles$5 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","item":"micromag-viewer-menus-menu-dots-item","button":"micromag-viewer-menus-menu-dots-button","menuButton":"micromag-viewer-menus-menu-dots-menuButton","items":"micromag-viewer-menus-menu-dots-items","dot":"micromag-viewer-menus-menu-dots-dot","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
-var ViewerScreen = function ViewerScreen(_ref) {
-  var _ref2;
+var styles$4 = {};
-  var screen = _ref.screen,
-      renderContext = _ref.renderContext,
-      active = _ref.active,
-      current = _ref.current,
-      onPrevious = _ref.onPrevious,
-      onNext = _ref.onNext,
-      onEnableInteraction = _ref.onEnableInteraction,
-      onDisableInteraction = _ref.onDisableInteraction,
-      getMediaRef = _ref.getMediaRef;
-  return screen !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$6.container, (_ref2 = {}, _defineProperty(_ref2, styles$6.active, active), _defineProperty(_ref2, styles$6.current, current), _ref2)]),
-    "aria-hidden": current ? null : 'true'
-  }, /*#__PURE__*/React.createElement(Screen, {
-    screen: screen,
-    renderContext: renderContext,
-    active: active,
-    current: current,
-    onPrevious: onPrevious,
-    onNext: onNext,
-    onEnableInteraction: onEnableInteraction,
-    onDisableInteraction: onDisableInteraction,
-    getMediaRef: getMediaRef
-  })) : null;
-};
-ViewerScreen.propTypes = propTypes$8;
-ViewerScreen.defaultProps = defaultProps$8;
-var styles$5 = {};
-var propTypes$7 = {
+var propTypes$8 = {
   size: PropTypes.number,
   spacing: PropTypes.number,
   color: PropTypes.string,
   className: PropTypes.string
 };
-var defaultProps$7 = {
+var defaultProps$8 = {
   size: 100,
   spacing: 8,
   color: 'white',
@@ -109,7 +57,7 @@ var MenuIcon = function MenuIcon(_ref) {
       className = _ref.className;
   var squareSize = (size - 2 * spacing) / 3;
   return /*#__PURE__*/React.createElement("svg", {
-    className: classNames([styles$5.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$4.container, _defineProperty({}, className, className !== null)]),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 ".concat(size, " ").concat(size),
     "aria-hidden": "true"
@@ -127,52 +75,57 @@ var MenuIcon = function MenuIcon(_ref) {
   }));
 };
-MenuIcon.propTypes = propTypes$7;
-MenuIcon.defaultProps = defaultProps$7;
-var styles$4 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","item":"micromag-viewer-menus-menu-dots-item","button":"micromag-viewer-menus-menu-dots-button","menuButton":"micromag-viewer-menus-menu-dots-menuButton","items":"micromag-viewer-menus-menu-dots-items","dot":"micromag-viewer-menus-menu-dots-dot","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
+MenuIcon.propTypes = propTypes$8;
+MenuIcon.defaultProps = defaultProps$8;
-var propTypes$6 = {
+var propTypes$7 = {
   direction: PropTypes.oneOf(['horizontal', 'vertical']),
   withShadow: PropTypes.bool,
   items: PropTypes$1.menuItems,
   current: PropTypes.number,
   onClickItem: PropTypes.func,
-  colorAccent: PropTypes.string,
-  colorBackground: PropTypes.string,
+  colors: PropTypes.shape({
+    primary: PropTypes.string,
+    secondary: PropTypes.string
+  }),
   closeable: PropTypes.bool,
   onClose: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$6 = {
+var defaultProps$7 = {
   direction: 'horizontal',
   withShadow: false,
   items: [],
   current: 0,
   onClickItem: null,
-  colorAccent: 'rgba(255, 255, 255, 1)',
-  colorBackground: 'rgba(200, 200, 200, 0.5)',
+  colors: null,
   closeable: false,
   onClose: null,
   className: null
 };
 var ViewerMenuDots = function ViewerMenuDots(_ref) {
-  var _ref2;
+  var _ref3;
   var direction = _ref.direction,
       withShadow = _ref.withShadow,
       items = _ref.items,
       current = _ref.current,
       onClickItem = _ref.onClickItem,
-      colorAccent = _ref.colorAccent,
-      colorBackground = _ref.colorBackground,
+      colors = _ref.colors,
       closeable = _ref.closeable,
       onClose = _ref.onClose,
       className = _ref.className;
+  var _ref2 = colors || {},
+      _ref2$primary = _ref2.primary,
+      primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary,
+      _ref2$secondary = _ref2.secondary,
+      secondary = _ref2$secondary === void 0 ? 'rgba(200, 200, 200, 0.5)' : _ref2$secondary;
   var intl = useIntl();
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$4.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$4.vertical, direction === 'vertical'), _defineProperty(_ref2, styles$4.withShadow, withShadow), _ref2)]),
+    className: classNames([styles$5.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles$5.vertical, direction === 'vertical'), _defineProperty(_ref3, styles$5.withShadow, withShadow), _ref3)]),
     "aria-label": intl.formatMessage({
       "id": "bLYuuN",
       "defaultMessage": [{
@@ -196,15 +149,15 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       total: items.length
     })
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$4.items
+    className: styles$5.items
   }, items.map(function (item, index) {
     return /*#__PURE__*/React.createElement("li", {
-      className: classNames([styles$4.item, _defineProperty({}, styles$4.active, current === index)]),
+      className: classNames([styles$5.item, _defineProperty({}, styles$5.active, current === index)]),
       key: "item-".concat(index),
       "aria-hidden": "true"
     }, /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: styles$4.button,
+      className: styles$5.button,
       onClick: function onClick() {
         if (onClickItem !== null) {
           onClickItem(index);
@@ -212,16 +165,16 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       },
       tabIndex: "-1"
     }, /*#__PURE__*/React.createElement("span", {
-      className: styles$4.dot,
+      className: styles$5.dot,
       style: {
-        backgroundColor: index <= current ? colorAccent : colorBackground
+        backgroundColor: index <= current ? primary : secondary
       }
     })));
   }), /*#__PURE__*/React.createElement("li", {
-    className: styles$4.menu
+    className: styles$5.menu
   }, /*#__PURE__*/React.createElement(MenuIcon, {
-    className: styles$4.menuIcon,
-    color: colorAccent
+    className: styles$5.menuIcon,
+    color: primary
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",
     title: intl.formatMessage({
@@ -238,20 +191,20 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         "value": "Menu"
       }]
     }),
-    className: styles$4.menuButton,
+    className: styles$5.menuButton,
     onClick: function onClick() {
       if (onClickItem !== null) {
         onClickItem(null);
       }
     }
   })), closeable ? /*#__PURE__*/React.createElement("li", {
-    className: styles$4.closeButton,
+    className: styles$5.closeButton,
     style: {
-      color: colorAccent
+      color: primary
     }
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$4.closeButton,
+    className: styles$5.closeButton,
     onClick: onClose,
     title: intl.formatMessage({
       "id": "dj/p/q",
@@ -272,12 +225,12 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   }))) : null));
 };
-ViewerMenuDots.propTypes = propTypes$6;
-ViewerMenuDots.defaultProps = defaultProps$6;
+ViewerMenuDots.propTypes = propTypes$7;
+ViewerMenuDots.defaultProps = defaultProps$7;
 var styles$3 = {"container":"micromag-viewer-partials-share-modal-container","content":"micromag-viewer-partials-share-modal-content","opened":"micromag-viewer-partials-share-modal-opened"};
-var propTypes$5 = {
+var propTypes$6 = {
   url: PropTypes.string,
   title: PropTypes.string,
   opened: PropTypes.bool,
@@ -285,7 +238,7 @@ var propTypes$5 = {
   onShare: PropTypes.func,
   onCancel: PropTypes.func
 };
-var defaultProps$5 = {
+var defaultProps$6 = {
   url: null,
   title: null,
   opened: false,
@@ -369,12 +322,12 @@ var ShareModal = function ShareModal(_ref) {
   }), /*#__PURE__*/React.createElement(EmailIcon, shareIconProps)))));
 };
-ShareModal.propTypes = propTypes$5;
-ShareModal.defaultProps = defaultProps$5;
+ShareModal.propTypes = propTypes$6;
+ShareModal.defaultProps = defaultProps$6;
 var styles$2 = {"container":"micromag-viewer-partials-share-button-container","shareModal":"micromag-viewer-partials-share-button-shareModal"};
-var propTypes$4 = {
+var propTypes$5 = {
   title: PropTypes.string,
   url: PropTypes.string,
   className: PropTypes.string,
@@ -383,7 +336,7 @@ var propTypes$4 = {
   children: PropTypes.node,
   focusable: PropTypes.bool
 };
-var defaultProps$4 = {
+var defaultProps$5 = {
   title: null,
   url: null,
   className: null,
@@ -453,12 +406,12 @@ var ShareButton = function ShareButton(_ref) {
   }));
 };
-ShareButton.propTypes = propTypes$4;
-ShareButton.defaultProps = defaultProps$4;
+ShareButton.propTypes = propTypes$5;
+ShareButton.defaultProps = defaultProps$5;
 var styles$1 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","itemContent":"micromag-viewer-menus-menu-preview-itemContent","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
-var propTypes$3 = {
+var propTypes$4 = {
   viewerTheme: PropTypes$1.viewerTheme,
   screenWidth: PropTypes.number,
   title: PropTypes.string,
@@ -475,7 +428,7 @@ var propTypes$3 = {
   fullscreenEnabled: PropTypes.bool,
   className: PropTypes.string
 };
-var defaultProps$3 = {
+var defaultProps$4 = {
   viewerTheme: null,
   screenWidth: null,
   title: null,
@@ -749,10 +702,64 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   })))))) : null;
 };
-ViewerMenuPreview.propTypes = propTypes$3;
-ViewerMenuPreview.defaultProps = defaultProps$3;
+ViewerMenuPreview.propTypes = propTypes$4;
+ViewerMenuPreview.defaultProps = defaultProps$4;
-var styles = {"container":"micromag-viewer-container","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screen":"micromag-viewer-screen","screenInner":"micromag-viewer-screenInner","content":"micromag-viewer-content","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","current":"micromag-viewer-current","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready"};
+var styles = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
+var propTypes$3 = {
+  screen: PropTypes$1.screenComponent,
+  renderContext: PropTypes$1.renderContext,
+  current: PropTypes.bool,
+  active: PropTypes.bool,
+  onPrevious: PropTypes.func,
+  onNext: PropTypes.func,
+  onEnableInteraction: PropTypes.func,
+  onDisableInteraction: PropTypes.func,
+  getMediaRef: PropTypes.func
+};
+var defaultProps$3 = {
+  screen: null,
+  renderContext: null,
+  current: false,
+  active: true,
+  onPrevious: null,
+  onNext: null,
+  onEnableInteraction: null,
+  onDisableInteraction: null,
+  getMediaRef: null
+};
+var ViewerScreen = function ViewerScreen(_ref) {
+  var _ref2;
+  var screen = _ref.screen,
+      renderContext = _ref.renderContext,
+      active = _ref.active,
+      current = _ref.current,
+      onPrevious = _ref.onPrevious,
+      onNext = _ref.onNext,
+      onEnableInteraction = _ref.onEnableInteraction,
+      onDisableInteraction = _ref.onDisableInteraction,
+      getMediaRef = _ref.getMediaRef;
+  return screen !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, (_ref2 = {}, _defineProperty(_ref2, styles.active, active), _defineProperty(_ref2, styles.current, current), _ref2)]),
+    "aria-hidden": current ? null : 'true'
+  }, /*#__PURE__*/React.createElement(Screen, {
+    screen: screen,
+    renderContext: renderContext,
+    active: active,
+    current: current,
+    onPrevious: onPrevious,
+    onNext: onNext,
+    onEnableInteraction: onEnableInteraction,
+    onDisableInteraction: onDisableInteraction,
+    getMediaRef: getMediaRef
+  })) : null;
+};
+ViewerScreen.propTypes = propTypes$3;
+ViewerScreen.defaultProps = defaultProps$3;
 var propTypes$2 = {
   story: PropTypes$1.story,
@@ -779,6 +786,11 @@ var propTypes$2 = {
   onViewModeChange: PropTypes.func,
   currentScreenMedia: PropTypes$1.ref,
   screensMedias: PropTypes$1.ref,
+  screenSizeOptions: PropTypes.shape({
+    withoutMaxSize: PropTypes.bool,
+    desktopHeightRatio: PropTypes.number,
+    screenRatio: PropTypes.number
+  }),
   className: PropTypes.string
 };
 var defaultProps$2 = {
@@ -805,11 +817,12 @@ var defaultProps$2 = {
   onViewModeChange: null,
   currentScreenMedia: null,
   screensMedias: null,
+  screenSizeOptions: null,
   className: null
 };
 var Viewer = function Viewer(_ref) {
-  var _ref14;
+  var _ref15;
   var story = _ref.story,
       basePath = _ref.basePath,
@@ -834,6 +847,7 @@ var Viewer = function Viewer(_ref) {
       onViewModeChange = _ref.onViewModeChange,
       currentScreenMedia = _ref.currentScreenMedia,
       screensMedias = _ref.screensMedias,
+      screenSizeOptions = _ref.screenSizeOptions,
       className = _ref.className;
   var intl = useIntl();
   var parsedStory = useParsedStory(story, {
@@ -883,11 +897,11 @@ var Viewer = function Viewer(_ref) {
   var trackEvent = useTrackEvent();
   var contentRef = useRef(null); // Get screen size
-  var _useScreenSizeFromEle = useScreenSizeFromElement({
+  var _useScreenSizeFromEle = useScreenSizeFromElement(_objectSpread({
     width: width,
     height: height,
     screens: deviceScreens
-  }),
+  }, screenSizeOptions)),
       containerRef = _useScreenSizeFromEle.ref,
       screenSize = _useScreenSizeFromEle.screenSize;
@@ -1305,6 +1319,11 @@ var Viewer = function Viewer(_ref) {
       description: screenDescription
     }) : metadata;
   }, [metadata]);
+  var _ref14 = viewerTheme || {},
+      _ref14$menuTheme = _ref14.menuTheme,
+      menuTheme = _ref14$menuTheme === void 0 ? null : _ref14$menuTheme;
   return /*#__PURE__*/React.createElement(ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React.createElement(ViewerProvider, {
@@ -1316,18 +1335,18 @@ var Viewer = function Viewer(_ref) {
   }, overscrollStyle) : /*#__PURE__*/React.createElement(Helmet, null, overscrollStyle), /*#__PURE__*/React.createElement(FontFaces, {
     fonts: finalFonts
   }), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, screenSize.screens.map(function (screenName) {
+    className: classNames([styles$6.container, screenSize.screens.map(function (screenName) {
       return "story-screen-".concat(screenName);
-    }), (_ref14 = {}, _defineProperty(_ref14, styles.landscape, landscape), _defineProperty(_ref14, styles.hideMenu, !menuVisible), _defineProperty(_ref14, styles.ready, ready || withoutScreensTransforms), _defineProperty(_ref14, className, className), _ref14)]),
+    }), (_ref15 = {}, _defineProperty(_ref15, styles$6.landscape, landscape), _defineProperty(_ref15, styles$6.hideMenu, !menuVisible), _defineProperty(_ref15, styles$6.ready, ready || withoutScreensTransforms), _defineProperty(_ref15, className, className), _ref15)]),
     ref: containerRef,
     onContextMenu: onContextMenu
   }, !withoutMenu ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", Object.assign({
-    className: styles.menuDotsContainer,
+    className: styles$6.menuDotsContainer,
     ref: menuDotsContainerRef,
     style: {
       width: screenWidth
     }
-  }, menuDragBind()), /*#__PURE__*/React.createElement(ViewerMenuDots, {
+  }, menuDragBind()), /*#__PURE__*/React.createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
     direction: "horizontal",
     withShadow: menuOverScreen,
     items: screens,
@@ -1335,16 +1354,16 @@ var Viewer = function Viewer(_ref) {
     onClickItem: onClickDotsMenuItem,
     closeable: closeable,
     onClose: onClose,
-    className: styles.menuDots
-  })), /*#__PURE__*/React.createElement(animated.div, {
-    className: styles.menuPreviewContainer,
+    className: styles$6.menuDots
+  }))), /*#__PURE__*/React.createElement(animated.div, {
+    className: styles$6.menuPreviewContainer,
     style: menuPreviewStyle,
     ref: menuPreviewContainerRef
   }, /*#__PURE__*/React.createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
     title: title,
     shareUrl: shareUrl,
-    className: styles.menuPreview,
+    className: styles$6.menuPreview,
     screenWidth: screenWidth,
     focusable: previewMenuOpen,
     items: screens,
@@ -1357,7 +1376,7 @@ var Viewer = function Viewer(_ref) {
     fullscreenEnabled: fullscreenEnabled
   }))) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", {
     ref: contentRef,
-    className: styles.content
+    className: styles$6.content
   }, screens.map(function (scr, i) {
     var current = i === screenIndex;
     var active = i > screenIndex - neighborScreensActive && i < screenIndex + neighborScreensActive;
@@ -1390,14 +1409,14 @@ var Viewer = function Viewer(_ref) {
         "type": 0,
         "value": "Go to previous screen"
       }]
-    }), "Go to previous screen") : null, /*#__PURE__*/React.createElement("div", {
+    })) : null, /*#__PURE__*/React.createElement("div", {
       ref: current ? currentScreenRef : null,
       style: {
         width: landscape ? screenWidth : null,
         height: landscape ? screenHeight : null,
         transform: !withoutScreensTransforms ? screenTransform : null
       },
-      className: classNames([styles.screen, _defineProperty({}, styles.current, current)]),
+      className: classNames([styles$6.screen, _defineProperty({}, styles$6.current, current)]),
       tabIndex: active ? '0' : '-1'
       /* eslint-disable-line */
       ,

package/lib/index.js CHANGED Viewed

@@ -16,17 +16,17 @@ var contexts = require('@micromag/core/contexts');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var reactHelmet = require('react-helmet');
+var components = require('@micromag/core/components');
+var hooks = require('@micromag/core/hooks');
+var utils = require('@micromag/core/utils');
+var core$1 = require('@react-spring/core');
+var web = require('@react-spring/web');
 var classNames = require('classnames');
+var reactHelmet = require('react-helmet');
 var reactIntl = require('react-intl');
 var reactUseGesture = require('react-use-gesture');
-var core$1 = require('@react-spring/core');
-var web = require('@react-spring/web');
-var hooks = require('@micromag/core/hooks');
-var utils = require('@micromag/core/utils');
-var components = require('@micromag/core/components');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
 var Scroll = require('@micromag/element-scroll');
 var reactShare = require('react-share');
@@ -48,71 +48,19 @@ var routes = PropTypes__default["default"].shape({
   screen: PropTypes__default["default"].string.isRequired
 });
-var styles$6 = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
-var propTypes$8 = {
-  screen: core.PropTypes.screenComponent,
-  renderContext: core.PropTypes.renderContext,
-  current: PropTypes__default["default"].bool,
-  active: PropTypes__default["default"].bool,
-  onPrevious: PropTypes__default["default"].func,
-  onNext: PropTypes__default["default"].func,
-  onEnableInteraction: PropTypes__default["default"].func,
-  onDisableInteraction: PropTypes__default["default"].func,
-  getMediaRef: PropTypes__default["default"].func
-};
-var defaultProps$8 = {
-  screen: null,
-  renderContext: null,
-  current: false,
-  active: true,
-  onPrevious: null,
-  onNext: null,
-  onEnableInteraction: null,
-  onDisableInteraction: null,
-  getMediaRef: null
-};
-var ViewerScreen = function ViewerScreen(_ref) {
-  var _ref2;
-  var screen = _ref.screen,
-      renderContext = _ref.renderContext,
-      active = _ref.active,
-      current = _ref.current,
-      onPrevious = _ref.onPrevious,
-      onNext = _ref.onNext,
-      onEnableInteraction = _ref.onEnableInteraction,
-      onDisableInteraction = _ref.onDisableInteraction,
-      getMediaRef = _ref.getMediaRef;
-  return screen !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$6.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$6.active, active), _defineProperty__default["default"](_ref2, styles$6.current, current), _ref2)]),
-    "aria-hidden": current ? null : 'true'
-  }, /*#__PURE__*/React__default["default"].createElement(components.Screen, {
-    screen: screen,
-    renderContext: renderContext,
-    active: active,
-    current: current,
-    onPrevious: onPrevious,
-    onNext: onNext,
-    onEnableInteraction: onEnableInteraction,
-    onDisableInteraction: onDisableInteraction,
-    getMediaRef: getMediaRef
-  })) : null;
-};
+var styles$6 = {"container":"micromag-viewer-container","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screen":"micromag-viewer-screen","screenInner":"micromag-viewer-screenInner","content":"micromag-viewer-content","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","current":"micromag-viewer-current","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready"};
-ViewerScreen.propTypes = propTypes$8;
-ViewerScreen.defaultProps = defaultProps$8;
+var styles$5 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","item":"micromag-viewer-menus-menu-dots-item","button":"micromag-viewer-menus-menu-dots-button","menuButton":"micromag-viewer-menus-menu-dots-menuButton","items":"micromag-viewer-menus-menu-dots-items","dot":"micromag-viewer-menus-menu-dots-dot","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
-var styles$5 = {};
+var styles$4 = {};
-var propTypes$7 = {
+var propTypes$8 = {
   size: PropTypes__default["default"].number,
   spacing: PropTypes__default["default"].number,
   color: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string
 };
-var defaultProps$7 = {
+var defaultProps$8 = {
   size: 100,
   spacing: 8,
   color: 'white',
@@ -126,7 +74,7 @@ var MenuIcon = function MenuIcon(_ref) {
       className = _ref.className;
   var squareSize = (size - 2 * spacing) / 3;
   return /*#__PURE__*/React__default["default"].createElement("svg", {
-    className: classNames__default["default"]([styles$5.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$4.container, _defineProperty__default["default"]({}, className, className !== null)]),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 ".concat(size, " ").concat(size),
     "aria-hidden": "true"
@@ -144,52 +92,57 @@ var MenuIcon = function MenuIcon(_ref) {
   }));
 };
-MenuIcon.propTypes = propTypes$7;
-MenuIcon.defaultProps = defaultProps$7;
+MenuIcon.propTypes = propTypes$8;
+MenuIcon.defaultProps = defaultProps$8;
-var styles$4 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","item":"micromag-viewer-menus-menu-dots-item","button":"micromag-viewer-menus-menu-dots-button","menuButton":"micromag-viewer-menus-menu-dots-menuButton","items":"micromag-viewer-menus-menu-dots-items","dot":"micromag-viewer-menus-menu-dots-dot","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
-var propTypes$6 = {
+var propTypes$7 = {
   direction: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
   withShadow: PropTypes__default["default"].bool,
   items: core.PropTypes.menuItems,
   current: PropTypes__default["default"].number,
   onClickItem: PropTypes__default["default"].func,
-  colorAccent: PropTypes__default["default"].string,
-  colorBackground: PropTypes__default["default"].string,
+  colors: PropTypes__default["default"].shape({
+    primary: PropTypes__default["default"].string,
+    secondary: PropTypes__default["default"].string
+  }),
   closeable: PropTypes__default["default"].bool,
   onClose: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
-var defaultProps$6 = {
+var defaultProps$7 = {
   direction: 'horizontal',
   withShadow: false,
   items: [],
   current: 0,
   onClickItem: null,
-  colorAccent: 'rgba(255, 255, 255, 1)',
-  colorBackground: 'rgba(200, 200, 200, 0.5)',
+  colors: null,
   closeable: false,
   onClose: null,
   className: null
 };
 var ViewerMenuDots = function ViewerMenuDots(_ref) {
-  var _ref2;
+  var _ref3;
   var direction = _ref.direction,
       withShadow = _ref.withShadow,
       items = _ref.items,
       current = _ref.current,
       onClickItem = _ref.onClickItem,
-      colorAccent = _ref.colorAccent,
-      colorBackground = _ref.colorBackground,
+      colors = _ref.colors,
       closeable = _ref.closeable,
       onClose = _ref.onClose,
       className = _ref.className;
+  var _ref2 = colors || {},
+      _ref2$primary = _ref2.primary,
+      primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary,
+      _ref2$secondary = _ref2.secondary,
+      secondary = _ref2$secondary === void 0 ? 'rgba(200, 200, 200, 0.5)' : _ref2$secondary;
   var intl = reactIntl.useIntl();
   return /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: classNames__default["default"]([styles$4.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$4.vertical, direction === 'vertical'), _defineProperty__default["default"](_ref2, styles$4.withShadow, withShadow), _ref2)]),
+    className: classNames__default["default"]([styles$5.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles$5.vertical, direction === 'vertical'), _defineProperty__default["default"](_ref3, styles$5.withShadow, withShadow), _ref3)]),
     "aria-label": intl.formatMessage({
       "id": "bLYuuN",
       "defaultMessage": [{
@@ -213,15 +166,15 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       total: items.length
     })
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: styles$4.items
+    className: styles$5.items
   }, items.map(function (item, index) {
     return /*#__PURE__*/React__default["default"].createElement("li", {
-      className: classNames__default["default"]([styles$4.item, _defineProperty__default["default"]({}, styles$4.active, current === index)]),
+      className: classNames__default["default"]([styles$5.item, _defineProperty__default["default"]({}, styles$5.active, current === index)]),
       key: "item-".concat(index),
       "aria-hidden": "true"
     }, /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      className: styles$4.button,
+      className: styles$5.button,
       onClick: function onClick() {
         if (onClickItem !== null) {
           onClickItem(index);
@@ -229,16 +182,16 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       },
       tabIndex: "-1"
     }, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: styles$4.dot,
+      className: styles$5.dot,
       style: {
-        backgroundColor: index <= current ? colorAccent : colorBackground
+        backgroundColor: index <= current ? primary : secondary
       }
     })));
   }), /*#__PURE__*/React__default["default"].createElement("li", {
-    className: styles$4.menu
+    className: styles$5.menu
   }, /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
-    className: styles$4.menuIcon,
-    color: colorAccent
+    className: styles$5.menuIcon,
+    color: primary
   }), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     title: intl.formatMessage({
@@ -255,20 +208,20 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         "value": "Menu"
       }]
     }),
-    className: styles$4.menuButton,
+    className: styles$5.menuButton,
     onClick: function onClick() {
       if (onClickItem !== null) {
         onClickItem(null);
       }
     }
   })), closeable ? /*#__PURE__*/React__default["default"].createElement("li", {
-    className: styles$4.closeButton,
+    className: styles$5.closeButton,
     style: {
-      color: colorAccent
+      color: primary
     }
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    className: styles$4.closeButton,
+    className: styles$5.closeButton,
     onClick: onClose,
     title: intl.formatMessage({
       "id": "dj/p/q",
@@ -289,12 +242,12 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   }))) : null));
 };
-ViewerMenuDots.propTypes = propTypes$6;
-ViewerMenuDots.defaultProps = defaultProps$6;
+ViewerMenuDots.propTypes = propTypes$7;
+ViewerMenuDots.defaultProps = defaultProps$7;
 var styles$3 = {"container":"micromag-viewer-partials-share-modal-container","content":"micromag-viewer-partials-share-modal-content","opened":"micromag-viewer-partials-share-modal-opened"};
-var propTypes$5 = {
+var propTypes$6 = {
   url: PropTypes__default["default"].string,
   title: PropTypes__default["default"].string,
   opened: PropTypes__default["default"].bool,
@@ -302,7 +255,7 @@ var propTypes$5 = {
   onShare: PropTypes__default["default"].func,
   onCancel: PropTypes__default["default"].func
 };
-var defaultProps$5 = {
+var defaultProps$6 = {
   url: null,
   title: null,
   opened: false,
@@ -386,12 +339,12 @@ var ShareModal = function ShareModal(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement(reactShare.EmailIcon, shareIconProps)))));
 };
-ShareModal.propTypes = propTypes$5;
-ShareModal.defaultProps = defaultProps$5;
+ShareModal.propTypes = propTypes$6;
+ShareModal.defaultProps = defaultProps$6;
 var styles$2 = {"container":"micromag-viewer-partials-share-button-container","shareModal":"micromag-viewer-partials-share-button-shareModal"};
-var propTypes$4 = {
+var propTypes$5 = {
   title: PropTypes__default["default"].string,
   url: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
@@ -400,7 +353,7 @@ var propTypes$4 = {
   children: PropTypes__default["default"].node,
   focusable: PropTypes__default["default"].bool
 };
-var defaultProps$4 = {
+var defaultProps$5 = {
   title: null,
   url: null,
   className: null,
@@ -470,12 +423,12 @@ var ShareButton = function ShareButton(_ref) {
   }));
 };
-ShareButton.propTypes = propTypes$4;
-ShareButton.defaultProps = defaultProps$4;
+ShareButton.propTypes = propTypes$5;
+ShareButton.defaultProps = defaultProps$5;
 var styles$1 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","itemContent":"micromag-viewer-menus-menu-preview-itemContent","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
-var propTypes$3 = {
+var propTypes$4 = {
   viewerTheme: core.PropTypes.viewerTheme,
   screenWidth: PropTypes__default["default"].number,
   title: PropTypes__default["default"].string,
@@ -492,7 +445,7 @@ var propTypes$3 = {
   fullscreenEnabled: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string
 };
-var defaultProps$3 = {
+var defaultProps$4 = {
   viewerTheme: null,
   screenWidth: null,
   title: null,
@@ -766,10 +719,64 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   })))))) : null;
 };
-ViewerMenuPreview.propTypes = propTypes$3;
-ViewerMenuPreview.defaultProps = defaultProps$3;
+ViewerMenuPreview.propTypes = propTypes$4;
+ViewerMenuPreview.defaultProps = defaultProps$4;
+var styles = {"container":"micromag-viewer-screen-container","current":"micromag-viewer-screen-current"};
+var propTypes$3 = {
+  screen: core.PropTypes.screenComponent,
+  renderContext: core.PropTypes.renderContext,
+  current: PropTypes__default["default"].bool,
+  active: PropTypes__default["default"].bool,
+  onPrevious: PropTypes__default["default"].func,
+  onNext: PropTypes__default["default"].func,
+  onEnableInteraction: PropTypes__default["default"].func,
+  onDisableInteraction: PropTypes__default["default"].func,
+  getMediaRef: PropTypes__default["default"].func
+};
+var defaultProps$3 = {
+  screen: null,
+  renderContext: null,
+  current: false,
+  active: true,
+  onPrevious: null,
+  onNext: null,
+  onEnableInteraction: null,
+  onDisableInteraction: null,
+  getMediaRef: null
+};
+var ViewerScreen = function ViewerScreen(_ref) {
+  var _ref2;
+  var screen = _ref.screen,
+      renderContext = _ref.renderContext,
+      active = _ref.active,
+      current = _ref.current,
+      onPrevious = _ref.onPrevious,
+      onNext = _ref.onNext,
+      onEnableInteraction = _ref.onEnableInteraction,
+      onDisableInteraction = _ref.onDisableInteraction,
+      getMediaRef = _ref.getMediaRef;
+  return screen !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles.active, active), _defineProperty__default["default"](_ref2, styles.current, current), _ref2)]),
+    "aria-hidden": current ? null : 'true'
+  }, /*#__PURE__*/React__default["default"].createElement(components.Screen, {
+    screen: screen,
+    renderContext: renderContext,
+    active: active,
+    current: current,
+    onPrevious: onPrevious,
+    onNext: onNext,
+    onEnableInteraction: onEnableInteraction,
+    onDisableInteraction: onDisableInteraction,
+    getMediaRef: getMediaRef
+  })) : null;
+};
-var styles = {"container":"micromag-viewer-container","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screen":"micromag-viewer-screen","screenInner":"micromag-viewer-screenInner","content":"micromag-viewer-content","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","current":"micromag-viewer-current","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready"};
+ViewerScreen.propTypes = propTypes$3;
+ViewerScreen.defaultProps = defaultProps$3;
 var propTypes$2 = {
   story: core.PropTypes.story,
@@ -796,6 +803,11 @@ var propTypes$2 = {
   onViewModeChange: PropTypes__default["default"].func,
   currentScreenMedia: core.PropTypes.ref,
   screensMedias: core.PropTypes.ref,
+  screenSizeOptions: PropTypes__default["default"].shape({
+    withoutMaxSize: PropTypes__default["default"].bool,
+    desktopHeightRatio: PropTypes__default["default"].number,
+    screenRatio: PropTypes__default["default"].number
+  }),
   className: PropTypes__default["default"].string
 };
 var defaultProps$2 = {
@@ -822,11 +834,12 @@ var defaultProps$2 = {
   onViewModeChange: null,
   currentScreenMedia: null,
   screensMedias: null,
+  screenSizeOptions: null,
   className: null
 };
 var Viewer = function Viewer(_ref) {
-  var _ref14;
+  var _ref15;
   var story = _ref.story,
       basePath = _ref.basePath,
@@ -851,6 +864,7 @@ var Viewer = function Viewer(_ref) {
       onViewModeChange = _ref.onViewModeChange,
       currentScreenMedia = _ref.currentScreenMedia,
       screensMedias = _ref.screensMedias,
+      screenSizeOptions = _ref.screenSizeOptions,
       className = _ref.className;
   var intl = reactIntl.useIntl();
   var parsedStory = hooks.useParsedStory(story, {
@@ -900,11 +914,11 @@ var Viewer = function Viewer(_ref) {
   var trackEvent = hooks.useTrackEvent();
   var contentRef = React.useRef(null); // Get screen size
-  var _useScreenSizeFromEle = hooks.useScreenSizeFromElement({
+  var _useScreenSizeFromEle = hooks.useScreenSizeFromElement(_objectSpread__default["default"]({
     width: width,
     height: height,
     screens: deviceScreens
-  }),
+  }, screenSizeOptions)),
       containerRef = _useScreenSizeFromEle.ref,
       screenSize = _useScreenSizeFromEle.screenSize;
@@ -1322,6 +1336,11 @@ var Viewer = function Viewer(_ref) {
       description: screenDescription
     }) : metadata;
   }, [metadata]);
+  var _ref14 = viewerTheme || {},
+      _ref14$menuTheme = _ref14.menuTheme,
+      menuTheme = _ref14$menuTheme === void 0 ? null : _ref14$menuTheme;
   return /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ViewerProvider, {
@@ -1333,18 +1352,18 @@ var Viewer = function Viewer(_ref) {
   }, overscrollStyle) : /*#__PURE__*/React__default["default"].createElement(reactHelmet.Helmet, null, overscrollStyle), /*#__PURE__*/React__default["default"].createElement(components.FontFaces, {
     fonts: finalFonts
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, screenSize.screens.map(function (screenName) {
+    className: classNames__default["default"]([styles$6.container, screenSize.screens.map(function (screenName) {
       return "story-screen-".concat(screenName);
-    }), (_ref14 = {}, _defineProperty__default["default"](_ref14, styles.landscape, landscape), _defineProperty__default["default"](_ref14, styles.hideMenu, !menuVisible), _defineProperty__default["default"](_ref14, styles.ready, ready || withoutScreensTransforms), _defineProperty__default["default"](_ref14, className, className), _ref14)]),
+    }), (_ref15 = {}, _defineProperty__default["default"](_ref15, styles$6.landscape, landscape), _defineProperty__default["default"](_ref15, styles$6.hideMenu, !menuVisible), _defineProperty__default["default"](_ref15, styles$6.ready, ready || withoutScreensTransforms), _defineProperty__default["default"](_ref15, className, className), _ref15)]),
     ref: containerRef,
     onContextMenu: onContextMenu
   }, !withoutMenu ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-    className: styles.menuDotsContainer,
+    className: styles$6.menuDotsContainer,
     ref: menuDotsContainerRef,
     style: {
       width: screenWidth
     }
-  }, menuDragBind()), /*#__PURE__*/React__default["default"].createElement(ViewerMenuDots, {
+  }, menuDragBind()), /*#__PURE__*/React__default["default"].createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
     direction: "horizontal",
     withShadow: menuOverScreen,
     items: screens,
@@ -1352,16 +1371,16 @@ var Viewer = function Viewer(_ref) {
     onClickItem: onClickDotsMenuItem,
     closeable: closeable,
     onClose: onClose,
-    className: styles.menuDots
-  })), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
-    className: styles.menuPreviewContainer,
+    className: styles$6.menuDots
+  }))), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+    className: styles$6.menuPreviewContainer,
     style: menuPreviewStyle,
     ref: menuPreviewContainerRef
   }, /*#__PURE__*/React__default["default"].createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
     title: title,
     shareUrl: shareUrl,
-    className: styles.menuPreview,
+    className: styles$6.menuPreview,
     screenWidth: screenWidth,
     focusable: previewMenuOpen,
     items: screens,
@@ -1374,7 +1393,7 @@ var Viewer = function Viewer(_ref) {
     fullscreenEnabled: fullscreenEnabled
   }))) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React__default["default"].createElement("div", {
     ref: contentRef,
-    className: styles.content
+    className: styles$6.content
   }, screens.map(function (scr, i) {
     var current = i === screenIndex;
     var active = i > screenIndex - neighborScreensActive && i < screenIndex + neighborScreensActive;
@@ -1407,14 +1426,14 @@ var Viewer = function Viewer(_ref) {
         "type": 0,
         "value": "Go to previous screen"
       }]
-    }), "Go to previous screen") : null, /*#__PURE__*/React__default["default"].createElement("div", {
+    })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
       ref: current ? currentScreenRef : null,
       style: {
         width: landscape ? screenWidth : null,
         height: landscape ? screenHeight : null,
         transform: !withoutScreensTransforms ? screenTransform : null
       },
-      className: classNames__default["default"]([styles.screen, _defineProperty__default["default"]({}, styles.current, current)]),
+      className: classNames__default["default"]([styles$6.screen, _defineProperty__default["default"]({}, styles$6.current, current)]),
       tabIndex: active ? '0' : '-1'
       /* eslint-disable-line */
       ,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.2.384",
+    "version": "0.2.389",
     "description": "",
     "keywords": [
         "javascript"
@@ -55,12 +55,12 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.2.384",
-        "@micromag/element-scroll": "^0.2.384",
-        "@micromag/elements": "^0.2.384",
-        "@micromag/fields": "^0.2.384",
-        "@micromag/intl": "^0.2.384",
-        "@micromag/screens": "^0.2.384",
+        "@micromag/core": "^0.2.386",
+        "@micromag/element-scroll": "^0.2.386",
+        "@micromag/elements": "^0.2.386",
+        "@micromag/fields": "^0.2.388",
+        "@micromag/intl": "^0.2.388",
+        "@micromag/screens": "^0.2.386",
         "@react-spring/core": "^9.1.1",
         "@react-spring/web": "^9.1.1",
         "classnames": "^2.2.6",
@@ -76,5 +76,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "cfe309fba4ad374b6cd483e588d90ab3b76d2f5b"
+    "gitHead": "4d1e175e60baf8da9ecbbce89d29d6d4a57f29ad"
 }