diff --git a/css/reveal.scss b/css/reveal.scss index 883eebca..c24bb87a 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -1454,7 +1454,7 @@ $overlayHeaderPadding: 5px; transition: all 0.3s ease; } - .reveal > .overlay .spinner { + .reveal .overlay-spinner { position: absolute; display: block; top: 50%; @@ -1470,7 +1470,8 @@ $overlayHeaderPadding: 5px; transition: all 0.3s ease; } - .reveal > .overlay header { + .reveal .overlay-header { + display: flex; position: absolute; left: 0; top: 0; @@ -1478,22 +1479,24 @@ $overlayHeaderPadding: 5px; padding: $overlayHeaderPadding; z-index: 2; box-sizing: border-box; + align-items: center; + justify-content: flex-end; } - .reveal > .overlay header a { - display: inline-block; + .reveal .overlay-header a { + display: flex; + align-items: center; + justify-content: center; width: $overlayHeaderHeight; height: $overlayHeaderHeight; - line-height: 36px; padding: 0 10px; - float: right; opacity: 0.6; box-sizing: border-box; } - .reveal > .overlay header a:hover { + .reveal .overlay-header a:hover { opacity: 1; } - .reveal > .overlay header a .icon { + .reveal .overlay-header .icon { display: inline-block; width: 20px; height: 20px; @@ -1502,14 +1505,14 @@ $overlayHeaderPadding: 5px; background-size: 100%; background-repeat: no-repeat; } - .reveal > .overlay header a.close .icon { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); + .reveal .overlay-close .icon { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIuODU0IDIuODU0YS41LjUgMCAwIDAtLjcwOC0uNzA4TDcuNSA2Ljc5MyAyLjg1NCAyLjE0NmEuNS41IDAgMSAwLS43MDguNzA4TDYuNzkzIDcuNWwtNC42NDcgNC42NDZhLjUuNSAwIDAgMCAuNzA4LjcwOEw3LjUgOC4yMDdsNC42NDYgNC42NDdhLjUuNSAwIDAgMCAuNzA4LS43MDhMOC4yMDcgNy41bDQuNjQ3LTQuNjQ2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); } - .reveal > .overlay header a.external .icon { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); + .reveal .overlay-external .icon { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMyAyYTEgMSAwIDAgMC0xIDF2OWExIDEgMCAwIDAgMSAxaDlhMSAxIDAgMCAwIDEtMVY4LjVhLjUuNSAwIDAgMC0xIDBWMTJIM1YzaDMuNWEuNS41IDAgMCAwIDAtMUgzWm05Ljg1NC4xNDZhLjUuNSAwIDAgMSAuMTQ2LjM1MVY1LjVhLjUuNSAwIDAgMS0xIDBWMy43MDdMNi44NTQgOC44NTRhLjUuNSAwIDEgMS0uNzA4LS43MDhMMTEuMjkzIDNIOS41YS41LjUgMCAwIDEgMC0xaDNhLjQ5OS40OTkgMCAwIDEgLjM1NC4xNDZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=); } - .reveal > .overlay .viewport { + .reveal .overlay-viewport { position: absolute; display: flex; top: $overlayHeaderHeight + $overlayHeaderPadding*2; @@ -1518,7 +1521,7 @@ $overlayHeaderPadding: 5px; left: 0; } - .reveal > .overlay.overlay-preview .viewport iframe { + .reveal .overlay-preview .overlay-viewport iframe { width: 100%; height: 100%; max-width: 100%; @@ -1530,12 +1533,12 @@ $overlayHeaderPadding: 5px; transition: all 0.3s ease; } - .reveal > .overlay.overlay-preview.loaded .viewport iframe { + .reveal .overlay-preview.loaded .overlay-viewport iframe { opacity: 1; visibility: visible; } - .reveal > .overlay.overlay-preview.loaded .viewport-inner { + .reveal .overlay-preview.loaded .overlay-viewport-inner { position: absolute; z-index: -1; left: 0; @@ -1544,26 +1547,26 @@ $overlayHeaderPadding: 5px; text-align: center; letter-spacing: normal; } - .reveal > .overlay.overlay-preview .x-frame-error { + .reveal .overlay-preview .x-frame-error { opacity: 0; transition: opacity 0.3s ease 0.3s; } - .reveal > .overlay.overlay-preview.loaded .x-frame-error { + .reveal .overlay-preview.loaded .x-frame-error { opacity: 1; } - .reveal > .overlay.overlay-preview.loaded .spinner { + .reveal .overlay-preview.loaded .overlay-spinner { opacity: 0; visibility: hidden; transform: scale(0.2); } - .reveal > .overlay.overlay-help .viewport { + .reveal .overlay-help .overlay-viewport { overflow: auto; color: #fff; } - .reveal > .overlay.overlay-help .viewport .viewport-inner { + .reveal .overlay-help .overlay-viewport-inner { width: 600px; margin: auto; padding: 20px 20px 80px 20px; @@ -1571,25 +1574,25 @@ $overlayHeaderPadding: 5px; letter-spacing: normal; } - .reveal > .overlay.overlay-help .viewport .viewport-inner .title { + .reveal .overlay-help .overlay-viewport-inner .title { font-size: 20px; } - .reveal > .overlay.overlay-help .viewport .viewport-inner table { + .reveal .overlay-help .overlay-viewport-inner table { border: 1px solid #fff; border-collapse: collapse; font-size: 16px; } - .reveal > .overlay.overlay-help .viewport .viewport-inner table th, - .reveal > .overlay.overlay-help .viewport .viewport-inner table td { + .reveal .overlay-help .overlay-viewport-inner table th, + .reveal .overlay-help .overlay-viewport-inner table td { width: 200px; padding: 14px; border: 1px solid #fff; vertical-align: middle; } - .reveal > .overlay.overlay-help .viewport .viewport-inner table th { + .reveal .overlay-help .overlay-viewport-inner table th { padding-top: 20px; padding-bottom: 20px; } diff --git a/js/reveal.js b/js/reveal.js index f94b0d7c..227586b0 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -819,14 +819,14 @@ export default function( revealElement, options ) { dom.wrapper.appendChild( dom.overlay ); dom.overlay.innerHTML = - `
- - + `
+ +
- -
+ +
- + Unable to load iframe. This is likely due to the site's policy (x-frame-options).
`; @@ -835,12 +835,12 @@ export default function( revealElement, options ) { dom.overlay.classList.add( 'loaded' ); }, false ); - dom.overlay.querySelector( '.close' ).addEventListener( 'click', event => { + dom.overlay.querySelector( '.overlay-close' ).addEventListener( 'click', event => { closeOverlay(); event.preventDefault(); }, false ); - dom.overlay.querySelector( '.external' ).addEventListener( 'click', event => { + dom.overlay.querySelector( '.overlay-external' ).addEventListener( 'click', event => { closeOverlay(); }, false ); @@ -902,15 +902,15 @@ export default function( revealElement, options ) { html += ''; dom.overlay.innerHTML = ` -
- +
+
-
-
${html}
+
+
${html}
`; - dom.overlay.querySelector( '.close' ).addEventListener( 'click', event => { + dom.overlay.querySelector( '.overlay-close' ).addEventListener( 'click', event => { closeOverlay(); event.preventDefault(); }, false );