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.beatmap-list {
5 @top: beatmap-list;
6 color: #fff;
7 min-width: 0;
8 position: relative;
9
10 &--selecting {
11 z-index: @z-index--blackout-visible;
12 }
13
14 &__body {
15 height: var(--box-height);
16 min-width: 0;
17 }
18
19 &__item {
20 .link-plain();
21 .link-white();
22
23 cursor: pointer;
24 display: flex;
25 align-items: center;
26 text-align: left;
27 padding: 3px 10px;
28 gap: 10px;
29 font-size: @font-size--title-small;
30
31 &:hover {
32 background-color: @osu-colour-b6;
33 }
34
35 &--selected {
36 .default-box-shadow();
37 .default-border-radius();
38 background-color: @osu-colour-b5;
39 box-shadow: 0 0 0 2px fade(#000, 25%);
40 height: 100%;
41 padding-top: 10px;
42 padding-bottom: 10px;
43 min-width: 0;
44 font-size: inherit;
45
46 &:hover {
47 background-color: @osu-colour-b6;
48 }
49 }
50
51 &--current {
52 background-color: @osu-colour-b6;
53 }
54 }
55
56 &__item-count {
57 .default-border-radius();
58 padding: 2px 5px;
59 font-size: 0.7em;
60 font-weight: bold;
61 margin-left: 10px;
62 background-color: hsl(var(--hsl-b2));
63 color: hsl(var(--hsl-b5));
64 }
65
66 &__item-selector-button {
67 margin-left: auto;
68 }
69
70 &__selector {
71 display: flex;
72 flex-direction: column;
73 overflow-y: scroll;
74 max-height: 70vh;
75 }
76
77 &__selector-container {
78 .default-box-shadow();
79 .default-border-radius();
80 .fancy-scrollbar();
81 background-color: @osu-colour-b5;
82 position: absolute;
83 top: 100%;
84 left: 0;
85 margin-top: 5px;
86 padding: 10px 0;
87 min-width: 100%;
88 width: max-content;
89 max-width: min(max(90vw, 100%), @container-sm);
90
91 display: none;
92 .@{top}--selecting & {
93 display: grid;
94 }
95 }
96}