Quality size styling

NzbDrone.Backbone/Content/bootstrap.slider.css

@@ -92,12 +92,12 @@
 }
 .slider-selection {
   position: absolute;
-  background-color: #f7f7f7;
+  background-color: #bababa;
-  background-image: -moz-linear-gradient(top, #f9f9f9, #f5f5f5);
+  background-image: -moz-linear-gradient(top, #f9f9f9, #bababa);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f5f5f5));
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#bababa));
-  background-image: -webkit-linear-gradient(top, #f9f9f9, #f5f5f5);
+  background-image: -webkit-linear-gradient(top, #f9f9f9, #bababa);
-  background-image: -o-linear-gradient(top, #f9f9f9, #f5f5f5);
+  background-image: -o-linear-gradient(top, #f9f9f9, #bababa);
-  background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
+  background-image: linear-gradient(to bottom, #f9f9f9, #bababa);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
@@ -114,7 +114,7 @@
   position: absolute;
   width: 20px;
   height: 20px;
-  background-color: #0e90d2;
+  background-color: #3a87ad;
   background-image: -moz-linear-gradient(top, #149bdf, #0480be);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
   background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
@@ -125,7 +125,7 @@
   -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
   -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-  opacity: 0.8;
+  /*opacity: 0.8;*/
   border: 0px solid transparent;
 }
 .slider-handle.round {

NzbDrone.Backbone/Content/form.css

@@ -13,19 +13,3 @@
 .switch {
     float: left;
 }
-
-/*.control-group {*/
-    /*border: 1px solid red;*/
-/*}*/
-
-/*.control-label {*/
-    /*border: 1px solid yellow;*/
-/*}*/
-
-/*.switch {*/
-    /*border: 1px solid purple;*/
-/*}*/
-
-/*.help-inline, .help-checkbox {*/
-    /*border: 1px solid #2e8b57;*/
-/*}*/

NzbDrone.Backbone/Content/settings.quality.css

@@ -0,0 +1,3 @@
+.quality-size-item {
+    padding-left: 10px;
+}

NzbDrone.Backbone/Index.html

@@ -20,6 +20,7 @@
     <link href="/static/AddSeries/addseries.css" rel='stylesheet' type='text/css' />
     <link href="/static/content/menu.css" rel='stylesheet' type='text/css' />
     <link href="/static/content/form.css" rel='stylesheet' type='text/css' />
+    <link href="/static/content/settings.quality.css" rel='stylesheet' type='text/css' />
 </head>
 <script type="text/html" id="notification-template">
     <div class="alert alert-{{level}}">

NzbDrone.Backbone/Settings/Quality/QualitySizeTemplate.html

@@ -1,6 +1,5 @@
 <b>{{name}}</b>
-<div>
+<div class="quality-slider-container">
     <input type="text" class="span4 slider" />
-    <input type="hidden" class="slider-value" name="maxSize" />
 </div>
 30 minute size: <span name="thirtyMinuteSize" class="thirty-minute-size"></span>MB | 60 minute size: <span name="sixtyMinuteSize" class="sixty-minute-size"></span>MB

NzbDrone.Backbone/Settings/Quality/QualitySizeView.js

@@ -8,6 +8,7 @@ define([
 
     NzbDrone.Settings.Quality.QualitySizeView = Backbone.Marionette.ItemView.extend({
         template: 'Settings/Quality/QualitySizeTemplate',
+        className: 'quality-size-item',
 
         ui: {
             slider: '.slider',