mirror of
https://github.com/AgentSeal/codeburn.git
synced 2026-05-20 09:03:50 +00:00
933a93d90a
Three visual fixes on the GNOME popup: * Token histogram chart was showing "0 tokens" with no bars because the reduce-and-spread pipeline hit an edge case; replace with an explicit loop that coerces each field to Number and accumulates the total. * Single-provider state used to stretch a full-width button across the whole popup. Render a compact brand-orange pill badge instead so it reads as "showing: Claude" rather than a filter tab with nothing to switch to. * Plan placeholder text was being ellipsized to "Claude OAuth ... macOS-..." because St.Label defaults to single-line rendering. Set clutter_text line_wrap + WrapMode.WORD + EllipsizeMode.NONE so the message flows across the popup width.
420 lines
8.1 KiB
CSS
420 lines
8.1 KiB
CSS
/*
|
|
* CodeBurn GNOME Shell extension styles.
|
|
*
|
|
* Designed to match the macOS popover pixel for pixel within what St widgets
|
|
* can paint: branded header, horizontal tab rows with pill active states, hero
|
|
* typography, inline bar-chart activity rows, and a pill-styled footer.
|
|
*
|
|
* Colors inherit the shell theme by default; brand orange (#ff8c42 to #c9521d)
|
|
* is the only hardcoded palette so the design survives both Light and Dark
|
|
* system themes.
|
|
*/
|
|
|
|
/* ---- panel button ---- */
|
|
.codeburn-panel {
|
|
spacing: 4px;
|
|
}
|
|
.codeburn-flame {
|
|
font-size: 14px;
|
|
}
|
|
.codeburn-label {
|
|
font-weight: 500;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
/* ---- popup host ---- */
|
|
.codeburn-menu {
|
|
padding: 0;
|
|
}
|
|
.codeburn-host {
|
|
padding: 0;
|
|
margin: 0;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
.codeburn-host:hover,
|
|
.codeburn-host:focus,
|
|
.codeburn-host:active,
|
|
.codeburn-host:selected {
|
|
background: transparent;
|
|
}
|
|
.codeburn-root {
|
|
width: 340px;
|
|
padding: 0;
|
|
spacing: 0;
|
|
}
|
|
|
|
/* ---- brand header ---- */
|
|
.codeburn-brand-header {
|
|
padding: 14px 16px 10px 16px;
|
|
spacing: 2px;
|
|
}
|
|
.codeburn-brand-row {
|
|
spacing: 0;
|
|
}
|
|
.codeburn-brand-primary {
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
}
|
|
.codeburn-brand-accent {
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
color: #ff8c42;
|
|
}
|
|
.codeburn-brand-subhead {
|
|
font-size: 10.5px;
|
|
opacity: 0.55;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
/* ---- tab rows ---- */
|
|
.codeburn-tab-row {
|
|
padding: 4px 10px 8px 10px;
|
|
spacing: 4px;
|
|
}
|
|
.codeburn-period-row {
|
|
padding-top: 0;
|
|
padding-bottom: 10px;
|
|
}
|
|
.codeburn-tab,
|
|
.codeburn-period {
|
|
padding: 5px 6px;
|
|
border-radius: 6px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
background: transparent;
|
|
border: none;
|
|
opacity: 0.7;
|
|
transition-duration: 80ms;
|
|
}
|
|
.codeburn-tab:hover,
|
|
.codeburn-period:hover {
|
|
background: rgba(255, 140, 66, 0.08);
|
|
opacity: 1;
|
|
}
|
|
.codeburn-tab-active,
|
|
.codeburn-period-active {
|
|
background: rgba(255, 140, 66, 0.18);
|
|
color: #ff8c42;
|
|
opacity: 1;
|
|
font-weight: 600;
|
|
}
|
|
.codeburn-agent-badge {
|
|
padding: 3px 10px;
|
|
border-radius: 10px;
|
|
background: rgba(255, 140, 66, 0.12);
|
|
color: #ff8c42;
|
|
font-size: 10.5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ---- hero ---- */
|
|
.codeburn-hero {
|
|
padding: 4px 16px 10px 16px;
|
|
spacing: 2px;
|
|
}
|
|
.codeburn-hero-top {
|
|
spacing: 6px;
|
|
}
|
|
.codeburn-hero-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
background-color: #ff8c42;
|
|
margin-top: 7px;
|
|
}
|
|
.codeburn-hero-label {
|
|
font-size: 11px;
|
|
opacity: 0.65;
|
|
font-weight: 500;
|
|
}
|
|
.codeburn-hero-amount {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: #ffd700;
|
|
}
|
|
.codeburn-hero-meta {
|
|
font-size: 11px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* ---- activity section ---- */
|
|
.codeburn-activity {
|
|
padding: 6px 16px 10px 16px;
|
|
spacing: 6px;
|
|
}
|
|
.codeburn-section-title {
|
|
font-weight: 600;
|
|
font-size: 11px;
|
|
opacity: 0.6;
|
|
padding-bottom: 2px;
|
|
}
|
|
.codeburn-activity-rows {
|
|
spacing: 8px;
|
|
}
|
|
.codeburn-activity-row {
|
|
spacing: 3px;
|
|
}
|
|
.codeburn-activity-top {
|
|
spacing: 6px;
|
|
}
|
|
.codeburn-activity-name {
|
|
font-size: 11.5px;
|
|
font-weight: 500;
|
|
}
|
|
.codeburn-activity-cost {
|
|
font-size: 11.5px;
|
|
font-family: monospace;
|
|
font-weight: 600;
|
|
color: #ffd700;
|
|
}
|
|
.codeburn-activity-turns {
|
|
font-size: 10.5px;
|
|
font-family: monospace;
|
|
opacity: 0.6;
|
|
min-width: 28px;
|
|
text-align: right;
|
|
}
|
|
.codeburn-activity-oneshot {
|
|
font-size: 10.5px;
|
|
font-family: monospace;
|
|
opacity: 0.8;
|
|
color: #5bf58c;
|
|
min-width: 36px;
|
|
text-align: right;
|
|
}
|
|
.codeburn-bar-track {
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
width: 240px;
|
|
}
|
|
.codeburn-bar-fill {
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background: linear-gradient(to right, #ff8c42, #c9521d);
|
|
}
|
|
.codeburn-empty {
|
|
font-style: italic;
|
|
opacity: 0.55;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
/* ---- findings CTA ---- */
|
|
.codeburn-findings {
|
|
margin: 2px 16px 10px 16px;
|
|
padding: 9px 11px;
|
|
border-radius: 8px;
|
|
background: rgba(255, 140, 66, 0.12);
|
|
border: none;
|
|
transition-duration: 120ms;
|
|
}
|
|
.codeburn-findings:hover {
|
|
background: rgba(255, 140, 66, 0.2);
|
|
}
|
|
.codeburn-findings-inner {
|
|
spacing: 8px;
|
|
}
|
|
.codeburn-findings-count {
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
color: #ff8c42;
|
|
x-expand: true;
|
|
}
|
|
.codeburn-findings-savings {
|
|
font-size: 11.5px;
|
|
font-weight: 500;
|
|
color: #ff8c42;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* ---- footer ---- */
|
|
.codeburn-footer {
|
|
padding: 10px 12px;
|
|
spacing: 6px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
.codeburn-footer-btn {
|
|
padding: 6px 10px;
|
|
border-radius: 6px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: none;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
transition-duration: 80ms;
|
|
}
|
|
.codeburn-footer-btn:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
.codeburn-currency-btn {
|
|
font-family: monospace;
|
|
min-width: 62px;
|
|
}
|
|
.codeburn-footer-cta {
|
|
background: #c9521d;
|
|
color: #ffffff;
|
|
}
|
|
.codeburn-footer-cta:hover {
|
|
background: #ff8c42;
|
|
}
|
|
.codeburn-updated {
|
|
font-size: 10px;
|
|
opacity: 0.45;
|
|
padding: 0 16px 10px 16px;
|
|
}
|
|
|
|
/* ---- insight pills row ---- */
|
|
.codeburn-insight-row {
|
|
padding: 4px 10px 8px 10px;
|
|
spacing: 4px;
|
|
}
|
|
.codeburn-insight-pill {
|
|
padding: 4px 4px;
|
|
border-radius: 6px;
|
|
font-size: 10.5px;
|
|
font-weight: 500;
|
|
background: transparent;
|
|
border: none;
|
|
opacity: 0.65;
|
|
transition-duration: 80ms;
|
|
}
|
|
.codeburn-insight-pill:hover {
|
|
background: rgba(255, 140, 66, 0.08);
|
|
opacity: 1;
|
|
}
|
|
.codeburn-insight-pill-active {
|
|
background: rgba(255, 140, 66, 0.18);
|
|
color: #ff8c42;
|
|
opacity: 1;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ---- token histogram chart ---- */
|
|
.codeburn-chart {
|
|
padding: 0 16px 10px 16px;
|
|
spacing: 4px;
|
|
}
|
|
.codeburn-chart-header {
|
|
spacing: 6px;
|
|
}
|
|
.codeburn-chart-label {
|
|
font-weight: 600;
|
|
font-size: 11px;
|
|
opacity: 0.6;
|
|
}
|
|
.codeburn-chart-total {
|
|
font-family: monospace;
|
|
font-size: 11px;
|
|
opacity: 0.7;
|
|
color: #ff8c42;
|
|
}
|
|
.codeburn-chart-bars {
|
|
spacing: 2px;
|
|
height: 52px;
|
|
}
|
|
.codeburn-chart-col {
|
|
width: 12px;
|
|
height: 52px;
|
|
}
|
|
.codeburn-chart-spacer {
|
|
background: transparent;
|
|
}
|
|
.codeburn-chart-bar {
|
|
background: linear-gradient(to top, #c9521d, #ff8c42);
|
|
border-radius: 2px 2px 0 0;
|
|
}
|
|
|
|
/* ---- trend, pulse, stats, kv rows ---- */
|
|
.codeburn-content {
|
|
padding: 6px 16px 10px 16px;
|
|
spacing: 6px;
|
|
}
|
|
.codeburn-trend-row,
|
|
.codeburn-kv-row {
|
|
padding: 4px 0;
|
|
spacing: 8px;
|
|
}
|
|
.codeburn-trend-date,
|
|
.codeburn-kv-label {
|
|
font-size: 11.5px;
|
|
font-weight: 500;
|
|
}
|
|
.codeburn-trend-cost,
|
|
.codeburn-kv-value {
|
|
font-family: monospace;
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
color: #ffd700;
|
|
}
|
|
.codeburn-trend-calls {
|
|
font-size: 10.5px;
|
|
opacity: 0.6;
|
|
min-width: 62px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* ---- pulse tiles ---- */
|
|
.codeburn-pulse-row {
|
|
spacing: 6px;
|
|
padding: 4px 0;
|
|
}
|
|
.codeburn-pulse-tile {
|
|
padding: 10px 8px;
|
|
border-radius: 8px;
|
|
background: rgba(255, 140, 66, 0.08);
|
|
spacing: 2px;
|
|
}
|
|
.codeburn-pulse-value {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #ff8c42;
|
|
font-family: monospace;
|
|
}
|
|
.codeburn-pulse-label {
|
|
font-size: 10px;
|
|
opacity: 0.6;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* ---- models rows ---- */
|
|
.codeburn-models-rows {
|
|
spacing: 3px;
|
|
padding-top: 4px;
|
|
}
|
|
.codeburn-model-row {
|
|
spacing: 8px;
|
|
padding: 2px 0;
|
|
}
|
|
.codeburn-model-name {
|
|
font-size: 11.5px;
|
|
}
|
|
.codeburn-model-cost {
|
|
font-family: monospace;
|
|
font-size: 11.5px;
|
|
color: #ffd700;
|
|
min-width: 60px;
|
|
text-align: right;
|
|
}
|
|
.codeburn-model-calls {
|
|
font-family: monospace;
|
|
font-size: 10.5px;
|
|
opacity: 0.6;
|
|
min-width: 60px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* ---- dark / light theme hooks ---- */
|
|
.codeburn-light .codeburn-bar-track {
|
|
background-color: rgba(0, 0, 0, 0.08);
|
|
}
|
|
.codeburn-light .codeburn-footer-btn {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
}
|
|
.codeburn-light .codeburn-footer-btn:hover {
|
|
background: rgba(0, 0, 0, 0.08);
|
|
}
|
|
.codeburn-light .codeburn-footer {
|
|
border-top-color: rgba(0, 0, 0, 0.08);
|
|
}
|