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.bbcode-editor {
5 @_top: bbcode-editor;
6 @buttons-margin: 5px;
7 @content-padding: 10px;
8 @editor-padding: 15px;
9
10 .fancy-scrollbar();
11 flex: 1;
12 display: flex;
13 flex-direction: column;
14 min-height: 0; // prevent preview overflow in mobile
15 min-width: 0; // prevent image overflow
16
17 &--create {
18 .default-gutter-v2();
19 padding-top: @editor-padding;
20 padding-bottom: $padding-top;
21 background-color: @osu-colour-b2;
22 }
23
24 &--beatmapset-description-editor {
25 .default-gutter-v2();
26 padding-top: @editor-padding;
27 padding-bottom: $padding-top;
28 background-color: hsl(var(--hsl-b2));
29 border-radius: @border-radius-large;
30 }
31
32 &--profile-page {
33 padding-right: var(--inner-gutter);
34 }
35
36 &__body {
37 .reset-input();
38 font-family: @font-family-monospace;
39 font-size: @font-size--phone-input;
40 resize: vertical;
41 width: 100%;
42 min-height: 150px;
43 flex: 1 0 auto;
44
45 &:invalid {
46 box-shadow: none; // disable highlight on firefox
47 }
48
49 @media @desktop {
50 min-height: 300px;
51 font-size: @font-size--title-small;
52 }
53
54 .@{_top}[data-state="preview"] & {
55 display: none;
56 }
57
58 .@{_top}[data-state="loading-preview"] & {
59 opacity: 0.5;
60 pointer-events: none;
61 }
62
63 .@{_top}--beatmapset-description-editor & {
64 // approximation of 80vh - 3 lines of button bars and editor padding
65 max-height: calc(
66 80vh - 2 * @editor-padding - 2 * @content-padding - 3 *
67 (1em + 2 * @buttons-margin)
68 );
69 }
70 }
71
72 &__button {
73 margin: @buttons-margin;
74
75 &--deactivate {
76 display: none;
77
78 .js-forum-topic-reply[data-state="stick"] & {
79 display: block;
80 }
81 }
82
83 &--hide-on-preview {
84 .@{_top}[data-state="loading-preview"] &,
85 .@{_top}[data-state="preview"] & {
86 display: none;
87 }
88 }
89
90 &--hide-on-write {
91 .@{_top}[data-state="write"] & {
92 display: none;
93 }
94 }
95 }
96
97 &__buttons {
98 margin: @buttons-margin;
99 display: flex;
100
101 &--actions {
102 margin: 0;
103 flex: 1;
104 justify-content: flex-end;
105 }
106
107 &--toolbar {
108 .@{_top}[data-state="loading-preview"] &,
109 .@{_top}[data-state="preview"] & {
110 display: none;
111 }
112 }
113 }
114
115 &__buttons-bar {
116 margin: auto -@buttons-margin -@buttons-margin;
117 display: flex;
118 flex-direction: column;
119 align-items: center;
120
121 @media @desktop {
122 flex-direction: row;
123 }
124 }
125
126 &__content {
127 background-color: hsl(var(--hsl-b3));
128 border-radius: @border-radius-large;
129 padding: @content-padding;
130 flex: 1;
131 display: flex;
132 flex-direction: column;
133 min-height: 0; // prevent preview overflow in mobile
134
135 .@{_top}--create & {
136 padding: 20px 20px 10px;
137 }
138
139 .@{_top}--profile-page & {
140 background-color: transparent;
141 padding: 0 0 var(--padding-vertical); // defined by page-extra
142 }
143 }
144
145 &__header {
146 margin-bottom: 10px;
147 margin-left: 10px;
148 display: flex;
149 align-items: center;
150 }
151
152 &__input-title {
153 .reset-input();
154 font-size: @font-size--title;
155 margin-bottom: 10px;
156 }
157
158 &__preview {
159 display: none;
160
161 .@{_top}[data-state="preview"] & {
162 display: block;
163 min-height: 0;
164 overflow-y: auto;
165 margin-bottom: 5px;
166 }
167 }
168
169 &__title {
170 font-size: @font-size--title-small;
171 color: @osu-colour-c1;
172 padding: 0;
173 margin: 0;
174 font-style: normal;
175 flex: 1;
176 }
177}