jupyterlab/src/notebook/theme.css

/*-----------------------------------------------------------------------------
| Copyright (c) 2014-2016, Jupyter Development Team.
|
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/
/* Increased specificity in case phosphor css is loaded later. */
.p-Widget.jp-Notebook {
  margin-top: 20px;
  min-width: 50px;
  min-height: 50px;
  outline: none;
}


.p-Widget.jp-Notebook-panel {
  height: 100%;
}


.p-Widget.jp-Notebook-container {
  overflow: auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
}


.jp-InputArea-prompt {
  flex-basis: 90px;
  color: #303F9F;
  font-family: monospace;
  padding: 0.4em;
  text-align: right;
  line-height: 20px;
  font-size: 14px;
}


.jp-InputArea-editor {
  height: auto;
  min-height: 2em;
}


.jp-CellEditor {
  border: 1px solid #cfcfcf;
  border-radius: 2px;
  background: #f7f7f7;
  line-height: 1.2em;
  padding: 4px;
}


.jp-MarkdownCell {
  outline: 0;
}


.jp-MarkdownCell.jp-mod-rendered {
  padding-left: 100px;
}


.jp-MarkdownCell-renderer {
  padding-left: 4px;
}


.jp-OutputArea {
  background: #FFFFFF;
}


.jp-Output {
  display: flex;
  flex-direction: row;
}


.jp-Output-executeResult {
  margin-left: 0px;
  flex: 1 1 auto;
}


.jp-Output-prompt {
  color: #D84315;
  font-family: monospace;
  text-align: right;
  vertical-align: middle;
  padding: 0.4em;
  font-size: 14px;
  flex: 0 0 90px;
  box-sizing: border-box;
}


.jp-Output-result {
  padding: 0.4em;
}


.jp-Output pre {
  border: none;
  margin: 0;
  overflow-x: auto;
  overflow-y: auto;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-wrap;
}


.jp-Output-stderr {
  background: #fdd;
}


.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-active.jp-mod-selected {
  border-color: #ABABAB;
  border-left-width: 1px;
  background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 5px, transparent 5px, transparent 100%);
}


.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-multiSelected.jp-mod-active {
  background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 7px, #E3F2FD 7px, #E3F2FD 100%);
}


.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-selected {
  background: #E3F2FD;
}


