summaryrefslogtreecommitdiffhomepage
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/print/paper.css2
-rw-r--r--css/print/pdf.css46
-rw-r--r--css/reveal.css101
-rw-r--r--css/reveal.scss59
-rw-r--r--css/theme/README.md4
-rw-r--r--css/theme/beige.css18
-rw-r--r--css/theme/black.css20
-rw-r--r--css/theme/blood.css18
-rw-r--r--css/theme/league.css18
-rw-r--r--css/theme/moon.css18
-rw-r--r--css/theme/night.css18
-rw-r--r--css/theme/serif.css18
-rw-r--r--css/theme/simple.css18
-rw-r--r--css/theme/sky.css18
-rw-r--r--css/theme/solarized.css18
-rw-r--r--css/theme/source/black.scss2
-rw-r--r--css/theme/source/white.scss2
-rw-r--r--css/theme/template/theme.scss7
-rw-r--r--css/theme/white.css20
19 files changed, 190 insertions, 235 deletions
diff --git a/css/print/paper.css b/css/print/paper.css
index 7c7257a..6588f48 100644
--- a/css/print/paper.css
+++ b/css/print/paper.css
@@ -141,7 +141,7 @@
.reveal .slides section {
visibility: visible !important;
position: static !important;
- width: 100% !important;
+ width: auto !important;
height: auto !important;
display: block !important;
overflow: visible !important;
diff --git a/css/print/pdf.css b/css/print/pdf.css
index f78344c..9ed90d6 100644
--- a/css/print/pdf.css
+++ b/css/print/pdf.css
@@ -1,15 +1,9 @@
-/* Default Print Stylesheet Template
- by Rob Glazebrook of CSSnewbie.com
- Last Updated: June 4, 2008
-
- Feel free (nay, compelled) to edit, append, and
- manipulate this file as you see fit. */
-
-
-/* SECTION 1: Set default width, margin, float, and
- background. This prevents elements from extending
- beyond the edge of the printed page, and prevents
- unnecessary background images from printing */
+/**
+ * This stylesheet is used to print reveal.js
+ * presentations to PDF.
+ *
+ * https://github.com/hakimel/reveal.js#pdf-export
+ */
* {
-webkit-print-color-adjust: exact;
@@ -29,12 +23,10 @@ html {
overflow: visible;
}
-/* SECTION 2: Remove any elements not needed in print.
- This would include navigation, ads, sidebars, etc. */
+/* Remove any elements not needed in print. */
.nestedarrow,
.reveal .controls,
.reveal .progress,
-.reveal .slide-number,
.reveal .playback,
.reveal.overview,
.fork-reveal,
@@ -43,16 +35,7 @@ html {
display: none !important;
}
-/* SECTION 3: Set body font face, size, and color.
- Consider using a serif font for readability. */
-body, p, td, li, div {
-
-}
-
-/* SECTION 4: Set heading font face, sizes, and color.
- Differentiate your headings from your body text.
- Perhaps use a large sans-serif for distinction. */
-h1,h2,h3,h4,h5,h6 {
+h1, h2, h3, h4, h5, h6 {
text-shadow: 0 0 0 #000 !important;
}
@@ -61,8 +44,6 @@ h1,h2,h3,h4,h5,h6 {
font-family: Courier, 'Courier New', monospace !important;
}
-
-/* SECTION 5: more reveal.js specific additions by @skypanther */
ul, ol, div, p {
visibility: visible;
position: static;
@@ -100,6 +81,7 @@ ul, ol, div, p {
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
+
.reveal .slides section {
page-break-after: always !important;
@@ -125,6 +107,7 @@ ul, ol, div, p {
-ms-transform: none !important;
transform: none !important;
}
+
.reveal section.stack {
margin: 0 !important;
padding: 0 !important;
@@ -132,9 +115,11 @@ ul, ol, div, p {
height: auto !important;
min-height: auto !important;
}
+
.reveal img {
box-shadow: none;
}
+
.reveal .roll {
overflow: visible;
line-height: 1em;
@@ -166,3 +151,10 @@ ul, ol, div, p {
z-index: 100;
}
+/* Display slide numbers when 'slideNumber' is enabled */
+.reveal .slide-number-pdf {
+ display: block;
+ position: absolute;
+ font-size: 14px;
+}
+
diff --git a/css/reveal.css b/css/reveal.css
index 52a05a7..3a31fa4 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -3,7 +3,7 @@
* http://lab.hakim.se/reveal-js
* MIT licensed
*
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2016 Hakim El Hattab, http://hakim.se
*/
/*********************************************
* RESET STYLES
@@ -59,8 +59,8 @@ html:-moz-full-screen-ancestor {
.reveal .slides section .fragment {
opacity: 0;
visibility: hidden;
- -webkit-transition: all 0.2s ease;
- transition: all 0.2s ease; }
+ -webkit-transition: all .2s ease;
+ transition: all .2s ease; }
.reveal .slides section .fragment.visible {
opacity: 1;
visibility: visible; }
@@ -70,7 +70,6 @@ html:-moz-full-screen-ancestor {
visibility: visible; }
.reveal .slides section .fragment.grow.visible {
-webkit-transform: scale(1.3);
- -ms-transform: scale(1.3);
transform: scale(1.3); }
.reveal .slides section .fragment.shrink {
@@ -78,16 +77,13 @@ html:-moz-full-screen-ancestor {
visibility: visible; }
.reveal .slides section .fragment.shrink.visible {
-webkit-transform: scale(0.7);
- -ms-transform: scale(0.7);
transform: scale(0.7); }
.reveal .slides section .fragment.zoom-in {
-webkit-transform: scale(0.1);
- -ms-transform: scale(0.1);
transform: scale(0.1); }
.reveal .slides section .fragment.zoom-in.visible {
-webkit-transform: none;
- -ms-transform: none;
transform: none; }
.reveal .slides section .fragment.fade-out {
@@ -110,6 +106,34 @@ html:-moz-full-screen-ancestor {
.reveal .slides section .fragment.strike.visible {
text-decoration: line-through; }
+.reveal .slides section .fragment.fade-up {
+ -webkit-transform: translate(0, 20%);
+ transform: translate(0, 20%); }
+ .reveal .slides section .fragment.fade-up.visible {
+ -webkit-transform: translate(0, 0);
+ transform: translate(0, 0); }
+
+.reveal .slides section .fragment.fade-down {
+ -webkit-transform: translate(0, -20%);
+ transform: translate(0, -20%); }
+ .reveal .slides section .fragment.fade-down.visible {
+ -webkit-transform: translate(0, 0);
+ transform: translate(0, 0); }
+
+.reveal .slides section .fragment.fade-right {
+ -webkit-transform: translate(-20%, 0);
+ transform: translate(-20%, 0); }
+ .reveal .slides section .fragment.fade-right.visible {
+ -webkit-transform: translate(0, 0);
+ transform: translate(0, 0); }
+
+.reveal .slides section .fragment.fade-left {
+ -webkit-transform: translate(20%, 0);
+ transform: translate(20%, 0); }
+ .reveal .slides section .fragment.fade-left.visible {
+ -webkit-transform: translate(0, 0);
+ transform: translate(0, 0); }
+
.reveal .slides section .fragment.current-visible {
opacity: 0;
visibility: hidden; }
@@ -190,7 +214,6 @@ html:-moz-full-screen-ancestor {
background-color: transparent;
border: 12px solid transparent;
-webkit-transform: scale(0.9999);
- -ms-transform: scale(0.9999);
transform: scale(0.9999);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
@@ -273,11 +296,18 @@ html:-moz-full-screen-ancestor {
.reveal .slide-number {
position: fixed;
display: block;
- right: 15px;
- bottom: 15px;
- opacity: 0.5;
+ right: 8px;
+ bottom: 8px;
z-index: 31;
- font-size: 12px; }
+ font-family: Helvetica, sans-serif;
+ font-size: 12px;
+ line-height: 1;
+ color: #fff;
+ background-color: rgba(0, 0, 0, 0.4);
+ padding: 5px; }
+
+.reveal .slide-number-delimiter {
+ margin: 0 3px; }
/*********************************************
* SLIDES
@@ -320,7 +350,6 @@ html:-moz-full-screen-ancestor {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
- transition: -ms-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/* Global transition speed settings */
@@ -388,28 +417,24 @@ html:-moz-full-screen-ancestor {
.reveal .slides > section[data-transition~=slide-out].past,
.reveal.slide .slides > section:not([data-transition]).past {
-webkit-transform: translate(-150%, 0);
- -ms-transform: translate(-150%, 0);
transform: translate(-150%, 0); }
.reveal .slides > section[data-transition=slide].future,
.reveal .slides > section[data-transition~=slide-in].future,
.reveal.slide .slides > section:not([data-transition]).future {
-webkit-transform: translate(150%, 0);
- -ms-transform: translate(150%, 0);
transform: translate(150%, 0); }
.reveal .slides > section > section[data-transition=slide].past,
.reveal .slides > section > section[data-transition~=slide-out].past,
.reveal.slide .slides > section > section:not([data-transition]).past {
-webkit-transform: translate(0, -150%);
- -ms-transform: translate(0, -150%);
transform: translate(0, -150%); }
.reveal .slides > section > section[data-transition=slide].future,
.reveal .slides > section > section[data-transition~=slide-in].future,
.reveal.slide .slides > section > section:not([data-transition]).future {
-webkit-transform: translate(0, 150%);
- -ms-transform: translate(0, 150%);
transform: translate(0, 150%); }
.reveal.linear section {
@@ -420,28 +445,24 @@ html:-moz-full-screen-ancestor {
.reveal .slides > section[data-transition~=linear-out].past,
.reveal.linear .slides > section:not([data-transition]).past {
-webkit-transform: translate(-150%, 0);
- -ms-transform: translate(-150%, 0);
transform: translate(-150%, 0); }
.reveal .slides > section[data-transition=linear].future,
.reveal .slides > section[data-transition~=linear-in].future,
.reveal.linear .slides > section:not([data-transition]).future {
-webkit-transform: translate(150%, 0);
- -ms-transform: translate(150%, 0);
transform: translate(150%, 0); }
.reveal .slides > section > section[data-transition=linear].past,
.reveal .slides > section > section[data-transition~=linear-out].past,
.reveal.linear .slides > section > section:not([data-transition]).past {
-webkit-transform: translate(0, -150%);
- -ms-transform: translate(0, -150%);
transform: translate(0, -150%); }
.reveal .slides > section > section[data-transition=linear].future,
.reveal .slides > section > section[data-transition~=linear-in].future,
.reveal.linear .slides > section > section:not([data-transition]).future {
-webkit-transform: translate(0, 150%);
- -ms-transform: translate(0, 150%);
transform: translate(0, 150%); }
/*********************************************
@@ -536,7 +557,6 @@ html:-moz-full-screen-ancestor {
.reveal.zoom .slides > section:not([data-transition]).past {
visibility: hidden;
-webkit-transform: scale(16);
- -ms-transform: scale(16);
transform: scale(16); }
.reveal .slides > section[data-transition=zoom].future,
@@ -544,21 +564,18 @@ html:-moz-full-screen-ancestor {
.reveal.zoom .slides > section:not([data-transition]).future {
visibility: hidden;
-webkit-transform: scale(0.2);
- -ms-transform: scale(0.2);
transform: scale(0.2); }
.reveal .slides > section > section[data-transition=zoom].past,
.reveal .slides > section > section[data-transition~=zoom-out].past,
.reveal.zoom .slides > section > section:not([data-transition]).past {
-webkit-transform: translate(0, -150%);
- -ms-transform: translate(0, -150%);
transform: translate(0, -150%); }
.reveal .slides > section > section[data-transition=zoom].future,
.reveal .slides > section > section[data-transition~=zoom-in].future,
.reveal.zoom .slides > section > section:not([data-transition]).future {
-webkit-transform: translate(0, 150%);
- -ms-transform: translate(0, 150%);
transform: translate(0, 150%); }
/*********************************************
@@ -612,28 +629,24 @@ html:-moz-full-screen-ancestor {
.reveal.cube .slides > section.past {
-webkit-transform-origin: 100% 0%;
- -ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
transform: translate3d(-100%, 0, 0) rotateY(-90deg); }
.reveal.cube .slides > section.future {
-webkit-transform-origin: 0% 0%;
- -ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
transform: translate3d(100%, 0, 0) rotateY(90deg); }
.reveal.cube .slides > section > section.past {
-webkit-transform-origin: 0% 100%;
- -ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
transform: translate3d(0, -100%, 0) rotateX(90deg); }
.reveal.cube .slides > section > section.future {
-webkit-transform-origin: 0% 0%;
- -ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
transform: translate3d(0, 100%, 0) rotateX(-90deg); }
@@ -687,28 +700,24 @@ html:-moz-full-screen-ancestor {
.reveal.page .slides > section.past {
-webkit-transform-origin: 0% 0%;
- -ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
transform: translate3d(-40%, 0, 0) rotateY(-80deg); }
.reveal.page .slides > section.future {
-webkit-transform-origin: 100% 0%;
- -ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.reveal.page .slides > section > section.past {
-webkit-transform-origin: 0% 0%;
- -ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
transform: translate3d(0, -40%, 0) rotateX(80deg); }
.reveal.page .slides > section > section.future {
-webkit-transform-origin: 0% 100%;
- -ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
@@ -720,7 +729,6 @@ html:-moz-full-screen-ancestor {
.reveal.fade .slides section:not([data-transition]),
.reveal.fade .slides > section > section:not([data-transition]) {
-webkit-transform: none;
- -ms-transform: none;
transform: none;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s; }
@@ -736,7 +744,6 @@ html:-moz-full-screen-ancestor {
.reveal .slides section[data-transition=none],
.reveal.none .slides section:not([data-transition]) {
-webkit-transform: none;
- -ms-transform: none;
transform: none;
-webkit-transition: none;
transition: none; }
@@ -790,7 +797,6 @@ html:-moz-full-screen-ancestor {
left: -50%;
margin: 70px 0;
-webkit-transform: none;
- -ms-transform: none;
transform: none; }
.no-transforms .reveal .slides section section {
@@ -864,25 +870,21 @@ html:-moz-full-screen-ancestor {
.reveal[data-background-transition=slide] > .backgrounds .slide-background.past,
.reveal > .backgrounds .slide-background.past[data-background-transition=slide] {
-webkit-transform: translate(-100%, 0);
- -ms-transform: translate(-100%, 0);
transform: translate(-100%, 0); }
.reveal[data-background-transition=slide] > .backgrounds .slide-background.future,
.reveal > .backgrounds .slide-background.future[data-background-transition=slide] {
-webkit-transform: translate(100%, 0);
- -ms-transform: translate(100%, 0);
transform: translate(100%, 0); }
.reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.past,
.reveal > .backgrounds .slide-background > .slide-background.past[data-background-transition=slide] {
-webkit-transform: translate(0, -100%);
- -ms-transform: translate(0, -100%);
transform: translate(0, -100%); }
.reveal[data-background-transition=slide] > .backgrounds .slide-background > .slide-background.future,
.reveal > .backgrounds .slide-background > .slide-background.future[data-background-transition=slide] {
-webkit-transform: translate(0, 100%);
- -ms-transform: translate(0, 100%);
transform: translate(0, 100%); }
/* Convex */
@@ -946,7 +948,6 @@ html:-moz-full-screen-ancestor {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(16);
- -ms-transform: scale(16);
transform: scale(16); }
.reveal[data-background-transition=zoom] > .backgrounds .slide-background.future,
@@ -954,7 +955,6 @@ html:-moz-full-screen-ancestor {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.2);
- -ms-transform: scale(0.2);
transform: scale(0.2); }
.reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.past,
@@ -962,7 +962,6 @@ html:-moz-full-screen-ancestor {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(16);
- -ms-transform: scale(16);
transform: scale(16); }
.reveal[data-background-transition=zoom] > .backgrounds .slide-background > .slide-background.future,
@@ -970,7 +969,6 @@ html:-moz-full-screen-ancestor {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.2);
- -ms-transform: scale(0.2);
transform: scale(0.2); }
/* Global transition speed settings */
@@ -1149,6 +1147,10 @@ html:-moz-full-screen-ancestor {
.reveal .overlay .viewport {
position: absolute;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
top: 40px;
right: 0;
bottom: 0;
@@ -1173,7 +1175,6 @@ html:-moz-full-screen-ancestor {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.2);
- -ms-transform: scale(0.2);
transform: scale(0.2); }
.reveal .overlay.overlay-help .viewport {
@@ -1182,8 +1183,8 @@ html:-moz-full-screen-ancestor {
.reveal .overlay.overlay-help .viewport .viewport-inner {
width: 600px;
- margin: 0 auto;
- padding: 60px;
+ margin: auto;
+ padding: 20px 20px 80px 20px;
text-align: center;
letter-spacing: normal; }
@@ -1193,12 +1194,12 @@ html:-moz-full-screen-ancestor {
.reveal .overlay.overlay-help .viewport .viewport-inner table {
border: 1px solid #fff;
border-collapse: collapse;
- font-size: 14px; }
+ font-size: 16px; }
.reveal .overlay.overlay-help .viewport .viewport-inner table th,
.reveal .overlay.overlay-help .viewport .viewport-inner table td {
width: 200px;
- padding: 10px;
+ padding: 14px;
border: 1px solid #fff;
vertical-align: middle; }
@@ -1247,7 +1248,6 @@ html:-moz-full-screen-ancestor {
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
-webkit-transform-origin: 50% 0%;
- -ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
@@ -1269,7 +1269,6 @@ html:-moz-full-screen-ancestor {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 50% 0%;
- -ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: translate3d(0px, 110%, 0px) rotateX(-90deg);
transform: translate3d(0px, 110%, 0px) rotateX(-90deg); }
diff --git a/css/reveal.scss b/css/reveal.scss
index 2b1546f..da1fb22 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -3,7 +3,7 @@
* http://lab.hakim.se/reveal-js
* MIT licensed
*
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2016 Hakim El Hattab, http://hakim.se
*/
@@ -137,6 +137,38 @@ html:-moz-full-screen-ancestor {
}
}
+.reveal .slides section .fragment.fade-up {
+ transform: translate(0, 20%);
+
+ &.visible {
+ transform: translate(0, 0);
+ }
+}
+
+.reveal .slides section .fragment.fade-down {
+ transform: translate(0, -20%);
+
+ &.visible {
+ transform: translate(0, 0);
+ }
+}
+
+.reveal .slides section .fragment.fade-right {
+ transform: translate(-20%, 0);
+
+ &.visible {
+ transform: translate(0, 0);
+ }
+}
+
+.reveal .slides section .fragment.fade-left {
+ transform: translate(20%, 0);
+
+ &.visible {
+ transform: translate(0, 0);
+ }
+}
+
.reveal .slides section .fragment.current-visible {
opacity: 0;
visibility: hidden;
@@ -329,11 +361,19 @@ html:-moz-full-screen-ancestor {
.reveal .slide-number {
position: fixed;
display: block;
- right: 15px;
- bottom: 15px;
- opacity: 0.5;
+ right: 8px;
+ bottom: 8px;
z-index: 31;
+ font-family: Helvetica, sans-serif;
font-size: 12px;
+ line-height: 1;
+ color: #fff;
+ background-color: rgba( 0, 0, 0, 0.4 );
+ padding: 5px;
+}
+
+.reveal .slide-number-delimiter {
+ margin: 0 3px;
}
/*********************************************
@@ -1164,6 +1204,7 @@ html:-moz-full-screen-ancestor {
.reveal .overlay .viewport {
position: absolute;
+ display: flex;
top: 40px;
right: 0;
bottom: 0;
@@ -1200,8 +1241,8 @@ html:-moz-full-screen-ancestor {
.reveal .overlay.overlay-help .viewport .viewport-inner {
width: 600px;
- margin: 0 auto;
- padding: 60px;
+ margin: auto;
+ padding: 20px 20px 80px 20px;
text-align: center;
letter-spacing: normal;
}
@@ -1213,13 +1254,13 @@ html:-moz-full-screen-ancestor {
.reveal .overlay.overlay-help .viewport .viewport-inner table {
border: 1px solid #fff;
border-collapse: collapse;
- font-size: 14px;
+ font-size: 16px;
}
.reveal .overlay.overlay-help .viewport .viewport-inner table th,
.reveal .overlay.overlay-help .viewport .viewport-inner table td {
width: 200px;
- padding: 10px;
+ padding: 14px;
border: 1px solid #fff;
vertical-align: middle;
}
@@ -1367,5 +1408,3 @@ html:-moz-full-screen-ancestor {
.zoomed .reveal .roll span:after {
visibility: hidden;
}
-
-
diff --git a/css/theme/README.md b/css/theme/README.md
index 753e0c0..5a6c8fa 100644
--- a/css/theme/README.md
+++ b/css/theme/README.md
@@ -4,7 +4,7 @@ Themes are written using Sass to keep things modular and reduce the need for rep
## Creating a Theme
-To create your own theme, start by duplicating any ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source) and adding it to the compilation list in the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js).
+To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled by Grunt from Sass to CSS (see the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js)) when you run `grunt css-themes`.
Each theme file does four things in the following order:
@@ -19,5 +19,3 @@ This is where you override the default theme. Either by specifying variables (se
4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
The template theme file which will generate final CSS output based on the currently defined variables.
-
-When you are done, run `grunt css-themes` to compile the Sass file to CSS and you are ready to use your new theme.
diff --git a/css/theme/beige.css b/css/theme/beige.css
index e7722ce..9d29bd5 100644
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -210,9 +210,9 @@ body {
.reveal a {
color: #8b743d;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #c0a86e;
@@ -237,9 +237,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
@@ -288,9 +288,3 @@ body {
-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); }
-
-/*********************************************
- * SLIDE NUMBER
- *********************************************/
-.reveal .slide-number {
- color: #8b743d; }
diff --git a/css/theme/black.css b/css/theme/black.css
index 10ec7e1..f0a265f 100644
--- a/css/theme/black.css
+++ b/css/theme/black.css
@@ -1,7 +1,7 @@
/**
* Black theme for reveal.js. This is the opposite of the 'white' theme.
*
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * By Hakim El Hattab, http://hakim.se
*/
@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
@@ -206,9 +206,9 @@ body {
.reveal a {
color: #42affa;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #8dcffc;
@@ -233,9 +233,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
@@ -284,9 +284,3 @@ body {
-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); }
-
-/*********************************************
- * SLIDE NUMBER
- *********************************************/
-.reveal .slide-number {
- color: #42affa; }
diff --git a/css/theme/blood.css b/css/theme/blood.css
index 84d7d9e..0d44848 100644
--- a/css/theme/blood.css
+++ b/css/theme/blood.css
@@ -209,9 +209,9 @@ body {
.reveal a {
color: #a23;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #dd5566;
@@ -236,9 +236,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
@@ -288,12 +288,6 @@ body {
-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); }
-/*********************************************
- * SLIDE NUMBER
- *********************************************/
-.reveal .slide-number {
- color: #a23; }
-
.reveal p {
font-weight: 300;
text-shadow: 1px 1px #222; }
diff --git a/css/theme/league.css b/css/theme/league.css
index 1f6a8a1..1f7ad4c 100644
--- a/css/theme/league.css
+++ b/css/theme/league.css
@@ -212,9 +212,9 @@ body {
.reveal a {
color: #13DAEC;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #71e9f4;
@@ -239,9 +239,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
@@ -290,9 +290,3 @@ body {
-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); }
-
-/*********************************************
- * SLIDE NUMBER
- *********************************************/
-.reveal .slide-number {
- color: #13DAEC; }
diff --git a/css/theme/moon.css b/css/theme/moon.css
index 1c81cf9..4e5532a 100644
--- a/css/theme/moon.css
+++ b/css/theme/moon.css
@@ -210,9 +210,9 @@ body {
.reveal a {
color: #268bd2;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #78b9e6;
@@ -237,9 +237,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
@@ -288,9 +288,3 @@ body {
-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); }
-
-/*********************************************
- * SLIDE NUMBER
- *********************************************/
-.reveal .slide-number {
- color: #268bd2; }
diff --git a/css/theme/night.css b/css/theme/night.css
index 748a94f..d2fc296 100644
--- a/css/theme/night.css
+++ b/css/theme/night.css
@@ -204,9 +204,9 @@ body {
.reveal a {
color: #e7ad52;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #f3d7ac;
@@ -231,9 +231,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
@@ -282,9 +282,3 @@ body {
-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); }
-
-/*********************************************
- * SLIDE NUMBER
- *********************************************/
-.reveal .slide-number {
- color: #e7ad52; }
diff --git a/css/theme/serif.css b/css/theme/serif.css
index 2817e0f..7d5c35e 100644
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -206,9 +206,9 @@ body {
.reveal a {
color: #51483D;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #8b7c69;
@@ -233,9 +233,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
@@ -284,9 +284,3 @@ body {
-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); }
-
-/*********************************************
- * SLIDE NUMBER
- *********************************************/
-.reveal .slide-number {
- color: #51483D; }
diff --git a/css/theme/simple.css b/css/theme/simple.css
index c65e8ce..9123043 100644
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -206,9 +206,9 @@ body {
.reveal a {
color: #00008B;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #0000f1;
@@ -233,9 +233,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
@@ -284,9 +284,3 @@ body {
-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); }
-
-/*********************************************
- * SLIDE NUMBER
- *********************************************/
-.reveal .slide-number {
- color: #00008B; }
diff --git a/css/theme/sky.css b/css/theme/sky.css
index 37ce521..2b1e439 100644
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -213,9 +213,9 @@ body {
.reveal a {
color: #3b759e;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #74a7cb;
@@ -240,9 +240,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
@@ -291,9 +291,3 @@ body {
-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); }
-
-/*********************************************
- * SLIDE NUMBER
- *********************************************/
-.reveal .slide-number {
- color: #3b759e; }
diff --git a/css/theme/solarized.css b/css/theme/solarized.css
index be2fa22..9a17ca8 100644
--- a/css/theme/solarized.css
+++ b/css/theme/solarized.css
@@ -210,9 +210,9 @@ body {
.reveal a {
color: #268bd2;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #78b9e6;
@@ -237,9 +237,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
@@ -288,9 +288,3 @@ body {
-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); }
-
-/*********************************************
- * SLIDE NUMBER
- *********************************************/
-.reveal .slide-number {
- color: #268bd2; }
diff --git a/css/theme/source/black.scss b/css/theme/source/black.scss
index 73dfecb..5f7f601 100644
--- a/css/theme/source/black.scss
+++ b/css/theme/source/black.scss
@@ -1,7 +1,7 @@
/**
* Black theme for reveal.js. This is the opposite of the 'white' theme.
*
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * By Hakim El Hattab, http://hakim.se
*/
diff --git a/css/theme/source/white.scss b/css/theme/source/white.scss
index 4c5b647..6758ce0 100644
--- a/css/theme/source/white.scss
+++ b/css/theme/source/white.scss
@@ -1,7 +1,7 @@
/**
* White theme for reveal.js. This is the opposite of the 'black' theme.
*
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * By Hakim El Hattab, http://hakim.se
*/
diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss
index 91eeca7..9bb416a 100644
--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@@ -342,11 +342,4 @@ body {
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
-/*********************************************
- * SLIDE NUMBER
- *********************************************/
-.reveal .slide-number {
- color: $linkColor;
-}
-
diff --git a/css/theme/white.css b/css/theme/white.css
index ffa687e..f55e094 100644
--- a/css/theme/white.css
+++ b/css/theme/white.css
@@ -1,7 +1,7 @@
/**
* White theme for reveal.js. This is the opposite of the 'black' theme.
*
- * Copyright (C) 2015 Hakim El Hattab, http://hakim.se
+ * By Hakim El Hattab, http://hakim.se
*/
@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
@@ -206,9 +206,9 @@ body {
.reveal a {
color: #2a76dd;
text-decoration: none;
- -webkit-transition: color 0.15s ease;
- -moz-transition: color 0.15s ease;
- transition: color 0.15s ease; }
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ transition: color .15s ease; }
.reveal a:hover {
color: #6ca0e8;
@@ -233,9 +233,9 @@ body {
box-shadow: none; }
.reveal a img {
- -webkit-transition: all 0.15s linear;
- -moz-transition: all 0.15s linear;
- transition: all 0.15s linear; }
+ -webkit-transition: all .15s linear;
+ -moz-transition: all .15s linear;
+ transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
@@ -284,9 +284,3 @@ body {
-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); }
-
-/*********************************************
- * SLIDE NUMBER
- *********************************************/
-.reveal .slide-number {
- color: #2a76dd; }