further refinements to overlay styles

css/reveal.scss

@@ -1440,11 +1440,11 @@ $overlayHeaderPadding: 5px;
 	height: 100%;
 	z-index: 1000;
 	background: rgba( 0, 0, 0, 0.95 );
-	backdrop-filter: blur( 6px );
+	backdrop-filter: blur( 10px );
 	transition: all 0.3s ease;
 }
 
-	.reveal .overlay-spinner {
+.reveal .overlay-spinner {
 	position: absolute;
 	display: block;
 	top: 50%;
@@ -1458,9 +1458,9 @@ $overlayHeaderPadding: 5px;
 	visibility: visible;
 	opacity: 0.6;
 	transition: all 0.3s ease;
-	}
+}
 
-	.reveal .overlay-header {
+.reveal .overlay-header {
 	display: flex;
 	position: absolute;
 	left: 0;
@@ -1471,8 +1471,8 @@ $overlayHeaderPadding: 5px;
 	box-sizing: border-box;
 	align-items: center;
 	justify-content: flex-end;
-	}
-		.reveal .overlay-header a {
+}
+.reveal .overlay-header a {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -1482,11 +1482,11 @@ $overlayHeaderPadding: 5px;
 	opacity: 0.6;
 
 	box-sizing: border-box;
-		}
-			.reveal .overlay-header a:hover {
+}
+.reveal .overlay-header a:hover {
 	opacity: 1;
-			}
-			.reveal .overlay-header .icon {
+}
+.reveal .overlay-header .icon {
 	display: inline-block;
 	width: 20px;
 	height: 20px;
@@ -1494,24 +1494,28 @@ $overlayHeaderPadding: 5px;
 	background-position: 50% 50%;
 	background-size: 100%;
 	background-repeat: no-repeat;
-			}
-			.reveal .overlay-close .icon {
+}
+.reveal .overlay-close .icon {
 	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIuODU0IDIuODU0YS41LjUgMCAwIDAtLjcwOC0uNzA4TDcuNSA2Ljc5MyAyLjg1NCAyLjE0NmEuNS41IDAgMSAwLS43MDguNzA4TDYuNzkzIDcuNWwtNC42NDcgNC42NDZhLjUuNSAwIDAgMCAuNzA4LjcwOEw3LjUgOC4yMDdsNC42NDYgNC42NDdhLjUuNSAwIDAgMCAuNzA4LS43MDhMOC4yMDcgNy41bDQuNjQ3LTQuNjQ2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
-			}
-			.reveal .overlay-external .icon {
+}
+.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;
-		right: 0;
-		bottom: 0;
-		left: 0;
-	}
+	right: 10px;
+	bottom: 10px;
+	left: 10px;
+	border-radius: 10px;
+	overflow: hidden;
+	background-color: rgba(20, 20, 20, 0.8);
+}
 
-	.reveal .overlay-preview .overlay-viewport iframe {
+// Preview overlay
+.reveal .overlay-preview iframe {
 	width: 100%;
 	height: 100%;
 	max-width: 100%;
@@ -1521,14 +1525,14 @@ $overlayHeaderPadding: 5px;
 	opacity: 0;
 	visibility: hidden;
 	transition: all 0.3s ease;
-	}
+}
 
-	.reveal .overlay-preview.loaded .overlay-viewport iframe {
+.reveal .overlay-preview.loaded iframe {
 	opacity: 1;
 	visibility: visible;
-	}
+}
 
-	.reveal .overlay-preview.loaded .overlay-viewport-inner  {
+.reveal .overlay-preview.loaded .overlay-viewport-inner  {
 	position: absolute;
 	z-index: -1;
 	left: 0;
@@ -1536,56 +1540,59 @@ $overlayHeaderPadding: 5px;
 	width: 100%;
 	text-align: center;
 	letter-spacing: normal;
-	}
-	.reveal .overlay-preview .x-frame-error  {
+}
+.reveal .overlay-preview .x-frame-error  {
 	opacity: 0;
 	transition: opacity 0.3s ease 0.3s;
-	}
-	.reveal .overlay-preview.loaded .x-frame-error  {
+}
+.reveal .overlay-preview.loaded .x-frame-error  {
 	opacity: 1;
-	}
+}
 
-	.reveal .overlay-preview.loaded .overlay-spinner {
+.reveal .overlay-preview.loaded .overlay-spinner {
 	opacity: 0;
 	visibility: hidden;
 	transform: scale(0.2);
-	}
+}
 
-	.reveal .overlay-help .overlay-viewport {
+// Help overlay
+.reveal .overlay-help .overlay-viewport {
 	overflow: auto;
 	color: #fff;
-	}
+	display: grid;
+	place-items: center;
+}
 
-	.reveal .overlay-help .overlay-viewport-inner {
+.reveal .overlay-help .overlay-viewport-inner {
 	width: 600px;
 	margin: auto;
-		padding: 20px 20px 80px 20px;
 	text-align: center;
 	letter-spacing: normal;
-	}
+}
 
-	.reveal .overlay-help .overlay-viewport-inner .title {
+.reveal .overlay-help .overlay-viewport-inner .title {
 	font-size: 20px;
-	}
+	margin-top: 0;
+}
 
-	.reveal .overlay-help .overlay-viewport-inner table {
+.reveal .overlay-help .overlay-viewport-inner table {
 	border: 1px solid #fff;
 	border-collapse: collapse;
 	font-size: 16px;
-	}
+}
 
-	.reveal .overlay-help .overlay-viewport-inner table th,
-	.reveal .overlay-help .overlay-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-help .overlay-viewport-inner table th {
+.reveal .overlay-help .overlay-viewport-inner table th {
 	padding-top: 20px;
 	padding-bottom: 20px;
-	}
+}
 
 /*********************************************
  * PLAYBACK COMPONENT

js/reveal.js

@@ -882,7 +882,7 @@ export default function( revealElement, options ) {
 			dom.overlay.classList.add( 'overlay-help' );
 			dom.wrapper.appendChild( dom.overlay );
 
-			let html = '<p class="title">Keyboard Shortcuts</p><br/>';
+			let html = '<p class="title">Keyboard Shortcuts</p>';
 
 			let shortcuts = keyboard.getShortcuts(),
 				bindings = keyboard.getBindings();