Common CSS variables:

  • --smart-primary: The theme primary color.
  • --smart-primary-color: Text color on top of a primary background.
  • --smart-background: The theme background color. The background color appears behind scrollable content.
  • --smart-background-color: Text color on top of a background background.
  • --smart-surface: The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus.
  • --smart-surface-color: Text color on top of a surface surface.
  • --smart-disabled: The theme primary color in disabled state.
  • --smart-disabled-color: Text color on top of a theme background in disabled state.
  • --smart-font-size: Theme font-size.
  • --smart-font-family: Theme font-family.
  • --smart-border-width: Theme border-width.
  • --smart-border-radius: Theme border-radius.
  • --smart-border: The theme border settings.

Specific CSS variables for Gantt Chart:

  • --smart-gantt-chart-default-width - Determines the default width of the element.
  • --smart-gantt-chart-default-height - Determines the height of the element.
  • --smart-timeline-task-progress-thumb-size - Determines the size of the thumb controlling the progress of a Task inside the Timeline.
  • --smart-gantt-chart-task-label-color - Determines the color of the label and thumb of the tasks inside the Timeline.
  • --smart-gantt-chart-task-default-height - Determines the height of the element
  • --smart-gantt-chart-task-bar-fill-padding - Determines the top/bottom paddings of the Task bars inside the Timeline.
  • --smart-gantt-chart-project-default-color - Determines the color of all Project tasks inside the Timeline.
  • --smart-gantt-chart-project-progress-default-color - Determines the progress color of the Project tasks inside the Timeline.
  • --smart-gantt-chart-task-default-color - Determines the default color of all Tasks inside the Timeline.
  • --smart-gantt-chart-task-progress-default-color - Determines the progress color of all Tasks inside the Timeline.
  • --smart-gantt-chart-milestone-default-color - Determines the default color of all Milestones inside the Timeline.
  • --smart-timeline-task-row-color - Determines the default background-color of the task rows inside the Timeline.
  • --smart-timeline-column-color - Determines the background-color of the column separating lines inside the Timeline.
  • --smart-timeline-column-border-width - Determines the width of the column seoarating lines inside the Timeline.
  • --smart-timeline-row-border-width - Determines the default width of the row separating lines inside the Timeline.
  • --smart-timeline-task-connection-feedback-color - Determines the default color of the feedback that is shows when creating a connection between tasks inside the Timeline.
  • --smart-timeline-task-connection-feedback-width - Determines the default width of the feedback that is shows when creating a connection between tasks inside the Timeline.
  • --smart-timeline-task-connection-feedback-style - Determines the style of the feedback that is shows when creating a connection between tasks inside the Timeline.
  • --smart-timeline-task-connection-color - Determines the color of the connections between Tasks inside the Timeline.
  • --smart-timeline-task-connection-color-hover - Determines the color on hover of the connections between Tasks inside the Timeline.
  • --smart-timeline-task-connection-width - Determines the width of the connections between Tasks inside the Timeline.
  • --smart-timeline-task-connection-style - Determines the style of the connections between Tasks inside the Timeline.
  • --smart-timeline-task-connection-arrow-type - Determines the border type of the arrow of the connections between Tasks inside the Timeline.
  • --smart-timeline-task-connection-arrow-width - Determines the width of the arrow of the connections between Tasks inside the Timeline.
  • --smart-timeline-task-resize-indicator-width - Determines the defualt width of the resize indicator of the Task bars inside the Timeline.
  • --smart-timeline-task-resize-indicator-color - Determines the background-color of the resize indicators of the Task bars insinde the Timeline.
  • --smart-timeline-task-resize-indicator-border-color - Determines the border-color of the resize indicator of the Task bars inside the Timeline.
  • --smart-timeline-header-cell-color - Determines the default border-color of the horizontal/vertical lines inside the header.
  • --smart-timeline-header-background - Determines the default bakground-color of the cells inside the Header.
  • --smart-timeline-header-color - Determines the color of the text inside the Header.
  • --smart-timeline-cell-size - Determines the default width of the cells inside the Timeline. By default it's set to 'auto'.
  • --smart-timeline-cell-min-size - Determines the default min-width of the cells inside the Timeline.
  • --smart-timeline-task-min-width - Determines the default min-width of the Tasks insinde the Timeline. Not applicable to Milestone tasks.
  • --smart-timeline-weekend-color - Determines the default background color of the 'weekend' cells insinde the Timeline.
  • --smart-timeline-nonworking-color - Determines the default background-color of the nonworking days/hours inside the Timeline.
  • --smart-gantt-chart-selection - Determines the default background-color of the selected task rows.
  • --smart-gantt-chart-selection-color - Determines the default text color of the selected Tasks.
  • --smart-gantt-chart-color - Determines the default color of any text/labels inside the element.
  • --smart-gantt-chart-background-hover - Determines the default background-color on hover of any text/labels inside the element.
  • --smart-gantt-chart-color-hover - Determines the default color of any text/labels inside the element.
  • --smart-gantt-chart-border-color - Determines the default border color of the element.
  • --smart-gantt-chart-border-top-left-radius - Determines the default border-radius of the top-left corner of the element.
  • --smart-gantt-chart-border-top-right-radius - Determines the default borde-radius of the top-right corner of the element.
  • --smart-gantt-chart-border-bottom-left-radius - Determines the default border-radius of the bottom-left corner of the element.
  • --smart-gantt-chart-border-bottom-right-radius - Determnes the default border-radius of the bottom-right corner of the element.
  • --smart-gantt-chart-background: Determines the default background-color of the elemnent.
  • --smart-gantt-chart-border-width: Determines the default border-width of the borders of the element.

