Back to CSS Dark Mode UI Stealth Panel Pure CSS
Share
HTML
<div class="dm-stealth-bg">
  <div class="dm-stealth">
    <div class="dm-stealth__row">
      <span class="dm-stealth__lbl">Status</span>
      <span class="dm-stealth__val dm-stealth__val--ok">OPERATIONAL</span>
    </div>
    <div class="dm-stealth__row">
      <span class="dm-stealth__lbl">Latency</span>
      <span class="dm-stealth__val">42 ms</span>
    </div>
    <div class="dm-stealth__row">
      <span class="dm-stealth__lbl">Region</span>
      <span class="dm-stealth__val">us-east-1</span>
    </div>
  </div>
</div>
CSS
.dm-stealth-bg { padding: 28px; border-radius: 16px; background: #050505; }
.dm-stealth {
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 8px;
}
.dm-stealth__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  transition: background 0.15s;
}
.dm-stealth__row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.dm-stealth__row + .dm-stealth__row { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.dm-stealth__lbl {
  font: 500 11px ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.dm-stealth__val {
  font: 600 12px ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.85);
}
.dm-stealth__val--ok { color: #4ade80; }