Inspector visual review changes

lib/views/juju-inspector.less

 @inspector-background-color: #221e1c;
-@inspector-region-background-color: #282828;
+@inspector-controls-height: 67px;
 @inspector-divider-bottom: rgba(0, 0, 0, 0.3);
 @inspector-divider-top: rgba(255, 255, 255, 0.05);
 @inspector-status-border-color: #E2E2E2;
 @inspector-subtitle-color: #555555;
 @inspector-width: 292px;
+@inspector-main-padding: 20px;
 @confirm-button-color: #DD4814;
 @deny-button-color: #BBB;
 @disabled-input-background-color: #727272;
 @disabled-input-text-color: #252525;
 
 .yui3-juju-inspector {
     input[type=text]::-ms-clear { display: none; }
 
     .customize-scrollbar;
 
@@ skipping 87 matching lines @@
                         text-align: left;
                         padding-top: 0;
                         padding-bottom: 15px;
                     }
                 }
             }
         }
     }
 
     .juju-inspector {
-        .create-border-radius(@border-radius);
+        .create-border-radius(2px);
         position: absolute;
         top: 20px;
         right: 70px;
         width: @inspector-width;
         min-height: 250px;
         border: 0;
         background-color: @inspector-background-color;
         color: #fff;
         /* Can be removed once the old inspector styles are removed. */
         margin: 0;
+        font-size: 14px;
 
         h1, h2, h3, h4, h5, h6 {
-            background-color: @inspector-region-background-color;
             padding-left: 1em;
         }
-
+        hr {
+            border-width: 1px 0;
+            border-style: solid;
+            border-top-color: @inspector-divider-bottom;
+            border-bottom-color: @inspector-divider-top;
+        }
         input[type=checkbox].hidden-checkbox {
             display: none;
         }
-
+        input[type=text] {
+            min-height: 20px;
+            font-size: 14px;
+        }
+        .text-in-input {
+            display: block;
+            margin: -24px 10px 0 0;
+            color: #b5b5b5;
+            text-align: right;
+        }
+        .config-field.boolean {
+            margin-right: 10px;
+        }
         .toggle {
             font-size: 12px;
 
             span {
                 display: inline-block;
                 vertical-align: top;
                 line-height: 30px;
             }
             .toggle-switch {
                 display: inline-block;
                 vertical-align: top;
                 float: right;
 
                 label {
                     height: 26px;
                     width: 50px;
-                    background-color: @inspector-background-color;
+                    background-color: #282828;
                     .create-border-radius(@border-radius);
                     display: block;
                     position: relative;
                     margin: 0;
 
-                    &.light {
-                        background-color: @inspector-region-background-color;
-                    }
                     .handle {
                         height: 18px;
                         width: 18px;
                         background-color: @deny-button-color;
                         .create-border-radius(@border-radius);
                         position: absolute;
                         margin: 4px;
                         cursor: pointer;
                         text-align: center;
                         left: 0;
@@ skipping 11 matching lines @@
                 }
                 input.hidden-checkbox:checked ~ label .handle {
                     left: 25px;
                     background-color: @confirm-button-color;
                 }
                 input.hidden-checkbox:checked ~ label .handle:before {
                     content: '\2713';
                 }
             }
         }
-
         .controls {
+            margin-top: 20px;
+            border-top: 1px solid @inspector-divider-top;
+            border-bottom: 1px solid @inspector-divider-bottom;
 
             button {
                 .create-border-radius(@border-radius);
-                width: 130px;
-                height: 25px;
-                margin: 10px 0;
+                width: 120px;
+                height: 30px;
+                margin: 20px 0;
                 border: none;
-                color: white;
-                font-weight: bold;
+                color: #fff;
 
                 &.cancel {
                     background-color: #A3A3A3;
-                    margin-left: 10px;
+                    margin-left: @inspector-main-padding;
                 }
 
                 &.confirm {
                     background-color: @confirm-button-color;
                     float: right;
-                    margin-right: 10px;
+                    margin-right: @inspector-main-padding;
                     &:disabled {
                         background-color: #802E0E;
                         color: #eee;
                     }
                 }
             }
         }
 
         .unit-scaling {
             width: 255px;
 
             .current-unit-num-wrapper {
                 width: 95px;
-                background-color: @inspector-region-background-color;
                 height: 30px;
                 .create-border-radius(@border-radius);
                 line-height: 30px;
                 padding-left: 10px;
                 position: relative;
             }
             .units-starting-spinner {
                 position: absolute;
                 right: 10px;
             }
             input.num-units-control {
-                width: 107px;
+                width: 87px;
+                margin: 0 0 0 10px;
+                padding-left: 10px;
+                font-size: 14px;
             }
             span {
                 padding: 0 10px;
                 line-height: 30px;
             }
             .constraint-details {
                 font-size: 11px;
             }
             a.edit-constraints {
                 padding-left: 10px;
                 cursor: pointer;
             }
             .editable-constraints {
                 padding-left: 10px;
             }
             .unit-constraints-confirm {
                 overflow: hidden;
                 height: 130px;
                 letter-spacing: normal;
-                background-color: @inspector-region-background-color;
                 -moz-transition: .3s, height .3s;
                 -webkit-transition: .25s, height .3s;
                 transition: .3s, height .3s;
 
                 .constraint-details {
                     display: block;
                 }
                 .inspector-buttons {
                     padding-bottom: 10px;
 
@@ skipping 14 matching lines @@
         .settings-wrapper {
             .border-box;
             position: relative;
             width: 100%;
 
             & > div {
                 padding-right: 10px;
             }
             label {
                 font-size: 14px;
-                margin: 14px 0 7px 0;
+                margin: 20px 0 10px 0;
                 font-weight: bold;
             }
             textarea {
                 width: 100%;
             }
             input[type=text] {
                 width: 150px;
             }
+            .constraint-label {
+                margin: -25px 95px 0 0;
+            }
             .settings-description {
                 font-size: 12px;
 
                 /* below hyphenation code was taken from:
                 http://www.newnet-soft.com/blog/csstypography */
                 -ms-word-break: break-all;
                 word-break: break-all;
 
                 // Non standard for webkit
                 word-break: break-word;
 
                 -webkit-hyphens: auto;
                 -moz-hyphens: auto;
                 hyphens: auto;
 
                 -webkit-hyphenate-before: 2;
                 -webkit-hyphenate-after: 3;
                 hyphenate-lines: 3;
             }
        }
 
         .config-file {
-            padding: 10px 5px 10px 5px;
+            padding: 10px @inspector-main-padding;
 
             input {
                 position: absolute;
                 top: 0;
                 left: 0;
                 visibility: hidden;
                 z-index: 0;
             }
 
             .fakebutton {
@@ skipping 13 matching lines @@
             input[type=text] {
                 /* Fixes the bottom of the service name getting cutoff (IE10) */
                 height: auto;
             }
             .header-slot {
                 header {
                     margin-bottom: 0;
                     border-bottom: none;
                 }
             }
+            .controls {
+                margin-top: 0;
+            }
+            .config-file {
+                padding-right: 0;
+                padding-left: 0;
+            }
             .ghost-config-header {
-                font-size: 17px;
                 height: 35px;
+                border-top: 1px solid @inspector-divider-top;
+                font-size: 16px;
                 line-height: 35px;
-                padding-left: 35px;
+                padding-left: @inspector-main-padding;
             }
             .ghost-config-content {
-                padding: 15px 10px;
-                background-color: @inspector-region-background-color;
+                padding: @inspector-main-padding;
+                border-bottom: 1px solid @inspector-divider-bottom;
 
                 input[name=number-units] {
+                    .border-box;
                     display: inline-block;
-                    width: 120px;
+                    width: 100%;
                     margin-bottom: 0;
+                    padding-left: 10px;
                 }
-                label[for=number-units] {
-                    display: inline-block;
-                    margin-left: 25px;
-                    vertical-align: middle;
+                .constraint-label {
+                    margin-top: -34px;
                 }
                 &.use-defaults {
-                    textarea {
-                        background-color: @disabled-input-background-color;
-                        border-color: @inspector-background-color;
-                        cursor: not-allowed;
-                        color: @disabled-input-text-color;
-                    }
+                    textarea,
                     input[type=text] {
                         background-color: @disabled-input-background-color;
                         border-color: @inspector-background-color;
                         cursor: not-allowed;
                         color: @disabled-input-text-color;
                     }
                     .fakebutton {
                         color: @disabled-input-background-color;
                         border-color: @disabled-input-background-color;
                         cursor: default;
                     }
                 }
             }
+            .destroy-service-trigger {
+                padding-top: 10px;
+            }
         }
 
         /* Resetting panel styles. Can be removed after old inspector styles are
            removed. (ServiceInspector) */
         .charm-panel-configure {
             background: transparent;
             float: none;
             border: 0;
             height: auto;
             width: auto;
@@ skipping 45 matching lines @@
                calculated height */
             max-height: 250px;
         }
 
         .content {
             margin: 1em;
         }
 
         .header-slot {
             header {
-                background-color: @inspector-region-background-color;
-                border-bottom: 1px solid #1C1817;
-                padding: 15px;
-                margin-bottom: 6px;
+                padding: @inspector-main-padding;
 
                 .service-charm {
                     color: @charm-panel-background-color;
                     width: 100%;
 
                     .service-name {
                         font-size: 20px;
                         font-weight: 300;
                         line-height: 1.2;
                     }
+                    span.service-name {
+                        display: inline-block;
+                        margin-top: -0.1em;
+                    }
                     input.service-name {
-                        width: 125px;
+                        width: 170px;
+                        height: 20px;
+                        font-size: 14px;
                     }
                     .icon {
-                        width: 64px;
-                        height: 64px;
-                        margin-right: 1em;
+                        margin-right: 10px;
+                        vertical-align: top;
 
                         img {
                             /* bootstrap sets this to middle */
                             vertical-align: baseline;
-                            /* Required for sizing images in IE10 */
-                            width: 64px;
-                            height: 64px;
                         }
                     }
+                    .icon,
+                    .icon img {
+                        /* Required for sizing images in IE10 */
+                        width: 30px;
+                        height: 30px;
+····················
+                    }
                     .details-wrapper {
-                        width: 135px;
+                        width: 180px;
                         overflow: hidden;
                         white-space: nowrap;
                         text-overflow: ellipsis;
                     }
                     .charm-url {
                         font-size: 14px;
                         font-weight: 400;
                         line-height: 1.3;
                         cursor: pointer;
                         text-decoration: underline;
                     }
                     .close {
                         /* required to overwrite bootstrap styles */
                         text-shadow: none;
-                        color: #cbcbcb;
-                        font-weight: normal;
+                        color: #a0a0a0;
+                        font-weight: 200;
                         opacity: 1;
-                        font-size: 30px;
+                        font-size: 17px;
+                        line-height: 17px;
                         /* not overwriting */
                         vertical-align: top;
+                        margin-top: -6px;
                     }
                     div {
                         display: inline-block;
                     }
                 }
             }
         }
 
         .viewlet-manager-navigation {
+            min-height: 9px;
             margin: 0;
-            padding-left: 65px;
-            background-color: @inspector-region-background-color;
+            padding-left: @inspector-main-padding;
+            background-color: #1c1817;
+            border-top: 1px solid #12110f;
 
             li {
                 display: inline-block;
-                margin-right: 40px;
 
                 &:last-child {
                     margin-right: 0;
                 }
                 a {
                     .border-box;
                     display: block;
                     height: 50px;
-                    padding-top: 13px;
+                    padding: 13px 20px 0 20px;
 
                     &:hover {
                         text-decoration: none;
                     }
                     &.active {
-                        border-bottom: 2px solid @charm-panel-orange;
+                        background-color: #12110f;
+                        border-bottom: 3px solid @charm-panel-orange;
 
                         .normal {
                             display: none;
                         }
                         .selected {
                             display: inline-block;
                         }
                     }
                     .selected {
                         display: none;
@@ skipping 22 matching lines @@
             left: 0;
             right: 0;
             background-color: @inspector-background-color;
         }
 
         .view-container {
             border-top: 1px solid @inspector-divider-top;
             overflow: auto;
 
             &.settings-config {
-                margin-bottom: 45px;
+                margin-bottom: @inspector-controls-height + 20px;
             }
             h2 {
                 font-size: 18px;
                 padding-left: 0;
             }
             .settings-wrapper {
                 position: relative;
-                padding: 0 10px;
+                padding: 0 @inspector-main-padding;
 
                 label {
                     font-size: 14px;
-                    margin: 14px 0 7px 0;
+                    margin: 20px 0 10px 0;
                     font-weight: bold;
                 }
                 .settings-description {
                     font-size: 12px;
                 }
                 .config-field,
                 .constraint-field {
                   -webkit-transition: background 1s linear;
                   -moz-transition: background 1s linear;
                   -o-transition: background 1s linear;
                   transition: background 1s linear;
                   background-repeat: no-repeat;
                   background-position: right center;
                   background-url: none;
                   margin-bottom: 0px;
-                  min-height: 26px;
+                  min-height: 20px;
+                }
+                .config-field {
                   width: 100%;
 
                   &.boolean {
                     width: auto;
                   }
                 }
                 .resolver {
                   color: black;
                   background-color: white;
                   border: 1px solid #dedede;
                   border-radius: 1px;
+
                   div {
                     width: 270px;
                   }
                 }
                 .modified {
                   background-color: #dedede;
                   background-image: url(/juju-ui/assets/images/field-changed.png);
                 }
                 .conflict-pending {
                   background-color: #dedede;
                   background-image: url(/juju-ui/assets/images/field-conflict.png);
                 }
                 .conflict {
                   background-color: #dedede;
                   background-image: url(/juju-ui/assets/images/field-resolved.png);
                  }
             }
             .toggle {
-                padding: 10px;
+                padding: 10px @inspector-main-padding;
 
                 label {
                    margin: 0;
                 }
             }
-
         }
-
-
         .status {
             display: inline-block;
             width: 33%;
             text-align: center;
+
             &.running {
                 background-color: #00b711;
             }
             &.pending {
                 background-color: #ede837;
             }
             &.error {
                 background-color: #ba0000;
             }
         }
-        .destroy-service-trigger{
-            padding-left: 10px;
-            height: 20px;
+        .destroy-service-trigger {
+            padding-left: @inspector-main-padding;
+            padding: 20px;
+            border-top: 1px solid @inspector-divider-top;
 
             span {
-                font-size: 11px;
-                font-weight: bold;
                 cursor: pointer;
             }
         }
 
         .destroy-service-prompt {
             overflow: hidden;
             height: 95px;
-            background-color: @inspector-region-background-color;
             -moz-transition: .3s, height .3s;
             -webkit-transition: .25s, height .3s;
             transition: .3s, height .3s;
             position: absolute;
             bottom: 0;
 
             .message {
                 margin: 5px 15px;
             }
         }
 
         .destroy-service-prompt.closed {
             height: 0;
         }
-
-
-
         .viewlet-wrapper{
             h3, h2, legend {
+                .border-box;
                 border-bottom: 1px solid @inspector-divider-bottom;
                 border-top: 1px solid @inspector-divider-top;
                 font-size: 14px;
                 font-weight: 400;
                 line-height: 1.5;
-                padding: 10px 20px;
+                padding: 10px @inspector-main-padding;
                 color: @charm-panel-configure-title-color;
                 margin-bottom: 0;
+            }
+            h3,
+            h2 {
                 width: auto;
             }
 
             .content {
                 border-bottom: 1px solid @inspector-divider-bottom;
                 border-top: 1px solid @inspector-divider-top;
                 margin: 0;
-                padding: 10px;
+                padding: @inspector-main-padding;
             }
         }
 
         .overview-unit-list {
             margin: 0;
 
             .action-button-wrapper {
                 height: 50px;
                 text-align: center;
             }
 
             .status-unit-header {
-                background-color: @inspector-region-background-color;
                 padding: 15px 15px 15px 40px;
                 font-size: 14px;
                 cursor: pointer;
                 border-bottom: 1px solid @inspector-divider-bottom;
                 border-top: 1px solid @inspector-divider-top;
                 background-position: 20px center;
                 background-repeat: no-repeat;
+
                 span {
                     margin-right: 5px;
                 }
 
                 ul {
                     background: white;
                 }
 
                 .chevron {
                     display: inline-block;
@@ skipping 115 matching lines @@
             }
             .status-unit-content.landscape-security-upgrades ul li,
             .status-unit-content.landscape-needs-reboot ul li {
                 background: url("/juju-ui/assets/images/inspector-charm-landscape.png") no-repeat scroll 35px center;
             }
         }
 
     }
 
 }