claude-code-usage-bubble/ui/bubble.css

/* Bubble palette. Accent and fill colours come from the payload. */
:root[data-theme='dark'] {
  /* 80% opaque, so the desktop shows through. Tracks and the edge are
     tints over it, so they keep the same contrast step on a light or dark
     desktop; the text halo keeps text readable on either. */
  --bg: rgb(31 31 31 / 80%);
  --track: rgb(0 0 0 / 28%);
  --time-track: rgb(255 255 255 / 14%);
  --time-fill: #b0b0b0;
  --edge: rgb(255 255 255 / 22%);
  --text: #eaeaea;
  --muted: #c4c4c4;
  --halo: 0 0 2px rgb(0 0 0 / 75%);
}

:root[data-theme='light'] {
  --bg: rgb(243 243 243 / 80%);
  --track: rgb(0 0 0 / 10%);
  --time-track: rgb(0 0 0 / 8%);
  --time-fill: #666666;
  --edge: rgb(0 0 0 / 18%);
  --text: #1f1f1f;
  --muted: #4a4a4a;
  --halo: 0 0 2px rgb(255 255 255 / 85%);
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
  user-select: none;
  -webkit-user-select: none;
  /* Only the pill takes input: the area outside its outline is dead. */
  pointer-events: none;
}

.pill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* bubble.js clips this to the head-and-tail outline, which also bounds
     the hit area. */
  background: var(--bg);
  font-family: 'Segoe UI', system-ui, sans-serif;
  cursor: move;
  pointer-events: auto;
}

/* Every pointer event targets the pill itself, whose hit area follows its
   clipped outline. */
.pill * {
  pointer-events: none;
}

.rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rings circle,
.edge {
  fill: none;
}

.edge {
  stroke: var(--edge);
}

.ring-track {
  stroke: var(--track);
}

.time-ring-track {
  stroke: var(--time-track);
}

.time-ring-arc {
  stroke: var(--time-fill);
}

.ring-arc,
.time-ring-arc {
  stroke-linecap: round;
}

.text {
  position: absolute;
  margin: 0;
  white-space: nowrap;
  color: var(--text);
  text-shadow: var(--halo);
}

.head-label {
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

.head-pct {
  font-weight: 700;
  text-align: center;
}

.tail-pct,
.tail-time {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
}

.tail-pct {
  /* The layout reserves this column measured at TAIL_PCT_WEIGHT in layout.js; change both together. */
  font-weight: 600;
}

.tail-time {
  font-weight: 400;
  color: var(--muted);
}

.bar {
  position: absolute;
  overflow: hidden;
  border-radius: 9999px;
}

.usage-bar {
  background: var(--track);
}

.time-bar {
  background: var(--time-track);
}

.fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 9999px;
}

.usage-fill {
  left: 0;
}

.time-fill {
  right: 0;
  background: var(--time-fill);
}

[hidden] {
  display: none !important;
}