|
|
|
|
|
|
|
|
|
|
|
|
|
@dialog-bg: #2d2d2d; |
|
@dialog-text: #f5f5f5; |
|
@overlay-bg: rgba(0, 0, 0, 0.7); |
|
@confirm-color: #4caf50; |
|
@cancel-color: #f44336; |
|
@border-radius: 12px; |
|
@transition-speed: 0.3s; |
|
|
|
|
|
.confirm-dialog, |
|
.alert-dialog { |
|
position: fixed; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%, -50%) scale(0.9); |
|
opacity: 0; |
|
visibility: hidden; |
|
background: @dialog-bg; |
|
padding: 2rem; |
|
border-radius: @border-radius; |
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); |
|
z-index: 10001; |
|
min-width: 320px; |
|
max-width: 90%; |
|
transition: all @transition-speed cubic-bezier(0.4, 0, 0.2, 1); |
|
|
|
&.show { |
|
opacity: 1; |
|
visibility: visible; |
|
transform: translate(-50%, -50%) scale(1); |
|
} |
|
|
|
h4 { |
|
margin: 0 0 2rem; |
|
color: @dialog-text; |
|
font-size: 1.25rem; |
|
font-weight: 500; |
|
line-height: 1.4; |
|
text-align: center; |
|
} |
|
|
|
.buttons { |
|
display: flex; |
|
gap: 1rem; |
|
justify-content: center; |
|
} |
|
|
|
button { |
|
border: none; |
|
padding: 0.75rem 1.5rem; |
|
border-radius: 6px; |
|
font-weight: 500; |
|
text-transform: uppercase; |
|
letter-spacing: 0.05em; |
|
cursor: pointer; |
|
transition: all 0.2s ease; |
|
|
|
&:focus { |
|
outline: 2px solid rgba(255, 255, 255, 0.5); |
|
outline-offset: 2px; |
|
} |
|
|
|
&.ok { |
|
background: @confirm-color; |
|
color: white; |
|
|
|
&:hover { |
|
background: darken(@confirm-color, 8%); |
|
} |
|
} |
|
|
|
&.cancel { |
|
background: @cancel-color; |
|
color: white; |
|
|
|
&:hover { |
|
background: darken(@cancel-color, 8%); |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
.confirm-dialog { |
|
border: 2px solid @confirm-color; |
|
} |
|
|
|
.alert-dialog { |
|
border: 2px solid #2196f3; |
|
|
|
.ok { |
|
background: #2196f3; |
|
|
|
&:hover { |
|
background: darken(#2196f3, 8%); |
|
} |
|
} |
|
} |
|
|
|
|
|
.overlay { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background: @overlay-bg; |
|
opacity: 0; |
|
visibility: hidden; |
|
z-index: 10000; |
|
transition: opacity @transition-speed ease; |
|
|
|
&.show { |
|
opacity: 1; |
|
visibility: visible; |
|
} |
|
} |
|
|