gantt-lib 0.3.3 → 0.3.4

package/dist/styles.css

@@ -257,254 +257,6 @@
   --gantt-dependency-cycle-color: #ef4444;
   --gantt-expired-color: #ef4444;
 }
-.gantt-container {
-  width: 100%;
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    sans-serif;
-  border: 1px solid var(--gantt-grid-line-color, #e0e0e0);
-  background-color: var(--gantt-cell-background, #ffffff);
-}
-.gantt-scrollContainer {
-  overflow: auto;
-}
-.gantt-stickyHeader {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background-color: var(--gantt-cell-background, #ffffff);
-  border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
-}
-.gantt-taskArea {
-  position: relative;
-  background-color: var(--gantt-cell-background, #ffffff);
-}
-.gantt-tr-row {
-  position: relative;
-  width: 100%;
-  border-bottom: 1px solid var(--gantt-grid-line-color);
-  box-sizing: border-box;
-}
-.gantt-tr-row:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.gantt-tr-taskBar {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  border-radius: var(--gantt-task-bar-border-radius);
-  display: flex;
-  align-items: center;
-  padding: 0 0.5rem;
-  box-sizing: border-box;
-  white-space: nowrap;
-  overflow: visible;
-  cursor: grab;
-}
-.gantt-tr-taskBar:hover {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-.gantt-tr-taskBar.gantt-tr-dragging {
-  cursor: grabbing;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  opacity: 1;
-  transition: none !important;
-}
-.gantt-tr-taskName {
-  color: var(--gantt-task-bar-text-color);
-  font-size: 0.875rem;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-}
-.gantt-tr-taskDuration {
-  color: var(--gantt-task-bar-text-color);
-  font-size: 0.875rem;
-  font-weight: 500;
-  white-space: nowrap;
-  margin-right: 4px;
-}
-.gantt-tr-taskNameHidden {
-  visibility: hidden;
-}
-.gantt-tr-rightLabels {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  pointer-events: none;
-}
-.gantt-tr-dateLabelRight {
-  position: static;
-  margin-right: 0;
-}
-.gantt-tr-externalTaskName {
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: #00389f;
-  white-space: nowrap;
-  user-select: none;
-  margin-left: 4px;
-}
-.gantt-tr-resizeHandle {
-  position: absolute;
-  top: 0;
-  width: 8px;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.1);
-  cursor: ew-resize;
-}
-.gantt-tr-resizeHandleLeft {
-  left: 0;
-}
-.gantt-tr-resizeHandleRight {
-  right: 0;
-}
-.gantt-tr-resizeZoneLeft {
-  cursor: ew-resize;
-}
-.gantt-tr-resizeZoneRight {
-  cursor: ew-resize;
-}
-.gantt-tr-taskContainer {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-.gantt-tr-leftLabels {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  pointer-events: none;
-}
-.gantt-tr-dateLabel {
-  font-size: 0.85rem;
-  color: #666666;
-  white-space: nowrap;
-  pointer-events: none;
-  user-select: none;
-}
-.gantt-tr-dateLabelLeft {
-  position: absolute;
-  right: 100%;
-  margin-right: 6px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.gantt-tsh-header {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--gantt-cell-background);
-  border-bottom: var(--gantt-week-separator-width, 1px) solid var(--gantt-week-separator-color, #374151);
-  box-sizing: border-box;
-}
-.gantt-tsh-monthRow {
-  display: flex;
-  border-bottom: var(--gantt-day-line-width, 1px) solid var(--gantt-day-line-color, #f3f4f6);
-  align-items: center;
-}
-.gantt-tsh-monthCell {
-  box-sizing: border-box;
-  padding: 0.1rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: #1f2937;
-  border-left: var(--gantt-month-separator-width, 2px) solid var(--gantt-month-separator-color, #a1a1a1);
-  text-align: left;
-}
-.gantt-tsh-monthCell:first-child {
-  border-left: none;
-}
-.gantt-tsh-dayRow {
-  display: grid;
-  box-sizing: border-box;
-}
-.gantt-tsh-dayCell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-.gantt-tsh-monthBoundary {
-  border-left: var(--gantt-month-separator-width, 2px) solid var(--gantt-month-separator-color, #a1a1a1);
-}
-.gantt-tsh-dayLabel {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: #374151;
-}
-.gantt-tsh-weekendDay {
-  background-color: var(--gantt-weekend-background, #fee2e2);
-}
-.gantt-tsh-weekendDay .gantt-tsh-dayLabel {
-  color: #dc2626;
-}
-.gantt-tsh-today {
-  background-color: #dc2626;
-  border-radius: 0 4px 4px 0;
-}
-.gantt-tsh-today .gantt-tsh-dayLabel {
-  color: #ffffff;
-}
-.gantt-gb-gridBackground {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  pointer-events: none;
-}
-.gantt-gb-weekendBlock {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  background-color: var(--gantt-weekend-background, #fee2e2);
-}
-.gantt-gb-gridLine {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  background-color: var(--gantt-day-line-color, #f3f4f6);
-}
-.gantt-gb-monthSeparator {
-  width: var(--gantt-month-separator-width, 2px);
-  background-color: var(--gantt-month-separator-color, #374151);
-}
-.gantt-gb-weekSeparator {
-  width: var(--gantt-week-separator-width, 1px);
-  background-color: var(--gantt-week-separator-color, #d1d5db);
-}
-.gantt-gb-dayLine {
-  width: var(--gantt-day-line-width, 1px);
-  background-color: var(--gantt-day-line-color, #f3f4f6);
-}
-.gantt-ti-indicator {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 5;
-  pointer-events: none;
-}
-.gantt-dgl-guideLine {
-  position: absolute;
-  top: 0;
-  width: 2px;
-  background-color: var(--gantt-drag-guide-line-color, #3b82f6);
-  z-index: 20;
-  pointer-events: none;
-  opacity: 0.6;
-}
 
 /* src/components/TimeScaleHeader/TimeScaleHeader.css */
 .gantt-tsh-header {
@@ -527,6 +279,8 @@
   color: #1f2937;
   border-left: var(--gantt-month-separator-width, 2px) solid var(--gantt-month-separator-color, #a1a1a1);
   text-align: left;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 .gantt-tsh-monthCell:first-child {
   border-left: none;
@@ -550,20 +304,23 @@
   color: #374151;
 }
 .gantt-tsh-weekendDay {
-  background-color: var(--gantt-weekend-background, #fee2e2);
+  background-color: var(--gantt-weekend-background, #fef3f2);
 }
 .gantt-tsh-weekendDay .gantt-tsh-dayLabel {
-  color: #dc2626;
+  color: #ef4444;
 }
 .gantt-tsh-today {
   background-color: #dc2626;
-  border-radius: 0 4px 4px 0;
+  border-radius: 4px 4px 4px 0;
 }
 .gantt-tsh-today .gantt-tsh-dayLabel {
   color: #ffffff;
 }
 
 /* src/components/TaskRow/TaskRow.css */
+:root {
+  --gantt-task-bar-border-radius: 6px;
+}
 .gantt-tr-row {
   position: relative;
   width: 100%;
@@ -571,7 +328,7 @@
   box-sizing: border-box;
 }
 .gantt-tr-row:hover {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: rgba(59, 130, 246, 0.04);
 }
 .gantt-tr-taskBar {
   position: absolute;
@@ -584,9 +341,11 @@
   box-sizing: border-box;
   white-space: nowrap;
   overflow: hidden;
+  transition: box-shadow 0.15s ease;
   cursor: grab;
 }
 .gantt-tr-taskBar:hover {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
 }
 .gantt-tr-taskBar.gantt-tr-dragging {
   cursor: grabbing;
@@ -617,7 +376,7 @@
 .gantt-tr-externalTaskName {
   font-size: 0.9rem;
   font-weight: 500;
-  color: #00389f;
+  color: #2563eb;
   white-space: nowrap;
   user-select: none;
   margin-left: 4px;
@@ -625,9 +384,8 @@
 .gantt-tr-resizeHandle {
   position: absolute;
   top: 0;
-  width: 8px;
+  width: 20px;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.1);
   cursor: ew-resize;
   pointer-events: auto;
   z-index: 10;
@@ -661,7 +419,7 @@
 }
 .gantt-tr-dateLabel {
   font-size: 0.85rem;
-  color: #666666;
+  color: #6b7280;
   white-space: nowrap;
   pointer-events: none;
   user-select: none;
@@ -705,7 +463,7 @@
 .gantt-tr-externalProgress {
   font-size: 0.85rem;
   font-weight: 500;
-  color: #666666;
+  color: #6b7280;
   white-space: nowrap;
   margin-right: 4px;
   margin-left: 4px;
@@ -718,7 +476,7 @@
   left: 0;
   width: 100%;
   height: 0;
-  border-top: 1px solid #999;
+  border-top: 1px solid var(--gantt-grid-line-color, #d1d5db);
   pointer-events: none;
   z-index: 0;
 }
@@ -732,7 +490,7 @@
 /* src/components/TodayIndicator/TodayIndicator.css */
 .gantt-ti-indicator {
   position: absolute;
-  top: 0;
+  top: -1px;
   bottom: 0;
   z-index: 5;
   pointer-events: none;
@@ -855,7 +613,7 @@
   padding: 0 0.5rem;
   font-size: 0.75rem;
   font-weight: 600;
-  color: #1f2937;
+  color: #6b7280;
   box-sizing: border-box;
   border-right: 1px solid var(--gantt-grid-line-color, #e0e0e0);
 }
@@ -873,7 +631,7 @@
   cursor: pointer;
 }
 .gantt-tl-row:hover {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: rgba(59, 130, 246, 0.04);
 }
 .gantt-tl-row-selected {
   background-color: rgba(59, 130, 246, 0.15);
@@ -984,7 +742,7 @@
   gap: 2px;
   font-size: 0.75rem;
   font-weight: 600;
-  color: #1f2937;
+  color: #6b7280;
   background: transparent;
   border: none;
   cursor: pointer;
@@ -1033,7 +791,7 @@
   gap: 1px;
   background-color: rgba(59, 130, 246, 0.12);
   border: 1px solid rgba(59, 130, 246, 0.3);
-  border-radius: 4px;
+  border-radius: 6px;
   padding: 4px 4px;
   font-size: 0.7rem;
   color: #1d4ed8;
@@ -1096,7 +854,7 @@
   align-items: center;
   background-color: rgba(107, 114, 128, 0.12);
   border: 1px solid rgba(107, 114, 128, 0.3);
-  border-radius: 4px;
+  border-radius: 6px;
   padding: 4px 4px;
   font-size: 0.7rem;
   color: #6b7280;
@@ -1234,6 +992,8 @@
     sans-serif;
   border: 1px solid var(--gantt-grid-line-color, #e0e0e0);
   background-color: var(--gantt-cell-background, #ffffff);
+  border-radius: 10px;
+  overflow: hidden;
 }
 .gantt-scrollContainer {
   overflow: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-lib",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Lightweight React Gantt chart component library",
   "license": "MIT",
   "repository": {