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: var(--jp-cell-prompt-width);
  --jp-private-notebook-dragImage-height: 39px;
  --jp-private-notebook-dragImage-circleRadius: 20px;
  --jp-private-notebook-selected-color: var(--md-blue-400);
  --jp-private-notebook-multiselected-color: var(--md-blue-50);
  --jp-private-notebook-left-border-width: 5px;
  --jp-private-notebook-active-color: var(--md-green-400);
}

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


@import './toolbar.css';


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


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


.jp-NotebookPanel-toolbar {
  box-shadow: 0px 0.4px 6px 0px rgba(0,0,0,0.1);
  z-index: 1;
}


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


.jp-Notebook .jp-Cell .jp-Cell-inputCollapser,
.jp-Notebook .jp-Cell .jp-Cell-outputCollapser {
  flex: 0 0 12px;
}



/*-----------------------------------------------------------------------------
| 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);
}

.jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-OutputPrompt {
  opacity: var(--jp-cell-prompt-opacity-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;
}


.jp-dragImage {
  position: absolute;
  width: var(--jp-private-notebook-dragImage-width);
  height: var(--jp-private-notebook-dragImage-height);
  border: var(--jp-border-width) solid black;
  background: var(--jp-layout-color1);
  overflow: visible;
}


.jp-dragImage .jp-filledCircle {
    position: absolute;
    left: calc( ( var(--jp-private-notebook-dragImage-width) - var(--jp-private-notebook-dragImage-circleRadius) ) / 2 );
    top: calc( ( var(--jp-private-notebook-dragImage-height) - var(--jp-private-notebook-dragImage-circleRadius) ) / 2 );
    border-radius: 50%;

    width: var(--jp-private-notebook-dragImage-circleRadius);
    height: var(--jp-private-notebook-dragImage-circleRadius);

    background: var(--jp-accent-color1);
    color: white;
    text-align: center;
    line-height: var(--jp-private-notebook-dragImage-circleRadius);
}


/*-----------------------------------------------------------------------------
| 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-Cell-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;
}