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

Compare commits

base: jfig:b979b0f93800c4e2297d0382b09f29ae6f2b1289
Branches Tags
jfig:main jfig:dev
...
compare: jfig:bfca0c8fa414b779070baa13807585d5c4c86350
Branches Tags
jfig:main jfig:dev

2 Commits
b979b0f938 ... bfca0c8fa4

Author SHA1 Message Date
Joao Figueiredo
bfca0c8fa4 better look 2025-05-23 23:15:30 +01:00
Joao Figueiredo
e6ff012774 better look 2025-05-23 23:15:15 +01:00
2 changed files with 24 additions and 28 deletions
Expand all files Collapse all files

50
door-status.css
View File

@@ -1,38 +1,34 @@
/* Door Status Indicator – Button‑style visuals */ /* door-status.css – styles the indicator as a pill‑shaped button */
.door-status-indicator { .door-status-indicator {
display: inline-flex; display:inline-flex;
align-items: center; align-items:center;
gap: 0.35em; gap:0.4em;
font-size: 1em; padding:0.25em 0.75em;
padding: 0.35em 0.75em; border-radius:1em; /* fully‑rounded corners */
border-radius: 0.6em; font-size:0.95em;
font-weight: 600; font-weight:600;
line-height: 1; line-height:1;
text-decoration: none; border:1px solid transparent;
user-select: none; user-select:none;
transition:filter .15s ease-in-out;
} }
/* OPEN → light green background, dark green text */ /* Open = soft green background + dark green text */
.door-status-indicator.open { .door-status-indicator.open {
background: #d4edda; /* light mint green */ background:#e7f9ec;
color: #155724; /* dark evergreen */ color:#1e7a34;
border: 1px solid #c3e6cb;
} }
/* CLOSED → light red background, dark red text */ /* Closed = soft red background + dark red text */
.door-status-indicator.closed { .door-status-indicator.closed {
background: #f8d7da; /* blush pink */ background:#fdeeee;
color: #721c24; /* maroon */ color:#c03c3c;
border: 1px solid #f5c6cb;
} }
/* Optional hover focus states for better UX */ /* (Optional) slight hover effect */
.door-status-indicator.open:hover, .door-status-indicator:hover,
.door-status-indicator.open:focus { .door-status-indicator:focus {
background: #c3e6cb; filter:brightness(1.05);
} outline:none;
.door-status-indicator.closed:hover,
.door-status-indicator.closed:focus {
background: #f5c6cb;
} }

2
wp-api-consumer.php
View File

@@ -92,7 +92,7 @@ function dsi_get_status() : bool {
function dsi_shortcode() : string { function dsi_shortcode() : string {
$open = dsi_get_status(); $open = dsi_get_status();
$emoji = $open ? '<div class="door-status-indicator open">Open</div>' : '<div class="door-status-indicator closed">Closed</div>'; $emoji = $open ? '<div class="door-status-indicator open">🟢 Open</div>' : '<div class="door-status-indicator closed">🔴 Closed</div>';
return sprintf( return sprintf(
'<span class="door-status-indicator" aria-label="Door is %s">%s</span>', '<span class="door-status-indicator" aria-label="Door is %s">%s</span>',