X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdevtools%2Fanimationinspector.css;h=b3c78305cd0d28f0d97543d8d225bd303f51f06c;hp=a48e4e7673588eab69c9c8cbdc114ef1da3e0131;hb=d7b7f7e155c7317942b24fc7aa53c4f9372581b9;hpb=e9fbfc3a7b3198b48b041b9d5ce52d444d3f3a40

diff --git a/LCARStrek/browser/devtools/animationinspector.css b/LCARStrek/browser/devtools/animationinspector.css
index a48e4e76..b3c78305 100644
--- a/LCARStrek/browser/devtools/animationinspector.css
+++ b/LCARStrek/browser/devtools/animationinspector.css
@@ -32,9 +32,12 @@ body {
   color: var(--theme-content-color3);
 }
 
-/* The top toolbar, containing the toggle-all button */
+/* The top toolbar, containing the toggle-all button. And the timeline toolbar,
+   containing playback control buttons, shown only when there are animations
+   displayed in the timeline */
 
-#toolbar {
+#global-toolbar,
+#timeline-toolbar {
   border-bottom: 1px solid var(--theme-splitter-color);
   display: flex;
   flex-direction: row;
@@ -43,13 +46,20 @@ body {
   height: var(--toolbar-height);
 }
 
-#toolbar .label {
-  padding: 1px 4px;
+#timeline-toolbar {
+ display: none;
 }
 
-#toggle-all {
-  border-width: 0 0 0 1px;
-  min-height: var(--toolbar-height);
+[timeline] #global-toolbar {
+  display: none;
+}
+
+[timeline] #timeline-toolbar {
+  display: flex;
+}
+
+#global-toolbar .label {
+  padding: 1px 4px;
 }
 
 /* The main animations container */
@@ -59,6 +69,10 @@ body {
   overflow: auto;
 }
 
+[empty] #players {
+  display: none;
+}
+
 /* The error message, shown when an invalid/unanimated element is selected */
 
 #error-message {
@@ -71,15 +85,23 @@ body {
   display: none;
 }
 
-/* Element picker and toggle-all buttons */
+[empty] #error-message {
+  display: block;
+}
+
+/* Element picker, toggle-all buttons, timeline pause button, ... */
 
-#element-picker,
-#toggle-all {
+#global-toolbar .devtools-button,
+#timeline-toolbar .devtools-button {
+  border-width: 0 0 0 1px;
+  min-height: var(--toolbar-height);
+}
+
+.devtools-button {
   position: relative;
 }
 
-#element-picker::before,
-#toggle-all::before {
+.devtools-button::before {
   content: "";
   display: block;
   width: 16px;
@@ -88,10 +110,13 @@ body {
   left: 50%;
   top: 50%;
   margin: -8px 0 0 -8px;
+}
+
+#element-picker::before {
   background-image: url("chrome://browser/skin/devtools/command-pick.png");
 }
 
-#toggle-all::before {
+.pause-button::before {
   background-image: url("debugger-pause.png");
 }
 
@@ -100,7 +125,7 @@ body {
   filter: none; /* Icon is blue when checked, don't invert for light theme */
 }
 
-#toggle-all.paused::before {
+.pause-button.paused::before {
   background-image: url("debugger-play.png");
 }
 
@@ -110,11 +135,11 @@ body {
     background-size: 64px;
   }
 
-  #toggle-all::before {
+  .pause-button::before {
     background-image: url("debugger-pause@2x.png");
   }
 
-  #toggle-all.paused::before {
+  .pause-button.paused::before {
     background-image: url("debugger-play@2x.png");
   }
 }
@@ -124,6 +149,7 @@ body {
 .animation-timeline {
   height: 100%;
   overflow: hidden;
+  position: relative;
   /* The timeline gets its background-image from a canvas element created in
      /browser/devtools/animationinspector/utils.js drawGraphElementBackground
      thanks to document.mozSetImageElement("time-graduations", canvas)