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 // Default styles for our custom root nodes
34 .page-content.mce-content-body doc-root {
37 .page-content.mce-content-body code-block {
41 // In editor line height override
42 .page-content.mce-content-body p {
46 // Pad out bottom of editor
47 body.page-content.mce-content-body {
51 // Remove svg background line in toolbar items
52 .tox .tox-pop__dialog .tox-toolbar {
53 background: transparent !important;
56 // Center toolbar items
57 .tox-toolbar__primary {
58 justify-content: center;
61 // Prevent scroll jumps on codemirror clicks
62 .page-content.mce-content-body code-block > * {
65 .page-content.mce-content-body code-block pre {
69 // Details/summary editor usability
70 .page-content.mce-content-body details summary {
73 .page-content.mce-content-body details doc-root {
75 margin-left: (2px - $-s);
76 margin-right: (2px - $-s);
77 margin-bottom: (2px - $-s);
78 margin-top: (2px - $-s);
82 // Allow alignment to be reflected in media embed wrappers
83 .page-content.mce-content-body .mce-preview-object.align-right {
84 float: right !important;
85 margin: $-xs 0 $-xs $-s;
88 .page-content.mce-content-body .mce-preview-object.align-left {
89 float: left !important;
90 margin: $-xs $-m $-m 0;
93 .page-content.mce-content-body .mce-preview-object.align-center {
99 .page-content.mce-content-body .mce-preview-object iframe,
100 .page-content.mce-content-body .mce-preview-object video {
102 margin: 0 !important;
103 float: none !important;
107 * Dark Mode Overrides
109 .dark-mode .tox .tox-toolbar__primary,
110 .dark-mode .tox .tox-menu,
111 .dark-mode .tox .tox-dialog__header,
112 .dark-mode .tox .tox-dialog,
113 .dark-mode .tox .tox-dialog__footer,
114 .dark-mode .tox .tox-pop__dialog,
115 .dark-mode .tox.tox-tinymce-aux .tox-toolbar__overflow {
116 background-color: #333 !important;
118 .dark-mode .tox .tox-tbtn svg,
119 .dark-mode .tox .tox-tbtn,
120 .dark-mode .tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled)
131 .tox .tox-tbtn--bespoke .tox-tbtn__select-label {
132 width: 6em !important;
134 .tox-menu .tox-collection__item blockquote::before {
137 .tox-menu .tox-collection__item blockquote {
138 border-left: 4px solid var(--color-primary) !important;
139 padding: 4px 6px !important;
141 .tox-menu .tox-collection__item blockquote {
142 border-left: 4px solid var(--color-primary) !important;
143 padding: 4px 6px !important;
145 .tox-menu .tox-collection__item p[style*="background-color"] {
146 padding: 4px 6px !important;
147 border-left: 3px solid currentColor !important;
149 .tox-menu .tox-collection__item[title^="<"] > div > div {
150 font-family: var(--font-code) !important;
151 border: 1px solid #DDD !important;
152 background-color: #EEE !important;
153 padding: 4px 6px !important;
155 .tox-menu .tox-collection__item-label {
156 line-height: normal !important;
160 * Fake task list checkboxes
162 .page-content.mce-content-body .task-list-item {
166 .page-content.mce-content-body .task-list-item > input[type="checkbox"] {
169 .page-content.mce-content-body .task-list-item:before {
171 display: inline-block;
172 border: 2px solid #CCC;
177 vertical-align: text-top;
184 .page-content.mce-content-body .task-list-item[checked]:before {
185 background-color: #CCC;
186 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>');
187 background-position: 50% 50%;
188 background-size: 100% 100%;