feat: 增加ipynb渲染
This commit is contained in:
camera-2018
460
.vitepress/theme/css/jupyterlab/notebook.base.css
Normal file
460
.vitepress/theme/css/jupyterlab/notebook.base.css
Normal file
@@ -0,0 +1,460 @@
|
||||
/* 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;
|
||||
}
|
||||
Reference in New Issue
Block a user