@jupyterlab/ui-components/style/toolbar.css

JupyterLab - UI components written in React

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

:root {
  --jp-private-toolbar-height: calc(
    31px + var(--jp-border-width)
  ); /* leave 28px for content */
}

.jp-MainAreaWidget > .jp-Toolbar {
  border-radius: 0;
}

.jp-Toolbar {
  /* Increase density for toolbar */
  --design-unit: 3.5;
  --toolbar-item-gap: 0;

  color: var(--jp-ui-font-color1);
  border-bottom: var(--jp-border-width) solid var(--jp-toolbar-border-color);
  box-shadow: var(--jp-toolbar-box-shadow);
  background: var(--jp-toolbar-background);
  min-height: var(--jp-toolbar-micro-height);
  padding: 0 2px;
  z-index: 8;
}

/* Toolbar items */

.jp-Toolbar > .jp-Toolbar-item {
  /* Center the items in toolbar */
  height: 100%;
  display: flex;
  align-items: center;
}

.jp-Toolbar::part(positioning-region) {
  align-items: center;
}

.jp-ToolbarLabelComponent {
  background: var(--jp-layout-color1);
  background-color: var(--jp-brand-color1);
  color: var(--jp-ui-inverse-font-color1);
  border: none;
  box-sizing: border-box;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0 6px;
  margin: 0;
  height: 24px;
  border-radius: var(--jp-border-radius);
  display: flex;
  align-items: center;
  text-align: center;
  font-size: var(--jp-ui-font-size0);
  min-width: unset;
  min-height: unset;
  user-select: none;
}

button.jp-ToolbarButtonComponent .jp-ToolbarButtonComponent-label {
  font-size: var(--jp-ui-font-size1);
  line-height: 100%;
  padding-left: 2px;
  color: var(--jp-ui-font-color1);
  font-family: var(--jp-ui-font-family);
}

.jp-Toolbar .jp-ToolbarButtonComponent {
  color: var(--jp-ui-font-color1);
}

.jp-ToolbarButtonComponent::part(content) {
  display: flex;
  align-items: center;
}

.jp-Toolbar > .jp-Toolbar-item.jp-Toolbar-spacer {
  flex-grow: 1;
  flex-shrink: 1;
}

.jp-Toolbar-responsive-popup.jp-ThemedContainer {
  position: absolute;
  height: fit-content;
  border-bottom: var(--jp-border-width) solid var(--jp-toolbar-border-color);
  box-shadow: var(--jp-toolbar-box-shadow);
  background: var(--jp-toolbar-background);
  z-index: 1;
  right: 0;
  top: 0;
}

#jp-main-dock-panel[data-mode='single-document']
  .jp-MainAreaWidget
  > .jp-Toolbar.jp-Toolbar-micro {
  padding: 0;
  min-height: 0;
}

#jp-main-dock-panel[data-mode='single-document']
  .jp-MainAreaWidget
  > .jp-Toolbar {
  border: none;
  box-shadow: none;
}

/* @deprecated dead code to be removed in JupyterLab 5
  Button in toolbar should use the ui-toolkit
  https://github.com/jupyterlab-contrib/jupyter-ui-toolkit.
*/
button.jp-ToolbarButtonComponent {
  background: var(--jp-layout-color1);
  border: none;
  box-sizing: border-box;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0 6px;
  margin: 0;
  height: 24px;
  border-radius: var(--jp-border-radius);
  display: flex;
  align-items: center;
  text-align: center;
  font-size: var(--jp-ui-font-size0);
  min-width: unset;
  min-height: unset;
}

button.jp-ToolbarButtonComponent:disabled {
  opacity: 0.4;
}

button.jp-ToolbarButtonComponent > span {
  padding: 0;
  flex: 0 0 auto;
}