Skip to content
Snippets Groups Projects
Commit b46fd8dd authored by Guillaume Turri's avatar Guillaume Turri
Browse files

Added some styles using the current-fragment class

according to README, I don't include reveal.min.js.
Hence I believe it makes sense to not include reveal.min.css either.
Hence, examples added in index.html can give the feeling that they don't work yet.
parent adbf36ad
Branches
Tags
No related merge requests found
...@@ -440,6 +440,8 @@ The default fragment style is to start out invisible and fade in. This style can ...@@ -440,6 +440,8 @@ The default fragment style is to start out invisible and fade in. This style can
<p class="fragment shrink">shrink</p> <p class="fragment shrink">shrink</p>
<p class="fragment roll-in">roll-in</p> <p class="fragment roll-in">roll-in</p>
<p class="fragment fade-out">fade-out</p> <p class="fragment fade-out">fade-out</p>
<p class="fragment current-visible">visible only once</p>
<p class="fragment highlight-current-blue">blue only once</p>
<p class="fragment highlight-red">highlight-red</p> <p class="fragment highlight-red">highlight-red</p>
<p class="fragment highlight-green">highlight-green</p> <p class="fragment highlight-green">highlight-green</p>
<p class="fragment highlight-blue">highlight-blue</p> <p class="fragment highlight-blue">highlight-blue</p>
......
...@@ -179,9 +179,20 @@ body { ...@@ -179,9 +179,20 @@ body {
opacity: 0.5; opacity: 0.5;
} }
.reveal .slides section .fragment.current-visible {
opacity:0;
}
.reveal .slides section .fragment.current-visible.current-fragment {
opacity:1;
}
.reveal .slides section .fragment.highlight-red, .reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-current-red,
.reveal .slides section .fragment.highlight-green, .reveal .slides section .fragment.highlight-green,
.reveal .slides section .fragment.highlight-blue { .reveal .slides section .fragment.highlight-current-green,
.reveal .slides section .fragment.highlight-blue,
.reveal .slides section .fragment.highlight-current-blue {
opacity: 1; opacity: 1;
} }
.reveal .slides section .fragment.highlight-red.visible { .reveal .slides section .fragment.highlight-red.visible {
...@@ -194,6 +205,16 @@ body { ...@@ -194,6 +205,16 @@ body {
color: #1b91ff; color: #1b91ff;
} }
.reveal .slides section .fragment.highlight-current-red.current-fragment {
color: #ff2c2d
}
.reveal .slides section .fragment.highlight-current-green.current-fragment {
color: #17ff2e;
}
.reveal .slides section .fragment.highlight-current-blue.current-fragment {
color: #1b91ff;
}
/********************************************* /*********************************************
* DEFAULT ELEMENT STYLES * DEFAULT ELEMENT STYLES
......
...@@ -302,6 +302,8 @@ function linkify( selector ) { ...@@ -302,6 +302,8 @@ function linkify( selector ) {
<p class="fragment shrink">shrink</p> <p class="fragment shrink">shrink</p>
<p class="fragment roll-in">roll-in</p> <p class="fragment roll-in">roll-in</p>
<p class="fragment fade-out">fade-out</p> <p class="fragment fade-out">fade-out</p>
<p class="fragment current-visible">visible only once</p>
<p class="fragment highlight-current-blue">blue only once</p>
<p class="fragment highlight-red">highlight-red</p> <p class="fragment highlight-red">highlight-red</p>
<p class="fragment highlight-green">highlight-green</p> <p class="fragment highlight-green">highlight-green</p>
<p class="fragment highlight-blue">highlight-blue</p> <p class="fragment highlight-blue">highlight-blue</p>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment