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.supporter-perk-list-hero {
5 height: 500px;
6 display: flex;
7 justify-content: flex-end;
8 padding: 20px;
9 position: relative;
10
11 @media @mobile {
12 height: 300px;
13 justify-content: center;
14 }
15
16 &__content {
17 margin: 0;
18 }
19
20 &__icon {
21 color: #fff;
22 font-size: 26px; // icon size
23 padding: 20px;
24 margin-top: -50px;
25 margin-bottom: -50px;
26 margin-left: 250px;
27 }
28
29 &__icon-bg {
30 color: @osu-colour-blue-3;
31 }
32
33 &__image {
34 .full-size();
35 object-fit: cover;
36 }
37
38 &__meta {
39 width: 350px;
40 background-color: hsla(var(--hsl-b4), 0.95);
41 border-radius: 10px;
42 padding: 10px;
43 align-self: center;
44 position: relative;
45
46 @media @desktop {
47 margin-top: -50px;
48 }
49 }
50
51 &__text {
52 padding: 10px;
53 color: @osu-colour-f1;
54 }
55
56 &__title {
57 margin: 0 0 10px;
58 font-size: 120%;
59 color: white;
60 }
61}