65 lines
1.3 KiB
CSS
65 lines
1.3 KiB
CSS
|
.modal-error-display {
|
||
|
|
margin-bottom: var(--spacing-md);
|
||
|
|
animation: slideDown var(--transition-normal) ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slideDown {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(-10px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-error-content {
|
||
|
|
background: var(--color-danger-light);
|
||
|
|
border: 1px solid var(--color-danger);
|
||
|
|
border-radius: var(--border-radius-md);
|
||
|
|
padding: var(--spacing-md);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--spacing-sm);
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-error-icon {
|
||
|
|
font-size: var(--font-size-lg);
|
||
|
|
color: var(--color-danger);
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-error-message {
|
||
|
|
color: var(--color-danger);
|
||
|
|
font-size: var(--font-size-sm);
|
||
|
|
flex: 1;
|
||
|
|
line-height: var(--line-height-normal);
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-error-dismiss {
|
||
|
|
background: none;
|
||
|
|
border: none;
|
||
|
|
color: var(--color-danger);
|
||
|
|
font-size: var(--font-size-lg);
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 0;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: var(--border-radius-sm);
|
||
|
|
transition: background-color var(--transition-fast);
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-error-dismiss:hover {
|
||
|
|
background: rgba(244, 67, 54, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-error-dismiss:focus {
|
||
|
|
outline: 2px solid var(--color-danger);
|
||
|
|
outline-offset: 2px;
|
||
|
|
}
|