keii.dev
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.comments {
5 @_top: comments;
6 @_header-spacing: 20px;
7
8 --comments-bg-hsl: var(--hsl-b5);
9 --comments-fg: hsl(var(--hsl-c1));
10 --comments-pinned-bg-hsl: var(--hsl-b4);
11 --comments-separator-bg: hsl(var(--hsl-b6));
12 --comments-toolbar-bg: hsl(var(--hsl-b4));
13 display: flex;
14 flex-direction: column;
15 background-color: hsl(var(--comments-bg-hsl));
16 color: var(--comments-fg);
17
18 &--page-extra {
19 --comments-bg-hsl: var(--hsl-b4);
20 --comments-pinned-bg-hsl: var(--hsl-b3);
21 --comments-separator-bg: hsl(var(--hsl-b5));
22 --comments-toolbar-bg: hsl(var(--hsl-b3));
23 // avoid overriding rounded corner of the page
24 background-color: transparent;
25
26 @media @desktop {
27 margin-bottom: 0;
28 }
29 }
30
31 &__count {
32 font-size: 80%;
33 padding: 5px 10px;
34 margin-left: 5px;
35 border-radius: 10000px;
36 font-weight: bold;
37 background-color: @osu-colour-b6;
38 color: @osu-colour-f1;
39 }
40
41 &__items {
42 padding: 10px 0;
43
44 &--empty {
45 .default-gutter-v2();
46 padding-top: 40px;
47 padding-bottom: 40px;
48 }
49
50 &--loading {
51 opacity: 0.5;
52 }
53
54 &--toolbar {
55 .default-gutter-v2();
56 display: flex;
57 justify-content: space-between;
58 background-color: var(--comments-toolbar-bg);
59 }
60
61 &--pinned {
62 margin-top: 20px;
63 --comments-bg-hsl: var(--comments-pinned-bg-hsl);
64 background-color: hsl(var(--comments-bg-hsl));
65 }
66 }
67
68 &__new {
69 .default-gutter-v2();
70 padding-top: @_header-spacing;
71 padding-bottom: @_header-spacing;
72 }
73
74 &__title {
75 .default-gutter-v2();
76 padding-top: @_header-spacing;
77 padding-bottom: 0;
78 font-size: @font-size--title-small-4;
79 font-style: normal;
80 margin: 0;
81 color: @osu-colour-l1;
82 }
83}