mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
c622b785a9
Rolled out HTML editor field and store logic across all target entity types. Cleaned up WYSIWYG input logic and design. Cleaned up some injected classes while there.
189 lines
4.4 KiB
SCSS
189 lines
4.4 KiB
SCSS
|
|
// 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;
|
|
}
|
|
|
|
.wysiwyg-input.mce-content-body {
|
|
padding-block-start: 1rem;
|
|
padding-block-end: 1rem;
|
|
outline: 0;
|
|
display: block;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
// In editor line height override
|
|
.page-content.mce-content-body p {
|
|
line-height: 1.6;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
/**
|
|
* 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-left: 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-right: 8px;
|
|
vertical-align: text-top;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
left: -24px;
|
|
top: 4px;
|
|
}
|
|
|
|
.page-content.mce-content-body .task-list-item[checked]:before {
|
|
background-color: #CCC;
|
|
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>');
|
|
background-position: 50% 50%;
|
|
background-size: 100% 100%;
|
|
} |