24330f71b6
* Fix heatmap rendering in Chrome and Safari Apparently SVG inside flexbox renders slightly different across browsers where Firefox would stretch to fit the parent while Chrome and safari wouldn't. Stretch the SVG to the width of the parent for consistent rendering. Also did a few minor tweaks on the min-height of the box so it takes up less space on smaller responsive breakpoints. Fixes: https://github.com/go-gitea/gitea/issues/13634 Fixes: https://github.com/go-gitea/gitea/pull/13637 * position tweak Co-authored-by: zeripath <art27@cantab.net>
65 lines
947 B
Text
65 lines
947 B
Text
#user-heatmap {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: relative;
|
|
min-height: 125px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
> svg {
|
|
width: 100%;
|
|
}
|
|
|
|
svg:not(:root) {
|
|
overflow: inherit;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
text {
|
|
fill: currentColor !important;
|
|
}
|
|
|
|
.total-contributions {
|
|
font-size: 11px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 25px;
|
|
}
|
|
|
|
@media @mediaLgAndDown {
|
|
& {
|
|
min-height: 105px;
|
|
}
|
|
.total-contributions {
|
|
left: 21px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
& {
|
|
min-height: 80px;
|
|
}
|
|
.total-contributions {
|
|
font-size: 10px;
|
|
left: 17px;
|
|
bottom: -4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user.profile #user-heatmap {
|
|
min-height: 135px;
|
|
}
|
|
|
|
@media @mediaLgAndDown {
|
|
.user.profile #user-heatmap {
|
|
min-height: 115px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.user.profile #user-heatmap {
|
|
min-height: 90px;
|
|
}
|
|
}
|