style: restrict glow effect exclusively to bright blue contribution tiles
This commit is contained in:
parent
b5410e81e3
commit
992983b9e2
3 changed files with 29 additions and 14 deletions
|
|
@ -65,10 +65,15 @@ var DEEPSEEK_LEVELS = [
|
|||
];
|
||||
var TILE_SHADOWS = [
|
||||
"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)"
|
||||
// Level 0: Black / flat
|
||||
"none",
|
||||
// Level 1: Dark deep blue / flat
|
||||
"none",
|
||||
// Level 2: Mid blue / flat
|
||||
"0 0 4px rgba(51, 109, 250, 0.4)",
|
||||
// Level 3: Faint brand blue edge
|
||||
"0 0 10px rgba(79, 133, 255, 0.85), 0 0 2px rgba(255, 255, 255, 0.5)"
|
||||
// Level 4: Bright electric blue glow
|
||||
];
|
||||
function HeatmapView() {
|
||||
const [data, setData] = (0, import_react.useState)(null);
|
||||
|
|
@ -475,6 +480,8 @@ function HeatmapView() {
|
|||
}
|
||||
const lvl = day.stats.level || 0;
|
||||
const bg = DEEPSEEK_LEVELS[lvl];
|
||||
const isHovered = hoveredDay?.date === day.date;
|
||||
const currentShadow = isHovered ? lvl >= 3 ? "0 0 12px rgba(79, 133, 255, 0.95), 0 0 2px #ffffff" : "0 0 4px rgba(51, 109, 250, 0.4)" : TILE_SHADOWS[lvl];
|
||||
return /* @__PURE__ */ import_react.default.createElement(
|
||||
"div",
|
||||
{
|
||||
|
|
@ -493,9 +500,11 @@ function HeatmapView() {
|
|||
height: 11,
|
||||
borderRadius: 2,
|
||||
backgroundColor: bg,
|
||||
boxShadow: TILE_SHADOWS[lvl],
|
||||
boxShadow: currentShadow,
|
||||
border: lvl === 0 ? "1px solid rgba(255, 255, 255, 0.05)" : "1px solid transparent",
|
||||
cursor: "pointer",
|
||||
transform: isHovered ? "scale(1.15)" : "scale(1)",
|
||||
zIndex: isHovered ? 5 : 1,
|
||||
transition: "all 0.12s ease",
|
||||
position: "relative"
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -66,13 +66,13 @@ const DEEPSEEK_LEVELS = [
|
|||
"#4f85ff", // Level 4: Bright electric DeepSeek blue
|
||||
];
|
||||
|
||||
// Subdued, clean depth for tiles
|
||||
// Glow effect strictly for the bright blue contribution tiles
|
||||
const TILE_SHADOWS = [
|
||||
"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)",
|
||||
"none", // Level 0: Black / flat
|
||||
"none", // Level 1: Dark deep blue / flat
|
||||
"none", // Level 2: Mid blue / flat
|
||||
"0 0 4px rgba(51, 109, 250, 0.4)", // Level 3: Faint brand blue edge
|
||||
"0 0 10px rgba(79, 133, 255, 0.85), 0 0 2px rgba(255, 255, 255, 0.5)", // Level 4: Bright electric blue glow
|
||||
];
|
||||
|
||||
export function HeatmapView() {
|
||||
|
|
@ -578,6 +578,10 @@ export function HeatmapView() {
|
|||
}
|
||||
const lvl = day.stats.level || 0;
|
||||
const bg = DEEPSEEK_LEVELS[lvl];
|
||||
const isHovered = hoveredDay?.date === day.date;
|
||||
const currentShadow = isHovered
|
||||
? (lvl >= 3 ? "0 0 12px rgba(79, 133, 255, 0.95), 0 0 2px #ffffff" : "0 0 4px rgba(51, 109, 250, 0.4)")
|
||||
: TILE_SHADOWS[lvl];
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -596,12 +600,14 @@ export function HeatmapView() {
|
|||
height: 11,
|
||||
borderRadius: 2,
|
||||
backgroundColor: bg,
|
||||
boxShadow: TILE_SHADOWS[lvl],
|
||||
boxShadow: currentShadow,
|
||||
border:
|
||||
lvl === 0
|
||||
? "1px solid rgba(255, 255, 255, 0.05)"
|
||||
: "1px solid transparent",
|
||||
cursor: "pointer",
|
||||
transform: isHovered ? "scale(1.15)" : "scale(1)",
|
||||
zIndex: isHovered ? 5 : 1,
|
||||
transition: "all 0.12s ease",
|
||||
position: "relative",
|
||||
}}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue