jupyterlab/packages/notebook/style/index.css

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
| Private CSS variables
|----------------------------------------------------------------------------*/


:root {
  --jp-private-notebook-dragImage-width: 304px;
  --jp-private-notebook-dragImage-height: 36px;
  --jp-private-notebook-selected-color: var(--md-blue-400);
  --jp-private-notebook-multiselected-color: var(--md-blue-50);
  --jp-private-notebook-active-color: var(--md-green-400);
}

/*-----------------------------------------------------------------------------
| Imports
|----------------------------------------------------------------------------*/


@import './toolbar.css';


/*-----------------------------------------------------------------------------
| Notebook
|----------------------------------------------------------------------------*/


.jp-NotebookPanel {
  display: flex;
  flex-direction: column;
  height: 100%;
}


.jp-Notebook {
  flex: 1 1 auto;
  padding: var(--jp-notebook-padding);
  min-width: 50px;
  min-height: 50px;
  outline: none;
  overflow: auto;
  background: var(--jp-layout-color1);
}


.jp-Notebook::after {
  display: block;
  content: '';
  min-height: var(--jp-notebook-scroll-padding);
}


.jp-Notebook .jp-Cell {
  overflow: visible
}


.jp-Notebook .jp-Cell .jp-InputPrompt {
  cursor: move;
}


.jp-Notebook .jp-Cell .jp-OutputArea {
  max-height: 1000px;
}


/*-----------------------------------------------------------------------------
| Notebook state related styling
|
| The notebook and cells each have states, here are the possibilities:
|
| - Notebook
|   - Command
|   - Edit
| - Cell
|   - None
|   - Active (only one can be active)
|   - Selected (the cells actions are applied to)
|   - Multiselected (when multiple selected, the cursor)
|   - No outputs
|----------------------------------------------------------------------------*/

/* Command or edit modes */

.jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-InputPrompt {
  opacity: var(--jp-cell-prompt-opacity-not-active);
  color: var(--jp-cell-prompt-font-color-not-active);
}

.jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-OutputPrompt {
  opacity: var(--jp-cell-prompt-opacity-not-active);
  color: var(--jp-cell-prompt-font-color-not-active);
}

.jp-Notebook .jp-Cell.jp-mod-active .jp-Cell-inputCollapser,
.jp-Notebook .jp-Cell.jp-mod-active .jp-Cell-outputCollapser {
  border-left: 2px solid var(--jp-brand-color1);
  border-top: 2px solid var(--jp-brand-color1);
  border-bottom: 2px solid var(--jp-brand-color1);
}


/* Command mode */

.jp-Notebook.jp-mod-commandMode .jp-Cell.jp-mod-selected {
  background: var(--jp-private-notebook-multiselected-color);
}

.jp-Notebook.jp-mod-commandMode .jp-Cell.jp-mod-active.jp-mod-selected:not(.jp-mod-multiSelected) {
  background: transparent;
}


/* Edit mode */

.jp-Notebook.jp-mod-editMode .jp-Cell.jp-mod-active .jp-InputArea-editor {
  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color-edit);
  background: var(--jp-cell-editor-background-edit);
  box-shadow: inset 0 0 2px var(--md-blue-300);
}


/*-----------------------------------------------------------------------------
| Notebook drag and drop
|----------------------------------------------------------------------------*/


.jp-Notebook-cell.jp-mod-dropSource {
  opacity: 0.5;
}


.jp-Notebook-cell.jp-mod-dropTarget,
.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-active.jp-mod-selected.jp-mod-dropTarget {
  border-top-color: var(--jp-private-notebook-selected-color);
  border-top-style: solid;
  border-top-width: 2px;
}


.jp-dragImage {
  display: flex;
  flex-direction: row;
  width: var(--jp-private-notebook-dragImage-width);
  height: var(--jp-private-notebook-dragImage-height);
  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
  background: var(--jp-layout-color1);
  overflow: visible;
}


.jp-dragImage-singlePrompt {
  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.12);
}


.jp-dragImage .jp-dragImage-content {
    flex: 1 1 auto;
    z-index: 2;
    font-size: var(--jp-code-font-size);
    font-family: monospace;
    line-height: var(--jp-code-line-height);
    padding: var(--jp-code-padding);
    border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
    background: var(--jp-cell-editor-background);
    color: var(--jp-content-font-color3);
    text-align: left;
    margin: 4px 4px 4px 0px;
}

.jp-dragImage .jp-dragImage-prompt {
  flex: 0 0 auto;
  min-width: 36px;
  color: var(--jp-cell-inprompt-font-color);
  padding: var(--jp-code-padding);
  padding-left: 12px;
  font-family: 'Roboto Mono', monospace;
  letter-spacing: var(--jp-cell-prompt-letter-spacing);
  line-height: 1.9;
  font-size: var(--jp-code-font-size);
  border: var(--jp-border-width) solid transparent;
}

.jp-dragImage-multipleBack {
  z-index: -1;
  position: absolute;
  height: 32px;
  width: 300px;
  top: 8px;
  left: 8px;
  background: #EEEEEE;
  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.12);
}

/*-----------------------------------------------------------------------------
| Cell toolbar
|----------------------------------------------------------------------------*/


.jp-CellTools {
  display: flex;
  flex-direction: column;
  min-width: 300px;
  color: var(--jp-ui-font-color1);
  background: var(--jp-layout-color1);
  font-size: var(--jp-ui-font-size1);
}


.jp-ActiveCellTool {
  padding: 12px;
  border-bottom: 1px solid var(--jp-border-color1);
  background-color: var(--jp-border-color3);
}


.jp-ActiveCellTool .jp-InputArea-prompt {
  flex: 0 0 auto;
  padding-left: 0px;
}


.jp-ActiveCellTool .jp-InputArea-editor {
  flex: 1 1 auto;
  background-color: white;
  border-color: var(--jp-border-color1);
}


.jp-CellTools-tool:not(:first-child) {
  border-top: 1px solid var(--md-grey-300);
}


.jp-MetadataEditorTool {
  flex-direction: column;
}


.jp-KeySelector {
  padding: 12px;
}


.jp-KeySelector .jp-select-wrapper {
  background: white;
}


.jp-KeySelector select.jp-mod-styled {
  font-size: var(--jp-ui-font-size1);
  color: var(--jp-ui-font-color0);
}


.jp-KeySelector .jp-select-wrapper:not(.jp-mod-focused) {
  border: var(--jp-border-width) solid var(--jp-border-color1);
}


.jp-KeySelector label {
  line-height: 1.4;
}