[REF] web: review new design elements

- Review UI custom colors (used for tags and kanban cards)

- Properly align control panel items

- Remove links style overrides (these rules are not necessary anymore
  because already specified in bootstrap_overridden.less variables
  definitions)

- Set new webclient bg color

- Adapt colors in kanban view

addons/web/static/src/less/control_panel.less

@@ -3,7 +3,7 @@
 .o_control_panel {
     .o-flex-display();
     .o-flex-flow(row, wrap);
-    border-bottom: 1px solid @odoo-main-color-muted;
+    border-bottom: 1px solid darken(@odoo-control-panel-background-color, 20%);
     .o-webclient-padding(@top: 10px, @bottom: 10px);
     background-color: @odoo-control-panel-background-color;
 
@@ -16,13 +16,7 @@
             .o-text-overflow(@max-width: 90%);
 
             > a {
-                color: @odoo-brand-optional;
                 cursor: pointer;
-
-                &:hover {
-                    color: darken(@odoo-brand-optional, 10%);
-                    text-decoration: none;
-                }
             }
         }
     }
@@ -87,10 +81,19 @@
             padding-left: 5px;
             text-align: center;
             .user-select(none);
+
+            > div {
+                .o-flex-display();
+                .o-align-items(center);
+            }
+
+            .o_pager_counter {
+                margin-right: 5px;
+            }
         }
 
-        > .o_cp_switch_buttons {
-            padding-left: 5px;
+        > .o_cp_switch_buttons > .btn:first-child {
+            margin-left: @odoo-horizontal-padding;
         }
     }
 }

addons/web/static/src/less/kanban_view.less

@@ -154,6 +154,7 @@
     }
 
     .o_kanban_quick_create {
+        box-shadow: 0 0 20px -10px;
         margin: 0 @o-kanban-record-margin -1px @o-kanban-record-margin;
 
         input {
@@ -536,8 +537,8 @@
     // Kanban Grouped Layout - Column Folded
     .o_kanban_group.o_column_folded {
         .o-kanban-slim-col();
-        border-left: 1px solid darken(@odoo-color-silver-darker,10%);
-        background-color: @gray-lighter;
+        margin-left: 1px;
+        background-color: darken(@gray-lighter-dark, 2%);
 
         .o_kanban_header {
             position: relative;
@@ -583,8 +584,8 @@
             .o-position-absolute(-1px, 0, 0, (-@o-kanban-group-padding - 1px));
             display: none;
             width: @o-kanban-default-record-width;
-            box-shadow: 0 0 10px -3px;
-            background-color: white;
+            box-shadow: 0 0 20px -10px;
+            background-color: @gray-lighter;
 
             input, input:focus, input:hover {
                 font-size: 16px;

addons/web/static/src/less/variables.less

@@ -22,8 +22,8 @@
 @odoo-view-background-color: white;
 @odoo-shadow-color: #303030;
 
-@odoo-webclient-background-color: @odoo-color-silver;
-@odoo-control-panel-background-color: @odoo-webclient-background-color;
+@odoo-webclient-background-color: @odoo-color-silver-darker;
+@odoo-control-panel-background-color: @odoo-color-silver;
 @odoo-form-lightsecondary: #ccc;
 
 @odoo-list-footer-color: @odoo-main-text-color;
@@ -35,19 +35,19 @@
 @odoo-tooltip-arrow-color: black;
 
 // UI custom colors for tags, kanban records' colors, ...
-@odoo-color-0: #4D4D4D;
-@odoo-color-1: #61BD4F;
-@odoo-color-2: #F2D600;
-@odoo-color-3: #FFAB4A;
-@odoo-color-4: #EB5A46;
-@odoo-color-5: #875A7B;
-@odoo-color-6: #0079BF;
-@odoo-color-7: #00C2E0;
-@odoo-color-8: #4CD98E;
-@odoo-color-9: #FF80CE;
-@odoo-color-10: #526774;
-@odoo-color-11: #005A55;
-@odoo-color-12: #323A46;
+@odoo-color-0: #00C7AB;
+@odoo-color-1: #F06050;
+@odoo-color-2: #F4A460;
+@odoo-color-3: #F7CD1F;
+@odoo-color-4: #6CC1ED;
+@odoo-color-5: #814968;
+@odoo-color-6: #EB7E7F;
+@odoo-color-7: #2C8397;
+@odoo-color-8: #475577;
+@odoo-color-9: #D6145F;
+@odoo-color-10: #30C381;
+@odoo-color-11: #9365B8;
+@odoo-color-12: #B05048;
 
 // Layout
 @screen-xs-min: 475px;

addons/web/static/src/less/webclient.less

@@ -1,13 +1,3 @@
-// ------------------------------------------------------------------
-// Typography
-// ------------------------------------------------------------------
-a {
-    color: @odoo-brand-optional;
-    &:hover {
-        color: darken(@odoo-brand-optional, 10%);
-    }
-}
-
 // ------------------------------------------------------------------
 //  General
 // ------------------------------------------------------------------

addons/web/static/src/less/webclient_layout.less

@@ -40,7 +40,8 @@
             .o-flex(0, 0, @odoo-submenu-width);
             .o-flex-display();
             .o-flex-flow(column, nowrap);
-            border-right: 1px solid #afafb6;
+            border-right: 1px solid darken(@odoo-control-panel-background-color, 20%);
+            background-color: @odoo-control-panel-background-color;
 
             .o_sub_menu_logo {
                 .o-flex(0, 0, auto);