Skip to content

Commit

Permalink
Merge pull request #3482 from hakimel/feature/reader-mode
Browse files Browse the repository at this point in the history 
Add reader mode
  • Loading branch information
@hakimel
hakimel authored Oct 12, 2023
2 parents 88fbfc5 + 7108476 commit c80b685
Show file tree
Hide file tree
Showing 45 changed files with 1,589 additions and 220 deletions.
2 changes: 1 addition & 1 deletion css/print/pdf.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* https://revealjs.com/pdf-export/
*/

html.print-pdf {
html.reveal-print {
* {
-webkit-print-color-adjust: exact;
}
Expand Down
229 changes: 220 additions & 9 deletions css/reveal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ html.reveal-full-page {
height: 100%;
height: 100vh;
height: calc( var(--vh, 1vh) * 100 );
height: 100svh;
overflow: hidden;
}

Expand All @@ -31,6 +32,8 @@ html.reveal-full-page {

background-color: #fff;
color: #000;

--r-controls-spacing: 12px;
}

// Force the presentation to cover the full viewport when we
Expand Down Expand Up @@ -271,13 +274,11 @@ $controlsArrowAngleActive: 36deg;
}

.reveal .controls {
$spacing: 12px;

display: none;
position: absolute;
top: auto;
bottom: $spacing;
right: $spacing;
bottom: var(--r-controls-spacing);
right: var(--r-controls-spacing);
left: auto;
z-index: 11;
color: #000;
Expand Down Expand Up @@ -509,7 +510,9 @@ $controlsArrowAngleActive: 36deg;
// Edge aligned controls layout
@media screen and (min-width: 500px) {

$spacing: 0.8em;
.reveal-viewport {
--r-controls-spacing: 0.8em;
}

.reveal .controls[data-controls-layout="edges"] {
& {
Expand All @@ -529,24 +532,24 @@ $controlsArrowAngleActive: 36deg;

.navigate-left {
top: 50%;
left: $spacing;
left: var(--r-controls-spacing);
margin-top: -$controlArrowSize*0.5;
}

.navigate-right {
top: 50%;
right: $spacing;
right: var(--r-controls-spacing);
margin-top: -$controlArrowSize*0.5;
}

.navigate-up {
top: $spacing;
top: var(--r-controls-spacing);
left: 50%;
margin-left: -$controlArrowSize*0.5;
}

.navigate-down {
bottom: $spacing - $controlArrowSpacing + 0.3em;
bottom: calc(var(--r-controls-spacing) - #{$controlArrowSpacing} + 0.3em);
left: 50%;
margin-left: -$controlArrowSize*0.5;
}
Expand Down Expand Up @@ -1864,6 +1867,214 @@ $notesWidthPercent: 25%;
}


/*********************************************
* READER MODE
*********************************************/
.reveal-viewport.loading-scroll-mode {
visibility: hidden;
}

.reveal-viewport.reveal-reader {
& {
margin: 0 auto !important;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
z-index: 1;

--r-reader-progress-width: 8px;
--r-reader-progress-trigger-size: 6px;
}

@media screen and (max-width: 500px) {
--r-reader-progress-width: 3px;
--r-reader-progress-trigger-size: 3px;
}

.reveal .controls,
.reveal .progress,
.reveal .playback,
.reveal .backgrounds,
.reveal .slide-number {
display: none !important;
}

.reveal {
overflow: visible;
touch-action: manipulation;
}
.reveal .slides {
position: static;
pointer-events: initial;

left: auto;
top: auto;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;

overflow: visible;
display: block;

perspective: none;
perspective-origin: 50% 50%;
}

.reveal .slides .reader-page {
position: relative;
width: 100%;
height: calc(var(--page-height) + var(--page-scroll-padding));
z-index: 1;
overflow: visible;
}

.reveal .slides .reader-page-sticky {
position: sticky;
height: var(--page-height);
top: 0px;
}

.reveal .slides .reader-page-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.reveal .slides .reader-page section {
visibility: visible !important;
display: block !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
opacity: 1 !important;
transform: scale(var(--slide-scale)) translate(-50%, -50%) !important;
transform-style: flat !important;
transform-origin: 0 0 !important;
}

.reveal .slide-background {
display: block !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: auto !important;
visibility: visible;
opacity: 1;
touch-action: manipulation;
}
}

.reveal-viewport.reveal-reader[data-reader-scroll-bar="true"]::-webkit-scrollbar,
.reveal-viewport.reveal-reader[data-reader-scroll-bar="auto"]::-webkit-scrollbar {
display: none;
}

.reveal.has-dark-background,
.reveal-viewport.has-dark-background {
--r-overlay-element-bg-color: 240, 240, 240;
--r-overlay-element-fg-color: 0, 0, 0;
}
.reveal.has-light-background,
.reveal-viewport.has-light-background {
--r-overlay-element-bg-color: 0, 0, 0;
--r-overlay-element-fg-color: 240, 240, 240;
}

.reveal-viewport.reveal-reader .reader-progress {
position: sticky;
top: 50%;
z-index: 20;
opacity: 0;
transition: all 0.3s ease;

&.visible,
&:hover {
opacity: 1;
}

.reader-progress-inner {
position: absolute;
width: var(--r-reader-progress-width);
height: calc(var(--viewport-height) - var(--r-controls-spacing) * 2);
right: var(--r-controls-spacing);
top: 0;
transform: translateY(-50%);
border-radius: var(--r-reader-progress-width);
z-index: 10;
}

// Hit area
.reader-progress-inner:after {
content: '';
position: absolute;
width: 200%;
height: 100%;
top: 0;
left: -50%;
background: rgba( 0, 0, 0, 0 );
z-index: -1;
}

.reader-progress-playhead {
position: absolute;
width: var(--r-reader-progress-width);
height: var(--r-reader-progress-width);
top: 0;
left: 0;
border-radius: var(--r-reader-progress-width);
background-color: rgba(var(--r-overlay-element-bg-color), 1);
z-index: 11;
transition: background-color 0.2s ease, height 0.4s ease;
}

.reader-progress-slide {
position: absolute;
width: 100%;
background-color: rgba(var(--r-overlay-element-bg-color), 0.2);
box-shadow: 0 0 0px 1px rgba(var(--r-overlay-element-fg-color), 0.1);
border-radius: var(--r-reader-progress-width);
transition: background-color 0.2s ease;
}

.reader-progress-slide.active {
background-color: rgba(var(--r-overlay-element-bg-color), 1);
}

.reader-progress-trigger {
position: absolute;
width: 100%;
transition: background-color 0.2s ease;
}

.reader-progress-slide.active.has-triggers {
background-color: rgba(var(--r-overlay-element-bg-color), 0.4);
z-index: 10;
}

.reader-progress-slide.active .reader-progress-trigger:after {
content: '';
position: absolute;
width: var(--r-reader-progress-trigger-size);
height: var(--r-reader-progress-trigger-size);
border-radius: 20px;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
background-color: rgba(var(--r-overlay-element-bg-color), 0.8);
transition: transform 0.2s ease;
}

.reader-progress-slide.active .reader-progress-trigger.active:after {
transform: translate(calc( var(--r-reader-progress-width) * -2), 0);
background-color: rgba(var(--r-overlay-element-bg-color), 1);
}
}


/*********************************************
* PRINT STYLES
*********************************************/
Expand Down
3 changes: 3 additions & 0 deletions css/theme/source/beige.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ $linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: rgba(79, 64, 28, 0.99);
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);

$overlayElementBgColor: 0, 0, 0;
$overlayElementFgColor: 240, 240, 240;

// Background generator
@mixin bodyBackground() {
@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
Expand Down
3 changes: 3 additions & 0 deletions css/theme/source/serif.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ $linkColor: #51483D;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: #26351C;

$overlayElementBgColor: 0, 0, 0;
$overlayElementFgColor: 240, 240, 240;

.reveal a {
line-height: 1.3em;
}
Expand Down
3 changes: 3 additions & 0 deletions css/theme/source/simple.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@ $linkColor: #00008B;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: rgba(0, 0, 0, 0.99);

$overlayElementBgColor: 0, 0, 0;
$overlayElementFgColor: 240, 240, 240;

// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);

Expand Down
3 changes: 3 additions & 0 deletions css/theme/source/sky.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ $linkColor: #3b759e;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: #134674;

$overlayElementBgColor: 0, 0, 0;
$overlayElementFgColor: 240, 240, 240;

// Fix links so they are not cut off
.reveal a {
line-height: 1.3em;
Expand Down
3 changes: 3 additions & 0 deletions css/theme/source/solarized.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,9 @@ $linkColor: $blue;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: $magenta;

$overlayElementBgColor: 0, 0, 0;
$overlayElementFgColor: 240, 240, 240;

// Background generator
// @mixin bodyBackground() {
// @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );
Expand Down
3 changes: 3 additions & 0 deletions css/theme/source/white-contrast.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,9 @@ $heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1.0em;

$overlayElementBgColor: 0, 0, 0;
$overlayElementFgColor: 240, 240, 240;

// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);

Expand Down
3 changes: 3 additions & 0 deletions css/theme/source/white.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ $heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1.0em;

$overlayElementBgColor: 0, 0, 0;
$overlayElementFgColor: 240, 240, 240;

// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);

Expand Down
2 changes: 2 additions & 0 deletions css/theme/template/exposer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,6 @@
--r-link-color-hover: #{$linkColorHover};
--r-selection-background-color: #{$selectionBackgroundColor};
--r-selection-color: #{$selectionColor};
--r-overlay-element-bg-color: #{$overlayElementBgColor};
--r-overlay-element-fg-color: #{$overlayElementFgColor};
}
5 changes: 5 additions & 0 deletions css/theme/template/settings.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,11 @@ $linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: #FF5E99;
$selectionColor: #fff;

// Colors used for UI elements that are overlaid on top of
// the presentation
$overlayElementBgColor: 240, 240, 240;
$overlayElementFgColor: 0, 0, 0;

// Generates the presentation background, can be overridden
// to return a background image or gradient
@mixin bodyBackground() {
Expand Down
4 changes: 2 additions & 2 deletions dist/reveal.css
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/reveal.esm.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/reveal.esm.js.map
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/reveal.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/reveal.js.map
View file

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions dist/theme/beige.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
--r-link-color-hover: #c0a86e;
--r-selection-background-color: rgba(79, 64, 28, 0.99);
--r-selection-color: #fff;
--r-overlay-element-bg-color: 0, 0, 0;
--r-overlay-element-fg-color: 240, 240, 240;
}

.reveal-viewport {
Expand Down
Loading

0 comments on commit c80b685

Please sign in to comment.