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 = [
|
var TILE_SHADOWS = [
|
||||||
"none",
|
"none",
|
||||||
"0 0 2px rgba(21, 44, 111, 0.25)",
|
// Level 0: Black / flat
|
||||||
"0 0 3px rgba(31, 76, 219, 0.35)",
|
"none",
|
||||||
"0 0 4px rgba(51, 109, 250, 0.45)",
|
// Level 1: Dark deep blue / flat
|
||||||
"0 0 6px rgba(79, 133, 255, 0.55)"
|
"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() {
|
function HeatmapView() {
|
||||||
const [data, setData] = (0, import_react.useState)(null);
|
const [data, setData] = (0, import_react.useState)(null);
|
||||||
|
|
@ -475,6 +480,8 @@ function HeatmapView() {
|
||||||
}
|
}
|
||||||
const lvl = day.stats.level || 0;
|
const lvl = day.stats.level || 0;
|
||||||
const bg = DEEPSEEK_LEVELS[lvl];
|
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(
|
return /* @__PURE__ */ import_react.default.createElement(
|
||||||
"div",
|
"div",
|
||||||
{
|
{
|
||||||
|
|
@ -493,9 +500,11 @@ function HeatmapView() {
|
||||||
height: 11,
|
height: 11,
|
||||||
borderRadius: 2,
|
borderRadius: 2,
|
||||||
backgroundColor: bg,
|
backgroundColor: bg,
|
||||||
boxShadow: TILE_SHADOWS[lvl],
|
boxShadow: currentShadow,
|
||||||
border: lvl === 0 ? "1px solid rgba(255, 255, 255, 0.05)" : "1px solid transparent",
|
border: lvl === 0 ? "1px solid rgba(255, 255, 255, 0.05)" : "1px solid transparent",
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
|
transform: isHovered ? "scale(1.15)" : "scale(1)",
|
||||||
|
zIndex: isHovered ? 5 : 1,
|
||||||
transition: "all 0.12s ease",
|
transition: "all 0.12s ease",
|
||||||
position: "relative"
|
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
|
"#4f85ff", // Level 4: Bright electric DeepSeek blue
|
||||||
];
|
];
|
||||||
|
|
||||||
// Subdued, clean depth for tiles
|
// Glow effect strictly for the bright blue contribution tiles
|
||||||
const TILE_SHADOWS = [
|
const TILE_SHADOWS = [
|
||||||
"none",
|
"none", // Level 0: Black / flat
|
||||||
"0 0 2px rgba(21, 44, 111, 0.25)",
|
"none", // Level 1: Dark deep blue / flat
|
||||||
"0 0 3px rgba(31, 76, 219, 0.35)",
|
"none", // Level 2: Mid blue / flat
|
||||||
"0 0 4px rgba(51, 109, 250, 0.45)",
|
"0 0 4px rgba(51, 109, 250, 0.4)", // Level 3: Faint brand blue edge
|
||||||
"0 0 6px rgba(79, 133, 255, 0.55)",
|
"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() {
|
export function HeatmapView() {
|
||||||
|
|
@ -578,6 +578,10 @@ export function HeatmapView() {
|
||||||
}
|
}
|
||||||
const lvl = day.stats.level || 0;
|
const lvl = day.stats.level || 0;
|
||||||
const bg = DEEPSEEK_LEVELS[lvl];
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|
@ -596,12 +600,14 @@ export function HeatmapView() {
|
||||||
height: 11,
|
height: 11,
|
||||||
borderRadius: 2,
|
borderRadius: 2,
|
||||||
backgroundColor: bg,
|
backgroundColor: bg,
|
||||||
boxShadow: TILE_SHADOWS[lvl],
|
boxShadow: currentShadow,
|
||||||
border:
|
border:
|
||||||
lvl === 0
|
lvl === 0
|
||||||
? "1px solid rgba(255, 255, 255, 0.05)"
|
? "1px solid rgba(255, 255, 255, 0.05)"
|
||||||
: "1px solid transparent",
|
: "1px solid transparent",
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
|
transform: isHovered ? "scale(1.15)" : "scale(1)",
|
||||||
|
zIndex: isHovered ? 5 : 1,
|
||||||
transition: "all 0.12s ease",
|
transition: "all 0.12s ease",
|
||||||
position: "relative",
|
position: "relative",
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue