#message-box { top: 0; left: 0; right: 0; bottom: 0; display: flex; position: fixed; box-shadow: 5px 5px 50px rgba(0, 0, 0, 0.35); background-color: rgba(0, 0, 0, .25); animation: fadein .25s ease-in-out; z-index: 9999990; -moz-user-select: none; } #message-box > div { top: 3rem; right: 3rem; min-width: 10rem; max-width: 50vw; min-height: 5rem; max-height: 90vh; position: fixed; display: flex; flex-direction: column; background-color: white; box-shadow: 5px 5px 50px rgba(0, 0, 0, 0.35); z-index: 9999991; -moz-user-select: text; } #message-box.fadeout { animation: fadeout .5s ease-in-out; } #message-box.center { align-items: center; justify-content: center; } #message-box.center #message-box-contents { text-align: center; } #message-box.center > div { top: unset; right: unset; } #message-box-title { font-weight: bold; background-color: rgb(145, 208, 198); padding: .75rem 24px .75rem 52px; font-size: 1rem; position: relative; } #message-box-title::before { content: ""; width: 0; height: 0; padding: 0 32px 32px 0; background: url(/images/icon/32.png); position: absolute; left: .5rem; top: 0; bottom: 0; margin: auto; } #message-box.danger #message-box-title { background-color: firebrick; color: white; } #message-box.danger #message-box-title::before { background: url('/images/icon/32x.png'); } #message-box.danger #message-box-contents { font-weight: bold; } #message-box.danger #message-box-close-icon svg:hover { fill: #600; } #message-box-close-icon { cursor: pointer; position: absolute; right: 3px; top: 4px; } #message-box-close-icon svg { width: 16px; height: 16px; } #message-box-contents { overflow: auto; padding: 1.5rem .75rem; position: relative; flex-grow: 9; word-break: break-word; } #message-box-buttons { padding: .75rem .375rem; background-color: #f0f0f0; text-align: center; } .non-windows #message-box-buttons { text-align: right; direction: rtl; } #message-box-buttons button { margin: 0 .375rem; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } #message-box.regular-form input[type=text] { display: block; width: 100%; margin: .4rem 0 .6rem; padding-left: .25rem; border-radius: .25rem; border-width: 1px; }