Spaces:
Running
Running
| .projects-container { | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| .toolbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| .toolbar-left h2 { margin: 0; font-size: 24px; font-weight: 400; } | |
| .toolbar-right { | |
| display: flex; | |
| gap: 16px; | |
| align-items: center; | |
| .search-field { width: 300px; } | |
| .view-toggle { border: 1px solid #e0e0e0; border-radius: 4px; } | |
| } | |
| } | |
| mat-progress-bar { margin-bottom: 20px; } | |
| .content { flex: 1; overflow: auto; } | |
| .projects-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); | |
| gap: 20px; | |
| padding-bottom: 20px; | |
| .project-card { | |
| transition: all 0.3s ease; | |
| &:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); } | |
| &.disabled { opacity: 0.7; .project-icon { background-color: #999 ; } } | |
| &.deleted { opacity: 0.5; background-color: #fafafa; } | |
| .project-icon { | |
| background-color: #3f51b5; | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| mat-icon { font-size: 24px; width: 24px; height: 24px; } | |
| } | |
| mat-card-title { font-size: 18px; font-weight: 500; } | |
| mat-card-subtitle { margin-top: 4px; } | |
| .project-info { | |
| margin-top: 16px; | |
| .info-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 8px; | |
| color: #666; | |
| mat-icon { font-size: 18px; width: 18px; height: 18px; color: #999; } | |
| span { font-size: 14px; } | |
| } | |
| } | |
| mat-card-actions { | |
| padding: 8px 16px; | |
| display: flex; | |
| justify-content: space-between; | |
| button:last-child { margin-left: auto; } | |
| } | |
| } | |
| } | |
| .table-container { | |
| background: white; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| overflow: hidden; | |
| .projects-table { | |
| width: 100%; | |
| .deleted-icon { color: #f44336; font-size: 16px; vertical-align: middle; margin-left: 8px; } | |
| .deleted-row { opacity: 0.5; background-color: #fafafa; } | |
| mat-chip { font-size: 12px; margin: 2px; } | |
| mat-chip-list { margin: 0; } | |
| } | |
| } | |
| .no-data { | |
| text-align: center; | |
| padding: 60px 20px; | |
| color: #999; | |
| mat-icon { font-size: 64px; height: 64px; width: 64px; margin-bottom: 16px; color: #e0e0e0; } | |
| p { font-size: 16px; margin: 0 0 24px 0; } | |
| } | |
| .message-container { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 1000; | |
| mat-card { | |
| min-width: 300px; | |
| &.success mat-card-content { color: #4caf50; } | |
| &.error mat-card-content { color: #f44336; } | |
| mat-card-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 16px; | |
| margin: 0; | |
| mat-icon { font-size: 20px; width: 20px; height: 20px; } | |
| } | |
| } | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .projects-container { | |
| .toolbar { | |
| .toolbar-left, .toolbar-right { width: 100%; justify-content: center; } | |
| .search-field { width: 100%; } | |
| } | |
| .projects-grid { grid-template-columns: 1fr; } | |
| } | |
| } |