Source code
Revision control
Copy as Markdown
Other Tools
/* 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
/* Based on Lea Verou www.cubic-bezier.com
.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 0px;
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: 0px;
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 0px;
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 0px 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);
}