The following CSS selectors can be used to style the Gantt Chart:

  • smart-gantt-chart - the element itself. Can be used to set width and height for the whole element.
  • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
  • smart-splitter - a smartSplitter element that splits the Timeline and the Task Tree.
  • .smart-task-tree-splitter-item - a smartSplitterItem used to store the Splitter for the Task Tree columns.
  • .smart-task-tree-splitter - a smartSplitter element that holds the Task Tree and it's columns.
  • smart-splitter-item - a smartSplitterItem element that contains each Task Tree column.
  • .smart-task-tree-header - The header of each column.
  • .smart-task-tree-content - The content of each column.
  • smartTree - a smartTree element. Always the first column inside the Task Tree.
  • .smart-task-label-container - Contains the label of each Task inside the Task Tree.
  • .smart-timeline-splitter-item - a smartSplitterItem element that holds the Timeline.
  • .smart-timeline - a DIV elements that holds the Timeline.
  • .smart-timeline-container - a inner container for the Timeline.
  • .smart-timeline-header - a header for the Timeline. It's devided in two sections.
  • .smart-timeline-view-details - the first header section. Shows a more general view of the displayed date & time.
  • .smart-timeline-view-cell - contains the a text label describing a certain date/time of the Timeline.
  • .smart-timeline-view-cells - the seconds header section. Shows a more accurate date/time view of the timeline.
  • .smart-timeline-view-cell - contains the a text label describing a certain date/time of the Timeline.
  • .smart-timeline-content - a header for the Timeline.
  • .smart-timeline-cells-container - contains the rows for each Task inside the Timeline.
  • .smart-timeline-task-cell - a row inside the Timeline that contains a Task.
  • .smart-timeline-connections-container - contains the connections between tasks inside the Timeline.
  • .smart-task-connection - a connection line.
  • .smart-timeline-tasks-container - contains the rows for each Task inside the Timeline.
  • .smart-timeline-task - the Task Bar of a Task inside the Timeline.
  • .smart-task-container a container for the Timeline Task components.
  • .smart-task-connection-point - the connection points that are used to connect a task. There are two of them. One with class 'start' and another with class 'end'.
  • .smart-timeline-task-fill - the fill of the Task Bar.
  • .smart-timeline-task-progress - the progress fill that shows the progress of the task.
  • .smart-timeline-task-progress-thumb - a draggable thumb for the progress.
  • .smart-timeline-task-label- the label of the Task Bar.
  • .smart-timeline-animation-container - a container used exclusively for animation purposes during collapse/expand of Project tasks.
  • .smart-timeline-scroll-bar - a smartScrollBar element used to scroll the Timeline vertically.
  • .smart-timeline-scroll-bar - a smartScrollBar that is used to scroll the Timeline horizontally.