oiupoyt/token-contribution
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

style: subdue and soften glow effects for clean, balanced aesthetics

Browse source
This commit is contained in:
katR 2026-10-09 16:40:06 +05:30
parent 59790081bc
commit b5410e81e3
4 changed files with 47 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
lib/client.js
View file

@ -64,11 +64,11 @@ var DEEPSEEK_LEVELS = [
// Level 4: Bright electric DeepSeek blue
];
var TILE_SHADOWS = [
"inset 0 1px 2px rgba(0, 0, 0, 0.7)",
"0 0 4px rgba(21, 44, 111, 0.5)",
"0 0 7px rgba(31, 76, 219, 0.65), inset 0 0 2px rgba(255, 255, 255, 0.2)",
"0 0 10px rgba(51, 109, 250, 0.8), inset 0 0 3px rgba(255, 255, 255, 0.35)",
"0 0 14px rgba(79, 133, 255, 0.95), 0 0 3px #ffffff, inset 0 0 4px #ffffff"
"none",
"0 0 2px rgba(21, 44, 111, 0.25)",
"0 0 3px rgba(31, 76, 219, 0.35)",
"0 0 4px rgba(51, 109, 250, 0.45)",
"0 0 6px rgba(79, 133, 255, 0.55)"
];
function HeatmapView() {
const [data, setData] = (0, import_react.useState)(null);
@ -355,60 +355,60 @@ function HeatmapView() {
"div",
{
style: {
background: "radial-gradient(ellipse at 50% 0%, rgba(51, 109, 250, 0.08) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 100%)",
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 10,
padding: "14px 16px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)"
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
}
},
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, "Total Tokens"),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#4f85ff", textShadow: "0 0 16px rgba(79, 133, 255, 0.65), 0 0 4px rgba(79, 133, 255, 0.4)" } }, formatNumber(summary.totalTokens)),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#4f85ff" } }, formatNumber(summary.totalTokens)),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, formatExact(summary.totalTokens), " tokens")
),
/* @__PURE__ */ import_react.default.createElement(
"div",
{
style: {
background: "radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, 0.08) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 100%)",
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 10,
padding: "14px 16px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)"
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
}
},
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, "Cache Hit Ratio"),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#38bdf8", textShadow: "0 0 14px rgba(56, 189, 248, 0.55)" } }, cacheHitPercent, "%"),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#38bdf8" } }, cacheHitPercent, "%"),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, formatNumber(summary.totalCacheReadTokens), " cached reads")
),
/* @__PURE__ */ import_react.default.createElement(
"div",
{
style: {
background: "radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.03) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 100%)",
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 10,
padding: "14px 16px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)"
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
}
},
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, selectedSessionId === "all" ? "Daily Average" : "Total Steps"),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)", textShadow: "0 0 12px rgba(255, 255, 255, 0.2)" } }, selectedSessionId === "all" ? formatNumber(summary.dailyAverage) : summary.totalTurns),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)" } }, selectedSessionId === "all" ? formatNumber(summary.dailyAverage) : summary.totalTurns),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, selectedSessionId === "all" ? `Across ${summary.activeDays} active days` : `${formatNumber(summary.totalInputTokens + summary.totalOutputTokens)} billed`)
),
/* @__PURE__ */ import_react.default.createElement(
"div",
{
style: {
background: "radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.03) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 100%)",
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 10,
padding: "14px 16px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)"
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
}
},
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, selectedSessionId === "all" ? "Active Streak" : "Active Days"),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)", textShadow: "0 0 12px rgba(255, 255, 255, 0.2)" } }, selectedSessionId === "all" ? `${summary.currentStreak} days` : `${summary.activeDays} days`),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)" } }, selectedSessionId === "all" ? `${summary.currentStreak} days` : `${summary.activeDays} days`),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, selectedSessionId === "all" ? `Longest streak: ${summary.longestStreak} days` : `Session: ${activeView.sessionTitle.slice(0, 24)}`)
)
),
@ -416,13 +416,13 @@ function HeatmapView() {
"div",
{
style: {
background: "radial-gradient(ellipse 90% 50% at 50% 0%, rgba(51, 109, 250, 0.09) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 85%)",
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 12,
padding: "20px 22px",
position: "relative",
overflowX: "auto",
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06)"
boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2)"
}
},
/* @__PURE__ */ import_react.default.createElement(
@ -698,18 +698,18 @@ function apply(ctx) {
font-size: 12px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 0 14px rgba(51, 109, 250, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
transition: all 0.15s ease;
`;
button.onmouseenter = () => {
button.style.background = "rgba(51, 109, 250, 0.22)";
button.style.borderColor = "#336dfa";
button.style.boxShadow = "0 0 20px rgba(79, 133, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15)";
button.style.boxShadow = "0 2px 8px rgba(51, 109, 250, 0.25)";
};
button.onmouseleave = () => {
button.style.background = "rgba(51, 109, 250, 0.12)";
button.style.borderColor = "rgba(51, 109, 250, 0.35)";
button.style.boxShadow = "0 0 14px rgba(51, 109, 250, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08)";
button.style.boxShadow = "0 1px 4px rgba(0, 0, 0, 0.15)";
};
button.onclick = (e) => {
e.preventDefault();

4
lib/client.js.map
View file

File diff suppressed because one or more lines are too long

40
src/client/HeatmapView.tsx
View file

@ -66,13 +66,13 @@ const DEEPSEEK_LEVELS = [
"#4f85ff", // Level 4: Bright electric DeepSeek blue
];
// Luminous glow & depth shading for tiles
// Subdued, clean depth for tiles
const TILE_SHADOWS = [
"inset 0 1px 2px rgba(0, 0, 0, 0.7)",
"0 0 4px rgba(21, 44, 111, 0.5)",
"0 0 7px rgba(31, 76, 219, 0.65), inset 0 0 2px rgba(255, 255, 255, 0.2)",
"0 0 10px rgba(51, 109, 250, 0.8), inset 0 0 3px rgba(255, 255, 255, 0.35)",
"0 0 14px rgba(79, 133, 255, 0.95), 0 0 3px #ffffff, inset 0 0 4px #ffffff",
"none",
"0 0 2px rgba(21, 44, 111, 0.25)",
"0 0 3px rgba(31, 76, 219, 0.35)",
"0 0 4px rgba(51, 109, 250, 0.45)",
"0 0 6px rgba(79, 133, 255, 0.55)",
];
export function HeatmapView() {
@ -412,17 +412,17 @@ export function HeatmapView() {
{/* Card 1: Total Tokens */}
<div
style={{
background: "radial-gradient(ellipse at 50% 0%, rgba(51, 109, 250, 0.08) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 100%)",
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 10,
padding: "14px 16px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
}}
>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }}>
Total Tokens
</div>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#4f85ff", textShadow: "0 0 16px rgba(79, 133, 255, 0.65), 0 0 4px rgba(79, 133, 255, 0.4)" }}>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#4f85ff" }}>
{formatNumber(summary.totalTokens)}
</div>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" }}>
@ -433,17 +433,17 @@ export function HeatmapView() {
{/* Card 2: Cache Hit */}
<div
style={{
background: "radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, 0.08) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 100%)",
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 10,
padding: "14px 16px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
}}
>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }}>
Cache Hit Ratio
</div>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#38bdf8", textShadow: "0 0 14px rgba(56, 189, 248, 0.55)" }}>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#38bdf8" }}>
{cacheHitPercent}%
</div>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" }}>
@ -454,17 +454,17 @@ export function HeatmapView() {
{/* Card 3: Daily Average / Turns */}
<div
style={{
background: "radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.03) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 100%)",
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 10,
padding: "14px 16px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
}}
>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }}>
{selectedSessionId === "all" ? "Daily Average" : "Total Steps"}
</div>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)", textShadow: "0 0 12px rgba(255, 255, 255, 0.2)" }}>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)" }}>
{selectedSessionId === "all" ? formatNumber(summary.dailyAverage) : summary.totalTurns}
</div>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" }}>
@ -475,17 +475,17 @@ export function HeatmapView() {
{/* Card 4: Streak / Activity */}
<div
style={{
background: "radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.03) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 100%)",
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 10,
padding: "14px 16px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
}}
>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }}>
{selectedSessionId === "all" ? "Active Streak" : "Active Days"}
</div>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)", textShadow: "0 0 12px rgba(255, 255, 255, 0.2)" }}>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)" }}>
{selectedSessionId === "all" ? `${summary.currentStreak} days` : `${summary.activeDays} days`}
</div>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" }}>
@ -497,13 +497,13 @@ export function HeatmapView() {
{/* Heatmap Card */}
<div
style={{
background: "radial-gradient(ellipse 90% 50% at 50% 0%, rgba(51, 109, 250, 0.09) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 85%)",
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 12,
padding: "20px 22px",
position: "relative",
overflowX: "auto",
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06)",
boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2)",
}}
>
<div

6
src/client/index.tsx
View file

@ -85,18 +85,18 @@ export function apply(ctx: any) {
font-size: 12px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 0 14px rgba(51, 109, 250, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
transition: all 0.15s ease;
`;
button.onmouseenter = () => {
button.style.background = "rgba(51, 109, 250, 0.22)";
button.style.borderColor = "#336dfa";
button.style.boxShadow = "0 0 20px rgba(79, 133, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15)";
button.style.boxShadow = "0 2px 8px rgba(51, 109, 250, 0.25)";
};
button.onmouseleave = () => {
button.style.background = "rgba(51, 109, 250, 0.12)";
button.style.borderColor = "rgba(51, 109, 250, 0.35)";
button.style.boxShadow = "0 0 14px rgba(51, 109, 250, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08)";
button.style.boxShadow = "0 1px 4px rgba(0, 0, 0, 0.15)";
};
button.onclick = (e) => {
e.preventDefault();