aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2016-04-26 11:08:10 +0200
committerHakim El Hattab <hakim.elhattab@gmail.com>2017-05-16 09:45:37 +0200
commit8a09557699d94d9128f98ce5115245d1bd1f68db (patch)
tree28aef418271d9026b9104f0bd0f874409f310dab
parent69c72b9e084baa527afebff76424b04751f42cf7 (diff)
downloadfosdem-2018-presentation-8a09557699d94d9128f98ce5115245d1bd1f68db.tar
fosdem-2018-presentation-8a09557699d94d9128f98ce5115245d1bd1f68db.tar.gz
control size tweaks
-rw-r--r--css/reveal.css39
-rw-r--r--css/reveal.scss23
2 files changed, 32 insertions, 30 deletions
diff --git a/css/reveal.css b/css/reveal.css
index 6f30f69..897906b 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -254,8 +254,8 @@ body {
.reveal .controls[data-controls-type="edges"] button {
position: absolute;
padding: 0;
- width: 44px;
- height: 44px;
+ width: 50px;
+ height: 50px;
background-color: transparent;
border: 0;
outline: 0;
@@ -274,7 +274,7 @@ body {
position: absolute;
top: 0;
left: 0;
- width: 33px;
+ width: 30px;
height: 5px;
border-radius: 2.5px;
background-color: #fff;
@@ -283,30 +283,31 @@ body {
-webkit-transform-origin: 2.5px 50%;
transform-origin: 2.5px 50%; }
.reveal .controls[data-controls-type="edges"] button:before {
- -webkit-transform: translateY(19.5px) rotate(40deg);
- transform: translateY(19.5px) rotate(40deg); }
+ -webkit-transform: translateX(10px) translateY(22.5px) rotate(44deg);
+ transform: translateX(10px) translateY(22.5px) rotate(44deg); }
.reveal .controls[data-controls-type="edges"] button:after {
- -webkit-transform: translateY(19.5px) rotate(-40deg);
- transform: translateY(19.5px) rotate(-40deg); }
+ -webkit-transform: translateX(10px) translateY(22.5px) rotate(-44deg);
+ transform: translateX(10px) translateY(22.5px) rotate(-44deg); }
.reveal .controls[data-controls-type="edges"] button:hover:before {
- -webkit-transform: translateY(19.5px) rotate(36deg);
- transform: translateY(19.5px) rotate(36deg); }
+ -webkit-transform: translateX(10px) translateY(22.5px) rotate(40deg);
+ transform: translateX(10px) translateY(22.5px) rotate(40deg); }
.reveal .controls[data-controls-type="edges"] button:hover:after {
- -webkit-transform: translateY(19.5px) rotate(-36deg);
- transform: translateY(19.5px) rotate(-36deg); }
+ -webkit-transform: translateX(10px) translateY(22.5px) rotate(-40deg);
+ transform: translateX(10px) translateY(22.5px) rotate(-40deg); }
.reveal .controls[data-controls-type="edges"] button:active:before {
- -webkit-transform: translateY(19.5px) rotate(34deg);
- transform: translateY(19.5px) rotate(34deg); }
+ -webkit-transform: translateX(10px) translateY(22.5px) rotate(36deg);
+ transform: translateX(10px) translateY(22.5px) rotate(36deg); }
.reveal .controls[data-controls-type="edges"] button:active:after {
- -webkit-transform: translateY(19.5px) rotate(-34deg);
- transform: translateY(19.5px) rotate(-34deg); }
+ -webkit-transform: translateX(10px) translateY(22.5px) rotate(-36deg);
+ transform: translateX(10px) translateY(22.5px) rotate(-36deg); }
.reveal .controls[data-controls-type="edges"] .enabled {
opacity: 0.7;
cursor: pointer; }
- .reveal .controls[data-controls-type="edges"] .enabled:hover {
- opacity: 1; }
.reveal .controls[data-controls-type="edges"] .enabled.fragmented {
opacity: 0.3; }
+ .reveal .controls[data-controls-type="edges"] .enabled:hover,
+ .reveal .controls[data-controls-type="edges"] .enabled.fragmented:hover {
+ opacity: 1; }
.reveal .controls[data-controls-type="edges"] .navigate-left {
top: 50%;
left: 18px;
@@ -338,14 +339,14 @@ body {
top: auto;
left: auto; }
.reveal .controls[data-controls-type="edges"] .navigate-left {
- right: 80px;
+ right: 86px;
bottom: 18px; }
.reveal .controls[data-controls-type="edges"] .navigate-right {
right: 0;
bottom: 18px; }
.reveal .controls[data-controls-type="edges"] .navigate-up {
right: 18px;
- bottom: 80px; }
+ bottom: 86px; }
.reveal .controls[data-controls-type="edges"] .navigate-down {
right: 18px;
bottom: 0; } }
diff --git a/css/reveal.scss b/css/reveal.scss
index 627e196..2561309 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -314,21 +314,21 @@ body {
.reveal .controls[data-controls-type="edges"] {
- $size: 44px;
- $length: floor($size * 0.75);
+ $size: 50px;
+ $length: floor($size * 0.6);
$spacing: 18px;
$thickness: 5px;
- $angle: 40deg;
- $angleHover: 36deg;
- $angleActive: 34deg;
+ $angle: 44deg;
+ $angleHover: 40deg;
+ $angleActive: 36deg;
@mixin arrowTransform( $angle ) {
&:before {
- transform: translateY(($size - $thickness)/2) rotate( $angle );
+ transform: translateX(($size - $length)/2) translateY(($size - $thickness)/2) rotate( $angle );
}
&:after {
- transform: translateY(($size - $thickness)/2) rotate( -$angle );
+ transform: translateX(($size - $length)/2) translateY(($size - $thickness)/2) rotate( -$angle );
}
}
@@ -388,14 +388,15 @@ body {
cursor: pointer;
}
- .enabled:hover {
- opacity: 1;
- }
-
.enabled.fragmented {
opacity: 0.3;
}
+ .enabled:hover,
+ .enabled.fragmented:hover {
+ opacity: 1;
+ }
+
.navigate-left {
top: 50%;
left: $spacing;