mirror of
https://github.com/Steffo99/jupyterlab-theme-sophon.git
synced 2024-11-24 17:14:29 +00:00
368 lines
14 KiB
CSS
368 lines
14 KiB
CSS
/*-----------------------------------------------------------------------------
|
|
| 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
|
|
*/
|
|
|
|
--jp-shadow-base-lightness: 0;
|
|
--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: 0px 2px 1px -1px var(--jp-shadow-umbra-color),
|
|
0px 1px 1px 0px var(--jp-shadow-penumbra-color),
|
|
0px 1px 3px 0px var(--jp-shadow-ambient-color);
|
|
--jp-elevation-z2: 0px 3px 1px -2px var(--jp-shadow-umbra-color),
|
|
0px 2px 2px 0px var(--jp-shadow-penumbra-color),
|
|
0px 1px 5px 0px var(--jp-shadow-ambient-color);
|
|
--jp-elevation-z4: 0px 2px 4px -1px var(--jp-shadow-umbra-color),
|
|
0px 4px 5px 0px var(--jp-shadow-penumbra-color),
|
|
0px 1px 10px 0px var(--jp-shadow-ambient-color);
|
|
--jp-elevation-z6: 0px 3px 5px -1px var(--jp-shadow-umbra-color),
|
|
0px 6px 10px 0px var(--jp-shadow-penumbra-color),
|
|
0px 1px 18px 0px var(--jp-shadow-ambient-color);
|
|
--jp-elevation-z8: 0px 5px 5px -3px var(--jp-shadow-umbra-color),
|
|
0px 8px 10px 1px var(--jp-shadow-penumbra-color),
|
|
0px 3px 14px 2px var(--jp-shadow-ambient-color);
|
|
--jp-elevation-z12: 0px 7px 8px -4px var(--jp-shadow-umbra-color),
|
|
0px 12px 17px 2px var(--jp-shadow-penumbra-color),
|
|
0px 5px 22px 4px var(--jp-shadow-ambient-color);
|
|
--jp-elevation-z16: 0px 8px 10px -5px var(--jp-shadow-umbra-color),
|
|
0px 16px 24px 2px var(--jp-shadow-penumbra-color),
|
|
0px 6px 30px 5px var(--jp-shadow-ambient-color);
|
|
--jp-elevation-z20: 0px 10px 13px -6px var(--jp-shadow-umbra-color),
|
|
0px 20px 31px 3px var(--jp-shadow-penumbra-color),
|
|
0px 8px 38px 7px var(--jp-shadow-ambient-color);
|
|
--jp-elevation-z24: 0px 11px 15px -7px var(--jp-shadow-umbra-color),
|
|
0px 24px 38px 3px var(--jp-shadow-penumbra-color),
|
|
0px 9px 46px 8px var(--jp-shadow-ambient-color);
|
|
|
|
/* Borders
|
|
*
|
|
* The following variables, specify the visual styling of borders in JupyterLab.
|
|
*/
|
|
|
|
/* I'm not sure if the order of these is correct. */
|
|
|
|
--jp-border-width: 1px;
|
|
--jp-border-color0: rgb(7, 23, 56);
|
|
--jp-border-color1: rgb(8, 28, 62);
|
|
--jp-border-color2: rgb(9, 32, 68);
|
|
--jp-border-color3: rgb(9, 36, 74);
|
|
--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: -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(45, 154, 255, 1);
|
|
--jp-ui-font-color1: rgba(45, 154, 255, 0.87);
|
|
--jp-ui-font-color2: rgba(45, 154, 255, 0.54);
|
|
--jp-ui-font-color3: rgba(45, 154, 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, 25, 1);
|
|
--jp-ui-inverse-font-color1: rgba(0, 0, 25, 1);
|
|
--jp-ui-inverse-font-color2: rgba(0, 0, 25, 0.7);
|
|
--jp-ui-inverse-font-color3: rgba(0, 0, 25, 0.5);
|
|
|
|
/* 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(45, 154, 255, 1);
|
|
--jp-content-font-color1: rgba(45, 154, 255, 0.87);
|
|
--jp-content-font-color2: rgba(45, 154, 255, 0.54);
|
|
--jp-content-font-color3: rgba(45, 154, 255, 0.38);
|
|
|
|
--jp-content-link-color: rgb(0, 202, 202);
|
|
|
|
--jp-content-font-family: -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: 0.385em; /* 5px for 13px base */
|
|
--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: rgb(0, 0, 20);
|
|
--jp-layout-color1: rgb(1, 5, 27);
|
|
--jp-layout-color2: rgb(2, 10, 34);
|
|
--jp-layout-color3: rgb(3, 15, 41);
|
|
--jp-layout-color4: rgb(4, 20, 48);
|
|
|
|
/* 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: rgb(44, 150, 249);
|
|
--jp-inverse-layout-color1: rgb(40, 138, 231);
|
|
--jp-inverse-layout-color2: rgb(36, 123, 208);
|
|
--jp-inverse-layout-color3: rgb(31, 107, 184);
|
|
--jp-inverse-layout-color4: rgb(27, 92, 161);
|
|
|
|
/* Brand/accent */
|
|
|
|
--jp-brand-color0: rgb(45, 154, 255);
|
|
--jp-brand-color1: rgb(44, 150, 249);
|
|
--jp-brand-color2: rgb(40, 138, 231);
|
|
--jp-brand-color3: rgb(36, 123, 208);
|
|
|
|
--jp-accent-color0: rgb(250, 250, 250);
|
|
--jp-accent-color1: rgb(225, 225, 225);
|
|
--jp-accent-color2: rgb(200, 200, 200);
|
|
--jp-accent-color3: rgb(175, 175, 175);
|
|
|
|
/* State colors (warn, error, success, info) */
|
|
|
|
--jp-warn-color0: rgb(255, 255, 125);
|
|
--jp-warn-color1: rgb(225, 225, 113);
|
|
--jp-warn-color2: rgb(200, 200, 101);
|
|
--jp-warn-color3: rgb(175, 175, 89);
|
|
|
|
--jp-error-color0: rgb(255, 125, 125);
|
|
--jp-error-color1: rgb(225, 113, 113);
|
|
--jp-error-color2: rgb(200, 101, 101);
|
|
--jp-error-color3: rgb(175, 89, 89);
|
|
|
|
--jp-success-color0: rgb(125, 255, 125);
|
|
--jp-success-color1: rgb(113, 225, 125);
|
|
--jp-success-color2: rgb(101, 200, 125);
|
|
--jp-success-color3: rgb( 89, 175, 125);
|
|
|
|
--jp-info-color0: rgb(125, 255, 255);
|
|
--jp-info-color1: rgb(113, 225, 225);
|
|
--jp-info-color2: rgb(101, 200, 200);
|
|
--jp-info-color3: rgb( 89, 175, 175);
|
|
|
|
/* 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(--jp-border-color1);
|
|
--jp-cell-editor-box-shadow: none;
|
|
--jp-cell-editor-active-background: var(--jp-layout-color2);
|
|
--jp-cell-editor-active-border-color: var(--jp-brand-color3);
|
|
|
|
--jp-cell-prompt-width: 64px;
|
|
--jp-cell-prompt-font-family: "Fira Sans", monospace;
|
|
--jp-cell-prompt-letter-spacing: 0px;
|
|
--jp-cell-prompt-opacity: 1;
|
|
--jp-cell-prompt-not-active-opacity: 0.5;
|
|
--jp-cell-prompt-not-active-font-color: var(--jp-content-font-color3);
|
|
--jp-cell-inprompt-font-color: var(--jp-success-color1);
|
|
--jp-cell-outprompt-font-color: var(--jp-error-color1);
|
|
|
|
/* Notebook specific styles */
|
|
|
|
--jp-notebook-padding: 10px;
|
|
--jp-notebook-select-background: var(--jp-layout-color3);
|
|
--jp-notebook-multiselected-color: var(--jp-layout-color3);
|
|
|
|
/* 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: rgb(8, 4, 23);
|
|
--jp-rendermime-table-row-background: rgb(2, 10, 34);
|
|
--jp-rendermime-table-row-hover-background: rgb(3, 15, 41);
|
|
|
|
/* Dialog specific styles */
|
|
|
|
--jp-dialog-background: rgba(0, 0, 0, 0.25);
|
|
|
|
/* Console specific styles */
|
|
|
|
--jp-console-padding: 10px;
|
|
|
|
/* Toolbar specific styles */
|
|
|
|
--jp-toolbar-border-color: var(--jp-border-color1);
|
|
--jp-toolbar-micro-height: 8px;
|
|
--jp-toolbar-background: var(--jp-layout-color1);
|
|
--jp-toolbar-box-shadow: none;
|
|
--jp-toolbar-header-margin: 4px 4px 0px 4px;
|
|
--jp-toolbar-active-background: var(--md-grey-300);
|
|
|
|
/* Input field styles */
|
|
|
|
--jp-input-box-shadow: none;
|
|
--jp-input-active-background: var(--jp-layout-color3);
|
|
--jp-input-hover-background: var(--jp-layout-color2);
|
|
--jp-input-background: rgb(2, 10, 34);
|
|
--jp-input-border-color: var(--jp-border-color1);
|
|
--jp-input-active-border-color: var(--jp-brand-color1);
|
|
|
|
/* General editor styles */
|
|
|
|
--jp-editor-selected-background: rgba(45, 154, 255, 0.22);
|
|
--jp-editor-selected-focused-background: rgba(45, 154, 255, 0.22);
|
|
--jp-editor-cursor-color: var(--jp-ui-font-color0);
|
|
|
|
/* Code mirror specific styles */
|
|
|
|
/* Keyword */ --jp-mirror-editor-keyword-color: rgba(255, 187, 125, 1.0);
|
|
/* Lisp atom */ --jp-mirror-editor-atom-color: rgba(95, 204, 255, 1.0);
|
|
/* Number */ --jp-mirror-editor-number-color: rgba(125, 125, 255, 1.0);
|
|
/* Function and class name */ --jp-mirror-editor-def-color: rgba(255, 255, 0, 1.0);
|
|
/* Variable */ --jp-mirror-editor-variable-color: rgba(95, 204, 255, 1.0);
|
|
/* Self */ --jp-mirror-editor-variable-2-color: rgba(255, 125, 255, 1.0);
|
|
/* CSS selector */ --jp-mirror-editor-variable-3-color: rgba(255, 125, 164, 1.0);
|
|
/* Punctuation */ --jp-mirror-editor-punctuation-color: rgba(45, 154, 255, 1.0); /* Unchanged */
|
|
/* Property */ --jp-mirror-editor-property-color: rgba(45, 154, 255, 1.0); /* Unchanged */
|
|
/* Operator */ --jp-mirror-editor-operator-color: rgba(45, 154, 255, 1.0); /* Unchanged */
|
|
/* Comment */ --jp-mirror-editor-comment-color: rgba(45, 154, 255, 0.4);
|
|
/* String */ --jp-mirror-editor-string-color: rgba(0, 169, 105, 1.0);
|
|
/* Bytes */ --jp-mirror-editor-string-2-color: rgba(53, 128, 0, 1.0);
|
|
/* Decorator call */ --jp-mirror-editor-meta-color: rgba(187, 181, 41, 1.0);
|
|
/* No idea */ --jp-mirror-editor-qualifier-color: rgba(255, 255, 125, 1.0);
|
|
/* Builtin */ --jp-mirror-editor-builtin-color: rgba(125, 125, 255, 1.0);
|
|
/* HTML bracket */ --jp-mirror-editor-bracket-color: rgba(187, 136, 255, 1.0);
|
|
/* HTML tag name */ --jp-mirror-editor-tag-color: rgba(255, 125, 255, 1.0);
|
|
/* HTML attribute */ --jp-mirror-editor-attribute-color: rgba(255, 187, 125, 1.0);
|
|
/* Markdown header */ --jp-mirror-editor-header-color: rgba(125, 255, 255, 1.0);
|
|
/* Markdown quote */ --jp-mirror-editor-quote-color: rgba(0, 169, 105, 1.0);
|
|
/* Markdown link */ --jp-mirror-editor-link-color: rgba(0, 202, 202, 1.0);
|
|
/* Error */ --jp-mirror-editor-error-color: rgba(255, 125, 125, 1.0);
|
|
/* Markdown separator */ --jp-mirror-editor-hr-color: rgba(187, 187, 187, 1.0);
|
|
|
|
|
|
/* Vega extension styles */
|
|
|
|
--jp-vega-background: black;
|
|
|
|
/* Sidebar-related styles */
|
|
|
|
--jp-sidebar-min-width: 180px;
|
|
}
|