From f900ed8f6212bf36f9600385cb9afba74add7951 Mon Sep 17 00:00:00 2001
From: Samuel Georges <sam@daftspunk.com>
Date: Thu, 12 May 2016 04:33:01 +1000
Subject: [PATCH] Reshuffle the base color scheme again Restyle the component
 area in the CMS

---
 modules/backend/assets/css/october.css        | 13 +--
 .../assets/less/controls/sidenav-tree.less    | 23 +++--
 .../backend/assets/less/core/variables.less   |  8 +-
 .../assets/less/layout/fancylayout.less       |  2 +-
 .../backend/assets/less/layout/sidenav.less   |  1 -
 modules/backend/layouts/_sidenav.htm          |  2 +-
 modules/backend/models/BrandSettings.php      |  6 +-
 .../backend/models/brandsettings/custom.less  | 85 ++++++++++++-------
 .../backend/models/brandsettings/fields.yaml  |  4 +-
 .../widgets/table/assets/less/table.less      |  2 +-
 modules/cms/assets/css/october.components.css | 42 +++++----
 .../cms/assets/less/october.components.less   | 57 ++++++++-----
 .../components/partials/_formcomponents.htm   |  2 +-
 modules/system/assets/css/styles.css          |  8 +-
 modules/system/assets/ui/js/loader.stripe.js  | 28 ++++--
 modules/system/assets/ui/js/popup.js          |  9 ++
 modules/system/assets/ui/less/breadcrumb.less |  2 +-
 .../assets/ui/less/global.variables.less      |  6 +-
 modules/system/assets/ui/less/list.less       |  2 +-
 .../system/assets/ui/less/list.variables.less |  3 +-
 modules/system/assets/ui/less/loader.less     | 15 +---
 modules/system/assets/ui/less/popover.less    |  2 +-
 modules/system/assets/ui/less/popup.less      |  2 +-
 modules/system/assets/ui/storm-min.js         | 27 +++---
 modules/system/assets/ui/storm.css            | 68 +++++++--------
 modules/system/partials/_system_sidebar.htm   |  2 +-
 26 files changed, 249 insertions(+), 172 deletions(-)

diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css
index 8a8b77a3a..edf5bae35 100644
--- a/modules/backend/assets/css/october.css
+++ b/modules/backend/assets/css/october.css
@@ -141,11 +141,11 @@
 .control-simplelist.is-divided li .heading,.control-simplelist.is-selectable li .heading{font-size:14px;font-weight:bold}
 .control-simplelist.is-divided li:last-child,.control-simplelist.is-selectable li:last-child{border-bottom:none}
 .control-simplelist.is-selectable li a{padding:5px 10px;margin:-5px -10px;display:block;color:#333333}
-.control-simplelist.is-selectable li:hover{background:#4da7e8;cursor:pointer}
+.control-simplelist.is-selectable li:hover{background:#4ea5e0;cursor:pointer}
 .control-simplelist.is-selectable li:hover,.control-simplelist.is-selectable li:hover a{color:white}
 .control-simplelist.is-selectable li:hover a{text-decoration:none}
 .control-simplelist.is-selectable li.active a{background:#f0f0f0}
-.control-simplelist.is-selectable li.active a:hover{background:#4da7e8}
+.control-simplelist.is-selectable li.active a:hover{background:#4ea5e0}
 .list-preview .control-simplelist.is-selectable ul{margin-bottom:0}
 .drag-noselect{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
 .control-scrollbar{position:relative;overflow:hidden;height:100%;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}
@@ -267,14 +267,14 @@
 .control-treelist li > div.record{margin:0;font-size:12px;margin-bottom:5px;position:relative;display:block}
 .control-treelist li > div.record:before{color:#bdc3c7;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f111";font-size:6px;position:absolute;left:-18px;top:11px}
 .control-treelist li > div.record > a.move{display:inline-block;padding:7px 0 7px 10px;text-decoration:none;color:#bdc3c7}
-.control-treelist li > div.record > a.move:hover{color:#4da7e8}
+.control-treelist li > div.record > a.move:hover{color:#4ea5e0}
 .control-treelist li > div.record > a.move:before{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f0c9"}
 .control-treelist li > div.record > span{color:#666666;display:inline-block;padding:7px 15px 7px 5px}
 .control-treelist li.dragged{position:absolute;z-index:2000;width:auto !important;height:auto !important}
-.control-treelist li.dragged > div.record{opacity:0.5;filter:alpha(opacity=50);background:#4da7e8 !important}
+.control-treelist li.dragged > div.record{opacity:0.5;filter:alpha(opacity=50);background:#4ea5e0 !important}
 .control-treelist li.dragged > div.record > a.move:before,.control-treelist li.dragged > div.record > span{color:white}
 .control-treelist li.dragged > div.record:before{display:none}
-.control-treelist li.placeholder{display:inline-block;position:relative;background:#4da7e8 !important;height:25px;margin-bottom:5px}
+.control-treelist li.placeholder{display:inline-block;position:relative;background:#4ea5e0 !important;height:25px;margin-bottom:5px}
 .control-treelist li.placeholder:before{display:block;position:absolute;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f053";color:#d35714;left:-10px;top:8px;z-index:2000}
 .control-treeview{margin-bottom:40px; }
 .control-treeview ol{margin:0;padding:0;list-style:none;background:#ffffff}
@@ -428,7 +428,8 @@
 .sidenav-tree ul.top-level > li > ul li a span.header{color:#ffffff;font-size:15px;margin-bottom:5px}
 .sidenav-tree ul.top-level > li > ul li a span.description{color:rgba(255,255,255,0.6);font-size:13px}
 .sidenav-tree ul.top-level > li > ul li:hover a,.sidenav-tree ul.top-level > li > ul li.active a{opacity:1;filter:alpha(opacity=100)}
-.sidenav-tree ul.top-level > li > ul li.active a{color:rgba(255,255,255,0.91)}
+.sidenav-tree ul.top-level > li > ul li.active{border-left:5px solid #3498db}
+.sidenav-tree ul.top-level > li > ul li.active a{color:rgba(255,255,255,0.91);padding-right:20px}
 .sidenav-tree ul.top-level > li > ul li.active a span.header{color:#ffffff}
 .sidenav-tree ul.top-level > li > ul li.active a span.description{color:rgba(255,255,255,0.91)}
 .sidenav-tree ul.top-level > li > ul li:last-child a{border-bottom:none}
diff --git a/modules/backend/assets/less/controls/sidenav-tree.less b/modules/backend/assets/less/controls/sidenav-tree.less
index 62169731d..c5011f3c3 100644
--- a/modules/backend/assets/less/controls/sidenav-tree.less
+++ b/modules/backend/assets/less/controls/sidenav-tree.less
@@ -95,7 +95,7 @@
             // Use two triangles to achieve the darkening effect
             &:before,
             &:after {
-                .triangle(down, 15px, 8px, @brand-secondary);
+                .triangle(down, 15px, 8px, @brand-primary);
                 position: absolute;
                 left: 15px;
                 bottom: -8px;
@@ -157,19 +157,24 @@
                     .opacity(1);
                 }
 
-                &.active a {
-                    //background: @color-sidebarnav-tree-active-bg;
-                    color: @color-sidebarnav-tree-active-text;
+                &.active {
+                    border-left: 5px solid @brand-accent;
 
-                    span.header {
-                        color: @color-sidebarnav-tree-active-header;
-                    }
-
-                    span.description {
+                    a {
                         color: @color-sidebarnav-tree-active-text;
+                        padding-right: 20px;
+
+                        span.header {
+                            color: @color-sidebarnav-tree-active-header;
+                        }
+
+                        span.description {
+                            color: @color-sidebarnav-tree-active-text;
+                        }
                     }
                 }
 
+
                 &:last-child a {
                     border-bottom: none;
                 }
diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less
index ccf5abc5e..6a244a74f 100644
--- a/modules/backend/assets/less/core/variables.less
+++ b/modules/backend/assets/less/core/variables.less
@@ -31,7 +31,6 @@
 @color-footer-text:                          #666666;
 
 @color-sidebarnav-active-text:               #ffffff;
-//@color-sidebarnav-active-bg:                 #1f99dc;
 @color-sidebarnav-active-icon:               #ffffff;
 @color-sidebarnav-inactive-text:             rgba(255,255,255,.6);
 @color-sidebarnav-inactive-icon:             rgba(255,255,255,.6);
@@ -45,9 +44,8 @@
 @color-sidebarnav-tree-inactive-text:        #ffffff;
 @color-sidebarnav-tree-active-header:        #ffffff;
 @color-sidebarnav-tree-inactive-bg:          transparent;
-//@color-sidebarnav-tree-active-bg:            #1F99DC;
 @color-sidebarnav-tree-active-text:          rgba(255,255,255,.91);
-@color-sidebarnav-tree-active-marker:        #e67e22;
+@color-sidebarnav-tree-active-marker:        @brand-secondary;
 @color-sidebarnav-back-link-bg:              #2b3e50;
 @color-sidebarnav-back-link-text:            #bdc3c7;
 
@@ -107,7 +105,7 @@
 @color-fancy-primary-tabs-active-bg:         #fafafa;
 @color-fancy-primary-tabs-inactive-bg:       #d5d9d8;
 
-@color-fancy-form-tabless-fields-bg:         #e67e22;
+@color-fancy-form-tabless-fields-bg:         @brand-secondary;
 @color-fancy-form-label:                     rgba(255, 255, 255, .5);
 @color-fancy-form-text:                      #ffffff;
 @color-fancy-form-text-selection:            #d35400;
@@ -115,7 +113,7 @@
 @color-fancy-form-inactive-tab:              #b9530f;
 
 @color-sortable-caret:                       #999999;
-@color-sortable-active:                      #e67e22;
+@color-sortable-active:                      @brand-secondary;
 
 @color-report-widget-title:                  #7e8c8d;
 @color-report-widget-control-inactive:       #b6b6b6;
diff --git a/modules/backend/assets/less/layout/fancylayout.less b/modules/backend/assets/less/layout/fancylayout.less
index 6b5b64a78..98abde23f 100644
--- a/modules/backend/assets/less/layout/fancylayout.less
+++ b/modules/backend/assets/less/layout/fancylayout.less
@@ -5,7 +5,7 @@
 
     .tab-collapse-icon {
         position: absolute;
-        display:  block;
+        display: block;
         text-decoration: none;
         outline: none;
         .opacity(0.6);
diff --git a/modules/backend/assets/less/layout/sidenav.less b/modules/backend/assets/less/layout/sidenav.less
index 96a4e7f59..3b9fc9b20 100644
--- a/modules/backend/assets/less/layout/sidenav.less
+++ b/modules/backend/assets/less/layout/sidenav.less
@@ -74,7 +74,6 @@
             }
 
             &.active a {
-                //background: @color-sidebarnav-active-bg;
                 .nav-label,
                 .nav-icon {
                     text-shadow: 0 -1px 0 rgba(0,0,0,.3);
diff --git a/modules/backend/layouts/_sidenav.htm b/modules/backend/layouts/_sidenav.htm
index 1e1b60a84..685863ef1 100644
--- a/modules/backend/layouts/_sidenav.htm
+++ b/modules/backend/layouts/_sidenav.htm
@@ -11,7 +11,7 @@
             <div class="layout-relative">
                 <nav
                     id="layout-sidenav"
-                    class="layout-sidenav bg-s"
+                    class="layout-sidenav bg-p"
                     data-active-class="active"
                     data-control="sidenav">
                     <ul class="nav">
diff --git a/modules/backend/models/BrandSettings.php b/modules/backend/models/BrandSettings.php
index 78c2c6ca0..5190b0093 100644
--- a/modules/backend/models/BrandSettings.php
+++ b/modules/backend/models/BrandSettings.php
@@ -30,9 +30,9 @@ class BrandSettings extends Model
 
     const CACHE_KEY = 'backend::brand.custom_css';
 
-    const PRIMARY_COLOR   = '#3498db'; // Peter River
-    const SECONDARY_COLOR = '#34495e'; // Wet Asphalt
-    const ACCENT_COLOR    = '#e67e22'; // Pumpkin
+    const PRIMARY_COLOR   = '#34495e'; // Wet Asphalt
+    const SECONDARY_COLOR = '#e67e22'; // Pumpkin
+    const ACCENT_COLOR    = '#3498db'; // Peter River
 
     const INLINE_MENU   = 'inline';
     const TILE_MENU     = 'tile';
diff --git a/modules/backend/models/brandsettings/custom.less b/modules/backend/models/brandsettings/custom.less
index 95ec92e68..e9c61e2d4 100644
--- a/modules/backend/models/brandsettings/custom.less
+++ b/modules/backend/models/brandsettings/custom.less
@@ -27,16 +27,30 @@
 .bg-s-s20 { background-color: saturate(@brand-secondary, 20%); }
 .bg-a-s20 { background-color: saturate(@brand-accent,    20%); }
 
-@custom-dark-primary: mix(black, desaturate(@brand-primary, 35%), 20%);
-@custom-dark-accent: mix(black, saturate(@brand-accent, 20%), 25%);
-@custom-dark-secondary: mix(black, saturate(@brand-secondary, 5%), 15%);
+@custom-dark-accent: mix(black, desaturate(@brand-accent, 35%), 20%);
+@custom-dark-secondary: mix(black, saturate(@brand-secondary, 20%), 25%);
+@custom-dark-primary: mix(black, saturate(@brand-primary, 5%), 15%);
+
+//
+// Sidenav
+//
+
+#layout-sidenav ul li a .nav-label,
+#layout-sidenav ul li a .nav-icon {
+    text-shadow: 0 -1px 0 fade(darken(@brand-primary, 20%), 60%);
+}
 
 //
 // Sidenav Tree
 //
 
-.sidenav-tree ul.top-level > li > div.group:before {
-    border-top-color: @brand-secondary;
+.sidenav-tree ul.top-level > li {
+    > div.group:before {
+        border-top-color: @brand-primary;
+    }
+    > ul li.active {
+        border-color: @brand-accent;
+    }
 }
 
 //
@@ -44,7 +58,7 @@
 //
 
 body.outer {
-    background: @custom-dark-secondary;
+    background: @custom-dark-primary;
 }
 
 //
@@ -65,19 +79,19 @@ body.outer {
 
 div.control-popover {
     .popover-head {
-        background: @custom-dark-accent;
+        background: @custom-dark-secondary;
     }
 
     &.placement-bottom .popover-head:before {
-        border-bottom-color: @custom-dark-accent;
+        border-bottom-color: @custom-dark-secondary;
     }
 
     &.placement-left .popover-head:before {
-        border-left-color: @custom-dark-accent;
+        border-left-color: @custom-dark-secondary;
     }
 
     &.placement-right .popover-head:before {
-        border-right-color: @custom-dark-accent;
+        border-right-color: @custom-dark-secondary;
     }
 }
 
@@ -86,7 +100,7 @@ div.control-popover {
 //
 
 .modal-header {
-    background: @custom-dark-accent;
+    background: @custom-dark-secondary;
 }
 
 //
@@ -97,21 +111,29 @@ table.table.data {
     tbody {
         tr.active td {
             &:first-child {
-                border-left: 3px solid @brand-accent;
+                border-left: 3px solid @brand-secondary;
             }
         }
+        // tr:not(.no-data):hover td,
+        // tr:not(.no-data).selected td {
+        //     background: mix(white, @brand-accent, 13%) !important;
+        // }
+        // tr:not(.no-data):active td {
+        //     background: @brand-accent !important;
+        // }
     }
 }
 
+
 //
 // Fancy Layout
 //
 
 .fancy-layout .form-tabless-fields {
-    background: @brand-accent;
+    background: @brand-secondary;
 
     .loading-indicator-container .loading-indicator {
-        background: @brand-accent;
+        background: @brand-secondary;
     }
 }
 
@@ -119,23 +141,30 @@ table.table.data {
 .fancy-layout.control-tabs.master-tabs {
     > div > div.tabs-container > ul.nav-tabs > li.active a > span.title {
         &, &:before, &:after {
-            background: @brand-accent;
+            background: @brand-secondary;
         }
     }
 
     > div > div.tabs-container > ul.nav-tabs > li a > span.title {
         &, &:before, &:after {
-            background-color: mix(black, saturate(@brand-accent, 20%), 31%);
+            background-color: mix(black, saturate(@brand-secondary, 20%), 31%);
         }
     }
 
     > div > div.tabs-container {
-        background-color: @custom-dark-accent;
+        background-color: @custom-dark-secondary;
+    }
+}
+
+.fancy-layout .control-tabs.primary-tabs,
+.fancy-layout.control-tabs.primary-tabs {
+    > div > ul.nav-tabs.master-area {
+        background: @brand-secondary;
     }
 }
 
 .control-filelist ul li.active > a:after {
-    background: @brand-accent;
+    background: @brand-secondary;
 }
 
 //
@@ -143,21 +172,17 @@ table.table.data {
 //
 
 div.control-componentlist {
-    background-color: @custom-dark-secondary;
-
     &.droppable {
-        background-color: lighten(@custom-dark-secondary, 20%);
+        background-color: lighten(@brand-secondary, 20%);
     }
 }
 
-.fancy-layout {
-    .control-tabs, &.control-tabs {
-        &.primary-tabs {
-            > div > ul.nav-tabs {
-                &.component-area {
-                    background: @custom-dark-secondary;
-                }
-            }
-        }
+//
+// Stripe Indicator
+//
+
+.stripe-loading-indicator {
+    .stripe, .stripe-loaded {
+        background: @brand-accent;
     }
 }
diff --git a/modules/backend/models/brandsettings/fields.yaml b/modules/backend/models/brandsettings/fields.yaml
index 3631167e9..5c60df17a 100644
--- a/modules/backend/models/brandsettings/fields.yaml
+++ b/modules/backend/models/brandsettings/fields.yaml
@@ -29,13 +29,13 @@ tabs:
             label: backend::lang.branding.primary_color
             type: colorpicker
             tab: backend::lang.branding.colors
-            availableColors: [#16a085, #27ae60, #3498db, #9b59b6, #34495e, #f1c40f, #e67e22, #e74c3c, #ecf0f1, #95a5a6]
+            availableColors: [#16a085, #27ae60, #2980b9, #8e44ad, #34495e, #f39c12, #d35400, #c0392b, #7f8c8d, #4f5458]
 
         secondary_color:
             label: backend::lang.branding.secondary_color
             type: colorpicker
             tab: backend::lang.branding.colors
-            availableColors: [#16a085, #27ae60, #2980b9, #8e44ad, #34495e, #f39c12, #d35400, #c0392b, #bdc3c7, #7f8c8d]
+            availableColors: [#16a085, #27ae60, #3498db, #9b59b6, #34495e, #f39c12, #e67e22, #e74c3c, #708598, #4f5458]
 
         accent_color:
             label: backend::lang.branding.accent_color
diff --git a/modules/backend/widgets/table/assets/less/table.less b/modules/backend/widgets/table/assets/less/table.less
index bd3779202..b694764a2 100644
--- a/modules/backend/widgets/table/assets/less/table.less
+++ b/modules/backend/widgets/table/assets/less/table.less
@@ -238,7 +238,7 @@
                 }
 
                 &.active {
-                    background: @brand-primary;
+                    background: @brand-accent;
 
                     a {color: #ffffff;}
                 }
diff --git a/modules/cms/assets/css/october.components.css b/modules/cms/assets/css/october.components.css
index a30652281..a5d9d56f8 100644
--- a/modules/cms/assets/css/october.components.css
+++ b/modules/cms/assets/css/october.components.css
@@ -12,7 +12,7 @@ div.control-componentlist div.components div.layout-cell {
 .draggable-component-item:hover,
 .component-list .components div.layout-cell:hover,
 div.control-componentlist div.components div.layout-cell:hover {
-  background: #3382b6;
+  background: #3498db;
 }
 .draggable-component-item > div,
 .component-list .components div.layout-cell > div,
@@ -22,21 +22,27 @@ div.control-componentlist div.components div.layout-cell > div {
   position: relative;
   border-right: 1px solid #ecf0f1;
 }
-.draggable-component-item > div:hover,
-.component-list .components div.layout-cell > div:hover,
-div.control-componentlist div.components div.layout-cell > div:hover {
-  color: #ffffff;
-}
 .draggable-component-item > div:before,
 .component-list .components div.layout-cell > div:before,
 div.control-componentlist div.components div.layout-cell > div:before {
   position: absolute;
   font-size: 16px;
   left: 15px;
-  top: 9px;
+  top: 8px;
   opacity: 0.7;
   filter: alpha(opacity=70);
 }
+.draggable-component-item > div:hover,
+.component-list .components div.layout-cell > div:hover,
+div.control-componentlist div.components div.layout-cell > div:hover {
+  color: #ffffff;
+}
+.draggable-component-item > div:hover:before,
+.component-list .components div.layout-cell > div:hover:before,
+div.control-componentlist div.components div.layout-cell > div:hover:before {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
 .draggable-component-item > div:after,
 .component-list .components div.layout-cell > div:after,
 div.control-componentlist div.components div.layout-cell > div:after {
@@ -62,7 +68,7 @@ div.control-componentlist div.components div.layout-cell > div:after {
 .component-list .components div.layout-cell > div:hover:after,
 div.control-componentlist div.components div.layout-cell > div:hover:after {
   text-shadow: none;
-  color: #3382b6;
+  color: #3498db;
 }
 .draggable-component-item > div span,
 .component-list .components div.layout-cell > div span,
@@ -76,7 +82,7 @@ div.control-componentlist div.components div.layout-cell > div span.name {
   padding: 8px 15px 0;
   font-weight: 400;
   line-height: 20px;
-  font-size: 12px;
+  font-size: 13px;
 }
 .draggable-component-item > div span.description,
 .component-list .components div.layout-cell > div span.description,
@@ -102,18 +108,20 @@ div.control-componentlist div.components div.layout-cell.placeholder > div:after
   color: #e0e0e0 !important;
   text-shadow: none !important;
 }
+[data-field-name="components"] + .control-tabs.primary-tabs {
+  margin-top: -20px;
+}
 div.control-componentlist {
   position: relative;
-  background-color: #2c3e50;
   padding: 0;
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
 }
 div.control-componentlist.droppable {
-  background-color: #507192;
+  background-color: #f0b37e;
 }
 div.control-componentlist.has-components {
-  padding: 10px;
+  padding: 0 20px 20px;
 }
 div.control-componentlist div.layout {
   width: auto;
@@ -162,6 +170,10 @@ div.control-componentlist div.components div.layout-cell > div.popover-highlight
   background: #ffffff !important;
   color: #475354 !important;
 }
+div.control-componentlist div.components div.layout-cell > div.popover-highlight:before {
+  opacity: 0.7;
+  filter: alpha(opacity=70);
+}
 div.control-componentlist div.components div.layout-cell > div.popover-highlight:after {
   color: #ffffff;
   text-shadow: none;
@@ -267,7 +279,7 @@ div.control-componentlist div.components div.layout-cell.adding > div {
 }
 .component-list .components div.layout div.layout-row div.layout-cell > div:hover:before {
   text-shadow: none;
-  color: #3382b6;
+  color: #3498db;
 }
 .component-list .components div.layout div.layout-row:first-child div.layout-cell > div:before {
   display: none;
@@ -327,10 +339,6 @@ div.control-componentlist div.components div.layout-cell.adding > div {
   text-shadow: 0 0 1px #475354 !important;
   color: #ffffff !important;
 }
-.fancy-layout .control-tabs.primary-tabs > div > ul.nav-tabs.component-area,
-.fancy-layout.control-tabs.primary-tabs > div > ul.nav-tabs.component-area {
-  background: #2c3e50;
-}
 body.drag div.control-componentlist div.components div.layout-cell > div,
 body.drag div.control-componentlist div.components div.layout-cell > div:hover,
 body.drag div.control-componentlist div.components div.layout-cell > div:active {
diff --git a/modules/cms/assets/less/october.components.less b/modules/cms/assets/less/october.components.less
index 5b4755db5..a7449843f 100644
--- a/modules/cms/assets/less/october.components.less
+++ b/modules/cms/assets/less/october.components.less
@@ -4,10 +4,10 @@
 // Component list
 // --------------------------------------------------
 
-@color-component-list-bg:       #2C3E50;
+@color-component-list-bg:       @brand-secondary;
 @color-component-bg:            #ffffff;
 @color-component-text:          #475354;
-@color-component-hover-bg:      #3382b6;
+@color-component-hover-bg:      #3498db;
 @color-component-hover-text:    #ffffff;
 @color-component-placeholder:   #e0e0e0;
 @color-group-bg:                #f1f3f4;
@@ -47,18 +47,21 @@ div.control-componentlist div.components div.layout-cell {
         position: relative;
         border-right: 1px solid @color-panel-light;
 
-        &:hover {
-            color: @color-component-hover-text;
-        }
-
         &:before {
             position: absolute;
             font-size: 16px;
             left: 15px;
-            top: 9px;
+            top: 8px;
             .opacity(0.7);
         }
 
+        &:hover {
+            color: @color-component-hover-text;
+            &:before {
+                .opacity(1);
+            }
+        }
+
         &:after {
             .component-lego-icon();
         }
@@ -76,14 +79,14 @@ div.control-componentlist div.components div.layout-cell {
                 padding: 8px 15px 0;
                 font-weight: 400;
                 line-height: 20px;
-                font-size: 12px;
+                font-size: @font-size-base - 1;
             }
 
             &.description {
                 padding: 0 15px 10px;
                 margin-top: 8px;
                 font-weight: 100;
-                font-size: 11px;
+                font-size: @font-size-base - 3;
                 line-height: 150%;
             }
         }
@@ -99,9 +102,14 @@ div.control-componentlist div.components div.layout-cell {
     }
 }
 
+// Reduce the double standard padding, since the tabs have padding
+// at the top and the components field has padding at the bottom.
+[data-field-name="components"] + .control-tabs.primary-tabs {
+    margin-top: -@padding-standard;
+}
+
 div.control-componentlist {
     position: relative;
-    background-color: @color-component-list-bg;
     padding: 0;
     .transition(all 0.3s ease);
 
@@ -110,7 +118,7 @@ div.control-componentlist {
     }
 
     &.has-components {
-        padding: 10px;
+        padding: 0 @padding-standard @padding-standard;
     }
 
     div.layout {
@@ -164,6 +172,9 @@ div.control-componentlist {
                     border-right-color: rgba(0,0,0,0);
                     background: @color-component-bg!important;
                     color: @color-component-text!important;
+                    &:before {
+                        .opacity(0.7);
+                    }
 
                     &:after {
                         color: @color-component-bg;
@@ -353,17 +364,19 @@ div.control-componentlist {
     }
 }
 
-.fancy-layout {
-    .control-tabs, &.control-tabs {
-        &.primary-tabs {
-            > div > ul.nav-tabs {
-                &.component-area {
-                    background: @color-component-list-bg;
-                }
-            }
-        }
-    }
-}
+// Modifies the color of the tab background when components are present
+// this is no longer required since the colors are the same! :-) -sg
+// .fancy-layout {
+//     .control-tabs, &.control-tabs {
+//         &.primary-tabs {
+//             > div > ul.nav-tabs {
+//                 &.component-area {
+//                     background: @color-component-list-bg;
+//                 }
+//             }
+//         }
+//     }
+// }
 
 body.drag div.control-componentlist div.components div.layout-cell {
     > div, > div:hover, > div:active {
diff --git a/modules/cms/formwidgets/components/partials/_formcomponents.htm b/modules/cms/formwidgets/components/partials/_formcomponents.htm
index 842d04771..0f22cbb21 100644
--- a/modules/cms/formwidgets/components/partials/_formcomponents.htm
+++ b/modules/cms/formwidgets/components/partials/_formcomponents.htm
@@ -1,4 +1,4 @@
-<div class="control-componentlist">
+<div class="control-componentlist bg-s">
     <?php foreach ($components as $component): ?>
         <?php if ($component->isHidden): ?>
             <?= $this->makePartial('component', ['component' => $component]) ?>
diff --git a/modules/system/assets/css/styles.css b/modules/system/assets/css/styles.css
index 6885bd5d6..e763eaf21 100644
--- a/modules/system/assets/css/styles.css
+++ b/modules/system/assets/css/styles.css
@@ -366,8 +366,8 @@ cite{font-style:normal}
 .text-center{text-align:center}
 .text-justify{text-align:justify}
 .text-muted{color:#999999}
-.text-primary{color:#3498db}
-a.text-primary:hover{color:#217dbb}
+.text-primary{color:#34495e}
+a.text-primary:hover{color:#222f3d}
 .text-success{color:#3c763d}
 a.text-success:hover{color:#2b542c}
 .text-info{color:#31708f}
@@ -376,8 +376,8 @@ a.text-info:hover{color:#245269}
 a.text-warning:hover{color:#66512c}
 .text-danger{color:#a94442}
 a.text-danger:hover{color:#843534}
-.bg-primary{color:#fff;background-color:#3498db}
-a.bg-primary:hover{background-color:#217dbb}
+.bg-primary{color:#fff;background-color:#34495e}
+a.bg-primary:hover{background-color:#222f3d}
 .bg-success{background-color:#dff0d8}
 a.bg-success:hover{background-color:#c1e2b3}
 .bg-info{background-color:#d9edf7}
diff --git a/modules/system/assets/ui/js/loader.stripe.js b/modules/system/assets/ui/js/loader.stripe.js
index e13a6433b..5af041def 100644
--- a/modules/system/assets/ui/js/loader.stripe.js
+++ b/modules/system/assets/ui/js/loader.stripe.js
@@ -18,37 +18,55 @@
     var StripeLoadIndicator = function () {
         var self = this
         this.counter = 0
-        this.indicator = $('<div/>').addClass('stripe-loading-indicator loaded')
-                            .append($('<div />').addClass('stripe'))
-                            .append($('<div />').addClass('stripe-loaded'))
+        this.indicator = this.makeIndicator()
         this.stripe = this.indicator.find('.stripe')
+        this.animationTimer = null
 
         $(document).ready(function(){
             $(document.body).append(self.indicator)
         })
     }
 
+    StripeLoadIndicator.prototype.makeIndicator = function() {
+        return $('<div/>')
+            .addClass('stripe-loading-indicator loaded')
+            .append($('<div />').addClass('stripe'))
+            .append($('<div />').addClass('stripe-loaded'))
+    }
+
     StripeLoadIndicator.prototype.show = function() {
+        window.clearTimeout(this.animationTimer)
+        this.indicator.show()
         this.counter++
 
         // Restart the animation
         this.stripe.after(this.stripe = this.stripe.clone()).remove()
 
-        if (this.counter > 1)
+        if (this.counter > 1) {
             return
+        }
 
         this.indicator.removeClass('loaded')
         $(document.body).addClass('loading')
     }
 
     StripeLoadIndicator.prototype.hide = function(force) {
+
         this.counter--
-        if (force !== undefined && force)
+        if (force !== undefined && force) {
             this.counter = 0
+        }
 
         if (this.counter <= 0) {
             this.indicator.addClass('loaded')
             $(document.body).removeClass('loading')
+
+            // Stripe should be hidden using `display: none` because leaving the animated
+            // element in the rendering tree, even invisible, affects performance.
+            var self = this
+            this.animationTimer = window.setTimeout(function() {
+                self.indicator.hide()
+            }, 1000)
         }
     }
 
diff --git a/modules/system/assets/ui/js/popup.js b/modules/system/assets/ui/js/popup.js
index 71ba0558d..6dce8c4fd 100644
--- a/modules/system/assets/ui/js/popup.js
+++ b/modules/system/assets/ui/js/popup.js
@@ -25,6 +25,7 @@
 
         this.$container = this.createPopupContainer()
         this.$content = this.$container.find('.modal-content:first')
+        this.$dialog = this.$container.find('.modal-dialog:first')
         this.$modal = this.$container.modal({ show: false, backdrop: false, keyboard: this.options.keyboard })
 
         /*
@@ -254,6 +255,10 @@
         this.$modal.on('click.dismiss.popup', '[data-dismiss="popup"]', $.proxy(this.hide, this))
         this.triggerEvent('popupShow') // Deprecated
         this.triggerEvent('show.oc.popup')
+
+        // Fixes an issue where the Modal makes `position: fixed` elements relative to itself
+        // https://github.com/twbs/bootstrap/issues/15856
+        this.$dialog.css('transform', 'inherit')
     }
 
     Popup.prototype.hide = function() {
@@ -262,6 +267,10 @@
 
         if (this.allowHide)
             this.$modal.modal('hide')
+
+        // Fixes an issue where the Modal makes `position: fixed` elements relative to itself
+        // https://github.com/twbs/bootstrap/issues/15856
+        this.$dialog.css('transform', '')
     }
 
     /*
diff --git a/modules/system/assets/ui/less/breadcrumb.less b/modules/system/assets/ui/less/breadcrumb.less
index bf2f9b632..c0229c3bd 100644
--- a/modules/system/assets/ui/less/breadcrumb.less
+++ b/modules/system/assets/ui/less/breadcrumb.less
@@ -27,7 +27,7 @@
     }
 
     li {
-        font-size: 15px;
+        font-size: @font-size-base;
         list-style: none;
         margin: 0;
         padding:  12px 10px 12px 30px;
diff --git a/modules/system/assets/ui/less/global.variables.less b/modules/system/assets/ui/less/global.variables.less
index ff9426594..049a7bf7b 100644
--- a/modules/system/assets/ui/less/global.variables.less
+++ b/modules/system/assets/ui/less/global.variables.less
@@ -110,9 +110,9 @@
 //
 // Colors
 // --------------------------------------------------
-@brand-primary:          #3498db;
-@brand-secondary:        #34495e;
-@brand-accent:           #e67e22;
+@brand-primary:          #34495e;
+@brand-secondary:        #e67e22;
+@brand-accent:           #3498db;
 @brand-success:          #31ac5f;
 @brand-info:             #5bc0de;
 @brand-warning:          #f0ad4e;
diff --git a/modules/system/assets/ui/less/list.less b/modules/system/assets/ui/less/list.less
index b67c5f4c3..230e3f3c5 100644
--- a/modules/system/assets/ui/less/list.less
+++ b/modules/system/assets/ui/less/list.less
@@ -160,7 +160,7 @@ table.table.data {
             }
         }
         tr:not(.no-data):active td {
-           background: mix(black, @color-list-hover-bg, 10%) !important;
+           background: @color-list-active-bg !important;
            color: white;
         }
 
diff --git a/modules/system/assets/ui/less/list.variables.less b/modules/system/assets/ui/less/list.variables.less
index 7285d6983..f3b083770 100644
--- a/modules/system/assets/ui/less/list.variables.less
+++ b/modules/system/assets/ui/less/list.variables.less
@@ -30,7 +30,8 @@
 @color-list-stripe-active:                   #ff9933;
 @color-list-accent:                          #ECF0F1;
 @color-list-norecords-text:                  #555555;
-@color-list-hover-bg:                        #4da7e8;
+@color-list-hover-bg:                        mix(white, @brand-accent, 13%);
+@color-list-active-bg:                       @brand-accent;
 @color-list-active-sort:                     #c63e26;
 @color-list-grid:                            #E4E7E8;
 
diff --git a/modules/system/assets/ui/less/loader.less b/modules/system/assets/ui/less/loader.less
index 2b5fcd7dc..8ce1876db 100644
--- a/modules/system/assets/ui/less/loader.less
+++ b/modules/system/assets/ui/less/loader.less
@@ -9,7 +9,7 @@
 // --------------------------------------------------
 
 @color-loading-indicator-text:               #999999;
-@color-stripe-loader:                        #0090c0;
+@color-stripe-loader:                        @brand-accent;
 @loader-image-path:                          @image-path;
 
 .loading-indicator {
@@ -238,22 +238,15 @@ html.cssanimations {
 
     .stripe-loaded {
         width: 0;
-
-        // Opacity replaced with display. Leaving the animated indicator element
-        // in the rendering tree, even invisible, affects the performance.
-        // .opacity(0);
-        display: none;
+        .opacity(0);
     }
 
     &.loaded {
-        // .opacity(0);
-        display: none;
-
+        .opacity(0);
         .transition(opacity .4s linear);
         .transition-delay(.3s);
         .stripe-loaded {
-            display: block;
-            // .opacity(1);
+            .opacity(1);
             .transition(width .3s linear);
             width: 100% !important;
         }
diff --git a/modules/system/assets/ui/less/popover.less b/modules/system/assets/ui/less/popover.less
index 5a9453be3..c3b4c8642 100644
--- a/modules/system/assets/ui/less/popover.less
+++ b/modules/system/assets/ui/less/popover.less
@@ -12,7 +12,7 @@
 
 @color-popover-bg:                           #ffffff;
 @color-popover-border:                       @dropdown-border;
-@color-popover-head-bg:                      mix(black, saturate(@brand-accent, 20%), 25%);
+@color-popover-head-bg:                      mix(black, saturate(@brand-secondary, 20%), 25%);
 @color-popover-head-text:                    #ffffff;
 @color-popover-danger-bg:                    #ab2a1c;
 
diff --git a/modules/system/assets/ui/less/popup.less b/modules/system/assets/ui/less/popup.less
index 3a91847ee..ee0f29ba9 100644
--- a/modules/system/assets/ui/less/popup.less
+++ b/modules/system/assets/ui/less/popup.less
@@ -12,7 +12,7 @@
 
 @import "popup.base.less";
 
-@color-popup-header-bg:                      mix(black, saturate(@brand-accent, 20%), 25%);
+@color-popup-header-bg:                      mix(black, saturate(@brand-secondary, 20%), 25%);
 @color-popup-header-text:                    #ECF0F1;
 @color-popup-footer-bg:                      transparent;
 @color-popup-content-bg:                     @body-bg;
diff --git a/modules/system/assets/ui/storm-min.js b/modules/system/assets/ui/storm-min.js
index ad8d62201..e40dd1cea 100644
--- a/modules/system/assets/ui/storm-min.js
+++ b/modules/system/assets/ui/storm-min.js
@@ -2314,20 +2314,24 @@ $(document).on('ajaxPromise','[data-cursor-load-indicator]',function(){$.oc.curs
 $.oc={}
 var StripeLoadIndicator=function(){var self=this
 this.counter=0
-this.indicator=$('<div/>').addClass('stripe-loading-indicator loaded').append($('<div />').addClass('stripe')).append($('<div />').addClass('stripe-loaded'))
+this.indicator=this.makeIndicator()
 this.stripe=this.indicator.find('.stripe')
+this.animationTimer=null
 $(document).ready(function(){$(document.body).append(self.indicator)})}
-StripeLoadIndicator.prototype.show=function(){this.counter++
+StripeLoadIndicator.prototype.makeIndicator=function(){return $('<div/>').addClass('stripe-loading-indicator loaded').append($('<div />').addClass('stripe')).append($('<div />').addClass('stripe-loaded'))}
+StripeLoadIndicator.prototype.show=function(){window.clearTimeout(this.animationTimer)
+this.indicator.show()
+this.counter++
 this.stripe.after(this.stripe=this.stripe.clone()).remove()
-if(this.counter>1)
-return
+if(this.counter>1){return}
 this.indicator.removeClass('loaded')
 $(document.body).addClass('loading')}
-StripeLoadIndicator.prototype.hide=function(force){this.counter--
-if(force!==undefined&&force)
-this.counter=0
+StripeLoadIndicator.prototype.hide=function(force){var self=this
+this.counter--
+if(force!==undefined&&force){this.counter=0}
 if(this.counter<=0){this.indicator.addClass('loaded')
-$(document.body).removeClass('loading')}}
+$(document.body).removeClass('loading')
+this.animationTimer=window.setTimeout(function(){self.indicator.hide()},1000)}}
 $.oc.stripeLoadIndicator=new StripeLoadIndicator()
 $(document).on('ajaxPromise','[data-stripe-load-indicator]',function(event){event.stopPropagation()
 $.oc.stripeLoadIndicator.show()
@@ -2469,6 +2473,7 @@ this.firstDiv=null
 this.allowHide=true
 this.$container=this.createPopupContainer()
 this.$content=this.$container.find('.modal-content:first')
+this.$dialog=this.$container.find('.modal-dialog:first')
 this.$modal=this.$container.modal({show:false,backdrop:false,keyboard:this.options.keyboard})
 this.$container.data('oc.popup',this)
 this.$modal.on('hide.bs.modal',function(){self.triggerEvent('hide.oc.popup')
@@ -2546,11 +2551,13 @@ Popup.prototype.reload=function(){this.init()}
 Popup.prototype.show=function(){this.$modal.modal('show')
 this.$modal.on('click.dismiss.popup','[data-dismiss="popup"]',$.proxy(this.hide,this))
 this.triggerEvent('popupShow')
-this.triggerEvent('show.oc.popup')}
+this.triggerEvent('show.oc.popup')
+this.$dialog.css('transform','inherit')}
 Popup.prototype.hide=function(){this.triggerEvent('popupHide')
 this.triggerEvent('hide.oc.popup')
 if(this.allowHide)
-this.$modal.modal('hide')}
+this.$modal.modal('hide')
+this.$dialog.css('transform','')}
 Popup.prototype.visible=function(val){if(val)
 this.$modal.addClass('in')
 else
diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css
index 77890614b..2000d554c 100644
--- a/modules/system/assets/ui/storm.css
+++ b/modules/system/assets/ui/storm.css
@@ -366,8 +366,8 @@ cite{font-style:normal}
 .text-center{text-align:center}
 .text-justify{text-align:justify}
 .text-muted{color:#999999}
-.text-primary{color:#3498db}
-a.text-primary:hover{color:#217dbb}
+.text-primary{color:#34495e}
+a.text-primary:hover{color:#222f3d}
 .text-success{color:#3c763d}
 a.text-success:hover{color:#2b542c}
 .text-info{color:#31708f}
@@ -376,8 +376,8 @@ a.text-info:hover{color:#245269}
 a.text-warning:hover{color:#66512c}
 .text-danger{color:#a94442}
 a.text-danger:hover{color:#843534}
-.bg-primary{color:#fff;background-color:#3498db}
-a.bg-primary:hover{background-color:#217dbb}
+.bg-primary{color:#fff;background-color:#34495e}
+a.bg-primary:hover{background-color:#222f3d}
 .bg-success{background-color:#dff0d8}
 a.bg-success:hover{background-color:#c1e2b3}
 .bg-info{background-color:#d9edf7}
@@ -410,24 +410,24 @@ blockquote footer:before,blockquote small:before,blockquote .small:before{conten
 .blockquote-reverse footer:after,blockquote.pull-right footer:after,.blockquote-reverse small:after,blockquote.pull-right small:after,.blockquote-reverse .small:after,blockquote.pull-right .small:after{content:'\00A0 \2014'}
 blockquote:before,blockquote:after{content:""}
 address{margin-bottom:20px;font-style:normal;line-height:1.42857143}
-.br-p{color:#3498db}
-.br-s{color:#34495e}
-.br-a{color:#e67e22}
-.br-p-s10{color:#289ae7}
-.br-s-s10{color:#2d4965}
-.br-a-s10{color:#f27d16}
-.br-p-s20{color:#1c9df3}
-.br-s-s20{color:#25496d}
-.br-a-s20{color:#ff7c09}
-.bg-p{background-color:#3498db}
-.bg-s{background-color:#34495e}
-.bg-a{background-color:#e67e22}
-.bg-p-s10{background-color:#289ae7}
-.bg-s-s10{background-color:#2d4965}
-.bg-a-s10{background-color:#f27d16}
-.bg-p-s20{background-color:#1c9df3}
-.bg-s-s20{background-color:#25496d}
-.bg-a-s20{background-color:#ff7c09}
+.br-p{color:#34495e}
+.br-s{color:#e67e22}
+.br-a{color:#3498db}
+.br-p-s10{color:#2d4965}
+.br-s-s10{color:#f27d16}
+.br-a-s10{color:#289ae7}
+.br-p-s20{color:#25496d}
+.br-s-s20{color:#ff7c09}
+.br-a-s20{color:#1c9df3}
+.bg-p{background-color:#34495e}
+.bg-s{background-color:#e67e22}
+.bg-a{background-color:#3498db}
+.bg-p-s10{background-color:#2d4965}
+.bg-s-s10{background-color:#f27d16}
+.bg-a-s10{background-color:#289ae7}
+.bg-p-s20{background-color:#25496d}
+.bg-s-s20{background-color:#ff7c09}
+.bg-a-s20{background-color:#1c9df3}
 .t-ww{word-wrap:break-word;word-break:break-word}
 .pos-r{position:relative !important}
 .pos-a{position:absolute !important}
@@ -1278,7 +1278,7 @@ button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-ap
 .dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}
 .dropdown-menu > li > a{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:1.42857143;color:#39454a;white-space:nowrap}
 .dropdown-menu > li > a:hover,.dropdown-menu > li > a:focus{text-decoration:none;color:#262626;background-color:#f5f5f5}
-.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover,.dropdown-menu > .active > a:focus{color:#ffffff;text-decoration:none;outline:0;background-color:#3498db}
+.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover,.dropdown-menu > .active > a:focus{color:#ffffff;text-decoration:none;outline:0;background-color:#34495e}
 .dropdown-menu > .disabled > a,.dropdown-menu > .disabled > a:hover,.dropdown-menu > .disabled > a:focus{color:#999999}
 .dropdown-menu > .disabled > a:hover,.dropdown-menu > .disabled > a:focus{text-decoration:none;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);cursor:not-allowed}
 .open > .dropdown-menu{display:block}
@@ -1374,7 +1374,7 @@ body.popover-open .control-popover .popover-head:before{display:none}
 }
 .control-breadcrumb{margin:-20px -20px 20px -20px;background-color:#d0d9dd;-webkit-box-shadow:inset 0 -2px 0 rgba(0,0,0,0.05);box-shadow:inset 0 -2px 0 rgba(0,0,0,0.05)}
 .control-breadcrumb ul{padding:0;margin:0;font-size:0}
-.control-breadcrumb li{font-size:15px;list-style:none;margin:0;padding:12px 10px 12px 30px;display:inline-block;position:relative;color:#ffffff;background-color:#9098a2}
+.control-breadcrumb li{font-size:14px;list-style:none;margin:0;padding:12px 10px 12px 30px;display:inline-block;position:relative;color:#ffffff;background-color:#9098a2}
 .control-breadcrumb li a{display:inline-block;color:#ffffff;text-decoration:none;text-shadow:0 1px 0 rgba(0,0,0,0.2)}
 .control-breadcrumb li a:hover{color:#ffffff}
 .control-breadcrumb li:before,.control-breadcrumb li:after{top:0;right:-15px;position:absolute;z-index:10}
@@ -1464,7 +1464,7 @@ to{background-position:0 0}
 .nav-pills > li{float:left}
 .nav-pills > li > a{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
 .nav-pills > li + li{margin-left:2px}
-.nav-pills > li.active > a,.nav-pills > li.active > a:hover,.nav-pills > li.active > a:focus{color:#ffffff;background-color:#3498db}
+.nav-pills > li.active > a,.nav-pills > li.active > a:hover,.nav-pills > li.active > a:focus{color:#ffffff;background-color:#34495e}
 .nav-stacked > li{float:none}
 .nav-stacked > li + li{margin-top:2px;margin-left:0}
 .nav-justified{width:100%}
@@ -1622,7 +1622,7 @@ ul.status-list li a:hover{color:#0181b9;text-decoration:none}
 ul.status-list li span.status{display:inline-block;padding:1px 5px;color:white;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
 ul.status-list li span.status.circle{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;width:12px;height:12px;vertical-align:middle;position:relative;top:-1px}
 ul.status-list li span.status.success{background:#31ac5f}
-ul.status-list li span.status.primary{background:#3498db}
+ul.status-list li span.status.primary{background:#34495e}
 ul.status-list li span.status.warning{background:#f0ad4e}
 ul.status-list li span.status.danger{background:#ab2a1c}
 ul.status-list li span.status.info{background:#5bc0de}
@@ -2125,11 +2125,11 @@ html.cssanimations .cursor-loading-indicator.hide{display:none}
 .bar-loading-indicator.bar-loaded{opacity:0;filter:alpha(opacity=0);-webkit-transition-delay:0.3s;transition-delay:0.3s}
 .bar-loading-indicator.bar-loaded .progress-bar{width:100% !important;-webkit-transition:width 0.3s linear;transition:width 0.3s linear;-webkit-animation:none;animation:none}
 .stripe-loading-indicator{height:4px;background:transparent;position:fixed;top:0;left:0;width:100%;overflow:hidden;z-index:2000}
-.stripe-loading-indicator .stripe,.stripe-loading-indicator .stripe-loaded{height:4px;display:block;background:#0090c0;position:absolute;-webkit-box-shadow:inset 0 1px 1px -1px #FFF,inset 0 -1px 1px -1px #FFF;box-shadow:inset 0 1px 1px -1px #FFF,inset 0 -1px 1px -1px #FFF}
+.stripe-loading-indicator .stripe,.stripe-loading-indicator .stripe-loaded{height:4px;display:block;background:#3498db;position:absolute;-webkit-box-shadow:inset 0 1px 1px -1px #FFF,inset 0 -1px 1px -1px #FFF;box-shadow:inset 0 1px 1px -1px #FFF,inset 0 -1px 1px -1px #FFF}
 .stripe-loading-indicator .stripe{width:100%;-webkit-animation:infinite-loader 60s linear;animation:infinite-loader 60s linear}
-.stripe-loading-indicator .stripe-loaded{width:0;display:none}
-.stripe-loading-indicator.loaded{display:none;-webkit-transition:opacity 0.4s linear;transition:opacity 0.4s linear;-webkit-transition-delay:0.3s;transition-delay:0.3s}
-.stripe-loading-indicator.loaded .stripe-loaded{display:block;-webkit-transition:width 0.3s linear;transition:width 0.3s linear;width:100% !important}
+.stripe-loading-indicator .stripe-loaded{width:0;opacity:0;filter:alpha(opacity=0)}
+.stripe-loading-indicator.loaded{opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity 0.4s linear;transition:opacity 0.4s linear;-webkit-transition-delay:0.3s;transition-delay:0.3s}
+.stripe-loading-indicator.loaded .stripe-loaded{opacity:1;filter:alpha(opacity=100);-webkit-transition:width 0.3s linear;transition:width 0.3s linear;width:100% !important}
 .stripe-loading-indicator.hide{display:none}
 @-moz-keyframes infinite-loader{0%{width:0%}
 10%{width:42%}
@@ -2365,7 +2365,7 @@ html.cssanimations .cursor-loading-indicator.hide{display:none}
 .custom-checkbox input:disabled + label:before,.custom-radio input:disabled + label:before{border:1px solid #bdc3c7 !important}
 .custom-checkbox input:disabled:checked + label:before,.custom-radio input:disabled:checked + label:before{background-color:#999}
 .custom-checkbox:focus,.custom-radio:focus{outline:none}
-.custom-checkbox:focus label:before,.custom-radio:focus label:before{border-color:#3498db}
+.custom-checkbox:focus label:before,.custom-radio:focus label:before{border-color:#34495e}
 .custom-checkbox p.help-block,.custom-radio p.help-block{padding-left:6px;margin-bottom:17px}
 .custom-radio label:before{-webkit-border-radius:18px;-moz-border-radius:18px;border-radius:18px}
 .custom-checkbox label:before{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
@@ -2550,9 +2550,9 @@ table.table.data tbody tr:last-child th,table.table.data tbody tr:last-child td{
 table.table.data tbody tr td:first-child{border-left:3px solid transparent;padding-left:22px}
 table.table.data tbody tr.active td{color:#000000}
 table.table.data tbody tr.active td:first-child{border-left:3px solid #ff9933}
-table.table.data tbody tr:not(.no-data):hover td,table.table.data tbody tr:not(.no-data).selected td{background:#4da7e8 !important;text-shadow:0 -1px 0 rgba(0,0,0,0.3);color:white}
+table.table.data tbody tr:not(.no-data):hover td,table.table.data tbody tr:not(.no-data).selected td{background:#4ea5e0 !important;text-shadow:0 -1px 0 rgba(0,0,0,0.3);color:white}
 table.table.data tbody tr:not(.no-data):hover td a:not(.btn),table.table.data tbody tr:not(.no-data).selected td a:not(.btn),table.table.data tbody tr:not(.no-data):hover td span,table.table.data tbody tr:not(.no-data).selected td span,table.table.data tbody tr:not(.no-data):hover td i[class^="icon-"],table.table.data tbody tr:not(.no-data).selected td i[class^="icon-"]{color:white}
-table.table.data tbody tr:not(.no-data):active td{background:#4596d1 !important;color:white}
+table.table.data tbody tr:not(.no-data):active td{background:#3498db !important;color:white}
 table.table.data tbody tr.hidden td,table.table.data tbody tr.hidden th,table.table.data tbody tr.hidden td a,table.table.data tbody tr.hidden th a{display:none}
 table.table.data tbody tr.strike td,table.table.data tbody tr.strike th,table.table.data tbody tr.strike td a,table.table.data tbody tr.strike th a{text-decoration:line-through}
 table.table.data tbody tr.frozen td,table.table.data tbody tr.frozen th,table.table.data tbody tr.frozen td a,table.table.data tbody tr.frozen th a{color:#337ab7}
@@ -2609,7 +2609,7 @@ table.table.data tr.list-tree-level-10 td.list-cell-index-1{padding-left:125px}
 .control-list table.table.data .list-setup{width:48px}
 .control-list table.table.data .list-setup a{display:block;color:#000000}
 .control-list table.table.data .list-setup a:before{font-size:14px;line-height:14px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f0ca";display:inline-block;margin-left:8px;vertical-align:baseline;opacity:0.6;filter:alpha(opacity=60)}
-.control-list table.table.data .list-setup a:hover:before{opacity:1;filter:alpha(opacity=100);color:#4da7e8 !important}
+.control-list table.table.data .list-setup a:hover:before{opacity:1;filter:alpha(opacity=100);color:#4ea5e0 !important}
 .control-list table.table.data .list-pagination{font-size:14px;text-align:right;padding-top:20px}
 .control-list table.table.data .list-pagination .loading-indicator div{margin-left:20px;font-size:12px}
 .list-header{background-color:transparent;padding:0 20px 1px 20px}
diff --git a/modules/system/partials/_system_sidebar.htm b/modules/system/partials/_system_sidebar.htm
index 359857bbf..780d783cf 100644
--- a/modules/system/partials/_system_sidebar.htm
+++ b/modules/system/partials/_system_sidebar.htm
@@ -1,4 +1,4 @@
-<div class="layout-cell sidenav-tree bg-s" data-control="sidenav-tree" data-search-input="#settings-search-input">
+<div class="layout-cell sidenav-tree bg-p" data-control="sidenav-tree" data-search-input="#settings-search-input">
     <a class="back-link" href="<?= Backend::url('system/settings') ?>"><i class="icon-angle-left"></i><?= e(trans('system::lang.settings.menu_label')) ?></a>
 
     <div class="layout">