diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2016-04-26 11:08:10 +0200 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2017-05-16 09:45:37 +0200 |
| commit | 8a09557699d94d9128f98ce5115245d1bd1f68db (patch) | |
| tree | 28aef418271d9026b9104f0bd0f874409f310dab /css | |
| parent | 69c72b9e084baa527afebff76424b04751f42cf7 (diff) | |
| download | fosdem-2018-presentation-8a09557699d94d9128f98ce5115245d1bd1f68db.tar fosdem-2018-presentation-8a09557699d94d9128f98ce5115245d1bd1f68db.tar.gz | |
control size tweaks
Diffstat (limited to 'css')
| -rw-r--r-- | css/reveal.css | 39 | ||||
| -rw-r--r-- | css/reveal.scss | 23 |
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; |