diff options
Diffstat (limited to 'css/reveal.css')
| -rw-r--r-- | css/reveal.css | 193 |
1 files changed, 137 insertions, 56 deletions
diff --git a/css/reveal.css b/css/reveal.css index 5f501b1..8f026a6 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -189,7 +189,7 @@ body { /********************************************* * CONTROLS *********************************************/ -.reveal .controls { +.reveal .controls[data-controls-type="bottom-right"] { display: none; position: fixed; width: 110px; @@ -198,62 +198,143 @@ body { right: 10px; bottom: 10px; -webkit-user-select: none; } - -.reveal .controls button { - padding: 0; + .reveal .controls[data-controls-type="bottom-right"] button { + padding: 0; + position: absolute; + opacity: 0.05; + width: 0; + height: 0; + background-color: transparent; + border: 12px solid transparent; + -webkit-transform: scale(0.9999); + transform: scale(0.9999); + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; + -webkit-appearance: none; + -webkit-tap-highlight-color: transparent; } + .reveal .controls[data-controls-type="bottom-right"] .enabled { + opacity: 0.7; + cursor: pointer; } + .reveal .controls[data-controls-type="bottom-right"] .enabled:active { + margin-top: 1px; } + .reveal .controls[data-controls-type="bottom-right"] .navigate-left { + top: 42px; + border-right-width: 22px; + border-right-color: #000; } + .reveal .controls[data-controls-type="bottom-right"] .navigate-left.fragmented { + opacity: 0.3; } + .reveal .controls[data-controls-type="bottom-right"] .navigate-right { + left: 74px; + top: 42px; + border-left-width: 22px; + border-left-color: #000; } + .reveal .controls[data-controls-type="bottom-right"] .navigate-right.fragmented { + opacity: 0.3; } + .reveal .controls[data-controls-type="bottom-right"] .navigate-up { + left: 42px; + border-bottom-width: 22px; + border-bottom-color: #000; } + .reveal .controls[data-controls-type="bottom-right"] .navigate-up.fragmented { + opacity: 0.3; } + .reveal .controls[data-controls-type="bottom-right"] .navigate-down { + left: 42px; + top: 74px; + border-top-width: 22px; + border-top-color: #000; } + .reveal .controls[data-controls-type="bottom-right"] .navigate-down.fragmented { + opacity: 0.3; } + +.reveal .controls[data-controls-type="edges"] { + display: none; position: absolute; - opacity: 0.05; - width: 0; - height: 0; - background-color: transparent; - border: 12px solid transparent; - -webkit-transform: scale(0.9999); - transform: scale(0.9999); - -webkit-transition: all 0.2s ease; - transition: all 0.2s ease; - -webkit-appearance: none; - -webkit-tap-highlight-color: transparent; } - -.reveal .controls .enabled { - opacity: 0.7; - cursor: pointer; } - -.reveal .controls .enabled:active { - margin-top: 1px; } - -.reveal .controls .navigate-left { - top: 42px; - border-right-width: 22px; - border-right-color: #000; } - -.reveal .controls .navigate-left.fragmented { - opacity: 0.3; } - -.reveal .controls .navigate-right { - left: 74px; - top: 42px; - border-left-width: 22px; - border-left-color: #000; } - -.reveal .controls .navigate-right.fragmented { - opacity: 0.3; } - -.reveal .controls .navigate-up { - left: 42px; - border-bottom-width: 22px; - border-bottom-color: #000; } - -.reveal .controls .navigate-up.fragmented { - opacity: 0.3; } - -.reveal .controls .navigate-down { - left: 42px; - top: 74px; - border-top-width: 22px; - border-top-color: #000; } - -.reveal .controls .navigate-down.fragmented { - opacity: 0.3; } + top: 0; + right: 0; + bottom: 0; + left: 0; } + .reveal .controls[data-controls-type="edges"] button { + position: absolute; + padding: 0; + width: 36px; + height: 36px; + background-color: transparent; + border: 0; + outline: 0; + cursor: pointer; + opacity: 0; + -webkit-transform: scale(0.9999); + transform: scale(0.9999); + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; + z-index: 2; + -webkit-appearance: none; + -webkit-tap-highlight-color: transparent; } + .reveal .controls[data-controls-type="edges"] button:before, + .reveal .controls[data-controls-type="edges"] button:after { + content: ''; + position: absolute; + top: 40%; + left: 0; + width: 36px; + height: 5px; + border-radius: 2.5px; + background: #fff; + -webkit-transition: all 0.15s ease; + transition: all 0.15s ease; + -webkit-transform-origin: 0% 50%; + transform-origin: 0% 50%; } + .reveal .controls[data-controls-type="edges"] button:before { + -webkit-transform: translate(0, -1px) rotate(40deg); + transform: translate(0, -1px) rotate(40deg); } + .reveal .controls[data-controls-type="edges"] button:after { + -webkit-transform: translate(0, 1px) rotate(-40deg); + transform: translate(0, 1px) rotate(-40deg); } + .reveal .controls[data-controls-type="edges"] button:hover:before { + -webkit-transform: translate(0, -1px) rotate(36deg); + transform: translate(0, -1px) rotate(36deg); } + .reveal .controls[data-controls-type="edges"] button:hover:after { + -webkit-transform: translate(0, 1px) rotate(-36deg); + transform: translate(0, 1px) rotate(-36deg); } + .reveal .controls[data-controls-type="edges"] button:active:before { + -webkit-transform: translate(0, -1px) rotate(34deg); + transform: translate(0, -1px) rotate(34deg); } + .reveal .controls[data-controls-type="edges"] button:active:after { + -webkit-transform: translate(0, 1px) rotate(-34deg); + transform: translate(0, 1px) rotate(-34deg); } + .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"] .navigate-left { + top: 50%; + left: 18px; + margin-top: -18px; } + .reveal .controls[data-controls-type="edges"] .navigate-left.fragmented { + opacity: 0.3; } + .reveal .controls[data-controls-type="edges"] .navigate-right { + top: 50%; + right: 18px; + margin-top: -18px; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); } + .reveal .controls[data-controls-type="edges"] .navigate-right.fragmented { + opacity: 0.3; } + .reveal .controls[data-controls-type="edges"] .navigate-up { + top: 18px; + left: 50%; + margin-left: -18px; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); } + .reveal .controls[data-controls-type="edges"] .navigate-up.fragmented { + opacity: 0.3; } + .reveal .controls[data-controls-type="edges"] .navigate-down { + bottom: 18px; + left: 50%; + margin-left: -18px; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); } + .reveal .controls[data-controls-type="edges"] .navigate-down.fragmented { + opacity: 0.3; } /********************************************* * PROGRESS BAR |