Clean and refactor styles.

src/_h5ai/client/css/inc/ext/crumb.less

@@ -21,8 +21,8 @@
         }
     }
     .crumb {
+        .eased-transition;
         display: inline-block;
-        transition: all 0.2s ease-in-out;
     }
     .sep {
         width: 24px;

src/_h5ai/client/css/inc/ext/preview.less

@@ -45,13 +45,13 @@
     cursor: pointer;
 
     img {
+        .eased-transition;
         display: block;
         width: 48px;
         height: 48px;
         margin: -36px 0;
         padding: 12px;
         opacity: 0.5;
-        transition: all 0.2s ease-in-out;
     }
 
     &:hover {
@@ -93,21 +93,21 @@
     }
 
     .bar-label {
+        .eased-transition;
         display: block;
         color: @col-text-primary-white;
         height: 48px;
         line-height: 48px;
         padding: 0 12px;
         opacity: 0.7;
-        transition: all 0.2s ease-in-out;
     }
 
     .bar-button {
+        .eased-transition;
         display: block;
         line-height: 48px;
         opacity: 0.7;
         cursor: pointer;
-        transition: all 0.2s ease-in-out;
 
         &:hover {
             opacity: 1.0;

src/_h5ai/client/css/inc/ext/tree.less

@@ -37,9 +37,9 @@
         cursor: pointer;
 
         img {
+            .eased-transition;
             width: 20px;
             height: 20px;
-            transition: all 0.2s ease-in-out;
         }
         &.open {
             img {

src/_h5ai/client/css/inc/main/info.less

@@ -19,12 +19,12 @@
     }
 
     #header a {
+        .eased-transition;
         font-size: 4em;
         font-weight: 300;
         margin: 0.8em 0 0 0;
         color: @col-text-primary-black;
         text-decoration: none;
-        transition: all 0.2s ease-in-out;
 
         &:hover {
             color: @col-text-hover;

src/_h5ai/client/css/inc/mixins.less

@@ -14,13 +14,22 @@
     border-radius: 2px;
 }
 
+.clear-appearance {
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -webkit-appearance: none;
+}
+
+.eased-transition {
+    transition: all 0.2s ease-in-out;
+}
+
 .el-button {
     .card;
     .rounded;
-    transition: all 0.2s ease-in-out;
+    .eased-transition;
     color: @col-text-primary-white;
     background: @col-blue-400;
-    border-radius: 2px;
     cursor: pointer;
     text-decoration: none;
 
@@ -32,9 +41,7 @@
 .el-input {
     .card;
     .rounded;
-    -moz-appearance: none;
+    .clear-appearance;
-    -ms-appearance: none;
-    -webkit-appearance: none;
     font-family: @font-family;
     font-weight: @font-weight;
     color: @col-text-primary-black;

src/_h5ai/client/css/inc/view/fallback.less

@@ -71,11 +71,11 @@
     box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
 
     a, a:active, a:visited {
+        .eased-transition;
         display: inline-block;
         line-height: 48px;
         color: @col-text-secondary-black;
         text-decoration: none;
-        transition: all 0.2s ease-in-out;
         outline: 0;
 
         &:hover {

src/_h5ai/client/css/inc/view/sidebar.less

@@ -19,12 +19,12 @@
     }
 
     .button {
+        .rounded;
+        .eased-transition;
         display: inline-block;
         margin: 4px;
-        border-radius: 2px;
         color: @col-text;
         cursor: pointer;
-        transition: all 0.2s ease-in-out;
 
         &:hover {
             background: @col-back-hover;
@@ -43,9 +43,9 @@
     }
 
     .select {
+        .rounded;
         background: transparent;
         overflow: hidden;
-        border-radius: 2px;
         outline: 0;
         width: 160px;
         margin: 4px;
@@ -53,9 +53,7 @@
     }
 
     input, select {
-        -moz-appearance: none;
+        .clear-appearance;
-        -ms-appearance: none;
-        -webkit-appearance: none;
         font-family: @font-family;
         font-size: @font-size;
         font-weight: @font-weight;
@@ -79,7 +77,7 @@
     }
 
     input[type='range'] {
-        border-radius: 2px;
+        .rounded;
         width: 144px;
         margin: 4px;
         padding: 8px;
@@ -88,20 +86,16 @@
         line-height: 32px;
     }
 
-    .range-track() {
+    .range-track {
-        -moz-appearance: none;
+        .clear-appearance;
-        -ms-appearance: none;
-        -webkit-appearance: none;
         border-width: 0;
         border-radius: 20px;
         background: @col-range-back;
         height: 6px;
     }
 
-    .range-thumb() {
+    .range-thumb {
-        -moz-appearance: none;
+        .clear-appearance;
-        -ms-appearance: none;
-        -webkit-appearance: none;
         border-width: 0;
         border-radius: 20px;
         background: @col-range-thumb;

src/_h5ai/client/css/inc/view/topbar.less

@@ -22,9 +22,9 @@
     height: 48px;
 
     .tool {
+        .eased-transition;
         display: inline-block;
         cursor: pointer;
-        transition: all 0.2s ease-in-out;
 
         img {
             display: inline-block;
@@ -47,6 +47,7 @@
 }
 
 #backlink {
+    .eased-transition;
     display: block;
     overflow: hidden;
     flex: 0 0 auto;
@@ -55,7 +56,6 @@
     padding: 6px 12px;
     overflow: hidden;
     height: 36px;
-    transition: all 0.2s ease-in-out;
 
     &, &:active, &:visited {
         color: @col-text-disabled-black;

src/_h5ai/client/css/inc/view/view-details.less

@@ -39,10 +39,10 @@
         border-radius: 2px 2px 0 0;
 
         .label, .date, .size {
+            .eased-transition;
             line-height: 46px;
             opacity: 0.4;
             outline: 0;
-            transition: all 0.2s ease-in-out;
 
             &:hover {
                 opacity: 1;