icons.css

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/**
 * Support for icons as inline SVG HTMLElements
 */

/* recolor the primary elements of an icon */
.jp-icon0[fill] {
  fill: var(--jp-inverse-layout-color0);
}
.jp-icon1[fill] {
  fill: var(--jp-inverse-layout-color1);
}
.jp-icon2[fill] {
  fill: var(--jp-inverse-layout-color2);
}
.jp-icon3[fill] {
  fill: var(--jp-inverse-layout-color3);
}
.jp-icon4[fill] {
  fill: var(--jp-inverse-layout-color4);
}

.jp-icon0[stroke] {
  stroke: var(--jp-inverse-layout-color0);
}
.jp-icon1[stroke] {
  stroke: var(--jp-inverse-layout-color1);
}
.jp-icon2[stroke] {
  stroke: var(--jp-inverse-layout-color2);
}
.jp-icon3[stroke] {
  stroke: var(--jp-inverse-layout-color3);
}
.jp-icon4[stroke] {
  stroke: var(--jp-inverse-layout-color4);
}

/* recolor the accent elements of an icon */
.jp-icon-accent0[fill] {
  fill: var(--jp-layout-color0);
}
.jp-icon-accent1[fill] {
  fill: var(--jp-layout-color1);
}
.jp-icon-accent2[fill] {
  fill: var(--jp-layout-color2);
}
.jp-icon-accent3[fill] {
  fill: var(--jp-layout-color3);
}
.jp-icon-accent4[fill] {
  fill: var(--jp-layout-color4);
}

.jp-icon-accent0[stroke] {
  stroke: var(--jp-layout-color0);
}
.jp-icon-accent1[stroke] {
  stroke: var(--jp-layout-color1);
}
.jp-icon-accent2[stroke] {
  stroke: var(--jp-layout-color2);
}
.jp-icon-accent3[stroke] {
  stroke: var(--jp-layout-color3);
}
.jp-icon-accent4[stroke] {
  stroke: var(--jp-layout-color4);
}

/* brand icon colors. Same for light and dark */
.jp-icon-brand0[fill] {
  fill: var(--jp-brand-color0);
}
.jp-icon-brand1[fill] {
  fill: var(--jp-brand-color1);
}
.jp-icon-brand2[fill] {
  fill: var(--jp-brand-color2);
}
.jp-icon-brand3[fill] {
  fill: var(--jp-brand-color3);
}
.jp-icon-brand4[fill] {
  fill: var(--jp-brand-color4);
}

.jp-icon-brand0[stroke] {
  stroke: var(--jp-brand-color0);
}
.jp-icon-brand1[stroke] {
  stroke: var(--jp-brand-color1);
}
.jp-icon-brand2[stroke] {
  stroke: var(--jp-brand-color2);
}
.jp-icon-brand3[stroke] {
  stroke: var(--jp-brand-color3);
}
.jp-icon-brand4[stroke] {
  stroke: var(--jp-brand-color4);
}

/* warn icon colors. Same for light and dark */
.jp-icon-warn0[fill] {
  fill: var(--jp-warn-color0);
}
.jp-icon-warn1[fill] {
  fill: var(--jp-warn-color1);
}
.jp-icon-warn2[fill] {
  fill: var(--jp-warn-color2);
}
.jp-icon-warn3[fill] {
  fill: var(--jp-warn-color3);
}

.jp-icon-warn0[stroke] {
  stroke: var(--jp-warn-color0);
}
.jp-icon-warn1[stroke] {
  stroke: var(--jp-warn-color1);
}
.jp-icon-warn2[stroke] {
  stroke: var(--jp-warn-color2);
}
.jp-icon-warn3[stroke] {
  stroke: var(--jp-warn-color3);
}

/* icon colors that contrast well with each other and most backgrounds */
.jp-icon-contrast0[fill] {
  fill: var(--jp-icon-contrast-color0);
}
.jp-icon-contrast1[fill] {
  fill: var(--jp-icon-contrast-color1);
}
.jp-icon-contrast2[fill] {
  fill: var(--jp-icon-contrast-color2);
}
.jp-icon-contrast3[fill] {
  fill: var(--jp-icon-contrast-color3);
}

.jp-icon-contrast0[stroke] {
  stroke: var(--jp-icon-contrast-color0);
}
.jp-icon-contrast1[stroke] {
  stroke: var(--jp-icon-contrast-color1);
}
.jp-icon-contrast2[stroke] {
  stroke: var(--jp-icon-contrast-color2);
}
.jp-icon-contrast3[stroke] {
  stroke: var(--jp-icon-contrast-color3);
}

