atom-nuclide/pkg/nuclide-console/styles/nuclide-console.less

A unified developer experience for web and mobile development, built as a suite of features on top of Atom to provide hackability and the support of an active community.

@import "ui-variables";
@import "syntax-variables";

@nuclide-console-border-size: 1px;
@nuclide-console-record-background-color-normal: @syntax-background-color;
@nuclide-console-record-text-color-normal: @syntax-text-color;
@nuclide-console-record-border-color-normal: @base-border-color;
@nuclide-console-record-background-color-error: lighten(@background-color-error, 25%);
@nuclide-console-record-text-color-error: darken(@text-color-error, 40%);
@nuclide-console-record-border-color-error: @background-color-error;
@nuclide-console-record-background-color-warning: lighten(@background-color-warning, 25%);
@nuclide-console-record-text-color-warning: darken(@text-color-warning, 40%);
@nuclide-console-record-border-color-warning: @background-color-warning;
@nuclide-console-record-background-color-success: lighten(@background-color-success, 25%);
@nuclide-console-record-text-color-success: darken(@text-color-success, 40%);
@nuclide-console-record-border-color-success: @background-color-success;
@nuclide-console-record-vertical-padding: 1px;
@nuclide-console-record-horizontal-padding: 5px;
@nuclide-console-icon-size: 11px;

// Color variables for `level-color` classes.
@nuclide-console-record-background-color-red: lighten(@background-color-error, 25%);
@nuclide-console-record-text-color-red: darken(@text-color-error, 40%);
@nuclide-console-record-background-color-orange: lighten(@ui-site-color-3, 25%);
@nuclide-console-record-text-color-orange: darken(@ui-site-color-3, 40%);
@nuclide-console-record-background-color-yellow: lighten(@ui-site-color-5, 25%);
@nuclide-console-record-text-color-yellow: darken(@ui-site-color-5, 50%);
@nuclide-console-record-background-color-green: lighten(@ui-site-color-2, 25%);
@nuclide-console-record-text-color-green: darken(@ui-site-color-2, 40%);
@nuclide-console-record-background-color-blue: lighten(@ui-site-color-1, 25%);
@nuclide-console-record-text-color-blue: darken(@ui-site-color-1, 40%);
@nuclide-console-record-background-color-purple: lighten(@ui-site-color-4, 25%);
@nuclide-console-record-text-color-purple: darken(@ui-site-color-4, 40%);
@nuclide-console-record-background-color-violet: lighten(@ui-site-color-4, 35%);
@nuclide-console-record-text-color-violet: darken(@ui-site-color-4, 30%);
@nuclide-console-record-text-color-rainbow: #000;

// Console text should be smaller than normal text. Gotta fit more!
@nuclide-console-record-font-size: @font-size * 0.9;

.nuclide-console {
  display: flex;
  flex-direction: column;
  width: 100%;
}

// If the console is displayed in a pane, change the color of the header to
// match.
.nuclide-ui-toolbar {
  background-color: @pane-item-background-color;

  atom-panel & {
    background-color: @tool-panel-background-color;
  }
}

.nuclide-console-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: @syntax-background-color;
  min-height: 0;
}

.nuclide-console-lazy-nested-value div, .nuclide-console-lazy-nested-value span {
  font-size: @nuclide-console-record-font-size;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  word-break: normal;
  word-wrap: break-word;
}

.nuclide-console-lazy-nested-value {
  display: flex;

  // The following selectors style the tree components inside of the LazyNestedValueComponent
  // instance that is used by the console.

  .list-item::before {
    div {
      display: flex;
    }
  }

  .list-tree li:not(.list-nested-item) {
    line-height: 1.6em;
  }

  div.list-item > div {
    display: inline-block;
  }
}

.nuclide-console-scroll-pane {
  overflow-y: auto;
  overflow-x: hidden;
  background-color: @syntax-background-color;

  // Hack: This ensures that the scrollbar appears on top of all of the records.
  //       Without it, the atom-text-editors appear above the scrollbar.
  transform: translate3d(0, 0, 0);
}

.nuclide-console-table-wrapper {
  // Make sure that record text is selectable.
  -webkit-user-select: text;
}

