revise progress to make them easier to override

15 files changed, 66 insertions, 65 deletions

diff --git a/css/reveal.css b/css/reveal.css
index b84372c..c8cefe1 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -261,8 +261,8 @@ body {
     opacity: 0;
     -webkit-appearance: none;
     -webkit-tap-highlight-color: transparent; }
-  .reveal .controls .pagination-arrow:before,
-  .reveal .controls .pagination-arrow:after {
+  .reveal .controls .controls-arrow:before,
+  .reveal .controls .controls-arrow:after {
     content: '';
     position: absolute;
     top: 0;
@@ -275,26 +275,26 @@ body {
     -webkit-transform-origin: 0.25em 50%;
             transform-origin: 0.25em 50%;
     will-change: transform; }
-  .reveal .controls .pagination-arrow {
+  .reveal .controls .controls-arrow {
     position: relative;
     width: 3.6em;
     height: 3.6em; }
-    .reveal .controls .pagination-arrow:before {
+    .reveal .controls .controls-arrow:before {
       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(45deg);
               transform: translateX(0.5em) translateY(1.55em) rotate(45deg); }
-    .reveal .controls .pagination-arrow:after {
+    .reveal .controls .controls-arrow:after {
       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-45deg);
               transform: translateX(0.5em) translateY(1.55em) rotate(-45deg); }
-    .reveal .controls .pagination-arrow:hover:before {
+    .reveal .controls .controls-arrow:hover:before {
       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(40deg);
               transform: translateX(0.5em) translateY(1.55em) rotate(40deg); }
-    .reveal .controls .pagination-arrow:hover:after {
+    .reveal .controls .controls-arrow:hover:after {
       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-40deg);
               transform: translateX(0.5em) translateY(1.55em) rotate(-40deg); }
-    .reveal .controls .pagination-arrow:active:before {
+    .reveal .controls .controls-arrow:active:before {
       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(36deg);
               transform: translateX(0.5em) translateY(1.55em) rotate(36deg); }
-    .reveal .controls .pagination-arrow:active:after {
+    .reveal .controls .controls-arrow:active:after {
       -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-36deg);
               transform: translateX(0.5em) translateY(1.55em) rotate(-36deg); }
   .reveal .controls .navigate-left {
@@ -307,7 +307,7 @@ body {
     bottom: 3.2em;
     -webkit-transform: translateX(10px);
             transform: translateX(10px); }
-    .reveal .controls .navigate-right .pagination-arrow {
+    .reveal .controls .navigate-right .controls-arrow {
       -webkit-transform: rotate(180deg);
               transform: rotate(180deg); }
     .reveal .controls .navigate-right.highlight {
@@ -318,7 +318,7 @@ body {
     bottom: 6.4em;
     -webkit-transform: translateY(-10px);
             transform: translateY(-10px); }
-    .reveal .controls .navigate-up .pagination-arrow {
+    .reveal .controls .navigate-up .controls-arrow {
       -webkit-transform: rotate(90deg);
               transform: rotate(90deg); }
   .reveal .controls .navigate-down {
@@ -326,7 +326,7 @@ body {
     bottom: 0;
     -webkit-transform: translateY(10px);
             transform: translateY(10px); }
-    .reveal .controls .navigate-down .pagination-arrow {
+    .reveal .controls .navigate-down .controls-arrow {
       -webkit-transform: rotate(-90deg);
               transform: rotate(-90deg); }
     .reveal .controls .navigate-down.highlight {
@@ -355,20 +355,20 @@ body {
     opacity: 1; }
 
 .reveal:not(.has-vertical-slides) .controls .navigate-left {
-  bottom: 1.2em;
-  right: 5.8em; }
+  bottom: 1.4em;
+  right: 6.4em; }
 
 .reveal:not(.has-vertical-slides) .controls .navigate-right {
-  bottom: 1.2em;
-  right: 1.2em; }
+  bottom: 1.4em;
+  right: 1.4em; }
 
 .reveal:not(.has-horizontal-slides) .controls .navigate-up {
-  right: 1.2em;
-  bottom: 5.8em; }
+  right: 1.4em;
+  bottom: 6.4em; }
 
 .reveal:not(.has-horizontal-slides) .controls .navigate-down {
-  right: 1.2em;
-  bottom: 1.2em; }
+  right: 1.4em;
+  bottom: 1.4em; }
 
 .reveal.has-dark-background .controls {
   color: #fff; }
@@ -412,7 +412,8 @@ body {
   bottom: 0;
   left: 0;
   z-index: 10;
-  background-color: rgba(0, 0, 0, 0.2); }
+  background-color: rgba(0, 0, 0, 0.2);
+  color: #fff; }
 
 .reveal .progress:after {
   content: '';
@@ -426,7 +427,7 @@ body {
   display: block;
   height: 100%;
   width: 0px;
-  background-color: #000;
+  background-color: currentColor;
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************
diff --git a/css/reveal.scss b/css/reveal.scss
index 365c36e..31f235f 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -302,8 +302,8 @@ $controlArrowThickness: 0.5em;
 		-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
 	}
 
-	.pagination-arrow:before,
-	.pagination-arrow:after {
+	.controls-arrow:before,
+	.controls-arrow:after {
 		content: '';
 		position: absolute;
 		top: 0;
@@ -318,7 +318,7 @@ $controlArrowThickness: 0.5em;
 		will-change: transform;
 	}
 
-	.pagination-arrow {
+	.controls-arrow {
 		position: relative;
 		width: $controlArrowSize;
 		height: $controlArrowSize;
@@ -345,7 +345,7 @@ $controlArrowThickness: 0.5em;
 		bottom: $controlArrowSpacing + $controlArrowSize/2;
 		transform: translateX( 10px );
 
-		.pagination-arrow {
+		.controls-arrow {
 			transform: rotate( 180deg );
 		}
 
@@ -359,7 +359,7 @@ $controlArrowThickness: 0.5em;
 		bottom: $controlArrowSpacing*2 + $controlArrowSize;
 		transform: translateY( -10px );
 
-		.pagination-arrow {
+		.controls-arrow {
 			transform: rotate( 90deg );
 		}
 	}
@@ -369,7 +369,7 @@ $controlArrowThickness: 0.5em;
 		bottom: 0;
 		transform: translateY( 10px );
 
-		.pagination-arrow {
+		.controls-arrow {
 			transform: rotate( -90deg );
 		}
 
@@ -420,22 +420,22 @@ $controlArrowThickness: 0.5em;
 
 // Adjust the layout when there are no vertical slides
 .reveal:not(.has-vertical-slides) .controls .navigate-left {
-	bottom: 1.2em;
-	right: 2.2em + $controlArrowSize;
+	bottom: $controlArrowSpacing;
+	right: $controlArrowSpacing*2 + $controlArrowSize;
 }
 
 .reveal:not(.has-vertical-slides) .controls .navigate-right {
-	bottom: 1.2em;
-	right: 1.2em;
+	bottom: $controlArrowSpacing;
+	right: $controlArrowSpacing;
 }
 
 .reveal:not(.has-horizontal-slides) .controls .navigate-up {
-	right: 1.2em;
-	bottom: 2.2em + $controlArrowSize;
+	right: $controlArrowSpacing;
+	bottom: $controlArrowSpacing*2 + $controlArrowSize;
 }
 .reveal:not(.has-horizontal-slides) .controls .navigate-down {
-	right: 1.2em;
-	bottom: 1.2em;
+	right: $controlArrowSpacing;
+	bottom: $controlArrowSpacing;
 }
 
 .reveal.has-dark-background .controls {
@@ -505,6 +505,7 @@ $controlArrowThickness: 0.5em;
 	z-index: 10;
 
 	background-color: rgba( 0, 0, 0, 0.2 );
+	color: #fff;
 }
 	.reveal .progress:after {
 		content: '';
@@ -519,7 +520,7 @@ $controlArrowThickness: 0.5em;
 		height: 100%;
 		width: 0px;
 
-		background-color: #000;
+		background-color: currentColor;
 		transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 	}
 
diff --git a/css/theme/beige.css b/css/theme/beige.css
index aa3500f..621affa 100644
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -262,10 +262,10 @@ body {
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #8b743d; }
 
 .reveal .progress span {
-  background: #8b743d;
   -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
diff --git a/css/theme/black.css b/css/theme/black.css
index 7d6b396..8465743 100644
--- a/css/theme/black.css
+++ b/css/theme/black.css
@@ -258,10 +258,10 @@ body {
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #42affa; }
 
 .reveal .progress span {
-  background: #42affa;
   -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
diff --git a/css/theme/blood.css b/css/theme/blood.css
index d65a9d6..b276d48 100644
--- a/css/theme/blood.css
+++ b/css/theme/blood.css
@@ -261,10 +261,10 @@ body {
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #a23; }
 
 .reveal .progress span {
-  background: #a23;
   -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
diff --git a/css/theme/league.css b/css/theme/league.css
index 118557a..77c402f 100644
--- a/css/theme/league.css
+++ b/css/theme/league.css
@@ -264,10 +264,10 @@ body {
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #13DAEC; }
 
 .reveal .progress span {
-  background: #13DAEC;
   -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
diff --git a/css/theme/moon.css b/css/theme/moon.css
index 6847868..3aa39e6 100644
--- a/css/theme/moon.css
+++ b/css/theme/moon.css
@@ -262,10 +262,10 @@ body {
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #268bd2; }
 
 .reveal .progress span {
-  background: #268bd2;
   -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
diff --git a/css/theme/night.css b/css/theme/night.css
index 1cc0f84..49f59e1 100644
--- a/css/theme/night.css
+++ b/css/theme/night.css
@@ -256,10 +256,10 @@ body {
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #e7ad52; }
 
 .reveal .progress span {
-  background: #e7ad52;
   -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
diff --git a/css/theme/serif.css b/css/theme/serif.css
index 1a555d9..caf3881 100644
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -258,10 +258,10 @@ body {
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #51483D; }
 
 .reveal .progress span {
-  background: #51483D;
   -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
diff --git a/css/theme/simple.css b/css/theme/simple.css
index 92e3294..a6bbd58 100644
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -261,10 +261,10 @@ body {
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #00008B; }
 
 .reveal .progress span {
-  background: #00008B;
   -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
diff --git a/css/theme/sky.css b/css/theme/sky.css
index 1425ccd..824df2a 100644
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -265,10 +265,10 @@ body {
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #3b759e; }
 
 .reveal .progress span {
-  background: #3b759e;
   -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
diff --git a/css/theme/solarized.css b/css/theme/solarized.css
index f7c27fe..32dbd90 100644
--- a/css/theme/solarized.css
+++ b/css/theme/solarized.css
@@ -262,10 +262,10 @@ body {
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #268bd2; }
 
 .reveal .progress span {
-  background: #268bd2;
   -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss
index bd23212..43b1a8b 100644
--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@@ -308,10 +308,9 @@ body {
 
 .reveal .progress {
 	background: rgba(0,0,0,0.2);
+	color: $linkColor;
 }
 	.reveal .progress span {
-		background: $linkColor;
-
 		-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 		   -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 		        transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
diff --git a/css/theme/white.css b/css/theme/white.css
index 14a8610..7fb1ecd 100644
--- a/css/theme/white.css
+++ b/css/theme/white.css
@@ -258,10 +258,10 @@ body {
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
-  background: rgba(0, 0, 0, 0.2); }
+  background: rgba(0, 0, 0, 0.2);
+  color: #2a76dd; }
 
 .reveal .progress span {
-  background: #2a76dd;
   -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
diff --git a/js/reveal.js b/js/reveal.js
index 973d419..bf2f6a0 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -532,10 +532,10 @@
 
 		// Arrow controls
 		dom.controls = createSingletonNode( dom.wrapper, 'aside', 'controls',
-			'<button class="navigate-left" aria-label="previous slide"><div class="pagination-arrow"></div></button>' +
-			'<button class="navigate-right" aria-label="next slide"><div class="pagination-arrow"></div></button>' +
-			'<button class="navigate-up" aria-label="above slide"><div class="pagination-arrow"></div></button>' +
-			'<button class="navigate-down" aria-label="below slide"><div class="pagination-arrow"></div></button>' );
+			'<button class="navigate-left" aria-label="previous slide"><div class="controls-arrow"></div></button>' +
+			'<button class="navigate-right" aria-label="next slide"><div class="controls-arrow"></div></button>' +
+			'<button class="navigate-up" aria-label="above slide"><div class="controls-arrow"></div></button>' +
+			'<button class="navigate-down" aria-label="below slide"><div class="controls-arrow"></div></button>' );
 
 		// Slide number
 		dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' );