bbl-gantt/dist/style.css

一个框架无关的JS甘特图库，支持resize、拖拽新建、支持自定义样式、以及支持duration模式等功能。A framework-independent JS Gantt chart library, supporting resize, drag-and-drop to create new tasks, custom styling, and duration mode functionalities.

:root {
  --gantt-main-color: #165dff;
  --gantt-bg-color: #e5e6eb;
  --gantt-tick-color: #86909c;
  --gantt-header-tick-color: var(--gantt-tick-color);
  --gantt-header-text-color: #4e5969;
  --gantt-header-text-font-size: 14px;
  --gantt-tick-width: 0.2;
  --gantt-tick-maker-width: var(--gantt-tick-width);
  --gantt-v-scroll-mask-bg-color: white;
  --gantt-row-line-color: var(--gantt-tick-color);
  --gantt-row-bg-color: transparent;
  --gantt-time-range-text-color: var(--gantt-main-color);
  --gantt-time-range-stroke-width: 1;
  --gantt-time-range-stroke-color: var(--gantt-main-color);
  --gantt-current-time-line-stroke-width: 1;
  --gantt-current-time-line-stroke-color: #ff7d00;
  --gantt-current-time-line-font-size: 13px;
  --gantt-current-time-line-font-weight: bold;
  --gantt-current-time-line-stroke-dasharray: 0, 5, 10;
  --gantt-current-time-line-text-color: var(
  	--gantt-current-time-line-stroke-color
  );
  --gantt-event-item-font-size: 12px;
  --gantt-event-item-font-weight: 600;
  --gantt-event-item-style-rect-text-color: white;
  --gantt-event-item-style-line-text-color: var(--gantt-main-color);
  --gantt-event-item-style-rect-color: var(--gantt-main-color);
  --gantt-event-item-style-line-color: var(--gantt-event-item-style-rect-color);
  --gantt-event-item-resize-color: white;
  --gantt-event-item-resize-stroke-width: 1;
  --gantt-event-item-left-resize-stroke-width: var(
  	--gantt-event-item-resize-stroke-width
  );
  --gantt-event-item-right-resize-stroke-width: var(
  	--gantt-event-item-resize-stroke-width
  );
  --gantt-event-item-resize-stroke-color: var(
  	--gantt-event-item-style-rect-color
  );
  --gantt-event-item-left-resize-stroke-color: var(
  	--gantt-event-item-resize-stroke-color
  );
  --gantt-event-item-right-resize-stroke-color: var(
  	--gantt-event-item-resize-stroke-color
  );
  --gantt-scrollbar-width: 12px;
  --gantt-scrollbar-height: var(--gantt-scrollbar-width);
  --gantt-scrollbar-thumb-bg-clip: padding-box;
  --gantt-scrollbar-thumb-bg-color: transparent;
  --gantt-scrollbar-thumb-bg-hover-color: rgb(201, 205, 212);
  --gantt-scrollbar-thumb-border: 4px solid transparent;
  --gantt-scrollbar-thumb-border-radius: 7px;
}

.bbl-gantt-v-scroll-mask {
  width: calc(var(--gantt-scrollbar-width) * 2);
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  background-color: var(--gantt-v-scroll-mask-bg-color);
  z-index: 999;
  display: none;
}

.bbl-gantt-container {
  overflow: auto;
  max-width: 100%;
  height: 100%;
  position: relative;
}
.bbl-gantt-container.no-scroll-bar {
  overflow: hidden;
}
.bbl-gantt-container::-webkit-scrollbar-thumb {
  border: var(--gantt-scrollbar-thumb-border);
  background-clip: var(--gantt-scrollbar-thumb-bg-clip);
  border-radius: var(--gantt-scrollbar-thumb-border-radius);
  background-color: var(--gantt-scrollbar-thumb-bg-hover-color);
}
.bbl-gantt-container::-webkit-scrollbar {
  width: var(--gantt-scrollbar-width);
  height: var(--gantt-scrollbar-height);
}
.bbl-gantt-container::-webkit-scrollbar-corner {
  background-color: transparent;
}
.bbl-gantt-container .row-bg {
  fill: var(--gantt-row-bg-color);
}
.bbl-gantt-container .bbl-gantt-body .header .header-bg {
  fill: var(--gantt-bg-color);
}
.bbl-gantt-container .bbl-gantt-body .header .time-tick-item {
  fill: var(--gantt-header-tick-color);
}
.bbl-gantt-container .bbl-gantt-body .header .time-tick-text {
  fill: var(--gantt-header-text-color);
  font-size: var(--gantt-header-text-font-size);
}
.bbl-gantt-container .bbl-gantt-body .time-range .time-range-text {
  fill: var(--gantt-time-range-text-color);
  font-weight: 600;
}
.bbl-gantt-container .bbl-gantt-body .time-range .time-range-line {
  stroke-width: var(--gantt-time-range-stroke-width);
  stroke: var(--gantt-time-range-stroke-color);
}
.bbl-gantt-container .bbl-gantt-body .current-time .current-time-line {
  stroke-width: var(--gantt-current-time-line-stroke-width);
  stroke: var(--gantt-current-time-line-stroke-color);
  stroke-dasharray: var(--gantt-current-time-line-stroke-dasharray);
}
.bbl-gantt-container .bbl-gantt-body .current-time .current-time-text {
  fill: var(--gantt-current-time-line-text-color);
  font-size: var(--gantt-current-time-line-font-size);
  font-weight: var(--gantt-current-time-line-font-weight);
}
.bbl-gantt-container .bbl-gantt-body .rows .row-line {
  fill: var(--gantt-row-line-color);
}
.bbl-gantt-container .bbl-gantt-body .ticks .tick-item {
  fill: var(--gantt-tick-color);
}
.bbl-gantt-container .bbl-gantt-body .events .event-item {
  fill: var(--gantt-event-item-style-rect-color);
  cursor: move;
}
.bbl-gantt-container .bbl-gantt-body .events .event-item.no-move {
  cursor: auto;
}
.bbl-gantt-container .bbl-gantt-body .events .event-item.no-resize .event_resize {
  cursor: auto;
}
.bbl-gantt-container .bbl-gantt-body .events .event-item .event_resize {
  fill: var(--gantt-event-item-resize-color);
  stroke: var(--gantt-event-item-resize-stroke-color);
  stroke-width: var(--gantt-event-item-resize-stroke-width);
  cursor: ew-resize;
}
.bbl-gantt-container .bbl-gantt-body .events .event-text {
  color: var(--gantt-event-item-style-rect-text-color);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: var(--gantt-event-item-font-size);
  font-weight: var(--gantt-event-item-font-weight);
}
.bbl-gantt-container .bbl-gantt-body .events .style-line .event-text {
  color: var(--gantt-event-item-style-line-text-color);
}
.bbl-gantt-container .bbl-gantt-svg {
  background: var(--gantt-bg-color);
  position: absolute;
  left: 0;
  top: 0;
}