.nuclide-console-record {
  display: flex;
  padding: @nuclide-console-record-vertical-padding @nuclide-console-record-horizontal-padding;
  background-color: @nuclide-console-record-background-color-normal;
  border-radius: 0;
  border-top: @nuclide-console-border-size solid @nuclide-console-record-border-color-normal;

  pre {
    background-color: transparent;
    color: @nuclide-console-record-text-color-normal;

    // Break on words
    word-break: normal;
    white-space: pre-wrap;
  }

  .icon {
    color: fadeout(@nuclide-console-record-text-color-normal, 70%);
    text-align: center;
  }

  &,
  pre,
  atom-text-editor,
  .icon,
  .icon::before {
    font-size: @nuclide-console-record-font-size;
  }

  .icon::before {
    width: @nuclide-console-record-font-size;
    margin-right: 0.5em;
  }

  &:first-child {
    border-top: none;
  }

  &:last-child {
    border-bottom: @nuclide-console-border-size solid @nuclide-console-record-border-color-normal;
  }

  &.level-info {
    .icon {
      color: @text-color-info;
    }
  }

  &.level-warning {
    background-color: @nuclide-console-record-background-color-warning;
    border-color: @nuclide-console-record-border-color-warning;

    // The border on both sides of the warning message should be the warning
    // color unless it's a higher-level (error).
    & + :not(.level-error) {
      border-top-color: @nuclide-console-record-border-color-warning;
    }

    pre, .nuclide-console-lazy-nested-value div, .nuclide-console-lazy-nested-value span {
      color: @nuclide-console-record-text-color-warning;
    }

    .icon {
      color: @nuclide-console-record-border-color-warning;
    }
  }

  &.level-success {
    background-color: @nuclide-console-record-background-color-success;
    border-color: @nuclide-console-record-border-color-success;

    // The border on both sides of the success message should be the success
    // color unless it's a higher-level.
    & + :not(.level-error):not(.level-warning) {
      border-top-color: @nuclide-console-record-border-color-success;
    }

    pre, .nuclide-console-lazy-nested-value div, .nuclide-console-lazy-nested-value span {
      color: @nuclide-console-record-text-color-success;
    }

    .icon {
      color: @nuclide-console-record-border-color-success;
    }
  }

  &.level-error {
    background-color: @nuclide-console-record-background-color-error;
    border-color: @nuclide-console-record-border-color-error;

    // The border on both sides of the error should be the error color.
    & + .nuclide-console-record {
      border-top-color: @nuclide-console-record-border-color-error;
    }

    pre, .nuclide-console-lazy-nested-value div, .nuclide-console-lazy-nested-value span {
      color: @nuclide-console-record-text-color-error;
    }

    .icon {
      color: @nuclide-console-record-border-color-error;
    }

  }

  // Console record colors for `level-color` classes.
  &.level-red {
    background-color: @nuclide-console-record-background-color-red;
    pre, .nuclide-console-lazy-nested-value div, .nuclide-console-lazy-nested-value span {
      color: @nuclide-console-record-text-color-red;
    }
  }

  &.level-orange {
    background-color: @nuclide-console-record-background-color-orange;
    pre, .nuclide-console-lazy-nested-value div, .nuclide-console-lazy-nested-value span {
      color: @nuclide-console-record-text-color-orange;
    }
  }

  &.level-yellow {
    background-color: @nuclide-console-record-background-color-yellow;
    pre, .nuclide-console-lazy-nested-value div, .nuclide-console-lazy-nested-value span {
      color: @nuclide-console-record-text-color-yellow;
    }
  }

  &.level-green {
    background-color: @nuclide-console-record-background-color-green;
    pre, .nuclide-console-lazy-nested-value div, .nuclide-console-lazy-nested-value span {
      color: @nuclide-console-record-text-color-green;
    }
  }

  &.level-blue {
    background-color: @nuclide-console-record-background-color-blue;
    pre, .nuclide-console-lazy-nested-value div, .nuclide-console-lazy-nested-value span {
      color: @nuclide-console-record-text-color-blue;
    }
  }

  &.level-purple {
    background-color: @nuclide-console-record-background-color-purple;
    pre, .nuclide-console-lazy-nested-value div, .nuclide-console-lazy-nested-value span {
      color: @nuclide-console-record-text-color-purple;
    }
  }

  &.level-violet {
    background-color: @nuclide-console-record-background-color-violet;
    pre, .nuclide-console-lazy-nested-value div, .nuclide-ui-lazy-nested-value span {
      color: @nuclide-console-record-text-color-violet;
    }
  }

  &.level-rainbow {
    background: #fff;
    background-image: linear-gradient(
      to right,
      rgba(255, 0, 0, .4) 0%,
      rgba(255, 165, 0, .4) 20%,
      rgba(255, 255, 0, .4) 40%,
      rgba(173, 255, 47, .4) 60%,
      rgba(0, 191, 255, .4) 80%,
      rgba(138, 43, 226, .4) 100%
    );
    pre,
    .nuclide-console-lazy-nested-value div,
    .nuclide-ui-lazy-nested-value span,
    .list-group li:not(.list-nested-item),
    .list-tree li:not(.list-nested-item),
    .list-group li.list-nested-item > .list-item,
    .list-tree li.list-nested-item > .list-item {
      color: @nuclide-console-record-text-color-rainbow;
    }
  }

  pre {
    display: inline;
    padding: 0;
    background-color: transparent;
  }

  &.request {
    display: flex;
    background-color: @syntax-background-color;
  }

}

