refactored overlays; new icons and reduced selector specificity

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;
 	}

js/reveal.js

@@ -819,14 +819,14 @@ export default function( revealElement, options ) {
 		dom.wrapper.appendChild( dom.overlay );
 
 		dom.overlay.innerHTML =
-			`<header>
-				<a class="close" href="#"><span class="icon"></span></a>
-				<a class="external" href="${url}" target="_blank"><span class="icon"></span></a>
+			`<header class="overlay-header">
+				<a class="overlay-external" href="${url}" target="_blank"><span class="icon"></span></a>
+				<a class="overlay-close" href="#"><span class="icon"></span></a>
 			</header>
-			<div class="spinner"></div>
-			<div class="viewport">
+			<div class="overlay-spinner"></div>
+			<div class="overlay-viewport">
 				<iframe src="${url}"></iframe>
-				<small class="viewport-inner">
+				<small class="overlay-viewport-inner">
 					<span class="x-frame-error">Unable to load iframe. This is likely due to the site's policy (x-frame-options).</span>
 				</small>
 			</div>`;
@@ -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 += '</table>';
 
 			dom.overlay.innerHTML = `
-				<header>
-					<a class="close" href="#"><span class="icon"></span></a>
+				<header class="overlay-header">
+					<a class="overlay-close" href="#"><span class="icon"></span></a>
 				</header>
-				<div class="viewport">
-					<div class="viewport-inner">${html}</div>
+				<div class="overlay-viewport">
+					<div class="overlay-viewport-inner">${html}</div>
 				</div>
 			`;
 
-			dom.overlay.querySelector( '.close' ).addEventListener( 'click', event => {
+			dom.overlay.querySelector( '.overlay-close' ).addEventListener( 'click', event => {
 				closeOverlay();
 				event.preventDefault();
 			}, false );