firefox/devtools/client/shared/widgets/cubic-bezier.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* Based on Lea Verou www.cubic-bezier.com
   See https://github.com/LeaVerou/cubic-bezier */

.cubic-bezier-container {
  /* These should be kept in pixels as they're used in CubicBezierWidget.js to set the canvas size */
  --bezier-curve-width: 150px;
  --bezier-curve-height: 330px;
  --bezier-preview-height: 40px;
  --bezier-tooltip-container-height:  calc(var(--bezier-curve-height) + var(--bezier-preview-height));
  display: grid;
  grid-template-areas:
    "presets curve"
    "presets preview";
  grid-template-columns: 50% 50%;
  grid-template-rows: var(--bezier-curve-height) var(--bezier-preview-height);
  width: 510px;
  height: var(--bezier-tooltip-container-height);
  overflow: hidden;
  padding: 5px;
  box-sizing: border-box;

  .preset-pane {
    grid-area: presets;
    border-inline-end: 1px solid var(--theme-splitter-color);
    padding-inline-end: 4px; /* Visual balance for the panel-arrowcontent border on inline start */
  }

  .display-wrap {
    grid-area: curve;
    text-align: center;
    overflow: hidden;
  }

  .timing-function-preview {
    grid-area: preview;
    align-self: center;
    justify-self: center;
  }
}

/* Coordinate Plane */

.cubic-bezier-container .coordinate-plane {
  width: var(--bezier-curve-width);
  height: var(--bezier-tooltip-container-height);
  margin: 0 auto;
  position: relative;
}

.cubic-bezier-container .control-point {
  position: absolute;
  z-index: 1;
  height: 10px;
  width: 10px;
  border: 0;
  background: var(--timing-function-control-point-background);
  display: block;
  margin: -5px 0 0 -5px;
  outline: none;
  border-radius: 5px;
  padding: 0;
  cursor: pointer;
  /* opt-out of forced colors as --timing-function-control-point-background
     is a registered property, so the engine will compute it to an rgb color,
     which means it won't be seen as a system color in High Contrast Mode
     and a default color would be used. */
     forced-color-adjust: none;
}

.cubic-bezier-container .display-wrap {
  background:
  repeating-linear-gradient(0deg,
    transparent,
    var(--timing-function-grid-color) 0,
    var(--timing-function-grid-color) 1px,
    transparent 1px,
    transparent 15px) no-repeat,
  repeating-linear-gradient(90deg,
    transparent,
    var(--timing-function-grid-color) 0,
    var(--timing-function-grid-color) 1px,
    transparent 1px,
    transparent 15px) no-repeat;
  background-size: 100% 100%, 100% 100%;
  user-select: none;

  :root[forced-colors-active] & {
    /* opt-out of forced colors so we can see still the lines in High Contrast Mode.
     --timing-function-grid-color does have a specific value in HCM so it should be fine */
    forced-color-adjust: none;

    /* And set the forced colors on children so High Contrast Mode behaves as expected */
    & > * {
      forced-color-adjust: auto;
    }
  }
}

/* Timing Function Preview Widget */

.cubic-bezier-container .timing-function-preview {
  width: var(--bezier-curve-width);

  /* Stack the line and the dot on top of each other */
  display: grid;
  align-items: center;
  justify-items: center;
  :is(.scale, .dot) {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
  }
}

.cubic-bezier-container .timing-function-preview .scale {
  width: 100%;
  height: 1px;
  background-color: var(--timing-function-preview-scale);
  /* opt-out of forced colors so we can see the line in High Contrast Mode */
    forced-color-adjust: none;
}

.cubic-bezier-container .timing-function-preview .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--timing-function-preview-dot-border);
  background: var(--timing-function-line-color);
  /* opt-out of forced colors as --timing-function-line-color is using
     a non system but high contrast color */
  forced-color-adjust: none;
}

/* Preset Widget */

#preset-categories {
  display: flex;
  width: 95%;
  border: 1px solid var(--theme-splitter-color);
  border-radius: 2px;
  background-color: var(--theme-toolbar-background);
  margin: 3px auto 0 auto;
}

.cubic-bezier-container .category {
  padding: 5px 0;
  width: 33.33%;
  text-align: center;
  text-transform: capitalize;
  border-inline-end: 1px solid var(--theme-splitter-color);
  cursor: default;
  color: var(--theme-body-color);
  text-overflow: ellipsis;
  overflow: hidden;

  &:last-child {
    border-inline-end: none;
  }
}

.cubic-bezier-container .category:hover {
  background-color: var(--theme-tab-toolbar-background);
}

.cubic-bezier-container .active-category {
  background-color: var(--theme-selection-background);
  color: var(--theme-selection-color);
}

.cubic-bezier-container .active-category:hover {
  background-color: var(--theme-selection-background);
}

#preset-container {
  padding: 0;
  width: 100%;
  height: 331px;
  overflow-y: auto;
}

.cubic-bezier-container .preset-list {
  display: none;
  padding-top: 6px;
}

.cubic-bezier-container .active-preset-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.cubic-bezier-container .preset {
  cursor: pointer;
  width: 33.33%;
  margin: 5px 0;
  text-align: center;
}

.cubic-bezier-container .preset canvas {
  display: block;
  border: 1px solid var(--theme-splitter-color);
  border-radius: 3px;
  background-color: var(--theme-body-background);
  margin: 0 auto;
}

.cubic-bezier-container .preset p {
  font-size: 80%;
  margin: 2px auto 0 auto;
  color: var(--theme-text-color-alt);
  text-transform: capitalize;
  text-overflow: ellipsis;
  overflow: hidden;
}

.cubic-bezier-container .active-preset p,
.cubic-bezier-container .active-preset:hover p {
  color: var(--theme-body-color);
}

.cubic-bezier-container .preset:hover canvas {
  border-color: var(--theme-selection-background);
}

.cubic-bezier-container .active-preset canvas,
.cubic-bezier-container .active-preset:hover canvas {
  background-color: var(--theme-selection-background-hover);
  border-color: var(--theme-selection-background);
}