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 {
display: flex;
width: 510px;
height: 370px;
flex-direction: row-reverse;
overflow: hidden;
padding: 5px;
box-sizing: border-box;
}
.cubic-bezier-container .display-wrap {
width: 50%;
height: 100%;
text-align: center;
overflow: hidden;
}
/* Coordinate Plane */
.cubic-bezier-container .coordinate-plane {
width: 150px;
height: 370px;
margin: 0 auto;
position: relative;
}
.cubic-bezier-container .control-point {
position: absolute;
z-index: 1;
height: 10px;
width: 10px;
border: 0;
background: #666;
display: block;
margin: -5px 0 0 -5px;
outline: none;
border-radius: 5px;
padding: 0;
cursor: pointer;
}
.cubic-bezier-container .display-wrap {
background:
repeating-linear-gradient(0deg,
transparent,
var(--bezier-grid-color) 0,
var(--bezier-grid-color) 1px,
transparent 1px,
transparent 15px) no-repeat,
repeating-linear-gradient(90deg,
transparent,
var(--bezier-grid-color) 0,
var(--bezier-grid-color) 1px,
transparent 1px,
transparent 15px) no-repeat;
background-size: 100% 100%, 100% 100%;
background-position: -2px 5px, -2px 5px;
user-select: none;
}
.cubic-bezier-container canvas.curve {
background:
linear-gradient(-45deg,
transparent 49.7%,
var(--bezier-diagonal-color) 49.7%,
var(--bezier-diagonal-color) 50.3%,
transparent 50.3%) center no-repeat;
background-size: 100% 100%;
background-position: 0 0;
}
/* Timing Function Preview Widget */
.cubic-bezier-container .timing-function-preview {
position: absolute;
bottom: 20px;
right: 45px;
width: 150px;
}
.cubic-bezier-container .timing-function-preview .scale {
position: absolute;
top: 6px;
left: 0;
z-index: 1;
width: 150px;
height: 1px;
background: #ccc;
}
.cubic-bezier-container .timing-function-preview .dot {
position: absolute;
top: 0;
left: -7px;
z-index: 2;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid white;
background: #4C9ED9;
}
/* Preset Widget */
.cubic-bezier-container .preset-pane {
width: 50%;
height: 100%;
border-right: 1px solid var(--theme-splitter-color);
padding-right: 4px; /* Visual balance for the panel-arrowcontent border on the left */
}
#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;
}
#preset-categories .category:last-child {
border-right: none;
}
.cubic-bezier-container .category {
padding: 5px 0px;
width: 33.33%;
text-align: center;
text-transform: capitalize;
border-right: 1px solid var(--theme-splitter-color);
cursor: default;
color: var(--theme-body-color);
text-overflow: ellipsis;
overflow: hidden;
}
.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);
}