this repo has no description
Potentially fix unwieldy margins once and for all
+90
-82
+90
-82
src/components/account-info.css
+90
-82
src/components/account-info.css
···
5
5
overflow-y: auto;
6
6
max-width: 100%;
7
7
--banner-overlap: 44px;
8
+
--posting-stats-size: 8px;
9
+
--original-color: var(--link-color);
10
+
11
+
.note {
12
+
font-size: 95%;
13
+
line-height: 1.4;
14
+
text-wrap: pretty;
15
+
margin-bottom: 16px;
16
+
17
+
> *:first-child {
18
+
margin-top: 0;
19
+
padding-top: 0;
20
+
}
21
+
> *:last-child {
22
+
margin-bottom: 0;
23
+
padding-bottom: 0;
24
+
}
25
+
26
+
&:not(:has(p)):not(:empty) {
27
+
/* Some notes don't have <p> tags, so we need to add some padding */
28
+
padding: 1em 0;
29
+
}
30
+
}
31
+
32
+
.posting-stats {
33
+
font-size: 90%;
34
+
color: var(--text-insignificant-color);
35
+
background-color: var(--bg-faded-color);
36
+
padding: 8px 12px;
37
+
38
+
&:is(:hover, :focus-within) {
39
+
background-color: var(--link-bg-hover-color);
40
+
}
41
+
}
42
+
43
+
.posting-stats-bar {
44
+
--gap: 0.5px;
45
+
--gap-color: var(--outline-color);
46
+
height: var(--posting-stats-size);
47
+
border-radius: var(--posting-stats-size);
48
+
overflow: hidden;
49
+
margin: 8px 0;
50
+
box-shadow: inset 0 0 0 1px var(--outline-color),
51
+
inset 0 0 0 1.5px var(--bg-blur-color);
52
+
background-color: var(--bg-color);
53
+
background-repeat: no-repeat;
54
+
animation: swoosh-bg-image 0.3s ease-in-out 0.3s both;
55
+
background-image: linear-gradient(
56
+
to right,
57
+
var(--original-color) 0%,
58
+
var(--original-color) calc(var(--originals-percentage) - var(--gap)),
59
+
var(--gap-color) calc(var(--originals-percentage) - var(--gap)),
60
+
var(--gap-color) calc(var(--originals-percentage) + var(--gap)),
61
+
var(--reply-to-color) calc(var(--originals-percentage) + var(--gap)),
62
+
var(--reply-to-color) calc(var(--replies-percentage) - var(--gap)),
63
+
var(--gap-color) calc(var(--replies-percentage) - var(--gap)),
64
+
var(--gap-color) calc(var(--replies-percentage) + var(--gap)),
65
+
var(--reblog-color) calc(var(--replies-percentage) + var(--gap)),
66
+
var(--reblog-color) 100%
67
+
);
68
+
}
69
+
70
+
.posting-stats-legends {
71
+
font-size: 12px;
72
+
text-transform: uppercase;
73
+
}
74
+
75
+
.posting-stats-legend-item {
76
+
display: inline-block;
77
+
width: var(--posting-stats-size);
78
+
height: var(--posting-stats-size);
79
+
border-radius: var(--posting-stats-size);
80
+
background-color: var(--text-insignificant-color);
81
+
vertical-align: middle;
82
+
margin: 0 4px 2px;
83
+
/* border: 1px solid var(--outline-color); */
84
+
box-shadow: inset 0 0 0 1px var(--outline-color),
85
+
inset 0 0 0 1.5px var(--bg-blur-color);
86
+
87
+
&.posting-stats-legend-item-originals {
88
+
background-color: var(--original-color);
89
+
}
90
+
&.posting-stats-legend-item-replies {
91
+
background-color: var(--reply-to-color);
92
+
}
93
+
&.posting-stats-legend-item-boosts {
94
+
background-color: var(--reblog-color);
95
+
}
96
+
}
8
97
}
9
98
10
99
.account-container.skeleton {
···
252
341
}
253
342
}
254
343
255
-
.account-container .note {
256
-
font-size: 95%;
257
-
line-height: 1.4;
258
-
text-wrap: pretty;
259
-
}
260
-
.account-container .note:not(:has(p)):not(:empty) {
261
-
/* Some notes don't have <p> tags, so we need to add some padding */
262
-
padding: 1em 0;
263
-
}
264
-
265
344
.account-container .stats {
266
345
display: flex;
267
346
/* flex-wrap: wrap; */
···
521
600
}
522
601
523
602
main {
524
-
margin-top: -8px;
603
+
/* margin-top: -8px; */
525
604
padding-top: 1px;
526
605
padding-bottom: 16px;
527
606
}
···
603
682
604
683
&.loading {
605
684
animation: loading-spin 0.35s linear both infinite !important;
606
-
}
607
-
}
608
-
609
-
.account-container {
610
-
--posting-stats-size: 8px;
611
-
--original-color: var(--link-color);
612
-
613
-
.posting-stats {
614
-
font-size: 90%;
615
-
color: var(--text-insignificant-color);
616
-
background-color: var(--bg-faded-color);
617
-
padding: 8px 12px;
618
-
619
-
&:is(:hover, :focus-within) {
620
-
background-color: var(--link-bg-hover-color);
621
-
}
622
-
}
623
-
624
-
.posting-stats-bar {
625
-
--gap: 0.5px;
626
-
--gap-color: var(--outline-color);
627
-
height: var(--posting-stats-size);
628
-
border-radius: var(--posting-stats-size);
629
-
overflow: hidden;
630
-
margin: 8px 0;
631
-
box-shadow: inset 0 0 0 1px var(--outline-color),
632
-
inset 0 0 0 1.5px var(--bg-blur-color);
633
-
background-color: var(--bg-color);
634
-
background-repeat: no-repeat;
635
-
animation: swoosh-bg-image 0.3s ease-in-out 0.3s both;
636
-
background-image: linear-gradient(
637
-
to right,
638
-
var(--original-color) 0%,
639
-
var(--original-color) calc(var(--originals-percentage) - var(--gap)),
640
-
var(--gap-color) calc(var(--originals-percentage) - var(--gap)),
641
-
var(--gap-color) calc(var(--originals-percentage) + var(--gap)),
642
-
var(--reply-to-color) calc(var(--originals-percentage) + var(--gap)),
643
-
var(--reply-to-color) calc(var(--replies-percentage) - var(--gap)),
644
-
var(--gap-color) calc(var(--replies-percentage) - var(--gap)),
645
-
var(--gap-color) calc(var(--replies-percentage) + var(--gap)),
646
-
var(--reblog-color) calc(var(--replies-percentage) + var(--gap)),
647
-
var(--reblog-color) 100%
648
-
);
649
-
}
650
-
651
-
.posting-stats-legends {
652
-
font-size: 12px;
653
-
text-transform: uppercase;
654
-
}
655
-
656
-
.posting-stats-legend-item {
657
-
display: inline-block;
658
-
width: var(--posting-stats-size);
659
-
height: var(--posting-stats-size);
660
-
border-radius: var(--posting-stats-size);
661
-
background-color: var(--text-insignificant-color);
662
-
vertical-align: middle;
663
-
margin: 0 4px 2px;
664
-
/* border: 1px solid var(--outline-color); */
665
-
box-shadow: inset 0 0 0 1px var(--outline-color),
666
-
inset 0 0 0 1.5px var(--bg-blur-color);
667
-
668
-
&.posting-stats-legend-item-originals {
669
-
background-color: var(--original-color);
670
-
}
671
-
&.posting-stats-legend-item-replies {
672
-
background-color: var(--reply-to-color);
673
-
}
674
-
&.posting-stats-legend-item-boosts {
675
-
background-color: var(--reblog-color);
676
-
}
677
685
}
678
686
}
679
687