6 flex-direction: column;
11 flex-direction: column;
13 border-radius: 0 0 8px 8px;
20 .mce-top-part::before {
25 .page-editor-page-area {
28 box-shadow: vars.$bs-card;
30 @include mixins.lightDark(background-color, #FFF, #333)
37 grid-template-columns: minmax(max-content, 2fr) 1.5fr minmax(max-content, 2fr);
41 @include mixins.larger-than(vars.$bp-xxl) {
42 .page-editor-wysiwyg2024 .page-edit-toolbar,
43 .page-editor-wysiwyg2024 .page-editor-page-area,
44 .page-editor-wysiwyg .page-edit-toolbar,
45 .page-editor-wysiwyg .page-editor-page-area {
49 .page-editor-wysiwyg .floating-toolbox,
50 .page-editor-wysiwyg2024 .floating-toolbox {
55 @include mixins.smaller-than(vars.$bp-m) {
59 justify-content: space-between;
63 .title-input.page-title {
79 input[type="text"]:focus {
82 outline: 1px dashed var(--color-primary);
83 box-shadow: vars.$bs-card;
88 .page-editor-markdown .title-input.page-title input[type="text"] {
92 body.tox-fullscreen .page-editor .edit-area,
93 body.markdown-fullscreen .page-editor .edit-area {
97 body.tox-fullscreen, body.markdown-fullscreen {
98 .page-editor, .flex-fill {
103 @include mixins.smaller-than(vars.$bp-s) {
111 display: inline-block;
116 .page-save-mobile-button {
123 inset-inline-end: vars.$xs;
125 box-shadow: vars.$bs-hover;
126 background-color: currentColor;
130 margin-inline-end: 0;
134 .draft-notification {
135 pointer-events: none;
137 transition: transform ease-in-out 120ms;
138 transform-origin: 50% 50%;
145 padding: 0 !important;
148 // Page content pointers
156 border: 1px solid #CCC;
157 @include mixins.lightDark(border-color, #ccc, #000);
159 box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
160 @include mixins.lightDark(background-color, #fff, #333);
173 margin-inline-start: -8px;
176 transform: rotate(45deg);
177 transform-origin: 50% 50%;
178 border-right: 1px solid #CCC;
179 border-bottom: 1px solid #CCC;
181 @include mixins.lightDark(background-color, #fff, #333);
182 @include mixins.lightDark(border-color, #ccc, #000);
192 background-color: #FFF;
193 border: 1px solid #DDD;
194 @include mixins.lightDark(border-color, #ddd, #000);
202 @include mixins.lightDark(color, #444, #AAA);
204 .input-group .button {
218 @include mixins.lightDark(border-color, #ddd, #000);
222 // Page editor sidebar toolbox
224 @include mixins.lightDark(background-color, #FFF, #222);
226 align-items: stretch;
231 box-shadow: vars.$bs-card;
233 margin-inline-start: vars.$l;
241 &:not(.open) .toolbox-tab-content {
242 display: none !important;
244 .toolbox-toggle svg {
245 transition: transform ease-in-out 180ms;
248 transition: background-color ease-in-out 180ms;
250 &.open .toolbox-toggle {
251 background-color: rgba(255, 0, 0, 0.20);
253 &.open .toolbox-toggle svg {
254 transform: rotate(180deg);
261 border-inline-end: 1px solid #DDD;
262 @include mixins.lightDark(border-inline-end-color, #DDD, #000);
265 margin-inline-end: -1px;
268 @include mixins.lightDark(background-color, #FFFFFF, #222);
274 .tabs-inner > button {
275 @include mixins.lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5));
278 padding: 10px vars.$xs;
282 .tabs-inner > button:hover, &.open .tabs-inner > button.active {
283 color: var(--color-link) !important;
293 background-color: currentColor;
297 &.open .tabs-inner > button.active {
298 border-inline-end: 1px solid var(--color-link);
299 margin-inline-end: -1px;
303 margin: vars.$m 0 0 0;
304 padding: 0 vars.$l vars.$s vars.$l;
311 .tags td, .inline-start-table > div > div > div {
312 padding-inline-end: vars.$s;
313 padding-top: vars.$s;
324 flex-direction: column;
332 @include mixins.smaller-than(vars.$bp-xxl) {
334 margin-inline-start: vars.$s;
338 @include mixins.smaller-than(vars.$bp-s) {
339 .page-editor-page-area-wrap {
340 margin: 4px !important;
343 margin-inline-start: 4px;
345 .floating-toolbox .tabs {
348 .floating-toolbox .tabs-inner > button {
352 padding-block: 0 !important;
354 .page-editor.toolbox-open .page-editor-page-area {
359 .toolbox-tab-content {
362 padding-bottom: 45px;
373 border-bottom: 1px solid #DDD;
380 .comments-container h5 {
386 .comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
390 /* FIXME - Ugly hack to modify the media plugin for TinyMCE */
391 .mce-floatpanel[aria-label="Insert/edit media"] {
397 .entity-list-item > span:first-child,
398 .icon-list-item > span:first-child,
399 .split-icon-list-item > a > .icon,
400 .chapter-expansion > .icon {
407 justify-content: center;
419 background-color: currentColor;
429 display: inline-block;
431 justify-content: center;
437 padding: vars.$xs vars.$s;
440 transition: opacity ease-in-out 120ms;
444 background-color: currentColor;
452 text-decoration: none;
455 @media (prefers-contrast: more) {