X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/1ee3e779e4b9b0a92f701a72f21a72c83cb1ce68..refs/pull/5685/head:/resources/sass/_tinymce.scss diff --git a/resources/sass/_tinymce.scss b/resources/sass/_tinymce.scss index 27c3b28d0..8cc96df41 100644 --- a/resources/sass/_tinymce.scss +++ b/resources/sass/_tinymce.scss @@ -1,5 +1,9 @@ +@use "mixins"; +@use "vars"; -.mce-tinymce.mce-container.mce-fullscreen { + +// Custom full screen mode +.tox.tox-fullscreen { position: fixed; top: 0; height: 100%; @@ -8,68 +12,194 @@ z-index: 100; } -.mce-tinymce { - .mce-panel { - background-color: #FFF; - } - .mce-btn { - background-color: #FFF; - } -} - -.mce-container-body.mce-flow-layout { - text-align: center; -} - -@include smaller-than($l) { - .mce-container-body.mce-flow-layout { - overflow-x: scroll; - white-space: nowrap; - } -} - -.edit-area.flex > div > .mce-tinymce.mce-container.mce-panel { - flex: 1 1 auto; - display: flex !important; - flex-direction: column; - align-items: stretch; - margin: 0 -1px; - > .mce-container-body { - flex: 1 1 auto; - display: flex !important; - flex-direction: column; - align-items: stretch; - > .mce-toolbar-grp { - flex: 0 1 auto; - } - > .mce-edit-area { - flex: 1 1 auto; - display: flex !important; - flex-direction: column; - align-items: stretch; - -webkit-overflow-scrolling:touch; - overflow:auto; - iframe { - flex: 1; - } - } - } -} -.page-content.mce-content-body p { - line-height: 1.6; +// Editor wrapper edits +.tox.tox-tinymce { + border-inline: 0; + border-bottom: 0; } +// In editor body overrides .page-content.mce-content-body { - padding-top: 16px; - outline: none; + padding-block-start: 1rem; + padding-block-end: 1rem; + outline: 0; + display: block; + max-width: 870px; } -// Fix to prevent 'No color' option from not being clickable. -.mce-colorbtn-trans { - overflow: hidden; +.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 mixins.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; } -// Fix to prevent CodeMirror focus events throwing TinyMCE cursor position. -.mce-content-body .CodeMirrorContainer > .CodeMirror { +// Details/summary editor usability +.page-content.mce-content-body details summary { pointer-events: none; +} +.page-content.mce-content-body details doc-root { + padding: vars.$s; + margin-left: (2px - vars.$s); + margin-right: (2px - vars.$s); + margin-bottom: (2px - vars.$s); + margin-top: (2px - vars.$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: vars.$xs 0 vars.$xs vars.$s; +} + +.page-content.mce-content-body .mce-preview-object.align-left { + float: left !important; + margin: vars.$xs vars.$m vars.$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%; } \ No newline at end of file