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   border-top: 3px solid #FFF;
 263   border-bottom: 3px solid #FFF;
 264   box-sizing: content-box;
 265 }
 266
 267 .ProseMirror ul, .ProseMirror ol {
 268   padding-left: 30px;
 269 }
 270
 271 .ProseMirror blockquote {
 272   padding-left: 1em;
 273   border-left: 3px solid #eee;
 274   margin-left: 0; margin-right: 0;
 275 }
 276
 277 .ProseMirror-example-setup-style img {
 278   cursor: default;
 279 }
 280
 281 .ProseMirror-prompt {
 282   background: white;
 283   padding: 5px 10px 5px 15px;
 284   border: 1px solid silver;
 285   position: fixed;
 286   border-radius: 3px;
 287   z-index: 11;
 288   box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2);
 289 }
 290
 291 .ProseMirror-prompt h5 {
 292   margin: 0;
 293   font-weight: normal;
 294   font-size: 100%;
 295   color: #444;
 296 }
 297
 298 .ProseMirror-prompt input[type="text"],
 299 .ProseMirror-prompt textarea {
 300   background: #eee;
 301   border: none;
 302   outline: none;
 303 }
 304
 305 .ProseMirror-prompt input[type="text"] {
 306   padding: 0 4px;
 307 }
 308
 309 .ProseMirror-prompt-close {
 310   position: absolute;
 311   left: 2px; top: 1px;
 312   color: #666;
 313   border: none; background: transparent; padding: 0;
 314 }
 315
 316 .ProseMirror-prompt-close:after {
 317   content: "âœ•";
 318   font-size: 12px;
 319 }
 320
 321 .ProseMirror-invalid {
 322   background: #ffc;
 323   border: 1px solid #cc7;
 324   border-radius: 4px;
 325   padding: 5px 10px;
 326   position: absolute;
 327   min-width: 10em;
 328 }
 329
 330 .ProseMirror-prompt-buttons {
 331   margin-top: 5px;
 332   display: none;
 333 }
 334 #editor, .editor {
 335   background: white;
 336   color: black;
 337   background-clip: padding-box;
 338   border-radius: 4px;
 339   border: 2px solid rgba(0, 0, 0, 0.2);
 340   padding: 5px 0;
 341   margin-bottom: 23px;
 342 }
 343
 344 .ProseMirror p:first-child,
 345 .ProseMirror h1:first-child,
 346 .ProseMirror h2:first-child,
 347 .ProseMirror h3:first-child,
 348 .ProseMirror h4:first-child,
 349 .ProseMirror h5:first-child,
 350 .ProseMirror h6:first-child {
 351   margin-top: 10px;
 352 }
 353
 354 .ProseMirror {
 355   padding: 4px 8px 4px 14px;
 356   line-height: 1.2;
 357   outline: none;
 358 }
 359
 360 .ProseMirror p { margin-bottom: 1em }
 361
 362 .ProseMirror-menu-color-grid-container {
 363   display: grid;
 364   grid-template-columns: repeat(8, 1fr);
 365 }
 366
 367 .ProseMirror-menu-color-grid-item {
 368   width: 20px;
 369   height: 20px;
 370   border: 2px solid #FFF;
 371   display: block;
 372 }
 373
 374 .ProseMirror-menu-table-creator-grid {
 375   display: grid;
 376   gap: 2px;
 377 }
 378
 379 .ProseMirror-menu-table-creator-grid-item {
 380   width: 14px;
 381   height: 14px;
 382   border: 2px solid #BBB;
 383   display: block;
 384   cursor: pointer;
 385 }
 386
 387 .ProseMirror-menu-table-creator-grid-item-active {
 388   border: 2px solid #555;
 389   background-color: #DDD;
 390 }
 391
 392 .ProseMirror-menu-table-creator-grid-label {
 393   padding: $-xs;
 394   text-align: center;
 395 }
 396
 397 .ProseMirror-menu-dialog-wrap {
 398   position: fixed;
 399   top: 0;
 400   left: 0;
 401   width: 100%;
 402   height: 100%;
 403   background-color: rgba(0, 0, 0, 0.1);
 404   z-index: 50;
 405   display: grid;
 406 }
 407
 408 .ProseMirror-menu-dialog-title {
 409   padding: $-xs $-s;
 410   border-bottom: 1px solid #DDD;
 411   font-weight: bold;
 412   position: relative;
 413   margin-bottom: $-xs;
 414 }
 415
 416 .ProseMirror-menu-dialog-footer {
 417   padding: $-xs $-s;
 418   border-top: 1px solid #DDD;
 419   display: flex;
 420   justify-content: end;
 421   margin-top: $-xs;
 422 }
 423
 424 .ProseMirror-menu-dialog-title-close {
 425   color: #FFF;
 426   position: absolute;
 427   top: $-xs + 2px;
 428   right: $-s;
 429   border-radius: 9px;
 430   height: 18px;
 431   width: 18px;
 432   text-align: center;
 433   line-height: 0;
 434   vertical-align: top;
 435   display: flex;
 436   justify-content: center;
 437   align-items: center;
 438 }
 439
 440 .ProseMirror-menu-dialog {
 441   background-color: #FFF;
 442   border: 1px solid #DDD;
 443   border-radius: 3px;
 444   box-shadow: $bs-large;
 445   width: fit-content;
 446   min-width: 300px;
 447   min-height: 100px;
 448   margin: auto;
 449 }
 450
 451 .ProseMirror-menu-dialog-button {
 452   border: 1px solid #DDD;
 453   padding: $-xs $-s;
 454   color: #666;
 455   min-width: 80px;
 456   cursor: pointer;
 457   &:hover {
 458     background-color: #EEE;
 459   }
 460 }
 461
 462 .ProseMirror-menu-dialog-button + .ProseMirror-menu-dialog-button {
 463   margin-left: $-xs;
 464 }
 465
 466 .ProseMirror-menu-dialog-form-row {
 467   display: grid;
 468   grid-template-columns: 1fr 2fr;
 469   align-items: center;
 470   padding: $-xs 0;
 471   label {
 472     padding: 0 $-s;
 473     font-size: .9rem;
 474   }
 475   input {
 476     margin: 0 $-s;
 477   }
 478 }
 479
 480 .ProseMirror-menu-dialog-textarea-wrap {
 481   padding: $-xs $-s;
 482   label {
 483     padding: 0 $-s;
 484     font-size: .9rem;
 485   }
 486   textarea {
 487     width: 100%;
 488     font-size: 0.8rem;
 489   }
 490 }
 491
 492 .ProseMirror-imagewrap {
 493   display: inline-block;
 494   line-height: 0;
 495   font-size: 0;
 496   position: relative;
 497 }
 498 .ProseMirror-imagewrap.ProseMirror-selectednode {
 499   outline: 0;
 500 }
 501
 502 .ProseMirror img[data-show-handles] {
 503   outline: 4px solid #000;
 504 }
 505 .ProseMirror-dragdummy {
 506   position: absolute;
 507   z-index: 2;
 508   left: 0;
 509   top: 0;
 510   max-width: none !important;
 511   max-height: none !important;
 512 }
 513 .ProseMirror-grabhandle {
 514   width: 12px;
 515   height: 12px;
 516   border: 2px solid #000;
 517   z-index: 4;
 518   position: absolute;
 519   background-color: #FFF;
 520 }
 521 .ProseMirror-grabhandle-left-top {
 522   cursor: nw-resize;
 523 }
 524 .ProseMirror-grabhandle-right-top {
 525   cursor: ne-resize;
 526 }
 527 .ProseMirror-grabhandle-right-bottom {
 528   cursor: se-resize;
 529 }
 530 .ProseMirror-grabhandle-left-bottom {
 531   cursor: sw-resize;
 532 }