Tidy up Workboard CSS a little

Summary:
 - Custom scrollbars, colors
 - New div with some better padding (floor for the column)
 - More consistent spacing around the board itself.
 - Slightly darker columns
 - Smaller horizonal scrollbar

Test Plan:
Chrome Mac / Desktop.

{F1100342}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D15217

resources/celerity/map.php

@@ -154,9 +154,9 @@ return array(
     'rsrc/css/phui/phui-tag-view.css' => '9d5d4400',
     'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
     'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b',
-    'rsrc/css/phui/workboards/phui-workboard.css' => '2b5367d2',
+    'rsrc/css/phui/workboards/phui-workboard.css' => '0047084f',
-    'rsrc/css/phui/workboards/phui-workcard.css' => 'a869098a',
+    'rsrc/css/phui/workboards/phui-workcard.css' => '3646fb96',
-    'rsrc/css/phui/workboards/phui-workpanel.css' => 'e1bd8d04',
+    'rsrc/css/phui/workboards/phui-workpanel.css' => 'a78c0661',
     'rsrc/css/sprite-login.css' => '60e8560e',
     'rsrc/css/sprite-menu.css' => '9dd65b92',
     'rsrc/css/sprite-tokens.css' => '4f399012',
@@ -831,9 +831,9 @@ return array(
     'phui-theme-css' => 'ab7b848c',
     'phui-timeline-view-css' => '2efceff8',
     'phui-two-column-view-css' => 'c75bfc5b',
-    'phui-workboard-view-css' => '2b5367d2',
+    'phui-workboard-view-css' => '0047084f',
-    'phui-workcard-view-css' => 'a869098a',
+    'phui-workcard-view-css' => '3646fb96',
-    'phui-workpanel-view-css' => 'e1bd8d04',
+    'phui-workpanel-view-css' => 'a78c0661',
     'phuix-action-list-view' => 'b5c256b8',
     'phuix-action-view' => '8cf6d262',
     'phuix-autocomplete' => '9196fb06',
@@ -1631,6 +1631,9 @@ return array(
       'javelin-uri',
       'phabricator-notification',
     ),
+    'a78c0661' => array(
+      'phui-workcard-view-css',
+    ),
     'a80d0378' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1919,9 +1922,6 @@ return array(
       'javelin-dom',
       'phabricator-prefab',
     ),
-    'e1bd8d04' => array(
-      'phui-workcard-view-css',
-    ),
     'e1d25dfb' => array(
       'javelin-behavior',
       'javelin-stratcom',

src/view/phui/PHUIWorkpanelView.php

@@ -103,10 +103,12 @@ final class PHUIWorkpanelView extends AphrontTagView {
     $body = phutil_tag(
       'div',
         array(
-          'class' => 'phui-workpanel-body',
+          'class' => 'phui-workpanel-body-content',
         ),
       $this->cards);
 
+    $body = phutil_tag_div('phui-workpanel-body', $body);
+
     $view = id(new PHUIBoxView())
       ->setColor(PHUIBoxView::GREY)
       ->addClass('phui-workpanel-view-inner')

webroot/rsrc/css/phui/workboards/phui-workboard.css

@@ -35,8 +35,8 @@
 }
 
 .phui-workboard-view-shadow::-webkit-scrollbar {
-  height: 12px;
+  height: 8px;
-  width: 12px;
+  width: 8px;
   background: rgba(200,200,200,.6);
 }
 
@@ -72,12 +72,6 @@
   margin: 16px;
 }
 
-.device-desktop .phui-workpanel-body {
-  max-height: calc(100vh - 170px);
-  overflow-y: scroll;
-  overflow-x: hidden;
-}
-
 .device-desktop .phui-workboard-view .aphront-multi-column-view {
   pointer-events: none;
 }

webroot/rsrc/css/phui/workboards/phui-workcard.css

@@ -110,6 +110,10 @@
   background-color: {$sh-greenbackground};
 }
 
+.phui-object-item-list-view .phui-workcard:last-child {
+  margin-bottom: 0;
+}
+
 
 /* - Draggable Colors --------------------------------------------------------*/
 

webroot/rsrc/css/phui/workboards/phui-workpanel.css

@@ -35,8 +35,12 @@
   user-select: none;
 }
 
+.phui-workpanel-view .phui-box-grey {
+  background-color: rgba(71,87,120,0.1);
+}
+
 .phui-workpanel-view.phui-workboard-column-milestone .phui-box-grey {
-  background-color: rgba(234, 230, 247, 0.75);
+  background-color: rgba(234, 230, 247, 0.85);
 }
 
 .phui-workpanel-view .phui-header-col2 .phui-icon-view {
@@ -46,11 +50,14 @@
 .phui-workpanel-view .phui-workpanel-header-action {
   float: right;
   width: 24px;
-  border-left: 1px solid #b3b5b6;
 }
 
 .phui-workpanel-view .phui-workpanel-body {
-  padding: 8px 8px 4px 8px;
+  padding: 8px 4px 8px 0;
+}
+
+.phui-workpanel-view .phui-workpanel-body-content {
+  padding: 0 4px 0 8px;
 }
 
 .device .phui-workpanel-view .phui-workpanel-body {
@@ -89,6 +96,24 @@
   opacity: 0.75;
 }
 
+.device-desktop .phui-workpanel-body-content {
+  max-height: calc(100vh - 162px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.device-desktop .phui-workpanel-body-content::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+  background: rgba(71,87,120,0.2);
+  border-radius: 4px;
+}
+
+.device-desktop .phui-workpanel-body-content::-webkit-scrollbar-thumb {
+  background: rgba(71,87,120,0.4);
+  border-radius: 4px;
+}
+
 .project-panel-empty .phui-object-item-list-view {
   background: {$sh-indigobackground};
   border-radius: 3px;