.nuclide-console-record-content-wrapper {
  display: flex;
  width: 100%;

  // Give the source label a little breathing room. We don't apply this directly
  // to the label because that would affect text wrapping around it.
  padding-top: 1px;
  padding-bottom: 1px;

  .nuclide-ui-lazy-nested-value-treelist {

    // Inherit the line-height so that it's the same as other records. If we
    // don't do this, the expandable items will be taller.
    li.list-nested-item > .list-item,
    .list-item {
      line-height: inherit;
    }
  }
}

.nuclide-console-record-source-label {
  align-self: flex-start;
  margin: 2px 0 0 4px;
  white-space: nowrap;
  font-size: 0.8em; // This makes the label < 1 line tall in most themes.

  // Ramp up the specificity and override Atom's default label padding.
  span& {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.nuclide-console-input-wrapper {
  display: flex;
  background-color: @syntax-background-color;
  padding: @nuclide-console-record-vertical-padding 0;
  flex-grow: 1;

  // Make the text in the input field the same size as the records'.
  atom-text-editor {
    font-size: @nuclide-console-record-font-size;
  }
}

.nuclide-console-prompt {
  display: flex;
  padding: 5px @nuclide-console-record-horizontal-padding;
  border-top: 1px solid @pane-item-border-color;
  background-color: @syntax-background-color;
  color: @syntax-text-color;
  min-height: 30px;
}

.nuclide-console-prompt-wrapper {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.nuclide-console-prompt-label {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.8em;
  padding-right: 1em;
}

.nuclide-console-scroll-pane-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nuclide-console-new-messages-notification {
  position: absolute;
  bottom: 0;
  left: 50%;
  text-align: center;
  padding-left: @component-padding;
  padding-right: @component-padding;
  cursor: pointer;

  // Use a timing function that approximates easeOutBack.
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  &.visible {
    // Using both margin-bottom and translateY allows us to combine percentage-
    // and pixel-based sizes.
    margin-bottom: @component-padding / 2;
    // translateX to center horizontally, translateY for hiding.
    transform: translateX(-50%) translateY(0);
  }

  &:not(.visible) {
    margin-bottom: 0;
    transform: translateX(-50%) translateY(100%);
  }
}

.nuclide-console-new-messages-notification-icon {
  text-align: left;

  &::before {
    width: auto;
  }
}

// Target the filter field, making sure that we have a great enough specificity.
atom-text-editor[mini].nuclide-console-filter-field {
  // Make it butt up against the button.
  float: left;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;

  &.is-focused {
    // When focused, layer this on top of the regexp button so that the outline
    // overlays it.
    z-index: 1;
  }

  &.invalid {
    background-color: @nuclide-console-record-background-color-error;
    color: @nuclide-console-record-text-color-error;
    border-color: @nuclide-console-record-border-color-error;
  }
}

.btn.nuclide-console-filter-regexp-button {
  position: relative;
  left: -1px;
  font-weight: bold;
  font-family: Menlo, monospace;
}

.nuclide-console-header-icon-fill {
  fill: @text-color;
}

.nuclide-console-header-filter-icon {
  display: flex;
}

.nuclide-console-header-funnel-icon {
  height: 12px;
}