aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--css/reveal.css65
-rw-r--r--css/reveal.scss32
2 files changed, 47 insertions, 50 deletions
diff --git a/css/reveal.css b/css/reveal.css
index bb56205..800d1bd 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -240,7 +240,8 @@ body {
left: auto;
z-index: 1;
color: #fff;
- pointer-events: none; }
+ pointer-events: none;
+ font-size: 10px; }
.reveal .controls button {
position: absolute;
padding: 0;
@@ -255,6 +256,7 @@ body {
transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
z-index: 2;
pointer-events: auto;
+ font-size: inherit;
visibility: hidden;
opacity: 0;
-webkit-appearance: none;
@@ -265,71 +267,68 @@ body {
position: absolute;
top: 0;
left: 0;
- width: 32px;
- height: 6px;
- border-radius: 3px;
+ width: 2.6em;
+ height: 0.5em;
+ border-radius: 0.25em;
background-color: currentColor;
transition: all 0.15s ease, background-color 0.8s ease;
- -webkit-transform-origin: 3px 50%;
- transform-origin: 3px 50%;
+ -webkit-transform-origin: 0.25em 50%;
+ transform-origin: 0.25em 50%;
will-change: transform; }
.reveal .controls .pagination-arrow {
position: relative;
- width: 46px;
- height: 46px; }
+ width: 3.6em;
+ height: 3.6em; }
.reveal .controls .pagination-arrow:before {
- -webkit-transform: translateX(7px) translateY(20px) rotate(44deg);
- transform: translateX(7px) translateY(20px) rotate(44deg); }
+ -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(45deg);
+ transform: translateX(0.5em) translateY(1.55em) rotate(45deg); }
.reveal .controls .pagination-arrow:after {
- -webkit-transform: translateX(7px) translateY(20px) rotate(-44deg);
- transform: translateX(7px) translateY(20px) rotate(-44deg); }
+ -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-45deg);
+ transform: translateX(0.5em) translateY(1.55em) rotate(-45deg); }
.reveal .controls .pagination-arrow:hover:before {
- -webkit-transform: translateX(7px) translateY(20px) rotate(40deg);
- transform: translateX(7px) translateY(20px) rotate(40deg); }
+ -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(40deg);
+ transform: translateX(0.5em) translateY(1.55em) rotate(40deg); }
.reveal .controls .pagination-arrow:hover:after {
- -webkit-transform: translateX(7px) translateY(20px) rotate(-40deg);
- transform: translateX(7px) translateY(20px) rotate(-40deg); }
+ -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-40deg);
+ transform: translateX(0.5em) translateY(1.55em) rotate(-40deg); }
.reveal .controls .pagination-arrow:active:before {
- -webkit-transform: translateX(7px) translateY(20px) rotate(36deg);
- transform: translateX(7px) translateY(20px) rotate(36deg); }
+ -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(36deg);
+ transform: translateX(0.5em) translateY(1.55em) rotate(36deg); }
.reveal .controls .pagination-arrow:active:after {
- -webkit-transform: translateX(7px) translateY(20px) rotate(-36deg);
- transform: translateX(7px) translateY(20px) rotate(-36deg); }
+ -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-36deg);
+ transform: translateX(0.5em) translateY(1.55em) rotate(-36deg); }
.reveal .controls .navigate-left {
- right: 82px;
- bottom: 18px;
+ right: 6.4em;
+ bottom: 3.2em;
-webkit-transform: translateX(-10px);
transform: translateX(-10px); }
- .reveal .controls .navigate-left .pagination-arrow {
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%); }
.reveal .controls .navigate-right {
right: 0;
- bottom: 18px;
+ bottom: 3.2em;
-webkit-transform: translateX(10px);
transform: translateX(10px); }
.reveal .controls .navigate-right .pagination-arrow {
- -webkit-transform: translateY(-50%) rotate(180deg);
- transform: translateY(-50%) rotate(180deg); }
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg); }
.reveal .controls .navigate-right.highlight {
-webkit-animation: bounce-right 2s 50 both ease-out;
animation: bounce-right 2s 50 both ease-out; }
.reveal .controls .navigate-up {
- right: 18px;
- bottom: 82px;
+ right: 1.4em;
+ bottom: 6.4em;
-webkit-transform: translateY(-10px);
transform: translateY(-10px); }
.reveal .controls .navigate-up .pagination-arrow {
-webkit-transform: translateX(-50%) rotate(90deg);
transform: translateX(-50%) rotate(90deg); }
.reveal .controls .navigate-down {
- right: 18px;
+ right: 3.2em;
bottom: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px); }
.reveal .controls .navigate-down .pagination-arrow {
- -webkit-transform: translateX(-50%) rotate(-90deg);
- transform: translateX(-50%) rotate(-90deg); }
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg); }
.reveal .controls .navigate-down.highlight {
-webkit-animation: bounce-down 2s 50 both ease-out;
animation: bounce-down 2s 50 both ease-out; }
diff --git a/css/reveal.scss b/css/reveal.scss
index a5e9560..9c80a22 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -248,14 +248,14 @@ body {
}
.reveal .controls {
- $size: 46px;
- $length: floor($size * 0.7);
- $thickness: 6px;
- $angle: 44deg;
+ $size: 3.6em;
+ $length: 2.6em;
+ $thickness: 0.5em;
+ $angle: 45deg;
$angleHover: 40deg;
$angleActive: 36deg;
$spacing: 12px;
- $innerSpacing: 18px;
+ $innerSpacing: 1.4em;
@mixin arrowTransform( $angle ) {
&:before {
@@ -276,6 +276,7 @@ body {
z-index: 1;
color: #fff;
pointer-events: none;
+ font-size: 10px;
button {
position: absolute;
@@ -291,6 +292,7 @@ body {
transform 0.2s ease;
z-index: 2; // above slides
pointer-events: auto;
+ font-size: inherit;
visibility: hidden;
opacity: 0;
@@ -333,21 +335,17 @@ body {
.navigate-left {
right: $size + $innerSpacing*2;
- bottom: $innerSpacing;
+ bottom: $innerSpacing + $size/2;
transform: translateX( -10px );
-
- .pagination-arrow {
- transform: translateY(-50%);
- }
}
.navigate-right {
right: 0;
- bottom: $innerSpacing;
+ bottom: $innerSpacing + $size/2;
transform: translateX( 10px );
.pagination-arrow {
- transform: translateY(-50%) rotate( 180deg );
+ transform: rotate( 180deg );
}
&.highlight {
@@ -357,7 +355,7 @@ body {
.navigate-up {
right: $innerSpacing;
- bottom: $size + $innerSpacing*2;
+ bottom: $innerSpacing*2 + $size;
transform: translateY( -10px );
.pagination-arrow {
@@ -366,12 +364,12 @@ body {
}
.navigate-down {
- right: $innerSpacing;
+ right: $innerSpacing + $size/2;
bottom: 0;
transform: translateY( 10px );
.pagination-arrow {
- transform: translateX(-50%) rotate( -90deg );
+ transform: rotate( -90deg );
}
&.highlight {
@@ -380,7 +378,7 @@ body {
}
// Back arrow style: "faded":
- // Strongly deemphasizes backwards navigation in favor of drawing
+ // Deemphasize backwards navigation arrows in favor of drawing
// attention to forwards navigation
&[data-controls-back-arrows="faded"] .navigate-left.enabled,
&[data-controls-back-arrows="faded"] .navigate-up.enabled {
@@ -392,7 +390,7 @@ body {
}
// Back arrow style: "hidden":
- // Never shows any arrows for backwards navigation
+ // Never show arrows for backwards navigation
&[data-controls-back-arrows="hidden"] .navigate-left.enabled,
&[data-controls-back-arrows="hidden"] .navigate-up.enabled {
opacity: 0;
generated by cgit v1.2.3 (git 2.45.0) at 2024-11-21 14:44:30 +0000