Spaces:
Runtime error
Runtime error
| /*----------------------------------------------------------------------------- | |
| | Copyright (c) Jupyter Development Team. | |
| | Distributed under the terms of the Modified BSD License. | |
| |----------------------------------------------------------------------------*/ | |
| /* | |
| The following CSS variables define the main, public API for styling JupyterLab. | |
| These variables should be used by all plugins wherever possible. In other | |
| words, plugins should not define custom colors, sizes, etc unless absolutely | |
| necessary. This enables users to change the visual theme of JupyterLab | |
| by changing these variables. | |
| Many variables appear in an ordered sequence (0,1,2,3). These sequences | |
| are designed to work well together, so for example, `--jp-border-color1` should | |
| be used with `--jp-layout-color1`. The numbers have the following meanings: | |
| * 0: super-primary, reserved for special emphasis | |
| * 1: primary, most important under normal situations | |
| * 2: secondary, next most important under normal situations | |
| * 3: tertiary, next most important under normal situations | |
| Throughout JupyterLab, we are mostly following principles from Google's | |
| Material Design when selecting colors. We are not, however, following | |
| all of MD as it is not optimized for dense, information rich UIs. | |
| */ | |
| :root { | |
| /* Elevation | |
| * | |
| * We style box-shadows using Material Design's idea of elevation. These particular numbers are taken from here: | |
| * | |
| * https://github.com/material-components/material-components-web | |
| * https://material-components-web.appspot.com/elevation.html | |
| */ | |
| /* The dark theme shadows need a bit of work, but this will probably also require work on the core layout | |
| * colors used in the theme as well. */ | |
| --jp-shadow-base-lightness: 32; | |
| --jp-shadow-umbra-color: rgba( | |
| var(--jp-shadow-base-lightness), | |
| var(--jp-shadow-base-lightness), | |
| var(--jp-shadow-base-lightness), | |
| 0.2 | |
| ); | |
| --jp-shadow-penumbra-color: rgba( | |
| var(--jp-shadow-base-lightness), | |
| var(--jp-shadow-base-lightness), | |
| var(--jp-shadow-base-lightness), | |
| 0.14 | |
| ); | |
| --jp-shadow-ambient-color: rgba( | |
| var(--jp-shadow-base-lightness), | |
| var(--jp-shadow-base-lightness), | |
| var(--jp-shadow-base-lightness), | |
| 0.12 | |
| ); | |
| --jp-elevation-z0: none; | |
| --jp-elevation-z1: 0 2px 1px -1px var(--jp-shadow-umbra-color), | |
| 0 1px 1px 0 var(--jp-shadow-penumbra-color), | |
| 0 1px 3px 0 var(--jp-shadow-ambient-color); | |
| --jp-elevation-z2: 0 3px 1px -2px var(--jp-shadow-umbra-color), | |
| 0 2px 2px 0 var(--jp-shadow-penumbra-color), | |
| 0 1px 5px 0 var(--jp-shadow-ambient-color); | |
| --jp-elevation-z4: 0 2px 4px -1px var(--jp-shadow-umbra-color), | |
| 0 4px 5px 0 var(--jp-shadow-penumbra-color), | |
| 0 1px 10px 0 var(--jp-shadow-ambient-color); | |
| --jp-elevation-z6: 0 3px 5px -1px var(--jp-shadow-umbra-color), | |
| 0 6px 10px 0 var(--jp-shadow-penumbra-color), | |
| 0 1px 18px 0 var(--jp-shadow-ambient-color); | |
| --jp-elevation-z8: 0 5px 5px -3px var(--jp-shadow-umbra-color), | |
| 0 8px 10px 1px var(--jp-shadow-penumbra-color), | |
| 0 3px 14px 2px var(--jp-shadow-ambient-color); | |
| --jp-elevation-z12: 0 7px 8px -4px var(--jp-shadow-umbra-color), | |
| 0 12px 17px 2px var(--jp-shadow-penumbra-color), | |
| 0 5px 22px 4px var(--jp-shadow-ambient-color); | |
| --jp-elevation-z16: 0 8px 10px -5px var(--jp-shadow-umbra-color), | |
| 0 16px 24px 2px var(--jp-shadow-penumbra-color), | |
| 0 6px 30px 5px var(--jp-shadow-ambient-color); | |
| --jp-elevation-z20: 0 10px 13px -6px var(--jp-shadow-umbra-color), | |
| 0 20px 31px 3px var(--jp-shadow-penumbra-color), | |
| 0 8px 38px 7px var(--jp-shadow-ambient-color); | |
| --jp-elevation-z24: 0 11px 15px -7px var(--jp-shadow-umbra-color), | |
| 0 24px 38px 3px var(--jp-shadow-penumbra-color), | |
| 0 9px 46px 8px var(--jp-shadow-ambient-color); | |
| /* Borders | |
| * | |
| * The following variables, specify the visual styling of borders in JupyterLab. | |
| */ | |
| --jp-border-width: 1px; | |
| --jp-border-color0: var(--md-grey-700); | |
| --jp-border-color1: var(--md-grey-700); | |
| --jp-border-color2: var(--md-grey-800); | |
| --jp-border-color3: var(--md-grey-900); | |
| --jp-inverse-border-color: var(--md-grey-600); | |
| --jp-border-radius: 2px; | |
| /* UI Fonts | |
| * | |
| * The UI font CSS variables are used for the typography all of the JupyterLab | |
| * user interface elements that are not directly user generated content. | |
| * | |
| * The font sizing here is done assuming that the body font size of --jp-ui-font-size1 | |
| * is applied to a parent element. When children elements, such as headings, are sized | |
| * in em all things will be computed relative to that body size. | |
| */ | |
| --jp-ui-font-scale-factor: 1.2; | |
| --jp-ui-font-size0: 0.83333em; | |
| --jp-ui-font-size1: 13px; /* Base font size */ | |
| --jp-ui-font-size2: 1.2em; | |
| --jp-ui-font-size3: 1.44em; | |
| --jp-ui-font-family: system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', | |
| helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', | |
| 'Segoe UI Symbol'; | |
| /* | |
| * Use these font colors against the corresponding main layout colors. | |
| * In a light theme, these go from dark to light. | |
| */ | |
| /* Defaults use Material Design specification */ | |
| --jp-ui-font-color0: rgba(255, 255, 255, 1); | |
| --jp-ui-font-color1: rgba(255, 255, 255, 0.87); | |
| --jp-ui-font-color2: rgba(255, 255, 255, 0.54); | |
| --jp-ui-font-color3: rgba(255, 255, 255, 0.38); | |
| /* | |
| * Use these against the brand/accent/warn/error colors. | |
| * These will typically go from light to darker, in both a dark and light theme. | |
| */ | |
| --jp-ui-inverse-font-color0: rgba(0, 0, 0, 1); | |
| --jp-ui-inverse-font-color1: rgba(0, 0, 0, 0.8); | |
| --jp-ui-inverse-font-color2: rgba(0, 0, 0, 0.5); | |
| --jp-ui-inverse-font-color3: rgba(0, 0, 0, 0.3); | |
| /* Content Fonts | |
| * | |
| * Content font variables are used for typography of user generated content. | |
| * | |
| * The font sizing here is done assuming that the body font size of --jp-content-font-size1 | |
| * is applied to a parent element. When children elements, such as headings, are sized | |
| * in em all things will be computed relative to that body size. | |
| */ | |
| --jp-content-line-height: 1.6; | |
| --jp-content-font-scale-factor: 1.2; | |
| --jp-content-font-size0: 0.83333em; | |
| --jp-content-font-size1: 14px; /* Base font size */ | |
| --jp-content-font-size2: 1.2em; | |
| --jp-content-font-size3: 1.44em; | |
| --jp-content-font-size4: 1.728em; | |
| --jp-content-font-size5: 2.0736em; | |
| /* This gives a magnification of about 125% in presentation mode over normal. */ | |
| --jp-content-presentation-font-size1: 17px; | |
| --jp-content-heading-line-height: 1; | |
| --jp-content-heading-margin-top: 1.2em; | |
| --jp-content-heading-margin-bottom: 0.8em; | |
| --jp-content-heading-font-weight: 500; | |
| /* Defaults use Material Design specification */ | |
| --jp-content-font-color0: rgba(255, 255, 255, 1); | |
| --jp-content-font-color1: rgba(255, 255, 255, 1); | |
| --jp-content-font-color2: rgba(255, 255, 255, 0.7); | |
| --jp-content-font-color3: rgba(255, 255, 255, 0.5); | |
| --jp-content-link-color: var(--md-blue-300); | |
| --jp-content-font-family: system-ui, -apple-system, blinkmacsystemfont, | |
| 'Segoe UI', helvetica, arial, sans-serif, 'Apple Color Emoji', | |
| 'Segoe UI Emoji', 'Segoe UI Symbol'; | |
| /* | |
| * Code Fonts | |
| * | |
| * Code font variables are used for typography of code and other monospaces content. | |
| */ | |
| --jp-code-font-size: 13px; | |
| --jp-code-line-height: 1.3077; /* 17px for 13px base */ | |
| --jp-code-padding: 5px; /* 5px for 13px base, codemirror highlighting needs integer px value */ | |
| --jp-code-font-family-default: menlo, consolas, 'DejaVu Sans Mono', monospace; | |
| --jp-code-font-family: var(--jp-code-font-family-default); | |
| /* This gives a magnification of about 125% in presentation mode over normal. */ | |
| --jp-code-presentation-font-size: 16px; | |
| /* may need to tweak cursor width if you change font size */ | |
| --jp-code-cursor-width0: 1.4px; | |
| --jp-code-cursor-width1: 2px; | |
| --jp-code-cursor-width2: 4px; | |
| /* Layout | |
| * | |
| * The following are the main layout colors use in JupyterLab. In a light | |
| * theme these would go from light to dark. | |
| */ | |
| --jp-layout-color0: #111; | |
| --jp-layout-color1: var(--md-grey-900); | |
| --jp-layout-color2: var(--md-grey-800); | |
| --jp-layout-color3: var(--md-grey-700); | |
| --jp-layout-color4: var(--md-grey-600); | |
| /* Inverse Layout | |
| * | |
| * The following are the inverse layout colors use in JupyterLab. In a light | |
| * theme these would go from dark to light. | |
| */ | |
| --jp-inverse-layout-color0: white; | |
| --jp-inverse-layout-color1: white; | |
| --jp-inverse-layout-color2: var(--md-grey-200); | |
| --jp-inverse-layout-color3: var(--md-grey-400); | |
| --jp-inverse-layout-color4: var(--md-grey-600); | |
| /* Brand/accent */ | |
| --jp-brand-color0: var(--md-blue-700); | |
| --jp-brand-color1: var(--md-blue-500); | |
| --jp-brand-color2: var(--md-blue-300); | |
| --jp-brand-color3: var(--md-blue-100); | |
| --jp-brand-color4: var(--md-blue-50); | |
| --jp-accent-color0: var(--md-green-700); | |
| --jp-accent-color1: var(--md-green-500); | |
| --jp-accent-color2: var(--md-green-300); | |
| --jp-accent-color3: var(--md-green-100); | |
| /* State colors (warn, error, success, info) */ | |
| --jp-warn-color0: var(--md-orange-700); | |
| --jp-warn-color1: var(--md-orange-500); | |
| --jp-warn-color2: var(--md-orange-300); | |
| --jp-warn-color3: var(--md-orange-100); | |
| --jp-error-color0: var(--md-red-700); | |
| --jp-error-color1: var(--md-red-500); | |
| --jp-error-color2: var(--md-red-300); | |
| --jp-error-color3: var(--md-red-100); | |
| --jp-success-color0: var(--md-green-700); | |
| --jp-success-color1: var(--md-green-500); | |
| --jp-success-color2: var(--md-green-300); | |
| --jp-success-color3: var(--md-green-100); | |
| --jp-info-color0: var(--md-cyan-700); | |
| --jp-info-color1: var(--md-cyan-500); | |
| --jp-info-color2: var(--md-cyan-300); | |
| --jp-info-color3: var(--md-cyan-100); | |
| /* Cell specific styles */ | |
| --jp-cell-padding: 5px; | |
| --jp-cell-collapser-width: 8px; | |
| --jp-cell-collapser-min-height: 20px; | |
| --jp-cell-collapser-not-active-hover-opacity: 0.6; | |
| --jp-cell-editor-background: var(--jp-layout-color1); | |
| --jp-cell-editor-border-color: var(--md-grey-700); | |
| --jp-cell-editor-box-shadow: inset 0 0 2px var(--md-blue-300); | |
| --jp-cell-editor-active-background: var(--jp-layout-color0); | |
| --jp-cell-editor-active-border-color: var(--jp-brand-color1); | |
| --jp-cell-prompt-width: 64px; | |
| --jp-cell-prompt-font-family: var(--jp-code-font-family-default); | |
| --jp-cell-prompt-letter-spacing: 0; | |
| --jp-cell-prompt-opacity: 1; | |
| --jp-cell-prompt-not-active-opacity: 1; | |
| --jp-cell-prompt-not-active-font-color: var(--md-grey-300); | |
| /* A custom blend of MD grey and blue 600 | |
| * See https://meyerweb.com/eric/tools/color-blend/#546E7A:1E88E5:5:hex */ | |
| --jp-cell-inprompt-font-color: #307fc1; | |
| /* A custom blend of MD grey and orange 600 | |
| * https://meyerweb.com/eric/tools/color-blend/#546E7A:F4511E:5:hex */ | |
| --jp-cell-outprompt-font-color: #bf5b3d; | |
| /* Notebook specific styles */ | |
| --jp-notebook-padding: 10px; | |
| --jp-notebook-select-background: var(--jp-layout-color1); | |
| --jp-notebook-multiselected-color: rgba(33, 150, 243, 0.24); | |
| /* The scroll padding is calculated to fill enough space at the bottom of the | |
| notebook to show one single-line cell (with appropriate padding) at the top | |
| when the notebook is scrolled all the way to the bottom. We also subtract one | |
| pixel so that no scrollbar appears if we have just one single-line cell in the | |
| notebook. This padding is to enable a 'scroll past end' feature in a notebook. | |
| */ | |
| --jp-notebook-scroll-padding: calc( | |
| 100% - var(--jp-code-font-size) * var(--jp-code-line-height) - | |
| var(--jp-code-padding) - var(--jp-cell-padding) - 1px | |
| ); | |
| /* Rendermime styles */ | |
| --jp-rendermime-error-background: rgba(244, 67, 54, 0.28); | |
| --jp-rendermime-table-row-background: var(--md-grey-900); | |
| --jp-rendermime-table-row-hover-background: rgba(3, 169, 244, 0.2); | |
| /* Dialog specific styles */ | |
| --jp-dialog-background: rgba(0, 0, 0, 0.6); | |
| /* Console specific styles */ | |
| --jp-console-padding: 10px; | |
| /* Toolbar specific styles */ | |
| --jp-toolbar-border-color: var(--jp-border-color2); | |
| --jp-toolbar-micro-height: 8px; | |
| --jp-toolbar-background: var(--jp-layout-color1); | |
| --jp-toolbar-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.8); | |
| --jp-toolbar-header-margin: 4px 4px 0 4px; | |
| --jp-toolbar-active-background: var(--jp-layout-color0); | |
| /* Statusbar specific styles */ | |
| --jp-statusbar-height: 24px; | |
| /* Input field styles */ | |
| --jp-input-box-shadow: inset 0 0 2px var(--md-blue-300); | |
| --jp-input-active-background: var(--jp-layout-color0); | |
| --jp-input-hover-background: var(--jp-layout-color2); | |
| --jp-input-background: var(--md-grey-800); | |
| --jp-input-border-color: var(--jp-inverse-border-color); | |
| --jp-input-active-border-color: var(--jp-brand-color1); | |
| --jp-input-active-box-shadow-color: rgba(19, 124, 189, 0.3); | |
| /* General editor styles */ | |
| --jp-editor-selected-background: var(--jp-layout-color2); | |
| --jp-editor-selected-focused-background: rgba(33, 150, 243, 0.24); | |
| --jp-editor-cursor-color: var(--jp-ui-font-color0); | |
| /* Code mirror specific styles */ | |
| --jp-mirror-editor-keyword-color: var(--md-green-500); | |
| --jp-mirror-editor-atom-color: var(--md-blue-300); | |
| --jp-mirror-editor-number-color: var(--md-green-400); | |
| --jp-mirror-editor-def-color: var(--md-blue-600); | |
| --jp-mirror-editor-variable-color: var(--md-grey-300); | |
| --jp-mirror-editor-variable-2-color: var(--md-blue-500); | |
| --jp-mirror-editor-variable-3-color: var(--md-green-600); | |
| --jp-mirror-editor-punctuation-color: var(--md-blue-400); | |
| --jp-mirror-editor-property-color: var(--md-blue-400); | |
| --jp-mirror-editor-operator-color: #a2f; | |
| --jp-mirror-editor-comment-color: #408080; | |
| --jp-mirror-editor-string-color: #ff7070; | |
| --jp-mirror-editor-string-2-color: var(--md-purple-300); | |
| --jp-mirror-editor-meta-color: #a2f; | |
| --jp-mirror-editor-qualifier-color: #555; | |
| --jp-mirror-editor-builtin-color: var(--md-green-600); | |
| --jp-mirror-editor-bracket-color: #997; | |
| --jp-mirror-editor-tag-color: var(--md-green-700); | |
| --jp-mirror-editor-attribute-color: var(--md-blue-700); | |
| --jp-mirror-editor-header-color: var(--md-blue-500); | |
| --jp-mirror-editor-quote-color: var(--md-green-300); | |
| --jp-mirror-editor-link-color: var(--md-blue-700); | |
| --jp-mirror-editor-error-color: #f00; | |
| --jp-mirror-editor-hr-color: #999; | |
| /* | |
| RTC user specific colors. | |
| These colors are used for the cursor, username in the editor, | |
| and the icon of the user. | |
| */ | |
| --jp-collaborator-color1: #ad4a00; | |
| --jp-collaborator-color2: #7b6a00; | |
| --jp-collaborator-color3: #007e00; | |
| --jp-collaborator-color4: #008772; | |
| --jp-collaborator-color5: #0079b9; | |
| --jp-collaborator-color6: #8b45c6; | |
| --jp-collaborator-color7: #be208b; | |
| /* Vega extension styles */ | |
| --jp-vega-background: var(--md-grey-400); | |
| /* Sidebar-related styles */ | |
| --jp-sidebar-min-width: 250px; | |
| /* Search-related styles */ | |
| --jp-search-toggle-off-opacity: 0.6; | |
| --jp-search-toggle-hover-opacity: 0.8; | |
| --jp-search-toggle-on-opacity: 1; | |
| --jp-search-selected-match-background-color: rgb(255, 225, 0); | |
| --jp-search-selected-match-color: black; | |
| --jp-search-unselected-match-background-color: var( | |
| --jp-inverse-layout-color0 | |
| ); | |
| --jp-search-unselected-match-color: var(--jp-ui-inverse-font-color0); | |
| /* scrollbar related styles. Supports every browser except Edge. */ | |
| /* colors based on JetBrain's Darcula theme */ | |
| --jp-scrollbar-background-color: #3f4244; | |
| --jp-scrollbar-thumb-color: 88, 96, 97; /* need to specify thumb color as an RGB triplet */ | |
| --jp-scrollbar-endpad: 3px; /* the minimum gap between the thumb and the ends of a scrollbar */ | |
| /* hacks for setting the thumb shape. These do nothing in Firefox */ | |
| --jp-scrollbar-thumb-margin: 3.5px; /* the space in between the sides of the thumb and the track */ | |
| --jp-scrollbar-thumb-radius: 9px; /* set to a large-ish value for rounded endcaps on the thumb */ | |
| /* Icon colors that work well with light or dark backgrounds */ | |
| --jp-icon-contrast-color0: var(--md-purple-600); | |
| --jp-icon-contrast-color1: var(--md-green-600); | |
| --jp-icon-contrast-color2: var(--md-pink-600); | |
| --jp-icon-contrast-color3: var(--md-blue-600); | |
| /* Button colors */ | |
| --jp-accept-color-normal: var(--md-blue-700); | |
| --jp-accept-color-hover: var(--md-blue-800); | |
| --jp-accept-color-active: var(--md-blue-900); | |
| --jp-warn-color-normal: var(--md-red-700); | |
| --jp-warn-color-hover: var(--md-red-800); | |
| --jp-warn-color-active: var(--md-red-900); | |
| --jp-reject-color-normal: var(--md-grey-600); | |
| --jp-reject-color-hover: var(--md-grey-700); | |
| --jp-reject-color-active: var(--md-grey-800); | |
| /* File or activity icons and switch semantic variables */ | |
| --jp-jupyter-icon-color: #f37626; | |
| --jp-notebook-icon-color: #f37626; | |
| --jp-json-icon-color: var(--md-orange-500); | |
| --jp-console-icon-background-color: var(--md-blue-500); | |
| --jp-console-icon-color: white; | |
| --jp-terminal-icon-background-color: var(--md-grey-200); | |
| --jp-terminal-icon-color: var(--md-grey-800); | |
| --jp-text-editor-icon-color: var(--md-grey-200); | |
| --jp-inspector-icon-color: var(--md-grey-200); | |
| --jp-switch-color: var(--md-grey-400); | |
| --jp-switch-true-position-color: var(--md-orange-700); | |
| } | |
| /*----------------------------------------------------------------------------- | |
| | Copyright (c) Jupyter Development Team. | |
| | Distributed under the terms of the Modified BSD License. | |
| |----------------------------------------------------------------------------*/ | |
| /* Set the default typography for monospace elements */ | |
| tt, | |
| code, | |
| kbd, | |
| samp, | |
| pre { | |
| font-family: var(--jp-code-font-family); | |
| font-size: var(--jp-code-font-size); | |
| line-height: var(--jp-code-line-height); | |
| } | |
| /* fix illegible yellow backround in exception stacktrace */ | |
| :where( | |
| .jp-RenderedText[data-mime-type='application/vnd.jupyter.stderr'] | |
| pre | |
| .ansi-yellow-bg | |
| ) { | |
| color: black; | |
| } | |