Normalize form inputs a little

Summary: Lots of minor details, colors, spacing, padding.

Test Plan:
View carefully in create task, mobile create task, comment form, tokenizers.

{F1913060}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'cea72e09',
     'conpherence.pkg.js' => '6249a1cf',
-    'core.pkg.css' => 'd2126ffb',
+    'core.pkg.css' => 'e7c00111',
     'core.pkg.js' => '1a77dddf',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'a4ba74b5',
@@ -29,7 +29,7 @@ return array(
     'rsrc/css/aphront/panel-view.css' => '8427b78d',
     'rsrc/css/aphront/phabricator-nav-view.css' => 'b29426e9',
     'rsrc/css/aphront/table-view.css' => '3225137a',
-    'rsrc/css/aphront/tokenizer.css' => '056da01b',
+    'rsrc/css/aphront/tokenizer.css' => '9a8cb501',
     'rsrc/css/aphront/tooltip.css' => '1a07aea8',
     'rsrc/css/aphront/typeahead-browse.css' => '8904346a',
     'rsrc/css/aphront/typeahead.css' => 'd4f16145',
@@ -109,7 +109,7 @@ return array(
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => 'd0801452',
-    'rsrc/css/core/remarkup.css' => '04ab9f17',
+    'rsrc/css/core/remarkup.css' => 'dda84e80',
     'rsrc/css/core/syntax.css' => '769d3498',
     'rsrc/css/core/z-index.css' => 'd1270942',
     'rsrc/css/diviner/diviner-shared.css' => 'aa3656aa',
@@ -132,7 +132,7 @@ return array(
     'rsrc/css/phui/phui-button.css' => '4a5fbe3d',
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
     'rsrc/css/phui/phui-cms.css' => 'be43c8a8',
-    'rsrc/css/phui/phui-comment-form.css' => '103cdc49',
+    'rsrc/css/phui/phui-comment-form.css' => '4ecc56ef',
     'rsrc/css/phui/phui-crumbs-view.css' => '195ac419',
     'rsrc/css/phui/phui-curtain-view.css' => '947bf1a4',
     'rsrc/css/phui/phui-document-pro.css' => 'ca1fed81',
@@ -140,8 +140,8 @@ return array(
     'rsrc/css/phui/phui-document.css' => 'c32e8dec',
     'rsrc/css/phui/phui-feed-story.css' => '44a9c8e9',
     'rsrc/css/phui/phui-fontkit.css' => '9cda225e',
-    'rsrc/css/phui/phui-form-view.css' => 'b5bfd17a',
+    'rsrc/css/phui/phui-form-view.css' => '91adabe4',
-    'rsrc/css/phui/phui-form.css' => 'aac1d51d',
+    'rsrc/css/phui/phui-form.css' => 'ca2490c6',
     'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f',
     'rsrc/css/phui/phui-header-view.css' => '6ec8f155',
     'rsrc/css/phui/phui-hovercard.css' => 'de1a2119',
@@ -558,7 +558,7 @@ return array(
     'aphront-multi-column-view-css' => '84cc6640',
     'aphront-panel-view-css' => '8427b78d',
     'aphront-table-view-css' => '3225137a',
-    'aphront-tokenizer-control-css' => '056da01b',
+    'aphront-tokenizer-control-css' => '9a8cb501',
     'aphront-tooltip-css' => '1a07aea8',
     'aphront-typeahead-control-css' => 'd4f16145',
     'application-search-view-css' => '8452c849',
@@ -812,7 +812,7 @@ return array(
     'phabricator-object-selector-css' => '85ee8ce6',
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => '8d40ae75',
-    'phabricator-remarkup-css' => '04ab9f17',
+    'phabricator-remarkup-css' => 'dda84e80',
     'phabricator-search-results-css' => '7dea472c',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-slowvote-css' => 'a94b7230',
@@ -855,7 +855,7 @@ return array(
     'phui-calendar-month-css' => '8e10e92c',
     'phui-chart-css' => '6bf6f78e',
     'phui-cms-css' => 'be43c8a8',
-    'phui-comment-form-css' => '103cdc49',
+    'phui-comment-form-css' => '4ecc56ef',
     'phui-crumbs-view-css' => '195ac419',
     'phui-curtain-view-css' => '947bf1a4',
     'phui-document-summary-view-css' => '9ca48bdf',
@@ -864,8 +864,8 @@ return array(
     'phui-feed-story-css' => '44a9c8e9',
     'phui-font-icon-base-css' => '870a7360',
     'phui-fontkit-css' => '9cda225e',
-    'phui-form-css' => 'aac1d51d',
+    'phui-form-css' => 'ca2490c6',
-    'phui-form-view-css' => 'b5bfd17a',
+    'phui-form-view-css' => '91adabe4',
     'phui-head-thing-view-css' => 'fd311e5f',
     'phui-header-view-css' => '6ec8f155',
     'phui-hovercard' => '1bd28176',
@@ -953,10 +953,6 @@ return array(
       'javelin-util',
       'phabricator-tooltip',
     ),
-    '056da01b' => array(
-      'aphront-typeahead-control-css',
-      'phui-tag-view-css',
-    ),
     '065227cc' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1750,6 +1746,10 @@ return array(
       'phabricator-phtize',
       'changeset-view-manager',
     ),
+    '9a8cb501' => array(
+      'aphront-typeahead-control-css',
+      'phui-tag-view-css',
+    ),
     '9bbf3762' => array(
       'javelin-behavior',
       'javelin-dom',

webroot/rsrc/css/aphront/tokenizer.css

@@ -38,6 +38,7 @@ body input.jx-tokenizer-input {
   font-size: {$normalfontsize};
   color: #333;
   height: 26px;
+  background: transparent;
 }
 
 body input.jx-tokenizer-input:focus {
@@ -63,7 +64,7 @@ a.jx-tokenizer-x:hover {
 }
 
 a.jx-tokenizer-token {
-  padding: 2px 6px;
+  padding: 1px 6px;
   border:  1px solid {$lightblueborder};
   margin: 3px 2px 0 4px;
   background-color: {$sh-bluebackground};
@@ -173,6 +174,8 @@ a.jx-tokenizer-token-invalid:hover {
   border-bottom: none;
   padding: 0;
   width: 30px;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
 }
 
 .button.tokenizer-browse-button .phui-icon-view {

webroot/rsrc/css/core/remarkup.css

@@ -436,11 +436,13 @@ body div.phabricator-remarkup > *:last-child {
 }
 
 .remarkup-assist-textarea {
-  border-left-color: {$blueborder};
+  border-left-color: {$greyborder};
-  border-right-color: {$blueborder};
+  border-right-color: {$greyborder};
-  border-bottom-color: {$blueborder};
+  border-bottom-color: {$greyborder};
   border-top-color: {$thinblueborder};
   border-radius: 0;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
 
   box-shadow: none;
   -webkit-box-shadow: none;
@@ -470,12 +472,15 @@ var.remarkup-assist-textarea {
 }
 
 .remarkup-assist-bar {
-  height: 26px;
+  height: 32px;
   border-width: 1px 1px 0;
   border-style: solid;
-  border-top-color: {$blueborder};
+  border-top-color: {$greyborder};
-  border-left-color: {$blueborder};
+  border-left-color: {$greyborder};
-  border-right-color: {$blueborder};
+  border-right-color: {$greyborder};
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  padding: 0 4px;
 
   background: {$lightbluebackground};
   overflow: hidden;
@@ -483,6 +488,7 @@ var.remarkup-assist-textarea {
 
 .remarkup-assist-button {
   display: block;
+  margin-top: 2px;
   padding: 4px 5px;
   float: left;
 }
@@ -503,11 +509,11 @@ var.remarkup-assist-textarea {
   display: block;
   float: left;
 
-  margin: 7px 4px;
+  height: 18px;
-  height: 14px;
+  margin: 7px 6px;
 
   width: 0px;
-  border-right: 1px solid #cccccc;
+  border-right: 1px solid {$lightgreyborder};
 }
 
 .remarkup-interpreter-error {

webroot/rsrc/css/phui/phui-comment-form.css

@@ -58,23 +58,10 @@ body.device .phui-box.phui-object-box.phui-comment-form-view {
     border-radius: 0;
 }
 
-.phui-comment-form-view .remarkup-assist-button {
-  margin-top: 2px;
-  padding: 4px 5px;
-  border-radius: 3px;
-}
-
-.phui-comment-form-view .remarkup-assist-separator {
-  height: 18px;
-  margin: 7px 6px;
-}
-
 .phui-comment-form-view .aphront-form-input .remarkup-assist-textarea {
   border-color: {$lightblueborder};
   border-top: 1px solid {$thinblueborder};
   padding: 8px;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
   height: 10em;
   background-color: rgba({$alphablue},.02);
 }
@@ -162,22 +149,6 @@ body.device .phui-box.phui-object-box.phui-comment-form-view {
   display: none;
 }
 
-/* h8rs gonna h8 */
-.phui-comment-form-view select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-
-  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC") no-repeat right 8px center;
-  background-size: 8px 10px;
-  border-radius: 3px;
-  color: {$darkbluetext};
-  height: 28px;
-  position: relative;
-  padding: 0 8px;
-  width: 180px;
-}
-
 .device-phone .aphront-form-control-submit button {
   width: 100%;
 }

webroot/rsrc/css/phui/phui-form-view.css

@@ -15,8 +15,9 @@
 }
 
 .phui-form-view label.aphront-form-label {
-  padding-top: 5px;
   width: 19%;
+  height: 28px;
+  line-height: 28px;
   float: left;
   text-align: right;
   font-weight: bold;

webroot/rsrc/css/phui/phui-form.css

@@ -46,7 +46,8 @@ input[type="color"],
 div.jx-tokenizer-container {
   padding: 4px 6px;
   background-color: #ffffff;
-  border: 1px solid {$blueborder};
+  border: 1px solid {$greyborder};
+  border-radius: 3px;
 
   -webkit-box-shadow: inset 0 1px 1px rgba({$alphablack}, 0.075);
   -moz-box-shadow: inset 0 1px 1px rgba({$alphablack}, 0.075);
@@ -63,7 +64,6 @@ div.jx-tokenizer-container {
 
   /* iOS Safari */
   -webkit-appearance: none;
-  border-radius: 0;
 }
 
 textarea:focus,
@@ -105,11 +105,18 @@ input[type="checkbox"] {
 }
 
 select {
-  height: 24px;
+  -webkit-appearance: none;
-  line-height: 24px;
+  -moz-appearance: none;
-  border: 1px solid {$lightgreyborder};
+  appearance: none;
-  background-color: #ffffff;
+
-  min-width: 140px;
+  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC") no-repeat right 8px center;
+  background-size: 8px 10px;
+  border-radius: 3px;
+  color: {$darkbluetext};
+  border: 1px solid {$greyborder};
+  height: 28px;
+  padding: 0 8px;
+  min-width: 180px;
 }
 
 select[multiple],