changed the colors of the git/forgejo heatmap

This commit is contained in:
dvorakmortonxd 2026-05-20 11:14:00 +02:00
commit 37edd70567
2 changed files with 14 additions and 14 deletions

View file

@ -128,7 +128,7 @@ export default function ContributionHeatmap() {
<div className="contribution-heatmap"> <div className="contribution-heatmap">
<div className="contribution-command-row"> <div className="contribution-command-row">
<div className="contribution-command"> <div className="contribution-command">
<span style={{ color: "var(--green)" }}>martin@git.dvorakmortonxd.dev</span>:<span style={{ color: "var(--gray)" }}>~</span>$ echo &#34;<span style={{ color: "var(--prettypurple)" }}>{totalContribs}</span> contributions in the last year&#34; <span style={{ color: "var(--green)" }}>martin@git.dvorakmortonxd.dev</span>:<span style={{ color: "var(--gray)" }}>~</span>$ echo &#34;<span style={{ color: "var(--aqua)" }}>{totalContribs}</span> contributions in the last year&#34;
</div> </div>
</div> </div>
<div className="heatmap-container"> <div className="heatmap-container">
@ -152,7 +152,7 @@ export default function ContributionHeatmap() {
<div className="heatmap-status-row"> <div className="heatmap-status-row">
<div className="heatmap-status-text"> <div className="heatmap-status-text">
{hoveredCell ? ( {hoveredCell ? (
<span><strong style={{ color: "var(--prettypurple)" }}>{hoveredCell.contribs}</strong> contributions on {hoveredCell.date}</span> <span><strong style={{ color: "var(--aqua)" }}>{hoveredCell.contribs}</strong> contributions on {hoveredCell.date}</span>
) : ( ) : (
<span>Hover over a day to see contributions</span> <span>Hover over a day to see contributions</span>
)} )}

View file

@ -1073,7 +1073,7 @@ body {
align-items: flex-start; align-items: flex-start;
gap: 10px; gap: 10px;
min-width: 0; min-width: 0;
color: var(--white); color: var(--gray);
} }
.contribution-repo { .contribution-repo {
@ -1095,7 +1095,7 @@ body {
.contribution-message { .contribution-message {
min-width: 0; min-width: 0;
color: var(--gray); color: var(--color-white);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -1107,7 +1107,7 @@ body {
overflow-x: auto; overflow-x: auto;
gap: 2px; gap: 2px;
scrollbar-width: none; scrollbar-width: none;
scrollbar-color: var(--gray) transparent; scrollbar-color: var(--green) transparent;
} }
.heatmap-status-row { .heatmap-status-row {
@ -1151,13 +1151,13 @@ body {
.heatmap-cell:hover { .heatmap-cell:hover {
transform: scale(1.2); transform: scale(1.2);
z-index: 10; z-index: 10;
box-shadow: 0 0 6px rgba(142, 68, 173, 0.6); box-shadow: 0 0 6px var(--color-white);
} }
.heatmap-cell[data-level="1"] { background-color: rgba(142, 68, 173, 0.4); } .heatmap-cell[data-level="1"] { background-color: rgba(130,180,19, 0.4); }
.heatmap-cell[data-level="2"] { background-color: rgba(142, 68, 173, 0.6); } .heatmap-cell[data-level="2"] { background-color: rgba(130,180,19, 0.6); }
.heatmap-cell[data-level="3"] { background-color: rgba(142, 68, 173, 0.8); } .heatmap-cell[data-level="3"] { background-color: rgba(130,180,19, 0.8); }
.heatmap-cell[data-level="4"] { background-color: rgba(142, 68, 173, 1); } .heatmap-cell[data-level="4"] { background-color: rgba(130,180,19, 1); }
.heatmap-legend-cell { .heatmap-legend-cell {
width: 11px; width: 11px;
@ -1167,10 +1167,10 @@ body {
flex-shrink: 0; flex-shrink: 0;
} }
.heatmap-legend-cell[data-level="1"] { background-color: rgba(142, 68, 173, 0.4); } .heatmap-legend-cell[data-level="1"] { background-color: rgba(130,180,19, 0.4); }
.heatmap-legend-cell[data-level="2"] { background-color: rgba(142, 68, 173, 0.6); } .heatmap-legend-cell[data-level="2"] { background-color: rgba(130,180,19, 0.6); }
.heatmap-legend-cell[data-level="3"] { background-color: rgba(142, 68, 173, 0.8); } .heatmap-legend-cell[data-level="3"] { background-color: rgba(130,180,19, 0.8); }
.heatmap-legend-cell[data-level="4"] { background-color: rgba(142, 68, 173, 1); } .heatmap-legend-cell[data-level="4"] { background-color: rgba(130,180,19, 1); }
@media (max-width: 520px) { @media (max-width: 520px) {
.contribution-command { .contribution-command {