jfig/wp-spaceapi-consumer
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

better CSS

Browse Source
This commit is contained in:
Joao Figueiredo
2025-05-23 23:10:39 +01:00
parent 306f368ae2
commit b979b0f938
1 changed files with 36 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
door-status.css
View File

@@ -1,15 +1,38 @@
/* door-status.css */
.door-status-indicator { display:inline-flex; align-items:center; font-size:1.1em; line-height:1; }
.door-status-indicator.open { color:#28a745; } /* green */
.door-status-indicator.closed { color:#dc3545; } /* red */
/* Door Status Indicator – Button‑style visuals */
/* optional embellishments */
.door-status-indicator.open::before,
.door-status-indicator.closed::before {
content:"";
display:inline-block;
width:.6em; height:.6em;
border-radius:50%;
margin-right:.35em;
background:currentColor;
.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;
}