phabricator/webroot/rsrc/css/layout/phabricator-object-item-list-view.css

/**
 * @provides phabricator-object-item-list-view-css
 */

.phabricator-object-item-list-view {
  padding: 8px 6px;
  background: #f4f5f6;
}

.device-desktop .phabricator-object-item-list-view {
  padding: 20px;
}

.phabricator-object-item {
  background: #ffffff;
  border-style: solid;
  border-color: #d7d7d7 #e4e3e4 #bcbcbd #d7d7d7;
  border-width: 1px 1px 1px 3px;
  margin: 3px 0;

  overflow: hidden;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.10);
}

.device-desktop .phabricator-object-item {
  margin: 0 0 5px 0;
}

.phabricator-object-item-name {
  display: block;
  padding: 4px 8px 4px;
  font-weight: bold;
}

.phabricator-object-item-content {
  overflow: hidden;
}

/* - Attribute List ------------------------------------------------------------

  Object attributes, commonly used to render created date, etc.

*/

.phabricator-object-item-attributes {
  padding: 0px 8px 4px;
}

.phabricator-object-item-attribute {
  display: inline;
  color: #555555;
  font-size: 11px;
}

.phabricator-object-item-attribute-spacer {
  padding: 0 4px;
}


/* - Icons ---------------------------------------------------------------------

  Icons, which show object state. On mobile, they are rendered without labels
  to save space.

*/

.phabricator-object-item-icons {
  float: right;
  padding: 2px 4px 0;
}

/* NOTE: The main content is an "overflow: hidden" div which we give a right
   margin so it doesn't overlap the icons. The margin is slightly larger than
   the width + padding of the icon div, so the icons have some space even if
   the content is wider than available space. */

.device-desktop .phabricator-object-item-icons {
  width: 120px;
}

.device-desktop .phabricator-object-item-content {
  margin-right: 132px;
}

.device .phabricator-object-item-icons {
  width: 18px;
}

.device .phabricator-object-item-content {
  margin-right: 30px;
}

.device .phabricator-object-item-icon-label {
  display: none;
  vertical-align: middle;
}

.phabricator-object-item-icon {
  position: relative;
  font-size: 11px;
  color: #666666;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;

  min-height: 18px;
  line-height: 18px;
}

.device-desktop .phabricator-object-item-icon {
  padding-right: 22px;
}

.phabricator-object-item-icon-image {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
}


/* - Bar Colors ----------------------------------------------------------------

  Colors for the left-hand border bars, used to indicate object status or other
  attributes.

*/

.phabricator-object-item-bar-color-red {
  border-left-color: #cc0000;
}

.phabricator-object-item-bar-color-orange {
  border-left-color: #cc7300;
}

.phabricator-object-item-bar-color-yellow {
  border-left-color: #ccc000;
}

.phabricator-object-item-bar-color-green {
  border-left-color: #009b2d;
}

.phabricator-object-item-bar-color-sky {
  border-left-color: #6498cf;
}

.phabricator-object-item-bar-color-blue {
  border-left-color: #00659a;
}

.phabricator-object-item-bar-color-indigo {
  border-left-color: #3a00cc;
}

.phabricator-object-item-bar-color-violet {
  border-left-color: #67009b;
}

.phabricator-object-item-bar-color-grey {
  border-left-color: #999999;
}

.phabricator-object-item-bar-color-black {
  border-left-color: #333333;
}


/* - Effects -------------------------------------------------------------------

  Effects like highlighted items.

*/

.phabricator-object-item-highlighted {
  background: #ffff88;
}