2 // Custom full screen mode
12 // Editor wrapper edits
18 // In editor body overrides
19 .page-content.mce-content-body {
20 padding-block-start: 1rem;
21 padding-block-end: 1rem;
27 .wysiwyg-input.mce-content-body {
28 padding-block-start: 1rem;
29 padding-block-end: 1rem;
34 .wysiwyg-input.mce-content-body:before {
38 @include lightDark(color, rgba(34,47,62,.5), rgba(155,155,155,.5))
41 // Default styles for our custom root nodes
42 .page-content.mce-content-body doc-root {
45 .page-content.mce-content-body code-block {
49 // In editor line height override
50 .page-content.mce-content-body p {
54 // Pad out bottom of editor
55 body.page-content.mce-content-body {
59 // Remove svg background line in toolbar items
60 .tox .tox-pop__dialog .tox-toolbar {
61 background: transparent !important;
64 // Center toolbar items
65 .tox-toolbar__primary {
66 justify-content: center;
69 // Prevent scroll jumps on codemirror clicks
70 .page-content.mce-content-body code-block > * {
73 .page-content.mce-content-body code-block pre {
77 // Details/summary editor usability
78 .page-content.mce-content-body details summary {
81 .page-content.mce-content-body details doc-root {
83 margin-left: (2px - $-s);
84 margin-right: (2px - $-s);
85 margin-bottom: (2px - $-s);
86 margin-top: (2px - $-s);
90 // Allow alignment to be reflected in media embed wrappers
91 .page-content.mce-content-body .mce-preview-object.align-right {
92 float: right !important;
93 margin: $-xs 0 $-xs $-s;
96 .page-content.mce-content-body .mce-preview-object.align-left {
97 float: left !important;
98 margin: $-xs $-m $-m 0;
101 .page-content.mce-content-body .mce-preview-object.align-center {
107 .page-content.mce-content-body .mce-preview-object iframe,
108 .page-content.mce-content-body .mce-preview-object video {
110 margin: 0 !important;
111 float: none !important;
114 .page-content.mce-content-body td[data-mce-selected]::after,
115 .page-content.mce-content-body th[data-mce-selected]::after {
120 outline: 1px dashed #1a85ff;
125 * Dark Mode Overrides
127 .dark-mode .tox .tox-toolbar__primary,
128 .dark-mode .tox .tox-menu,
129 .dark-mode .tox .tox-dialog__header,
130 .dark-mode .tox .tox-dialog,
131 .dark-mode .tox .tox-dialog__footer,
132 .dark-mode .tox .tox-pop__dialog,
133 .dark-mode .tox.tox-tinymce-aux .tox-toolbar__overflow {
134 background-color: #333 !important;
136 .dark-mode .tox .tox-tbtn svg,
137 .dark-mode .tox .tox-tbtn,
138 .dark-mode .tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled)
149 .tox .tox-tbtn--bespoke .tox-tbtn__select-label {
150 width: 6em !important;
152 .tox-menu .tox-collection__item blockquote::before {
155 .tox-menu .tox-collection__item blockquote {
156 border-left: 4px solid var(--color-primary) !important;
157 padding: 4px 6px !important;
159 .tox-menu .tox-collection__item blockquote {
160 border-left: 4px solid var(--color-primary) !important;
161 padding: 4px 6px !important;
163 .tox-menu .tox-collection__item p[style*="background-color"] {
164 padding: 4px 6px !important;
165 border-left: 3px solid currentColor !important;
167 .tox-menu .tox-collection__item[title^="<"] > div > div {
168 font-family: var(--font-code) !important;
169 border: 1px solid #DDD !important;
170 background-color: #EEE !important;
171 padding: 4px 6px !important;
173 .tox-menu .tox-collection__item-label {
174 line-height: normal !important;
178 * Fake task list checkboxes
180 .page-content.mce-content-body .task-list-item {
184 .page-content.mce-content-body .task-list-item > input[type="checkbox"] {
187 .page-content.mce-content-body .task-list-item:before {
189 display: inline-block;
190 border: 2px solid #CCC;
195 vertical-align: text-top;
202 .page-content.mce-content-body .task-list-item[checked]:before {
203 background-color: #CCC;
204 background-image: url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8.4856 20.274-6.736-6.736 2.9287-2.7823 3.8073 3.8073 10.836-10.836 2.9287 2.9287z" stroke-width="1.4644"/></svg>');
205 background-position: 50% 50%;
206 background-size: 100% 100%;