keii.dev
the browser-facing portion of osu!
More usable team settings page on mobile
+17
-6
+17
-6
resources/css/bem/team-settings.less
+17
-6
resources/css/bem/team-settings.less
···
3
4
.team-settings {
5
display: grid;
6
-
gap: 5px;
7
8
&__buttons {
9
display: flex;
···
30
}
31
32
&__item {
33
display: grid;
34
-
grid-template-columns: 2fr 1fr;
35
-
gap: 15px;
36
37
&--buttons {
38
-
grid-template-columns: 1fr auto;
39
}
40
41
&--description {
42
-
grid-template-columns: 1fr 1fr;
43
}
44
45
&--image {
46
-
grid-template-columns: 1fr;
47
}
48
}
49
}
···
3
4
.team-settings {
5
display: grid;
6
+
gap: 15px 5px;
7
+
8
+
@media @desktop {
9
+
gap: 5px;
10
+
}
11
12
&__buttons {
13
display: flex;
···
34
}
35
36
&__item {
37
+
--grid-columns: 1fr;
38
+
--grid-columns-desktop: 2fr 1fr;
39
+
align-items: start;
40
display: grid;
41
+
gap: 5px 15px;
42
+
grid-template-columns: var(--grid-columns);
43
+
44
+
@media @desktop {
45
+
--grid-columns: var(--grid-columns-desktop);
46
+
}
47
48
&--buttons {
49
+
--grid-columns-desktop: 1fr auto;
50
}
51
52
&--description {
53
+
--grid-columns-desktop: 1fr 1fr;
54
}
55
56
&--image {
57
+
--grid-columns-desktop: 1fr;
58
}
59
}
60
}