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-discussion-new {
5 @_avatar-size: 45px;
6 @_side-padding: 20px;
7
8 .default-box-shadow();
9 display: flex;
10 background-color: @osu-colour-b4;
11 flex-direction: column;
12
13 &__avatar {
14 flex: none;
15 width: @_avatar-size;
16 height: @_avatar-size;
17 }
18
19 &__content {
20 display: flex;
21 padding: 0 @_side-padding 10px;
22 }
23
24 &__footer {
25 display: flex;
26 flex-wrap: wrap;
27 gap: 5px;
28 background-color: @osu-colour-b5;
29 padding: 10px @_side-padding;
30 justify-content: space-between;
31
32 @media @mobile {
33 flex-direction: column;
34 }
35 }
36
37 &__footer-content {
38 display: flex;
39 min-height: 2em; // prevent squashing when wrapping.
40
41 &--right {
42 gap: 5px;
43 justify-content: flex-end;
44 flex: 1 0 auto;
45 flex-wrap: wrap;
46 }
47 }
48
49 &__footer-message {
50 .default-text-shadow();
51 display: flex;
52 align-items: center;
53 padding: 5px 10px;
54 font-size: @font-size--small-2;
55 color: #fff;
56 background-color: @osu-colour-b3;
57 border-radius: 0 @border-radius-base @border-radius-base 0;
58
59 &--label {
60 background-color: @osu-colour-b6;
61 border-radius: @border-radius-base 0 0 @border-radius-base;
62 flex-grow: 0;
63 }
64 }
65
66 &__login-required {
67 .content-font();
68 color: @osu-colour-f1;
69 padding: 0 20px 20px 20px;
70 font-size: @font-size--title-small-2;
71 }
72
73 &__message {
74 .content-font();
75 color: @osu-colour-f1;
76 flex: 1;
77 padding-left: 10px;
78 font-size: @font-size--title-small-2;
79
80 display: flex;
81 flex-direction: column;
82 }
83
84 &__message-area {
85 color: white;
86 .reset-input();
87 resize: vertical;
88 width: 100%;
89 max-height: calc(50 * var(--vh, 1vh));
90 min-height: 3em;
91 -webkit-overflow-scrolling: touch;
92
93 flex: 1 0 auto;
94 font-size: @font-size--phone-input;
95
96 @media @mobile {
97 max-height: calc(40 * var(--vh, 1vh));
98 }
99
100 &::placeholder {
101 color: @osu-colour-b1;
102 }
103
104 @media @desktop {
105 font-size: inherit;
106 }
107 }
108
109 &__message-counter {
110 font-size: @font-size--normal;
111 text-align: right;
112 margin-top: 5px;
113
114 &--almost-over {
115 color: @yellow-dark;
116 }
117
118 &--over {
119 color: @red;
120 font-weight: 700;
121 }
122 }
123
124 &__notice {
125 background-color: @osu-colour-b5;
126 padding: 5px @_side-padding;
127 color: #fff;
128 font-size: @font-size--normal;
129 }
130
131 &__notice-checkbox {
132 margin: 5px 0 0;
133 text-transform: initial;
134 font-weight: initial;
135 }
136
137 &__type {
138 color: #999;
139 margin: 0 5px;
140
141 &--active {
142 color: #fff;
143 }
144 }
145
146 &__types {
147 display: flex;
148 justify-content: center;
149 margin-bottom: 5px;
150 }
151}