diff --git a/css/reveal.css b/css/reveal.css index 897906bd..dfa4e4c8 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -189,69 +189,14 @@ body { /********************************************* * CONTROLS *********************************************/ -.reveal .controls[data-controls-type="bottom-right"] { - display: none; - position: fixed; - width: 110px; - height: 110px; - z-index: 30; - right: 10px; - bottom: 10px; - -webkit-user-select: none; } - .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"] { +.reveal .controls { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } - .reveal .controls[data-controls-type="edges"] button { + .reveal .controls button { position: absolute; padding: 0; width: 50px; @@ -268,8 +213,8 @@ body { 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 { + .reveal .controls button:before, + .reveal .controls button:after { content: ''; position: absolute; top: 0; @@ -282,81 +227,116 @@ body { transition: all 0.15s ease, background-color 0.8s ease; -webkit-transform-origin: 2.5px 50%; transform-origin: 2.5px 50%; } - .reveal .controls[data-controls-type="edges"] button:before { + .reveal .controls button:before { -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 { + .reveal .controls button:after { -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 { + .reveal .controls button:hover:before { -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 { + .reveal .controls button:hover:after { -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 { + .reveal .controls button:active:before { -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 { + .reveal .controls button:active:after { -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.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 { + .reveal .controls .navigate-left { top: 50%; left: 18px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } - .reveal .controls[data-controls-type="edges"] .navigate-right { + .reveal .controls .navigate-right { top: 50%; right: 18px; -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } - .reveal .controls[data-controls-type="edges"] .navigate-up { + .reveal .controls .navigate-up { top: 18px; left: 50%; -webkit-transform: translateX(-50%) rotate(90deg); transform: translateX(-50%) rotate(90deg); } - .reveal .controls[data-controls-type="edges"] .navigate-down { + .reveal .controls .navigate-down { bottom: 18px; left: 50%; -webkit-transform: translateX(-50%) rotate(-90deg); transform: translateX(-50%) rotate(-90deg); } + .reveal .controls.soften-back-arrows .navigate-left.enabled, + .reveal .controls.soften-back-arrows .navigate-up.enabled { + opacity: 0.3; } + .reveal .controls.soften-back-arrows .navigate-left.enabled:hover, + .reveal .controls.soften-back-arrows .navigate-up.enabled:hover { + opacity: 1; } + .reveal .controls .enabled { + opacity: 0.7; + cursor: pointer; } + .reveal .controls .enabled.fragmented { + opacity: 0.3; } + .reveal .controls .enabled:hover, + .reveal .controls .enabled.fragmented:hover { + opacity: 1; } + .reveal .controls[data-controls-placement="bottom-right"] { + bottom: 18px; + right: 18px; + -webkit-transform: scale(0.85); + transform: scale(0.85); + -webkit-transform-origin: 100% 100%; + transform-origin: 100% 100%; } + .reveal .controls[data-controls-placement="bottom-right"] .navigate-left, + .reveal .controls[data-controls-placement="bottom-right"] .navigate-right, + .reveal .controls[data-controls-placement="bottom-right"] .navigate-up, + .reveal .controls[data-controls-placement="bottom-right"] .navigate-down { + top: auto; + left: auto; } + .reveal .controls[data-controls-placement="bottom-right"] .navigate-left { + right: 86px; + bottom: 18px; } + .reveal .controls[data-controls-placement="bottom-right"] .navigate-right { + right: 0; + bottom: 18px; } + .reveal .controls[data-controls-placement="bottom-right"] .navigate-up { + right: 18px; + bottom: 86px; } + .reveal .controls[data-controls-placement="bottom-right"] .navigate-down { + right: 18px; + bottom: 0; } @media screen and (max-width: 500px) { - .reveal .controls[data-controls-type="edges"] { + .reveal .controls { bottom: 18px; - right: 18px; } - .reveal .controls[data-controls-type="edges"] .navigate-left, - .reveal .controls[data-controls-type="edges"] .navigate-right, - .reveal .controls[data-controls-type="edges"] .navigate-up, - .reveal .controls[data-controls-type="edges"] .navigate-down { + right: 18px; + -webkit-transform: scale(0.85); + transform: scale(0.85); + -webkit-transform-origin: 100% 100%; + transform-origin: 100% 100%; } + .reveal .controls .navigate-left, + .reveal .controls .navigate-right, + .reveal .controls .navigate-up, + .reveal .controls .navigate-down { top: auto; left: auto; } - .reveal .controls[data-controls-type="edges"] .navigate-left { + .reveal .controls .navigate-left { right: 86px; bottom: 18px; } - .reveal .controls[data-controls-type="edges"] .navigate-right { + .reveal .controls .navigate-right { right: 0; bottom: 18px; } - .reveal .controls[data-controls-type="edges"] .navigate-up { + .reveal .controls .navigate-up { right: 18px; bottom: 86px; } - .reveal .controls[data-controls-type="edges"] .navigate-down { + .reveal .controls .navigate-down { right: 18px; bottom: 0; } } -.reveal.has-dark-background .controls[data-controls-type="edges"] button:after, -.reveal.has-dark-background .controls[data-controls-type="edges"] button:before { +.reveal.has-dark-background .controls button:after, +.reveal.has-dark-background .controls button:before { background-color: #fff; } -.reveal.has-light-background .controls[data-controls-type="edges"] button:after, -.reveal.has-light-background .controls[data-controls-type="edges"] button:before { +.reveal.has-light-background .controls button:after, +.reveal.has-light-background .controls button:before { background-color: #000; } /********************************************* diff --git a/css/reveal.scss b/css/reveal.scss index 2561309a..15f0d9a6 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -235,85 +235,7 @@ body { * CONTROLS *********************************************/ -.reveal .controls[data-controls-type="bottom-right"] { - display: none; - position: fixed; - width: 110px; - height: 110px; - z-index: 30; - right: 10px; - bottom: 10px; - - -webkit-user-select: none; - - button { - padding: 0; - position: absolute; - opacity: 0.05; - width: 0; - height: 0; - background-color: transparent; - border: 12px solid transparent; - transform: scale(.9999); - transition: all 0.2s ease; - -webkit-appearance: none; - -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); - } - - .enabled { - opacity: 0.7; - cursor: pointer; - } - - .enabled:active { - margin-top: 1px; - } - - .navigate-left { - top: 42px; - - border-right-width: 22px; - border-right-color: #000; - } - .navigate-left.fragmented { - opacity: 0.3; - } - - .navigate-right { - left: 74px; - top: 42px; - - border-left-width: 22px; - border-left-color: #000; - } - .navigate-right.fragmented { - opacity: 0.3; - } - - .navigate-up { - left: 42px; - - border-bottom-width: 22px; - border-bottom-color: #000; - } - .navigate-up.fragmented { - opacity: 0.3; - } - - .navigate-down { - left: 42px; - top: 74px; - - border-top-width: 22px; - border-top-color: #000; - } - .navigate-down.fragmented { - opacity: 0.3; - } -} - - -.reveal .controls[data-controls-type="edges"] { +.reveal .controls { $size: 50px; $length: floor($size * 0.6); $spacing: 18px; @@ -383,20 +305,6 @@ body { } } - .enabled { - opacity: 0.7; - cursor: pointer; - } - - .enabled.fragmented { - opacity: 0.3; - } - - .enabled:hover, - .enabled.fragmented:hover { - opacity: 1; - } - .navigate-left { top: 50%; left: $spacing; @@ -421,10 +329,41 @@ body { transform: translateX(-50%) rotate( -90deg ); } - @media screen and (max-width: 500px) { + // The soften back arrows option strongly deemphasizes + // backwards navigation in favor of drawing attention + // forwards + &.soften-back-arrows .navigate-left.enabled, + &.soften-back-arrows .navigate-up.enabled { + opacity: 0.3; + + &:hover { + opacity: 1; + } + } + + // Any control button that can be clicked is "enabled" + .enabled { + opacity: 0.7; + cursor: pointer; + } + + // Any control button that leads to showing or hiding + // a fragment + .enabled.fragmented { + opacity: 0.3; + } + + .enabled:hover, + .enabled.fragmented:hover { + opacity: 1; + } + + @mixin bottom-right-controls() { & { bottom: $spacing; right: $spacing; + transform: scale(0.85); + transform-origin: 100% 100%; } .navigate-left, @@ -452,15 +391,23 @@ body { bottom: 0; } } + + &[data-controls-placement="bottom-right"] { + @include bottom-right-controls() + } + + @media screen and (max-width: 500px) { + @include bottom-right-controls() + } } -.reveal.has-dark-background .controls[data-controls-type="edges"] button:after, -.reveal.has-dark-background .controls[data-controls-type="edges"] button:before { +.reveal.has-dark-background .controls button:after, +.reveal.has-dark-background .controls button:before { background-color: #fff; } -.reveal.has-light-background .controls[data-controls-type="edges"] button:after, -.reveal.has-light-background .controls[data-controls-type="edges"] button:before { +.reveal.has-light-background .controls button:after, +.reveal.has-light-background .controls button:before { background-color: #000; } diff --git a/css/theme/beige.css b/css/theme/beige.css index c92d5015..3e116497 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -255,37 +255,9 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls[data-controls-type="bottom-right"] .navigate-left, -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { - border-right-color: #8b743d; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right, -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled { - border-left-color: #8b743d; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up, -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled { - border-bottom-color: #8b743d; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down, -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled { - border-top-color: #8b743d; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover { - border-right-color: #c0a86e; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover { - border-left-color: #c0a86e; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover { - border-bottom-color: #c0a86e; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover { - border-top-color: #c0a86e; } - -.reveal .controls[data-controls-type="edges"] button:before, -.reveal .controls[data-controls-type="edges"] button:after { - background-color: #333; } +.reveal .controls button:before, +.reveal .controls button:after { + background-color: #8b743d; } /********************************************* * PROGRESS BAR diff --git a/css/theme/black.css b/css/theme/black.css index ed5819db..6106a33d 100644 --- a/css/theme/black.css +++ b/css/theme/black.css @@ -251,37 +251,9 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls[data-controls-type="bottom-right"] .navigate-left, -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { - border-right-color: #42affa; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right, -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled { - border-left-color: #42affa; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up, -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled { - border-bottom-color: #42affa; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down, -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled { - border-top-color: #42affa; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover { - border-right-color: #8dcffc; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover { - border-left-color: #8dcffc; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover { - border-bottom-color: #8dcffc; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover { - border-top-color: #8dcffc; } - -.reveal .controls[data-controls-type="edges"] button:before, -.reveal .controls[data-controls-type="edges"] button:after { - background-color: #fff; } +.reveal .controls button:before, +.reveal .controls button:after { + background-color: #42affa; } /********************************************* * PROGRESS BAR diff --git a/css/theme/blood.css b/css/theme/blood.css index 38c2a083..b3753fb5 100644 --- a/css/theme/blood.css +++ b/css/theme/blood.css @@ -254,37 +254,9 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls[data-controls-type="bottom-right"] .navigate-left, -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { - border-right-color: #a23; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right, -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled { - border-left-color: #a23; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up, -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled { - border-bottom-color: #a23; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down, -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled { - border-top-color: #a23; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover { - border-right-color: #dd5566; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover { - border-left-color: #dd5566; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover { - border-bottom-color: #dd5566; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover { - border-top-color: #dd5566; } - -.reveal .controls[data-controls-type="edges"] button:before, -.reveal .controls[data-controls-type="edges"] button:after { - background-color: #eee; } +.reveal .controls button:before, +.reveal .controls button:after { + background-color: #a23; } /********************************************* * PROGRESS BAR diff --git a/css/theme/league.css b/css/theme/league.css index d4ef8587..bce492c7 100644 --- a/css/theme/league.css +++ b/css/theme/league.css @@ -257,37 +257,9 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls[data-controls-type="bottom-right"] .navigate-left, -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { - border-right-color: #13DAEC; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right, -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled { - border-left-color: #13DAEC; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up, -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled { - border-bottom-color: #13DAEC; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down, -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled { - border-top-color: #13DAEC; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover { - border-right-color: #71e9f4; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover { - border-left-color: #71e9f4; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover { - border-bottom-color: #71e9f4; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover { - border-top-color: #71e9f4; } - -.reveal .controls[data-controls-type="edges"] button:before, -.reveal .controls[data-controls-type="edges"] button:after { - background-color: #eee; } +.reveal .controls button:before, +.reveal .controls button:after { + background-color: #13DAEC; } /********************************************* * PROGRESS BAR diff --git a/css/theme/moon.css b/css/theme/moon.css index 8b8285ab..e12fca19 100644 --- a/css/theme/moon.css +++ b/css/theme/moon.css @@ -255,37 +255,9 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls[data-controls-type="bottom-right"] .navigate-left, -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { - border-right-color: #268bd2; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right, -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled { - border-left-color: #268bd2; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up, -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled { - border-bottom-color: #268bd2; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down, -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled { - border-top-color: #268bd2; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover { - border-right-color: #78b9e6; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover { - border-left-color: #78b9e6; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover { - border-bottom-color: #78b9e6; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover { - border-top-color: #78b9e6; } - -.reveal .controls[data-controls-type="edges"] button:before, -.reveal .controls[data-controls-type="edges"] button:after { - background-color: #93a1a1; } +.reveal .controls button:before, +.reveal .controls button:after { + background-color: #268bd2; } /********************************************* * PROGRESS BAR diff --git a/css/theme/night.css b/css/theme/night.css index db136c18..f6796b38 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -249,37 +249,9 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls[data-controls-type="bottom-right"] .navigate-left, -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { - border-right-color: #e7ad52; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right, -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled { - border-left-color: #e7ad52; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up, -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled { - border-bottom-color: #e7ad52; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down, -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled { - border-top-color: #e7ad52; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover { - border-right-color: #f3d7ac; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover { - border-left-color: #f3d7ac; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover { - border-bottom-color: #f3d7ac; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover { - border-top-color: #f3d7ac; } - -.reveal .controls[data-controls-type="edges"] button:before, -.reveal .controls[data-controls-type="edges"] button:after { - background-color: #eee; } +.reveal .controls button:before, +.reveal .controls button:after { + background-color: #e7ad52; } /********************************************* * PROGRESS BAR diff --git a/css/theme/serif.css b/css/theme/serif.css index 4049b807..b426a66f 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -251,37 +251,9 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls[data-controls-type="bottom-right"] .navigate-left, -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { - border-right-color: #51483D; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right, -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled { - border-left-color: #51483D; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up, -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled { - border-bottom-color: #51483D; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down, -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled { - border-top-color: #51483D; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover { - border-right-color: #8b7c69; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover { - border-left-color: #8b7c69; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover { - border-bottom-color: #8b7c69; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover { - border-top-color: #8b7c69; } - -.reveal .controls[data-controls-type="edges"] button:before, -.reveal .controls[data-controls-type="edges"] button:after { - background-color: #000; } +.reveal .controls button:before, +.reveal .controls button:after { + background-color: #51483D; } /********************************************* * PROGRESS BAR diff --git a/css/theme/simple.css b/css/theme/simple.css index aa4900e8..fd240925 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -254,37 +254,9 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls[data-controls-type="bottom-right"] .navigate-left, -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { - border-right-color: #00008B; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right, -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled { - border-left-color: #00008B; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up, -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled { - border-bottom-color: #00008B; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down, -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled { - border-top-color: #00008B; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover { - border-right-color: #0000f1; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover { - border-left-color: #0000f1; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover { - border-bottom-color: #0000f1; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover { - border-top-color: #0000f1; } - -.reveal .controls[data-controls-type="edges"] button:before, -.reveal .controls[data-controls-type="edges"] button:after { - background-color: #000; } +.reveal .controls button:before, +.reveal .controls button:after { + background-color: #00008B; } /********************************************* * PROGRESS BAR diff --git a/css/theme/sky.css b/css/theme/sky.css index e8034ffa..881f2fd1 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -258,37 +258,9 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls[data-controls-type="bottom-right"] .navigate-left, -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { - border-right-color: #3b759e; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right, -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled { - border-left-color: #3b759e; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up, -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled { - border-bottom-color: #3b759e; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down, -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled { - border-top-color: #3b759e; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover { - border-right-color: #74a7cb; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover { - border-left-color: #74a7cb; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover { - border-bottom-color: #74a7cb; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover { - border-top-color: #74a7cb; } - -.reveal .controls[data-controls-type="edges"] button:before, -.reveal .controls[data-controls-type="edges"] button:after { - background-color: #333; } +.reveal .controls button:before, +.reveal .controls button:after { + background-color: #3b759e; } /********************************************* * PROGRESS BAR diff --git a/css/theme/solarized.css b/css/theme/solarized.css index 72838798..b20d22af 100644 --- a/css/theme/solarized.css +++ b/css/theme/solarized.css @@ -255,37 +255,9 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls[data-controls-type="bottom-right"] .navigate-left, -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { - border-right-color: #268bd2; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right, -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled { - border-left-color: #268bd2; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up, -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled { - border-bottom-color: #268bd2; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down, -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled { - border-top-color: #268bd2; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover { - border-right-color: #78b9e6; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover { - border-left-color: #78b9e6; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover { - border-bottom-color: #78b9e6; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover { - border-top-color: #78b9e6; } - -.reveal .controls[data-controls-type="edges"] button:before, -.reveal .controls[data-controls-type="edges"] button:after { - background-color: #657b83; } +.reveal .controls button:before, +.reveal .controls button:after { + background-color: #268bd2; } /********************************************* * PROGRESS BAR diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 7a5f4063..fb116fcb 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -297,45 +297,9 @@ body { * NAVIGATION CONTROLS *********************************************/ -.reveal .controls[data-controls-type="bottom-right"] .navigate-left, -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { - border-right-color: $linkColor; -} - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right, -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled { - border-left-color: $linkColor; -} - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up, -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled { - border-bottom-color: $linkColor; -} - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down, -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled { - border-top-color: $linkColor; -} - -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover { - border-right-color: $linkColorHover; -} - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover { - border-left-color: $linkColorHover; -} - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover { - border-bottom-color: $linkColorHover; -} - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover { - border-top-color: $linkColorHover; -} - -.reveal .controls[data-controls-type="edges"] button:before, -.reveal .controls[data-controls-type="edges"] button:after { - background-color: $mainColor; +.reveal .controls button:before, +.reveal .controls button:after { + background-color: $linkColor; } diff --git a/css/theme/white.css b/css/theme/white.css index 7e3d63cd..299d9ff0 100644 --- a/css/theme/white.css +++ b/css/theme/white.css @@ -251,37 +251,9 @@ body { /********************************************* * NAVIGATION CONTROLS *********************************************/ -.reveal .controls[data-controls-type="bottom-right"] .navigate-left, -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled { - border-right-color: #2a76dd; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right, -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled { - border-left-color: #2a76dd; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up, -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled { - border-bottom-color: #2a76dd; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down, -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled { - border-top-color: #2a76dd; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover { - border-right-color: #6ca0e8; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover { - border-left-color: #6ca0e8; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover { - border-bottom-color: #6ca0e8; } - -.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover { - border-top-color: #6ca0e8; } - -.reveal .controls[data-controls-type="edges"] button:before, -.reveal .controls[data-controls-type="edges"] button:after { - background-color: #222; } +.reveal .controls button:before, +.reveal .controls button:after { + background-color: #2a76dd; } /********************************************* * PROGRESS BAR diff --git a/js/reveal.js b/js/reveal.js index 803c50aa..522d7cbc 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -52,6 +52,12 @@ // Display controls in the bottom right corner controls: true, + // Determines where controls appear, either "bottom-right" or "edges" + controlsPlacement: 'edges', + + // De-emphasizes backwards navigation controls + controlsSoftenBackArrows: true, + // Display a presentation progress bar progress: true, @@ -998,12 +1004,8 @@ dom.controls.style.display = config.controls ? 'block' : 'none'; dom.progress.style.display = config.progress ? 'block' : 'none'; - var controlsType = typeof config.controls === 'string' ? config.controls : 'bottom-right'; - dom.controls.setAttribute( 'data-controls-type', controlsType ); - - if( typeof config.controls === 'string' ) { - dom.controls.classList.add( config.controls ); - } + dom.controls.setAttribute( 'data-controls-placement', config.controlsPlacement ); + dom.controls.classList.toggle( 'soften-back-arrows', config.controlsSoftenBackArrows ); if( config.shuffle ) { shuffle();