mami/src/mami.css/controls/msgbox.css

77 lines
1.5 KiB
CSS

.msgbox-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #1118;
color: #fff;
width: 100%;
height: 100%;
backdrop-filter: blur(2px);
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: 340px;
}
.msgbox-dialog {
grid-row: 1;
grid-column: 1;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1.4em;
display: flex;
flex-direction: column;
background: #444d;
border: 1px solid #5554;
backdrop-filter: blur(2px);
filter: drop-shadow(0 6px 1em #000);
}
.msgbox-dialog-body {
margin: 6px;
}
.msgbox-dialog-line {
margin: 6px;
}
.msgbox-dialog-buttons {
display: flex;
gap: 2px;
margin: 2px;
justify-content: space-evenly;
}
.msgbox-dialog-buttons-many {
flex-direction: column;
}
.msgbox-dialog-button {
font-family: inherit;
font-size: inherit;
line-height: inherit;
width: 100%;
display: block;
border: 0;
background: #555d;
border: 1px solid #6664;
color: inherit;
padding: 7px 4px 6px;
transition: background .1s, border-color .1s;
}
.msgbox-dialog-button:focus {
outline: 1px solid #ccc;
}
.msgbox-dialog-button:focus,
.msgbox-dialog-button:hover {
background: #666d;
border-color: #7774;
}
.msgbox-dialog-button:active {
background: #5a5a5add;
border-color: #6a6a6a44;
}
.msgbox-dialog-button-primary {
font-weight: 700;
}