refactoring

css/reveal.scss

@@ -33,6 +33,8 @@ html.reveal-full-page {
 
 	background-color: #fff;
 	color: #000;
+
+	--r-reader-progress-width: 8px;
 }
 
 // Force the presentation to cover the full viewport when we
@@ -2003,7 +2005,8 @@ $notesWidthPercent: 25%;
 	}
 }
 
-.reveal-viewport.reveal-reader::-webkit-scrollbar {
+.reveal-viewport.reveal-reader[data-reader-scroll-bar="true"]::-webkit-scrollbar,
+.reveal-viewport.reveal-reader[data-reader-scroll-bar="auto"]::-webkit-scrollbar {
   display: none;
 }
 
@@ -2021,45 +2024,45 @@ $notesWidthPercent: 25%;
 
 	.reader-progress-inner {
 		position: absolute;
-		width: 8px;
+		width: var(--r-reader-progress-width);
 		height: 90vh;
 		right: $controlsSpacing;
 		top: 0;
 		transform: translateY(-50%);
-		border-radius: 8px;
+		border-radius: var(--r-reader-progress-width);
 		z-index: 10;
 
-		// Hit area
-		&:after {
-			content: '';
-			position: absolute;
-			width: 200%;
-			height: 100%;
-			top: 0;
-			left: -50%;
-			background: rgba( 0, 0, 0, 0 );
-			z-index: -1;
-		}
+	}
+
+	// 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: 8px;
-		height: 8px;
+		width: var(--r-reader-progress-width);
+		height: var(--r-reader-progress-width);
 		top: 0;
 		left: 0;
-		border-radius: 8px;
+		border-radius: var(--r-reader-progress-width);
 		background-color: #fff;
-		transition: all 0.1s ease;
 		z-index: 2;
 	}
 
 	.reader-progress-slide {
 		position: absolute;
 		width: 100%;
-		transition: all 0.2s ease;
 		background-color: rgba( 255, 255, 255, 0.2 );
-		border-radius: 8px;
+		border-radius: var(--r-reader-progress-width);
+		transition: all 0.2s ease;
 	}
 
 	.reader-progress-slide.active {