make css compatible with firefox and somewhat with IE too

asdwsda · Jan 20, 2016 · b44fce9 · b44fce9
1 parent af251ce
commit b44fce9
Showing 1 changed file with 67 additions and 5 deletions.
diff --git a/moodlamp/data/style.css b/moodlamp/data/style.css
@@ -1,6 +1,9 @@
 * {
     box-sizing: border-box;
 }
+.row {
+    height: 113px;
+}
 .row:after {
     content: "";
     clear: both;
@@ -26,7 +29,6 @@ h1.header {
     padding: 5px;
 }
 .box {
-    height: 170px;
     border: 1px solid #ddd;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
@@ -63,19 +65,79 @@ input.green[type=range]::-webkit-slider-runnable-track {
 input.blue[type=range]::-webkit-slider-runnable-track {
     background: #3333ee;
 }
-input[type=range]:disabled::-webkit-slider-thumb {
-    background: #7c7f83;
+input[type=range]::-moz-range-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    animate: 0.2s;
+    border: 1px solid #7c7f83;
+}
+input.red[type=range]::-moz-range-track {
+    background: #ee3333;
+}
+input.green[type=range]::-moz-range-track {
+    background: #33ee33;
+}
+input.blue[type=range]::-moz-range-track {
+    background: #3333ee;
+}
+input[type=range]::-ms-track {
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+    animate: 0.2s;
+    border: 1px solid #7c7f83;
+}
+input[type=range]::-ms-fill-lower,
+input[type=range]::-ms-fill-upper {
+    background: transparent;
+}
+input.red[type=range]::-ms-track {
+    background: #ee3333;
+}
+input.green[type=range]::-ms-track {
+    background: #33ee33;
+}
+input.blue[type=range]::-ms-track {
+    background: #3333ee;
 }
 input[type=range]::-webkit-slider-thumb {
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
     border: 1px solid #7c7f83;
     height: 20px;
     width: 15px;
-    background: #FFFFFF;
+    background: #ffffff;
     cursor: pointer;
     -webkit-appearance: none;
     margin-top: -8px;
 }
+input[type=range]::-moz-range-thumb {
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    border: 1px solid #7c7f83;
+    border-radius: 0;
+    height: 20px;
+    width: 15px;
+    background: #ffffff;
+    cursor: pointer;
+}
+input[type=range]::-ms-thumb {
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    border: 1px solid #7c7f83;
+    border-radius: 0;
+    height: 20px;
+    width: 15px;
+    background: #ffffff;
+    cursor: pointer;
+}
+input[type=range]:disabled::-webkit-slider-thumb {
+    background: #7c7f83;
+}
+input[type=range]:disabled::-moz-range-thumb {
+    background: #7c7f83;
+}
+input[type=range]:disabled::-ms-thumb {
+    background: #7c7f83;
+}
 table {
     table-layout: fixed;
     width: 100%;
@@ -105,7 +167,7 @@ button:hover {
 }
 table.rainbow {
     width: 100%;
-    height: 70%;
+    height:100%;
 }
 td.btnCell {
     height: 50%;