ox-reveal update

This commit is contained in:
2022-04-25 18:47:51 +02:00
parent 2ff6f7e396
commit 2db1c0afe0
84 changed files with 15869 additions and 5383 deletions

View File

@@ -1,3 +1,5 @@
@use "sass:math";
/**
* reveal.js
* http://revealjs.com
@@ -31,6 +33,16 @@ html.reveal-full-page {
color: #000;
}
// Force the presentation to cover the full viewport when we
// enter fullscreen mode. Fixes sizing issues in Safari.
.reveal-viewport:fullscreen {
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
}
/*********************************************
* VIEW FRAGMENTS
@@ -247,11 +259,11 @@ $controlsArrowAngleActive: 36deg;
@mixin controlsArrowTransform( $angle ) {
&:before {
transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( $angle );
}
&:after {
transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( -$angle );
}
}
@@ -300,11 +312,11 @@ $controlsArrowAngleActive: 36deg;
left: 0;
width: $controlArrowLength;
height: $controlArrowThickness;
border-radius: $controlArrowThickness/2;
border-radius: $controlArrowThickness*0.5;
background-color: currentColor;
transition: all 0.15s ease, background-color 0.8s ease;
transform-origin: floor(($controlArrowThickness/2)*10)/10 50%;
transform-origin: math.div(floor(($controlArrowThickness*0.5)*10), 10) 50%;
will-change: transform;
}
@@ -326,7 +338,7 @@ $controlsArrowAngleActive: 36deg;
.navigate-left {
right: $controlArrowSize + $controlArrowSpacing*2;
bottom: $controlArrowSpacing + $controlArrowSize/2;
bottom: $controlArrowSpacing + $controlArrowSize*0.5;
transform: translateX( -10px );
&.highlight {
@@ -336,7 +348,7 @@ $controlsArrowAngleActive: 36deg;
.navigate-right {
right: 0;
bottom: $controlArrowSpacing + $controlArrowSize/2;
bottom: $controlArrowSpacing + $controlArrowSize*0.5;
transform: translateX( 10px );
.controls-arrow {
@@ -349,7 +361,7 @@ $controlsArrowAngleActive: 36deg;
}
.navigate-up {
right: $controlArrowSpacing + $controlArrowSize/2;
right: $controlArrowSpacing + $controlArrowSize*0.5;
bottom: $controlArrowSpacing*2 + $controlArrowSize;
transform: translateY( -10px );
@@ -359,7 +371,7 @@ $controlsArrowAngleActive: 36deg;
}
.navigate-down {
right: $controlArrowSpacing + $controlArrowSize/2;
right: $controlArrowSpacing + $controlArrowSize*0.5;
bottom: -$controlArrowSpacing;
padding-bottom: $controlArrowSpacing;
transform: translateY( 10px );
@@ -515,25 +527,25 @@ $controlsArrowAngleActive: 36deg;
.navigate-left {
top: 50%;
left: $spacing;
margin-top: -$controlArrowSize/2;
margin-top: -$controlArrowSize*0.5;
}
.navigate-right {
top: 50%;
right: $spacing;
margin-top: -$controlArrowSize/2;
margin-top: -$controlArrowSize*0.5;
}
.navigate-up {
top: $spacing;
left: 50%;
margin-left: -$controlArrowSize/2;
margin-left: -$controlArrowSize*0.5;
}
.navigate-down {
bottom: $spacing - $controlArrowSpacing + 0.3em;
left: 50%;
margin-left: -$controlArrowSize/2;
margin-left: -$controlArrowSize*0.5;
}
}
@@ -769,9 +781,6 @@ $controlsArrowAngleActive: 36deg;
*********************************************/
@each $stylename in slide, linear {
.reveal.#{$stylename} section {
backface-visibility: hidden;
}
@include transition-horizontal-past(#{$stylename}) {
transform: translate(-150%, 0);
}
@@ -1158,54 +1167,53 @@ $controlsArrowAngleActive: 36deg;
}
/* Immediate transition style */
.reveal[data-background-transition=none]>.backgrounds .slide-background,
.reveal[data-background-transition=none]>.backgrounds .slide-background:not([data-background-transition]),
.reveal>.backgrounds .slide-background[data-background-transition=none] {
transition: none;
}
/* Slide */
.reveal[data-background-transition=slide]>.backgrounds .slide-background,
.reveal[data-background-transition=slide]>.backgrounds .slide-background:not([data-background-transition]),
.reveal>.backgrounds .slide-background[data-background-transition=slide] {
opacity: 1;
backface-visibility: hidden;
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background.past,
.reveal[data-background-transition=slide]>.backgrounds .slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background.past[data-background-transition=slide] {
transform: translate(-100%, 0);
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background.future,
.reveal[data-background-transition=slide]>.backgrounds .slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background.future[data-background-transition=slide] {
transform: translate(100%, 0);
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past,
.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] {
transform: translate(0, -100%);
}
.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future,
.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] {
transform: translate(0, 100%);
}
/* Convex */
.reveal[data-background-transition=convex]>.backgrounds .slide-background.past,
.reveal[data-background-transition=convex]>.backgrounds .slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background.past[data-background-transition=convex] {
opacity: 0;
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
.reveal[data-background-transition=convex]>.backgrounds .slide-background.future,
.reveal[data-background-transition=convex]>.backgrounds .slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background.future[data-background-transition=convex] {
opacity: 0;
transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
}
.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past,
.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] {
opacity: 0;
transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
}
.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future,
.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] {
opacity: 0;
transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
@@ -1213,54 +1221,54 @@ $controlsArrowAngleActive: 36deg;
/* Concave */
.reveal[data-background-transition=concave]>.backgrounds .slide-background.past,
.reveal[data-background-transition=concave]>.backgrounds .slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background.past[data-background-transition=concave] {
opacity: 0;
transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
}
.reveal[data-background-transition=concave]>.backgrounds .slide-background.future,
.reveal[data-background-transition=concave]>.backgrounds .slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background.future[data-background-transition=concave] {
opacity: 0;
transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
}
.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past,
.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] {
opacity: 0;
transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
}
.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future,
.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] {
opacity: 0;
transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
}
/* Zoom */
.reveal[data-background-transition=zoom]>.backgrounds .slide-background,
.reveal[data-background-transition=zoom]>.backgrounds .slide-background:not([data-background-transition]),
.reveal>.backgrounds .slide-background[data-background-transition=zoom] {
transition-timing-function: ease;
}
.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past,
.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background.past[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
transform: scale(16);
}
.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future,
.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background.future[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
transform: scale(0.2);
}
.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past,
.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
transform: scale(16);
}
.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future,
.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] {
opacity: 0;
visibility: hidden;
@@ -1701,7 +1709,7 @@ $notesWidthPercent: 25%;
.reveal .speaker-notes {
display: none;
position: absolute;
width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%;
width: math.div($notesWidthPercent, (1 - math.div($notesWidthPercent,100))) * 1%;
height: 100%;
top: 0;
left: 100%;
@@ -1764,7 +1772,6 @@ $notesWidthPercent: 25%;
top: 100%;
left: 0;
width: 100%;
height: (30/0.7)*1%;
height: 30vh;
border: 0;
}
@@ -1778,7 +1785,6 @@ $notesWidthPercent: 25%;
.reveal.show-notes .speaker-notes {
top: 100%;
height: (40/0.6)*1%;
height: 40vh;
}