tg-ganttchart 0.0.8 → 0.0.9

package/src/App.vue

@@ -1,780 +0,0 @@
-<!-- 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>