diff options
Diffstat (limited to 'devtools/client/shared/widgets/cubic-bezier.css')
| -rw-r--r-- | devtools/client/shared/widgets/cubic-bezier.css | 216 |
1 files changed, 216 insertions, 0 deletions
diff --git a/devtools/client/shared/widgets/cubic-bezier.css b/devtools/client/shared/widgets/cubic-bezier.css new file mode 100644 index 0000000000..4a73cb75ef --- /dev/null +++ b/devtools/client/shared/widgets/cubic-bezier.css @@ -0,0 +1,216 @@ +/* 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 { + 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); +} |