35 lines
781 B
CSS
35 lines
781 B
CSS
/* door-status.css – styles the indicator as a pill‑shaped button */
|
||
|
||
.door-status-indicator {
|
||
display:inline-flex;
|
||
align-items:center;
|
||
gap:0.4em;
|
||
padding:0.25em 0.75em;
|
||
border-radius:1em; /* fully‑rounded corners */
|
||
font-size:0.95em;
|
||
font-weight:600;
|
||
line-height:1;
|
||
border:1px solid transparent;
|
||
user-select:none;
|
||
transition:filter .15s ease-in-out;
|
||
}
|
||
|
||
/* Open = soft green background + dark green text */
|
||
.door-status-indicator.open {
|
||
background:#e7f9ec;
|
||
color:#1e7a34;
|
||
}
|
||
|
||
/* Closed = soft red background + dark red text */
|
||
.door-status-indicator.closed {
|
||
background:#fdeeee;
|
||
color:#c03c3c;
|
||
}
|
||
|
||
/* (Optional) slight hover effect */
|
||
.door-status-indicator:hover,
|
||
.door-status-indicator:focus {
|
||
filter:brightness(1.05);
|
||
outline:none;
|
||
}
|