145 lines
4.1 KiB
CSS
145 lines
4.1 KiB
CSS
/* ────────────────────────────────────────────────────────────────
|
||
assets/leaderboard.css (namespaced so it never leaks styles)
|
||
──────────────────────────────────────────────────────────────── */
|
||
|
||
/* hide rows that don’t match search */
|
||
#letta-leaderboard tr.hidden { display: none !important; }
|
||
|
||
/* clickable, sortable headers */
|
||
#letta-leaderboard thead th[data-key] {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
position: relative;
|
||
}
|
||
#letta-leaderboard thead th.asc::after,
|
||
#letta-leaderboard thead th.desc::after {
|
||
position: absolute;
|
||
right: 6px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 10px;
|
||
line-height: 1;
|
||
}
|
||
#letta-leaderboard thead th.asc::after { content: "▲"; }
|
||
#letta-leaderboard thead th.desc::after { content: "▼"; }
|
||
|
||
/* bar-chart cells */
|
||
#letta-leaderboard .bar-cell {
|
||
position: relative;
|
||
padding: 8px;
|
||
overflow: hidden;
|
||
}
|
||
#letta-leaderboard .bar-viz {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
height: 36px;
|
||
z-index: 1;
|
||
max-width: 100%;
|
||
border-radius: 0;
|
||
}
|
||
#letta-leaderboard .bar-cell span.value {
|
||
position: absolute;
|
||
left: 5px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: rgba(255, 255, 255, 0.7);
|
||
padding: 0 4px;
|
||
font-size: 14px;
|
||
z-index: 2;
|
||
border-radius: 0;
|
||
}
|
||
#letta-leaderboard .bar-cell span.warn {
|
||
position: absolute;
|
||
right: 5px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 15px;
|
||
line-height: 1;
|
||
color: #dc3545;
|
||
cursor: help;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* bar colours */
|
||
#letta-leaderboard .avg .bar-viz { background: rgba(40, 167, 69, 0.35); } /* green */
|
||
#letta-leaderboard .cost-ok .bar-viz { background: rgba(255, 193, 7, 0.35); } /* amber */
|
||
#letta-leaderboard .cost-high .bar-viz { background: rgba(220, 53, 69, 0.35); } /* red */
|
||
|
||
/* faint ruler + right border */
|
||
#letta-leaderboard .bar-cell::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 8px;
|
||
transform: translateY(-50%);
|
||
pointer-events: none;
|
||
background: repeating-linear-gradient(
|
||
90deg,
|
||
rgba(170, 170, 170, 0.5) 0 1px,
|
||
transparent 1px 25%
|
||
);
|
||
}
|
||
#letta-leaderboard .bar-cell::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0;
|
||
width: 1px;
|
||
height: 8px;
|
||
background: rgba(170, 170, 170, 0.5);
|
||
transform: translateY(-50%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* table layout tweaks */
|
||
#letta-leaderboard tbody tr { height: 50px; }
|
||
#letta-leaderboard .metric { width: 32%; }
|
||
#letta-leaderboard table { table-layout: fixed; }
|
||
|
||
/* search box */
|
||
#letta-leaderboard #lb-search,
|
||
#letta-leaderboard #lb-search:focus {
|
||
border-radius: 0 !important;
|
||
outline: none;
|
||
}
|
||
|
||
/* ───────────────────────────────
|
||
Dark-mode overrides
|
||
(everything else inherits)
|
||
───────────────────────────────*/
|
||
:is(.dark) #letta-leaderboard {
|
||
|
||
/* 1. Bar-fill colours — a hair brighter & less transparent */
|
||
.avg .bar-viz { background: rgba(56, 189, 98 , .55); } /* green */
|
||
.cost-ok .bar-viz { background: rgba(255, 213, 90 , .55); } /* amber */
|
||
.cost-high .bar-viz { background: rgba(255, 99 ,132 , .55); } /* red */
|
||
|
||
/* 2. Ruler + right-edge -- subtle light lines instead of grey */
|
||
.bar-cell::before {
|
||
background: repeating-linear-gradient(
|
||
90deg,
|
||
rgba(255,255,255,.12) 0 1px,
|
||
transparent 1px 25%
|
||
);
|
||
}
|
||
.bar-cell::after { background: rgba(255,255,255,.12); }
|
||
|
||
/* 3. Value pill – dark background so it doesn’t glow */
|
||
.bar-cell span.value {
|
||
background: rgba(0,0,0,.65);
|
||
color: #fff;
|
||
}
|
||
|
||
/* 4. Header text & sort glyphs – lighten slightly */
|
||
thead th { color:#e2e2e2; }
|
||
thead th::after { color:#e2e2e2; }
|
||
}
|
||
|
||
/* 5. Header row background */
|
||
:is(.dark) #letta-leaderboard thead {
|
||
background:#1a1a1a !important; /* pick any dark tone */
|
||
} |