@chatcode/cco-better-sidebar 0.18.0-alpha.0

package/src/client/UsageHeatmapSection.module.css

@@ -0,0 +1,440 @@
+.section {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  max-width: 760px;
+  min-width: 0;
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 20px;
+  background: var(--dsw-alias-bg-layer-3);
+}
+
+.headerRow,
+.monthNav,
+.footer,
+.legend,
+.todayLabel {
+  display: flex;
+  align-items: center;
+}
+
+.headerRow {
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.monthNav {
+  gap: 4px;
+}
+
+.monthButton {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+}
+
+.monthLabel {
+  min-width: 108px;
+  text-align: center;
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.refreshButton,
+.retry {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: transparent;
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.monthButton,
+.refreshButton,
+.retry {
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.monthButton:hover:not(:disabled),
+.refreshButton:hover:not(:disabled),
+.retry:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+.monthButton:disabled,
+.refreshButton:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.overview {
+  padding: 20px;
+  border-radius: 14px;
+  background: linear-gradient(120deg, color-mix(in srgb, var(--dsw-alias-state-business-primary) 7%, transparent), color-mix(in srgb, var(--dsw-alias-state-business-primary) 2%, transparent));
+}
+
+.total {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-bottom: 18px;
+}
+
+.totalNumber {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.totalValue {
+  font-size: 36px;
+  line-height: 42px;
+  font-weight: 600;
+  letter-spacing: -1.2px;
+  color: var(--dsw-alias-label-primary);
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.totalUnit {
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  padding-top: 16px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-width: 0;
+  padding: 0 16px;
+  border-left: 1px solid var(--dsw-alias-border-l2);
+}
+
+.stat:first-child {
+  padding-left: 0;
+  border-left: none;
+}
+
+.stat:last-child {
+  padding-right: 0;
+}
+
+.statValue {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.statLabel {
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.gridBody {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.weekdays,
+.grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.weekdays span {
+  text-align: center;
+  font-size: 11px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.cell,
+.legendSwatch {
+  background: color-mix(in srgb, var(--dsw-alias-label-primary) 4%, var(--dsw-alias-bg-layer-3));
+}
+
+:is(.cell, .legendSwatch)[data-level='1'] {
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 12%, var(--dsw-alias-bg-layer-3));
+}
+
+:is(.cell, .legendSwatch)[data-level='2'] {
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 24%, var(--dsw-alias-bg-layer-3));
+}
+
+:is(.cell, .legendSwatch)[data-level='3'] {
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 38%, var(--dsw-alias-bg-layer-3));
+}
+
+:is(.cell, .legendSwatch)[data-level='4'] {
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 56%, var(--dsw-alias-bg-layer-3));
+}
+
+.cell {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: 0;
+  height: clamp(48px, 10cqi, 68px);
+  padding: 6px 2px;
+  border: 1px solid color-mix(in srgb, var(--dsw-alias-label-primary) 4%, transparent);
+  border-radius: 10px;
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  box-sizing: border-box;
+}
+
+.cellDay {
+  font-size: 13px;
+  line-height: 16px;
+  font-weight: 500;
+}
+
+.cellTokens {
+  max-width: 100%;
+  font-size: 10px;
+  line-height: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  opacity: 0.75;
+}
+
+.cell.cellFuture {
+  background: transparent;
+  border-color: color-mix(in srgb, var(--dsw-alias-border-l2) 65%, transparent);
+  color: var(--dsw-alias-label-tertiary);
+  cursor: default;
+}
+
+.cellToday {
+  box-shadow: inset 0 0 0 1px var(--dsw-alias-state-business-primary);
+}
+
+.cellToday::after,
+.todayDot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--dsw-alias-state-business-primary);
+}
+
+.cellToday::after {
+  content: '';
+  position: absolute;
+  top: 6px;
+  right: 6px;
+}
+
+.cellHover {
+  transform: translateY(-2px);
+  box-shadow: 0 3px 10px color-mix(in srgb, var(--dsw-alias-state-business-primary) 16%, transparent);
+}
+
+.cellHover,
+.cell:focus-visible,
+.monthButton:focus-visible,
+.refreshButton:focus-visible,
+.retry:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 2px;
+}
+
+.footer {
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: -8px;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.todayLabel {
+  gap: 6px;
+}
+
+.legend {
+  margin-left: auto;
+  gap: 5px;
+}
+
+.legendSwatch {
+  width: 11px;
+  height: 11px;
+  border-radius: 3px;
+}
+
+.empty {
+  padding: 12px;
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-layer-2);
+  text-align: center;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.state,
+.stateError {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  min-height: 300px;
+  padding: 16px;
+  font-size: 13px;
+  line-height: 22px;
+  text-align: center;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.stateError {
+  flex-direction: column;
+}
+
+.stateError > span {
+  overflow-wrap: anywhere;
+}
+
+.spin {
+  flex-shrink: 0;
+  animation: dshSidebarUsageSpin 1s linear infinite;
+}
+
+@keyframes dshSidebarUsageSpin {
+  to { transform: rotate(360deg); }
+}
+
+.tooltip {
+  position: fixed;
+  z-index: 2147483000;
+  transform: translate(-50%, calc(-100% - 12px));
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 232px;
+  box-sizing: border-box;
+  padding: 14px 16px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-layer-3);
+  box-shadow: 0 8px 28px color-mix(in srgb, var(--dsw-alias-label-primary) 12%, transparent);
+  pointer-events: none;
+}
+
+.tooltipBelow {
+  transform: translate(-50%, 12px);
+}
+
+.tooltipDate {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.tooltipToday {
+  color: var(--dsw-alias-state-business-primary);
+  font-size: 10px;
+}
+
+.tooltipTokens {
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.tooltipSplit {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-top: 8px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--dsw-alias-label-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+@container (max-width: 420px) {
+  .group {
+    gap: 20px;
+    padding: 16px;
+    border-radius: 16px;
+  }
+
+  .overview { padding: 16px; }
+  .totalValue { font-size: 30px; }
+  .stat { padding: 0 8px; }
+  .statLabel { font-size: 11px; }
+  .statValue { font-size: 16px; }
+  .weekdays, .grid { gap: 5px; }
+  .cell { border-radius: 7px; }
+  .monthLabel { min-width: 96px; font-size: 13px; }
+}
+
+@container (max-width: 300px) {
+  .group { padding: 12px; }
+  .headerRow { gap: 4px; flex-wrap: wrap; }
+  .overview { padding: 12px; }
+  .cellTokens { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spin { animation: none; }
+  .cell, .monthButton, .refreshButton, .retry { transition: none; }
+  .cellHover { transform: none; }
+}