gantt-lib 0.112.0 → 0.113.0

package/dist/styles.css

@@ -3494,6 +3494,10 @@
   position: relative;
   background: var(--gantt-cell-background, #ffffff);
   --gantt-pf-day-width: 40px;
+  --gantt-pf-day-line-width: 0.5px;
+  --gantt-pf-day-line-color: rgb(226, 226, 226);
+  --gantt-pf-row-line-width: 0.5px;
+  --gantt-pf-row-line-color: var(--gantt-plan-fact-row-line-color, rgb(146, 153, 160));
 }
 .gantt-pf-header {
   position: sticky;
@@ -3504,6 +3508,14 @@
   border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
   box-sizing: border-box;
 }
+.gantt-pf-headerTodayLine {
+  position: absolute;
+  bottom: 0;
+  z-index: 11;
+  width: var(--gantt-today-indicator-width);
+  background: var(--gantt-today-indicator-color);
+  pointer-events: none;
+}
 .gantt-pf-body {
   position: relative;
   z-index: 0;
@@ -3515,19 +3527,64 @@
   grid-template-rows: 1fr 1fr;
   box-sizing: border-box;
   overflow: hidden;
-  box-shadow: inset 0 -1px 0 var(--gantt-plan-fact-row-line-color, #b7c3d0);
+  background-image:
+    linear-gradient(
+      to right,
+      transparent 0,
+      transparent var(--gantt-pf-today-left, -10000px),
+      var(--gantt-today-indicator-color) var(--gantt-pf-today-left, -10000px),
+      var(--gantt-today-indicator-color) calc(var(--gantt-pf-today-left, -10000px) + var(--gantt-today-indicator-width)),
+      transparent calc(var(--gantt-pf-today-left, -10000px) + var(--gantt-today-indicator-width))),
+    repeating-linear-gradient(
+      to right,
+      transparent 0,
+      transparent calc(var(--gantt-pf-day-width) - var(--gantt-pf-day-line-width)),
+      var(--gantt-pf-day-line-color, rgba(148, 163, 184, 0.55)) calc(var(--gantt-pf-day-width) - var(--gantt-pf-day-line-width)),
+      var(--gantt-pf-day-line-color, rgba(148, 163, 184, 0.55)) var(--gantt-pf-day-width));
+  box-shadow: inset 0 calc(-1 * var(--gantt-pf-row-line-width)) 0 var(--gantt-pf-row-line-color);
 }
 .gantt-pf-row-parent {
+  background-image:
+    linear-gradient(
+      to right,
+      transparent 0,
+      transparent var(--gantt-pf-today-left, -10000px),
+      var(--gantt-today-indicator-color) var(--gantt-pf-today-left, -10000px),
+      var(--gantt-today-indicator-color) calc(var(--gantt-pf-today-left, -10000px) + var(--gantt-today-indicator-width)),
+      transparent calc(var(--gantt-pf-today-left, -10000px) + var(--gantt-today-indicator-width)));
   font-weight: 600;
 }
+.gantt-pf-row-parent .gantt-pf-cell,
+.gantt-pf-row-parent .gantt-pf-cell-active,
+.gantt-pf-row-parent .gantt-pf-cell-editing:hover,
+.gantt-pf-row-parent .gantt-pf-cell-selected,
+.gantt-pf-row-parent .gantt-pf-cell-selected.gantt-pf-cell-active:hover,
+.gantt-pf-row-parent .gantt-pf-cell-selected.gantt-pf-cell-rangeAnchor,
+.gantt-pf-row-parent .gantt-pf-cell-selected.gantt-pf-cell-rangeAnchor.gantt-pf-cell-active:hover,
+.gantt-pf-row-parent .gantt-pf-cell:not(.gantt-pf-cell-readonly):hover,
+.gantt-pf-row-parent .gantt-pf-cell-active:not(.gantt-pf-cell-selected):hover {
+  box-shadow: none;
+}
 .gantt-pf-row-highlighted {
   background-color: rgba(250, 204, 21, 0.24);
 }
 .gantt-pf-row.gantt-pf-row-hovered {
-  box-shadow: inset 0 -1px 0 var(--gantt-plan-fact-row-line-color, #b7c3d0), inset 0 0 0 9999px var(--gantt-row-hover-background, rgba(59, 130, 246, 0.04));
+  box-shadow: inset 0 calc(-1 * var(--gantt-pf-row-line-width)) 0 var(--gantt-pf-row-line-color), inset 0 0 0 9999px var(--gantt-row-hover-background, rgba(59, 130, 246, 0.04));
 }
 .gantt-pf-row-highlighted.gantt-pf-row-hovered {
-  box-shadow: inset 0 -1px 0 var(--gantt-plan-fact-row-line-color, #b7c3d0), inset 0 0 0 9999px rgba(250, 204, 21, 0.3);
+  box-shadow: inset 0 calc(-1 * var(--gantt-pf-row-line-width)) 0 var(--gantt-pf-row-line-color), inset 0 0 0 9999px rgba(250, 204, 21, 0.3);
+}
+.gantt-pf-monthSeparatorLayer {
+  position: absolute;
+  inset: 0;
+  z-index: 12;
+  pointer-events: none;
+}
+.gantt-pf-monthSeparator {
+  position: absolute;
+  bottom: 0;
+  width: var(--gantt-month-separator-width, 2px);
+  background: var(--gantt-month-separator-color, #374151);
 }
 .gantt-pf-cell {
   position: relative;
@@ -3542,8 +3599,8 @@
   line-height: 1;
   font-variant-numeric: tabular-nums;
   outline: none;
-  background: inherit;
-  box-shadow: inset -1px 0 0 var(--gantt-grid-line-color, #e0e0e0);
+  background: transparent;
+  box-shadow: none;
 }
 .gantt-pf-cell-plan {
   font-weight: 600;
@@ -3564,13 +3621,13 @@
 }
 .gantt-pf-cell-active {
   z-index: 1;
-  box-shadow: inset -1px 0 0 var(--gantt-grid-line-color, #e0e0e0);
+  box-shadow: none;
 }
 .gantt-pf-cell-selected {
-  box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.12), inset -1px 0 0 var(--gantt-grid-line-color, #e0e0e0);
+  box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.12);
 }
 .gantt-pf-cell-selected.gantt-pf-cell-rangeAnchor {
-  box-shadow: inset -1px 0 0 var(--gantt-grid-line-color, #e0e0e0);
+  box-shadow: none;
 }
 .gantt-pf-cell-active:not(.gantt-pf-cell-selected)::after {
   position: absolute;
@@ -3592,20 +3649,20 @@
   cursor: cell;
 }
 .gantt-pf-cell:not(.gantt-pf-cell-readonly):hover {
-  box-shadow: inset -1px 0 0 var(--gantt-grid-line-color, #e0e0e0), inset 0 0 0 9999px rgba(15, 23, 42, 0.06);
+  box-shadow: inset 0 0 0 9999px rgba(15, 23, 42, 0.06);
 }
 .gantt-pf-cell-selected:not(.gantt-pf-cell-active):hover {
-  box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.16), inset -1px 0 0 var(--gantt-grid-line-color, #e0e0e0);
+  box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.16);
 }
 .gantt-pf-cell-selected.gantt-pf-cell-active:hover {
-  box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.12), inset -1px 0 0 var(--gantt-grid-line-color, #e0e0e0);
+  box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.12);
 }
 .gantt-pf-cell-selected.gantt-pf-cell-rangeAnchor:hover,
 .gantt-pf-cell-selected.gantt-pf-cell-rangeAnchor.gantt-pf-cell-active:hover {
-  box-shadow: inset -1px 0 0 var(--gantt-grid-line-color, #e0e0e0);
+  box-shadow: none;
 }
 .gantt-pf-cell-active:not(.gantt-pf-cell-selected):hover {
-  box-shadow: inset -1px 0 0 var(--gantt-grid-line-color, #e0e0e0);
+  box-shadow: none;
 }
 .gantt-pf-cell-active:not(.gantt-pf-cell-selected):hover::after {
   border-color: #1d4ed8;
@@ -3654,7 +3711,7 @@
   cursor: crosshair;
 }
 .gantt-pf-cell-editing:hover {
-  box-shadow: inset -1px 0 0 var(--gantt-grid-line-color, #e0e0e0);
+  box-shadow: none;
 }
 .gantt-pf-cellValue {
   overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-lib",
-  "version": "0.112.0",
+  "version": "0.113.0",
   "description": "React scheduling UI library for Gantt charts, resource planners, and table-matrix views",
   "license": "MIT",
   "repository": {