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.comment-editor {
5 @_top: comment-editor;
6 @_avatar: 50px;
7 @_avatar-margin: 10px;
8 @_spacing: 10px;
9 @_border-radius: @border-radius-large;
10
11 --bg: hsl(var(--hsl-b3));
12 border-radius: @_border-radius;
13 display: flex;
14 flex-direction: column;
15 background: var(--bg);
16 position: relative;
17
18 &--fancy {
19 @media @desktop {
20 margin-left: (@_avatar + @_avatar-margin);
21 }
22 }
23
24 &__avatar {
25 position: absolute;
26 width: @_avatar;
27 height: @_avatar;
28 right: 100%;
29 margin-right: @_avatar-margin;
30 display: none;
31
32 @media @desktop {
33 display: block;
34 }
35 }
36
37 &__footer {
38 display: flex;
39 flex-wrap: wrap;
40 justify-content: flex-end;
41 padding: 0 (@_spacing - 2px);
42 border-radius: 0 0 @_border-radius @_border-radius;
43 }
44
45 &__footer-item {
46 font-size: @font-size--normal;
47 flex: none;
48 margin: 5px 2px;
49 color: white;
50
51 &--notice {
52 align-self: center;
53 flex: 1;
54 }
55 }
56
57 &__message {
58 .reset-input();
59 .content-font();
60
61 min-height: 3em;
62 padding: @_spacing;
63 font-size: @font-size--phone-input;
64 border-radius: @_border-radius @_border-radius 0 0;
65 border: 2px solid var(--bg);
66 border-bottom: none;
67 background-color: @osu-colour-b5;
68 resize: none;
69
70 @media @desktop {
71 font-size: inherit;
72 }
73
74 &::placeholder {
75 color: @osu-colour-f1;
76 }
77 }
78}