.jp-Notebook.jp-mod-editMode .jp-Notebook-cell.jp-mod-active {
  border-color: #66BB6A;
  border-left-width: 1px;
  background: linear-gradient(to right, #66BB6A -40px, #66BB6A 5px, transparent 5px, transparent 100%);
}


.jp-Cell {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  outline: none;
}

.jp-NBToolbar {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #E0E0E0;
    height: 24px;
}


.jp-NBToolbar > .jp-NBToolbar-item {
    flex: 0 0 auto;
    padding-left: 8px;
    padding-right: 8px;
    vertical-align: middle;
    font-size: 14px;
    color: #616161;
    line-height: 23px;
}


.jp-NBToolbar-item.jp-NBToolbar-button,
.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator {
    font-family: FontAwesome;
    text-align: center;
    display: inline-block;
}


.jp-NBToolbar-item.jp-NBToolbar-cellType select {
    background: #FFFFFF;
}

.jp-NBToolbar-cellType .jp-NBToolbar-cellTypeDropdown {
    border: 1px solid #BDBDBD;
    border-radius: 0;
    outline: none;
    width: 100%;
    font-size: 14px;
    line-height: 23px;
    color: #616161;
}


.jp-NBToolbar-item.jp-NBToolbar-kernelName {
    text-align: right;
    flex-grow: 1;
    flex-shrink: 1;
}


.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator {
    border-right: none;
}


.jp-NBToolbar-button.jp-mod-pressed {
    background-color: #E0E0E0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}


.jp-NBToolbar-button:hover {
    background-color: #EEEEEE;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}


.jp-NBToolbar-button.jp-NBToolbar-save::before {
   content: "\f0c7";  /* Save */
}


.jp-NBToolbar-button.jp-NBToolbar-insert::before {
   content: "\f067";  /* Plus */
}


.jp-NBToolbar-button.jp-NBToolbar-cut::before {
   content: "\f0c4";  /* Cut */
}


.jp-NBToolbar-button.jp-NBToolbar-copy::before {
   content: "\f0c5";  /* Copy */
}


.jp-NBToolbar-button.jp-NBToolbar-paste::before {
   content: "\f0ea";  /* Paste */
}


.jp-NBToolbar-button.jp-NBToolbar-run::before {
   content: "\f051";  /* Step-forward */
}


.jp-NBToolbar-button.jp-NBToolbar-interrupt::before {
   content: "\f04d";  /* Stop */
}


.jp-NBToolbar-button.jp-NBToolbar-restart::before {
   content: "\f01e";  /* Rotate-right */
}


.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator::before {
    content: "\f10c";  /* Circle-o */
}


.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator.jp-mod-busy::before {
    content: "\f111";  /* Circle */
}


.jp-CellEditor > .CodeMirror {
  line-height: 1.21429em;
  /* Changed from 1em to our global default */
  font-size: 14px;
  height: auto;
  /* Changed to auto to autogrow */
  background: none;
  /* Changed from white to allow our bg to show through */
}


.jp-CellEditor > .CodeMirror-scroll {
  /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
  /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
  overflow-y: hidden;
  overflow-x: auto;
}


.jp-CellEditor > .CodeMirror-lines {
  /* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
  /* we have set a different line-height and want this to scale with that. */
  padding: 0.4em;
}


.jp-CellEditor > .CodeMirror-linenumber {
  padding: 0 8px 0 4px;
}


.jp-CellEditor > .CodeMirror-gutters {
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
}


.jp-CellEditor > .CodeMirror pre {
  /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
  /* .CodeMirror-lines */
  padding: 0;
  border: 0;
  border-radius: 0;
}


.jp-Console {
  height: 100%;
}


.jp-Console .jp-Cell {
  padding-top: 0;
  padding-bottom: 0;
}


.jp-Console .jp-InputArea-editor.jp-CellEditor {
  background: transparent;
  border-color: transparent;
}


.jp-Console .jp-InputArea-prompt {
  flex-basis: auto;
  text-align: left;
}


.jp-Console .jp-Output.jp-Output-executeResult > .jp-Output-prompt {
  flex-basis: auto;
  text-align: left;
}


.jp-Console .jp-OutputArea pre {
  border: none;
  line-height: 25px;
  margin: 0;
}


.jp-Console .jp-Console-banner .jp-InputArea-prompt {
  display: none;
}


.jp-ConsoleTooltip {
  position: absolute;
  background: #FFFFCA;
  border: 1px solid #000000;
  z-index: 10001;
}

.jp-ConsoleTooltip pre {
  margin: 0;
  padding: 2px;
}


/* ansi_up creates classed spans for console foregrounds and backgrounds. */
.jp-ConsoleTooltip pre .ansi-black-fg { color: #3A3A3A; }


.jp-ConsoleTooltip pre .ansi-red-fg { color: #DD948E; }


.jp-ConsoleTooltip pre .ansi-green-fg { color: #B6D1AA; }


.jp-ConsoleTooltip pre .ansi-yellow-fg { color: #F3D57C; }


.jp-ConsoleTooltip pre .ansi-blue-fg { color: #8AA9D5; }


.jp-ConsoleTooltip pre .ansi-magenta-fg { color: #CBAFD5; }


.jp-ConsoleTooltip pre .ansi-cyan-fg { color: #9AD1D4; }


.jp-ConsoleTooltip pre .ansi-white-fg { color: #EFEFEF; }


.jp-ConsoleTooltip pre .ansi-bright-black-fg { color: #5E5D5E; }


.jp-ConsoleTooltip pre .ansi-bright-red-fg { color: #E69B94; }


.jp-ConsoleTooltip pre .ansi-bright-green-fg { color: #D1F0C3; }


.jp-ConsoleTooltip pre .ansi-bright-yellow-fg { color: #F4D799; }


.jp-ConsoleTooltip pre .ansi-bright-blue-fg { color: #A6CBFE; }


.jp-ConsoleTooltip pre .ansi-bright-magenta-fg { color: #E8C8F3; }


.jp-ConsoleTooltip pre .ansi-bright-cyan-fg { color: #B1F1F6; }


.jp-ConsoleTooltip pre .ansi-bright-white-fg { color: #FFFFFF; }


.jp-ConsoleTooltip pre .ansi-black-bg { background-color: #3B3B3B; }


.jp-ConsoleTooltip pre .ansi-red-bg { background-color: #DE958F; }


.jp-ConsoleTooltip pre .ansi-green-bg { background-color: #B7D2AB; }


.jp-ConsoleTooltip pre .ansi-yellow-bg { background-color: #F4D67D; }


.jp-ConsoleTooltip pre .ansi-blue-bg { background-color: #8BAAD6; }


.jp-ConsoleTooltip pre .ansi-magenta-bg { background-color: #CCB0D6; }


.jp-ConsoleTooltip pre .ansi-cyan-bg { background-color: #9BD2D5; }


.jp-ConsoleTooltip pre .ansi-white-bg { background-color: #F0F0F0; }


.jp-ConsoleTooltip pre .ansi-bright-black-bg { background-color: #5F5E5F; }


.jp-ConsoleTooltip pre .ansi-bright-red-bg { background-color: #E79C95; }


.jp-ConsoleTooltip pre .ansi-bright-green-bg { background-color: #D2F1C4; }


.jp-ConsoleTooltip pre .ansi-bright-yellow-bg { background-color: #F5D89A; }


.jp-ConsoleTooltip pre .ansi-bright-blue-bg { background-color: #A7CCFF; }


.jp-ConsoleTooltip pre .ansi-bright-magenta-bg { background-color: #E8C8F3; }


.jp-ConsoleTooltip pre .ansi-bright-cyan-bg { background-color: #B1F1F6; }


.jp-ConsoleTooltip pre .ansi-bright-white-bg { background-color: #FFFFFF; }


.jp-Completion {
  background: #EEEEEE;
  border: 1px solid #000000;
  list-style-type: none;
  margin: 0;
  overflow: auto;
  padding: 0;
  position: absolute;
  z-index: 10001;
}


.jp-Completion-item {
  margin: 0;
  min-width: 150px;
  padding: 0 2px;
}


.jp-Completion-item:nth-child(odd) {
  background: #FFFFFF;
}


.jp-Completion-item.jp-mod-active {
  background: #BFBFBF;
}


.jp-Completion-item code {
  font-size: 14px;
  line-height: 25px;
}


.jp-Completion-item mark {
  font-weight: bold;
  text-decoration: underline;
  background: inherit;
  color: inherit;
}