diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2016-04-20 16:27:19 +0200 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2017-05-16 09:45:37 +0200 |
| commit | 69c72b9e084baa527afebff76424b04751f42cf7 (patch) | |
| tree | 8da465655193d5b9ca06cfe4bf036c1ef567423d | |
| parent | ce4537f883c2af1a1884418c2addf9e42003e55d (diff) | |
| download | fosdem-2018-presentation-69c72b9e084baa527afebff76424b04751f42cf7.tar fosdem-2018-presentation-69c72b9e084baa527afebff76424b04751f42cf7.tar.gz | |
invert colors of controls based on current background
| -rw-r--r-- | css/reveal.css | 14 | ||||
| -rw-r--r-- | css/reveal.scss | 14 |
2 files changed, 23 insertions, 5 deletions
diff --git a/css/reveal.css b/css/reveal.css index 60df7c3..6f30f69 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -277,9 +277,9 @@ body { width: 33px; height: 5px; border-radius: 2.5px; - background: #fff; - -webkit-transition: all 0.15s ease; - transition: all 0.15s ease; + background-color: #fff; + -webkit-transition: all 0.15s ease, background-color 0.8s ease; + 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 { @@ -350,6 +350,14 @@ body { 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 { + 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 { + background-color: #000; } + /********************************************* * PROGRESS BAR *********************************************/ diff --git a/css/reveal.scss b/css/reveal.scss index 82e1b0a..627e196 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -365,9 +365,9 @@ body { width: $length; height: $thickness; border-radius: $thickness/2; - background: #fff; + background-color: #fff; - transition: all 0.15s ease; + transition: all 0.15s ease, background-color 0.8s ease; transform-origin: $thickness/2 50%; } @@ -453,6 +453,16 @@ body { } } +.reveal.has-dark-background .controls[data-controls-type="edges"] button:after, +.reveal.has-dark-background .controls[data-controls-type="edges"] 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 { + background-color: #000; +} + /********************************************* * PROGRESS BAR |