@uptime.link/statuspage 1.2.0 → 1.3.1

package/dist_bundle/bundle.js

@@ -2939,18 +2939,6 @@ Continuing remediation efforts.`,author:"Ops Team"}]}],past:[]}},n="none";t.curr
         padding-left: 24px;
       }
 
-      /* Vertical connector line */
-      .timeline::before {
-        content: '';
-        position: absolute;
-        left: 5px;
-        top: 8px;
-        bottom: 8px;
-        width: 2px;
-        background: ${N.bdTheme("linear-gradient(to bottom, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%)","linear-gradient(to bottom, #27272a 0%, #3f3f46 50%, #27272a 100%)")};
-        border-radius: 1px;
-      }
-
       .update-item {
         position: relative;
         padding-left: ${m(D.lg)};
@@ -2962,6 +2950,18 @@ Continuing remediation efforts.`,author:"Ops Team"}]}],past:[]}},n="none";t.curr
         padding-bottom: 0;
       }
 
+      /* Vertical connector line from each dot to the next */
+      /* Dot: left -22px, width 12px + border 2px*2 = 16px total, center at -14px */
+      .update-item:not(:last-child)::after {
+        content: '';
+        position: absolute;
+        left: -15px;
+        top: 18px;
+        bottom: 0;
+        width: 2px;
+        background: ${b.border.default};
+      }
+
       /* Timeline dot */
       .update-item::before {
         content: '';
@@ -3152,15 +3152,17 @@ Continuing remediation efforts.`,author:"Ops Team"}]}],past:[]}},n="none";t.curr
           padding-left: 20px;
         }
 
-        .timeline::before {
-          left: 4px;
-        }
-
         .update-item::before {
           left: -18px;
           width: 10px;
           height: 10px;
         }
+
+        /* Mobile dot: left -18px, width 10px + border 2px*2 = 14px, center at -11px */
+        .update-item:not(:last-child)::after {
+          left: -12px;
+          top: 16px;
+        }
       }
     `]),E(We,1,tr);var b$=()=>O`
   <style>
@@ -4793,7 +4795,7 @@ Downtime: ${p} minutes`)})}}
           </div>
         `:O`
           <div class="stats-grid">
-            <div class="stat-card status-card ${this.currentStatus}">
+            <div class="stat-card ${this.currentStatus}">
               <div class="stat-label">
                 <span class="status-indicator ${this.currentStatus}"></span>
                 Current Status
@@ -4803,7 +4805,7 @@ Downtime: ${p} minutes`)})}}
               </div>
             </div>
 
-            <div class="stat-card uptime-card">
+            <div class="stat-card ${this.getUptimeCardStatus()}">
               <div class="stat-label">
                 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
@@ -4818,7 +4820,7 @@ Downtime: ${p} minutes`)})}}
               </div>
             </div>
 
-            <div class="stat-card response-card">
+            <div class="stat-card ${this.getResponseCardStatus()}">
               <div class="stat-label">
                 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <circle cx="12" cy="12" r="10"></circle>
@@ -4832,7 +4834,7 @@ Downtime: ${p} minutes`)})}}
               ${this.renderResponseChange()}
             </div>
 
-            <div class="stat-card incident-card">
+            <div class="stat-card ${this.getIncidentCardStatus()}">
               <div class="stat-label">
                 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
@@ -4844,8 +4846,8 @@ Downtime: ${p} minutes`)})}}
               <div class="stat-value">
                 ${this.totalIncidents}
               </div>
-              <div class="stat-change neutral">
-                ${this.affectedServices} of ${this.totalServices} services
+              <div class="stat-change ${this.affectedServices===0?"positive":"negative"}">
+                ${this.affectedServices===0?"All services ok.":`${this.affectedServices} of ${this.totalServices} services affected`}
               </div>
             </div>
           </div>
@@ -4856,7 +4858,7 @@ Downtime: ${p} minutes`)})}}
         <span>${r==="positive"?"\u2193":r==="negative"?"\u2191":"\u2192"}</span>
         <span>${r==="positive"?"Fast":r==="negative"?"Slow":"Normal"}</span>
       </div>
-    `}};Ve=xt(oA),nb=new WeakMap,ob=new WeakMap,ib=new WeakMap,sb=new WeakMap,ab=new WeakMap,lb=new WeakMap,cb=new WeakMap,ub=new WeakMap,V(Ve,4,"uptime",nA,rr,nb),V(Ve,4,"avgResponseTime",rA,rr,ob),V(Ve,4,"totalIncidents",tA,rr,ib),V(Ve,4,"affectedServices",eA,rr,sb),V(Ve,4,"totalServices",K$,rr,ab),V(Ve,4,"currentStatus",Z$,rr,lb),V(Ve,4,"loading",J$,rr,cb),V(Ve,4,"timePeriod",X$,rr,ub),rr=V(Ve,0,"UplStatuspageStatsgrid",iA,rr),qe(rr,"demo",Q$),qe(rr,"styles",[At.staticStyles,Or,Oe`
+    `}getUptimeCardStatus(){return this.uptime>=99.9?"operational":this.uptime>=99?"degraded":"partial_outage"}getResponseCardStatus(){return this.avgResponseTime<200?"operational":this.avgResponseTime<500?"degraded":"partial_outage"}getIncidentCardStatus(){return this.affectedServices===0?"operational":this.currentStatus==="major_outage"?"major_outage":this.currentStatus==="partial_outage"?"partial_outage":"degraded"}};Ve=xt(oA),nb=new WeakMap,ob=new WeakMap,ib=new WeakMap,sb=new WeakMap,ab=new WeakMap,lb=new WeakMap,cb=new WeakMap,ub=new WeakMap,V(Ve,4,"uptime",nA,rr,nb),V(Ve,4,"avgResponseTime",rA,rr,ob),V(Ve,4,"totalIncidents",tA,rr,ib),V(Ve,4,"affectedServices",eA,rr,sb),V(Ve,4,"totalServices",K$,rr,ab),V(Ve,4,"currentStatus",Z$,rr,lb),V(Ve,4,"loading",J$,rr,cb),V(Ve,4,"timePeriod",X$,rr,ub),rr=V(Ve,0,"UplStatuspageStatsgrid",iA,rr),qe(rr,"demo",Q$),qe(rr,"styles",[At.staticStyles,Or,Oe`
       :host {
         display: block;
         background: transparent;
@@ -4915,38 +4917,27 @@ Downtime: ${p} minutes`)})}}
         transition: all ${m(se.fast)} ${m(K.default)};
       }
 
-      .stat-card.status-card::before {
+      /* Dynamic status-based accent colors for all stat cards */
+      .stat-card.operational::before {
         background: ${b.status.operational};
       }
 
-      .stat-card.status-card.degraded::before {
+      .stat-card.degraded::before {
         background: ${b.status.degraded};
       }
 
-      .stat-card.status-card.partial_outage::before {
+      .stat-card.partial_outage::before {
         background: ${b.status.partial};
       }
 
-      .stat-card.status-card.major_outage::before {
+      .stat-card.major_outage::before {
         background: ${b.status.major};
       }
 
-      .stat-card.status-card.maintenance::before {
-        background: ${b.status.maintenance};
-      }
-
-      .stat-card.uptime-card::before {
-        background: ${b.status.operational};
-      }
-
-      .stat-card.response-card::before {
+      .stat-card.maintenance::before {
         background: ${b.status.maintenance};
       }
 
-      .stat-card.incident-card::before {
-        background: ${b.status.partial};
-      }
-
       .stat-card:hover {
         border-color: ${b.border.muted};
         box-shadow: ${m(Me.md)};