/**
* EditProjectModal Styles
*
* Requirements: 19.5
* - Apply consistent styling with CreateProjectModal
*/
/* Overlay - centers the modal on viewport */
.overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 200000;
padding: 0 var(--space-4, 16px);
}
/* Backdrop with blur effect */
.backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* Modal container with glassmorphism */
.modal {
position: relative;
width: 100%;
max-width: 500px;
background: var(--bg-surface);
border: 1px solid var(--glass-border, var(--border));
border-radius: var(--border-radius, 12px);
box-shadow:
var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.3)),
0 0 0 1px rgba(255, 255, 255, 0.05);
overflow: hidden;
}
/* Glassmorphism effect overlay */
.modal::before {
content: '';
position: absolute;
inset: 0;
background: var(--glass-bg, rgba(255, 255, 255, 0.1));
opacity: var(--glass-opacity, 0.7);
backdrop-filter: blur(var(--glass-blur, 10px));
-webkit-backdrop-filter: blur(var(--glass-blur, 10px));
pointer-events: none;
z-index: 0;
}
/* Ensure content is above the glass effect */
.modal > * {
position: relative;
z-index: 1;
}
/* Header */
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-6, 24px);
border-bottom: 1px solid var(--border);
}
/* Form */
.form {
padding: var(--space-6, 24px);
display: flex;
flex-direction: column;
gap: var(--space-4, 16px);
}
/* Description textarea field */
.textareaField {
display: flex;
flex-direction: column;
gap: var(--space-1-5, 6px);
width: 100%;
}
.textareaLabel {
font-size: var(--text-xs, 12px);
font-weight: 500;
color: var(--text-secondary);
}
.textarea {
width: 100%;
padding: var(--space-2-5, 10px) var(--space-4, 16px);
font-size: var(--text-sm, 14px);
border-radius: var(--border-radius-lg, 8px);
border: 1px solid var(--border);
background: var(--bg-surface);
color: var(--text-primary);
font-family: inherit;
resize: vertical;
min-height: 80px;
transition: all 0.2s ease-out;
outline: none;
}
.textarea::placeholder {
color: var(--text-tertiary);
}
.textarea:hover {
border-color: var(--border-hover, var(--primary));
}
.textarea:focus {
border-color: var(--primary);
box-shadow:
0 0 0 2px rgba(var(--primary-rgb, 107, 115, 255), 0.2),
0 0 0 1px var(--primary);
}
/* Actions */
.actions {
display: flex;
gap: var(--space-3, 12px);
justify-content: flex-end;
padding-top: var(--space-2, 8px);
}
/* Responsive adjustments */
@media (max-width: 480px) {
.modal {
max-width: 100%;
margin: var(--space-4, 16px);
}
.header,
.form {
padding: var(--space-4, 16px);
}
}
