loading up the forgejo repo on tangled to test page performance
1#user-heatmap {
2 width: 100%;
3 font-size: 9px;
4 position: relative;
5}
6
7/* before the Vue component is mounted, show a loading indicator with dummy size */
8/* the ratio is guesswork, see https://github.com/razorness/vue3-calendar-heatmap/issues/26 */
9#user-heatmap.is-loading {
10 aspect-ratio: 5.415; /* the size is about 790 x 145 */
11}
12.user.profile #user-heatmap.is-loading {
13 aspect-ratio: 5.645; /* the size is about 953 x 169 */
14}
15
16#user-heatmap text {
17 fill: currentcolor !important;
18}
19
20/* for the "Less" and "More" legend */
21#user-heatmap .vch__legend .vch__legend {
22 display: flex;
23 font-size: 11px;
24 align-items: center;
25 justify-content: right;
26}
27
28#user-heatmap .vch__legend .vch__legend div:first-child,
29#user-heatmap .vch__legend .vch__legend div:last-child {
30 display: inline-block;
31 padding: 0 5px;
32}
33
34#user-heatmap .vch__day__square:hover {
35 outline: 1.5px solid var(--color-text);
36}
37
38/* move the "? contributions in the last ? months" text from top to bottom */
39#user-heatmap .total-contributions {
40 font-size: 11px;
41 position: absolute;
42 bottom: 0;
43 left: 25px;
44}
45
46@media (max-width: 1200px) {
47 #user-heatmap .total-contributions {
48 left: 21px;
49 }
50}
51
52@media (max-width: 1000px) {
53 #user-heatmap .total-contributions {
54 font-size: 10px;
55 left: 17px;
56 bottom: -4px;
57 }
58}