extract more constants into less variables

customize.dist/src/less/bar.less

@@ -30,18 +30,18 @@
     }
 
     .big {
-        @media screen and (max-width: 800px) {
+        @media screen and (max-width: @media-not-big) {
             display: none;
         }
-        @media screen and (min-width: 801px) {
+        @media screen and (min-width: @media-not-small) {
             display: inline-block;
         }
     }
     .small {
-        @media screen and (max-width: 800px) {
+        @media screen and (max-width: @media-not-big) {
             display: inline-block;
         }
-        @media screen and (min-width: 801px) {
+        @media screen and (min-width: @media-not-small) {
             display: none;
         }
         img {

customize.dist/src/less/loading.less

@@ -15,7 +15,7 @@
     .cryptofist {
         margin-left: auto;
         margin-right: auto;
-        @media screen and (max-height: 450px) {
+        @media screen and (max-height: @media-short-screen) {
             display: none;
         }
     }

customize.dist/src/less/mixins.less

@@ -27,3 +27,10 @@
     line-height: @n * 1.1vw;
 }
 
+.two-part-gradient (@start, @end) {
+    background: -webkit-linear-gradient(@start, @end); /* For Safari 5.1 to 6.0 */
+    background: -o-linear-gradient(@start, @end); /* For Opera 11.1 to 12.0 */
+    background: -moz-linear-gradient(@start, @end); /* For Firefox 3.6 to 15 */
+    background: linear-gradient(@start, @end); /* Standard syntax */
+}
+

customize.dist/src/less/toolbar.less

@@ -1,4 +1,5 @@
 @import "./variables.less";
+@import "./mixins.less";
 
 .unselectable {
     -webkit-touch-callout: none;
@@ -11,10 +12,7 @@
 
 .toolbar-container {
     font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
-    background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */
+    .two-part-gradient(@toolbar-gradient-start, @toolbar-gradient-end);
-    background: -o-linear-gradient(#f5f5f5, #DDDDDD); /* For Opera 11.1 to 12.0 */
-    background: -moz-linear-gradient(#f5f5f5, #DDDDDD); /* For Firefox 3.6 to 15 */
-    background: linear-gradient(#f5f5f5, #DDDDDD); /* Standard syntax */
     .cryptpad-toolbar {
         select {
             box-sizing: border-box;
@@ -137,7 +135,7 @@
     text-align: center;
     height: 32px;
     position: relative;
-    @media screen and (max-width: 400px) {
+    @media screen and (max-width: @media-narrow-screen) {
         height: 67px;
     }
     .cryptpad-title {
@@ -192,10 +190,10 @@
         position: absolute;
         left: 0px;
         height: 32px;
-        @media screen and (max-width: 400px) {
+        @media screen and (max-width: (@media-short-screen - 1px)) {
             top: 35px;
         }
-        @media screen and (min-width: 401px) {
+        @media screen and (min-width: @media-short-screen) {
             top: 0px;
         }
 
@@ -223,18 +221,18 @@
             }
         }
         .big {
-            @media screen and (max-width: 400px) {
+            @media screen and (max-width: @media-narrow-screen) {
                 display: none;
             }
-            @media screen and (min-width: 401px) {
+            @media screen and (min-width: (@media-narrow-screen + 1px)) {
                 display: inline-block;
             }
         }
         .small {
-            @media screen and (max-width: 400px) {
+            @media screen and (max-width: @media-narrow-screen) {
                 display: inline-block;
             }
-            @media screen and (min-width: 401px) {
+            @media screen and (min-width: (@media-narrow-screen + 1px)) {
                 display: none;
             }
         }
@@ -245,10 +243,10 @@
         span:not(.cryptpad-lag) {
             vertical-align: top;
         }
-        @media screen and (max-width: 400px) {
+        @media screen and (max-width: @media-narrow-screen) {
             top: 3em;
         }
-        @media screen and (min-width: 401px) {
+        @media screen and (min-width: (@media-narrow-screen + 1px)) {
             top: 0px;
         }
     }
@@ -310,10 +308,8 @@
 }
 .cryptpad-toolbar-rightside {
     text-align: right;
-    //float: right;
 }
 .cryptpad-spinner {
-    //float: left;
     display: inline-block;
     height: 26px;
     margin: 2px;

customize.dist/src/less/variables.less

@@ -41,3 +41,13 @@
 @alertify-input-fg: @fore;
 
 @bg-loading: @base;
+
+@media-not-big: 800px;
+@media-not-small: 801px;
+
+@media-short-screen: 450px;
+@media-narrow-screen: 400px;
+
+@toolbar-gradient-start: #f5f5f5;
+@toolbar-gradient-end: #DDDDDD;
+

customize.dist/toolbar.css

@@ -8,7 +8,7 @@
 }
 .toolbar-container {
   font: 12px Arial, Helvetica, Tahoma, Verdana, sans-serif;
-  background: -webkit-linear-gradient(#EEEEEE, #DADADA);
+  background: -webkit-linear-gradient(#f5f5f5, #DDDDDD);
   /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(#f5f5f5, #DDDDDD);
   /* For Opera 11.1 to 12.0 */
@@ -190,12 +190,12 @@
   left: 0px;
   height: 32px;
 }
-@media screen and (max-width: 400px) {
+@media screen and (max-width: 449px) {
   .cryptpad-toolbar-top .cryptpad-link {
     top: 35px;
   }
 }
-@media screen and (min-width: 401px) {
+@media screen and (min-width: 450px) {
   .cryptpad-toolbar-top .cryptpad-link {
     top: 0px;
   }