Improve opacity slider (#215)

- adopt horizontal styles
- common font size for layers tab
- adopt to layer switcher layout with slider as child of label element
- separate slider wrapper from control, as overlay slider is none
- migrate localStorage legacy key

css/style.css

@@ -236,22 +236,34 @@ https://css-tricks.com/svg-line-animation-works/
 .control-slider {
     background: #fff;
     border-radius: 10px;
-    padding-top: 10px;
-    padding-bottom: 10px;
+}
+
+.slider#overlay {
+    display: block;
 }
 
 .slider.slider-vertical {
     height: 80px;
+    margin: 10px 0;
+}
+.slider.slider-horizontal {
+    width: 180px;
+    margin: 0 10px;
 }
 
 /* invert track and selection styles to get partial gradient for "selection" */
-.slider .slider-track {
+.slider.slider-vertical .slider-track {
     width: 8px;
     margin-left: 1px;
     background-image: linear-gradient(to right, #f0f0f0 0%, #e9e9e9 100%);
     box-shadow: inset -1px -0px 1px rgba(55, 55, 55, 0.3),
         inset 1px 0px 1px rgba(230, 230, 230, 1);
 }
+.slider.slider-horizontal .slider-track {
+    background-image: linear-gradient(to bottom, #f0f0f0 0%, #e9e9e9 100%);
+    box-shadow: inset -0px -1px 1px rgba(55, 55, 55, 0.3),
+        inset 0px 1px 1px rgba(230, 230, 230, 1);
+}
 
 .control-slider:hover #route .slider-track,
 .control-slider:active #route .slider-track {
@@ -319,10 +331,6 @@ button.btn {
     line-height: 30px;
 }
 
-#leaflet-control-layers-overlays-opacity-slider .leaflet-bar {
-    box-shadow: none;
-}
-
 /* smaller tab height */
 .nav > li > a {
     padding: 2px 15px;
@@ -431,8 +439,7 @@ table.dataTable.display tbody tr.even:hover {
 }
 
 /* layers control as sidebar tab */
-#layers-control-wrapper label,
-#optional-layers-tree {
+#tab_layers_control {
     font-size: 0.9rem;
     line-height: normal;
 }