mirror of
https://github.com/Threnklyn/reveal-hugo.git
synced 2026-06-07 14:03:33 +02:00
Reveal.js files upgraded to v3.9.2
This commit is contained in:
mrBrutus
@@ -3,55 +3,28 @@
|
||||
* http://revealjs.com
|
||||
* MIT licensed
|
||||
*
|
||||
* Copyright (C) 2018 Hakim El Hattab, http://hakim.se
|
||||
* Copyright (C) 2020 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
/*********************************************
|
||||
* RESET STYLES
|
||||
*********************************************/
|
||||
|
||||
html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
|
||||
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
|
||||
.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
|
||||
.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
|
||||
.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
|
||||
.reveal b, .reveal u, .reveal center,
|
||||
.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
|
||||
.reveal fieldset, .reveal form, .reveal label, .reveal legend,
|
||||
.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
|
||||
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
|
||||
.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
|
||||
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
|
||||
.reveal time, .reveal mark, .reveal audio, .reveal video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
|
||||
.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
|
||||
html,
|
||||
body {
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
height: calc( var(--vh, 1vh) * 100 );
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
@@ -129,7 +102,7 @@ body {
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.fade-up {
|
||||
transform: translate(0, 20%);
|
||||
transform: translate(0, 40px);
|
||||
|
||||
&.visible {
|
||||
transform: translate(0, 0);
|
||||
@@ -137,7 +110,7 @@ body {
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.fade-down {
|
||||
transform: translate(0, -20%);
|
||||
transform: translate(0, -40px);
|
||||
|
||||
&.visible {
|
||||
transform: translate(0, 0);
|
||||
@@ -145,7 +118,7 @@ body {
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.fade-right {
|
||||
transform: translate(-20%, 0);
|
||||
transform: translate(-40px, 0);
|
||||
|
||||
&.visible {
|
||||
transform: translate(0, 0);
|
||||
@@ -153,7 +126,7 @@ body {
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.fade-left {
|
||||
transform: translate(20%, 0);
|
||||
transform: translate(40px, 0);
|
||||
|
||||
&.visible {
|
||||
transform: translate(0, 0);
|
||||
@@ -290,7 +263,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
bottom: $spacing;
|
||||
right: $spacing;
|
||||
left: auto;
|
||||
z-index: 1;
|
||||
z-index: 11;
|
||||
color: #000;
|
||||
pointer-events: none;
|
||||
font-size: 10px;
|
||||
@@ -382,7 +355,8 @@ $controlsArrowAngleActive: 36deg;
|
||||
|
||||
.navigate-down {
|
||||
right: $controlArrowSpacing + $controlArrowSize/2;
|
||||
bottom: 0;
|
||||
bottom: -$controlArrowSpacing;
|
||||
padding-bottom: $controlArrowSpacing;
|
||||
transform: translateY( 10px );
|
||||
|
||||
.controls-arrow {
|
||||
@@ -434,12 +408,19 @@ $controlsArrowAngleActive: 36deg;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Adjust the layout when there are no vertical slides
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,
|
||||
.reveal:not(.has-vertical-slides) .controls .navigate-left {
|
||||
bottom: $controlArrowSpacing;
|
||||
right: 0.5em + $controlArrowSpacing + $controlArrowSize;
|
||||
}
|
||||
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,
|
||||
.reveal:not(.has-vertical-slides) .controls .navigate-right {
|
||||
bottom: $controlArrowSpacing;
|
||||
right: 0.5em;
|
||||
@@ -472,7 +453,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
// Edge aligned controls layout
|
||||
@media screen and (min-width: 500px) {
|
||||
|
||||
$spacing: 8px;
|
||||
$spacing: 0.8em;
|
||||
|
||||
.reveal .controls[data-controls-layout="edges"] {
|
||||
& {
|
||||
@@ -509,7 +490,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
}
|
||||
|
||||
.navigate-down {
|
||||
bottom: $spacing;
|
||||
bottom: $spacing - $controlArrowSpacing + 0.3em;
|
||||
left: 50%;
|
||||
margin-left: -$controlArrowSize/2;
|
||||
}
|
||||
@@ -586,17 +567,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
// Mobile Safari sometimes overlays a header at the top
|
||||
// of the page when in landscape mode. Using fixed
|
||||
// positioning ensures that reveal.js reduces its height
|
||||
// when this header is visible.
|
||||
@media only screen and (orientation : landscape) {
|
||||
.reveal.ua-iphone {
|
||||
position: fixed;
|
||||
}
|
||||
touch-action: pinch-zoom;
|
||||
}
|
||||
|
||||
.reveal .slides {
|
||||
@@ -618,7 +589,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
}
|
||||
|
||||
.reveal .slides>section {
|
||||
-ms-perspective: 600px;
|
||||
perspective: 600px;
|
||||
}
|
||||
|
||||
.reveal .slides>section,
|
||||
@@ -657,6 +628,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
pointer-events: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.reveal .slides>section.present,
|
||||
@@ -831,10 +803,10 @@ $controlsArrowAngleActive: 36deg;
|
||||
transform: scale(0.2);
|
||||
}
|
||||
@include transition-vertical-past(zoom) {
|
||||
transform: translate(0, -150%);
|
||||
transform: scale(16);
|
||||
}
|
||||
@include transition-vertical-future(zoom) {
|
||||
transform: translate(0, 150%);
|
||||
transform: scale(0.2);
|
||||
}
|
||||
|
||||
|
||||
@@ -1067,37 +1039,38 @@ $controlsArrowAngleActive: 36deg;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.no-transforms .reveal {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.no-transforms .reveal .slides {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
height: auto !important;
|
||||
max-width: 1280px;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-transforms .reveal .controls,
|
||||
.no-transforms .reveal .progress {
|
||||
display: none !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-transforms .reveal .slides section {
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
position: relative !important;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
top: 0;
|
||||
left: -50%;
|
||||
left: 0;
|
||||
margin: 10vh 0;
|
||||
margin: 70px 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.no-transforms .reveal .slides section section {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.reveal .no-transition,
|
||||
.reveal .no-transition * {
|
||||
transition: none !important;
|
||||
@@ -1416,10 +1389,10 @@ $controlsArrowAngleActive: 36deg;
|
||||
|
||||
|
||||
/*********************************************
|
||||
* LINK PREVIEW OVERLAY
|
||||
* OVERLAY FOR LINK PREVIEWS AND HELP
|
||||
*********************************************/
|
||||
|
||||
.reveal .overlay {
|
||||
.reveal > .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -1431,12 +1404,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%;
|
||||
@@ -1452,7 +1425,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.reveal .overlay header {
|
||||
.reveal > .overlay header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@@ -1461,7 +1434,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;
|
||||
@@ -1472,10 +1445,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;
|
||||
@@ -1484,14 +1457,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;
|
||||
@@ -1500,7 +1473,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-preview .viewport iframe {
|
||||
.reveal > .overlay.overlay-preview .viewport iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
@@ -1512,12 +1485,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;
|
||||
@@ -1526,26 +1499,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;
|
||||
@@ -1553,31 +1526,30 @@ $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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************
|
||||
* PLAYBACK COMPONENT
|
||||
*********************************************/
|
||||
@@ -1598,6 +1570,40 @@ $controlsArrowAngleActive: 36deg;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* CODE HIGHLGIHTING
|
||||
*********************************************/
|
||||
|
||||
.reveal .hljs table {
|
||||
margin: initial;
|
||||
}
|
||||
|
||||
.reveal .hljs-ln-code,
|
||||
.reveal .hljs-ln-numbers {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.reveal .hljs-ln-numbers {
|
||||
opacity: 0.6;
|
||||
padding-right: 0.75em;
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal .hljs.has-highlights tr:not(.highlight-line) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.reveal .hljs:not(:first-child).fragment {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* ROLLING LINKS
|
||||
*********************************************/
|
||||
@@ -1648,6 +1654,8 @@ $controlsArrowAngleActive: 36deg;
|
||||
* SPEAKER NOTES
|
||||
*********************************************/
|
||||
|
||||
$notesWidthPercent: 25%;
|
||||
|
||||
// Hide on-page notes
|
||||
.reveal aside.notes {
|
||||
display: none;
|
||||
@@ -1658,7 +1666,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
.reveal .speaker-notes {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 25vw;
|
||||
width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
@@ -1694,7 +1702,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
|
||||
|
||||
.reveal.show-notes {
|
||||
max-width: 75vw;
|
||||
max-width: 100% - $notesWidthPercent;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@@ -1713,6 +1721,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
border-left: 0;
|
||||
max-width: none;
|
||||
max-height: 70%;
|
||||
max-height: 70vh;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@@ -1721,17 +1730,21 @@ $controlsArrowAngleActive: 36deg;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: (30/0.7)*1%;
|
||||
height: 30vh;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.reveal.show-notes {
|
||||
max-height: 60%;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.reveal.show-notes .speaker-notes {
|
||||
top: 100%;
|
||||
height: (40/0.6)*1%;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.reveal .speaker-notes {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$backgroundColor: #222;
|
||||
$backgroundColor: #191919;
|
||||
|
||||
$mainColor: #fff;
|
||||
$headingColor: #fff;
|
||||
|
||||
@@ -28,6 +28,8 @@ $heading2Size: 2.11em;
|
||||
$heading3Size: 1.55em;
|
||||
$heading4Size: 1.00em;
|
||||
|
||||
$codeFont: monospace;
|
||||
|
||||
// Links and actions
|
||||
$linkColor: #13DAEC;
|
||||
$linkColorHover: lighten( $linkColor, 20% );
|
||||
@@ -40,4 +42,4 @@ $selectionColor: #fff;
|
||||
// to return a background image or gradient
|
||||
@mixin bodyBackground() {
|
||||
background: $backgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -162,16 +162,16 @@ body {
|
||||
|
||||
text-align: left;
|
||||
font-size: 0.55em;
|
||||
font-family: monospace;
|
||||
font-family: $codeFont;
|
||||
line-height: 1.2em;
|
||||
|
||||
word-wrap: break-word;
|
||||
|
||||
box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
|
||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
font-family: $codeFont;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user