new, fixed, speaker notes layout
This commit is contained in:
parent
44a355b6e9
commit
2cc5ae946b
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
10
js/reveal.js
10
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 ) {
|
||||
|
Loading…
Reference in New Issue
Block a user