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 {
5 @_avatar-margin: 10px;
6 @_avatar: 40px;
7 @_line-width: 5px;
8 @_line-margin: 10px;
9 @_top: comment;
10 @_spacing: 10px;
11 @_gutter-desktop-left: @gutter-v2-desktop;
12 @_gutter-desktop-right: @gutter-v2-desktop;
13
14 margin-top: @_spacing;
15 font-size: @font-size--normal-2;
16 border-bottom: 0 solid var(--comments-separator-bg);
17 position: relative;
18
19 &--top {
20 border-bottom-width: 1px;
21 margin-top: 0;
22 padding: (@_spacing + 5px) @gutter-v2;
23
24 .@{_top}--single& {
25 border-bottom-width: 0;
26 }
27
28 &:last-of-type {
29 border-bottom-width: 0;
30 }
31
32 @media @desktop {
33 padding-left: @_gutter-desktop-left;
34 padding-right: @_gutter-desktop-right;
35 }
36 }
37
38 &__action {
39 .reset-input();
40 .link-default();
41 text-transform: lowercase;
42 color: @osu-colour-f1;
43 .link-hover({ color: white });
44
45 &:hover {
46 text-decoration: underline;
47 }
48
49 &--active {
50 color: @osu-colour-l1;
51 }
52 }
53
54 &__avatar {
55 width: @_avatar;
56 height: @_avatar;
57 margin-right: @_avatar-margin;
58 flex: none;
59 }
60
61 &__commentable-meta {
62 margin-left: (@_avatar + @_avatar-margin);
63 margin-bottom: 5px;
64 font-size: @font-size--small-2;
65 display: flex;
66 align-items: baseline;
67
68 .@{_top}--single & {
69 margin-left: 0;
70 margin-bottom: 30px;
71 flex-direction: column;
72 font-size: @font-size--title;
73 }
74 }
75
76 &__commentable-meta-icon {
77 font-size: 0.9em;
78 margin-right: 5px;
79 }
80
81 &__commentable-meta-type {
82 background-color: @osu-colour-b6;
83 padding: 5px 15px;
84 margin-right: 5px;
85 border-radius: 10000px;
86 font-size: @font-size--normal;
87
88 .@{_top}--single & {
89 margin-bottom: 10px;
90 }
91 }
92
93 &__container {
94 display: flex;
95 flex: 1;
96 flex-direction: column;
97 min-width: 0;
98 }
99
100 &__deleted {
101 font-weight: bold;
102 margin: 10px 0;
103 }
104
105 &__editor {
106 padding: 10px 0;
107 }
108
109 &__float-container {
110 position: absolute;
111 height: @_avatar;
112 top: 0;
113 display: flex;
114 align-items: center;
115 padding: 0 5px;
116
117 &--left {
118 justify-content: flex-end;
119 left: -@_gutter-desktop-left;
120 width: @_gutter-desktop-left;
121
122 .@{_top}--top > & {
123 left: 0;
124 }
125 }
126
127 &--right {
128 justify-content: flex-start;
129 right: -@_gutter-desktop-right;
130 width: @_gutter-desktop-right;
131
132 .@{_top}--top > & {
133 right: 0;
134 }
135 }
136 }
137
138 &__main {
139 display: flex;
140 position: relative;
141
142 &--deleted {
143 opacity: 0.5;
144 }
145 }
146
147 &__message {
148 margin: 2px 0;
149
150 .@{_top}__main--clip & {
151 height: calc(var(--line-height) * var(--clip-lines));
152 overflow: hidden;
153 position: relative;
154
155 &::after {
156 display: block;
157 content: "";
158 position: absolute;
159 bottom: 0;
160 left: 0;
161 width: 100%;
162 height: calc(var(--line-height) * 3);
163 background-image: linear-gradient(
164 to bottom,
165 hsla(var(--comments-bg-hsl), 0),
166 hsl(var(--comments-bg-hsl))
167 );
168 pointer-events: none;
169 }
170 }
171 }
172
173 &__owner-badge {
174 background-color: @osu-colour-l1;
175 color: @osu-colour-b6;
176 font-weight: bold;
177 font-size: @font-size--small;
178 bottom: 2px;
179 padding: $bottom 5px;
180 border-radius: 10000px;
181 }
182
183 &__replies {
184 margin-top: 10px;
185
186 &--hidden {
187 display: none;
188 }
189
190 &--indented {
191 padding-left: 0;
192
193 @media @desktop {
194 padding-left: 20px;
195 }
196 }
197 }
198
199 &__reply-box {
200 padding-top: 10px;
201 }
202
203 &__row {
204 gap: 4px;
205 display: flex;
206 flex-wrap: wrap;
207 align-items: baseline;
208 font-weight: 600;
209
210 &--footer {
211 color: @osu-colour-f1;
212 font-size: @font-size--normal;
213 column-gap: 10px;
214
215 a {
216 color: @osu-colour-f1;
217 .link-hover({ color: white });
218 }
219 }
220
221 &--header {
222 font-size: @font-size--title-small;
223 }
224 }
225
226 &__row-item {
227 &--info {
228 font-weight: normal;
229 }
230
231 &--pinned {
232 .fa {
233 vertical-align: middle;
234 }
235 }
236
237 &--replies {
238 width: 100%;
239 }
240 }
241
242 &__toggle-clip {
243 .reset-input();
244 width: max-content;
245 color: @osu-colour-l2;
246 padding: 5px 0;
247
248 .link-hover({
249 color: @osu-colour-l1;
250 });
251 }
252
253 &__toolbar {
254 margin: 10px 0;
255 display: flex;
256 justify-content: flex-end;
257 }
258
259 &__top-show-replies {
260 .reset-input();
261 width: @_avatar;
262 font-size: 18px; // icon size
263 display: none;
264 color: @osu-colour-f1;
265
266 @media @desktop {
267 display: block;
268
269 .@{_top}--single & {
270 display: none;
271 }
272 }
273 }
274}