| @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;500;600;700&display=swap'); |
|
|
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
|
|
| body { |
| font-family: 'Atkinson Hyperlegible Next', -apple-system, BlinkMacSystemFont, sans-serif; |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: #f1f5f9; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: #cbd5e1; |
| border-radius: 4px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: #94a3b8; |
| } |
|
|
| |
| .pto-pattern { |
| background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 25%), |
| linear-gradient(-45deg, #f5f5f5 25%, transparent 25%), |
| linear-gradient(45deg, transparent 75%, #f5f5f5 75%), |
| linear-gradient(-45deg, transparent 75%, #f5f5f5 75%); |
| background-size: 20px 20px; |
| background-position: 0 0, 0 10px, 10px -10px, -10px 0px; |
| } |
|
|
| |
| .on-call-bg { |
| background-color: #fef9c3; |
| } |
|
|
| |
| .holiday-bg { |
| background-color: #dbeafe; |
| } |
|
|
| |
| .conference-bg { |
| background-color: #f3e8ff; |
| } |
|
|
| |
| .status-complete { |
| background-color: #10b981; |
| } |
|
|
| .status-in-progress { |
| background-color: #3b82f6; |
| } |
|
|
| .status-blocked { |
| background-color: #f59e0b; |
| } |
|
|
| .status-not-started { |
| background-color: #6b7280; |
| } |
|
|
| |
| .cell-selected { |
| border: 2px solid #0ea5e9 !important; |
| box-shadow: 0 0 0 1px #0ea5e9; |
| } |
|
|
| |
| .drag-over-valid { |
| border: 2px solid #10b981 !important; |
| } |
|
|
| .drag-over-invalid { |
| border: 2px solid #ef4444 !important; |
| } |
|
|
| .dragging { |
| opacity: 0.5; |
| } |
|
|
| |
| .dependency-line { |
| stroke: #6b7280; |
| stroke-width: 2; |
| marker-end: url(#arrowhead); |
| } |
| |
| .sprint-boundary { |
| border-top: 3px solid #3b82f6; |
| } |
| |
| .conflict-indicator { |
| position: absolute; |
| top: 2px; |
| right: 2px; |
| width: 12px; |
| height: 12px; |
| background-color: #ef4444; |
| border-radius: 50%; |
| } |
|
|
| |
| .task-item { |
| position: relative; |
| transition: all 0.2s ease; |
| } |
|
|
| .task-item:hover { |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| transform: translateY(-1px); |
| } |
|
|
| |
| .more-indicator { |
| background: rgba(243, 244, 246, 0.8); |
| border-radius: 4px; |
| padding: 2px 4px; |
| } |
| |
| .command-panel-enter { |
| transform: translateX(100%); |
| } |
|
|
| .command-panel-enter-active { |
| transform: translateX(0); |
| transition: transform 300ms ease-in-out; |
| } |
|
|
| .command-panel-exit { |
| transform: translateX(0); |
| } |
|
|
| .command-panel-exit-active { |
| transform: translateX(100%); |
| transition: transform 300ms ease-in-out; |
| } |
|
|
| |
| .task-stack-enter { |
| opacity: 0; |
| transform: translateY(-10px); |
| } |
|
|
| .task-stack-enter-active { |
| opacity: 1; |
| transform: translateY(0); |
| transition: opacity 200ms, transform 200ms; |
| } |
|
|
| |
| @media (max-width: 1024px) { |
| .calendar-grid { |
| font-size: 12px; |
| } |
| |
| .team-member-column { |
| min-width: 150px; |
| } |
| } |
|
|
| @media (max-width: 768px) { |
| .calendar-grid { |
| font-size: 11px; |
| } |
| |
| .team-member-column { |
| min-width: 120px; |
| } |
| } |
|
|
| |
| @media print { |
| .command-panel, |
| .floating-action-btn { |
| display: none !important; |
| } |
| |
| .calendar-grid { |
| break-inside: avoid; |
| } |
| } |
|
|
| |
| .team-member-header { |
| background: white; |
| border-right: 1px solid #e5e7eb; |
| padding: 0.75rem 1rem; |
| font-weight: 600; |
| color: #1f2937; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| position: sticky; |
| top: 0; |
| z-index: 10; |
| } |
| |
| .cell { |
| background: white; |
| border-right: 1px solid #e5e7eb; |
| padding: 0.25rem; |
| min-height: 4rem; |
| position: relative; |
| transition: all 0.2s ease; |
| overflow: hidden; |
| } |
|
|
| |
| .team-member-header { |
| position: relative; |
| cursor: col-resize; |
| user-select: none; |
| } |
|
|
| .team-member-header::after { |
| content: ''; |
| position: absolute; |
| right: 0; |
| top: 0; |
| bottom: 0; |
| width: 4px; |
| background: transparent; |
| cursor: col-resize; |
| } |
|
|
| .team-member-header:hover::after { |
| background: #0ea5e9; |
| } |
|
|
| |
| .task-item { |
| max-height: 48px; |
| overflow: hidden; |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
| margin-bottom: 4px; |
| font-size: 14px; |
| } |
|
|
| .task-title { |
| font-weight: 500; |
| line-height: 1.3; |
| } |
|
|
| .status-indicator { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| display: inline-block; |
| margin-right: 4px; |
| flex-shrink: 0; |
| } |
|
|
| .time-estimate { |
| font-size: 10px; |
| color: #64748b; |
| } |
|
|
| .link-count { |
| font-size: 10px; |
| } |
| .cell:hover { |
| background-color: #f9fafb; |
| } |
|
|
| |
| .status-complete { |
| background-color: #10b981; |
| } |
|
|
| .status-in-progress { |
| background-color: #3b82f6; |
| } |
|
|
| .status-blocked { |
| background-color: #f59e0b; |
| } |
|
|
| .status-not-started { |
| background-color: #6b7280; |
| } |
|
|
| |
| .sticky.left-0 { |
| background: #f8f9fa; |
| font-weight: 500; |
| color: #374151; |
| } |
|
|
