Created
June 24, 2025 06:59
-
-
Save carlosItDevelop/d55dafc913d00a2cbe00b847e0b3f065 to your computer and use it in GitHub Desktop.
Arquivo "CSS", responsável pelo estilo do CRM da Cooperchip para a General Lab Solutions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| crm-styles.css | |
| By: Cooperchip Teams | |
| path: wwwroot/css/crm-styles.css | |
| */ | |
| /* CSS Variables for Theming */ | |
| :root { | |
| --primary-color: #3b82f6; | |
| --primary-hover: #2563eb; | |
| --success-color: #10b981; | |
| --warning-color: #f59e0b; | |
| --danger-color: #ef4444; | |
| --info-color: #06b6d4; | |
| /* Light Theme */ | |
| --bg-primary: #ffffff; | |
| --bg-secondary: #f8fafc; | |
| --bg-tertiary: #f1f5f9; | |
| --text-primary: #1e293b; | |
| --text-secondary: #64748b; | |
| --text-muted: #94a3b8; | |
| --border-color: #e2e8f0; | |
| --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| [data-theme="dark"] { | |
| --bg-primary: #0f172a; | |
| --bg-secondary: #1e293b; | |
| --bg-tertiary: #334155; | |
| --text-primary: #f1f5f9; | |
| --text-secondary: #cbd5e1; | |
| --text-muted: #94a3b8; | |
| --border-color: #334155; | |
| --shadow: 0 1px 3px rgba(0, 0, 0, 0.3); | |
| --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3); | |
| } | |
| /* Reset and Base Styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| background-color: var(--bg-secondary); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| transition: all 0.3s ease; | |
| } | |
| /* Layout */ | |
| .app-container { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .header { | |
| height: 60px; | |
| background-color: var(--bg-primary); | |
| border-bottom: 1px solid var(--border-color); | |
| box-shadow: var(--shadow); | |
| position: relative; | |
| z-index: 1000; | |
| } | |
| .header-content { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: 100%; | |
| padding: 0 30px; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--primary-color); | |
| } | |
| .header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .theme-toggle { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 18px; | |
| cursor: pointer; | |
| padding: 8px; | |
| border-radius: 6px; | |
| transition: all 0.2s ease; | |
| } | |
| .theme-toggle:hover { | |
| background-color: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| .notification-bell { | |
| position: relative; | |
| color: var(--text-secondary); | |
| font-size: 18px; | |
| cursor: pointer; | |
| padding: 8px; | |
| } | |
| .notification-count { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| background-color: var(--danger-color); | |
| color: white; | |
| font-size: 10px; | |
| padding: 2px 6px; | |
| border-radius: 10px; | |
| min-width: 16px; | |
| text-align: center; | |
| } | |
| .user-menu { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| padding: 8px; | |
| border-radius: 6px; | |
| transition: all 0.2s ease; | |
| } | |
| .user-menu:hover { | |
| background-color: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| /* Navigation Tabs */ | |
| .nav-tabs { | |
| background-color: var(--bg-primary); | |
| border-bottom: 1px solid var(--border-color); | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); | |
| } | |
| .nav-tabs-container { | |
| display: flex; | |
| align-items: center; | |
| padding: 0 30px; | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| -ms-overflow-style: none; | |
| } | |
| .nav-tabs-container::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .nav-tab { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 16px 20px; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| transition: all 0.2s ease; | |
| border-bottom: 3px solid transparent; | |
| white-space: nowrap; | |
| font-size: 14px; | |
| font-weight: 500; | |
| position: relative; | |
| } | |
| .nav-tab:hover { | |
| color: var(--text-primary); | |
| background-color: var(--bg-secondary); | |
| } | |
| .nav-tab.active { | |
| color: var(--primary-color); | |
| border-bottom-color: var(--primary-color); | |
| background-color: var(--bg-secondary); | |
| } | |
| .nav-tab i { | |
| font-size: 16px; | |
| width: 16px; | |
| text-align: center; | |
| } | |
| .main-content { | |
| flex: 1; | |
| padding: 30px; | |
| background-color: var(--bg-secondary); | |
| } | |
| /* Tab Content */ | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| /* Section Headers */ | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 30px; | |
| } | |
| .section-header h1 { | |
| font-size: 28px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| /* Buttons */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 16px; | |
| border: none; | |
| border-radius: 6px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| text-decoration: none; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--primary-hover); | |
| } | |
| .btn-secondary { | |
| background-color: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| .btn-secondary:hover { | |
| background-color: var(--border-color); | |
| } | |
| .btn-success { | |
| background-color: var(--success-color); | |
| color: white; | |
| } | |
| .btn-danger { | |
| background-color: var(--danger-color); | |
| color: white; | |
| } | |
| .btn-sm { | |
| padding: 6px 12px; | |
| font-size: 12px; | |
| } | |
| /* KPI Cards */ | |
| .kpi-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .kpi-card { | |
| background-color: var(--bg-primary); | |
| border-radius: 8px; | |
| padding: 24px; | |
| box-shadow: var(--shadow); | |
| border: 1px solid var(--border-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .kpi-icon { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 12px; | |
| background-color: var(--primary-color); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| } | |
| .kpi-content h3 { | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| margin-bottom: 8px; | |
| } | |
| .kpi-value { | |
| font-size: 32px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 4px; | |
| } | |
| .kpi-trend { | |
| font-size: 12px; | |
| font-weight: 500; | |
| } | |
| .kpi-trend.positive { | |
| color: var(--success-color); | |
| } | |
| .kpi-trend.negative { | |
| color: var(--danger-color); | |
| } | |
| /* Charts */ | |
| .charts-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .chart-card { | |
| background-color: var(--bg-primary); | |
| border-radius: 8px; | |
| padding: 24px; | |
| box-shadow: var(--shadow); | |
| border: 1px solid var(--border-color); | |
| } | |
| .chart-card h3 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: 20px; | |
| } | |
| /* Quick Actions */ | |
| .quick-actions { | |
| background-color: var(--bg-primary); | |
| border-radius: 8px; | |
| padding: 24px; | |
| box-shadow: var(--shadow); | |
| border: 1px solid var(--border-color); | |
| } | |
| .quick-actions h3 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: 20px; | |
| } | |
| .action-list { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 16px; | |
| } | |
| .action-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 16px; | |
| background-color: var(--bg-secondary); | |
| border-radius: 8px; | |
| border-left: 4px solid var(--info-color); | |
| transition: all 0.2s ease; | |
| min-height: 80px; | |
| } | |
| .action-item:hover { | |
| background-color: var(--bg-tertiary); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .action-item.urgent { | |
| border-left-color: var(--danger-color); | |
| } | |
| .action-item i { | |
| font-size: 18px; | |
| color: var(--text-secondary); | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: var(--bg-primary); | |
| border-radius: 6px; | |
| flex-shrink: 0; | |
| } | |
| .action-content { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .action-content h4 { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: 4px; | |
| line-height: 1.3; | |
| } | |
| .action-content p { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| line-height: 1.3; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| /* Responsividade para dispositivos menores */ | |
| @media (max-width: 768px) { | |
| .action-list { | |
| grid-template-columns: 1fr; | |
| } | |
| .action-item { | |
| min-height: 70px; | |
| } | |
| } | |
| /* Estados de urgência para ações importantes */ | |
| .action-item.urgent { | |
| border-left-color: var(--danger-color); | |
| background: linear-gradient(135deg, var(--bg-secondary), rgba(239, 68, 68, 0.05)); | |
| } | |
| .action-item.urgent i { | |
| color: var(--danger-color); | |
| background-color: rgba(239, 68, 68, 0.1); | |
| } | |
| .action-item.medium { | |
| border-left-color: var(--warning-color); | |
| } | |
| .action-item.medium i { | |
| color: var(--warning-color); | |
| background-color: rgba(245, 158, 11, 0.1); | |
| } | |
| /* Estado quando não há ações importantes */ | |
| .no-actions { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| justify-content: center; | |
| padding: 40px 20px; | |
| } | |
| .no-actions-content { | |
| text-align: center; | |
| color: var(--text-secondary); | |
| } | |
| .no-actions-content i { | |
| font-size: 48px; | |
| color: var(--success-color); | |
| margin-bottom: 16px; | |
| display: block; | |
| } | |
| .no-actions-content h4 { | |
| color: var(--text-primary); | |
| margin-bottom: 8px; | |
| font-size: 18px; | |
| } | |
| .no-actions-content p { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| /* Filters */ | |
| .filters { | |
| display: flex; | |
| gap: 16px; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .search-input, | |
| .filter-select { | |
| padding: 8px 12px; | |
| border: 1px solid var(--border-color); | |
| border-radius: 6px; | |
| background-color: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| } | |
| .search-input { | |
| min-width: 250px; | |
| } | |
| /* Tables */ | |
| .table-container { | |
| background-color: var(--bg-primary); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| border: 1px solid var(--border-color); | |
| } | |
| .leads-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .leads-table th { | |
| background-color: var(--bg-tertiary); | |
| padding: 16px; | |
| text-align: left; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .leads-table td { | |
| padding: 16px; | |
| border-bottom: 1px solid var(--border-color); | |
| color: var(--text-primary); | |
| } | |
| .leads-table tbody tr:hover { | |
| background-color: var(--bg-secondary); | |
| } | |
| /* Status Badge */ | |
| .status-badge { | |
| padding: 4px 8px; | |
| border-radius: 12px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .status-novo { | |
| background-color: rgba(99, 102, 241, 0.1); | |
| color: #6366f1; | |
| } | |
| .status-contato { | |
| background-color: rgba(245, 158, 11, 0.1); | |
| color: #f59e0b; | |
| } | |
| .status-qualificado { | |
| background-color: rgba(16, 185, 129, 0.1); | |
| color: #10b981; | |
| } | |
| .status-proposta { | |
| background-color: rgba(139, 92, 246, 0.1); | |
| color: #8b5cf6; | |
| } | |
| /* Kanban Board */ | |
| .kanban-board { | |
| display: flex; | |
| gap: 20px; | |
| overflow-x: auto; | |
| padding-bottom: 20px; | |
| height: calc(100vh - 200px); | |
| } | |
| .kanban-column { | |
| min-width: 300px; | |
| background-color: var(--bg-primary); | |
| border-radius: 8px; | |
| border: 1px solid var(--border-color); | |
| box-shadow: var(--shadow); | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| .column-header { | |
| padding: 16px; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .column-actions { | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--border-color); | |
| background-color: var(--bg-secondary); | |
| } | |
| .column-header h3 { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .column-header.success h3 { | |
| color: var(--success-color); | |
| } | |
| .lead-count { | |
| background-color: var(--bg-tertiary); | |
| color: var(--text-secondary); | |
| padding: 4px 8px; | |
| border-radius: 12px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .column-cards { | |
| padding: 16px; | |
| min-height: 200px; | |
| flex: 1; | |
| overflow-y: auto; | |
| max-height: calc(100vh - 300px); | |
| } | |
| .kanban-card { | |
| background-color: var(--bg-secondary); | |
| border-radius: 6px; | |
| padding: 16px; | |
| margin-bottom: 12px; | |
| border: 1px solid var(--border-color); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| position: relative; | |
| } | |
| .kanban-card:hover { | |
| box-shadow: var(--shadow-lg); | |
| transform: translateY(-2px); | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 8px; | |
| } | |
| .card-header h4 { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin: 0; | |
| flex: 1; | |
| } | |
| .btn-icon { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| padding: 4px; | |
| border-radius: 4px; | |
| transition: all 0.2s ease; | |
| font-size: 12px; | |
| } | |
| .btn-icon:hover { | |
| background-color: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| .kanban-card p { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| margin-bottom: 4px; | |
| } | |
| .card-actions { | |
| display: flex; | |
| gap: 8px; | |
| margin-top: 12px; | |
| } | |
| .card-notes { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 4px; | |
| margin-top: 8px; | |
| } | |
| .note-tag { | |
| padding: 2px 6px; | |
| border-radius: 10px; | |
| font-size: 10px; | |
| font-weight: 500; | |
| color: white; | |
| cursor: pointer; | |
| transition: opacity 0.2s ease; | |
| } | |
| .note-tag:hover { | |
| opacity: 0.8; | |
| } | |
| .note-tag.blue { | |
| background-color: #3b82f6; | |
| } | |
| .note-tag.green { | |
| background-color: #10b981; | |
| } | |
| .note-tag.yellow { | |
| background-color: #f59e0b; | |
| } | |
| .note-tag.red { | |
| background-color: #ef4444; | |
| } | |
| .note-tag.purple { | |
| background-color: #8b5cf6; | |
| } | |
| .card-actions button { | |
| padding: 4px 8px; | |
| font-size: 10px; | |
| border-radius: 4px; | |
| } | |
| /* Calendar */ | |
| .calendar-container { | |
| display: flex; | |
| gap: 20px; | |
| height: calc(100vh - 250px); | |
| } | |
| .calendar-sidebar { | |
| width: 280px; | |
| background-color: var(--bg-primary); | |
| border-radius: 8px; | |
| padding: 20px; | |
| box-shadow: var(--shadow); | |
| border: 1px solid var(--border-color); | |
| flex-shrink: 0; | |
| } | |
| .calendar-sidebar h3 { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: 16px; | |
| padding-bottom: 12px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .predefined-events { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .event-template { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px; | |
| border-radius: 6px; | |
| background-color: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| cursor: move; | |
| transition: all 0.2s ease; | |
| user-select: none; | |
| margin-bottom: 8px; | |
| } | |
| .event-template:hover { | |
| background-color: var(--bg-tertiary); | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| } | |
| .event-template:active { | |
| opacity: 0.7; | |
| transform: scale(0.98); | |
| } | |
| .event-template.fc-dragging { | |
| opacity: 0.6; | |
| transform: rotate(5deg); | |
| } | |
| .event-color { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| } | |
| .event-color.novo { | |
| background-color: #6366f1; | |
| } | |
| .event-color.contato { | |
| background-color: #f59e0b; | |
| } | |
| .event-color.qualificado { | |
| background-color: #10b981; | |
| } | |
| .event-color.proposta { | |
| background-color: #8b5cf6; | |
| } | |
| .event-color.negociacao { | |
| background-color: #ef4444; | |
| } | |
| .event-info { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| /* FullCalendar drag styles */ | |
| .fc-dragging .event-template { | |
| pointer-events: none; | |
| } | |
| /* Indicador visual quando arrastar sobre o calendário */ | |
| .fc-day:hover { | |
| background-color: var(--bg-tertiary) !important; | |
| } | |
| .event-color.novo { | |
| background-color: #6366f1; | |
| } | |
| .event-color.contato { | |
| background-color: #f59e0b; | |
| } | |
| .event-color.qualificado { | |
| background-color: #10b981; | |
| } | |
| .event-color.proposta { | |
| background-color: #8b5cf6; | |
| } | |
| .event-color.negociacao { | |
| background-color: #ef4444; | |
| } | |
| .event-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| /* Recent History */ | |
| .recent-history { | |
| margin-top: 24px; | |
| padding: 16px; | |
| background-color: var(--bg-secondary); | |
| border-radius: 8px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .recent-history h3 { | |
| margin: 0 0 16px 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .history-list { | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| /* Custom Scrollbars for Calendar Sidebar */ | |
| .predefined-events::-webkit-scrollbar, | |
| .history-list::-webkit-scrollbar, | |
| .calendar-sidebar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .predefined-events::-webkit-scrollbar-track, | |
| .history-list::-webkit-scrollbar-track, | |
| .calendar-sidebar::-webkit-scrollbar-track { | |
| background: var(--bg-tertiary); | |
| border-radius: 3px; | |
| } | |
| .predefined-events::-webkit-scrollbar-thumb, | |
| .history-list::-webkit-scrollbar-thumb, | |
| .calendar-sidebar::-webkit-scrollbar-thumb { | |
| background: var(--text-muted); | |
| border-radius: 3px; | |
| transition: background-color 0.2s ease; | |
| } | |
| .predefined-events::-webkit-scrollbar-thumb:hover, | |
| .history-list::-webkit-scrollbar-thumb:hover, | |
| .calendar-sidebar::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-secondary); | |
| } | |
| /* Firefox scrollbar styles */ | |
| .predefined-events, | |
| .history-list, | |
| .calendar-sidebar { | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--text-muted) var(--bg-tertiary); | |
| } | |
| .history-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| padding: 12px 0; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .history-item:last-child { | |
| border-bottom: none; | |
| } | |
| .history-item i { | |
| color: var(--primary-color); | |
| margin-top: 2px; | |
| font-size: 14px; | |
| } | |
| .history-content { | |
| flex: 1; | |
| } | |
| .history-title { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| margin-bottom: 4px; | |
| } | |
| .history-description { | |
| color: var(--text-secondary); | |
| font-size: 13px; | |
| margin-bottom: 4px; | |
| } | |
| .history-time { | |
| color: var(--text-muted); | |
| font-size: 12px; | |
| } | |
| /* Predefined Events */ | |
| .predefined-events { | |
| margin-bottom: 24px; | |
| } | |
| .event-template { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px; | |
| background-color: var(--bg-tertiary); | |
| border-radius: 6px; | |
| margin-bottom: 8px; | |
| cursor: grab; | |
| border: 1px solid var(--border-color); | |
| transition: all 0.2s ease; | |
| } | |
| .event-template:hover { | |
| background-color: var(--bg-secondary); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .event-template:active { | |
| cursor: grabbing; | |
| } | |
| .event-color { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| } | |
| .event-color.novo { | |
| background-color: #6366f1; | |
| } | |
| .event-color.contato { | |
| background-color: #f59e0b; | |
| } | |
| .event-color.qualificado { | |
| background-color: #10b981; | |
| } | |
| .event-color.proposta { | |
| background-color: #8b5cf6; | |
| } | |
| .event-color.negociacao { | |
| background-color: #ef4444; | |
| } | |
| .event-info { | |
| flex: 1; | |
| } | |
| .event-title { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| font-size: 13px; | |
| display: block; | |
| } | |
| .event-subtitle { | |
| color: var(--text-secondary); | |
| font-size: 12px; | |
| } | |
| /* Calendar Container */ | |
| .calendar-container { | |
| display: grid; | |
| grid-template-columns: 300px 1fr; | |
| gap: 24px; | |
| height: calc(100vh - 200px); | |
| } | |
| .calendar-sidebar { | |
| background-color: var(--bg-secondary); | |
| border-radius: 8px; | |
| padding: 20px; | |
| border: 1px solid var(--border-color); | |
| overflow-y: auto; | |
| } | |
| .calendar-sidebar h3 { | |
| margin: 0 0 16px 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .calendar-main { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| #calendar-widget { | |
| background-color: var(--bg-primary); | |
| border-radius: 8px; | |
| padding: 20px; | |
| box-shadow: var(--shadow); | |
| border: 1px solid var(--border-color); | |
| height: 100%; | |
| } | |
| /* FullCalendar Theme Overrides */ | |
| .fc { | |
| background-color: var(--bg-primary); | |
| color: var(--text-primary); | |
| } | |
| .fc-theme-standard .fc-scrollgrid { | |
| border-color: var(--border-color); | |
| } | |
| .fc-theme-standard td, | |
| .fc-theme-standard th { | |
| border-color: var(--border-color); | |
| } | |
| .fc-col-header-cell { | |
| background-color: var(--bg-secondary); | |
| color: var(--text-primary); | |
| } | |
| .fc-daygrid-day { | |
| background-color: var(--bg-primary); | |
| } | |
| .fc-daygrid-day:hover { | |
| background-color: var(--bg-secondary); | |
| } | |
| .fc-today { | |
| background-color: var(--bg-tertiary) !important; | |
| } | |
| .fc-button-primary { | |
| background-color: var(--primary-color); | |
| border-color: var(--primary-color); | |
| color: white; | |
| } | |
| .fc-button-primary:hover { | |
| background-color: var(--primary-hover); | |
| border-color: var(--primary-hover); | |
| } | |
| .fc-button-primary:disabled { | |
| background-color: var(--bg-tertiary); | |
| border-color: var(--border-color); | |
| color: var(--text-muted); | |
| } | |
| .fc-toolbar-title { | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| } | |
| .fc-event { | |
| border-radius: 4px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| } | |
| .fc-day-number { | |
| color: var(--text-primary); | |
| } | |
| .fc-day-other .fc-day-number { | |
| color: var(--text-muted); | |
| } | |
| .fc-list-event:hover { | |
| background-color: var(--bg-secondary); | |
| } | |
| .fc-list-day-cushion { | |
| background-color: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| /* Tasks */ | |
| .task-filters-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .task-filters { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .filter-btn { | |
| padding: 8px 16px; | |
| border: 1px solid var(--border-color); | |
| background-color: var(--bg-primary); | |
| color: var(--text-secondary); | |
| border-radius: 6px; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .filter-btn.active, | |
| .filter-btn:hover { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border-color: var(--primary-color); | |
| } | |
| .tasks-list { | |
| background-color: var(--bg-primary); | |
| border-radius: 8px; | |
| box-shadow: var(--shadow); | |
| border: 1px solid var(--border-color); | |
| padding: 20px; | |
| } | |
| .task-item { | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| transition: all 0.2s ease; | |
| border-radius: 6px; | |
| margin: 0 -12px; | |
| padding: 16px 12px; | |
| position: relative; | |
| } | |
| .task-item:last-child { | |
| border-bottom: none; | |
| } | |
| .task-item:hover { | |
| background-color: var(--bg-secondary); | |
| transform: translateX(4px); | |
| box-shadow: var(--shadow); | |
| } | |
| .task-checkbox { | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 4px; | |
| } | |
| .task-content { | |
| flex: 1; | |
| } | |
| .task-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: 4px; | |
| transition: color 0.2s ease; | |
| } | |
| .task-item:hover .task-title { | |
| color: var(--primary-color); | |
| } | |
| .task-description { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .task-date { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| opacity: 0.8; | |
| transition: opacity 0.2s ease; | |
| } | |
| .task-item:hover .task-date { | |
| opacity: 1; | |
| } | |
| .task-item::after { | |
| content: ''; | |
| position: absolute; | |
| right: 12px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 0; | |
| height: 0; | |
| border-left: 6px solid var(--text-muted); | |
| border-top: 4px solid transparent; | |
| border-bottom: 4px solid transparent; | |
| opacity: 0; | |
| transition: opacity 0.2s ease; | |
| } | |
| .task-item:hover::after { | |
| opacity: 0.6; | |
| } | |
| /* Tasks Pagination */ | |
| .tasks-pagination { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-top: 20px; | |
| padding-top: 20px; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .tasks-pagination .pagination-info { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .tasks-pagination .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .tasks-pagination .btn:disabled:hover { | |
| background-color: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| /* Advanced Filters */ | |
| .advanced-filters { | |
| background-color: var(--bg-primary); | |
| border-radius: 8px; | |
| padding: 16px; | |
| margin-bottom: 20px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .filters-row { | |
| display: flex; | |
| gap: 16px; | |
| align-items: end; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| } | |
| .filter-actions { | |
| display: flex; | |
| gap: 8px; | |
| align-items: end; | |
| margin-left: auto; | |
| } | |
| .filter-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| min-width: 120px; | |
| } | |
| .filter-group label { | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| } | |
| .filter-input, | |
| .filter-select { | |
| padding: 6px 10px; | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| background-color: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-size: 13px; | |
| } | |
| /* Sort Controls */ | |
| .sort-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .sort-controls label { | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| white-space: nowrap; | |
| } | |
| /* Drag and Drop for Tasks */ | |
| .task-item.dragging { | |
| opacity: 0.5; | |
| transform: rotate(2deg); | |
| } | |
| .task-item.drag-over { | |
| border-top: 2px solid var(--primary-color); | |
| } | |
| .tasks-list.sortable { | |
| min-height: 100px; | |
| } | |
| /* Progress Bar */ | |
| .progress-bar { | |
| width: 100%; | |
| height: 8px; | |
| background-color: var(--bg-tertiary); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-top: 8px; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background-color: var(--success-color); | |
| transition: width 0.3s ease; | |
| } | |
| .task-progress { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-top: 4px; | |
| } | |
| .task-progress-bar { | |
| flex: 1; | |
| height: 4px; | |
| background-color: var(--bg-tertiary); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .task-progress-fill { | |
| height: 100%; | |
| background-color: var(--success-color); | |
| transition: width 0.3s ease; | |
| } | |
| .task-progress-text { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| min-width: 30px; | |
| } | |
| /* Task Details Modal */ | |
| .large-modal .modal-content { | |
| max-width: 800px; | |
| max-height: 90vh; | |
| } | |
| .task-details-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| } | |
| .task-section { | |
| border-bottom: 1px solid var(--border-color); | |
| padding-bottom: 20px; | |
| } | |
| .task-section:last-child { | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| .task-section h3 { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: 12px; | |
| } | |
| /* Progress Controls */ | |
| .progress-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 8px; | |
| } | |
| .progress-controls input[type="range"] { | |
| flex: 1; | |
| } | |
| /* Attachments */ | |
| .attachment-upload { | |
| margin-bottom: 16px; | |
| } | |
| .attachments-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .attachment-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 8px 12px; | |
| background-color: var(--bg-secondary); | |
| border-radius: 4px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .attachment-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .attachment-icon { | |
| color: var(--text-muted); | |
| font-size: 14px; | |
| } | |
| .attachment-name { | |
| font-size: 13px; | |
| color: var(--text-primary); | |
| font-weight: 500; | |
| } | |
| .attachment-size { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| } | |
| .attachment-actions { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| /* Comments */ | |
| .comment-form { | |
| margin-bottom: 16px; | |
| } | |
| .comment-form textarea { | |
| width: 100%; | |
| padding: 8px 12px; | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| background-color: var(--bg-primary); | |
| color: var(--text-primary); | |
| resize: vertical; | |
| margin-bottom: 8px; | |
| } | |
| .comments-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| .comment-item { | |
| padding: 12px; | |
| background-color: var(--bg-secondary); | |
| border-radius: 6px; | |
| border-left: 3px solid var(--primary-color); | |
| } | |
| .comment-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 6px; | |
| } | |
| .comment-author { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--primary-color); | |
| } | |
| .comment-date { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| } | |
| .comment-text { | |
| font-size: 13px; | |
| color: var(--text-primary); | |
| line-height: 1.4; | |
| } | |
| /* Priority Indicators */ | |
| .priority-high { | |
| color: var(--danger-color); | |
| } | |
| .priority-medium { | |
| color: var(--warning-color); | |
| } | |
| .priority-low { | |
| color: var(--success-color); | |
| } | |
| .priority-badge { | |
| padding: 2px 6px; | |
| border-radius: 10px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .priority-badge.high { | |
| background-color: rgba(239, 68, 68, 0.1); | |
| color: var(--danger-color); | |
| } | |
| .priority-badge.medium { | |
| background-color: rgba(245, 158, 11, 0.1); | |
| color: var(--warning-color); | |
| } | |
| .priority-badge.low { | |
| background-color: rgba(16, 185, 129, 0.1); | |
| color: var(--success-color); | |
| } | |
| /* Task Actions */ | |
| .task-actions { | |
| display: flex; | |
| gap: 4px; | |
| opacity: 0; | |
| transition: opacity 0.2s ease; | |
| } | |
| .task-item:hover .task-actions { | |
| opacity: 1; | |
| } | |
| .task-action-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| padding: 4px; | |
| border-radius: 3px; | |
| font-size: 12px; | |
| transition: all 0.2s ease; | |
| } | |
| .task-action-btn:hover { | |
| background-color: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| /* Reports */ | |
| /* Reports Container */ | |
| .reports-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 32px; | |
| margin-top: 24px; | |
| } | |
| /* Report Filters */ | |
| .report-filters { | |
| background: var(--bg-secondary); | |
| border-radius: 12px; | |
| padding: 24px; | |
| border: 1px solid var(--border); | |
| } | |
| .report-filters h3 { | |
| margin: 0 0 20px 0; | |
| color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .filters-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 20px; | |
| } | |
| .filter-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .filter-group label { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| } | |
| .filter-actions { | |
| display: flex; | |
| gap: 12px; | |
| justify-content: flex-start; | |
| } | |
| /* Report Results */ | |
| .report-results { | |
| background: var(--bg-primary); | |
| border-radius: 12px; | |
| padding: 32px; | |
| border: 1px solid var(--border); | |
| min-height: 400px; | |
| } | |
| .report-header { | |
| margin-bottom: 24px; | |
| border-bottom: 2px solid var(--primary-color); | |
| padding-bottom: 16px; | |
| } | |
| .report-header h2 { | |
| margin: 0; | |
| color: var(--text-primary); | |
| font-size: 28px; | |
| } | |
| .report-meta { | |
| margin-top: 8px; | |
| display: flex; | |
| gap: 24px; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| .report-meta span { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| /* Summary Cards */ | |
| .summary-cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin: 24px 0; | |
| } | |
| .summary-card { | |
| background: var(--bg-secondary); | |
| border-radius: 12px; | |
| padding: 20px; | |
| border: 1px solid var(--border); | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| } | |
| .summary-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .summary-card h3 { | |
| margin: 0 0 12px 0; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .summary-value { | |
| font-size: 32px; | |
| font-weight: bold; | |
| color: var(--primary-color); | |
| margin: 0; | |
| } | |
| /* Report Chart Container */ | |
| .report-chart-container { | |
| margin: 32px 0; | |
| background: var(--bg-secondary); | |
| border-radius: 12px; | |
| padding: 24px; | |
| border: 1px solid var(--border); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 400px; | |
| } | |
| /* Report Tables */ | |
| .report-table { | |
| margin: 32px 0; | |
| background: var(--bg-secondary); | |
| border-radius: 12px; | |
| padding: 24px; | |
| border: 1px solid var(--border); | |
| } | |
| .report-table h3 { | |
| margin: 0 0 20px 0; | |
| color: var(--text-primary); | |
| font-size: 20px; | |
| } | |
| .report-table .table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 0; | |
| } | |
| .report-table .table th, | |
| .report-table .table td { | |
| padding: 12px; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .report-table .table th { | |
| background: var(--bg-primary); | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .report-table .table tr:hover { | |
| background: var(--hover-bg); | |
| } | |
| /* Export Actions */ | |
| .export-actions { | |
| background: var(--bg-secondary); | |
| border-radius: 12px; | |
| padding: 24px; | |
| border: 1px solid var(--border); | |
| } | |
| .export-actions h3 { | |
| margin: 0 0 20px 0; | |
| color: var(--text-primary); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .export-buttons { | |
| display: flex; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .export-buttons .btn { | |
| min-width: 140px; | |
| } | |
| /* Predefined Reports */ | |
| .predefined-reports { | |
| background: var(--bg-secondary); | |
| border-radius: 12px; | |
| padding: 24px; | |
| border: 1px solid var(--border); | |
| } | |
| .predefined-reports h3 { | |
| margin: 0 0 20px 0; | |
| color: var(--text-primary); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| /* Reports Grid */ | |
| .reports-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .report-card { | |
| background: var(--bg-primary); | |
| border-radius: 12px; | |
| padding: 24px; | |
| border: 1px solid var(--border); | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| text-align: center; | |
| } | |
| .report-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-lg); | |
| border-color: var(--primary-color); | |
| } | |
| .report-icon { | |
| width: 60px; | |
| height: 60px; | |
| background: var(--primary-color); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 16px auto; | |
| color: white; | |
| font-size: 24px; | |
| } | |
| .report-card h4 { | |
| margin: 0 0 12px 0; | |
| color: var(--text-primary); | |
| font-size: 18px; | |
| } | |
| .report-card p { | |
| margin: 0; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| /* Classic Reports */ | |
| .classic-reports { | |
| padding-top: 32px; | |
| border-top: 2px solid var(--border); | |
| background: var(--bg-secondary); | |
| border-radius: 12px; | |
| padding: 24px; | |
| margin-top: 32px; | |
| } | |
| .classic-reports h3 { | |
| margin: 0 0 24px 0; | |
| color: var(--text-primary); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .classic-reports .charts-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| grid-template-rows: repeat(2, 1fr); | |
| gap: 24px; | |
| max-width: 100%; | |
| } | |
| .classic-reports .chart-card { | |
| background: var(--bg-primary); | |
| border-radius: 12px; | |
| padding: 20px; | |
| border: 1px solid var(--border); | |
| transition: all 0.3s ease; | |
| min-height: 350px; | |
| } | |
| .classic-reports .chart-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .classic-reports .chart-card h3 { | |
| margin: 0 0 16px 0; | |
| color: var(--text-primary); | |
| font-size: 16px; | |
| font-weight: 600; | |
| text-align: center; | |
| border-bottom: 1px solid var(--border); | |
| padding-bottom: 12px; | |
| } | |
| /* Responsive para relatórios clássicos */ | |
| @media (max-width: 1024px) { | |
| .classic-reports .charts-grid { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: auto; | |
| } | |
| .classic-reports .chart-card { | |
| min-height: 300px; | |
| } | |
| } | |
| /* Responsive Design for Reports */ | |
| @media (max-width: 768px) { | |
| .filters-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .report-meta { | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .summary-cards { | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| } | |
| .export-buttons { | |
| flex-direction: column; | |
| } | |
| .export-buttons .btn { | |
| min-width: 100%; | |
| } | |
| } | |
| /* Files Management */ | |
| .files-filters { | |
| display: flex; | |
| gap: 16px; | |
| margin-bottom: 20px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .files-container { | |
| background-color: var(--bg-primary); | |
| border-radius: 8px; | |
| padding: 20px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .files-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 16px; | |
| } | |
| .file-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 16px; | |
| background-color: var(--bg-secondary); | |
| border-radius: 8px; | |
| border: 1px solid var(--border-color); | |
| transition: all 0.2s ease; | |
| } | |
| .file-item:hover { | |
| background-color: var(--bg-tertiary); | |
| border-color: var(--primary-color); | |
| } | |
| .file-icon { | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: var(--primary-color); | |
| color: white; | |
| border-radius: 8px; | |
| font-size: 18px; | |
| } | |
| .file-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .file-name { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: 4px; | |
| word-break: break-word; | |
| } | |
| .file-meta { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| flex-wrap: wrap; | |
| } | |
| .file-size { | |
| font-weight: 500; | |
| } | |
| .file-task { | |
| color: var(--primary-color); | |
| } | |
| .file-date { | |
| color: var(--text-secondary); | |
| } | |
| .file-actions { | |
| display: flex; | |
| gap: 4px; | |
| opacity: 0; | |
| transition: opacity 0.2s ease; | |
| } | |
| .file-item:hover .file-actions { | |
| opacity: 1; | |
| } | |
| /* Empty state for files */ | |
| .files-empty { | |
| text-align: center; | |
| padding: 60px 20px; | |
| color: var(--text-muted); | |
| } | |
| .files-empty i { | |
| font-size: 48px; | |
| margin-bottom: 16px; | |
| opacity: 0.5; | |
| } | |
| .files-empty h3 { | |
| margin-bottom: 8px; | |
| color: var(--text-secondary); | |
| } | |
| .files-empty p { | |
| margin-bottom: 20px; | |
| } | |
| .report-card { | |
| background-color: var(--bg-primary); | |
| border-radius: 8px; | |
| padding: 24px; | |
| box-shadow: var(--shadow); | |
| border: 1px solid var(--border-color); | |
| } | |
| .report-card h3 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: 20px; | |
| } | |
| /* Logs */ | |
| .logs-filters { | |
| display: flex; | |
| gap: 16px; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .date-input { | |
| padding: 8px 12px; | |
| border: 1px solid var(--border-color); | |
| border-radius: 6px; | |
| background-color: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| } | |
| .logs-timeline { | |
| background-color: var(--bg-primary); | |
| border-radius: 8px; | |
| padding: 20px; | |
| box-shadow: var(--shadow); | |
| border: 1px solid var(--border-color); | |
| } | |
| .log-item { | |
| display: flex; | |
| gap: 16px; | |
| padding: 16px 0; | |
| border-bottom: 1px solid var(--border-color); | |
| transition: all 0.2s ease; | |
| border-radius: 6px; | |
| margin: 0 -12px; | |
| padding: 16px 12px; | |
| } | |
| .log-item:last-child { | |
| border-bottom: none; | |
| } | |
| .log-item:hover { | |
| background-color: var(--bg-secondary); | |
| transform: translateX(4px); | |
| } | |
| .log-actions { | |
| display: flex; | |
| align-items: center; | |
| opacity: 0; | |
| transition: opacity 0.2s ease; | |
| } | |
| .log-item:hover .log-actions { | |
| opacity: 1; | |
| } | |
| .log-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 20px; | |
| background-color: var(--primary-color); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 16px; | |
| flex-shrink: 0; | |
| } | |
| .log-content { | |
| flex: 1; | |
| } | |
| .log-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: 4px; | |
| } | |
| .log-description { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| margin-bottom: 4px; | |
| } | |
| .log-time { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| } | |
| /* Logs Pagination */ | |
| .logs-pagination { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-top: 20px; | |
| padding-top: 20px; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .pagination-info { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .logs-pagination .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .logs-pagination .btn:disabled:hover { | |
| background-color: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| /* Modals */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 2000; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| } | |
| /* Log Details Modal */ | |
| .log-details-modal { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; | |
| } | |
| .log-details-modal .swal2-html-container { | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| } | |
| /* Task Details Modal */ | |
| .task-details-modal { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; | |
| } | |
| .task-details-modal .swal2-html-container { | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| } | |
| .modal-content { | |
| background-color: var(--bg-primary); | |
| margin: 5% auto; | |
| border-radius: 8px; | |
| width: 90%; | |
| max-width: 600px; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .modal-header { | |
| padding: 20px; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .modal-header h2 { | |
| font-size: 20px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .close { | |
| color: var(--text-secondary); | |
| font-size: 24px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| width: 30px; | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 4px; | |
| transition: all 0.2s ease; | |
| } | |
| .close:hover { | |
| background-color: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| .modal-body { | |
| padding: 20px; | |
| } | |
| .modal-footer { | |
| padding: 20px; | |
| border-top: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 12px; | |
| } | |
| /* Forms */ | |
| .form-row { | |
| display: flex; | |
| gap: 16px; | |
| margin-bottom: 16px; | |
| } | |
| .form-group { | |
| flex: 1; | |
| } | |
| .form-group label { | |
| display: block; | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| margin-bottom: 6px; | |
| } | |
| .form-group input, | |
| .form-group select, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 10px 12px; | |
| border: 1px solid var(--border-color); | |
| border-radius: 6px; | |
| background-color: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| transition: border-color 0.2s ease; | |
| } | |
| .form-group input:focus, | |
| .form-group select:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| } | |
| .form-group textarea { | |
| resize: vertical; | |
| min-height: 80px; | |
| } | |
| /* Notifications */ | |
| .notifications-container { | |
| position: fixed; | |
| top: 80px; | |
| right: 20px; | |
| z-index: 3000; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .notification { | |
| background-color: var(--bg-primary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 6px; | |
| padding: 16px; | |
| box-shadow: var(--shadow-lg); | |
| min-width: 300px; | |
| animation: slideIn 0.3s ease; | |
| } | |
| .notification.success { | |
| border-left: 4px solid var(--success-color); | |
| } | |
| .notification.error { | |
| border-left: 4px solid var(--danger-color); | |
| } | |
| .notification.warning { | |
| border-left: 4px solid var(--warning-color); | |
| } | |
| .notification.info { | |
| border-left: 4px solid var(--info-color); | |
| } | |
| @keyframes slideIn { | |
| from { | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .header-content { | |
| padding: 0 20px; | |
| } | |
| .nav-tabs-container { | |
| padding: 0 20px; | |
| } | |
| .nav-tab { | |
| padding: 12px 16px; | |
| font-size: 13px; | |
| } | |
| .calendar-container { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: auto 1fr; | |
| } | |
| .calendar-sidebar { | |
| max-height: 300px; | |
| } | |
| .task-filters-row { | |
| flex-direction: column; | |
| align-items: stretch; | |
| gap: 12px; | |
| } | |
| .filters-row { | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .filter-actions { | |
| justify-content: center; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .header-content { | |
| padding: 0 15px; | |
| } | |
| .nav-tabs-container { | |
| padding: 0 15px; | |
| } | |
| .nav-tab { | |
| padding: 12px; | |
| min-width: 48px; | |
| justify-content: center; | |
| } | |
| } | |
| /* Task Indicators */ | |
| .task-indicator { | |
| margin-left: 6px; | |
| font-size: 11px; | |
| opacity: 0.7; | |
| transition: opacity 0.2s ease; | |
| } | |
| .task-indicator:hover { | |
| opacity: 1; | |
| } | |
| .attachment-indicator { | |
| color: var(--primary-color); | |
| } | |
| .comment-indicator { | |
| color: var(--success-color); | |
| } | |
| /* Files Tab */ | |
| .files-filters { | |
| display: flex; | |
| gap: 16px; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .files-container { | |
| background-color: var(--bg-primary); | |
| border-radius: 8px; | |
| padding: 20px; | |
| box-shadow: var(--shadow); | |
| border: 1px solid var(--border-color); | |
| } | |
| .files-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 16px; | |
| } | |
| .file-item { | |
| background-color: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| padding: 16px; | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .file-item:hover { | |
| box-shadow: var(--shadow-lg); | |
| transform: translateY(-2px); | |
| } | |
| .file-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 8px; | |
| } | |
| .file-icon { | |
| font-size: 24px; | |
| color: var(--primary-color); | |
| } | |
| .file-info { | |
| flex: 1; | |
| } | |
| .file-name { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| margin-bottom: 4px; | |
| word-break: break-word; | |
| } | |
| .file-size { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| .file-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-top: 12px; | |
| padding-top: 12px; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .file-task { | |
| font-size: 11px; | |
| color: var(--text-secondary); | |
| background-color: var(--bg-tertiary); | |
| padding: 2px 6px; | |
| border-radius: 10px; | |
| } | |
| .file-date { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| } | |
| .file-actions { | |
| display: flex; | |
| gap: 4px; | |
| opacity: 0; | |
| transition: opacity 0.2s ease; | |
| } | |
| .file-item:hover .file-actions { | |
| opacity: 1; | |
| } | |
| .file-action-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| padding: 4px; | |
| border-radius: 3px; | |
| font-size: 12px; | |
| transition: all 0.2s ease; | |
| } | |
| .file-action-btn:hover { | |
| background-color: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| /* File Upload Modal */ | |
| .file-upload-area { | |
| border: 2px dashed var(--border-color); | |
| border-radius: 8px; | |
| padding: 40px; | |
| text-align: center; | |
| background-color: var(--bg-secondary); | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .file-upload-area:hover { | |
| border-color: var(--primary-color); | |
| background-color: var(--bg-tertiary); | |
| } | |
| .file-upload-area.dragover { | |
| border-color: var(--primary-color); | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .upload-icon { | |
| font-size: 48px; | |
| color: var(--text-muted); | |
| margin-bottom: 16px; | |
| } | |
| .upload-text { | |
| font-size: 16px; | |
| color: var(--text-primary); | |
| margin-bottom: 8px; | |
| } | |
| .upload-subtext { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| /* Utility Classes */ | |
| .text-center { | |
| text-align: center; | |
| } | |
| .text-right { | |
| text-align: right; | |
| } | |
| .mb-10 { | |
| margin-bottom: 10px; | |
| } | |
| .mb-20 { | |
| margin-bottom: 20px; | |
| } | |
| .mt-10 { | |
| margin-top: 10px; | |
| } | |
| .mt-20 { | |
| margin-top: 20px; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .visible { | |
| display: block; | |
| } | |
| /* Loading States */ | |
| .loading { | |
| opacity: 0.6; | |
| pointer-events: none; | |
| } | |
| .spinner { | |
| border: 2px solid var(--border-color); | |
| border-top: 2px solid var(--primary-color); | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| animation: spin 1s linear infinite; | |
| display: inline-block; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* Drag and Drop */ | |
| .draggable { | |
| cursor: move; | |
| } | |
| .drag-over { | |
| background-color: var(--bg-tertiary); | |
| border: 2px dashed var(--primary-color); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment