keii.dev
the browser-facing portion of osu!
1// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
2// See the LICENCE file in the repository root for full licence text.
3
4.mp-history-game {
5 width: 100%;
6 .default-border-radius;
7
8 &__header {
9 --border-radius: @border-radius-base @border-radius-base 0 0;
10 display: block;
11
12 width: 100%;
13 height: 100px;
14
15 border-radius: var(--border-radius);
16 position: relative;
17
18 @media @desktop {
19 height: 150px;
20 }
21 }
22
23 &__header-overlay {
24 width: 100%;
25 height: 100%;
26
27 background-color: #000000;
28 opacity: 0.5;
29
30 border-radius: @border-radius-base @border-radius-base 0 0;
31 }
32
33 &__stats-box {
34 display: flex;
35 flex-direction: column;
36
37 position: absolute;
38 left: 10px;
39 top: 10px;
40
41 @media @desktop {
42 flex-direction: row;
43 }
44 }
45
46 &__stat {
47 .default-text-shadow();
48 font-size: @font-size--small;
49 padding-right: 15px;
50 color: @osu-colour-c1;
51
52 @media @desktop {
53 font-size: @font-size--title-small;
54 }
55 }
56
57 &__metadata-box {
58 width: calc(100% - 70px);
59 position: absolute;
60 left: 10px;
61 bottom: 10px;
62 }
63
64 &__metadata {
65 color: @osu-colour-c1;
66 .default-text-shadow;
67
68 margin: 0;
69
70 &--title {
71 font-size: 16px;
72 overflow: hidden;
73 text-overflow: ellipsis;
74 white-space: nowrap;
75 line-height: normal;
76
77 @media @desktop {
78 font-size: 20px;
79 }
80 }
81
82 &--artist {
83 font-size: 14px;
84 }
85 }
86
87 &__mods {
88 position: absolute;
89 right: 10px;
90 top: 10px;
91 display: flex;
92 --mod-height: @mod-height;
93 }
94
95 &__team-type {
96 position: absolute;
97
98 right: 10px;
99 bottom: 10px;
100
101 width: 40px;
102 height: 40px;
103
104 background-size: contain;
105 }
106
107 &__player-scores {
108 padding: 10px;
109 background-color: @osu-colour-b3;
110
111 &--no-teams,
112 &:last-child {
113 border-radius: 0 0 @border-radius-base @border-radius-base;
114 }
115 }
116
117 &__player-score {
118 width: 100%;
119 height: 125px;
120
121 background-color: @osu-colour-b2;
122
123 margin-bottom: 5px;
124
125 .default-border-radius();
126 .default-box-shadow();
127
128 @media @desktop {
129 height: auto;
130 }
131 }
132
133 &__team-scores {
134 display: flex;
135 flex-direction: row;
136
137 width: 100%;
138 background-color: @osu-colour-b3;
139
140 @media @desktop {
141 justify-content: space-between;
142 height: 90px;
143 }
144
145 &:last-child {
146 border-radius: 0 0 @border-radius-base @border-radius-base;
147 }
148 }
149
150 &__team-score {
151 display: flex;
152 align-items: center;
153 flex-direction: column;
154 width: 50%;
155
156 padding: 20px;
157
158 @media @desktop {
159 width: unset;
160 &--blue {
161 align-items: flex-start;
162 }
163
164 &--red {
165 align-items: flex-end;
166 }
167 }
168 }
169
170 &__team-score-text {
171 text-align: center;
172 @media @desktop {
173 text-align: left;
174 }
175
176 &--name {
177 font-size: 15px;
178 font-weight: 600;
179 color: @osu-colour-c1;
180 }
181
182 &--score {
183 font-size: 26px;
184 color: @osu-colour-c2;
185
186 @media @desktop {
187 font-size: 30px;
188 }
189 }
190 }
191
192 &__results {
193 display: flex;
194 align-items: center;
195 justify-content: center;
196
197 background-color: @osu-colour-b4;
198
199 min-height: 45px;
200 padding: 0 20px;
201
202 border-radius: 0 0 @border-radius-base @border-radius-base;
203 }
204
205 &__results-text {
206 font-size: @font-size--title-small-4;
207 color: hsl(var(--hsl-c1));
208
209 @media @desktop {
210 font-size: @font-size--large;
211 }
212 }
213}