first part of syncing LCARStrek with Firefox 45-48 devtools theme changes

[themes.git] / LCARStrek / devtools / animationinspector.css

diff --git a/LCARStrek/devtools/animationinspector.css b/LCARStrek/devtools/animationinspector.css
index b54d776557a1cb9a4ae0d96b86a32976a13d4564..cedee0e450e053ee1418588fa90f4edebcf4ef28 100644 (file)
--- a/LCARStrek/devtools/animationinspector.css
+++ b/LCARStrek/devtools/animationinspector.css
@@ -97,44 +97,19 @@ body {
   min-height: var(--toolbar-height);
 }
 
-.devtools-button {
-  position: relative;
-}
-
-.devtools-button::before {
-  content: "";
-  display: block;
-  width: 16px;
-  height: 16px;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin: -8px 0 0 -8px;
-}
-
 #element-picker::before {
-  background-image: url("chrome://devtools/skin/command-pick.png");
+  background-image: url("chrome://devtools/skin/command-pick.svg");
 }
 
 .pause-button::before {
   background-image: url("debugger-pause.png");
 }
 
-#element-picker[checked]::before {
-  background-position: -48px 0;
-  filter: none; /* Icon is blue when checked, don't invert for light theme */
-}
-
 .pause-button.paused::before {
   background-image: url("debugger-play.png");
 }
 
 @media (min-resolution: 1.1dppx) {
-  #element-picker::before {
-    background-image: url("chrome://devtools/skin/command-pick@2x.png");
-    background-size: 64px;
-  }
-
   .pause-button::before {
     background-image: url("debugger-pause@2x.png");
   }
@@ -144,6 +119,13 @@ body {
   }
 }
 
+#timeline-rate select {
+  -moz-appearance: none;
+  text-align: center;
+  color: inherit;
+  font-family: inherit;
+}
+
 /* Animation timeline component */
 
 .animation-timeline {
@@ -310,6 +292,12 @@ body {
   padding: 0 2px;
 }
 
+.animation-timeline .fast-track .name {
+  /* Animations running on the compositor have the fast-track background image*/
+  background-image: url("images/animation-fast-track.svg");
+  background-repeat: no-repeat;
+}
+
 .animation-timeline .animation .delay {
   position: absolute;
   top: 0;
@@ -362,19 +350,20 @@ body {
   padding-left: 4px;
 }
 
-.animation-target .node-selector {
+.animation-target .node-highlighter {
   background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
   padding-left: 16px;
   margin-right: 5px;
   cursor: pointer;
 }
 
-.animation-target .node-selector:hover {
-  background-position: -32px 0;
+.animation-target .node-highlighter:hover {
+  filter: url(images/filters.svg#checked-icon-state);
 }
 
-.animation-target .node-selector:active {
-  background-position: -16px 0;
+.animation-target .node-highlighter:active,
+.animation-target .node-highlighter.selected {
+  filter: url(images/filters.svg#checked-icon-state);
 }
 
 /* Animation title gutter, contains the name, duration, iteration */
@@ -397,7 +386,7 @@ body {
 
 .animation-title .meta-data .compositor-icon {
     display: none;
-    background-image: url("animation-fast-track.svg");
+    background-image: url("images/animation-fast-track.svg");
     background-repeat: no-repeat;
     padding-left: 12px;
     /* Make sure the icon is positioned above the timeline range input so that