3 flex-direction: column;
9 flex-direction: column;
17 .mce-top-part::before {
22 body.mce-fullscreen .page-editor .edit-area,
23 body.markdown-fullscreen .page-editor .edit-area {
27 body.mce-fullscreen, body.markdown-fullscreen {
28 .page-editor, .flex-fill {
33 @include smaller-than($s) {
38 .page-edit-toolbar .grid.third {
42 display: inline-block;
47 .page-save-mobile-button {
56 box-shadow: $bs-hover;
57 background-color: currentColor;
68 transition: transform ease-in-out 120ms;
69 transform-origin: 50% 50%;
76 padding: 0 !important;
83 overflow-wrap: break-word;
87 img.align-left, table.align-left {
88 float: left !important;
89 margin: $-xs $-m $-m 0;
92 text-align: right !important;
94 img.align-right, table.align-right {
95 float: right !important;
96 margin: $-xs 0 $-xs $-s;
104 img.align-center, table.align-center {
112 h1, h2, h3, h4, h5, h6, pre {
123 height: auto !important;
129 text-decoration: none;
140 white-space: pre-wrap;
145 // Page content pointers
153 border: 1px solid #CCC;
154 @include lightDark(border-color, #ccc, #000);
157 justify-items: center;
160 box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
163 @include lightDark(background-color, #fff, #333);
177 margin-inline-start: -8px;
180 transform: rotate(45deg);
181 transform-origin: 50% 50%;
182 border-block-end: 1px solid #CCC;
183 border-inline-end: 1px solid #CCC;
185 @include lightDark(background-color, #fff, #333);
186 @include lightDark(border-color, #ccc, #000);
197 background-color: #FFF;
198 border: 1px solid #DDD;
199 @include lightDark(border-color, #ddd, #000);
209 display: inline-block;
212 .input-group .button {
225 @include lightDark(border-color, #ddd, #000);
231 border: 1px solid #DDD;
232 @include lightDark(background-color, #fff, #222);
233 @include lightDark(border-color, #DDD, #000);
237 align-items: stretch;
240 transition: width ease-in-out 180ms;
246 [toolbox-toggle] svg {
247 transition: transform ease-in-out 180ms;
250 transition: background-color ease-in-out 180ms;
252 &.open [toolbox-toggle] {
253 background-color: rgba(255, 0, 0, 0.29);
255 &.open [toolbox-toggle] svg {
256 transform: rotate(180deg);
264 border-inline-end: 1px solid #DDD;
265 @include lightDark(border-color, #ddd, #000);
274 @include lightDark(color, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
280 border-bottom: 1px solid rgba(255, 255, 255, 0.3);
282 &.open .tabs > button.active {
283 @include lightDark(color, #444, #EEE);
284 background-color: rgba(0, 0, 0, 0.1);
286 div[toolbox-tab-content] {
287 padding-bottom: 45px;
290 flex-direction: column;
297 padding: 0 $-l $-s $-l;
304 .tags td, .inline-start-table > div > div > div {
305 padding-inline-end: $-s;
317 flex-direction: column;
325 [toolbox-tab-content] {
337 border-bottom: 1px solid #DDD;
344 .comments-container h5 {
350 .comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
354 /* FIXME - Ugly hack to modify the media plugin for TinyMCE */
355 .mce-floatpanel[aria-label="Insert/edit media"] {
361 .entity-list-item > span:first-child, .icon-list-item > span:first-child, .chapter-expansion > .icon {
367 justify-content: center;
379 background-color: currentColor;
389 display: inline-block;
391 justify-content: center;
400 transition: opacity ease-in-out 120ms;
404 background-color: currentColor;
412 text-decoration: none;