.projects-container { display: flex; flex-direction: column; height: 100%; padding: 20px; .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 20px; flex-wrap: wrap; .toolbar-left { display: flex; align-items: center; gap: 16px; } .toolbar-right { display: flex; align-items: center; gap: 16px; } .search-field { width: 300px; } .view-toggle { border: 1px solid rgba(0, 0, 0, 0.12); 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; cursor: pointer; &:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); } &.disabled { opacity: 0.7; .project-icon { background-color: #999 !important; } } &.deleted { opacity: 0.5; background-color: #fafafa; } .project-icon { background-color: #3f51b5; color: white; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; 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: 12px; color: #666; &:last-child { margin-bottom: 0; } mat-icon { font-size: 18px; width: 18px; height: 18px; color: #999; vertical-align: middle; } .info-label { font-size: 13px; vertical-align: middle; line-height: 18px; } mat-checkbox { margin-left: 4px; vertical-align: middle; ::ng-deep .mat-mdc-checkbox-touch-target { height: 18px; } } .time-text { font-size: 12px; color: #999; } } } } } .projects-table { overflow: auto; mat-checkbox { vertical-align: middle; } .name-with-icon { display: flex; align-items: center; gap: 8px; .project-table-icon { color: #3f51b5; font-size: 20px; width: 20px; height: 20px; } .deleted-icon { margin-left: auto; color: #f44336; } } .action-buttons { display: flex; gap: 8px; button { min-width: auto; } } } .empty-state { text-align: center; padding: 60px 20px; mat-icon { font-size: 64px; width: 64px; height: 64px; color: #ccc; margin-bottom: 16px; } h3 { color: #666; 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; } } } } } // Material overrides for this component ::ng-deep { .mat-mdc-button-toggle-appearance-standard .mat-button-toggle-label-content { line-height: 36px; padding: 0 12px; } .mat-mdc-form-field-appearance-outline .mat-mdc-form-field-infix { padding: 12px 0; } .mat-mdc-text-field-wrapper.mdc-text-field--outlined { .mat-mdc-form-field-infix { min-height: auto; } } .mat-mdc-card { --mdc-elevated-card-container-color: white; --mdc-elevated-card-container-elevation: 0 2px 4px rgba(0,0,0,0.1); } } // Responsive adjustments @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; } } }