Move adv search sliders inside slider containers. Tweak colors for accessibilty.

themes/bootstrap3/less/bootstrap.less

@@ -16,7 +16,6 @@
     max-width:400px;
   }
 }
-.group [class^=col-] {padding-left:0}
 .has-error {margin-bottom:0;}
 .help-block.with-errors {
   padding:@padding-base-vertical 0;
@@ -48,6 +47,29 @@ label.list-group-item {border-radius:0;font-weight:normal;margin-top:0;padding-l
 }
 .tab-content {padding:4px}
 
+/* --- Advanced Search --- */
+.group {
+  background: @gray-lighter;
+  border-radius: @border-radius-base;
+  border: 1px solid darken(@gray-lighter, 15%);
+  margin: 0 0 6px;
+  padding: 10px 10px 10px 25px;
+  .add_search_link {
+    display: inline-block;
+    margin-top: 4px;
+  }
+  [class^=col-] {
+    padding-left: 0;
+  }
+  .search {
+    margin-bottom:2px;
+  }
+}
+#groupPlaceHolder {
+  display:block;
+  padding:6px;
+}
+
 /* --- Alphabrowse --- */
 .alphabrowse {
   border-collapse:separate;
@@ -277,32 +299,33 @@ label.list-group-item {border-radius:0;font-weight:normal;margin-top:0;padding-l
 
 /* --- Slider accessibility --- */
 .slider-container {
-  padding:4px 0;
+  padding:4px 10px;
   text-align:center;
-  .slider {
-    .slider-track {
-      background:@gray-light;
-      box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.4);
-      .slider-handle {
-        background:@brand-primary;
-        background-image:none;
-        border:1px solid @brand-primary;
-        box-shadow:none;
-        opacity:.9;
-        &:hover,&:active,&:focus {
-          opacity:1;
-          background:#FFF;
-          border-color:@gray-light;
-        }
-        &:active,&:focus {
-          border-color:@brand-primary;
-        }
-      }
-      .slider-selection {
-        background:@gray-lighter;
-        box-shadow:inset 0 -1px 0 rgba(0,0,0,0.3);
-      }
+  .slider.slider-horizontal {
+    width: 100%;
+  }
+  .slider-track {
+  background:@gray-light;
+  box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.4);
+  }
+  .slider-handle {
+    background:@brand-primary;
+    background-image:none;
+    border:1px solid @brand-primary;
+    box-shadow:none;
+    opacity:.9;
+    &:hover,&:active,&:focus {
+      opacity:1;
+      background:#FFF;
+      border-color:@gray-light;
     }
+    &:active,&:focus {
+      border-color:@brand-primary;
+    }
+  }
+  .slider-selection {
+    background: #CCC;
+    box-shadow:inset 0 -1px 0 rgba(0,0,0,0.3);
   }
 }
 

themes/bootstrap3/templates/search/advanced/ranges.phtml

@@ -16,9 +16,9 @@
         </div>
       </div>
       <? if ($current['type'] == 'date'): ?>
-        <input type="text" id="<?=$escField?><?=$this->escapeHtmlAttr($current['type'])?>Slider">
-      <? endif; ?>
-      <? if ($current['type'] == 'date'): ?>
+        <div class="slider-container">
+          <input type="text" id="<?=$escField?><?=$this->escapeHtmlAttr($current['type'])?>Slider">
+        </div>
         <?
           $this->headScript()->appendFile('vendor/bootstrap-slider.js');
           $min = !empty($current['values'][0]) ? min($current['values'][0], 1400) : 1400;