tor-browser

cubic-bezier.css (6168B)

---

/* 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;
}

/* prettier-ignore */
.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);
}