keii.dev
the browser-facing portion of osu!
Adjust flag size on leaderboard top card
Mainly for team flag but also make more sense in general.
+27
-16
+9
-2
resources/css/bem/beatmap-score-top.less
+9
-2
resources/css/bem/beatmap-score-top.less
···
9
9
flex-direction: column;
10
10
11
11
&__achieved {
12
-
margin: 2px 0;
12
+
margin-bottom: 2px; // more balanced margin
13
13
font-size: @font-size--small;
14
14
}
15
15
16
16
&__avatar {
17
17
flex: none;
18
18
margin: 0px 10px;
19
+
}
20
+
21
+
&__flags {
22
+
display: flex;
23
+
gap: 5px;
24
+
font-size: @flag-size-medium; // icon size
19
25
}
20
26
21
27
&__link-container {
···
130
136
131
137
&__user-box {
132
138
flex: none;
139
+
display: grid;
140
+
gap: 4px;
133
141
134
142
@media @desktop {
135
143
margin-right: 10px;
···
139
147
&__username {
140
148
font-size: 18px;
141
149
font-weight: 700;
142
-
margin-bottom: 2px;
143
150
display: block;
144
151
.link-inverted();
145
152
}
+1
-1
resources/css/bem/flag-country.less
+1
-1
resources/css/bem/flag-country.less
+2
resources/css/variables.less
+2
resources/css/variables.less
+15
-13
resources/js/beatmapsets-show/scoreboard/top-card.tsx
+15
-13
resources/js/beatmapsets-show/scoreboard/top-card.tsx
···
80
80
/>
81
81
</div>
82
82
83
-
<a
84
-
className='u-hover'
85
-
href={route('rankings', {
86
-
country: this.props.score.user.country_code,
87
-
mode: ruleset,
88
-
type: 'performance',
89
-
})}
90
-
>
91
-
<FlagCountry
92
-
country={this.props.score.user.country}
93
-
modifiers='flat'
94
-
/>
95
-
</a>
83
+
<div className='beatmap-score-top__flags'>
84
+
<a
85
+
className='u-hover'
86
+
href={route('rankings', {
87
+
country: this.props.score.user.country_code,
88
+
mode: ruleset,
89
+
type: 'performance',
90
+
})}
91
+
>
92
+
<FlagCountry
93
+
country={this.props.score.user.country}
94
+
modifiers='flat'
95
+
/>
96
+
</a>
97
+
</div>
96
98
</div>
97
99
</div>
98
100