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-container {
  overflow-y: 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-InputArea-editor.jp-CodeMirror {
  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-OutputArea > .jp-OutputArea-output {
  margin-left: 90px;
  display: flex;
  flex-direction: row;
}


.jp-OutputArea > .jp-OutputArea-output.jp-OutputArea-executeResult {
  margin-left: 0px;
  flex: 1 1 auto;
}


.jp-OutputArea-output.jp-OutputArea-executeResult > .jp-OutputArea-prompt {
  color: #D84315;
  font-family: monospace;
  text-align: right;
  line-height: 20px;
  padding: 0.4em;
  font-size: 14px;
  flex: 0 0 90px;
  box-sizing: border-box;
}


.jp-OutputArea-output > .jp-OutputArea-result {
  padding: 4px;
}


.jp-OutputArea pre {
  border: none;
}


.jp-OutputArea > .jp-OutputArea-output.jp-OutputArea-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-otherSelected.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: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  outline: none;
}


.jp-MarkdownCell {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


.jp-NBToolbar {
    display: flex;
    flex-direction: row;
    background-color: #F8F8F8;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
}


.jp-NBToolbar > .jp-NBToolbar-item {
    flex: 0 0 auto;
    padding-left: 8px;
    padding-right: 8px;
    vertical-align: middle;
    font-size: 13px;
    font-family: "Helvetica Neue";
    color: #767676;
}


.jp-NBToolbar-item.jp-NBToolbar-button,
.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator {
    font-family: FontAwesome;
    padding-top: 5px;
    padding-bottom: 6px;
    color: #616161;
    text-align: center;
    display: inline-block;
}


.jp-NBToolbar-item.jp-NBToolbar-cellWrapper {
    border-left: 1px solid #E0E0E0;
    border-right: 1px solid #E0E0E0;
    flex-basis: 100px;
    padding-top: 3px;
    padding-bottom: 3px;
}


.jp-NBToolbar-cellType.jp-NBToolbar-item {
    font-size: 13px;
    font-family: "Helvetica Neue";
    color: #767676;
}


.jp-NBToolbar-cellWrapper .jp-NBToolbar-cellType {
    border: none;
    border-radius: 0;
    outline: none;
    width: 100%;
}


.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-item.jp-NBToolbar-kernelName {
    text-align: right;
    color: #767676;
    flex-grow: 1;
    flex-shrink: 1;
    padding-top: 4px;
    padding-bottom: 4px;
}


.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-CodeMirror > .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-CodeMirror > .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-CodeMirror > .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-CodeMirror > .CodeMirror-linenumber {
  padding: 0 8px 0 4px;
}


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


.jp-CodeMirror > .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;
}