Tweak styles

discoveryjs · Mar 29, 2024 · 3f1fa68 · 3f1fa68
1 parent 41d5fc9
commit 3f1fa68
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 89 deletions.
diff --git a/app/pages/default.css b/app/pages/default.css
@@ -104,7 +104,7 @@
 }
 
 .page-default .view-page-indicators {
-    margin-bottom: 4px;
+    margin-bottom: 3px;
 }
 .page-default .view-page-indicators .runtime:is(.nodejs, .chromium, .electron, .unknown) .value::before {
     content: "";
@@ -163,10 +163,8 @@
     grid-column: 3 / 4;
     box-sizing: border-box;
     margin: 0 1px;
-}
-.page-default .area-timelines .view-time-ruler .view-time-ruler__selection-overlay {
-    top: -1px;
-    bottom: -3px;
+    --overlay-offset-top: -1px;
+    --overlay-offset-bottom: -3px;
 }
 .page-default .area-timelines .view-time-ruler .interval-marker:first-child {
     margin-left: -1px;

diff --git a/app/views/flamechart/index.css b/app/views/flamechart/index.css
@@ -39,6 +39,10 @@
         var(--color, 128, 128, 128),
         var(--fill-opacity)
     );
+    background-color: color-mix(in srgb,
+        rgb(var(--color, 128, 128, 128)) calc(var(--fill-opacity)*100%),
+        var(--discovery-background-color)
+    );
     transition: var(--transition);
     transition-property: left, right, opacity;
 }

diff --git a/app/views/subject-with-nested-timeline.css b/app/views/subject-with-nested-timeline.css
@@ -23,12 +23,10 @@
 }
 .view-subject-with-nested-timeline .view-time-ruler {
     margin-left: 1px;
+    --overlay-offset-top: -1px;
+    --overlay-offset-bottom: -1px;
 }
-.view-subject-with-nested-timeline .view-time-ruler .view-time-ruler__selection-overlay {
-    top: -1px;
-    bottom: -1px;
-}
-.view-subject-with-nested-timeline .view-time-ruler .interval-marker {
+.view-subject-with-nested-timeline .view-time-ruler .interval-marker:first-child {
     margin-left: -1px;
 }
 .view-subject-with-nested-timeline .view-timeline-segments {

diff --git a/app/views/subject-with-nested-timeline.js b/app/views/subject-with-nested-timeline.js
@@ -116,7 +116,7 @@ discovery.view.define('subject-with-nested-timeline', {
                 bins: '=bins',
                 max: '=binTime',
                 binsMax: true,
-                color: '=area.name.color()',
+                color: '=color',
                 height: 20
             }
         }

diff --git a/app/views/time-ruler.css b/app/views/time-ruler.css
@@ -4,104 +4,97 @@
 
     position: absolute;
     inset: 0;
-  }
+}
 .view-time-ruler, .view-time-ruler * {
-  -webkit-user-drag: none;
-  user-select: none;
+    -webkit-user-drag: none;
+    user-select: none;
 }
 .view-time-ruler[data-active-trigger="start"],
 .view-time-ruler[data-active-trigger="finish"] {
-  cursor: col-resize;
+    cursor: col-resize;
 }
 .view-time-ruler[data-active-trigger="both"] {
-  cursor: move;
+    cursor: move;
 }
 
 .view-time-ruler__selection-overlay {
-  display: none;
-  position: absolute;
-  inset: 0;
-  z-index: 99;
+    display: none;
+    position: absolute;
+    inset: 0;
+    top: var(--overlay-offset-top, 0);
+    bottom: var(--overlay-offset-bottom, 0);
+    z-index: 99;
 }
 .view-time-ruler[data-state="hovered"] .view-time-ruler__selection-overlay {
-  pointer-events: none;
+    pointer-events: none;
 }
 .view-time-ruler:not([data-state="none"]) .view-time-ruler__selection-overlay {
-  display: block;
+    display: block;
 }
 .view-time-ruler__selection-overlay-mover {
-  position: absolute;
-  inset: 0;
-  left: var(--left);
-  width: var(--width);
-  z-index: 1;
-  cursor: move;
-  transition: .2s ease;
-  transition-property: background-color;
-}
-.view-time-ruler[data-state="hovered"] .view-time-ruler__selection-overlay-mover,
-.view-time-ruler[data-state="selecting"] .view-time-ruler__selection-overlay-mover {
-  pointer-events: none;
-  background-color: rgba(0, 152, 251, .2);
-}
-.view-time-ruler[data-state="selected"] .view-time-ruler__selection-overlay-mover {
-  background-color: rgba(0, 152, 251, .1);
+    position: absolute;
+    inset: 0;
+    left: var(--left);
+    width: var(--width);
+    z-index: 1;
+    cursor: move;
 }
 .view-time-ruler__selection-overlay-mover-trigger {
-  --extra-pointer-size: 2.5px;
-  --extra-pointer-inner-size: clamp(0px, (100% - 2 * var(--extra-pointer-size)) / 2, var(--extra-pointer-size));
+    --extra-pointer-size: 2.5px;
+    --extra-pointer-inner-size: clamp(0px, (100% - 2 * var(--extra-pointer-size)) / 2, var(--extra-pointer-size));
 
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  background-color: #268fea66;
-  background-clip: content-box;
-  padding: 0 var(--extra-pointer-size);
-  transition: .25s ease;
-  transition-property: background-color;
-  cursor: col-resize;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: #268fea66;
+    background-clip: content-box;
+    padding: 0 var(--extra-pointer-size);
+    transition: .25s ease;
+    transition-property: background-color;
+    cursor: col-resize;
 }
 .view-time-ruler[data-state="selecting"] .view-time-ruler__selection-overlay-mover-trigger {
-  transition: none;
+    transition: none;
 }
 .view-time-ruler__selection-overlay-mover-trigger[data-trigger="start"] {
-  left: calc(-1 * var(--extra-pointer-size));
-  padding-right: var(--extra-pointer-inner-size);
+    left: calc(-1 * var(--extra-pointer-size));
+    padding-right: var(--extra-pointer-inner-size);
 }
 .view-time-ruler__selection-overlay-mover-trigger[data-trigger="finish"] {
-  right: calc(-1 * var(--extra-pointer-size));
-  padding-left: var(--extra-pointer-inner-size);
+    right: calc(-1 * var(--extra-pointer-size));
+    padding-left: var(--extra-pointer-inner-size);
 }
 .view-time-ruler__selection-overlay-mover-trigger:hover,
 .view-time-ruler[data-active-trigger="start"] .view-time-ruler__selection-overlay-mover-trigger[data-trigger="start"],
 .view-time-ruler[data-active-trigger="finish"] .view-time-ruler__selection-overlay-mover-trigger[data-trigger="finish"] {
-  background-color: #268fea;
+    background-color: #268fea;
 }
 .view-time-ruler[data-state="hovered"] .view-time-ruler__selection-overlay-mover-trigger {
-  display: none;
+    display: none;
 }
 .view-time-ruler__selection-overlay::before,
 .view-time-ruler__selection-overlay::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: var(--left);
