39 lines
950 B
CSS
39 lines
950 B
CSS
/* Door Status Indicator – Button‑style visuals */
|
||
|
||
.door-status-indicator {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.35em;
|
||
font-size: 1em;
|
||
padding: 0.35em 0.75em;
|
||
border-radius: 0.6em;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
text-decoration: none;
|
||
user-select: none;
|
||
}
|
||
|
||
/* OPEN → light green background, dark green text */
|
||
.door-status-indicator.open {
|
||
background: #d4edda; /* light mint green */
|
||
color: #155724; /* dark evergreen */
|
||
border: 1px solid #c3e6cb;
|
||
}
|
||
|
||
/* CLOSED → light red background, dark red text */
|
||
.door-status-indicator.closed {
|
||
background: #f8d7da; /* blush pink */
|
||
color: #721c24; /* maroon */
|
||
border: 1px solid #f5c6cb;
|
||
}
|
||
|
||
/* Optional hover focus states for better UX */
|
||
.door-status-indicator.open:hover,
|
||
.door-status-indicator.open:focus {
|
||
background: #c3e6cb;
|
||
}
|
||
.door-status-indicator.closed:hover,
|
||
.door-status-indicator.closed:focus {
|
||
background: #f5c6cb;
|
||
}
|