/* CSS for icons in selected items in the settings editor */
#setting-editor .jp-PluginList .jp-mod-selected .jp-icon-selectable[fill] {
  fill: white;
}

#setting-editor
  .jp-PluginList
  .jp-mod-selected
  .jp-icon-selectable-inverse[fill] {
  fill: var(--jp-brand-color1);
}

/* CSS for icons in selected filebrowser listing items */
.jp-DirListing-item.jp-mod-selected .jp-icon-selectable[fill] {
  fill: white;
}

.jp-DirListing-item.jp-mod-selected .jp-icon-selectable-inverse[fill] {
  fill: var(--jp-brand-color1);
}

/* CSS for icons in selected tabs in the sidebar tab manager */
#tab-manager .p-TabBar-tab.jp-mod-active .jp-icon-selectable[fill] {
  fill: white;
}

#tab-manager .p-TabBar-tab.jp-mod-active .jp-icon-selectable-inverse[fill] {
  fill: var(--jp-brand-color1);
}

/* special handling for splash icon CSS. While the theme CSS reloads during
   splash, the splash icon can loose theming. To prevent that, we set a
   default for its color variable */
:root {
  --jp-warn-color0: var(--md-orange-700);
}

/**
 * (DEPRECATED) Support for icons as CSS `background-images`
 */

.jp-MaterialIcon {
  min-width: 16px;
  min-height: 16px;
  background-size: 16px;
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
}

.jp-Icon {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  margin: auto;
}

.jp-Icon-16 {
  min-width: 16px;
  min-height: 16px;
  background-size: 16px;
}

.jp-Icon-18 {
  min-width: 18px;
  min-height: 18px;
  background-size: 18px;
}

.jp-Icon-20 {
  min-width: 20px;
  min-height: 20px;
  background-size: 20px;
}

.jp-BugIcon {
  background-image: var(--jp-icon-bug);
}

.jp-BuildIcon {
  background-image: var(--jp-icon-build);
}

.jp-CircleIcon {
  background-image: var(--jp-icon-kernel-running);
}

.jp-CloseIcon {
  background-image: var(--jp-icon-close);
}

.jp-CodeConsoleIcon {
  background-image: var(--jp-icon-console);
}

.jp-DirectionsRunIcon {
  background-image: var(--jp-icon-directions-run);
}

.jp-DownCaretIcon {
  background-image: var(--jp-ui-select-caret);
}

.jp-DownloadIcon {
  background-image: var(--jp-icon-download);
}

.jp-DragIcon {
  margin-right: 4px;
}

.jp-EditIcon {
  background-image: var(--jp-icon-edit);
}

.jp-EllipsesIcon {
  background-image: var(--jp-icon-ellipses);
}

.jp-FileUploadIcon {
  background-image: var(--jp-icon-file-upload);
}

.jp-FilledCircleIcon {
  background-image: var(--jp-icon-circle);
}

.jp-FilterListIcon {
  background-image: var(--jp-icon-filter-list);
}

.jp-HomeIcon {
  background-image: var(--jp-icon-home);
  min-width: 16px;
  min-height: 16px;
  background-size: 16px;
  vertical-align: sub;
}

.jp-JupyterIcon {
  background-image: var(--jp-image-jupyter);
  background-size: 16px;
  margin: 2px;
  margin-left: 8px;
  margin-right: 0px;
  padding-right: 0px;
}

.jp-KeyboardIcon {
  background-image: var(--jp-icon-keyboard);
}

.jp-LauncherIcon {
  background-image: var(--jp-icon-launcher);
}

.jp-LinkIcon {
  background-image: var(--jp-icon-link);
}

.jp-MainAreaLandscapeIcon {
  background-repeat: no-repeat;
  margin-right: 2px;
  width: 22px;
}

.jp-MainAreaPortraitIcon {
  background-position: 0 2px;
  background-repeat: no-repeat;
  margin-right: 2px;
  width: 20px;
}

.jp-MoreHorizIcon {
  background-image: var(--jp-icon-more);
}

.jp-NewFolderIcon {
  background-image: var(--jp-icon-new-folder);
}

.jp-SettingsIcon {
  background-image: var(--jp-icon-settings);
}

.jp-TextEditorIcon {
  background-image: var(--jp-icon-text-editor);
}

.jp-UndoIcon {
  background-image: var(--jp-icon-undo);
}

.jp-VegaIcon {
  background-image: var(--jp-icon-vega);
}