mirror of
https://github.com/a-mayb3/KanbanCloneAngular.git
synced 2026-03-21 09:55:37 +01:00
minor changes
This commit is contained in:
parent
cd041d04cd
commit
0811bf4224
GPG key ID:
293AAC4FED165CE3
15 changed files with 1096 additions and 447 deletions
|
|
@ -1,45 +1,45 @@
|
||||||
.collaborator-item {
|
.collaborator-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 0.75rem;
|
||||||
padding: 14px;
|
padding: 0.875rem;
|
||||||
border-radius: 10px;
|
border-radius: 0.625rem;
|
||||||
border: 1px solid #e5e7eb;
|
background-color: var(--secondary-color);
|
||||||
background-color: #f9fafb;
|
box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.collaborator-avatar {
|
.collaborator-avatar {
|
||||||
width: 36px;
|
width: 2.25rem;
|
||||||
height: 36px;
|
height: 2.25rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: #e0f2fe;
|
background-color: var(--avatar-bg-color);
|
||||||
color: #0369a1;
|
color: var(--primary-color);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collaborator-info h4 {
|
.collaborator-info h4 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 16px;
|
font-size: 1rem;
|
||||||
color: #111827;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.collaborator-info p {
|
.collaborator-info p {
|
||||||
margin: 2px 0 0 0;
|
margin: 0.125rem 0 0 0;
|
||||||
font-size: 13px;
|
font-size: 0.8125rem;
|
||||||
color: #6b7280;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-remove {
|
.btn-remove {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
width: 32px;
|
width: 2rem;
|
||||||
height: 32px;
|
height: 2rem;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
border: 1px solid #fecaca;
|
border: 0.0625rem solid var(--danger-border-color);
|
||||||
background: #ffffff;
|
background: var(--secondary-color);
|
||||||
color: #b91c1c;
|
color: var(--danger-text-color);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition:
|
transition:
|
||||||
|
|
@ -48,6 +48,33 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-remove:hover {
|
.btn-remove:hover {
|
||||||
background-color: #fee2e2;
|
background-color: var(--danger-bg-color-hover);
|
||||||
border-color: #fca5a5;
|
border-color: var(--danger-color-hover);
|
||||||
|
color: var(--danger-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive */
|
||||||
|
@media (max-width: 48rem) {
|
||||||
|
.collaborator-item {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collaborator-info h4 {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collaborator-info p {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
.collaborator-item {
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collaborator-avatar {
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,34 @@
|
||||||
.footer {
|
.footer {
|
||||||
padding: 24px 16px;
|
padding: 1.5rem 1rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #6b7280;
|
color: var(--text-color);
|
||||||
background-color: #f5f7fa;
|
background-color: var(--secondary-color);
|
||||||
border-top: 1px solid #e5e7eb;
|
border-top: 0.0625rem solid var(--shadow-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer p {
|
.footer p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive */
|
||||||
|
@media (max-width: 48rem) {
|
||||||
|
.footer {
|
||||||
|
padding: 1.25rem 1rem;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer p {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
.footer {
|
||||||
|
padding: 1rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer p {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
.header {
|
.header {
|
||||||
background: white;
|
background: var(--secondary-color);
|
||||||
padding: 20px 40px;
|
padding: 1.25rem 2.5rem;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0.125rem 0.25rem var(--shadow-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -9,8 +9,8 @@
|
||||||
|
|
||||||
.header h1 {
|
.header h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 24px;
|
font-size: 1.5rem;
|
||||||
color: #667eea;
|
color: var(--primary-color);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -26,25 +26,65 @@
|
||||||
.user-info {
|
.user-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 15px;
|
gap: 0.9375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.username {
|
.username {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #333;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-logout {
|
.btn-logout {
|
||||||
padding: 8px 20px;
|
padding: 0.5rem 1.25rem;
|
||||||
background-color: #667eea;
|
background-color: var(--primary-color);
|
||||||
color: white;
|
color: var(--secondary-color);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 6px;
|
border-radius: 0.375rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-logout:hover {
|
.btn-logout:hover {
|
||||||
background-color: #5568d3;
|
background-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive */
|
||||||
|
@media (max-width: 48rem) {
|
||||||
|
.header {
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-logout {
|
||||||
|
width: fit-content;
|
||||||
|
padding: 0.625rem 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
.header {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
.project-item {
|
.project-item {
|
||||||
background: white;
|
background: var(--secondary-color);
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
padding: 16px;
|
padding: 1rem;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0.125rem 0.25rem var(--shadow-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
border-left: 4px solid #667eea;
|
border-left: 0.25rem solid var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-item.is-disabled {
|
.project-item.is-disabled {
|
||||||
|
|
@ -14,8 +14,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-item:hover {
|
.project-item:hover {
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 0.25rem 0.75rem var(--shadow-color);
|
||||||
transform: translateY(-2px);
|
transform: translateY(-0.125rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header */
|
/* Header */
|
||||||
|
|
@ -23,20 +23,20 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-title {
|
.project-title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 18px;
|
font-size: 1.375rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #2c3e50;
|
color: var(--text-color);
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-actions {
|
.project-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 0.5rem;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.3s;
|
transition: opacity 0.3s;
|
||||||
}
|
}
|
||||||
|
|
@ -49,25 +49,25 @@
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 16px;
|
font-size: 1rem;
|
||||||
padding: 4px;
|
padding: 0.25rem;
|
||||||
border-radius: 4px;
|
border-radius: 0.25rem;
|
||||||
transition: background-color 0.2s;
|
transition: background-color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-icon:hover {
|
.btn-icon:hover {
|
||||||
background-color: #f5f7fa;
|
background-color: var(--background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-delete:hover {
|
.btn-delete:hover {
|
||||||
background-color: #fee;
|
background-color: var(--danger-bg-color-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Description */
|
/* Description */
|
||||||
.project-description {
|
.project-description {
|
||||||
margin: 0 0 12px 0;
|
margin: 0 0 0.75rem 0;
|
||||||
color: #7f8c8d;
|
color: var(--text-color);
|
||||||
font-size: 14px;
|
font-size: 1rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -81,9 +81,9 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: .5rem;
|
gap: 0.5rem;
|
||||||
font-size: 13px;
|
font-size: 0.9375rem;
|
||||||
color: #4b5563;
|
color: var(--text-color);
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -91,28 +91,71 @@
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #6b7280;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.completion-value {
|
.completion-value {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #10b981;
|
color: var(--add-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Footer */
|
/* Footer */
|
||||||
.project-footer {
|
.project-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
gap: 0.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Project ID */
|
/* Project ID */
|
||||||
.project-id {
|
.project-id {
|
||||||
padding: 4px 12px;
|
padding: 0.25rem 0.75rem;
|
||||||
border-radius: 12px;
|
border-radius: 0.75rem;
|
||||||
font-size: 12px;
|
font-size: 0.75rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
background-color: #e8f4f8;
|
background-color: var(--secondary-color);
|
||||||
color: #2980b9;
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive */
|
||||||
|
@media (max-width: 48rem) {
|
||||||
|
.project-item {
|
||||||
|
padding: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-description {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-stats {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
.project-item {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-title {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-id {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
.task-item {
|
.task-item {
|
||||||
border: 1px solid #e5e7eb;
|
border: 0.0625rem solid var(--secondary-color);
|
||||||
border-radius: 10px;
|
border-radius: 0.625rem;
|
||||||
padding: 16px;
|
padding: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 16px;
|
gap: 1rem;
|
||||||
background-color: #f9fafb;
|
background-color: var(--secondary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-meta {
|
.task-meta {
|
||||||
|
|
@ -15,36 +15,36 @@
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 6px;
|
gap: 0.375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-label {
|
.status-label {
|
||||||
font-size: 12px;
|
font-size: 0.75rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #4b5563;
|
color: var(--text-color);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-select {
|
.status-select {
|
||||||
padding: 6px 10px;
|
padding: 0.375rem 0.625rem;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
border: 1px solid #e5e7eb;
|
border: 0.0625rem solid var(--secondary-color);
|
||||||
background-color: #ffffff;
|
background-color: var(--secondary-color);
|
||||||
font-size: 12px;
|
font-size: 0.75rem;
|
||||||
color: #374151;
|
color: var(--text-color);
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height: 32px;
|
height: 2rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-remove {
|
.btn-remove {
|
||||||
width: 32px;
|
width: 2rem;
|
||||||
height: 32px;
|
height: 2rem;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
border: 1px solid #fecaca;
|
border: 0.0625rem solid var(--danger-border-color);
|
||||||
background: #ffffff;
|
background: var(--secondary-color);
|
||||||
color: #b91c1c;
|
color: var(--danger-text-color);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition:
|
transition:
|
||||||
|
|
@ -53,19 +53,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-remove:hover {
|
.btn-remove:hover {
|
||||||
background-color: #fee2e2;
|
background-color: var(--danger-bg-color-hover);
|
||||||
border-color: #fca5a5;
|
border-color: var(--danger-color-hover);
|
||||||
|
color: var(--danger-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-edit {
|
.btn-edit {
|
||||||
height: 32px;
|
height: 2rem;
|
||||||
padding: 0 12px;
|
padding: 0 0.75rem;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
border: 1px solid #cbd5f0;
|
border: 0.0625rem solid var(--secondary-color);
|
||||||
background: #ffffff;
|
background: var(--secondary-color);
|
||||||
color: #334155;
|
color: var(--text-color);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 12px;
|
font-size: 0.75rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition:
|
transition:
|
||||||
background-color 0.2s ease,
|
background-color 0.2s ease,
|
||||||
|
|
@ -73,19 +74,19 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-edit:hover {
|
.btn-edit:hover {
|
||||||
background-color: #f1f5f9;
|
background-color: var(--background-color);
|
||||||
border-color: #94a3b8;
|
border-color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-info h4 {
|
.task-info h4 {
|
||||||
margin: 0 0 6px 0;
|
margin: 0 0 0.375rem 0;
|
||||||
color: #111827;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-info p {
|
.task-info p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #6b7280;
|
color: var(--text-color);
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-info {
|
.task-info {
|
||||||
|
|
@ -94,35 +95,75 @@
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
padding: 4px 10px;
|
padding: 0.25rem 0.625rem;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
font-size: 12px;
|
font-size: 0.75rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-pending {
|
.status-pending {
|
||||||
background-color: #fde68a;
|
background-color: var(--secondary-color);
|
||||||
color: #92400e;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-in_progress {
|
.status-in_progress {
|
||||||
background-color: #bfdbfe;
|
background-color: var(--primary-color);
|
||||||
color: #1d4ed8;
|
color: var(--secondary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-completed {
|
.status-completed {
|
||||||
background-color: #bbf7d0;
|
background-color: var(--add-color);
|
||||||
color: #15803d;
|
color: var(--secondary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-stashed {
|
.status-stashed {
|
||||||
background-color: #e5e7eb;
|
background-color: var(--background-color);
|
||||||
color: #374151;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-failed {
|
.status-failed {
|
||||||
background-color: #fecaca;
|
background-color: var(--danger-bg-color);
|
||||||
color: #b91c1c;
|
color: var(--danger-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive */
|
||||||
|
@media (max-width: 48rem) {
|
||||||
|
.task-item {
|
||||||
|
padding: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-header h3 {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-description {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-footer {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-actions {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
.task-item {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-header h3 {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge {
|
||||||
|
font-size: 0.625rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
.collaborator-add {
|
.collaborator-add {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: #f5f7fa;
|
background-color: var(--background-color);
|
||||||
padding: 40px;
|
padding: 2.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
@ -9,53 +9,53 @@
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 520px;
|
max-width: 32.5rem;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
background: white;
|
background: var(--secondary-color);
|
||||||
border-radius: 12px;
|
border-radius: 0.75rem;
|
||||||
padding: 32px;
|
padding: 2rem;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card h1 {
|
.card h1 {
|
||||||
margin: 0 0 24px 0;
|
margin: 0 0 1.5rem 0;
|
||||||
font-size: 28px;
|
font-size: 1.75rem;
|
||||||
color: #2c3e50;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group label {
|
.form-group label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #374151;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input {
|
.form-group input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px 14px;
|
padding: 0.75rem 0.875rem;
|
||||||
border: 1px solid #e5e7eb;
|
border: 0.0625rem solid var(--secondary-color);
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 12px;
|
gap: 0.75rem;
|
||||||
margin-top: 12px;
|
margin-top: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
padding: 10px 16px;
|
padding: 0.625rem 1rem;
|
||||||
background-color: #10b981;
|
background-color: var(--add-color);
|
||||||
color: #fff;
|
color: var(--secondary-color);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -66,19 +66,62 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
padding: 10px 16px;
|
padding: 0.625rem 1rem;
|
||||||
background: none;
|
background: none;
|
||||||
border: 1px solid #cbd5f0;
|
border: 0.0625rem solid var(--secondary-color);
|
||||||
color: #334155;
|
color: var(--text-color);
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 1rem;
|
||||||
padding: 12px;
|
padding: 0.75rem;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
background-color: #fee2e2;
|
background-color: var(--danger-bg-color);
|
||||||
color: #b91c1c;
|
color: var(--danger-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive */
|
||||||
|
@media (max-width: 48rem) {
|
||||||
|
.collaborator-add {
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary,
|
||||||
|
.btn-secondary {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
.collaborator-add {
|
||||||
|
padding: 1rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h1 {
|
||||||
|
font-size: 1.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,107 +1,150 @@
|
||||||
.home-container {
|
.home-container {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: #f5f7fa;
|
background-color: var(--background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 40px;
|
padding: 2.5rem;
|
||||||
max-width: 1400px;
|
max-width: 87.5rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.welcome-message {
|
.welcome-message {
|
||||||
background: white;
|
background: var(--secondary-color);
|
||||||
padding: 40px;
|
padding: 2.5rem;
|
||||||
border-radius: 12px;
|
border-radius: 0.75rem;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 1.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.welcome-header {
|
.welcome-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 16px;
|
gap: 1rem;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.welcome-message h2 {
|
.welcome-message h2 {
|
||||||
margin: 0 0 10px 0;
|
margin: 0 0 0.625rem 0;
|
||||||
color: #333;
|
color: var(--text-color);
|
||||||
font-size: 28px;
|
font-size: 1.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-create {
|
.btn-create {
|
||||||
padding: 10px 18px;
|
padding: 0.625rem 1.125rem;
|
||||||
background-color: #10b981;
|
background-color: var(--add-color);
|
||||||
color: #fff;
|
color: var(--secondary-color);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.2s ease;
|
transition: background-color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-create:hover {
|
.btn-create:hover {
|
||||||
background-color: #059669;
|
background-color: var(--add-color-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.welcome-message p {
|
.welcome-message p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #666;
|
color: var(--text-color);
|
||||||
font-size: 16px;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Projects List */
|
/* Projects List */
|
||||||
.projects-grid {
|
.projects-grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 1rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading,
|
.loading,
|
||||||
.error-state,
|
.error-state,
|
||||||
.loading-state {
|
.loading-state {
|
||||||
background: white;
|
background: var(--secondary-color);
|
||||||
padding: 30px 24px;
|
padding: 1.875rem 1.5rem;
|
||||||
border-radius: 12px;
|
border-radius: 0.75rem;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-state p {
|
.error-state p {
|
||||||
color: #c0392b;
|
color: var(--danger-text-color);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading p {
|
.loading p {
|
||||||
color: #666;
|
color: var(--text-color);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-projects {
|
.no-projects {
|
||||||
background: white;
|
background: var(--secondary-color);
|
||||||
padding: 60px 40px;
|
padding: 3.75rem 2.5rem;
|
||||||
border-radius: 12px;
|
border-radius: 0.75rem;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-projects p {
|
.no-projects p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #95a5a6;
|
color: var(--text-color);
|
||||||
font-size: 16px;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-link {
|
.create-link {
|
||||||
color: #10b981;
|
color: var(--add-color);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
text-underline-offset: 3px;
|
text-underline-offset: 0.1875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive */
|
||||||
|
@media (max-width: 48rem) {
|
||||||
|
.content {
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-message {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-message h2 {
|
||||||
|
font-size: 1.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-create {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
.content {
|
||||||
|
padding: 1rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-message {
|
||||||
|
padding: 1.25rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-message h2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-message p {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-link:hover {
|
.create-link:hover {
|
||||||
color: #059669;
|
color: var(--add-color-hover);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,95 +3,95 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||||
padding: 20px;
|
padding: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-card {
|
.login-card {
|
||||||
background: white;
|
background: var(--secondary-color);
|
||||||
border-radius: 12px;
|
border-radius: 0.75rem;
|
||||||
padding: 40px;
|
padding: 2.5rem;
|
||||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0.625rem 2.5rem var(--shadow-color);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 400px;
|
max-width: 25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-card h1 {
|
.login-card h1 {
|
||||||
font-size: 24px;
|
font-size: 1.5rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #667eea;
|
color: var(--primary-color);
|
||||||
margin: 0 0 10px 0;
|
margin: 0 0 0.625rem 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-card h2 {
|
.login-card h2 {
|
||||||
font-size: 28px;
|
font-size: 1.75rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: var(--text-color);
|
||||||
margin: 0 0 30px 0;
|
margin: 0 0 1.875rem 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-message {
|
.error-message {
|
||||||
background-color: #fee;
|
background-color: var(--danger-bg-color);
|
||||||
color: #c33;
|
color: var(--danger-text-color);
|
||||||
padding: 12px;
|
padding: 0.75rem;
|
||||||
border-radius: 6px;
|
border-radius: 0.375rem;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 1.25rem;
|
||||||
border: 1px solid #fcc;
|
border: 0.0625rem solid var(--danger-border-color);
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group label {
|
.form-group label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 0.5rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #333;
|
color: var(--text-color);
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input {
|
.form-group input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px 16px;
|
padding: 0.75rem 1rem;
|
||||||
border: 2px solid #e1e8ed;
|
border: 0.125rem solid var(--secondary-color);
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-size: 15px;
|
font-size: 0.9375rem;
|
||||||
transition: border-color 0.3s;
|
transition: border-color 0.3s;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input:focus {
|
.form-group input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #667eea;
|
border-color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input::placeholder {
|
.form-group input::placeholder {
|
||||||
color: #aab8c2;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 14px;
|
padding: 0.875rem;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||||
color: white;
|
color: var(--secondary-color);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-size: 16px;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition:
|
transition:
|
||||||
transform 0.2s,
|
transform 0.2s,
|
||||||
box-shadow 0.2s;
|
box-shadow 0.2s;
|
||||||
margin-top: 10px;
|
margin-top: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:hover:not(:disabled) {
|
.btn-primary:hover:not(:disabled) {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-0.125rem);
|
||||||
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
|
box-shadow: 0 0.3125rem 1.25rem var(--shadow-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:active:not(:disabled) {
|
.btn-primary:active:not(:disabled) {
|
||||||
|
|
@ -104,14 +104,57 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.register-link {
|
.register-link {
|
||||||
margin: 16px 0 0 0;
|
margin: 1rem 0 0 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
color: #4b5563;
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive */
|
||||||
|
@media (max-width: 48rem) {
|
||||||
|
.login-container {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card {
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card h1 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
.login-container {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card {
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card h1 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card h2 {
|
||||||
|
font-size: 1.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input {
|
||||||
|
padding: 0.625rem 0.875rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.register-link a {
|
.register-link a {
|
||||||
color: #667eea;
|
color: var(--primary-color);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
.create-project {
|
.create-project {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: #f5f7fa;
|
background-color: var(--background-color);
|
||||||
padding: 40px;
|
padding: 2.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
@ -9,38 +9,38 @@
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 640px;
|
max-width: 40rem;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
background: white;
|
background: var(--secondary-color);
|
||||||
border-radius: 12px;
|
border-radius: 0.75rem;
|
||||||
padding: 32px;
|
padding: 2rem;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card h1 {
|
.card h1 {
|
||||||
margin: 0 0 24px 0;
|
margin: 0 0 1.5rem 0;
|
||||||
font-size: 28px;
|
font-size: 1.75rem;
|
||||||
color: #2c3e50;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group label {
|
.form-group label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #374151;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input,
|
.form-group input,
|
||||||
.form-group textarea {
|
.form-group textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px 14px;
|
padding: 0.75rem 0.875rem;
|
||||||
border: 1px solid #e5e7eb;
|
border: 0.0625rem solid var(--secondary-color);
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -51,16 +51,16 @@
|
||||||
.actions {
|
.actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 12px;
|
gap: 0.75rem;
|
||||||
margin-top: 12px;
|
margin-top: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
padding: 10px 16px;
|
padding: 0.625rem 1rem;
|
||||||
background-color: #10b981;
|
background-color: var(--add-color);
|
||||||
color: #fff;
|
color: var(--secondary-color);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -71,19 +71,63 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
padding: 10px 16px;
|
padding: 0.625rem 1rem;
|
||||||
background: none;
|
background: none;
|
||||||
border: 1px solid #cbd5f0;
|
border: 0.0625rem solid var(--secondary-color);
|
||||||
color: #334155;
|
color: var(--text-color);
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 1rem;
|
||||||
padding: 12px;
|
padding: 0.75rem;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
background-color: #fee2e2;
|
background-color: var(--danger-bg-color);
|
||||||
color: #b91c1c;
|
color: var(--danger-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive */
|
||||||
|
@media (max-width: 48rem) {
|
||||||
|
.create-project {
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary,
|
||||||
|
.btn-secondary {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
.create-project {
|
||||||
|
padding: 1rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h1 {
|
||||||
|
font-size: 1.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group textarea {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,12 +11,12 @@
|
||||||
.title h2 {
|
.title h2 {
|
||||||
margin: 0 0 0.375rem 0;
|
margin: 0 0 0.375rem 0;
|
||||||
font-size: 1.625rem;
|
font-size: 1.625rem;
|
||||||
color: #1f2933;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.title p {
|
.title p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #6b7280;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-card,
|
.project-card,
|
||||||
|
|
@ -27,10 +27,10 @@
|
||||||
.error-state,
|
.error-state,
|
||||||
.empty-state {
|
.empty-state {
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
background: #ffffff;
|
background: var(--secondary-color);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 0.75rem;
|
border-radius: 0.75rem;
|
||||||
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
|
box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-card h2 {
|
.project-card h2 {
|
||||||
|
|
@ -39,18 +39,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.danger-zone {
|
.danger-zone {
|
||||||
border: 0.0625rem solid #fee2e2;
|
border: 0.0625rem solid var(--danger-border-color);
|
||||||
background: #fff5f5;
|
background: var(--danger-bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.danger-header h3 {
|
.danger-header h3 {
|
||||||
margin: 0 0 0.375rem 0;
|
margin: 0 0 0.375rem 0;
|
||||||
color: #b91c1c;
|
color: var(--danger-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.danger-header p {
|
.danger-header p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #7f1d1d;
|
color: var(--danger-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.danger-actions {
|
.danger-actions {
|
||||||
|
|
@ -67,19 +67,19 @@
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 0.625rem;
|
border-radius: 0.625rem;
|
||||||
background: #ffffff;
|
background: var(--secondary-color);
|
||||||
border: 0.0625rem solid #fecaca;
|
border: 0.0625rem solid var(--danger-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.danger-item h4 {
|
.danger-item h4 {
|
||||||
margin: 0 0 0.25rem 0;
|
margin: 0 0 0.25rem 0;
|
||||||
color: #7f1d1d;
|
color: var(--danger-text-color);
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.danger-item p {
|
.danger-item p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #991b1b;
|
color: var(--danger-text-color);
|
||||||
font-size: 0.8125rem;
|
font-size: 0.8125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -98,28 +98,28 @@
|
||||||
|
|
||||||
.btn-danger {
|
.btn-danger {
|
||||||
border: none;
|
border: none;
|
||||||
background-color: #dc2626;
|
background-color: var(--danger-color);
|
||||||
color: #ffffff;
|
color: var(--secondary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-danger:hover {
|
.btn-danger:hover {
|
||||||
background-color: #b91c1c;
|
background-color: var(--danger-color-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-danger-outline {
|
.btn-danger-outline {
|
||||||
border: 0.0625rem solid #fca5a5;
|
border: 0.0625rem solid var(--danger-border-color);
|
||||||
background-color: #ffffff;
|
background-color: var(--secondary-color);
|
||||||
color: #b91c1c;
|
color: var(--danger-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-danger-outline:hover {
|
.btn-danger-outline:hover {
|
||||||
border-color: #f87171;
|
border-color: var(--danger-color-hover);
|
||||||
background-color: #fee2e2;
|
background-color: var(--danger-bg-color-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #4b5563;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tasks-header,
|
.tasks-header,
|
||||||
|
|
@ -139,7 +139,7 @@
|
||||||
|
|
||||||
.collaborators-count {
|
.collaborators-count {
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
color: #6b7280;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.collaborators-grid {
|
.collaborators-grid {
|
||||||
|
|
@ -157,8 +157,8 @@
|
||||||
padding: 0.5rem 0.875rem;
|
padding: 0.5rem 0.875rem;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: #10b981;
|
background-color: var(--add-color);
|
||||||
color: #ffffff;
|
color: var(--secondary-color);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.2s ease;
|
transition: background-color 0.2s ease;
|
||||||
|
|
@ -170,8 +170,8 @@
|
||||||
padding: 0.5rem 0.875rem;
|
padding: 0.5rem 0.875rem;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: #10b981;
|
background-color: var(--add-color);
|
||||||
color: #ffffff;
|
color: var(--secondary-color);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.2s ease;
|
transition: background-color 0.2s ease;
|
||||||
|
|
@ -180,12 +180,12 @@
|
||||||
|
|
||||||
.btn-add-task:hover,
|
.btn-add-task:hover,
|
||||||
.btn-add-collaborator:hover {
|
.btn-add-collaborator:hover {
|
||||||
background-color: #059669;
|
background-color: var(--add-color-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tasks-count {
|
.tasks-count {
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
color: #6b7280;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tasks-list {
|
.tasks-list {
|
||||||
|
|
@ -223,25 +223,114 @@
|
||||||
.error-state p,
|
.error-state p,
|
||||||
.empty-state p {
|
.empty-state p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #4b5563;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-state p {
|
.error-state p {
|
||||||
color: #b91c1c;
|
color: var(--danger-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 60rem) {
|
@media (max-width: 60rem) {
|
||||||
.content {
|
.content {
|
||||||
width: 90vw;
|
width: 90vw;
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards-row {
|
.cards-row {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title h2 {
|
||||||
|
font-size: 1.375rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 48rem) {
|
||||||
|
.content {
|
||||||
|
width: 95%;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 1.25rem 1rem;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title h2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card,
|
||||||
|
.collaborators-card,
|
||||||
|
.tasks-card,
|
||||||
|
.danger-zone {
|
||||||
|
padding: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tasks-header,
|
||||||
|
.collaborators-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tasks-header h4,
|
||||||
|
.collaborators-header h4 {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-add-task,
|
||||||
|
.btn-add-collaborator {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.danger-item {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger,
|
||||||
|
.btn-danger-outline {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 37.5rem) {
|
@media (max-width: 37.5rem) {
|
||||||
.content {
|
.content {
|
||||||
max-width: 95%;
|
width: 95%;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 1rem 0.75rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title h2 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title p,
|
||||||
|
.description {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card,
|
||||||
|
.collaborators-card,
|
||||||
|
.tasks-card,
|
||||||
|
.danger-zone {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tasks-header h4,
|
||||||
|
.collaborators-header h4 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.danger-item h4 {
|
||||||
|
font-size: 1.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.danger-item p {
|
||||||
|
font-size: 0.75rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
.edit-project {
|
.edit-project {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: #f5f7fa;
|
background-color: var(--background-color);
|
||||||
padding: 40px;
|
padding: 2.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
@ -9,38 +9,38 @@
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 640px;
|
max-width: 40rem;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
background: white;
|
background: var(--secondary-color);
|
||||||
border-radius: 12px;
|
border-radius: 0.75rem;
|
||||||
padding: 32px;
|
padding: 2rem;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card h1 {
|
.card h1 {
|
||||||
margin: 0 0 24px 0;
|
margin: 0 0 1.5rem 0;
|
||||||
font-size: 28px;
|
font-size: 1.75rem;
|
||||||
color: #2c3e50;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group label {
|
.form-group label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #374151;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input,
|
.form-group input,
|
||||||
.form-group textarea {
|
.form-group textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px 14px;
|
padding: 0.75rem 0.875rem;
|
||||||
border: 1px solid #e5e7eb;
|
border: 0.0625rem solid var(--secondary-color);
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -51,44 +51,92 @@
|
||||||
.actions {
|
.actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 12px;
|
gap: 0.75rem;
|
||||||
margin-top: 12px;
|
margin-top: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
padding: 10px 16px;
|
padding: 0.625rem 1rem;
|
||||||
background-color: #10b981;
|
background-color: var(--add-color);
|
||||||
color: #fff;
|
color: var(--secondary-color);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:not(:disabled) {
|
||||||
|
background-color: var(--danger-secondary-color-hover);
|
||||||
|
}
|
||||||
|
|
||||||
.btn-primary:disabled {
|
.btn-primary:disabled {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
padding: 10px 16px;
|
padding: 0.625rem 1rem;
|
||||||
background: none;
|
background: none;
|
||||||
border: 1px solid #cbd5f0;
|
border: 0.0625rem solid var(--secondary-color);
|
||||||
color: #334155;
|
color: var(--text-color);
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 1rem;
|
||||||
padding: 12px;
|
padding: 0.75rem;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
background-color: #fee2e2;
|
background-color: var(--danger-bg-color);
|
||||||
color: #b91c1c;
|
color: var(--danger-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading {
|
.loading {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #6b7280;
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive */
|
||||||
|
@media (max-width: 48rem) {
|
||||||
|
.edit-project {
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary,
|
||||||
|
.btn-secondary {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
.edit-project {
|
||||||
|
padding: 1rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h1 {
|
||||||
|
font-size: 1.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group textarea {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,95 +3,95 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||||
padding: 20px;
|
padding: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.register-card {
|
.register-card {
|
||||||
background: white;
|
background: var(--secondary-color);
|
||||||
border-radius: 12px;
|
border-radius: 0.75rem;
|
||||||
padding: 40px;
|
padding: 2.5rem;
|
||||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0.625rem 2.5rem var(--shadow-color);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 400px;
|
max-width: 25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.register-card h1 {
|
.register-card h1 {
|
||||||
font-size: 24px;
|
font-size: 1.5rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #667eea;
|
color: var(--primary-color);
|
||||||
margin: 0 0 10px 0;
|
margin: 0 0 0.625rem 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.register-card h2 {
|
.register-card h2 {
|
||||||
font-size: 28px;
|
font-size: 1.75rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: var(--text-color);
|
||||||
margin: 0 0 30px 0;
|
margin: 0 0 1.875rem 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-message {
|
.error-message {
|
||||||
background-color: #fee;
|
background-color: var(--danger-bg-color);
|
||||||
color: #c33;
|
color: var(--danger-text-color);
|
||||||
padding: 12px;
|
padding: 0.75rem;
|
||||||
border-radius: 6px;
|
border-radius: 0.375rem;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 1.25rem;
|
||||||
border: 1px solid #fcc;
|
border: 0.0625rem solid var(--danger-border-color);
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group label {
|
.form-group label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 0.5rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #333;
|
color: var(--text-color);
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input {
|
.form-group input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px 16px;
|
padding: 0.75rem 1rem;
|
||||||
border: 2px solid #e1e8ed;
|
border: 0.125rem solid var(--secondary-color);
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-size: 15px;
|
font-size: 0.9375rem;
|
||||||
transition: border-color 0.3s;
|
transition: border-color 0.3s;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input:focus {
|
.form-group input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #667eea;
|
border-color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input::placeholder {
|
.form-group input::placeholder {
|
||||||
color: #aab8c2;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 14px;
|
padding: 0.875rem;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||||
color: white;
|
color: var(--secondary-color);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-size: 16px;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition:
|
transition:
|
||||||
transform 0.2s,
|
transform 0.2s,
|
||||||
box-shadow 0.2s;
|
box-shadow 0.2s;
|
||||||
margin-top: 10px;
|
margin-top: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:hover:not(:disabled) {
|
.btn-primary:hover:not(:disabled) {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-0.125rem);
|
||||||
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
|
box-shadow: 0 0.3125rem 1.25rem var(--shadow-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:active:not(:disabled) {
|
.btn-primary:active:not(:disabled) {
|
||||||
|
|
@ -104,14 +104,57 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-link {
|
.login-link {
|
||||||
margin: 16px 0 0 0;
|
margin: 1rem 0 0 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
color: #4b5563;
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive */
|
||||||
|
@media (max-width: 48rem) {
|
||||||
|
.register-container {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-card {
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-card h1 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-card h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
.register-container {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-card {
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-card h1 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-card h2 {
|
||||||
|
font-size: 1.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input {
|
||||||
|
padding: 0.625rem 0.875rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-link a {
|
.login-link a {
|
||||||
color: #667eea;
|
color: var(--primary-color);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
.create-task {
|
.create-task {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: #f5f7fa;
|
background-color: var(--background-color);
|
||||||
padding: 40px;
|
padding: 2.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
@ -9,41 +9,41 @@
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 640px;
|
max-width: 40rem;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
background: white;
|
background: var(--secondary-color);
|
||||||
border-radius: 12px;
|
border-radius: 0.75rem;
|
||||||
padding: 32px;
|
padding: 2rem;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card h1 {
|
.card h1 {
|
||||||
margin: 0 0 24px 0;
|
margin: 0 0 1.5rem 0;
|
||||||
font-size: 28px;
|
font-size: 1.75rem;
|
||||||
color: #2c3e50;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group label {
|
.form-group label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #374151;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input,
|
.form-group input,
|
||||||
.form-group textarea,
|
.form-group textarea,
|
||||||
.form-group select {
|
.form-group select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px 14px;
|
padding: 0.75rem 0.875rem;
|
||||||
border: 1px solid #e5e7eb;
|
border: 0.0625rem solid var(--secondary-color);
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: #ffffff;
|
background-color: var(--secondary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group textarea {
|
.form-group textarea {
|
||||||
|
|
@ -53,16 +53,16 @@
|
||||||
.actions {
|
.actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 12px;
|
gap: 0.75rem;
|
||||||
margin-top: 12px;
|
margin-top: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
padding: 10px 16px;
|
padding: 0.625rem 1rem;
|
||||||
background-color: #10b981;
|
background-color: var(--add-color);
|
||||||
color: #fff;
|
color: var(--secondary-color);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -73,19 +73,64 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
padding: 10px 16px;
|
padding: 0.625rem 1rem;
|
||||||
background: none;
|
background: none;
|
||||||
border: 1px solid #cbd5f0;
|
border: 0.0625rem solid var(--secondary-color);
|
||||||
color: #334155;
|
color: var(--text-color);
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 1rem;
|
||||||
padding: 12px;
|
padding: 0.75rem;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
background-color: #fee2e2;
|
background-color: var(--danger-bg-color);
|
||||||
color: #b91c1c;
|
color: var(--danger-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive */
|
||||||
|
@media (max-width: 48rem) {
|
||||||
|
.create-task {
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary,
|
||||||
|
.btn-secondary {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
.create-task {
|
||||||
|
padding: 1rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h1 {
|
||||||
|
font-size: 1.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group textarea,
|
||||||
|
.form-group select {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
.create-task {
|
.create-task {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: #f5f7fa;
|
background-color: var(--background-color);
|
||||||
padding: 40px;
|
padding: 2.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
@ -9,41 +9,41 @@
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 640px;
|
max-width: 40rem;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
background: white;
|
background: var(--secondary-color);
|
||||||
border-radius: 12px;
|
border-radius: 0.75rem;
|
||||||
padding: 32px;
|
padding: 2rem;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card h1 {
|
.card h1 {
|
||||||
margin: 0 0 24px 0;
|
margin: 0 0 1.5rem 0;
|
||||||
font-size: 28px;
|
font-size: 1.75rem;
|
||||||
color: #2c3e50;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group label {
|
.form-group label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #374151;
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input,
|
.form-group input,
|
||||||
.form-group textarea,
|
.form-group textarea,
|
||||||
.form-group select {
|
.form-group select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px 14px;
|
padding: 0.75rem 0.875rem;
|
||||||
border: 1px solid #e5e7eb;
|
border: 0.0625rem solid var(--secondary-color);
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: #ffffff;
|
background-color: var(--secondary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group textarea {
|
.form-group textarea {
|
||||||
|
|
@ -53,16 +53,16 @@
|
||||||
.actions {
|
.actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 12px;
|
gap: 0.75rem;
|
||||||
margin-top: 12px;
|
margin-top: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
padding: 10px 16px;
|
padding: 0.625rem 1rem;
|
||||||
background-color: #10b981;
|
background-color: var(--add-color);
|
||||||
color: #fff;
|
color: var(--secondary-color);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -73,27 +73,72 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
padding: 10px 16px;
|
padding: 0.625rem 1rem;
|
||||||
background: none;
|
background: none;
|
||||||
border: 1px solid #cbd5f0;
|
border: 0.0625rem solid var(--secondary-color);
|
||||||
color: #334155;
|
color: var(--text-color);
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 1rem;
|
||||||
padding: 12px;
|
padding: 0.75rem;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
background-color: #fee2e2;
|
background-color: var(--danger-bg-color);
|
||||||
color: #b91c1c;
|
color: var(--danger-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading {
|
.loading {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 1rem;
|
||||||
padding: 12px;
|
padding: 0.75rem;
|
||||||
border-radius: 8px;
|
border-radius: 0.5rem;
|
||||||
background-color: #e2e8f0;
|
background-color: var(--secondary-color);
|
||||||
color: #334155;
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive */
|
||||||
|
@media (max-width: 48rem) {
|
||||||
|
.create-task {
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary,
|
||||||
|
.btn-secondary {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
.create-task {
|
||||||
|
padding: 1rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h1 {
|
||||||
|
font-size: 1.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group textarea,
|
||||||
|
.form-group select {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,51 @@
|
||||||
/* You can add global styles to this file, and also import other style files */
|
/* You can add global styles to this file, and also import other style files */
|
||||||
:root{
|
:root {
|
||||||
--background-color: whitesmoke;
|
--background-color: whitesmoke;
|
||||||
--primary-color: #4a90e2;
|
--primary-color: #4a90e2;
|
||||||
--secondary-color: #f5f5f5;
|
--secondary-color: #f5f5f5;
|
||||||
--text-color: black;
|
--text-color: black;
|
||||||
|
|
||||||
|
--shadow-color: rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
--avatar-bg-color: #e0f2fe;
|
||||||
|
|
||||||
|
--danger-color: #e74c3c;
|
||||||
|
--danger-color-hover: #c0392b;
|
||||||
|
--danger-secondary-color-hover: #c0392b88;
|
||||||
|
--danger-outline-color: #e74c3c;
|
||||||
|
--danger-bg-color: #fbe9e7;
|
||||||
|
--danger-bg-color-hover: #f6d0cb;
|
||||||
|
--danger-text-color: #8e2720;
|
||||||
|
--danger-border-color: #f2b8b5;
|
||||||
|
|
||||||
|
--add-color: #2ecc71;
|
||||||
|
--add-color-hover: #27ae60;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
|
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Responsive Global Styles */
|
||||||
|
@media (max-width: 48rem) {
|
||||||
|
body {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
body {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue