invert colors of controls based on current background

This commit is contained in:
Hakim El Hattab 2016-04-20 16:27:19 +02:00
parent ce4537f883
commit 69c72b9e08
2 changed files with 23 additions and 5 deletions

View file

@ -277,9 +277,9 @@ body {
width: 33px; width: 33px;
height: 5px; height: 5px;
border-radius: 2.5px; border-radius: 2.5px;
background: #fff; background-color: #fff;
-webkit-transition: all 0.15s ease; -webkit-transition: all 0.15s ease, background-color 0.8s ease;
transition: all 0.15s ease; transition: all 0.15s ease, background-color 0.8s ease;
-webkit-transform-origin: 2.5px 50%; -webkit-transform-origin: 2.5px 50%;
transform-origin: 2.5px 50%; } transform-origin: 2.5px 50%; }
.reveal .controls[data-controls-type="edges"] button:before { .reveal .controls[data-controls-type="edges"] button:before {
@ -350,6 +350,14 @@ body {
right: 18px; right: 18px;
bottom: 0; } } 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 * PROGRESS BAR
*********************************************/ *********************************************/

View file

@ -365,9 +365,9 @@ body {
width: $length; width: $length;
height: $thickness; height: $thickness;
border-radius: $thickness/2; 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%; 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 * PROGRESS BAR