BookStack Code Mirror - bookstack/blob - resources/sass/_tinymce.scss

   1 @use "mixins";
   2 @use "vars";
   3
   4
   5 // Custom full screen mode
   6 .tox.tox-fullscreen {
   7   position: fixed;
   8   top: 0;
   9   height: 100%;
  10   width: 100%;
  11   max-width: 100%;
  12   z-index: 100;
  13 }
  14
  15 // Editor wrapper edits
  16 .tox.tox-tinymce {
  17   border-inline: 0;
  18   border-bottom: 0;
  19 }
  20
  21 // In editor body overrides
  22 .page-content.mce-content-body {
  23   padding-block-start: 1rem;
  24   padding-block-end: 1rem;
  25   outline: 0;
  26   display: block;
  27   max-width: 870px;
  28 }
  29
  30 .wysiwyg-input.mce-content-body {
  31   padding-block-start: 1rem;
  32   padding-block-end: 1rem;
  33   outline: 0;
  34   display: block;
  35 }
  36
  37 .wysiwyg-input.mce-content-body:before {
  38   padding: 1rem;
  39   top: 4px;
  40   font-style: italic;
  41   @include mixins.lightDark(color, rgba(34,47,62,.5), rgba(155,155,155,.5))
  42 }
  43
  44 // Default styles for our custom root nodes
  45 .page-content.mce-content-body doc-root {
  46   display: block;
  47 }
  48 .page-content.mce-content-body code-block {
  49   display: block;
  50 }
  51
  52 // Pad out bottom of editor
  53 body.page-content.mce-content-body  {
  54   padding-bottom: 5rem;
  55 }
  56
  57 // Remove svg background line in toolbar items
  58 .tox .tox-pop__dialog .tox-toolbar {
  59   background: transparent !important;
  60 }
  61
  62 // Center toolbar items
  63 .tox-toolbar__primary {
  64   justify-content: center;
  65 }
  66
  67 // Prevent scroll jumps on codemirror clicks
  68 .page-content.mce-content-body code-block > * {
  69   pointer-events: none;
  70 }
  71 .page-content.mce-content-body code-block pre {
  72   display: none;
  73 }
  74
  75 // Details/summary editor usability
  76 .page-content.mce-content-body details summary {
  77   pointer-events: none;
  78 }
  79 .page-content.mce-content-body details doc-root {
  80   padding: vars.$s;
  81   margin-left: (2px - vars.$s);
  82   margin-right: (2px - vars.$s);
  83   margin-bottom: (2px - vars.$s);
  84   margin-top: (2px - vars.$s);
  85   overflow: hidden;
  86 }
  87
  88 // Allow alignment to be reflected in media embed wrappers
  89 .page-content.mce-content-body .mce-preview-object.align-right {
  90   float: right !important;
  91   margin: vars.$xs 0 vars.$xs vars.$s;
  92 }
  93
  94 .page-content.mce-content-body .mce-preview-object.align-left {
  95   float: left !important;
  96   margin: vars.$xs vars.$m vars.$m 0;
  97 }
  98
  99 .page-content.mce-content-body .mce-preview-object.align-center {
 100   display: block;
 101   margin-left: auto;
 102   margin-right: auto;
 103 }
 104
 105 .page-content.mce-content-body .mce-preview-object iframe,
 106 .page-content.mce-content-body .mce-preview-object video {
 107   display: block;
 108   margin: 0 !important;
 109   float: none !important;
 110 }
 111
 112 .page-content.mce-content-body td[data-mce-selected]::after,
 113 .page-content.mce-content-body th[data-mce-selected]::after {
 114   top: 1px;
 115   left: 1px;
 116   bottom: 1px;
 117   right: 1px;
 118   outline: 1px dashed #1a85ff;
 119   outline-offset: 0;
 120 }
 121
 122 /**
 123  * Dark Mode Overrides
 124  */
 125 .dark-mode .tox .tox-toolbar__primary,
 126 .dark-mode .tox .tox-menu,
 127 .dark-mode .tox .tox-dialog__header,
 128 .dark-mode .tox .tox-dialog,
 129 .dark-mode .tox .tox-dialog__footer,
 130 .dark-mode .tox .tox-pop__dialog,
 131 .dark-mode .tox.tox-tinymce-aux .tox-toolbar__overflow {
 132     background-color: #333 !important;
 133 }
 134 .dark-mode .tox .tox-tbtn svg,
 135 .dark-mode .tox .tox-tbtn,
 136 .dark-mode .tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled)
 137 {
 138   color: #dbdbdb;
 139   fill: #dbdbdb;
 140 }
 141
 142
 143
 144 /**
 145  * Format Menu Hacks
 146  */
 147 .tox .tox-tbtn--bespoke .tox-tbtn__select-label {
 148   width: 6em !important;
 149 }
 150 .tox-menu .tox-collection__item blockquote::before {
 151   content: none;
 152 }
 153 .tox-menu .tox-collection__item blockquote {
 154   border-left: 4px solid var(--color-primary) !important;
 155   padding: 4px 6px !important;
 156 }
 157 .tox-menu .tox-collection__item blockquote {
 158   border-left: 4px solid var(--color-primary) !important;
 159   padding: 4px 6px !important;
 160 }
 161 .tox-menu .tox-collection__item p[style*="background-color"] {
 162   padding: 4px 6px !important;
 163   border-left: 3px solid currentColor !important;
 164 }
 165 .tox-menu .tox-collection__item[title^="<"] > div > div {
 166   font-family: var(--font-code) !important;
 167   border: 1px solid #DDD !important;
 168   background-color: #EEE !important;
 169   padding: 4px 6px !important;
 170 }
 171 .tox-menu .tox-collection__item-label {
 172   line-height: normal !important;
 173 }
 174
 175 /**
 176  * Fake task list checkboxes
 177  */
 178 .page-content.mce-content-body .task-list-item {
 179   margin-inline-start: 0;
 180   position: relative;
 181 }
 182 .page-content.mce-content-body .task-list-item > input[type="checkbox"] {
 183   display: none;
 184 }
 185 .page-content.mce-content-body .task-list-item:before {
 186   content: '';
 187   display: inline-block;
 188   border: 2px solid #CCC;
 189   width: 12px;
 190   height: 12px;
 191   border-radius: 2px;
 192   margin-inline-end: 8px;
 193   vertical-align: text-top;
 194   cursor: pointer;
 195   position: absolute;
 196   inset-inline-start: -24px;
 197   top: 4px;
 198 }
 199
 200 .page-content.mce-content-body .task-list-item[checked]:before {
 201   background-color: #CCC;
 202   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>');
 203   background-position: 50% 50%;
 204   background-size: 100% 100%;
 205 }