/* Inclua esta linha no HTML para importar a fonte Roboto:
*/
/* Estilizando o overlay */
.system-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
/* Fundo semitransparente */
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
visibility: hidden;
/* Esconde por padrão */
opacity: 0;
transition: visibility 0s, opacity 0.3s ease;
}
.system-modal-overlay.visible {
visibility: visible;
opacity: 1;
}
/* Janela do modal */
.system-modal-box {
background-color: #e8e8e8;
/* Fundo cinza claro */
width: 400px;
border: 2px solid #000;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
/* Sombra */
font-family: 'Roboto', Arial, sans-serif;
max-height: 90vh;
max-width: 90vw;
}
/* Barra superior */
.system-modal-header {
padding: 8px;
font-size: 16px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.system-modal-header.warning {
background-color: #ffcc00;
/* Amarelo para aviso */
}
.system-modal-header.erro {
background-color: #d9534f;
/* Vermelho para erro */
}
.system-modal-header.success {
background-color: #5cb85c;
/* Verde para sucesso */
}
/* Conteúdo do modal */
.system-modal-content {
display: flex;
align-items: center;
padding: 20px;
text-align: center;
}
.system-modal-content span {
font-size: 24px;
/* Tamanho do emoji */
margin-right: 15px;
}
.system-modal-content p {
font-size: 16px;
margin: 0;
color: #000;
}
/* Botão estilo Windows */
.system-modal-actions {
text-align: center;
padding: 10px;
}
.system-modal-actions button {
background-color: #e8e8e8;
border: 2px solid #000;
padding: 5px 15px;
font-size: 14px;
font-family: 'Roboto', Arial, sans-serif;
cursor: pointer;
}
.system-modal-actions button:hover {
background-color: #d8d8d8;
}