From fb1b8a2790a5984c7e47539c2012030633d2b3e7 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 18 May 2017 09:58:25 +0200 Subject: [PATCH] revise progress to make them easier to override --- css/reveal.css | 45 ++++++++++++++++++----------------- css/reveal.scss | 31 ++++++++++++------------ css/theme/beige.css | 4 ++-- css/theme/black.css | 4 ++-- css/theme/blood.css | 4 ++-- css/theme/league.css | 4 ++-- css/theme/moon.css | 4 ++-- css/theme/night.css | 4 ++-- css/theme/serif.css | 4 ++-- css/theme/simple.css | 4 ++-- css/theme/sky.css | 4 ++-- css/theme/solarized.css | 4 ++-- css/theme/template/theme.scss | 3 +-- css/theme/white.css | 4 ++-- js/reveal.js | 8 +++---- 15 files changed, 66 insertions(+), 65 deletions(-) diff --git a/css/reveal.css b/css/reveal.css index b84372cc..c8cefe1c 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 365c36e7..31f235f6 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 aa3500fa..621affaa 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 7d6b3969..8465743e 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 d65a9d66..b276d48a 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 118557ac..77c402f9 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 68478686..3aa39e6b 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 1cc0f84d..49f59e13 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 1a555d9f..caf38815 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 92e32948..a6bbd58b 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 1425ccd3..824df2a9 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 f7c27fe6..32dbd90b 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 bd232121..43b1a8b6 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 14a86104..7fb1ecd6 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 973d4190..bf2f6a02 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -532,10 +532,10 @@ // Arrow controls dom.controls = createSingletonNode( dom.wrapper, 'aside', 'controls', - '' + - '' + - '' + - '' ); + '' + + '' + + '' + + '' ); // Slide number dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' );