tg-ganttchart 0.0.7 → 0.0.8

package/src/App.vue

@@ -0,0 +1,780 @@
+<!-- App.vue -->
+<template>
+  <div id="app">
+    <!-- <GanttChart /> -->
+    <!-- {{ tasks }} -->
+    <gantt-chart ref="ganttChart" :isHeaderVisible="isHeaderVisible" :options="options" :tasks="tasks"
+      @tasks-changed="tasksUpdate" @options-changed="optionsUpdate" @dynamic-style-changed="styleUpdate"
+      :projectName="projectName">
+      <gantt-view-filter slot="header" @view-mode-changed="onViewModeChanged"></gantt-view-filter>
+      <!-- <gantt-chart-header slot="header"></gantt-chart-header> -->
+    </gantt-chart>
+  </div>
+</template>
+
+<script>
+// import GanttChart from '../src/GanttElastic.standalone.vue';
+import GanttChart from '../src/GanttElastic.vue';
+import GanttViewFilter from '../src/components/Header/GanttViewFilter.vue';
+// import GanttHeader from './components/Header/Header.vue';
+import dayjs from "dayjs";
+import isoWeek from 'dayjs/plugin/weekOfYear';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+// Extend dayjs with required plugins
+dayjs.extend(isoWeek);
+dayjs.extend(quarterOfYear);
+function getDate(hours) {
+  const currentDate = new Date();
+  const currentYear = currentDate.getFullYear();
+  const currentMonth = currentDate.getMonth();
+  const currentDay = currentDate.getDate();
+  const timeStamp = new Date(
+    currentYear,
+    currentMonth,
+    currentDay,
+    0,
+    0,
+    0
+  ).getTime();
+  return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
+}
+let tasks = [
+  // === EPIC 1: Project Foundation ===
+  {
+    id: 1,
+    label: "Project Foundation & Setup",
+    user: "Project Manager",
+    start: "2025-09-01 09:00:00",
+    duration: 15 * 24 * 60 * 60 * 1000,
+    percent: 85,
+    type: "epic",
+    icon: "M7 2 L12 7 L7 12 L2 7 Z"
+  },
+  {
+    id: 2,
+    label: "Project Kickoff Meeting",
+    user: "Project Manager",
+    start: "2025-09-01 09:00:00",
+    duration: 1 * 24 * 60 * 60 * 1000,
+    percent: 100,
+    type: "story",
+    parentId: 1,
+    icon: "M7 2 L12 7 L7 12 L2 7 Z"
+  },
+  {
+    id: 3,
+    label: "Team Onboarding",
+    user: "HR Manager",
+    start: "2025-09-02 09:00:00",
+    duration: 3 * 24 * 60 * 60 * 1000,
+    percent: 100,
+    type: "task",
+    parentId: 1,
+    icon: "M3 3 L9 3 L9 7 L7 9 L5 7 L5 3 Z M3 3 L3 11 M5 3 L5 11",
+  },
+  {
+    id: 4,
+    label: "Development Environment Setup",
+    user: "DevOps Engineer",
+    start: "2025-09-05 09:00:00",
+    duration: 5 * 24 * 60 * 60 * 1000,
+    percent: 90,
+    type: "story",
+    parentId: 1,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z M5 7 L7 9 L9 5"
+  },
+  {
+    id: 5,
+    label: "Project Documentation",
+    user: "Technical Writer",
+    start: "2025-09-08 09:00:00",
+    duration: 4 * 24 * 60 * 60 * 1000,
+    percent: 70,
+    type: "task",
+    parentId: 1,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z"
+  },
+  {
+    id: 6,
+    label: "Code Repository Setup",
+    user: "DevOps Engineer",
+    start: "2025-09-10 09:00:00",
+    duration: 2 * 24 * 60 * 60 * 1000,
+    percent: 100,
+    type: "check",
+    parentId: 1,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z M5 7 L7 9 L9 5"
+  },
+  {
+    id: 7,
+    label: "CI/CD Pipeline Setup",
+    user: "DevOps Engineer",
+    start: "2025-09-12 09:00:00",
+    duration: 6 * 24 * 60 * 60 * 1000,
+    percent: 60,
+    type: "task",
+    parentId: 1,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z"
+  },
+  {
+    id: 8,
+    label: "Foundation Complete",
+    user: "Project Manager",
+    start: "2025-09-20 09:00:00",
+    duration: 1 * 24 * 60 * 60 * 1000,
+    percent: 0,
+    type: "task",
+    parentId: 1,
+    icon: "M7 2 L12 7 L7 12 L2 7 Z"
+  },
+
+  // === EPIC 2: Requirements & Design ===
+  {
+    id: 9,
+    label: "Requirements & Design Phase",
+    user: "Business Analyst",
+    start: "2025-09-15 09:00:00",
+    duration: 25 * 24 * 60 * 60 * 1000,
+    percent: 65,
+    type: "epic",
+    icon: "M7 2 L12 7 L7 12 L2 7 Z"
+  },
+  {
+    id: 10,
+    label: "Stakeholder Interviews",
+    user: "Business Analyst",
+    start: "2025-09-15 09:00:00",
+    duration: 8 * 24 * 60 * 60 * 1000,
+    percent: 100,
+    type: "flag",
+    parentId: 9,
+    icon: "M3 3 L9 3 L9 7 L7 9 L5 7 L5 3 Z M3 3 L3 11 M5 3 L5 11",
+  },
+  {
+    id: 11,
+    label: "Functional Requirements",
+    user: "Business Analyst",
+    start: "2025-09-20 09:00:00",
+    duration: 6 * 24 * 60 * 60 * 1000,
+    percent: 90,
+    type: "task",
+    parentId: 9,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z"
+  },
+  {
+    id: 12,
+    label: "Technical Requirements",
+    user: "Solution Architect",
+    start: "2025-09-22 09:00:00",
+    duration: 5 * 24 * 60 * 60 * 1000,
+    percent: 80,
+    type: "task",
+    parentId: 9,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z"
+  },
+  {
+    id: 13,
+    label: "UI/UX Design",
+    user: "UI/UX Designer",
+    start: "2025-09-25 09:00:00",
+    duration: 10 * 24 * 60 * 60 * 1000,
+    percent: 40,
+    type: "check",
+    parentId: 9,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z M5 7 L7 9 L9 5"
+  },
+  {
+    id: 14,
+    label: "Design System Creation",
+    user: "UI/UX Designer",
+    start: "2025-09-28 09:00:00",
+    duration: 7 * 24 * 60 * 60 * 1000,
+    percent: 30,
+    type: "task",
+    parentId: 9,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z"
+  },
+  {
+    id: 15,
+    label: "Requirements Sign-off",
+    user: "Client",
+    start: "2025-10-08 09:00:00",
+    duration: 1 * 24 * 60 * 60 * 1000,
+    percent: 0,
+    type: "milestone",
+    icon: "M7 2 L12 7 L7 12 L2 7 Z"
+  },
+
+  // === EPIC 3: Core Development ===
+  {
+    id: 16,
+    label: "Core Development Phase",
+    user: "Tech Lead",
+    start: "2025-10-01 09:00:00",
+    duration: 40 * 24 * 60 * 60 * 1000,
+    percent: 35,
+    type: "epic",
+    icon: "M7 2 L12 7 L7 12 L2 7 Z"
+  },
+  {
+    id: 17,
+    label: "Backend API Development",
+    user: "Backend Developer",
+    start: "2025-10-01 09:00:00",
+    duration: 20 * 24 * 60 * 60 * 1000,
+    percent: 45,
+    type: "story",
+    parentId: 16,
+    icon: "M3 4 L11 4 L11 10 L3 10 Z"
+  },
+  {
+    id: 17.1,
+    label: "Database Schema Design",
+    user: "Backend Developer",
+    start: "2025-10-01 09:00:00",
+    duration: 7 * 24 * 60 * 60 * 1000, // 1 week
+    percent: 80,
+    type: "subtask",
+    parentId: 17,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z"
+  },
+  {
+    id: 17.2,
+    label: "API Endpoints Implementation",
+    user: "Backend Developer",
+    start: "2025-10-08 09:00:00",
+    duration: 7 * 24 * 60 * 60 * 1000, // 1 week
+    percent: 30,
+    type: "subtask",
+    parentId: 17,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z"
+  },
+  {
+    id: 17.3,
+    label: "Data Validation Layer",
+    user: "Backend Developer",
+    start: "2025-10-15 09:00:00",
+    duration: 7 * 24 * 60 * 60 * 1000, // 1 week
+    percent: 50,
+    type: "subtask",
+    parentId: 17,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z"
+  },
+  {
+    id: 18,
+    label: "Frontend Development",
+    user: "Frontend Developer",
+    start: "2025-10-05 09:00:00",
+    duration: 25 * 24 * 60 * 60 * 1000,
+    percent: 30,
+    type: "story",
+    parentId: 16,
+    icon: "M3 4 L11 4 L11 10 L3 10 Z"
+  },
+  {
+    id: 18.1,
+    label: "UI Components Setup",
+    user: "Frontend Developer",
+    start: "2025-10-05 09:00:00",
+    duration: 7 * 24 * 60 * 60 * 1000, // 1 week
+    percent: 60,
+    type: "subtask",
+    parentId: 18,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z"
+  },
+  {
+    id: 18.2,
+    label: "State Management",
+    user: "Frontend Developer",
+    start: "2025-10-12 09:00:00",
+    duration: 7 * 24 * 60 * 60 * 1000, // 1 week
+    percent: 40,
+    type: "subtask",
+    parentId: 18,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z"
+  },
+  {
+    id: 18.3,
+    label: "API Integration",
+    user: "Frontend Developer",
+    start: "2025-10-19 09:00:00",
+    duration: 7 * 24 * 60 * 60 * 1000, // 1 week
+    percent: 20,
+    type: "subtask",
+    parentId: 18,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z"
+  },
+  {
+    id: 19,
+    label: "Database Design & Implementation",
+    user: "Database Developer",
+    start: "2025-10-03 09:00:00",
+    duration: 12 * 24 * 60 * 60 * 1000,
+    percent: 70,
+    type: "check",
+    parentId: 16,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z M5 7 L7 9 L9 5"
+  },
+  {
+    id: 20,
+    label: "Authentication System",
+    user: "Backend Developer",
+    start: "2025-10-08 09:00:00",
+    duration: 8 * 24 * 60 * 60 * 1000,
+    percent: 60,
+    type: "flag",
+    parentId: 16,
+    icon: "M3 3 L9 3 L9 7 L7 9 L5 7 L5 3 Z M3 3 L3 11 M5 3 L5 11",
+  },
+  {
+    id: 21,
+    label: "API Integration",
+    user: "Backend Developer",
+    start: "2025-10-15 09:00:00",
+    duration: 10 * 24 * 60 * 60 * 1000,
+    percent: 25,
+    type: "task",
+    parentId: 16,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z"
+  },
+  {
+    id: 22,
+    label: "Core Features Complete",
+    user: "Tech Lead",
+    start: "2025-11-08 09:00:00",
+    duration: 1 * 24 * 60 * 60 * 1000,
+    percent: 0,
+    type: "milestone",
+    parentId: 16,
+    icon: "M7 2 L12 7 L7 12 L2 7 Z"
+  },
+
+  // === EPIC 4: Testing & Quality Assurance ===
+  {
+    id: 23,
+    label: "Testing & Quality Assurance",
+    user: "QA Lead",
+    start: "2025-10-25 09:00:00",
+    duration: 30 * 24 * 60 * 60 * 1000,
+    percent: 20,
+    type: "epic",
+    icon: "M7 2 L12 7 L7 12 L2 7 Z"
+  },
+  {
+    id: 24,
+    label: "Unit Testing",
+    user: "Developer",
+    start: "2025-10-25 09:00:00",
+    duration: 15 * 24 * 60 * 60 * 1000,
+    percent: 40,
+    type: "check",
+    parentId: 23,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z M5 7 L7 9 L9 5"
+  },
+  {
+    id: 25,
+    label: "Integration Testing",
+    user: "QA Engineer",
+    start: "2025-11-05 09:00:00",
+    duration: 12 * 24 * 60 * 60 * 1000,
+    percent: 15,
+    type: "task",
+    parentId: 23,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z"
+  },
+  {
+    id: 26,
+    label: "Performance Testing",
+    user: "QA Engineer",
+    start: "2025-11-10 09:00:00",
+    duration: 8 * 24 * 60 * 60 * 1000,
+    percent: 10,
+    type: "flag",
+    parentId: 23,
+    icon: "M3 3 L9 3 L9 7 L7 9 L5 7 L5 3 Z M3 3 L3 11 M5 3 L5 11",
+  },
+  {
+    id: 27,
+    label: "User Acceptance Testing",
+    user: "Business Analyst",
+    start: "2025-11-15 09:00:00",
+    duration: 10 * 24 * 60 * 60 * 1000,
+    percent: 5,
+    type: "task",
+    parentId: 23,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z"
+  },
+  {
+    id: 28,
+    label: "Testing Complete",
+    user: "QA Lead",
+    start: "2025-11-22 09:00:00",
+    duration: 1 * 24 * 60 * 60 * 1000,
+    percent: 0,
+    type: "milestone",
+    parentId: 23,
+    icon: "M7 2 L12 7 L7 12 L2 7 Z"
+  },
+
+  // === EPIC 5: Deployment & Launch ===
+  {
+    id: 29,
+    label: "Deployment & Launch",
+    user: "DevOps Engineer",
+    start: "2025-11-20 09:00:00",
+    duration: 20 * 24 * 60 * 60 * 1000,
+    percent: 10,
+    type: "epic",
+    icon: "M7 2 L12 7 L7 12 L2 7 Z"
+  },
+  {
+    id: 30,
+    label: "Staging Environment Setup",
+    user: "DevOps Engineer",
+    start: "2025-11-20 09:00:00",
+    duration: 5 * 24 * 60 * 60 * 1000,
+    percent: 80,
+    type: "task",
+    parentId: 29,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z"
+  },
+  {
+    id: 31,
+    label: "Production Environment Setup",
+    user: "DevOps Engineer",
+    start: "2025-11-25 09:00:00",
+    duration: 4 * 24 * 60 * 60 * 1000,
+    percent: 60,
+    type: "check",
+    parentId: 29,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z M5 7 L7 9 L9 5"
+  },
+  {
+    id: 32,
+    label: "Security Audit",
+    user: "Security Engineer",
+    start: "2025-11-28 09:00:00",
+    duration: 3 * 24 * 60 * 60 * 1000,
+    percent: 20,
+    type: "flag",
+    parentId: 29,
+    icon: "M3 3 L9 3 L9 7 L7 9 L5 7 L5 3 Z M3 3 L3 11 M5 3 L5 11",
+  },
+  {
+    id: 33,
+    label: "Go-Live Deployment",
+    user: "DevOps Engineer",
+    start: "2025-12-05 09:00:00",
+    duration: 2 * 24 * 60 * 60 * 1000,
+    percent: 0,
+    type: "milestone",
+    parentId: 29,
+    icon: "M7 2 L12 7 L7 12 L2 7 Z"
+  },
+  {
+    id: 34,
+    label: "Post-Launch Monitoring",
+    user: "DevOps Engineer",
+    start: "2025-12-07 09:00:00",
+    duration: 7 * 24 * 60 * 60 * 1000,
+    percent: 0,
+    type: "task",
+    parentId: 29,
+    icon: "M3 3 L11 3 L11 11 L3 11 Z"
+  },
+
+  // === Project Milestones ===
+  {
+    id: 35,
+    label: "Project Complete",
+    user: "Project Manager",
+    start: "2025-12-15 09:00:00",
+    duration: 1 * 24 * 60 * 60 * 1000,
+    percent: 0,
+    type: "milestone",
+    icon: "M7 2 L12 7 L7 12 L2 7 Z"
+  }
+];
+
+let options = {
+  taskMapping: {
+    progress: "percent"
+  },
+  maxRows: 100,
+  maxHeight: 500,
+  title: {
+    label: "Your project title as html (link or whatever...)",
+    html: true
+  },
+  row: {
+    height: 24
+  },
+  calendar: {
+    // hour: {
+    //   display: true
+    // },
+    viewMode: 'day',
+    hour: { height: 20, display: false },
+    day: { height: 30, display: true },
+    week: { height: 24, display: true },
+    month: { height: 30, display: true },
+    quarter: {
+      height: 30,
+      display: true,
+    }
+  },
+  chart: {
+    progress: {
+      bar: false
+    },
+    expander: {
+      display: true
+    }
+  },
+  taskList: {
+    expander: {
+      straight: false
+    },
+    columns: [
+      {
+        id: 1,
+        label: "ID",
+        value: "id",
+        width: 40
+      },
+      {
+        id: 2,
+        label: "Description",
+        value: "label",
+        width: 200,
+        expander: true,
+        html: true,
+        events: {
+          click({ data, column }) {
+            alert("description clicked!\n" + data.label);
+          }
+        }
+      },
+      {
+        id: 3,
+        label: "Assigned to",
+        value: "user",
+        width: 130,
+        html: true
+      },
+      {
+        id: 3,
+        label: "Start",
+        value: task => dayjs(task.start).format("YYYY-MM-DD HH:mm A"),
+        width: 78
+      },
+      // {
+      //   id: 4,
+      //   label: "Type",
+      //   value: "type",
+      //   width: 68
+      // },
+      {
+        id: 5,
+        label: "%",
+        value: "progress",
+        width: 35,
+        style: {
+          "task-list-header-label": {
+            "text-align": "center",
+            width: "100%"
+          },
+          "task-list-item-value-container": {
+            "text-align": "center",
+            width: "100%"
+          }
+        }
+      }
+    ]
+  },
+  locale: {
+    name: "en",
+    Now: "Now",
+    "X-Scale": "Zoom-X",
+    "Y-Scale": "Zoom-Y",
+    "Task list width": "Task list",
+    "Before/After": "Expand",
+    "Display task list": "Task list"
+  }
+};
+
+export default {
+  name: 'App',
+  components: {
+    'gantt-chart': GanttChart,
+    // 'gantt-chart-header': GanttHeader
+    'gantt-view-filter': GanttViewFilter
+  },
+  data() {
+    return {
+      tasks,
+      options,
+      dynamicStyle: {},
+      lastId: 16,
+      isHeaderVisible: false,
+      projectName: 'MY First Project'
+    };
+  },
+  methods: {
+    addTask() {
+      this.tasks.push({
+        id: this.lastId++,
+        label:
+          '<a href="https://images.pexels.com/photos/423364/pexels-photo-423364.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" target="_blank" style="color:#0077c0;">Yeaahh! you have added a task bro!</a>',
+        user:
+          '<a href="https://images.pexels.com/photos/423364/pexels-photo-423364.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" target="_blank" style="color:#0077c0;">Awesome!</a>',
+        start: getDate(24 * 3),
+        duration: 1 * 24 * 60 * 60 * 1000,
+        percent: 50,
+        type: "project"
+      });
+    },
+    tasksUpdate(tasks) {
+      this.tasks = tasks;
+    },
+    optionsUpdate(options) {
+      this.options = options;
+    },
+    styleUpdate(style) {
+      this.dynamicStyle = style;
+    },
+    onViewModeChanged(mode) {
+      // Update the calendar view mode
+      this.options.calendar.viewMode = mode;
+
+      // Update the step duration based on the view mode
+      if (this.options.times) {
+        switch (mode) {
+          case 'quarter':
+            this.options.times.stepDuration = 'quarter';
+            this.options.times.timeZoom = 15; // Reset zoom for better quarter view
+            break;
+          case 'month':
+            this.options.times.stepDuration = 'month';
+            this.options.times.timeZoom = 17; // Reset zoom for better month view
+            break;
+          case 'week':
+            this.options.times.stepDuration = 'week';
+            this.options.times.timeZoom = 19; // Reset zoom for better week view
+            break;
+          default: // 'day' or any other mode
+            this.options.times.stepDuration = 'day';
+            this.options.times.timeZoom = 21; // Reset zoom for better day view
+            break;
+        }
+      }
+
+      // Force recalculation by triggering a reactive update
+      this.$nextTick(() => {
+        this.$forceUpdate();
+        // Recalculate start date based on new view mode and trigger full recalculation
+        if (this.$refs.ganttChart) {
+          // Trigger recalculation of dates and times with new view mode
+          this.$refs.ganttChart.prepareDates();
+          this.$refs.ganttChart.initTimes();
+          this.$refs.ganttChart.calculateSteps();
+          this.$refs.ganttChart.computeCalendarWidths();
+
+          // Ensure perfect alignment between calendar and chart
+          if (this.$refs.ganttChart.ensureCalendarChartAlignment) {
+            this.$refs.ganttChart.ensureCalendarChartAlignment();
+          }
+        }
+      });
+    },
+    // In App.vue -> onViewModeChanged method
+
+  }
+};
+</script>
+
+<style>
+#app {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  height: 100vh;
+  overflow: hidden;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  position: relative;
+}
+
+#app::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background:
+    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%);
+  pointer-events: none;
+}
+
+/* Modern container styling */
+.gantt-elastic {
+  margin: 20px;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow:
+    0 20px 40px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  #app {
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  }
+
+  .gantt-elastic {
+    margin: 10px;
+    border-radius: 12px;
+    box-shadow:
+      0 10px 20px rgba(0, 0, 0, 0.08),
+      0 0 0 1px rgba(255, 255, 255, 0.05);
+  }
+}
+
+@media (max-width: 480px) {
+  .gantt-elastic {
+    margin: 5px;
+    border-radius: 8px;
+  }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  #app {
+    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+    color: #e9ecef;
+  }
+
+  #app::before {
+    background:
+      radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.05) 0%, transparent 50%),
+      radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.05) 0%, transparent 50%),
+      radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.05) 0%, transparent 50%);
+  }
+
+  .gantt-elastic {
+    background: rgba(45, 45, 45, 0.9);
+    border-color: rgba(255, 255, 255, 0.1);
+    box-shadow:
+      0 20px 40px rgba(0, 0, 0, 0.3),
+      0 0 0 1px rgba(255, 255, 255, 0.05);
+  }
+}
+</style>