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;
26 .wysiwyg-input.mce-content-body {
27 padding-block-start: 1rem;
28 padding-block-end: 1rem;
33 .wysiwyg-input.mce-content-body:before {
37 @include lightDark(color, rgba(34,47,62,.5), rgba(155,155,155,.5))
40 // Default styles for our custom root nodes
41 .page-content.mce-content-body doc-root {
44 .page-content.mce-content-body code-block {
48 // In editor line height override
49 .page-content.mce-content-body p {
53 // Pad out bottom of editor
54 body.page-content.mce-content-body {
58 // Remove svg background line in toolbar items
59 .tox .tox-pop__dialog .tox-toolbar {
60 background: transparent !important;
63 // Center toolbar items
64 .tox-toolbar__primary {
65 justify-content: center;
68 // Prevent scroll jumps on codemirror clicks
69 .page-content.mce-content-body code-block > * {
72 .page-content.mce-content-body code-block pre {
76 // Details/summary editor usability
77 .page-content.mce-content-body details summary {
80 .page-content.mce-content-body details doc-root {
82 margin-left: (2px - $-s);
83 margin-right: (2px - $-s);
84 margin-bottom: (2px - $-s);
85 margin-top: (2px - $-s);
89 // Allow alignment to be reflected in media embed wrappers
90 .page-content.mce-content-body .mce-preview-object.align-right {
91 float: right !important;
92 margin: $-xs 0 $-xs $-s;
95 .page-content.mce-content-body .mce-preview-object.align-left {
96 float: left !important;
97 margin: $-xs $-m $-m 0;
100 .page-content.mce-content-body .mce-preview-object.align-center {
106 .page-content.mce-content-body .mce-preview-object iframe,
107 .page-content.mce-content-body .mce-preview-object video {
109 margin: 0 !important;
110 float: none !important;
113 .page-content.mce-content-body td[data-mce-selected]::after,
114 .page-content.mce-content-body th[data-mce-selected]::after {
119 outline: 1px dashed #1a85ff;
124 * Dark Mode Overrides
126 .dark-mode .tox .tox-toolbar__primary,
127 .dark-mode .tox .tox-menu,
128 .dark-mode .tox .tox-dialog__header,
129 .dark-mode .tox .tox-dialog,
130 .dark-mode .tox .tox-dialog__footer,
131 .dark-mode .tox .tox-pop__dialog,
132 .dark-mode .tox.tox-tinymce-aux .tox-toolbar__overflow {
133 background-color: #333 !important;
135 .dark-mode .tox .tox-tbtn svg,
136 .dark-mode .tox .tox-tbtn,
137 .dark-mode .tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled)
148 .tox .tox-tbtn--bespoke .tox-tbtn__select-label {
149 width: 6em !important;
151 .tox-menu .tox-collection__item blockquote::before {
154 .tox-menu .tox-collection__item blockquote {
155 border-left: 4px solid var(--color-primary) !important;
156 padding: 4px 6px !important;
158 .tox-menu .tox-collection__item blockquote {
159 border-left: 4px solid var(--color-primary) !important;
160 padding: 4px 6px !important;
162 .tox-menu .tox-collection__item p[style*="background-color"] {
163 padding: 4px 6px !important;
164 border-left: 3px solid currentColor !important;
166 .tox-menu .tox-collection__item[title^="<"] > div > div {
167 font-family: var(--font-code) !important;
168 border: 1px solid #DDD !important;
169 background-color: #EEE !important;
170 padding: 4px 6px !important;
172 .tox-menu .tox-collection__item-label {
173 line-height: normal !important;
177 * Fake task list checkboxes
179 .page-content.mce-content-body .task-list-item {
183 .page-content.mce-content-body .task-list-item > input[type="checkbox"] {
186 .page-content.mce-content-body .task-list-item:before {
188 display: inline-block;
189 border: 2px solid #CCC;
194 vertical-align: text-top;
201 .page-content.mce-content-body .task-list-item[checked]:before {
202 background-color: #CCC;
203 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>');
204 background-position: 50% 50%;
205 background-size: 100% 100%;