浏览代码

invert colors of controls based on current background

Hakim El Hattab 9 年之前
父节点
当前提交
69c72b9e08
共有 2 个文件被更改,包括 23 次插入5 次删除
  1. 11 3
      css/reveal.css
  2. 12 2
      css/reveal.scss

+ 11 - 3
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
  *********************************************/

+ 12 - 2
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