diff options
| -rw-r--r-- | css/print/pdf.css | 5 | ||||
| -rw-r--r-- | css/reveal.css | 47 | ||||
| -rw-r--r-- | css/reveal.scss | 46 | ||||
| -rw-r--r-- | js/reveal.js | 10 |
4 files changed, 71 insertions, 37 deletions
diff --git a/css/print/pdf.css b/css/print/pdf.css index 20c646a..2b86cb2 100644 --- a/css/print/pdf.css +++ b/css/print/pdf.css @@ -144,9 +144,14 @@ ul, ol, div, p { } /* Display slide speaker notes when 'showNotes' is enabled */ +.reveal.show-notes { + max-width: none; + max-height: none; +} .reveal .speaker-notes-pdf { display: block; width: 100%; + height: auto; max-height: none; top: auto; right: auto; diff --git a/css/reveal.css b/css/reveal.css index 8ec6bbd..0c52205 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -269,11 +269,11 @@ body { left: 50%; -webkit-transform: translateX(-50%) rotate(-90deg); transform: translateX(-50%) rotate(-90deg); } - .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-left.enabled, - .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-up.enabled { + .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled, + .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled { opacity: 0.3; } - .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-left.enabled:hover, - .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-up.enabled:hover { + .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled:hover, + .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled:hover { opacity: 1; } .reveal .controls[data-controls-back-arrows="hidden"] .navigate-left.enabled, .reveal .controls[data-controls-back-arrows="hidden"] .navigate-up.enabled { @@ -1433,36 +1433,49 @@ body { .reveal aside.notes { display: none; } +.reveal.show-notes { + max-width: 80vw; + overflow: visible; } + .reveal .speaker-notes { - display: none; + display: block; position: absolute; - width: 70%; - max-height: 15%; - left: 15%; - bottom: 26px; - padding: 10px; + width: 20vw; + height: 100%; + top: 0; + left: 100%; + padding: 14px; z-index: 1; font-size: 18px; line-height: 1.4; - color: #fff; - background-color: rgba(0, 0, 0, 0.5); + color: #222; + background-color: #f5f5f5; overflow: auto; box-sizing: border-box; text-align: left; font-family: Helvetica, sans-serif; -webkit-overflow-scrolling: touch; } -.reveal .speaker-notes.visible:not(:empty) { - display: block; } +.reveal .speaker-notes:before { + content: 'Speaker notes'; + display: block; + margin-bottom: 10px; + opacity: 0.5; } @media screen and (max-width: 1024px) { + .reveal.show-notes { + max-width: none; + max-height: 70vh; + overflow: visible; } .reveal .speaker-notes { - font-size: 14px; } } + top: 70vh; + left: 0; + width: 100%; + height: 30vh; } } @media screen and (max-width: 600px) { .reveal .speaker-notes { - width: 90%; - left: 5%; } } + font-size: 14px; } } /********************************************* * ZOOM PLUGIN diff --git a/css/reveal.scss b/css/reveal.scss index 42f5d5e..f24ed2c 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -335,11 +335,11 @@ body { transform: translateX(-50%) rotate( -90deg ); } - // Back arrow style: "deemphasized": + // Back arrow style: "faded": // Strongly deemphasizes backwards navigation in favor of drawing // attention to forwards navigation - &[data-controls-back-arrows="deemphasized"] .navigate-left.enabled, - &[data-controls-back-arrows="deemphasized"] .navigate-up.enabled { + &[data-controls-back-arrows="faded"] .navigate-left.enabled, + &[data-controls-back-arrows="faded"] .navigate-up.enabled { opacity: 0.3; &:hover { @@ -1521,21 +1521,26 @@ body { display: none; } +.reveal.show-notes { + max-width: 80vw; + overflow: visible; +} + // An interface element that can optionally be used to show the // speaker notes to all viewers, on top of the presentation .reveal .speaker-notes { - display: none; + display: block; position: absolute; - width: 70%; - max-height: 15%; - left: 15%; - bottom: 26px; - padding: 10px; + width: 20vw; + height: 100%; + top: 0; + left: 100%; + padding: 14px; z-index: 1; font-size: 18px; line-height: 1.4; - color: #fff; - background-color: rgba(0,0,0,0.5); + color: #222; + background-color: #f5f5f5; overflow: auto; box-sizing: border-box; text-align: left; @@ -1543,20 +1548,31 @@ body { -webkit-overflow-scrolling: touch; } -.reveal .speaker-notes.visible:not(:empty) { +.reveal .speaker-notes:before { + content: 'Speaker notes'; display: block; + margin-bottom: 10px; + opacity: 0.5; } @media screen and (max-width: 1024px) { + .reveal.show-notes { + max-width: none; + max-height: 70vh; + overflow: visible; + } + .reveal .speaker-notes { - font-size: 14px; + top: 70vh; + left: 0; + width: 100%; + height: 30vh; } } @media screen and (max-width: 600px) { .reveal .speaker-notes { - width: 90%; - left: 5%; + font-size: 14px; } } diff --git a/js/reveal.js b/js/reveal.js index 594093b..02dbebe 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -56,8 +56,8 @@ controlsLayout: 'bottom-right', // Specifies the display rules for backwards navigation arrows; - // "deemphasized", "hidden" or "visible" - controlsBackArrows: 'deemphasized', + // "faded", "hidden" or "visible" + controlsBackArrows: 'faded', // Display a presentation progress bar progress: true, @@ -106,7 +106,7 @@ // key is pressed help: true, - // Flags if it should be possible to pause the presentation (blackout) + // Flags if it should be possible to pause t.spehe presentation (blackout) pause: true, // Flags if speaker notes should be visible to all viewers @@ -1032,11 +1032,11 @@ } if( config.showNotes ) { - dom.speakerNotes.classList.add( 'visible' ); + dom.wrapper.classList.add( 'show-notes' ); dom.speakerNotes.setAttribute( 'data-layout', typeof config.showNotes === 'string' ? config.showNotes : 'inline' ); } else { - dom.speakerNotes.classList.remove( 'visible' ); + dom.wrapper.classList.remove( 'show-notes' ); } if( config.mouseWheel ) { |