mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
5395ca2f00
Required a lot of working around TinyMCE since it added a preview/wrapper element in the editor which complicates things. Added view new "fixes.js" file so large hacks to default TinyMCe functionality are kept in one place.
182 lines
4.3 KiB
SCSS
182 lines
4.3 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;
|
|
}
|
|
|
|
// 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%;
|
|
} |