ember-inspector-prebuilt/dist/websocket/assets/ember-inspector.css

A pre-built set of distributable assets from the ember.js ember-inspector project.

/**
 APP
 ===
 The layout of the entire
 application.
*/
.app {
  display: flex;
  flex-direction: column;
  flex: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  font-size: 12px; }

.app.is-dragging {
  cursor: col-resize; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: normal; }

html, body {
  height: 100%; }

body, input {
  font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333; }

body, div, nav {
  margin: 0;
  padding: 0; }

a {
  color: inherit; }

code {
  font-family: Menlo, Monaco, monospace; }

/**
 * Overwrites styles for the library [contextMenu](https://github.com/s-yadav/contextMenu.js)
 */
.iw-cm-menu {
  color: inherit; }

.iw-cm-menu li {
  padding-left: 5px;
  font-size: 14px; }

/**
 DRAG-HANDLE
 ===========
 The drag handle used for resizing elements
*/
.drag-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  z-index: 500;
  cursor: col-resize; }

.drag-handle--right {
  margin-right: -3px; }

.drag-handle--left {
  margin-left: -3px; }

.drag-handle__border {
  height: 100%;
  margin-left: 3px;
  width: 1px;
  border-left: 1px solid #A3A3A3;
  pointer-events: none; }

.drag-handle--faded {
  opacity: 0.3; }

/**
 DROP-DOWN
 =========
*/
.dropdown {
  position: relative;
  flex: auto; }

.dropdown__select {
  -webkit-appearance: none;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 18px;
  padding: 0 15px 0 5px;
  font-size: 12px;
  color: #303030;
  text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
  border: 0;
  background-color: transparent; }

.dropdown__select:focus {
  outline: none; }

.dropdown__arrow {
  position: absolute;
  right: 4px;
  top: 7px;
  background-image: url(images/arrow_down.svg);
  background-size: 100%;
  opacity: 0.7;
  width: 7px;
  height: 7px;
  display: inline-block;
  pointer-events: none; }

/**
  ERROR-PAGE
  ===========
  An error with possible reaons
  and solutions.
  For example when application
  is not detected.
*/
.data-error-page-container {
  position: relative;
  min-height: 100%;
  padding: 10px; }

.error-page {
  padding: 10px;
  background: #ededed;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  color: #505050;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.error-page__content {
  position: relative;
  width: 530px;
  padding: 25px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #ffffff;
  border: solid 1px #d1d1d1;
  border-radius: 5px;
  margin: auto; }

.error-page__content a {
  color: #f23818;
  text-decoration: none; }

.error-page__header {
  font-weight: bold;
  font-size: 19px;
  padding-top: 15px;
  padding-bottom: 30px;
  margin-bottom: 10px;
  border-bottom: solid 1px #d1d1d1;
  position: relative; }

.error-page__header:after {
  content: ' ';
  width: 128px;
  height: 89px;
  background: url("images/fishy_tomster.png") left center no-repeat;
  position: absolute;
  right: 0px;
  bottom: 0px; }

.error-page__title {
  width: 345px; }

.error-page__reasons {
  font-size: 13px; }

.error-page__reasons-title {
  font-weight: bold; }

.error-page__reasons ul {
  list-style-type: disc; }

