moein/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: clean up Gantt chart style

Browse Source
This commit is contained in:
Moein Moradi
2025-09-02 11:31:21 +03:30
parent 6255b20476
commit dafb07375a
1 changed files with 386 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

694
resources/js/pages/dashboards/gantt.vue
View File

@@ -780,31 +780,35 @@ onBeforeUnmount(() => {
.gantt-container { .gantt-container {
width: 100%; width: 100%;
height: 650px; height: 650px;
background: white; background: rgb(var(--v-theme-surface));
border: 1px solid #e5e7eb; border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
border-radius: 8px; border-radius: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: rgb(var(--v-theme-on-surface));
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
overflow: hidden;
} }
.gantt-toolbar { .gantt-toolbar {
padding: 12px 16px; padding: 16px 20px;
background: #fafbfc; background: rgb(var(--v-theme-surface-variant));
border-bottom: 1px solid #e5e7eb; border-bottom: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
display: flex; display: flex;
gap: 8px; gap: 12px;
} }
.btn { .btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 8px 14px; padding: 10px 16px;
border: 1px solid transparent; border: none;
border-radius: 6px; border-radius: 8px;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 14px;
font-weight: 500; font-weight: 500;
transition: all 0.15s ease; transition: all 0.2s ease;
gap: 6px; gap: 8px;
} }
.btn-icon { .btn-icon {
@@ -812,242 +816,57 @@ onBeforeUnmount(() => {
} }
.btn-primary { .btn-primary {
background: #0969da; background: rgb(var(--v-theme-primary));
color: white; color: rgb(var(--v-theme-on-primary));
border-color: #0969da; box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
} }
.btn-primary:hover { .btn-primary:hover {
background: #0860ca; background: rgb(var(--v-theme-primary-darken-1));
border-color: #0860ca; transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(var(--v-theme-primary), 0.4);
} }
.btn-danger { .btn-danger {
background: #d1242f; background: rgb(var(--v-theme-error));
color: white; color: rgb(var(--v-theme-on-error));
border-color: #d1242f; box-shadow: 0 2px 4px rgba(var(--v-theme-error), 0.3);
} }
.btn-danger:hover { .btn-danger:hover {
background: #b91c1c; background: rgb(var(--v-theme-error-darken-1));
border-color: #b91c1c; transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(var(--v-theme-error), 0.4);
} }
.btn-success { .btn-success {
background: #1a7f37; background: rgb(var(--v-theme-success));
color: white; color: rgb(var(--v-theme-on-success));
border-color: #1a7f37; box-shadow: 0 2px 4px rgba(var(--v-theme-success), 0.3);
} }
.btn-success:hover { .btn-success:hover {
background: #166a2e; background: rgb(var(--v-theme-success-darken-1));
border-color: #166a2e; transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(var(--v-theme-success), 0.4);
} }
.btn-secondary { .btn-secondary {
background: #f6f8fa; background: rgb(var(--v-theme-surface-light));
color: #24292f; color: rgb(var(--v-theme-on-surface-light));
border-color: #d1d9e0; border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
} }
.btn-secondary:hover { .btn-secondary:hover {
background: #f3f4f6; background: rgb(var(--v-theme-grey-200));
border-color: #c7d2da; border-color: rgb(var(--v-theme-grey-400));
transform: translateY(-1px);
} }
.gantt-chart { .gantt-chart {
height: calc(100% - 60px); height: calc(100% - 77px);
min-height: 500px; min-height: 500px;
} }
</style>
<style>
.gantt_container {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 13px;
}
.gantt_grid_head_cell,
.gantt_grid_data .gantt_cell {
border-right: 1px solid #e1e5e9;
border-bottom: 1px solid #e1e5e9;
}
.gantt_grid_head_cell {
background: #f6f8fa;
font-weight: 600;
text-align: center;
padding: 10px 8px;
color: #24292f;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.gantt_cell {
padding: 8px;
vertical-align: middle;
line-height: 1.4;
color: #24292f;
}
.gantt_tree_content {
padding-left: 4px;
}
.gantt_tree_icon {
width: 14px;
height: 14px;
margin-right: 4px;
opacity: 0.7;
}
.gantt_task_line.completed-task {
background: #1f883d;
border: 1px solid #1a7f37;
border-radius: 3px;
}
.gantt_task_line.high-progress-task {
background: #0969da;
border: 1px solid #0860ca;
border-radius: 3px;
}
.gantt_task_line.medium-progress-task {
background: #bf8700;
border: 1px solid #9a6700;
border-radius: 3px;
}
.gantt_task_line.low-progress-task {
background: #d1242f;
border: 1px solid #b91c1c;
border-radius: 3px;
}
.summary-row {
background: #f6f8fa;
font-weight: 600;
}
.gantt_task_progress {
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
}
.gantt_scale_cell {
border-bottom: 1px solid #e1e5e9;
border-right: 1px solid #e1e5e9;
background: #f6f8fa;
font-weight: 500;
color: #24292f;
font-size: 11px;
}
.gantt_task_line {
border-radius: 3px;
height: 20px;
}
.gantt_side_content {
color: #656d76;
font-size: 11px;
margin-top: 2px;
font-weight: 500;
}
.completed-mark {
color: #1f883d;
font-weight: bold;
font-size: 12px;
}
.gantt_grid_data .gantt_row:nth-child(odd) {
background: #fafbfc;
}
.gantt_grid_data .gantt_row:hover {
background: #f3f4f6;
}
.gantt_selected .gantt_cell {
background: #ddf4ff;
color: #24292f;
}
.gantt_task_link {
stroke: #656d76;
stroke-width: 1.5;
}
.gantt_task_link .gantt_link_arrow {
fill: #656d76;
}
.gantt_milestone {
background: #8250df;
border: 2px solid #6f42c1;
}
.gantt-context-menu {
background: #ffffff;
border: 1px solid #d1d9e0;
border-radius: 6px;
box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
padding: 4px;
min-width: 180px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 13px;
z-index: 9999;
animation: contextMenuFadeIn 0.15s ease-out;
}
@keyframes contextMenuFadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.context-menu-item {
display: flex;
align-items: center;
padding: 6px 8px;
cursor: pointer;
color: #24292f;
transition: background-color 0.1s ease;
border-radius: 3px;
font-size: 13px;
line-height: 1.4;
user-select: none;
}
.context-menu-item:hover {
background: #f3f4f6;
}
.context-menu-item:active {
background: #eaeef2;
}
.menu-icon {
margin-right: 8px;
opacity: 0.8;
flex-shrink: 0;
color: #656d76;
}
.context-menu-separator {
height: 1px;
background: #d1d9e0;
margin: 4px 0;
}
.modal-overlay { .modal-overlay {
position: fixed; position: fixed;
@@ -1055,43 +874,41 @@ onBeforeUnmount(() => {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(31, 35, 40, 0.5); background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(3px); backdrop-filter: blur(4px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 10000; z-index: 10000;
animation: modalOverlayFadeIn 0.2s ease-out; animation: modalOverlayFadeIn 0.3s ease;
} }
@keyframes modalOverlayFadeIn { @keyframes modalOverlayFadeIn {
from { from {
opacity: 0; opacity: 0;
} }
to { to {
opacity: 1; opacity: 1;
} }
} }
.modal-container { .modal-container {
background: #ffffff; background: rgb(var(--v-theme-surface));
border: 1px solid #d1d9e0; border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
border-radius: 8px; border-radius: 12px;
box-shadow: 0 16px 32px rgba(31, 35, 40, 0.15); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
width: 90%; width: 90%;
max-width: 480px; max-width: 520px;
max-height: 80vh; max-height: 80vh;
overflow: hidden; overflow: hidden;
animation: modalSlideIn 0.2s ease-out; animation: modalSlideIn 0.3s ease;
} }
@keyframes modalSlideIn { @keyframes modalSlideIn {
from { from {
opacity: 0; opacity: 0;
transform: translateY(-16px) scale(0.98); transform: translateY(-20px) scale(0.95);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0) scale(1); transform: translateY(0) scale(1);
@@ -1102,124 +919,132 @@ onBeforeUnmount(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 16px 20px; padding: 20px 24px;
border-bottom: 1px solid #d1d9e0; border-bottom: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
background: #f6f8fa; background: rgb(var(--v-theme-surface-variant));
} }
.modal-title { .modal-title {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0; margin: 0;
font-size: 16px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #24292f; color: rgb(var(--v-theme-on-surface));
} }
.modal-icon { .modal-icon {
margin-right: 8px; margin-right: 10px;
flex-shrink: 0; flex-shrink: 0;
padding: 4px;
border-radius: 4px;
} }
.delete-icon { .delete-icon {
color: #d1242f; color: rgb(var(--v-theme-error));
background: rgba(var(--v-theme-error), 0.1);
} }
.edit-icon { .edit-icon {
color: #0969da; color: rgb(var(--v-theme-primary));
background: rgba(var(--v-theme-primary), 0.1);
} }
.add-icon { .add-icon {
color: #1f883d; color: rgb(var(--v-theme-success));
background: rgba(var(--v-theme-success), 0.1);
} }
.modal-close { .modal-close {
background: none; background: rgb(var(--v-theme-grey-100));
border: none; border: none;
font-size: 20px; font-size: 18px;
color: #656d76; color: rgb(var(--v-theme-on-surface));
cursor: pointer; cursor: pointer;
width: 28px; width: 32px;
height: 28px; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 3px; border-radius: 6px;
transition: all 0.1s ease; transition: all 0.2s ease;
} }
.modal-close:hover { .modal-close:hover {
background: #eaeef2; background: rgb(var(--v-theme-grey-200));
color: #24292f; color: rgb(var(--v-theme-error));
} }
.modal-body { .modal-body {
padding: 20px; padding: 24px;
background: rgb(var(--v-theme-surface));
} }
.modal-message { .modal-message {
font-size: 14px; font-size: 15px;
color: #24292f; color: rgb(var(--v-theme-on-surface));
margin: 0 0 6px 0; margin: 0 0 8px 0;
line-height: 1.5; line-height: 1.5;
} }
.modal-warning { .modal-warning {
font-size: 12px; font-size: 13px;
color: #656d76; color: rgba(var(--v-theme-on-surface), 0.6);
margin: 0; margin: 0;
font-style: italic;
} }
.form-group { .form-group {
margin-bottom: 16px; margin-bottom: 20px;
} }
.form-row { .form-row {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 12px; gap: 16px;
} }
.form-group label { .form-group label {
display: block; display: block;
margin-bottom: 6px; margin-bottom: 8px;
font-weight: 600; font-weight: 600;
color: #24292f; color: rgb(var(--v-theme-on-surface));
font-size: 12px; font-size: 13px;
} }
.form-input { .form-input {
width: 100%; width: 100%;
padding: 6px 8px; padding: 12px 14px;
border: 1px solid #d1d9e0; border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
border-radius: 4px; border-radius: 6px;
font-size: 13px; font-size: 14px;
color: #24292f; color: rgb(var(--v-theme-on-surface));
background: #ffffff; background: rgb(var(--v-theme-surface));
transition: border-color 0.1s ease; transition: all 0.2s ease;
box-sizing: border-box; box-sizing: border-box;
} }
.form-input:focus { .form-input:focus {
outline: none; outline: none;
border-color: #0969da; border-color: rgb(var(--v-theme-primary));
box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.1); box-shadow: 0 0 0 2px rgba(var(--v-theme-primary), 0.2);
} }
.form-input:invalid { .form-input:invalid {
border-color: #d1242f; border-color: rgb(var(--v-theme-error));
box-shadow: 0 0 0 2px rgba(var(--v-theme-error), 0.2);
} }
.progress-input-container { .progress-input-container {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 12px;
} }
.form-range { .form-range {
flex: 1; flex: 1;
height: 4px; height: 4px;
background: #d1d9e0; background: rgb(var(--v-theme-grey-200));
border-radius: 2px; border-radius: 2px;
outline: none; outline: none;
} }
@@ -1228,51 +1053,54 @@ onBeforeUnmount(() => {
-webkit-appearance: none; -webkit-appearance: none;
width: 16px; width: 16px;
height: 16px; height: 16px;
background: #0969da; background: rgb(var(--v-theme-primary));
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
border: 2px solid #ffffff; border: 2px solid rgb(var(--v-theme-surface));
box-shadow: 0 1px 3px rgba(31, 35, 40, 0.2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
} }
.form-range::-moz-range-thumb { .form-range::-moz-range-thumb {
width: 16px; width: 16px;
height: 16px; height: 16px;
background: #0969da; background: rgb(var(--v-theme-primary));
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
border: 2px solid #ffffff; border: 2px solid rgb(var(--v-theme-surface));
box-shadow: 0 1px 3px rgba(31, 35, 40, 0.2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
} }
.progress-value { .progress-value {
min-width: 40px; min-width: 40px;
text-align: right; text-align: right;
font-weight: 600; font-weight: 600;
color: #0969da; color: rgb(var(--v-theme-primary));
font-size: 12px; font-size: 12px;
padding: 2px 6px;
background: rgba(var(--v-theme-primary), 0.1);
border-radius: 4px;
} }
.modal-footer { .modal-footer {
padding: 12px 20px 16px; padding: 16px 24px;
display: flex; display: flex;
gap: 8px; gap: 12px;
justify-content: flex-end; justify-content: flex-end;
background: #f6f8fa; background: rgb(var(--v-theme-surface-variant));
border-top: 1px solid #d1d9e0; border-top: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
} }
.notification { .notification {
position: fixed; position: fixed;
top: 16px; top: 20px;
right: 16px; right: 20px;
min-width: 280px; min-width: 300px;
background: #ffffff; background: rgb(var(--v-theme-surface));
border: 1px solid #d1d9e0; border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
border-radius: 6px; border-radius: 8px;
box-shadow: 0 8px 24px rgba(31, 35, 40, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
z-index: 10001; z-index: 10001;
animation: notificationSlideIn 0.2s ease-out; animation: notificationSlideIn 0.3s ease;
} }
@keyframes notificationSlideIn { @keyframes notificationSlideIn {
@@ -1280,7 +1108,6 @@ onBeforeUnmount(() => {
opacity: 0; opacity: 0;
transform: translateX(100%); transform: translateX(100%);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateX(0); transform: translateX(0);
@@ -1291,12 +1118,12 @@ onBeforeUnmount(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 12px 16px; padding: 16px;
} }
.notification-message { .notification-message {
font-size: 13px; font-size: 14px;
color: #24292f; color: rgb(var(--v-theme-on-surface));
font-weight: 500; font-weight: 500;
} }
@@ -1304,7 +1131,7 @@ onBeforeUnmount(() => {
background: none; background: none;
border: none; border: none;
font-size: 16px; font-size: 16px;
color: #656d76; color: rgba(var(--v-theme-on-surface), 0.6);
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
width: 20px; width: 20px;
@@ -1313,27 +1140,278 @@ onBeforeUnmount(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 3px; border-radius: 3px;
transition: all 0.1s ease; transition: all 0.2s ease;
} }
.notification-close:hover { .notification-close:hover {
background: #f3f4f6; background: rgba(var(--v-theme-on-surface), 0.1);
color: #24292f; color: rgb(var(--v-theme-on-surface));
} }
.notification-success { .notification-success {
border-left: 3px solid #1f883d; border-left: 3px solid rgb(var(--v-theme-success));
} }
.notification-error { .notification-error {
border-left: 3px solid #d1242f; border-left: 3px solid rgb(var(--v-theme-error));
} }
.notification-warning { .notification-warning {
border-left: 3px solid #bf8700; border-left: 3px solid rgb(var(--v-theme-warning));
} }
.notification-info { .notification-info {
border-left: 3px solid #0969da; border-left: 3px solid rgb(var(--v-theme-info));
}
.gantt-container:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
</style>
<style>
.gantt_container {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 13px;
background: rgb(var(--v-theme-surface));
color: rgb(var(--v-theme-on-surface));
}
.gantt_grid_head_cell,
.gantt_grid_data .gantt_cell {
border-right: 1px solid rgba(var(--v-border-color), 0.5);
border-bottom: 1px solid rgba(var(--v-border-color), 0.5);
}
.gantt_grid_head_cell {
background: rgb(var(--v-theme-surface-variant));
font-weight: 600;
text-align: center;
padding: 12px 10px;
color: rgb(var(--v-theme-on-surface-variant));
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.gantt_cell {
padding: 10px 12px;
vertical-align: middle;
line-height: 1.4;
color: rgb(var(--v-theme-on-surface));
background: rgb(var(--v-theme-surface));
}
.gantt_tree_content {
padding-left: 6px;
color: rgb(var(--v-theme-on-surface));
font-weight: 500;
}
.gantt_tree_icon {
width: 14px;
height: 14px;
margin-right: 6px;
opacity: 0.6;
color: rgb(var(--v-theme-on-surface));
}
.gantt_task_line.completed-task {
background: rgb(var(--v-theme-success));
border: 1px solid rgb(var(--v-theme-success-darken-1));
border-radius: 4px;
box-shadow: 0 1px 3px rgba(var(--v-theme-success), 0.3);
}
.gantt_task_line.high-progress-task {
background: rgb(var(--v-theme-primary));
border: 1px solid rgb(var(--v-theme-primary-darken-1));
border-radius: 4px;
box-shadow: 0 1px 3px rgba(var(--v-theme-primary), 0.3);
}
.gantt_task_line.medium-progress-task {
background: rgb(var(--v-theme-warning));
border: 1px solid rgb(var(--v-theme-warning-darken-1));
border-radius: 4px;
box-shadow: 0 1px 3px rgba(var(--v-theme-warning), 0.3);
}
.gantt_task_line.low-progress-task {
background: rgb(var(--v-theme-error));
border: 1px solid rgb(var(--v-theme-error-darken-1));
border-radius: 4px;
box-shadow: 0 1px 3px rgba(var(--v-theme-error), 0.3);
}
.summary-row {
background: rgba(var(--v-theme-primary), 0.1);
font-weight: 600;
color: rgb(var(--v-theme-on-surface));
border-left: 3px solid rgb(var(--v-theme-primary));
}
.gantt_task_progress {
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
}
.gantt_scale_cell {
border-bottom: 1px solid rgba(var(--v-border-color), 0.5);
border-right: 1px solid rgba(var(--v-border-color), 0.5);
background: rgb(var(--v-theme-surface-variant));
font-weight: 500;
color: rgb(var(--v-theme-on-surface-variant));
font-size: 11px;
text-align: center;
}
.gantt_task_line {
border-radius: 4px;
height: 20px;
transition: all 0.2s ease;
}
.gantt_task_line:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.gantt_side_content {
color: rgba(var(--v-theme-on-surface), 0.6);
font-size: 11px;
margin-top: 2px;
font-weight: 500;
}
.completed-mark {
color: rgb(var(--v-theme-success));
font-weight: bold;
font-size: 12px;
}
.gantt_grid_data .gantt_row:nth-child(odd) {
background: rgb(var(--v-theme-surface));
}
.gantt_grid_data .gantt_row:nth-child(even) {
background: rgba(var(--v-theme-surface-variant), 0.3);
}
.gantt_grid_data .gantt_row:hover {
background: rgba(var(--v-theme-primary), 0.05);
}
.gantt_selected .gantt_cell {
background: rgba(var(--v-theme-primary), 0.1);
color: rgb(var(--v-theme-on-surface));
border-left: 3px solid rgb(var(--v-theme-primary));
}
.gantt_task_link {
stroke: rgba(var(--v-theme-on-surface), 0.4);
stroke-width: 1.5;
}
.gantt_task_link .gantt_link_arrow {
fill: rgba(var(--v-theme-on-surface), 0.4);
}
.gantt_milestone {
background: rgb(var(--v-theme-secondary));
border: 2px solid rgb(var(--v-theme-secondary-darken-1));
box-shadow: 0 1px 3px rgba(var(--v-theme-secondary), 0.3);
}
.gantt-context-menu {
background: rgb(var(--v-theme-surface));
border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
padding: 6px;
min-width: 180px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 13px;
z-index: 9999;
animation: contextMenuFadeIn 0.2s ease;
}
@keyframes contextMenuFadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.context-menu-item {
display: flex;
align-items: center;
padding: 8px 10px;
cursor: pointer;
color: rgb(var(--v-theme-on-surface));
transition: background-color 0.1s ease;
border-radius: 4px;
font-size: 13px;
line-height: 1.4;
user-select: none;
}
.context-menu-item:hover {
background: rgba(var(--v-theme-primary), 0.1);
}
.context-menu-item:active {
background: rgba(var(--v-theme-primary), 0.15);
}
.menu-icon {
margin-right: 8px;
opacity: 0.6;
flex-shrink: 0;
color: rgb(var(--v-theme-on-surface));
}
.context-menu-separator {
height: 1px;
background: rgba(var(--v-border-color), 0.5);
margin: 4px 0;
}
.gantt_layout_root {
background: rgb(var(--v-theme-surface));
}
.gantt_layout_root .gantt_layout_cell {
background: rgb(var(--v-theme-surface));
}
.gantt_grid_scale .gantt_scale_line {
background: rgb(var(--v-theme-surface-variant));
border-bottom: 1px solid rgba(var(--v-border-color), 0.5);
}
.gantt_scale_line {
color: rgb(var(--v-theme-on-surface-variant));
}
.gantt_task_content {
color: rgb(var(--v-theme-on-primary));
font-weight: 500;
font-size: 12px;
}
.gantt_tooltip {
background: rgb(var(--v-theme-surface));
color: rgb(var(--v-theme-on-surface));
border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
padding: 8px 12px;
font-size: 12px;
} }
</style> </style>