add support for CSS

door-status.css

@@ -0,0 +1,15 @@
+/* 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    */
+
+/* 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;
+}

wp-api-consumer.php

@@ -92,7 +92,7 @@ function dsi_get_status() : bool {
 
 function dsi_shortcode() : string {
     $open  = dsi_get_status();
-    $emoji = $open ? '🟢 Open' : '🔴 Closed';
+    $emoji = $open ? '<div class="door-status-indicator open">🟢 Open</div>' : '<div class="door-status-indicator closed">🔴 Closed</div>';
 
     return sprintf(
         '<span class="door-status-indicator" aria-label="Door is %s">%s</span>',
@@ -132,13 +132,21 @@ add_action( 'admin_bar_menu', 'dsi_admin_bar', 1000 );
 |--------------------------------------------------------------------------
 */
 
+/**
+ * Front-end + admin-bar styles for the indicator.
+ */
 function dsi_enqueue_assets() : void {
-    if ( is_admin() ) {
-        return; // Front‑end only.
-    }
-    wp_add_inline_style( 'wp-block-library', '.door-status-indicator{font-size:1.2em;line-height:1}' );
+    // register & enqueue the standalone CSS file
+    wp_enqueue_style(
+        'door-status-indicator',
+        plugins_url( 'door-status.css', __FILE__ ),
+        [],          // no dependencies
+        '1.0.0'      // file version
+    );
 }
 add_action( 'wp_enqueue_scripts', 'dsi_enqueue_assets' );
+add_action( 'admin_enqueue_scripts', 'dsi_enqueue_assets' ); // so the Admin Bar icon also gets styled
+
 
 /*
 |--------------------------------------------------------------------------