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

   1
   2
   3 #editor.bs-editor {
   4   padding-top: 0;
   5 }
   6
   7 //.bs-editor .menubar {
   8 //  border-bottom: 1px solid #DDD;
   9 //  padding: 2px;
  10 //}
  11 //
  12 //.bs-editor .menuicon {
  13 //  cursor: pointer;
  14 //  padding: 4px;
  15 //  min-width: 2rem;
  16 //  border-radius: 3px;
  17 //  border: 1px solid transparent;
  18 //  &:hover {
  19 //    background-color: #EEE;
  20 //    border: 1px solid #DDD;
  21 //  }
  22 //}
  23
  24 // The below originated from https://github.com/ProseMirror/prosemirror-menu
  25 // and is therefore subject to the MIT license found here:
  26 // https://github.com/ProseMirror/prosemirror-menu/blob/master/LICENSE
  27
  28 .ProseMirror {
  29   position: relative;
  30 }
  31
  32 .ProseMirror {
  33   word-wrap: break-word;
  34   white-space: pre-wrap;
  35   white-space: break-spaces;
  36   -webkit-font-variant-ligatures: none;
  37   font-variant-ligatures: none;
  38   font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
  39 }
  40
  41 .ProseMirror pre {
  42   white-space: pre-wrap;
  43 }
  44
  45 .ProseMirror li {
  46   position: relative;
  47 }
  48
  49 .ProseMirror-hideselection *::selection { background: transparent; }
  50 .ProseMirror-hideselection *::-moz-selection { background: transparent; }
  51 .ProseMirror-hideselection { caret-color: transparent; }
  52
  53 .ProseMirror-selectednode {
  54   outline: 2px solid #8cf;
  55 }
  56
  57 /* Make sure li selections wrap around markers */
  58
  59 li.ProseMirror-selectednode {
  60   outline: none;
  61 }
  62
  63 li.ProseMirror-selectednode:after {
  64   content: "";
  65   position: absolute;
  66   left: -32px;
  67   right: -2px; top: -2px; bottom: -2px;
  68   border: 2px solid #8cf;
  69   pointer-events: none;
  70 }
  71
  72 /* Protect against generic img rules */
  73
  74 img.ProseMirror-separator {
  75   display: inline !important;
  76   border: none !important;
  77   margin: 0 !important;
  78 }
  79
  80 .ProseMirror-textblock-dropdown {
  81   min-width: 3em;
  82 }
  83
  84 .ProseMirror-menu {
  85   margin: 0 -4px;
  86   line-height: 1;
  87 }
  88
  89 .ProseMirror-tooltip .ProseMirror-menu {
  90   width: -webkit-fit-content;
  91   width: fit-content;
  92   white-space: pre;
  93 }
  94
  95 .ProseMirror-menuitem {
  96   margin-right: 3px;
  97   display: inline-block;
  98 }
  99
 100 .ProseMirror-menuseparator {
 101   border-right: 1px solid #ddd;
 102   margin-right: 3px;
 103 }
 104
 105 .ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu {
 106   font-size: 90%;
 107   white-space: nowrap;
 108 }
 109
 110 .ProseMirror-menu-dropdown {
 111   vertical-align: 1px;
 112   cursor: pointer;
 113   position: relative;
 114   padding-right: 15px;
 115 }
 116
 117 .ProseMirror-menu-dropdown-wrap {
 118   padding: 1px 0 1px 4px;
 119   display: inline-block;
 120   position: relative;
 121 }
 122
 123 .ProseMirror-menu-dropdown:after {
 124   content: "";
 125   border-left: 4px solid transparent;
 126   border-right: 4px solid transparent;
 127   border-top: 4px solid currentColor;
 128   opacity: .6;
 129   position: absolute;
 130   right: 4px;
 131   top: calc(50% - 2px);
 132 }
 133
 134 .ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu {
 135   position: absolute;
 136   background: white;
 137   color: #666;
 138   border: 1px solid #aaa;
 139   padding: 2px;
 140 }
 141
 142 .ProseMirror-menu-dropdown-menu {
 143   z-index: 15;
 144   min-width: 6em;
 145 }
 146
 147 .ProseMirror-menu-dropdown-item {
 148   cursor: pointer;
 149   padding: 2px 8px 2px 4px;
 150 }
 151
 152 .ProseMirror-menu-dropdown-item:hover {
 153   background: #f2f2f2;
 154 }
 155
 156 .ProseMirror-menu-submenu-wrap {
 157   position: relative;
 158   margin-right: 4px;
 159 }
 160
 161 .ProseMirror-menu-submenu-label {
 162   padding-inline-end: 12px;
 163   padding-inline-start: 4px;
 164 }
 165
 166 .ProseMirror-menu-submenu-label:after {
 167   content: "";
 168   border-top: 4px solid transparent;
 169   border-bottom: 4px solid transparent;
 170   border-left: 4px solid currentColor;
 171   opacity: .6;
 172   position: absolute;
 173   right: 4px;
 174   top: calc(50% - 4px);
 175 }
 176
 177 .ProseMirror-menu-submenu {
 178   display: none;
 179   min-width: 10em;
 180   left: 100%;
 181   top: -3px;
 182 }
 183
 184 .ProseMirror-menu-active {
 185   background: #eee;
 186   border-radius: 4px;
 187 }
 188
 189 .ProseMirror-menu-disabled {
 190   opacity: .3;
 191 }
 192
 193 .ProseMirror-menu-submenu-wrap:hover > .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active > .ProseMirror-menu-submenu {
 194   display: block;
 195 }
 196
 197 .ProseMirror-menubar {
 198   border-top-left-radius: inherit;
 199   border-top-right-radius: inherit;
 200   position: relative;
 201   min-height: 1em;
 202   color: #666;
 203   padding: 1px 6px;
 204   top: 0; left: 0; right: 0;
 205   border-bottom: 1px solid silver;
 206   background: white;
 207   z-index: 10;
 208   -moz-box-sizing: border-box;
 209   box-sizing: border-box;
 210   overflow: visible;
 211 }
 212
 213 .ProseMirror-icon {
 214   display: inline-block;
 215   line-height: .8;
 216   vertical-align: -2px; /* Compensate for padding */
 217   padding: 2px 8px;
 218   cursor: pointer;
 219 }
 220
 221 .ProseMirror-menu-disabled.ProseMirror-icon {
 222   cursor: default;
 223 }
 224
 225 .ProseMirror-icon svg {
 226   fill: currentColor;
 227   height: 1em;
 228 }
 229
 230 .ProseMirror-icon span {
 231   vertical-align: text-top;
 232 }
 233
 234 .ProseMirror-gapcursor {
 235   display: none;
 236   pointer-events: none;
 237   position: absolute;
 238 }
 239
 240 .ProseMirror-gapcursor:after {
 241   content: "";
 242   display: block;
 243   position: absolute;
 244   top: -2px;
 245   width: 20px;
 246   border-top: 1px solid black;
 247   animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
 248 }
 249
 250 @keyframes ProseMirror-cursor-blink {
 251   to {
 252     visibility: hidden;
 253   }
 254 }
 255
 256 .ProseMirror-focused .ProseMirror-gapcursor {
 257   display: block;
 258 }
 259 /* Add space around the hr to make clicking it easier */
 260
 261 .ProseMirror-example-setup-style hr {
 262   padding: 2px 10px;
 263   border: none;
 264   margin: 1em 0;
 265 }
 266
 267 .ProseMirror-example-setup-style hr:after {
 268   content: "";
 269   display: block;
 270   height: 1px;
 271   background-color: silver;
 272   line-height: 2px;
 273 }
 274
 275 .ProseMirror ul, .ProseMirror ol {
 276   padding-left: 30px;
 277 }
 278
 279 .ProseMirror blockquote {
 280   padding-left: 1em;
 281   border-left: 3px solid #eee;
 282   margin-left: 0; margin-right: 0;
 283 }
 284
 285 .ProseMirror-example-setup-style img {
 286   cursor: default;
 287 }
 288
 289 .ProseMirror-prompt {
 290   background: white;
 291   padding: 5px 10px 5px 15px;
 292   border: 1px solid silver;
 293   position: fixed;
 294   border-radius: 3px;
 295   z-index: 11;
 296   box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2);
 297 }
 298
 299 .ProseMirror-prompt h5 {
 300   margin: 0;
 301   font-weight: normal;
 302   font-size: 100%;
 303   color: #444;
 304 }
 305
 306 .ProseMirror-prompt input[type="text"],
 307 .ProseMirror-prompt textarea {
 308   background: #eee;
 309   border: none;
 310   outline: none;
 311 }
 312
 313 .ProseMirror-prompt input[type="text"] {
 314   padding: 0 4px;
 315 }
 316
 317 .ProseMirror-prompt-close {
 318   position: absolute;
 319   left: 2px; top: 1px;
 320   color: #666;
 321   border: none; background: transparent; padding: 0;
 322 }
 323
 324 .ProseMirror-prompt-close:after {
 325   content: "âœ•";
 326   font-size: 12px;
 327 }
 328
 329 .ProseMirror-invalid {
 330   background: #ffc;
 331   border: 1px solid #cc7;
 332   border-radius: 4px;
 333   padding: 5px 10px;
 334   position: absolute;
 335   min-width: 10em;
 336 }
 337
 338 .ProseMirror-prompt-buttons {
 339   margin-top: 5px;
 340   display: none;
 341 }
 342 #editor, .editor {
 343   background: white;
 344   color: black;
 345   background-clip: padding-box;
 346   border-radius: 4px;
 347   border: 2px solid rgba(0, 0, 0, 0.2);
 348   padding: 5px 0;
 349   margin-bottom: 23px;
 350 }
 351
 352 .ProseMirror p:first-child,
 353 .ProseMirror h1:first-child,
 354 .ProseMirror h2:first-child,
 355 .ProseMirror h3:first-child,
 356 .ProseMirror h4:first-child,
 357 .ProseMirror h5:first-child,
 358 .ProseMirror h6:first-child {
 359   margin-top: 10px;
 360 }
 361
 362 .ProseMirror {
 363   padding: 4px 8px 4px 14px;
 364   line-height: 1.2;
 365   outline: none;
 366 }
 367
 368 .ProseMirror p { margin-bottom: 1em }