-moz vendor compatible

src/stylesheets/Lungo.theme.default.less

@@ -17,17 +17,19 @@
     @theme-highlight: #93d6e7;
         @theme-highlight-color: #1b6777;
         @theme-highlight-text-shadow: 0 1px 0 rgba(255,255,255,0.2);
-    @theme-secondary: #2c2c2d;
-        @theme-secondary-dark: #1c1c1c;
 
 @border-radius-section: 5px;
 
 @color-border: #2566a4;
-@color-border-light: #64b9e2;
+    @color-border-light: #64b9e2;
+
+@color-main: #2c8bca;
+    @color-main-dark: #154f93;
+
+@color-secondary: #353b42;
+    @color-secondary-dark: #272a2d;
 
-@background-main: #2c8bca -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c8bca), color-stop(100%,#154f93));
 @background-secondary: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(100%, #272a2d));
-    @background-secondary-footer: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(50%, #272a2d));
 
 .app {
     background: @black;
@@ -36,12 +38,11 @@
 
 /* @group <header> & <footer> & <article> */
 header {
+    position: absolute;
+    .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
+    .box-shadow(~"inset 0 1px 0 "@color-border-light~", inset 0 -1px 0 "@color-border);
     .border-radius(@border-radius-section @border-radius-section 0px 0px);
-
     border-bottom: 1px solid #1a2838;
-    background: @background-main;
-    .box-shadow(~"inset 0 1px 0 #64b9e2, inset 0 -1px 0 #2566a4");
-    position: absolute;
     z-index: 2;
     & .title {
         color: @white;
@@ -54,7 +55,7 @@ header {
 }
 
 footer {
-    background: @background-secondary-footer;
+    .linear-gradient(top, ~','@color-secondary 0%, ~','@color-secondary-dark 60%);
     border-top: 1px inset #2A2A2A;
     color: #353b42;
     .border-radius(0px 0px @border-radius-section @border-radius-section);
@@ -188,19 +189,18 @@ section.aside {
 
     & .anchor {
         color: @white;
-        background: @background-main;
+        .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
         border: none;
     }
 
     & .tip {
         color: #7a7a7a;
         &.theme {
-    color: #fff;
-            background: @background-main;
-
+            color: #fff;
+            .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
         }
         &.dark {
-            background: @background-secondary;
+            .linear-gradient(top, ~','@color-secondary 0%, ~','@color-secondary-dark 100%);
             color: #fff;
             text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
 
@@ -312,7 +312,8 @@ input[type="checkbox"] + span, input[type="radio"] + span {
 
     input[type="checkbox"]:checked + span,
     input[type="radio"]:checked + span {
-        background: @background-main;
+        .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
+
         .border-radius(@border-radius);
     }
 /* @end */
@@ -328,7 +329,7 @@ input[type="range"] {
 
     &:active {
         .box-shadow(none);
-        background: @background-main;
+        .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
     }
     &::-webkit-slider-thumb {
         //border: solid 7px rgba(255,255,255, 0.5);
@@ -356,7 +357,7 @@ input[type="range"] {
         .border-radius(@border-radius);
 
         & .value {
-            background: @background-main;
+            .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
             .border-radius(@border-radius);
 
             & .label {
@@ -379,11 +380,11 @@ input[type="range"] {
     color: #fff;
     .border-radius(7px);
     text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
-    border: solid 1px white;
+    border: solid 1px rgba(255,255,255,0.8);
 
-    &.count { background: @background-main; }
+    &.count { .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%); }
 }
     header .bubble.count {
-        background: @theme-secondary;
+        .linear-gradient(top, ~','@color-secondary 0%, ~','@color-secondary-dark 100%);
     }
 /* @end */