jupyterlab/packages/application/style/buttons.css

/*-----------------------------------------------------------------------------
| Variables
|----------------------------------------------------------------------------*/

:root {
  --jp-flat-button-height: 24px;
  --jp-flat-button-padding: 8px 12px;
}

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

button {
  border-radius: var(--jp-border-radius);
}

button.jp-mod-styled.jp-mod-accept {
  background: var(--md-blue-500);
  border: 0;
  color: white;
}

button.jp-mod-styled.jp-mod-accept:hover {
  background: var(--md-blue-600);
}

button.jp-mod-styled.jp-mod-accept:active {
  background: var(--md-blue-700);
}

button.jp-mod-styled.jp-mod-reject {
  background: var(--md-grey-500);
  border: 0;
  color: white;
}

button.jp-mod-styled.jp-mod-reject:hover {
  background: var(--md-grey-600);
}

button.jp-mod-styled.jp-mod-reject:active {
  background: var(--md-grey-700);
}

button.jp-mod-styled.jp-mod-warn {
  background: var(--jp-error-color1);
  border: 0;
  color: white;
}

button.jp-mod-styled.jp-mod-warn:hover {
  background: var(--md-red-600);
}

button.jp-mod-styled.jp-mod-warn:active {
  background: var(--md-red-700);
}

.jp-Button-flat {
  text-decoration: none;
  padding: var(--jp-flat-button-padding);
  color: var(--jp-warn-color1);
  font-weight: 500;
  background-color: transparent;
  height: var(--jp-private-running-shutdown-button-height);
  line-height: var(--jp-private-running-shutdown-button-height);
  transition: background-color 0.1s ease;
  border-radius: 2px;
}

.jp-Button-flat:hover {
  background-color: rgba(153, 153, 153, 0.1);
}

.jp-Button-flat:focus {
  border: none;
  box-shadow: none;
  background-color: rgba(153, 153, 153, 0.2);
}

.jp-slider {
  display: flex;
  align-items: center;
  font-size: var(--jp-ui-font-size1);
}

.jp-slider-sdm {
  border: none;
  height: 20px;
}

.jp-slider:hover {
  background-color: var(--jp-layout-color2);
}

.jp-slider-label {
  margin-right: 5px;
}

.jp-slider-track {
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: var(--jp-border-color1);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
  height: 15px;
  width: 35px;
}

.jp-slider-track::before {
  content: '';
  height: 10px;
  width: 10px;
  margin-left: 5px;
  margin-right: 50%;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

.jp-slider[aria-checked='true'] .jp-slider-track {
  background-color: var(--jp-warn-color0);
}

.jp-slider[aria-checked='true'] .jp-slider-track::before {
  margin-left: 50%;
  margin-right: 5px;
}