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

diff --git a/LCARStrek/browser/devtools/animationinspector.css b/LCARStrek/browser/devtools/animationinspector.css
index 1f83b3f5..a48e4e76 100644
--- a/LCARStrek/browser/devtools/animationinspector.css
+++ b/LCARStrek/browser/devtools/animationinspector.css
@@ -9,6 +9,15 @@
   --even-animation-timeline-background-color: rgba(160,144,144,0.03);
 }
 
+:root {
+  /* How high should toolbars be */
+  --toolbar-height: 20px;
+  /* How wide should the sidebar be */
+  --timeline-sidebar-width: 150px;
+  /* How high should animations displayed in the timeline be */
+  --timeline-animation-height: 20px;
+}
+
 html {
   height: 100%;
 }
@@ -31,7 +40,7 @@ body {
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
-  height: 20px;
+  height: var(--toolbar-height);
 }
 
 #toolbar .label {
@@ -40,13 +49,13 @@ body {
 
 #toggle-all {
   border-width: 0 0 0 1px;
-  min-height: 20px;
+  min-height: var(--toolbar-height);
 }
 
 /* The main animations container */
 
 #players {
-  height: calc(100% - 20px);
+  height: calc(100% - var(--toolbar-height));
   overflow: auto;
 }
 
@@ -123,17 +132,42 @@ body {
   background-repeat: repeat-y;
   /* The animations are drawn 150px from the left edge so that animated nodes
      can be displayed in a sidebar */
-  background-position: 150px 0;
+  background-position: var(--timeline-sidebar-width) 0;
   display: flex;
   flex-direction: column;
 }
 
+.animation-timeline .scrubber {
+  position: absolute;
+  height: 100%;
+  width: var(--timeline-sidebar-width);
+  border-right: 1px solid #FF0000;
+  box-sizing: border-box;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.animation-timeline .scrubber::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 1px;
+  right: -6px;
+  border-top: 5px solid #FF0000;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+
 .animation-timeline .time-header {
-  margin-left: 150px;
-  height: 20px;
+  margin-left: var(--timeline-sidebar-width);
+  height: var(--toolbar-height);
   overflow: hidden;
   position: relative;
+  /* This is the same color as the time graduations in
+     browser/devtools/animationinspector/utils.js */
   border-bottom: 1px solid var(--theme-splitter-color);
+  cursor: col-resize;
+  -moz-user-select: none;
 }
 
 .animation-timeline .time-header .time-tick {
@@ -154,7 +188,7 @@ body {
 
 .animation-timeline .animation {
   margin: 4px 0;
-  height: 20px;
+  height: var(--timeline-animation-height);
   position: relative;
 }
 
@@ -163,7 +197,7 @@ body {
 }
 
 .animation-timeline .animation .target {
-  width: 150px;
+  width: var(--timeline-sidebar-width);
   overflow: hidden;
   height: 100%;
 }
@@ -175,7 +209,7 @@ body {
 .animation-timeline .animation .time-block {
   position: absolute;
   top: 0;
-  left: 150px;
+  left: var(--timeline-sidebar-width);
   right: 0;
   height: 100%;
 }
@@ -185,19 +219,36 @@ body {
 .animation-timeline .animation .iterations {
   position: relative;
   height: 100%;
-  border: 1px solid var(--theme-highlight-lightorange);
   box-sizing: border-box;
-  background: var(--theme-contrast-background);
-  /* Iterations are displayed with a repeating linear-gradient which size is
-     dynamically changed from JS */
+  --timelime-border-color: var(--theme-body-color);
+  --timeline-background-color: var(--theme-splitter-color);
+
+  /* Iterations of the animation are displayed with a repeating linear-gradient
+     which size is dynamically changed from JS. The gradient only draws 1px
+     borders between each iteration. These borders must have the same color as
+     the border of this element */
   background-image:
     linear-gradient(to right,
-                    var(--theme-highlight-lightorange) 0,
-                    var(--theme-highlight-lightorange) 1px,
+                    var(--timelime-border-color) 0,
+                    var(--timelime-border-color) 1px,
                     transparent 1px,
                     transparent 2px);
   background-repeat: repeat-x;
   background-position: -1px 0;
+  border: 1px solid var(--timelime-border-color);
+
+  /* The background color is set independently */
+  background-color: var(--timeline-background-color);
+}
+
+.animation-timeline .animation .cssanimation {
+  --timelime-border-color: var(--theme-highlight-lightorange);
+  --timeline-background-color: var(--theme-contrast-background);
+}
+
+.animation-timeline .animation .csstransition {
+  --timelime-border-color: var(--theme-highlight-bluegrey);
+  --timeline-background-color: var(--theme-highlight-blue);
 }
 
 .animation-timeline .animation .iterations.infinite {
@@ -222,24 +273,41 @@ body {
   top: unset;
 }
 
-.animation-timeline .animation .animation-title {
-  height: 1.5em;
+.animation-timeline .animation .name {
+  color: var(--theme-selection-color);
+  height: 100%;
   width: 100%;
-  box-sizing: border-box;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 150%;
+  padding: 0 2px;
 }
 
 .animation-timeline .animation .delay {
   position: absolute;
   top: 0;
-  height: 100%;
-  background-image: linear-gradient(to bottom,
-                                    transparent,
-                                    transparent 9px,
-                                    var(--theme-highlight-lightorange) 9px,
-                                    var(--theme-highlight-lightorange) 11px,
-                                    transparent 11px,
-                                    transparent);
+  /* Make sure the delay covers up the animation border */
+  transform: translate(-1px, -1px);
+  box-sizing: border-box;
+  height: calc(100% + 2px);
+
+  border: 1px solid var(--timelime-border-color);
+  border-width: 1px 0 1px 1px;
+  background-image: repeating-linear-gradient(45deg,
+                                              transparent,
+                                              transparent 1px,
+                                              var(--theme-selection-color) 1px,
+                                              var(--theme-selection-color) 4px);
+  background-color: var(--timelime-border-color);
+}
+
+.animation-timeline .animation .delay.negative {
+  /* Negative delays are displayed on top of the animation, so they need a
+     right border. Whereas normal delays are displayed just before the
+     animation, so there's already the animation's left border that serves as
+     a separation. */
+  border-width: 1px;
 }
 
 .animation-timeline .animation .delay::before {
@@ -250,14 +318,7 @@ body {
   height: 8px;
   top: 50%;
   margin-top: -4px;
-  background: var(--theme-highlight-lightorange);
-}
-
-.animation-timeline .animation .name {
-  position: absolute;
-  z-index: 1;
-  padding: 2px;
-  white-space: nowrap;
+  background: var(--timelime-border-color);
 }
 
 /* Animation target node gutter, contains a preview of the dom node */
@@ -322,7 +383,7 @@ body {
 /* Timeline wiget */
 
 .timeline {
-  height: 20px;
+  height: var(--timeline-animation-height);
   width: 100%;
   display: flex;
   flex-direction: row;