mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-19 13:02:22 +02:00
Code Issues Releases Wiki Activity

reader mode -> scroll view, auto-enable below 435px width

Browse Source
This commit is contained in:
Hakim El Hattab
2023-10-25 13:58:06 +02:00
parent e46bad392a
commit c23964274c
16 changed files with 154 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
css/reveal.scss
View File

@@ -1868,13 +1868,13 @@ $notesWidthPercent: 25%;
/*********************************************
* READER MODE
* SCROLL VIEW
*********************************************/
.reveal-viewport.loading-scroll-mode {
visibility: hidden;
}
.reveal-viewport.reveal-reader {
.reveal-viewport.reveal-scroll {
& {
margin: 0 auto !important;
overflow: auto;
@@ -1882,14 +1882,14 @@ $notesWidthPercent: 25%;
overflow-y: auto;
z-index: 1;
--r-reader-progress-width: 7px;
--r-reader-progress-trigger-size: 5px;
--r-scrollbar-width: 7px;
--r-scrollbar-trigger-size: 5px;
--r-controls-spacing: 8px;
}
@media screen and (max-width: 500px) {
--r-reader-progress-width: 3px;
--r-reader-progress-trigger-size: 3px;
--r-scrollbar-width: 3px;
--r-scrollbar-trigger-size: 3px;
}
.controls,
@@ -1923,7 +1923,7 @@ $notesWidthPercent: 25%;
perspective-origin: 50% 50%;
}
.reader-page {
.scroll-page {
position: relative;
width: 100%;
height: calc(var(--page-height) + var(--page-scroll-padding));
@@ -1931,13 +1931,13 @@ $notesWidthPercent: 25%;
overflow: visible;
}
.reader-page-sticky {
.scroll-page-sticky {
position: sticky;
height: var(--page-height);
top: 0px;
}
.reader-page-content {
.scroll-page-content {
position: absolute;
top: 0;
left: 0;
@@ -1946,7 +1946,7 @@ $notesWidthPercent: 25%;
overflow: hidden;
}
.reader-page section {
.scroll-page section {
visibility: visible !important;
display: block !important;
position: absolute !important;
@@ -1975,14 +1975,14 @@ $notesWidthPercent: 25%;
}
// Chromium
.reveal-viewport.reveal-reader[data-reader-scroll-bar="true"]::-webkit-scrollbar,
.reveal-viewport.reveal-reader[data-reader-scroll-bar="auto"]::-webkit-scrollbar {
.reveal-viewport.reveal-scroll[data-scrollbar="true"]::-webkit-scrollbar,
.reveal-viewport.reveal-scroll[data-scrollbar="auto"]::-webkit-scrollbar {
display: none;
}
// Firefox
.reveal-viewport.reveal-reader[data-reader-scroll-bar="true"],
.reveal-viewport.reveal-reader[data-reader-scroll-bar="auto"] {
.reveal-viewport.reveal-scroll[data-scrollbar="true"],
.reveal-viewport.reveal-scroll[data-scrollbar="auto"] {
scrollbar-width: none;
}
@@ -1997,7 +1997,7 @@ $notesWidthPercent: 25%;
--r-overlay-element-fg-color: 240, 240, 240;
}
.reveal-viewport.reveal-reader .reader-progress {
.reveal-viewport.reveal-scroll .scrollbar {
position: sticky;
top: 50%;
z-index: 20;
@@ -2009,40 +2009,40 @@ $notesWidthPercent: 25%;
opacity: 1;
}
.reader-progress-inner {
.scrollbar-inner {
position: absolute;
width: var(--r-reader-progress-width);
width: var(--r-scrollbar-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);
border-radius: var(--r-scrollbar-width);
z-index: 10;
}
.reader-progress-playhead {
.scrollbar-playhead {
position: absolute;
width: var(--r-reader-progress-width);
height: var(--r-reader-progress-width);
width: var(--r-scrollbar-width);
height: var(--r-scrollbar-width);
top: 0;
left: 0;
border-radius: var(--r-reader-progress-width);
border-radius: var(--r-scrollbar-width);
background-color: rgba(var(--r-overlay-element-bg-color), 1);
z-index: 11;
transition: background-color 0.2s ease;
}
.reader-progress-slide {
.scrollbar-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);
border-radius: var(--r-scrollbar-width);
transition: background-color 0.2s ease;
}
// Hit area
.reader-progress-slide:after {
.scrollbar-slide:after {
content: '';
position: absolute;
width: 200%;
@@ -2053,27 +2053,27 @@ $notesWidthPercent: 25%;
z-index: -1;
}
.reader-progress-slide:hover,
.reader-progress-slide.active {
.scrollbar-slide:hover,
.scrollbar-slide.active {
background-color: rgba(var(--r-overlay-element-bg-color), 0.4);
}
.reader-progress-trigger {
.scrollbar-trigger {
position: absolute;
width: 100%;
transition: background-color 0.2s ease;
}
.reader-progress-slide.active.has-triggers {
.scrollbar-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 {
.scrollbar-slide.active .scrollbar-trigger:after {
content: '';
position: absolute;
width: var(--r-reader-progress-trigger-size);
height: var(--r-reader-progress-trigger-size);
width: var(--r-scrollbar-trigger-size);
height: var(--r-scrollbar-trigger-size);
border-radius: 20px;
top: 50%;
left: 50%;
@@ -2083,13 +2083,13 @@ $notesWidthPercent: 25%;
opacity: 0.4;
}
.reader-progress-slide.active .reader-progress-trigger.active:after,
.reader-progress-slide.active .reader-progress-trigger.active ~ .reader-progress-trigger:after {
.scrollbar-slide.active .scrollbar-trigger.active:after,
.scrollbar-slide.active .scrollbar-trigger.active ~ .scrollbar-trigger:after {
opacity: 1;
}
.reader-progress-slide.active .reader-progress-trigger ~ .reader-progress-trigger.active:after {
transform: translate(calc( var(--r-reader-progress-width) * -2), 0);
.scrollbar-slide.active .scrollbar-trigger ~ .scrollbar-trigger.active:after {
transform: translate(calc( var(--r-scrollbar-width) * -2), 0);
background-color: rgba(var(--r-overlay-element-bg-color), 1);
}
}