Spaces:
Running
Running
File size: 3,301 Bytes
f7548aa 0866ece f7548aa 0866ece f7548aa 0866ece 73b121e f7548aa 0866ece f7548aa 73b121e 0866ece f7548aa 0866ece f7548aa 0866ece f7548aa 0866ece f7548aa 73b121e f7548aa 0866ece f7548aa 0866ece f7548aa 73b121e 0866ece 73b121e 0866ece 73b121e f7548aa 0866ece f7548aa 0866ece f7548aa 9eba098 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
.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 !important; } }
&.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; }
}
} |