.error-page__list {
  padding-left: 16px;
  padding-bottom: 5px;
  border-bottom: solid 1px #d1d1d1; }

.error-page__list li {
  padding: 2px 0; }

.external-link {
  display: inline-block;
  position: relative; }
  .external-link::after {
    content: '';
    width: 9px;
    height: 9px;
    position: absolute;
    right: -12px;
    bottom: 10px;
    background-image: url("images/external_link.svg");
    background-size: 100%; }

.list {
  position: relative;
  font-size: 11px;
  height: 100%;
  box-sizing: border-box;
  background: white;
  overflow: hidden; }

.list__content {
  overflow: hidden;
  overflow-y: scroll;
  transform: translateZ(0); }

.list table {
  position: absolute;
  left: 0;
  top: 0;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: separate;
  width: 100%; }

.list__header {
  position: relative;
  overflow: hidden;
  overflow-y: scroll;
  text-align: left;
  user-select: none;
  border-bottom: 1px solid #cacaca;
  height: 30px; }
  .list__header .list__row {
    background: #fff; }
  .list__header .list__cell {
    padding: 0;
    padding-left: 5px;
    opacity: 1;
    color: inherit;
    font-weight: normal;
    position: relative; }

.list:not(.list_no-alternate-color) .list__content .list__row {
  background: #f3f3f3; }
  .list:not(.list_no-alternate-color) .list__content .list__row:nth-of-type(2n) {
    background: #fff; }

.list__cell-content {
  width: 100%; }

.list__cell {
  line-height: 30px;
  min-height: 30px;
  padding-left: 5px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.7; }
  .list__cell_size_small {
    flex: none;
    width: 50px; }
  .list__cell_size_medium {
    flex: none;
    width: 130px; }
  .list__cell_size_larger {
    flex: none;
    width: 350px; }
  .list__cell_size_large {
    flex: none;
    width: 250px; }
  .list__cell_size_huge {
    flex: none;
    width: 450px; }
  .list__cell_value_numeric {
    min-width: 65px;
    padding-right: 10px;
    text-align: right; }
  .list__cell_main {
    font-weight: bold; }
  .list__cell_spacer {
    border: none;
    width: 0px;
    flex: none; }
  .list__cell_clickable {
    cursor: pointer; }

/**
 * Content in a cell that should not take the entire
 * space. Usually because it has a $E after it.
 */
.list__cell-partial {
  max-width: calc(100% - 40px);
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left; }

.list__cell-partial_clickable {
  cursor: pointer; }

.list__cell-partial_size_medium {
  max-width: calc(100% - 60px); }

/**
 * For example a $E icon to the right
 * of a cell.
 */
.list__cell-helper {
  float: right;
  margin-right: 5px; }

.list__link {
  cursor: pointer; }

.list__row:hover .list__cell {
  opacity: 1; }
  .list__row:hover .list__cell_clickable {
    text-decoration: underline; }

.list__row:hover .list__cell-partial_clickable {
  text-decoration: underline; }

.list__row:hover .list__link {
  text-decoration: underline; }

.list__row_highlight .list__cell,
.list__cell_highlight {
  opacity: 1; }

/* ARROW FOR COLLAPSING AND EXPANDING */
.list__cell-arrow {
  position: relative;
  display: block;
  float: left;
  width: 15px;
  height: 30px;
  cursor: pointer; }
  .list__cell-arrow:before {
    position: absolute;
    right: 5px;
    top: 0px;
    font-size: 75%;
    color: #737373; }

/* cell expanding/collapsing */
.list__cell_arrow_expanded,
.list__cell_arrow_collapsed {
  cursor: pointer; }

.list__cell_arrow_collapsed .list__cell-arrow:before {
  content: "\25B6"; }

.list__cell_arrow_expanded .list__cell-arrow:before {
  content: "\25BC"; }

.list__row_arrow_collapsed,
.list__row_arrow_expanded {
  cursor: pointer;
  position: relative; }

.list__row_arrow_collapsed .list__cell-arrow:before {
  content: "\25B6"; }

.list__row_arrow_expanded .list__cell-arrow:before {
  content: "\25BC"; }

/**
 MIXIN
 =====
 A single mixin inside the object inspector
 It could be the object's own properties
 or a mixin the object extends
*/
.mixin__name {
  margin-top: -1px;
  padding: 2px 2px 2px 5px;
  border-top: 1px solid #bdbdbd;
  border-bottom: 1px solid #bdbdbd;
  background-color: #f0f0f0;
  cursor: default;
  user-select: none; }

.mixin__name:active {
  background-color: #ccc;
  border-top: 1px solid #b2b2b2;
  border-bottom: 1px solid #b2b2b2; }

.mixin_props_no .mixin__name:before {
  opacity: 0; }

.mixin.ember-mixin .mixin__name {
  color: #888; }

.mixin__name:before {
  content: "\25B6";
  color: #737373;
  margin-right: 4px;
  position: relative;
  top: -1px;
  font-size: 75%; }

.mixin_state_expanded .mixin__name {
  border-bottom: 1px solid #bdbdbd; }

.mixin_state_expanded .mixin__name:before {
  content: "\25BC"; }

.mixin.ember-mixin .mixin__name:before {
  color: #aaa; }

.mixin__name_errors {
  background-color: #fff; }
  .mixin__name_errors:active {
    background-color: #fff; }

.mixin__properties {
  margin: 5px;
  list-style-type: none;
  padding: 0;
  font-size: 12px;
  font-family: Menlo, Monaco, monospace; }

.mixin__property {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-direction: row;
  align-items: center; }

.mixin__error {
  margin-right: 3px;
  padding: 0px 20px;
  color: red; }

.mixin__property button {
  border: none;
  background: none;
  margin: 0;
  padding: 0; }

.mixin__property button img, .mixin__property span.pad {
  margin-right: 3px;
  width: 20px; }

.mixin__property-overridden-by {
  display: none; }

.mixin__property-name {
  color: #909; }

.mixin__property-value {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-height: 14px; }

.mixin__property-value-txt {
  flex: 1;
  border: solid 1px #ccc;
  /*border: none;*/
  box-shadow: 2px 2px 2px #888;
  /*box-shadow: none;*/
  outline: none; }

.mixin__calc-btn_calculated {
  opacity: 0.4; }

.mixin__send-btn {
  width: 20px;
  opacity: 0; }

.mixin__property-value-separator {
  margin-right: 5px; }

.mixin__property .type-function {
  color: #999; }

.mixin__property .type-object {
  color: #999; }

.mixin__property .type-ember-object,
.mixin__property .type-array {
  cursor: pointer; }

.mixin__property-calculated-value {
  flex: 1;
  color: #999; }

.mixin__property .type-null, .mixin__property .type-boolean {
  color: #009; }

.mixin__property .type-descriptor {
  cursor: pointer;
  color: #900; }

.mixin__property_state_overridden {
  text-decoration: line-through; }

.mixin__property:not(.mixin__property_state_overridden):hover {
  background-color: #ffe; }

.mixin__property_state_overridden:hover .mixin__property-overridden-by {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.95);
  right: 0;
  display: inline;
  text-decoration: none; }

.mixin__property:not(.mixin__property_state_overridden):hover .mixin__send-btn {
  opacity: 1; }

.mixin__property:not(.mixin__property_state_overridden):hover .mixin__send-btn:active {
  opacity: 0.5; }

/**
 Nav
 ===
 Navigation lists and links
*/
.nav__title {
  padding: 3px 5px;
  line-height: 11px;
  height: 15px; }

.nav__title h3 {
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #6e6e6e;
  text-transform: uppercase;
  text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
  float: left;
  padding: 0;
  margin: 0; }

/* List */
.nav ul {
  clear: both;
  list-style-type: none;
  padding: 0;
  margin: 0;
  user-select: none; }

.nav li {
  display: block;
  margin-top: 2px; }

.nav li svg {
  position: absolute;
  top: 50%;
  left: 14px;
  margin-top: -10px; }

/* List anchor */
.nav li > a {
  display: block;
  height: 18px;
  line-height: 15px;
  margin-top: 1px;
  padding: 2px 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-decoration: none;
  cursor: default; }

.app.is-dragging .nav li > a {
  cursor: col-resize; }

.nav li > a polygon,
.nav li > a path,
.nav li > a rect,
.nav li > a circle {
  fill: #222; }

.nav li > a:focus {
  outline: none; }

.nav li > a.active {
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.33);
  background: #3879D9; }

.nav li > a.active polygon,
.nav li > a.active path,
.nav li > a.active rect,
.nav li > a.active circle {
  fill: #fff; }

.app.inactive .nav li > a.active {
  background: #b4b4b4; }

/* Custom navs */
.nav--main li > a {
  position: relative;
  height: 33px;
  padding-left: 40px;
  color: #333;
  line-height: 33px; }

.nav.nav--main .nav__title {
  padding-left: 15px; }

/* Custom nav title */
.nav__title--middle {
  line-height: 21px; }

/**
  NOTICE
  ===========
*/
.notice {
  margin-top: 20px;
  font-size: 14px;
  text-align: center;
  text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0; }

/**
 OBJECT-INSPECTOR
 ================
 The Object inspector
 at the far right of the screen
*/
.object-trail {
  margin-left: 39px;
  word-break: break-all; }

/**
 PILL
 ====
*/
.pill {
  font-size: 12;
  position: relative;
  cursor: default;
  display: inline-block;
  margin: 0 2px;
  padding: 2px 6px;
  line-height: 12px;
  background: transparent;
  text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
  border-radius: 8px;
  vertical-align: middle;
  background: rgba(0, 0, 0, 0.3); }

.pill_text_clear {
  text-shadow: none;
  font-weight: bold; }

.pill_not-clickable {
  cursor: inherit; }

/** MODIFIER: SIZE = SMALL **/
.pill_size_small {
  font-size: 10px;
  padding: 2px 4px; }

/**
 SEND-TO-CONSOLE
 ================
 Button to send an object
 to the console
*/
.send-to-console {
  border: none;
  background: none;
  margin: 0;
  padding: 0;
  width: 23px;
  opacity: 1;
  cursor: pointer;
  outline: none; }

.send-to-console img {
  margin-right: 3px;
  width: 20px;
  vertical-align: top; }

.send-to-console:hover {
  border-bottom: solid 1px #2b7fb3; }

.send-to-console:active {
  opacity: 0.5; }

.send-trace-to-console {
  background: url("images/send_arrow.png") left center no-repeat;
  background-size: 6px 6px;
  padding-left: 9px;
  font-size: 9px;
  cursor: pointer;
  margin-right: 10px;
  user-select: none; }

.send-trace-to-console:hover {
  color: black; }

.send-trace-to-console:active {
  opacity: 0.5; }

/**
 SIDEBAR TOGGLE
 ==============
 Button that expands or collapses sidebars
*/
.sidebar-toggle {
  position: absolute;
  top: 2px; }

.sidebar-toggle--right {
  right: -6px; }

.sidebar-toggle--left {
  left: -5px; }

.sidebar-toggle--far-left {
  left: -30px; }

/**
 SPLIT
 =====
 Vertically split panels
*/
/* .split: The container for one or more panels */
.split {
  display: flex;
  flex: auto;
  flex-direction: row;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

/* .split__panel: Contains a body, and optional header and footer elements */
.split__panel {
  display: flex;
  flex-direction: column;
  flex: auto;
  position: relative; }

.split__panel__hd,
.split__panel__bd,
.split__panel__ft {
  position: relative; }

.split__panel__hd,
.split__panel__ft {
  display: flex;
  flex: none;
  flex-direction: column;
  box-sizing: border-box;
  padding: 1px 2px;
  min-height: 23px;
  line-height: 20px;
  border-color: #cacaca; }

.split__panel__hd {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  background: #fff; }

.split__panel__bd {
  flex: auto;
  overflow: auto; }

.split__panel__ft {
  border-top-width: 1px;
  border-top-style: solid;
  background: #e8e8e8; }

/* Fix visibility issue with phantomjs test runner
   https://github.com/emberjs/ember-inspector/pull/206#issuecomment-55292354 */
.split__panel,
.split__panel__bd {
  z-index: 1;
  /* Fixes bug where empty list-view appears over the top */
  height: 100%; }

/* Custom panels */
.split__panel--sidebar-1 .split__panel__bd {
  background: #e8e8e8; }

.split__panel--sidebar-1 > .split__panel__ft {
  text-align: center; }

.split__panel--sidebar-2 .split__panel__bd {
  background: #f3f3f3; }

/* Fix main list-view scrolling */
.split--main > .split__panel > .split__panel__bd {
  overflow-y: hidden; }

.split--main > .split__panel--sidebar-1 > .split__panel__bd {
  overflow-y: auto; }

.toolbar {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  align-items: center; }

.toolbar > * {
  -webkit-flex: none;
  flex: none; }

/**
 Toolbar Title
 =============
*/
.toolbar__title {
  -webkit-flex: auto;
  flex: auto;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

/**
 Toolbar Icon Buttons
 ====================
*/
.toolbar__icon-button {
  display: inline-block;
  width: 32px;
  height: 20px;
  margin-left: 0;
  padding: 0;
  vertical-align: top;
  border: 0 transparent none;
  background-color: transparent;
  background: white; }

.toolbar__icon-button:first-child {
  margin-left: -2px; }

.toolbar__icon-button:focus {
  outline: none; }

.toolbar__icon-button .svg-stroke {
  stroke: #676767; }

.toolbar__icon-button .svg-fill {
  fill: #676767; }

.toolbar__icon-button:hover .svg-stroke {
  stroke: #404040; }

.toolbar__icon-button:hover .svg-fill {
  fill: #404040; }

.toolbar__icon-button:active {
  transform: translate(1px, 1px); }

/* active (highlighted) */
.toolbar__icon-button.active .svg-stroke {
  stroke: #4281eb; }

.toolbar__icon-button.active .svg-fill {
  fill: #4281eb; }

/* disabled */
.toolbar__icon-button.disabled {
  pointer-events: none; }

.toolbar__icon-button.disabled:active {
  transform: none; }

.toolbar__icon-button.disabled .svg-stroke {
  stroke: #cacaca; }

.toolbar__icon-button.disabled .svg-fill {
  fill: #cacaca; }

/**
 Toolbar Checkboxes
 ==================
*/
.toolbar__checkbox {
  margin: auto 6px auto 0;
  height: auto;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden; }

/**
 Toolbar Radio Button Pills
 ==========================
*/
.toolbar__radio {
  font-size: 12px;
  line-height: 18px;
  position: relative;
  cursor: default;
  display: inline-block;
  margin-right: 6px;
  padding: 2px 6px;
  line-height: 12px;
  background: transparent;
  text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
  border: none;
  border-radius: 8px;
  vertical-align: middle; }

.toolbar__radio:active,
.toolbar__radio:hover,
.toolbar__radio:focus,
.toolbar__radio.active {
  outline: none;
  color: white;
  text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0; }

.toolbar__radio:hover {
  background: rgba(0, 0, 0, 0.2); }

.toolbar__radio:active {
  background: rgba(0, 0, 0, 0.5); }

.toolbar__radio.active {
  background: rgba(0, 0, 0, 0.3); }

/**
 Toolbar Search
 ==============
*/
.toolbar__search {
  margin-right: 6px; }

.toolbar__search input {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #b3b3b3;
  border-radius: 2px;
  margin: auto 0;
  padding: 0 3px;
  margin: 0;
  -webkit-appearance: none;
  font-size: 12px;
  background-color: #FFF;
  height: 20px;
  line-height: normal;
  width: 179px; }

.toolbar__search input:focus {
  outline: none; }

.toolbar__search--small input {
  width: 150px; }

/**
 Toolbar Divider
 ===============
*/
.toolbar .divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  position: relative;
  margin-right: 6px;
  background-color: #cacaca; }