// Custom full screen mode .tox.tox-fullscreen { position: fixed; top: 0; height: 100%; width: 100%; max-width: 100%; z-index: 100; } // Editor wrapper edits .tox.tox-tinymce { border-inline: 0; border-bottom: 0; } // In editor body overrides .page-content.mce-content-body { padding-block-start: 1rem; padding-block-end: 1rem; outline: 0; display: block; max-width: 870px; } .wysiwyg-input.mce-content-body { padding-block-start: 1rem; padding-block-end: 1rem; outline: 0; display: block; } .wysiwyg-input.mce-content-body:before { padding: 1rem; top: 4px; font-style: italic; @include lightDark(color, rgba(34,47,62,.5), rgba(155,155,155,.5)) } // Default styles for our custom root nodes .page-content.mce-content-body doc-root { display: block; } .page-content.mce-content-body code-block { display: block; } // Pad out bottom of editor body.page-content.mce-content-body { padding-bottom: 5rem; } // Remove svg background line in toolbar items .tox .tox-pop__dialog .tox-toolbar { background: transparent !important; } // Center toolbar items .tox-toolbar__primary { justify-content: center; } // Prevent scroll jumps on codemirror clicks .page-content.mce-content-body code-block > * { pointer-events: none; } .page-content.mce-content-body code-block pre { display: none; } // Details/summary editor usability .page-content.mce-content-body details summary { pointer-events: none; } .page-content.mce-content-body details doc-root { padding: $-s; margin-left: (2px - $-s); margin-right: (2px - $-s); margin-bottom: (2px - $-s); margin-top: (2px - $-s); overflow: hidden; } // Allow alignment to be reflected in media embed wrappers .page-content.mce-content-body .mce-preview-object.align-right { float: right !important; margin: $-xs 0 $-xs $-s; } .page-content.mce-content-body .mce-preview-object.align-left { float: left !important; margin: $-xs $-m $-m 0; } .page-content.mce-content-body .mce-preview-object.align-center { display: block; margin-left: auto; margin-right: auto; } .page-content.mce-content-body .mce-preview-object iframe, .page-content.mce-content-body .mce-preview-object video { display: block; margin: 0 !important; float: none !important; } .page-content.mce-content-body td[data-mce-selected]::after, .page-content.mce-content-body th[data-mce-selected]::after { top: 1px; left: 1px; bottom: 1px; right: 1px; outline: 1px dashed #1a85ff; outline-offset: 0; } /** * Dark Mode Overrides */ .dark-mode .tox .tox-toolbar__primary, .dark-mode .tox .tox-menu, .dark-mode .tox .tox-dialog__header, .dark-mode .tox .tox-dialog, .dark-mode .tox .tox-dialog__footer, .dark-mode .tox .tox-pop__dialog, .dark-mode .tox.tox-tinymce-aux .tox-toolbar__overflow { background-color: #333 !important; } .dark-mode .tox .tox-tbtn svg, .dark-mode .tox .tox-tbtn, .dark-mode .tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) { color: #dbdbdb; fill: #dbdbdb; } /** * Format Menu Hacks */ .tox .tox-tbtn--bespoke .tox-tbtn__select-label { width: 6em !important; } .tox-menu .tox-collection__item blockquote::before { content: none; } .tox-menu .tox-collection__item blockquote { border-left: 4px solid var(--color-primary) !important; padding: 4px 6px !important; } .tox-menu .tox-collection__item blockquote { border-left: 4px solid var(--color-primary) !important; padding: 4px 6px !important; } .tox-menu .tox-collection__item p[style*="background-color"] { padding: 4px 6px !important; border-left: 3px solid currentColor !important; } .tox-menu .tox-collection__item[title^="<"] > div > div { font-family: var(--font-code) !important; border: 1px solid #DDD !important; background-color: #EEE !important; padding: 4px 6px !important; } .tox-menu .tox-collection__item-label { line-height: normal !important; } /** * Fake task list checkboxes */ .page-content.mce-content-body .task-list-item { margin-inline-start: 0; position: relative; } .page-content.mce-content-body .task-list-item > input[type="checkbox"] { display: none; } .page-content.mce-content-body .task-list-item:before { content: ''; display: inline-block; border: 2px solid #CCC; width: 12px; height: 12px; border-radius: 2px; margin-inline-end: 8px; vertical-align: text-top; cursor: pointer; position: absolute; inset-inline-start: -24px; top: 4px; } .page-content.mce-content-body .task-list-item[checked]:before { background-color: #CCC; background-image: url('data:image/svg+xml;utf8,'); background-position: 50% 50%; background-size: 100% 100%; }