refactor:gantt chart's style

This commit is contained in:
2025-09-16 12:21:10 +03:30
parent 5b63f55fb7
commit 3f7af72848

View File

@@ -451,9 +451,9 @@
.gantt_task_line.completed-task {
background: rgb(var(--v-theme-success));
border: 1px solid rgba(var(--v-theme-success), 0.8);
border: 1px solid rgba(var(--v-theme-success), 0.9);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(var(--v-theme-success), 0.3);
box-shadow: 0 2px 6px rgba(var(--v-theme-success), 0.35);
transition: transform 0.2s ease;
}
@@ -463,9 +463,9 @@
.gantt_task_line.high-progress-task {
background: rgb(var(--v-theme-primary));
border: 1px solid rgba(var(--v-theme-primary), 0.8);
border: 1px solid rgba(var(--v-theme-primary), 0.9);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(var(--v-theme-primary), 0.3);
box-shadow: 0 2px 6px rgba(var(--v-theme-primary), 0.35);
transition: transform 0.2s ease;
}
@@ -475,9 +475,9 @@
.gantt_task_line.medium-progress-task {
background: rgb(var(--v-theme-warning));
border: 1px solid rgba(var(--v-theme-warning), 0.8);
border: 1px solid rgba(var(--v-theme-warning), 0.9);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(var(--v-theme-warning), 0.3);
box-shadow: 0 2px 6px rgba(var(--v-theme-warning), 0.35);
transition: transform 0.2s ease;
}
@@ -487,9 +487,9 @@
.gantt_task_line.low-progress-task {
background: rgb(var(--v-theme-error));
border: 1px solid rgba(var(--v-theme-error), 0.8);
border: 1px solid rgba(var(--v-theme-error), 0.9);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(var(--v-theme-error), 0.3);
box-shadow: 0 2px 6px rgba(var(--v-theme-error), 0.35);
transition: transform 0.2s ease;
}
@@ -505,7 +505,7 @@
}
.gantt_task_progress {
background: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.35);
border-radius: 2px;
}
@@ -561,7 +561,7 @@
}
.gantt_row_task:hover {
background: rgba(var(--v-theme-primary), 0.08) !important;
background: rgba(var(--v-theme-primary), 0.10) !important;
}
.gantt_row.gantt_row_odd:hover {
@@ -696,8 +696,10 @@
.gantt_task_content {
color: rgb(var(--v-theme-on-primary));
font-weight: 500;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.2px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.gantt_tooltip {
@@ -764,6 +766,126 @@
background: rgba(var(--v-theme-on-surface), 0.4);
}
.v-theme--light {
.gantt_grid_head_cell,
.gantt_grid_data .gantt_cell {
border-right-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
}
.gantt_scale_cell,
.gantt_task_bg .gantt_task_cell {
border-right-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
}
}
.v-theme--dark {
.gantt_grid_head_cell,
.gantt_grid_data .gantt_cell {
border-right-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
}
.gantt_scale_cell,
.gantt_task_bg .gantt_task_cell {
border-right-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
}
}
.v-theme--light {
.gantt_grid_data .gantt_cell.gantt_last_cell,
.gantt_grid_head_cell.gantt_last_cell {
border-right-width: 1px !important;
border-right-style: solid !important;
border-right-color: rgba(var(--v-theme-on-surface), 0.06) !important;
}
}
.v-theme--dark {
.gantt_grid_data .gantt_cell.gantt_last_cell,
.gantt_grid_head_cell.gantt_last_cell {
border-right-width: 1px !important;
border-right-style: solid !important;
border-right-color: rgba(var(--v-theme-on-surface), 0.12) !important;
}
}
@media (prefers-color-scheme: light) {
.gantt_grid_data .gantt_cell.gantt_last_cell,
.gantt_grid_head_cell.gantt_last_cell {
border-right-width: 1px !important;
border-right-style: solid !important;
border-right-color: rgba(var(--v-theme-on-surface), 0.06) !important;
}
}
@media (prefers-color-scheme: dark) {
.gantt_grid_data .gantt_cell.gantt_last_cell,
.gantt_grid_head_cell.gantt_last_cell {
border-right-width: 1px !important;
border-right-style: solid !important;
border-right-color: rgba(var(--v-theme-on-surface), 0.12) !important;
}
}
.v-theme--light {
.gantt_ver_line { background-color: rgba(var(--v-theme-on-surface), 0.06) !important; }
.gantt_splitter { background-color: rgba(var(--v-theme-on-surface), 0.06) !important; }
.gantt_grid_column_resize { background-color: rgba(var(--v-theme-on-surface), 0.08) !important; }
}
.v-theme--dark {
.gantt_ver_line { background-color: rgba(var(--v-theme-on-surface), 0.12) !important; }
.gantt_splitter { background-color: rgba(var(--v-theme-on-surface), 0.12) !important; }
.gantt_grid_column_resize { background-color: rgba(var(--v-theme-on-surface), 0.14) !important; }
}
.gantt_grid_head_cell,
.gantt_grid_data .gantt_cell,
.gantt_scale_cell,
.gantt_task_bg .gantt_task_cell {
border-right-width: 1px !important;
border-right-style: solid !important;
}
@media (prefers-color-scheme: light) {
.gantt_grid_head_cell,
.gantt_grid_data .gantt_cell { border-right-color: rgba(var(--v-theme-on-surface), 0.06) !important; }
.gantt_scale_cell,
.gantt_task_bg .gantt_task_cell { border-right-color: rgba(var(--v-theme-on-surface), 0.05) !important; }
.gantt_ver_line { background-color: rgba(var(--v-theme-on-surface), 0.06) !important; }
}
@media (prefers-color-scheme: dark) {
.gantt_grid_head_cell,
.gantt_grid_data .gantt_cell { border-right-color: rgba(var(--v-theme-on-surface), 0.12) !important; }
.gantt_scale_cell,
.gantt_task_bg .gantt_task_cell { border-right-color: rgba(var(--v-theme-on-surface), 0.10) !important; }
.gantt_ver_line { background-color: rgba(var(--v-theme-on-surface), 0.12) !important; }
}
.gantt_layout_cell_border_right {
border-right-width: 1px !important;
border-right-style: solid !important;
border-right-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
background-color: transparent !important;
}
.gantt_grid .gantt_cell,
.gantt_grid_head_cell,
.gantt_task_bg .gantt_task_cell,
.gantt_task_scale .gantt_scale_cell,
.gantt_scale_cell {
box-shadow: none !important;
}
.gantt_grid_data .gantt_row,
.gantt_row.gantt_row_task,
.gantt_task_bg .gantt_task_row {
box-shadow: none !important;
border-bottom-width: 1px !important;
border-bottom-style: solid !important;
border-bottom-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
}
.gantt_task_scale .gantt_scale_line {
background: rgb(var(--v-theme-surface)) !important;
color: rgb(var(--v-theme-on-surface)) !important;
@@ -771,7 +893,7 @@
.gantt_task_scale .gantt_scale_cell {
background: rgb(var(--v-theme-surface)) !important;
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
color: rgba(var(--v-theme-on-surface), 0.72) !important;
border-color: rgba(var(--v-theme-on-surface), 0.08) !important;
}
@@ -872,4 +994,353 @@
.gantt_popup_button:focus {
outline: 2px solid rgba(var(--v-theme-primary), 0.3);
outline-offset: 2px;
}
.v-theme--light {
.gantt-container,
.gantt_container,
.modal-container,
.gantt_modal_box,
.notification,
.gantt-context-menu,
.gantt_tooltip {
border-color: rgba(var(--v-theme-on-surface), 0.10) !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.gantt_grid_head_cell,
.gantt_grid_data .gantt_cell,
.gantt_scale_cell,
.gantt_task_bg .gantt_task_cell,
.gantt_grid_scale .gantt_scale_line,
.gantt_task_scale .gantt_scale_cell {
border-color: rgba(var(--v-theme-on-surface), 0.08) !important;
}
.gantt_task_bg .gantt_task_cell { border-color: rgba(var(--v-theme-on-surface), 0.06) !important; }
.gantt_grid_data .gantt_row.gantt_row_odd,
.gantt_task_bg .gantt_task_row.odd {
background: rgba(var(--v-theme-on-surface), 0.02) !important;
}
}
.v-theme--dark {
.gantt-container,
.gantt_container,
.modal-container,
.gantt_modal_box,
.notification,
.gantt-context-menu,
.gantt_tooltip {
border-color: rgba(var(--v-theme-on-surface), 0.18) !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.gantt_grid_head_cell,
.gantt_grid_data .gantt_cell,
.gantt_scale_cell,
.gantt_task_bg .gantt_task_cell,
.gantt_grid_scale .gantt_scale_line,
.gantt_task_scale .gantt_scale_cell {
border-color: rgba(var(--v-theme-on-surface), 0.16) !important;
}
.gantt_task_bg .gantt_task_cell { border-color: rgba(var(--v-theme-on-surface), 0.14) !important; }
.gantt_grid_data .gantt_row.gantt_row_odd,
.gantt_task_bg .gantt_task_row.odd {
background: rgba(var(--v-theme-on-surface), 0.04) !important;
}
}
.gantt_grid_head_cell,
.gantt_scale_cell,
.gantt_task_scale .gantt_scale_cell {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
background: rgb(var(--v-theme-surface)) !important;
}
.gantt_selected .gantt_cell,
.gantt_row.gantt_selected,
.gantt_row_task.gantt_selected {
background: linear-gradient(
90deg,
rgba(var(--v-theme-primary), 0.14) 0%,
rgba(var(--v-theme-primary), 0.10) 60%,
rgba(var(--v-theme-primary), 0.08) 100%
) !important;
border-left: 3px solid rgb(var(--v-theme-primary)) !important;
}
.gantt_task_link,
.gantt_task_link .gantt_link_arrow {
stroke: rgba(var(--v-theme-on-surface), 0.35) !important;
fill: rgba(var(--v-theme-on-surface), 0.35) !important;
}
.gantt_task_link .gantt_link_line_left,
.gantt_task_link .gantt_link_line_right,
.gantt_task_link .gantt_link_line_up,
.gantt_task_link .gantt_link_line_down {
background: rgba(var(--v-theme-on-surface), 0.35) !important;
}
.gantt_task_link .gantt_link_corner,
.gantt_task_link .gantt_link_arrow:before {
border-color: rgba(var(--v-theme-on-surface), 0.35) !important;
}
.gantt_task_line.completed-task,
.gantt_task_line.high-progress-task,
.gantt_task_line.medium-progress-task,
.gantt_task_line.low-progress-task {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.gantt-toolbar,
.modal-header,
.modal-footer,
.gantt_popup_controls {
border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
}
.gantt_hor_scroll .gantt_scroll_hor,
.gantt_ver_scroll .gantt_scroll_ver {
background: rgba(var(--v-theme-on-surface), 0.25);
}
.gantt_hor_scroll .gantt_scroll_hor:hover,
.gantt_ver_scroll .gantt_scroll_ver:hover {
background: rgba(var(--v-theme-on-surface), 0.4);
}
.gantt_cal_light {
background: rgb(var(--v-theme-surface));
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
font-family: var(--v-font-family);
}
.gantt_cal_ltitle {
background: rgba(var(--v-theme-primary), 0.08);
border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
padding: 16px 20px;
border-radius: 8px 8px 0 0;
}
.dhx_cal_ltitle_descr {
display: flex;
align-items: center;
gap: 8px;
}
.gantt_mark {
width: 4px;
height: 16px;
background: rgb(var(--v-theme-primary));
border-radius: 2px;
display: inline-block;
}
.gantt_time {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
font-size: 0.875rem;
font-weight: 500;
}
.dhx_title {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
font-size: 1.125rem;
font-weight: 600;
}
.gantt_cal_ltitle_close_btn {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(var(--v-theme-on-surface), 0.08);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background: rgba(var(--v-theme-error), 0.12);
color: rgb(var(--v-theme-error));
}
}
.gantt_cal_larea {
padding: 20px;
}
.gantt_cal_lsection {
margin-bottom: 8px;
label {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
font-size: 0.875rem;
font-weight: 500;
display: block;
}
}
.gantt_cal_ltext textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
border-radius: 6px;
background: rgb(var(--v-theme-surface));
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
font-family: var(--v-font-family);
font-size: 0.875rem;
resize: vertical;
transition: border-color 0.2s ease;
&:focus {
outline: none;
border-color: rgb(var(--v-theme-primary));
box-shadow: 0 0 0 2px rgba(var(--v-theme-primary), 0.12);
}
}
.gantt_section_time {
margin-top: 16px;
}
.gantt_time_selects {
display: flex;
gap: 8px;
margin-bottom: 16px;
select {
padding: 8px 12px;
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
border-radius: 6px;
background: rgb(var(--v-theme-surface));
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
font-family: var(--v-font-family);
font-size: 0.875rem;
cursor: pointer;
transition: border-color 0.2s ease;
&:focus {
outline: none;
border-color: rgb(var(--v-theme-primary));
box-shadow: 0 0 0 2px rgba(var(--v-theme-primary), 0.12);
}
}
}
.gantt_duration {
display: flex;
align-items: center;
gap: 16px;
}
.gantt_duration_inputs {
display: flex;
align-items: center;
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
border-radius: 6px;
overflow: hidden;
.gantt_duration_dec,
.gantt_duration_inc {
width: 32px;
height: 32px;
border: none;
background: rgba(var(--v-theme-on-surface), 0.04);
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
cursor: pointer;
font-weight: 600;
transition: background-color 0.2s ease;
&:hover {
background: rgba(var(--v-theme-primary), 0.08);
color: rgb(var(--v-theme-primary));
}
}
.gantt_duration_value {
border: none;
padding: 8px 12px;
background: rgb(var(--v-theme-surface));
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
font-family: var(--v-font-family);
font-size: 0.875rem;
text-align: center;
min-width: 80px;
&:focus {
outline: none;
}
}
}
.gantt_duration_end_date {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
font-size: 0.875rem;
span {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
font-weight: 500;
}
}
.gantt_cal_lcontrols {
display: flex;
align-items: center;
padding: 16px 20px;
border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
background: rgba(var(--v-theme-surface), 0.5);
border-radius: 0 0 8px 8px;
}
.gantt_btn_set {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s ease;
margin-right: 8px;
&.gantt_save_btn_set {
background: rgb(var(--v-theme-primary));
color: rgb(var(--v-theme-on-primary));
&:hover {
background: rgba(var(--v-theme-primary), 0.9);
}
}
&.gantt_cancel_btn_set {
background: rgba(var(--v-theme-on-surface), 0.08);
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
&:hover {
background: rgba(var(--v-theme-on-surface), 0.12);
}
}
&.gantt_delete_btn_set {
background: rgba(var(--v-theme-error), 0.08);
color: rgb(var(--v-theme-error));
&:hover {
background: rgba(var(--v-theme-error), 0.12);
}
}
}
.gantt_cal_lcontrols_push_right {
flex: 1;
}