phyks/reveal-js-base-theme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added some styles using the current-fragment class

Browse Source 
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.
This commit is contained in:
Guillaume Turri 2013-11-16 10:45:02 +01:00
parent adbf36ad47
commit b46fd8dd70
3 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -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>

23
css/reveal.css
View File

@ -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 {
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

2
index.html
View File

@ -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>