461 lines
11 KiB
CSS
461 lines
11 KiB
CSS
/* stylelint-disable no-descending-specificity */
|
||
|
||
/* 源码地址：https://github.com/jupyterlab/jupyterlab/blob/master/packages/notebook/style/base.css */
|
||
|
||
/* -----------------------------------------------------------------------------
|
||
| Copyright (c) Jupyter Development Team.
|
||
| Distributed under the terms of the Modified BSD License.
|
||
|---------------------------------------------------------------------------- */
|
||
|
||
/* -----------------------------------------------------------------------------
|
||
| CSS variables
|
||
|---------------------------------------------------------------------------- */
|
||
|
||
:root {
|
||
--jp-side-by-side-output-size: 1fr;
|
||
--jp-side-by-side-resized-cell: var(--jp-side-by-side-output-size);
|
||
--jp-private-notebook-dragImage-width: 304px;
|
||
--jp-private-notebook-dragImage-height: 36px;
|
||
--jp-private-notebook-selected-color: var(--md-blue-400);
|
||
--jp-private-notebook-active-color: var(--md-green-400);
|
||
}
|
||
|
||
/* -----------------------------------------------------------------------------
|
||
| Notebook
|
||
|---------------------------------------------------------------------------- */
|
||
|
||
.jp-NotebookPanel {
|
||
display: block;
|
||
height: 100%;
|
||
}
|
||
|
||
.jp-NotebookPanel.jp-Document {
|
||
min-width: 240px;
|
||
min-height: 120px;
|
||
}
|
||
|
||
.jp-Notebook {
|
||
padding: var(--jp-notebook-padding);
|
||
outline: none;
|
||
overflow: auto;
|
||
background: var(--jp-layout-color0);
|
||
}
|
||
|
||
.jp-Notebook.jp-mod-scrollPastEnd::after {
|
||
display: block;
|
||
content: '';
|
||
min-height: var(--jp-notebook-scroll-padding);
|
||
}
|
||
|
||
.jp-MainAreaWidget-ContainStrict .jp-Notebook * {
|
||
contain: strict;
|
||
}
|
||
|
||
.jp-Notebook-render * {
|
||
contain: none !important;
|
||
}
|
||
|
||
.jp-Notebook .jp-Cell {
|
||
overflow: visible;
|
||
}
|
||
|
||
.jp-Notebook .jp-Cell .jp-InputPrompt {
|
||
cursor: move;
|
||
}
|
||
|
||
/* -----------------------------------------------------------------------------
|
||
| 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-not-active-opacity);
|
||
color: var(--jp-cell-prompt-not-active-font-color);
|
||
}
|
||
|
||
.jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-OutputPrompt {
|
||
opacity: var(--jp-cell-prompt-not-active-opacity);
|
||
color: var(--jp-cell-prompt-not-active-font-color);
|
||
}
|
||
|
||
/* cell is active */
|
||
.jp-Notebook .jp-Cell.jp-mod-active .jp-Collapser {
|
||
background: var(--jp-brand-color1);
|
||
}
|
||
|
||
/* cell is dirty */
|
||
.jp-Notebook .jp-Cell.jp-mod-dirty .jp-InputPrompt {
|
||
color: var(--jp-warn-color1);
|
||
}
|
||
|
||
.jp-Notebook .jp-Cell.jp-mod-dirty .jp-InputPrompt::before {
|
||
color: var(--jp-warn-color1);
|
||
content: '•';
|
||
}
|
||
|
||
.jp-Notebook .jp-Cell.jp-mod-active.jp-mod-dirty .jp-Collapser {
|
||
background: var(--jp-warn-color1);
|
||
}
|
||
|
||
/* collapser is hovered */
|
||
.jp-Notebook .jp-Cell .jp-Collapser:hover {
|
||
box-shadow: var(--jp-elevation-z2);
|
||
background: var(--jp-brand-color1);
|
||
opacity: var(--jp-cell-collapser-not-active-hover-opacity);
|
||
}
|
||
|
||
/* cell is active and collapser is hovered */
|
||
.jp-Notebook .jp-Cell.jp-mod-active .jp-Collapser:hover {
|
||
background: var(--jp-brand-color0);
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Command mode */
|
||
|
||
.jp-Notebook.jp-mod-commandMode .jp-Cell.jp-mod-selected {
|
||
background: var(--jp-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-active-border-color);
|
||
box-shadow: var(--jp-input-box-shadow);
|
||
background-color: var(--jp-cell-editor-active-background);
|
||
}
|
||
|
||
/* -----------------------------------------------------------------------------
|
||
| 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: block;
|
||
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-cell-editor-background);
|
||
overflow: visible;
|
||
}
|
||
|
||
.jp-dragImage-singlePrompt {
|
||
box-shadow: 2px 2px 4px 0 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: var(--jp-code-font-family);
|
||
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);
|
||
color: var(--jp-content-font-color3);
|
||
text-align: left;
|
||
margin: 4px 4px 4px 0;
|
||
}
|
||
|
||
.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: var(--jp-cell-prompt-font-family);
|
||
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: var(--jp-layout-color2);
|
||
border: var(--jp-border-width) solid var(--jp-input-border-color);
|
||
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
/* -----------------------------------------------------------------------------
|
||
| Cell toolbar
|
||
|---------------------------------------------------------------------------- */
|
||
|
||
.jp-NotebookTools {
|
||
display: block;
|
||
min-width: var(--jp-sidebar-min-width);
|
||
color: var(--jp-ui-font-color1);
|
||
background: var(--jp-layout-color1);
|
||
|
||
/* This is needed so that all font sizing of children done in ems is
|
||
* relative to this base size */
|
||
font-size: var(--jp-ui-font-size1);
|
||
overflow: auto;
|
||
}
|
||
|
||
.jp-NotebookTools-tool {
|
||
padding: 0 12px;
|
||
}
|
||
|
||
.jp-ActiveCellTool {
|
||
padding: 12px;
|
||
display: flex;
|
||
}
|
||
|
||
.jp-ActiveCell-Content {
|
||
flex: 1 1 auto;
|
||
}
|
||
|
||
.jp-ActiveCellTool .jp-Cell-Content {
|
||
background: var(--jp-cell-editor-background);
|
||
border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
|
||
border-radius: 0;
|
||
min-height: 29px;
|
||
}
|
||
|
||
.jp-ActiveCellTool .jp-InputPrompt {
|
||
min-width: calc(var(--jp-cell-prompt-width) * 0.75);
|
||
}
|
||
|
||
.jp-Cell-Content > pre {
|
||
padding: 5px 4px;
|
||
margin: 0;
|
||
white-space: normal;
|
||
}
|
||
|
||
.jp-MetadataEditorTool {
|
||
flex-direction: column;
|
||
padding: 12px 0;
|
||
}
|
||
|
||
.jp-RankedPanel > :not(:first-child) {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.jp-KeySelector select.jp-mod-styled {
|
||
font-size: var(--jp-ui-font-size1);
|
||
color: var(--jp-ui-font-color0);
|
||
border: var(--jp-border-width) solid var(--jp-border-color1);
|
||
}
|
||
|
||
.jp-KeySelector label,
|
||
.jp-MetadataEditorTool label,
|
||
.jp-NumberSetter label {
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.jp-NotebookTools .jp-select-wrapper {
|
||
margin-top: 4px;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.jp-NumberSetter input {
|
||
width: 100%;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.jp-NotebookTools .jp-Collapse {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
/* -----------------------------------------------------------------------------
|
||
| Presentation Mode (.jp-mod-presentationMode)
|
||
|---------------------------------------------------------------------------- */
|
||
|
||
.jp-mod-presentationMode .jp-Notebook {
|
||
--jp-content-font-size1: var(--jp-content-presentation-font-size1);
|
||
--jp-code-font-size: var(--jp-code-presentation-font-size);
|
||
}
|
||
|
||
.jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-InputPrompt,
|
||
.jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-OutputPrompt {
|
||
flex: 0 0 110px;
|
||
}
|
||
|
||
/* -----------------------------------------------------------------------------
|
||
| Side-by-side Mode (.jp-mod-sideBySide)
|
||
|---------------------------------------------------------------------------- */
|
||
.jp-mod-sideBySide.jp-Notebook .jp-Notebook-cell {
|
||
margin-top: 3em;
|
||
margin-bottom: 3em;
|
||
margin-left: 5%;
|
||
margin-right: 5%;
|
||
}
|
||
|
||
.jp-mod-sideBySide.jp-Notebook .jp-CodeCell {
|
||
display: grid;
|
||
grid-template-columns:
|
||
minmax(0, 1fr) min-content minmax(
|
||
0,
|
||
var(--jp-side-by-side-output-size)
|
||
);
|
||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||
grid-template-areas:
|
||
'header header header'
|
||
'input handle output'
|
||
'footer footer footer';
|
||
}
|
||
|
||
.jp-mod-sideBySide.jp-Notebook .jp-CodeCell.jp-mod-resizedCell {
|
||
grid-template-columns:
|
||
minmax(0, 1fr) min-content minmax(
|
||
0,
|
||
var(--jp-side-by-side-resized-cell)
|
||
);
|
||
}
|
||
|
||
.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-CellHeader {
|
||
grid-area: header;
|
||
}
|
||
|
||
.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-Cell-inputWrapper {
|
||
grid-area: input;
|
||
}
|
||
|
||
.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-Cell-outputWrapper {
|
||
/* overwrite the default margin (no vertical separation needed in side by side move */
|
||
margin-top: 0;
|
||
grid-area: output;
|
||
}
|
||
|
||
.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-CellFooter {
|
||
grid-area: footer;
|
||
}
|
||
|
||
.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-CellResizeHandle {
|
||
grid-area: handle;
|
||
user-select: none;
|
||
display: block;
|
||
height: 100%;
|
||
cursor: ew-resize;
|
||
padding: 0 var(--jp-cell-padding);
|
||
}
|
||
|
||
.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-CellResizeHandle::after {
|
||
content: '';
|
||
display: block;
|
||
background: var(--jp-border-color2);
|
||
height: 100%;
|
||
width: 5px;
|
||
}
|
||
|
||
.jp-mod-sideBySide.jp-Notebook .jp-CodeCell.jp-mod-resizedCell .jp-CellResizeHandle::after {
|
||
background: var(--jp-border-color0);
|
||
}
|
||
|
||
.jp-CellResizeHandle {
|
||
display: none;
|
||
}
|
||
|
||
/* -----------------------------------------------------------------------------
|
||
| Placeholder
|
||
|---------------------------------------------------------------------------- */
|
||
|
||
.jp-Cell-Placeholder {
|
||
padding-left: 55px;
|
||
}
|
||
|
||
.jp-Cell-Placeholder-wrapper {
|
||
background: #fff;
|
||
border: 1px solid;
|
||
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
|
||
border-radius: 4px;
|
||
-webkit-border-radius: 4px;
|
||
margin: 10px 15px;
|
||
}
|
||
|
||
.jp-Cell-Placeholder-wrapper-inner {
|
||
padding: 15px;
|
||
position: relative;
|
||
}
|
||
|
||
.jp-Cell-Placeholder-wrapper-body {
|
||
background-repeat: repeat;
|
||
background-size: 50% auto;
|
||
}
|
||
|
||
.jp-Cell-Placeholder-wrapper-body div {
|
||
background: #f6f7f8;
|
||
background-image:
|
||
-webkit-linear-gradient(
|
||
left,
|
||
#f6f7f8 0%,
|
||
#edeef1 20%,
|
||
#f6f7f8 40%,
|
||
#f6f7f8 100%
|
||
);
|
||
background-repeat: no-repeat;
|
||
background-size: 800px 104px;
|
||
height: 104px;
|
||
position: absolute;
|
||
right: 15px;
|
||
left: 15px;
|
||
top: 15px;
|
||
}
|
||
|
||
div.jp-Cell-Placeholder-h1 {
|
||
top: 20px;
|
||
height: 20px;
|
||
left: 15px;
|
||
width: 150px;
|
||
}
|
||
|
||
div.jp-Cell-Placeholder-h2 {
|
||
left: 15px;
|
||
top: 50px;
|
||
height: 10px;
|
||
width: 100px;
|
||
}
|
||
|
||
div.jp-Cell-Placeholder-content-1,
|
||
div.jp-Cell-Placeholder-content-2,
|
||
div.jp-Cell-Placeholder-content-3 {
|
||
left: 15px;
|
||
right: 15px;
|
||
height: 10px;
|
||
}
|
||
|
||
div.jp-Cell-Placeholder-content-1 {
|
||
top: 100px;
|
||
}
|
||
|
||
div.jp-Cell-Placeholder-content-2 {
|
||
top: 120px;
|
||
}
|
||
|
||
div.jp-Cell-Placeholder-content-3 {
|
||
top: 140px;
|
||
}
|