Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(718)

Unified Diff: Source/devtools/front_end/elements/animationTimeline.css

Issue 1155773002: Devtools Animations: Add cubic bezier easing editor for animations (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Missing files Created 5 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: Source/devtools/front_end/elements/animationTimeline.css
diff --git a/Source/devtools/front_end/elements/animationTimeline.css b/Source/devtools/front_end/elements/animationTimeline.css
index 100658bac3f40e9ceb98ca369cd9966a4fc90e1d..0bf82134470fbbeb28eca572922fed2328312719 100644
--- a/Source/devtools/front_end/elements/animationTimeline.css
+++ b/Source/devtools/front_end/elements/animationTimeline.css
@@ -59,6 +59,10 @@ circle.animation-endpoint:hover, circle.animation-keyframe-point:hover {
transform: scale(1.2);
}
+.animation-tail-iterations circle.animation-endpoint:hover, .animation-tail-iterations circle.animation-keyframe-point:hover {
+ transform: scale(1);
+}
+
circle.animation-endpoint:active, circle.animation-keyframe-point:active {
transform: scale(1);
}
@@ -76,6 +80,7 @@ circle.animation-keyframe-point {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
+ min-width: 45px;
}
.animation-timeline-header {
@@ -282,7 +287,7 @@ svg.animation-ui g:first-child {
opacity: 1;
}
-.animation-tail-iterations {
+g {
opacity: 0.5;
}
@@ -314,4 +319,40 @@ text.animation-timeline-grid-label {
.animation-node-row.animation-node-selected {
background-color: hsla(218, 78%, 66%, 0.1);
-}
+}
+
+.bezier-icon {
+ width: 14px;
+ height: 14px;
+ background-color: #9C27B0;
+ position: absolute;
+ top: 13px;
+ border-radius: 2px;
+ opacity: 0;
+ z-index: 10;
+ padding: 2px;
+ left: -30px;
+ transition: opacity 100ms cubic-bezier(0, 0, 0.2, 1);
+ transition-delay: 500ms;
+}
+
+.bezier-icon.shown {
+ opacity: 0.3;
+ transition-delay: 0s;
+}
+
+.bezier-icon.bezier-editor-open {
+ opacity: 1.0 !important;
+}
+
+.bezier-icon:hover {
+ opacity: 1.0;
+ transition-delay: 0s;
+}
+
+.bezier-icon path {
+ stroke: white;
+ stroke-width: 1.5;
+ stroke-linecap: square;
+ fill: none;
+}

Powered by Google App Engine
This is Rietveld 408576698