-  opacity: 0;
-  transition: backdrop-filter .25s ease-in;
-  pointer-events: none;
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: var(--left);
+    opacity: 0;
+    transition: .25s ease-in;
+    transition-property: opacity, backdrop-filter;
+    pointer-events: none;
 }
 .view-time-ruler__selection-overlay::after {
-  left: calc(var(--left) + var(--width));
-  right: 0;
-  width: auto;
+    left: calc(var(--left) + var(--width));
+    right: 0;
+    width: auto;
 }
 .view-time-ruler[data-state="selected"] .view-time-ruler__selection-overlay::before,
 .view-time-ruler[data-state="selected"] .view-time-ruler__selection-overlay::after {
-  opacity: 1;
-  backdrop-filter: grayscale(1);
+    opacity: 1;
+    backdrop-filter: saturate(0);
 }
 
 .view-time-ruler .interval-marker {
@@ -115,30 +108,51 @@
 }
 .view-time-ruler:is([data-labels="both"], [data-labels="top"]) .interval-marker::before,
 .view-time-ruler:is([data-labels="both"], [data-labels="bottom"]) .interval-marker::after {
-  content: attr(data-title);
-  position: absolute;
-  left: 3px;
-  font-size: 10px;
-  line-height: 10px;
+    content: attr(data-title);
+    position: absolute;
+    left: 3px;
+    font-size: 10px;
+    line-height: 10px;
 }
 .view-time-ruler .interval-marker::before {
-  top: 2px;
+    top: 2px;
 }
 .view-time-ruler .interval-marker::after {
-  bottom: 2px;
+    bottom: 2px;
+}
+
+/* use pseudo instead styling for mover to not overlay content */
+.view-time-ruler::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    width: var(--width);
+    left: var(--left);
+    top: var(--overlay-offset-top, 0);
+    bottom: var(--overlay-offset-bottom, 0);
+    pointer-events: none;
+    transition: .2s ease;
+    transition-property: background-color;
+}
+.view-time-ruler[data-state="hovered"]::before,
+.view-time-ruler[data-state="selecting"]::before {
+    background-color: rgba(0, 152, 251, .2);
+}
+.view-time-ruler[data-state="selected"]::before {
+    background-color: rgba(0, 152, 251, .1);
 }
 
 .view-time-ruler-tooltip {
-  padding: 5px 10px;
-  min-width: 200px;
-  border: none;
-  border-radius: 3px;
-  font-size: 12px;
-  background: rgba(255, 255, 255, .75);
-  -webkit-backdrop-filter: blur(4px);
-  backdrop-filter: blur(4px);
-  pointer-events: none;
+    padding: 5px 10px;
+    min-width: 200px;
+    border: none;
+    border-radius: 3px;
+    font-size: 12px;
+    background: rgba(255, 255, 255, .75);
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
+    pointer-events: none;
 }
 .discovery-root-darkmode .view-time-ruler-tooltip {
-  background: rgba(36, 36, 36, .8);
+    background: rgba(36, 36, 36, .8);
 }
diff --git a/app/views/timeline-segments.css b/app/views/timeline-segments.css
@@ -10,7 +10,7 @@
 }
 
 .view-timeline-segments path {
-    fill: var(--color, #79c33ec9);
+    fill: var(--color, #888);
 }
 .view-timeline-segments path.rel-path {
     opacity: .4;