mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-11 17:14:57 +02:00
Code Issues Releases Wiki Activity

convert sass controls spacing to css var, full height reader progress bar

Browse Source
This commit is contained in:
Hakim El Hattab
2023-10-11 10:01:32 +02:00
parent 122642fdea
commit be5d811914
2 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
css/reveal.scss
View File

@@ -10,8 +10,6 @@
@import 'layout'; @import 'layout';
$controlsSpacing: 12px;
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
@@ -36,6 +34,7 @@ html.reveal-full-page {
color: #000; color: #000;
--r-reader-progress-width: 8px; --r-reader-progress-width: 8px;
--r-controls-spacing: 12px;
} }
// Force the presentation to cover the full viewport when we // Force the presentation to cover the full viewport when we
@@ -279,8 +278,8 @@ $controlsArrowAngleActive: 36deg;
display: none; display: none;
position: absolute; position: absolute;
top: auto; top: auto;
bottom: $controlsSpacing; bottom: var(--r-controls-spacing);
right: $controlsSpacing; right: var(--r-controls-spacing);
left: auto; left: auto;
z-index: 11; z-index: 11;
color: #000; color: #000;
@@ -512,7 +511,9 @@ $controlsArrowAngleActive: 36deg;
// Edge aligned controls layout // Edge aligned controls layout
@media screen and (min-width: 500px) { @media screen and (min-width: 500px) {
$controlsSpacing: 0.8em; .reveal-viewport {
--r-controls-spacing: 0.8em;
}
.reveal .controls[data-controls-layout="edges"] { .reveal .controls[data-controls-layout="edges"] {
& { & {
@@ -532,24 +533,24 @@ $controlsArrowAngleActive: 36deg;
.navigate-left { .navigate-left {
top: 50%; top: 50%;
left: $controlsSpacing; left: var(--r-controls-spacing);
margin-top: -$controlArrowSize*0.5; margin-top: -$controlArrowSize*0.5;
} }
.navigate-right { .navigate-right {
top: 50%; top: 50%;
right: $controlsSpacing; right: var(--r-controls-spacing);
margin-top: -$controlArrowSize*0.5; margin-top: -$controlArrowSize*0.5;
} }
.navigate-up { .navigate-up {
top: $controlsSpacing; top: var(--r-controls-spacing);
left: 50%; left: 50%;
margin-left: -$controlArrowSize*0.5; margin-left: -$controlArrowSize*0.5;
} }
.navigate-down { .navigate-down {
bottom: $controlsSpacing - $controlArrowSpacing + 0.3em; bottom: calc(var(--r-controls-spacing) - #{$controlArrowSpacing} + 0.3em);
left: 50%; left: 50%;
margin-left: -$controlArrowSize*0.5; margin-left: -$controlArrowSize*0.5;
} }
@@ -2036,9 +2037,9 @@ $notesWidthPercent: 25%;
.reader-progress-inner { .reader-progress-inner {
position: absolute; position: absolute;
width: var(--r-reader-progress-width); width: var(--r-reader-progress-width);
height: 90vh; height: calc(100vh - var(--r-controls-spacing) * 2);
height: 90svh; height: calc(100svh - var(--r-controls-spacing) * 2);
right: $controlsSpacing; right: var(--r-controls-spacing);
top: 0; top: 0;
transform: translateY(-50%); transform: translateY(-50%);
border-radius: var(--r-reader-progress-width); border-radius: var(--r-reader-progress-width);

2
dist/reveal.css vendored
View File

File diff suppressed because one or more lines are too long