Add full-screen alarm acknowledgement overlay
This commit is contained in:
@@ -155,3 +155,54 @@ nav button {
|
||||
font-size: 0.9rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
.alarm-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #200;
|
||||
color: white;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.alarm-overlay.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alarm-box {
|
||||
width: min(720px, 100%);
|
||||
background: #3a0000;
|
||||
border: 4px solid #ffdddd;
|
||||
border-radius: 24px;
|
||||
padding: 36px;
|
||||
text-align: center;
|
||||
box-shadow: 0 0 40px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.alarm-icon {
|
||||
font-size: 5rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.alarm-box h1 {
|
||||
font-size: 2.4rem;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.alarm-box p {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.alarm-box button {
|
||||
width: 100%;
|
||||
font-size: 1.5rem;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #300;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user