summaryrefslogtreecommitdiffhomepage
path: root/css/reveal.scss
diff options
context:
space:
mode:
Diffstat (limited to 'css/reveal.scss')
-rw-r--r--css/reveal.scss103
1 files changed, 75 insertions, 28 deletions
diff --git a/css/reveal.scss b/css/reveal.scss
index 1a87624..c82a297 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -3,7 +3,7 @@
* http://revealjs.com
* MIT licensed
*
- * Copyright (C) 2017 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
*/
@@ -160,6 +160,7 @@ body {
}
}
+.reveal .slides section .fragment.fade-in-then-out,
.reveal .slides section .fragment.current-visible {
opacity: 0;
visibility: hidden;
@@ -170,6 +171,21 @@ body {
}
}
+.reveal .slides section .fragment.fade-in-then-semi-out {
+ opacity: 0;
+ visibility: hidden;
+
+ &.visible {
+ opacity: 0.5;
+ visibility: inherit;
+ }
+
+ &.current-fragment {
+ opacity: 1;
+ visibility: inherit;
+ }
+}
+
.reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-current-red,
.reveal .slides section .fragment.highlight-green,
@@ -540,7 +556,7 @@ $controlsArrowAngleActive: 36deg;
*********************************************/
.reveal .slide-number {
- position: fixed;
+ position: absolute;
display: block;
right: 8px;
bottom: 8px;
@@ -553,6 +569,10 @@ $controlsArrowAngleActive: 36deg;
padding: 5px;
}
+.reveal .slide-number a {
+ color: currentColor;
+}
+
.reveal .slide-number-delimiter {
margin: 0 3px;
}
@@ -636,6 +656,7 @@ $controlsArrowAngleActive: 36deg;
.reveal .slides>section.stack {
padding-top: 0;
padding-bottom: 0;
+ pointer-events: none;
}
.reveal .slides>section.present,
@@ -1013,6 +1034,25 @@ $controlsArrowAngleActive: 36deg;
z-index: 100;
transition: all 1s ease;
}
+
+.reveal .pause-overlay .resume-button {
+ position: absolute;
+ bottom: 20px;
+ right: 20px;
+ color: #ccc;
+ border-radius: 2px;
+ padding: 6px 14px;
+ border: 2px solid #ccc;
+ font-size: 16px;
+ background: transparent;
+ cursor: pointer;
+
+ &:hover {
+ color: #fff;
+ border-color: #fff;
+ }
+}
+
.reveal.paused .pause-overlay {
visibility: visible;
opacity: 1;
@@ -1086,11 +1126,18 @@ $controlsArrowAngleActive: 36deg;
overflow: hidden;
background-color: rgba( 0, 0, 0, 0 );
+
+ transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ }
+
+ .reveal .slide-background-content {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-
- transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
.reveal .slide-background.stack {
@@ -1369,10 +1416,10 @@ $controlsArrowAngleActive: 36deg;
/*********************************************
- * LINK PREVIEW OVERLAY
+ * OVERLAY FOR LINK PREVIEWS AND HELP
*********************************************/
-.reveal .overlay {
+.reveal > .overlay {
position: absolute;
top: 0;
left: 0;
@@ -1384,12 +1431,12 @@ $controlsArrowAngleActive: 36deg;
visibility: hidden;
transition: all 0.3s ease;
}
- .reveal .overlay.visible {
+ .reveal > .overlay.visible {
opacity: 1;
visibility: visible;
}
- .reveal .overlay .spinner {
+ .reveal > .overlay .spinner {
position: absolute;
display: block;
top: 50%;
@@ -1405,7 +1452,7 @@ $controlsArrowAngleActive: 36deg;
transition: all 0.3s ease;
}
- .reveal .overlay header {
+ .reveal > .overlay header {
position: absolute;
left: 0;
top: 0;
@@ -1414,7 +1461,7 @@ $controlsArrowAngleActive: 36deg;
z-index: 2;
border-bottom: 1px solid #222;
}
- .reveal .overlay header a {
+ .reveal > .overlay header a {
display: inline-block;
width: 40px;
height: 40px;
@@ -1425,10 +1472,10 @@ $controlsArrowAngleActive: 36deg;
box-sizing: border-box;
}
- .reveal .overlay header a:hover {
+ .reveal > .overlay header a:hover {
opacity: 1;
}
- .reveal .overlay header a .icon {
+ .reveal > .overlay header a .icon {
display: inline-block;
width: 20px;
height: 20px;
@@ -1437,14 +1484,14 @@ $controlsArrowAngleActive: 36deg;
background-size: 100%;
background-repeat: no-repeat;
}
- .reveal .overlay header a.close .icon {
+ .reveal > .overlay header a.close .icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC);
}
- .reveal .overlay header a.external .icon {
+ .reveal > .overlay header a.external .icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==);
}
- .reveal .overlay .viewport {
+ .reveal > .overlay .viewport {
position: absolute;
display: flex;
top: 40px;
@@ -1453,7 +1500,7 @@ $controlsArrowAngleActive: 36deg;
left: 0;
}
- .reveal .overlay.overlay-preview .viewport iframe {
+ .reveal > .overlay.overlay-preview .viewport iframe {
width: 100%;
height: 100%;
max-width: 100%;
@@ -1465,12 +1512,12 @@ $controlsArrowAngleActive: 36deg;
transition: all 0.3s ease;
}
- .reveal .overlay.overlay-preview.loaded .viewport iframe {
+ .reveal > .overlay.overlay-preview.loaded .viewport iframe {
opacity: 1;
visibility: visible;
}
- .reveal .overlay.overlay-preview.loaded .viewport-inner {
+ .reveal > .overlay.overlay-preview.loaded .viewport-inner {
position: absolute;
z-index: -1;
left: 0;
@@ -1479,26 +1526,26 @@ $controlsArrowAngleActive: 36deg;
text-align: center;
letter-spacing: normal;
}
- .reveal .overlay.overlay-preview .x-frame-error {
+ .reveal > .overlay.overlay-preview .x-frame-error {
opacity: 0;
transition: opacity 0.3s ease 0.3s;
}
- .reveal .overlay.overlay-preview.loaded .x-frame-error {
+ .reveal > .overlay.overlay-preview.loaded .x-frame-error {
opacity: 1;
}
- .reveal .overlay.overlay-preview.loaded .spinner {
+ .reveal > .overlay.overlay-preview.loaded .spinner {
opacity: 0;
visibility: hidden;
transform: scale(0.2);
}
- .reveal .overlay.overlay-help .viewport {
+ .reveal > .overlay.overlay-help .viewport {
overflow: auto;
color: #fff;
}
- .reveal .overlay.overlay-help .viewport .viewport-inner {
+ .reveal > .overlay.overlay-help .viewport .viewport-inner {
width: 600px;
margin: auto;
padding: 20px 20px 80px 20px;
@@ -1506,25 +1553,25 @@ $controlsArrowAngleActive: 36deg;
letter-spacing: normal;
}
- .reveal .overlay.overlay-help .viewport .viewport-inner .title {
+ .reveal > .overlay.overlay-help .viewport .viewport-inner .title {
font-size: 20px;
}
- .reveal .overlay.overlay-help .viewport .viewport-inner table {
+ .reveal > .overlay.overlay-help .viewport .viewport-inner table {
border: 1px solid #fff;
border-collapse: collapse;
font-size: 16px;
}
- .reveal .overlay.overlay-help .viewport .viewport-inner table th,
- .reveal .overlay.overlay-help .viewport .viewport-inner table td {
+ .reveal > .overlay.overlay-help .viewport .viewport-inner table th,
+ .reveal > .overlay.overlay-help .viewport .viewport-inner table td {
width: 200px;
padding: 14px;
border: 1px solid #fff;
vertical-align: middle;
}
- .reveal .overlay.overlay-help .viewport .viewport-inner table th {
+ .reveal > .overlay.overlay-help .viewport .viewport-inner table th {
padding-top: 20px;
padding-bottom: 20px;
}