Add scroll view

css/print/pdf.scss

@@ -5,7 +5,7 @@
  * https://revealjs.com/pdf-export/
  */
 
-html.print-pdf {
+html.reveal-print {
 	* {
 		-webkit-print-color-adjust: exact;
 	}

css/reveal.scss

@@ -19,6 +19,7 @@ html.reveal-full-page {
 	height: 100%;
 	height: 100vh;
 	height: calc( var(--vh, 1vh) * 100 );
+	height: 100svh;
 	overflow: hidden;
 }
 
@@ -31,6 +32,8 @@ html.reveal-full-page {
 
 	background-color: #fff;
 	color: #000;
+
+	--r-controls-spacing: 12px;
 }
 
 // Force the presentation to cover the full viewport when we
@@ -271,13 +274,11 @@ $controlsArrowAngleActive: 36deg;
 }
 
 .reveal .controls {
-	$spacing: 12px;
-
 	display: none;
 	position: absolute;
 	top: auto;
-	bottom: $spacing;
-	right: $spacing;
+	bottom: var(--r-controls-spacing);
+	right: var(--r-controls-spacing);
 	left: auto;
 	z-index: 11;
 	color: #000;
@@ -509,7 +510,9 @@ $controlsArrowAngleActive: 36deg;
 // Edge aligned controls layout
 @media screen and (min-width: 500px) {
 
-	$spacing: 0.8em;
+	.reveal-viewport {
+		--r-controls-spacing: 0.8em;
+	}
 
 	.reveal .controls[data-controls-layout="edges"] {
 		& {
@@ -529,24 +532,24 @@ $controlsArrowAngleActive: 36deg;
 
 		.navigate-left {
 			top: 50%;
-			left: $spacing;
+			left: var(--r-controls-spacing);
 			margin-top: -$controlArrowSize*0.5;
 		}
 
 		.navigate-right {
 			top: 50%;
-			right: $spacing;
+			right: var(--r-controls-spacing);
 			margin-top: -$controlArrowSize*0.5;
 		}
 
 		.navigate-up {
-			top: $spacing;
+			top: var(--r-controls-spacing);
 			left: 50%;
 			margin-left: -$controlArrowSize*0.5;
 		}
 
 		.navigate-down {
-			bottom: $spacing - $controlArrowSpacing + 0.3em;
+			bottom: calc(var(--r-controls-spacing) - #{$controlArrowSpacing} + 0.3em);
 			left: 50%;
 			margin-left: -$controlArrowSize*0.5;
 		}
@@ -1864,6 +1867,214 @@ $notesWidthPercent: 25%;
 }
 
 
+/*********************************************
+ * READER MODE
+ *********************************************/
+.reveal-viewport.loading-scroll-mode {
+	visibility: hidden;
+}
+
+.reveal-viewport.reveal-reader {
+	& {
+		margin: 0 auto !important;
+		overflow: auto;
+		overflow-x: hidden;
+		overflow-y: auto;
+		z-index: 1;
+
+		--r-reader-progress-width: 8px;
+		--r-reader-progress-trigger-size: 6px;
+	}
+
+	@media screen and (max-width: 500px) {
+		--r-reader-progress-width: 3px;
+		--r-reader-progress-trigger-size: 3px;
+	}
+
+	.reveal .controls,
+	.reveal .progress,
+	.reveal .playback,
+	.reveal .backgrounds,
+	.reveal .slide-number {
+		display: none !important;
+	}
+
+	.reveal {
+		overflow: visible;
+		touch-action: manipulation;
+	}
+	.reveal .slides {
+		position: static;
+		pointer-events: initial;
+
+		left: auto;
+		top: auto;
+		width: 100% !important;
+		margin: 0 !important;
+		padding: 0 !important;
+
+		overflow: visible;
+		display: block;
+
+		perspective: none;
+		perspective-origin: 50% 50%;
+	}
+
+	.reveal .slides .reader-page {
+		position: relative;
+		width: 100%;
+		height: calc(var(--page-height) + var(--page-scroll-padding));
+		z-index: 1;
+		overflow: visible;
+	}
+
+	.reveal .slides .reader-page-sticky {
+		position: sticky;
+		height: var(--page-height);
+		top: 0px;
+	}
+
+	.reveal .slides .reader-page-content {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	.reveal .slides .reader-page section {
+		visibility: visible !important;
+		display: block !important;
+		position: absolute !important;
+		top: 50% !important;
+		left: 50% !important;
+		opacity: 1 !important;
+		transform: scale(var(--slide-scale)) translate(-50%, -50%) !important;
+		transform-style: flat !important;
+		transform-origin: 0 0 !important;
+	}
+
+	.reveal .slide-background {
+		display: block !important;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: auto !important;
+		visibility: visible;
+		opacity: 1;
+		touch-action: manipulation;
+	}
+}
+
+.reveal-viewport.reveal-reader[data-reader-scroll-bar="true"]::-webkit-scrollbar,
+.reveal-viewport.reveal-reader[data-reader-scroll-bar="auto"]::-webkit-scrollbar {
+  display: none;
+}
+
+.reveal.has-dark-background,
+.reveal-viewport.has-dark-background {
+	--r-overlay-element-bg-color: 240, 240, 240;
+	--r-overlay-element-fg-color: 0, 0, 0;
+}
+.reveal.has-light-background,
+.reveal-viewport.has-light-background {
+	--r-overlay-element-bg-color: 0, 0, 0;
+	--r-overlay-element-fg-color: 240, 240, 240;
+}
+
+.reveal-viewport.reveal-reader .reader-progress {
+	position: sticky;
+	top: 50%;
+	z-index: 20;
+	opacity: 0;
+	transition: all 0.3s ease;
+
+	&.visible,
+	&:hover {
+		opacity: 1;
+	}
+
+	.reader-progress-inner {
+		position: absolute;
+		width: var(--r-reader-progress-width);
+		height: calc(var(--viewport-height) - var(--r-controls-spacing) * 2);
+		right: var(--r-controls-spacing);
+		top: 0;
+		transform: translateY(-50%);
+		border-radius: var(--r-reader-progress-width);
+		z-index: 10;
+	}
+
+	// Hit area
+	.reader-progress-inner:after {
+		content: '';
+		position: absolute;
+		width: 200%;
+		height: 100%;
+		top: 0;
+		left: -50%;
+		background: rgba( 0, 0, 0, 0 );
+		z-index: -1;
+	}
+
+	.reader-progress-playhead {
+		position: absolute;
+		width: var(--r-reader-progress-width);
+		height: var(--r-reader-progress-width);
+		top: 0;
+		left: 0;
+		border-radius: var(--r-reader-progress-width);
+		background-color: rgba(var(--r-overlay-element-bg-color), 1);
+		z-index: 11;
+		transition: background-color 0.2s ease, height 0.4s ease;
+	}
+
+	.reader-progress-slide {
+		position: absolute;
+		width: 100%;
+		background-color: rgba(var(--r-overlay-element-bg-color), 0.2);
+		box-shadow: 0 0 0px 1px rgba(var(--r-overlay-element-fg-color), 0.1);
+		border-radius: var(--r-reader-progress-width);
+		transition: background-color 0.2s ease;
+	}
+
+	.reader-progress-slide.active {
+		background-color: rgba(var(--r-overlay-element-bg-color), 1);
+	}
+
+	.reader-progress-trigger {
+		position: absolute;
+		width: 100%;
+		transition: background-color 0.2s ease;
+	}
+
+	.reader-progress-slide.active.has-triggers {
+		background-color: rgba(var(--r-overlay-element-bg-color), 0.4);
+		z-index: 10;
+	}
+
+	.reader-progress-slide.active .reader-progress-trigger:after {
+		content: '';
+		position: absolute;
+		width: var(--r-reader-progress-trigger-size);
+		height: var(--r-reader-progress-trigger-size);
+		border-radius: 20px;
+		bottom: 0;
+		left: 50%;
+		transform: translate(-50%, 0);
+		background-color: rgba(var(--r-overlay-element-bg-color), 0.8);
+		transition: transform 0.2s ease;
+	}
+
+	.reader-progress-slide.active .reader-progress-trigger.active:after {
+		transform: translate(calc( var(--r-reader-progress-width) * -2), 0);
+		background-color: rgba(var(--r-overlay-element-bg-color), 1);
+	}
+}
+
+
 /*********************************************
  * PRINT STYLES
  *********************************************/

css/theme/source/beige.scss

@@ -27,6 +27,9 @@ $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: rgba(79, 64, 28, 0.99);
 $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
 
+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Background generator
 @mixin bodyBackground() {
 	@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );

css/theme/source/serif.scss

@@ -25,6 +25,9 @@ $linkColor: #51483D;
 $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: #26351C;
 
+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 .reveal a {
   line-height: 1.3em;
 }

css/theme/source/simple.scss

@@ -31,6 +31,9 @@ $linkColor: #00008B;
 $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: rgba(0, 0, 0, 0.99);
 
+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Change text colors against dark slide backgrounds
 @include dark-bg-text-color(#fff);
 

css/theme/source/sky.scss

@@ -29,6 +29,9 @@ $linkColor: #3b759e;
 $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: #134674;
 
+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Fix links so they are not cut off
 .reveal a {
 	line-height: 1.3em;

css/theme/source/solarized.scss

@@ -51,6 +51,9 @@ $linkColor: $blue;
 $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: $magenta;
 
+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Background generator
 // @mixin bodyBackground() {
 // 	@include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );

css/theme/source/white-contrast.scss

@@ -40,6 +40,9 @@ $heading2Size: 1.6em;
 $heading3Size: 1.3em;
 $heading4Size: 1.0em;
 
+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Change text colors against dark slide backgrounds
 @include dark-bg-text-color(#fff);
 

css/theme/source/white.scss

@@ -37,6 +37,9 @@ $heading2Size: 1.6em;
 $heading3Size: 1.3em;
 $heading4Size: 1.0em;
 
+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Change text colors against dark slide backgrounds
 @include dark-bg-text-color(#fff);
 

css/theme/template/exposer.scss

@@ -25,4 +25,6 @@
   --r-link-color-hover: #{$linkColorHover};
   --r-selection-background-color: #{$selectionBackgroundColor};
   --r-selection-color: #{$selectionColor};
+  --r-overlay-element-bg-color: #{$overlayElementBgColor};
+  --r-overlay-element-fg-color: #{$overlayElementFgColor};
 }

css/theme/template/settings.scss

@@ -38,6 +38,11 @@ $linkColorHover: lighten( $linkColor, 20% );
 $selectionBackgroundColor: #FF5E99;
 $selectionColor: #fff;
 
+// Colors used for UI elements that are overlaid on top of
+// the presentation
+$overlayElementBgColor: 240, 240, 240;
+$overlayElementFgColor: 0, 0, 0;
+
 // Generates the presentation background, can be overridden
 // to return a background image or gradient
 @mixin bodyBackground() {

dist/theme/beige.css

@@ -37,6 +37,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-link-color-hover: #c0a86e;
   --r-selection-background-color: rgba(79, 64, 28, 0.99);
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 0, 0, 0;
+  --r-overlay-element-fg-color: 240, 240, 240;
 }
 
 .reveal-viewport {