Skip to content
GitLab
Commit fb1b8a27 authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

revise progress to make them easier to override

parent a5e175d5
Hide whitespace changes
Inline Side-by-side
css/reveal.css
View file @ fb1b8a27
......@@ -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); }
/*********************************************
......
css/reveal.scss
View file @ fb1b8a27
......@@ -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);
}
......
css/theme/beige.css
View file @ fb1b8a27
......@@ -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); }
css/theme/black.css
View file @ fb1b8a27
......@@ -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); }
css/theme/blood.css
View file @ fb1b8a27
......@@ -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); }
......
css/theme/league.css
View file @ fb1b8a27
......@@ -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); }
css/theme/moon.css
View file @ fb1b8a27
......@@ -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); }
css/theme/night.css
View file @ fb1b8a27
......@@ -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); }
css/theme/serif.css
View file @ fb1b8a27
......@@ -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); }
css/theme/simple.css
View file @ fb1b8a27
......@@ -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); }
css/theme/sky.css
View file @ fb1b8a27
......@@ -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); }
css/theme/solarized.css
View file @ fb1b8a27
......@@ -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); }
css/theme/template/theme.scss
View file @ fb1b8a27
......@@ -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);
......
css/theme/white.css
View file @ fb1b8a27
......@@ -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); }
js/reveal.js
View file @ fb1b8a27
......@@ -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', '' );
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment