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

   1 // Common variables
   2 :root {
   3   --editor-color-primary: #206ea7;
   4 }
   5
   6 // Main UI elements
   7 .editor-container {
   8   background-color: #FFF;
   9   position: relative;
  10   &.fullscreen {
  11     z-index: 500;
  12   }
  13 }
  14 .editor-toolbar-main {
  15   display: flex;
  16   flex-wrap: wrap;
  17   justify-content: center;
  18   border-top: 1px solid #DDD;
  19   border-bottom: 1px solid #DDD;
  20 }
  21
  22 body.editor-is-fullscreen {
  23   overflow: hidden;
  24   .edit-area {
  25     z-index: 20;
  26   }
  27 }
  28 .editor-content-area {
  29   &:focus {
  30     outline: 0;
  31   }
  32 }
  33 .editor-content-wrap {
  34   position: relative;
  35   overflow-y: scroll;
  36 }
  37
  38 // Buttons
  39 .editor-button {
  40   font-size: 12px;
  41   padding: 4px;
  42   color: #444;
  43   border-radius: 4px;
  44   display: flex;
  45   align-items: center;
  46   justify-content: center;
  47   margin: 2px;
  48 }
  49 .editor-button:hover {
  50   background-color: #EEE;
  51   cursor: pointer;
  52   color: #000;
  53 }
  54 .editor-button[disabled] {
  55   pointer-events: none;
  56   cursor: not-allowed;
  57   opacity: .6;
  58 }
  59 .editor-button-active, .editor-button-active:hover {
  60   background-color: #ceebff;
  61   color: #000;
  62 }
  63 .editor-button-long {
  64   display: flex !important;
  65   flex-direction: row;
  66   align-items: center;
  67   justify-content: start;
  68   gap: .5rem;
  69 }
  70 .editor-button-text {
  71   font-weight: 400;
  72   color: #000;
  73   font-size: 14px;
  74   flex: 1;
  75   padding-inline-end: 4px;
  76 }
  77 .editor-button-format-preview {
  78   padding: 4px 6px;
  79   display: block;
  80 }
  81 .editor-button-long .editor-button-icon {
  82   width: 24px;
  83   height: 24px;
  84 }
  85 .editor-button-icon svg {
  86   width: 24px;
  87   height: 24px;
  88   color: inherit;
  89   fill: currentColor;
  90   display: block;
  91 }
  92 .editor-menu-button-icon {
  93   width: 24px;
  94   height: 24px;
  95   svg {
  96     fill: #888;
  97   }
  98 }
  99 .editor-container[dir="rtl"] .editor-menu-button-icon {
 100   rotate: 180deg;
 101 }
 102 .editor-button-with-menu-container {
 103   display: flex;
 104   flex-direction: row;
 105   gap: 0;
 106   align-items: stretch;
 107   border-radius: 4px;
 108   .editor-dropdown-menu-container {
 109     display: flex;
 110   }
 111   .editor-dropdown-menu-container > .editor-dropdown-menu {
 112     top: 100%;
 113   }
 114   .editor-dropdown-menu-container > .editor-button {
 115     padding-inline: 4px;
 116     margin-inline-start: -3px;
 117     svg {
 118       width: 12px;
 119       height: 12px;
 120     }
 121   }
 122   &:hover {
 123     outline: 1px solid #DDD;
 124     outline-offset: -3px;
 125   }
 126 }
 127
 128 // Containers
 129 .editor-dropdown-menu-container {
 130     position: relative;
 131 }
 132 .editor-dropdown-menu {
 133   position: absolute;
 134   background-color: #FFF;
 135   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);
 136   z-index: 99;
 137   min-width: 120px;
 138   display: flex;
 139   flex-direction: row;
 140 }
 141 .editor-dropdown-menu-vertical {
 142   display: flex;
 143   flex-direction: column;
 144   align-items: stretch;
 145   min-width: 160px;
 146 }
 147 .editor-dropdown-menu-vertical .editor-button {
 148   border-bottom: 0;
 149   text-align: start;
 150   display: block;
 151   width: 100%;
 152 }
 153 .editor-dropdown-menu-vertical > .editor-dropdown-menu-container .editor-dropdown-menu {
 154   inset-inline-start: 100%;
 155   top: 0;
 156 }
 157
 158 .editor-separator {
 159   display: block;
 160   height: 1px;
 161   background-color: #DDD;
 162   opacity: .8;
 163 }
 164
 165 .editor-format-menu-toggle {
 166   width: 130px;
 167   height: 32px;
 168   font-size: 13px;
 169   overflow: hidden;
 170   padding-inline: 12px;
 171   justify-content: start;
 172   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23666" d="M7.41 8L12 12.58 16.59 8 18 9.41l-6 6-6-6z"/></svg>');
 173   background-repeat: no-repeat;
 174   background-position: 98% 50%;
 175   background-size: 28px;
 176 }
 177 .editor-container[dir="rtl"] .editor-format-menu-toggle {
 178   background-position: 2% 50%;
 179 }
 180 .editor-format-menu .editor-dropdown-menu {
 181   min-width: 300px;
 182   .editor-dropdown-menu {
 183     min-width: 220px;
 184   }
 185   .editor-button-icon {
 186     display: none;
 187   }
 188 }
 189 .editor-format-menu .editor-dropdown-menu .editor-dropdown-menu-container > .editor-button {
 190   padding: 8px 10px;
 191 }
 192
 193 .editor-overflow-container {
 194   display: flex;
 195   border-inline: 1px solid #DDD;
 196   padding-inline: 4px;
 197   &:first-child {
 198     border-inline-start: none;
 199   }
 200   &:last-child {
 201     border-inline-end: none;
 202   }
 203   + .editor-overflow-container {
 204     border-inline-start: none;
 205   }
 206 }
 207
 208 .editor-context-toolbar {
 209   position: fixed;
 210   background-color: #FFF;
 211   border: 1px solid #DDD;
 212   padding: .2rem;
 213   border-radius: 4px;
 214   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
 215   display: flex;
 216   flex-direction: row;
 217   &:before {
 218     content: '';
 219     z-index: -1;
 220     display: block;
 221     width: 8px;
 222     height: 8px;
 223     position: absolute;
 224     background-color: #FFF;
 225     border-top: 1px solid #DDD;
 226     border-left: 1px solid #DDD;
 227     transform: rotate(45deg);
 228     left: 50%;
 229     margin-left: -4px;
 230     top: -5px;
 231   }
 232   &.is-above:before {
 233     top: calc(100% - 5px);
 234     transform: rotate(225deg);
 235   }
 236 }
 237
 238 // Modals
 239 .editor-modal-wrapper {
 240   position: fixed;
 241   display: flex;
 242   align-items: center;
 243   justify-content: center;
 244   z-index: 999;
 245   background-color: rgba(0, 0, 0, 0.5);
 246   width: 100%;
 247   height: 100%;
 248 }
 249 .editor-modal {
 250   background-color: #FFF;
 251   border-radius: 4px;
 252   overflow: hidden;
 253   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
 254 }
 255 .editor-modal-header {
 256   display: flex;
 257   justify-content: space-between;
 258   align-items: stretch;
 259   background-color: var(--color-primary);
 260   color: #FFF;
 261 }
 262 .editor-modal-title {
 263   padding: 8px $-m;
 264 }
 265 .editor-modal-close {
 266   color: #FFF;
 267   padding: 8px $-m;
 268   align-items: center;
 269   justify-content: center;
 270   cursor: pointer;
 271   &:hover {
 272   background-color: rgba(255, 255, 255, 0.1);
 273   }
 274   svg {
 275     width: 1rem;
 276     height: 1rem;
 277     fill: currentColor;
 278     display: block;
 279   }
 280 }
 281 .editor-modal-body {
 282   padding: $-m;
 283 }
 284
 285 // Specific UI elements
 286 .editor-color-select-row {
 287   display: flex;
 288 }
 289 .editor-color-select-option {
 290   width: 28px;
 291   height: 28px;
 292   cursor: pointer;
 293   display: flex;
 294   align-items: center;
 295   justify-content: center;
 296 }
 297 .editor-color-select-option:hover {
 298   border-radius: 3px;
 299   box-sizing: border-box;
 300   z-index: 3;
 301   box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.25);
 302 }
 303 .editor-color-select-option[data-color=""] svg {
 304   width: 20px;
 305   height: 20px;
 306   fill: #888;
 307 }
 308 .editor-table-creator-row {
 309   display: flex;
 310 }
 311 .editor-table-creator-cell {
 312   border: 1px solid #DDD;
 313   width: 15px;
 314   height: 15px;
 315   cursor: pointer;
 316   &.active {
 317     background-color: var(--editor-color-primary);
 318   }
 319 }
 320 .editor-table-creator-display {
 321   text-align: center;
 322   padding: 0.2em;
 323 }
 324
 325 // In-editor elements
 326 .editor-image-wrap {
 327   position: relative;
 328   display: inline-flex;
 329 }
 330 .editor-node-resizer {
 331   position: absolute;
 332   left: 0;
 333   right: auto;
 334   display: inline-block;
 335   outline: 2px dashed var(--editor-color-primary);
 336   direction: ltr;
 337 }
 338 .editor-node-resizer-handle {
 339   position: absolute;
 340   display: block;
 341   width: 10px;
 342   height: 10px;
 343   border: 2px solid var(--editor-color-primary);
 344   z-index: 3;
 345   background-color: #FFF;
 346   user-select: none;
 347   &.nw {
 348     inset-inline-start: -5px;
 349     inset-block-start: -5px;
 350     cursor: nw-resize;
 351   }
 352   &.ne {
 353     inset-inline-end: -5px;
 354     inset-block-start: -5px;
 355     cursor: ne-resize;
 356   }
 357   &.se {
 358     inset-inline-end: -5px;
 359     inset-block-end: -5px;
 360     cursor: se-resize;
 361   }
 362   &.sw {
 363     inset-inline-start: -5px;
 364     inset-block-end: -5px;
 365     cursor: sw-resize;
 366   }
 367 }
 368 .editor-node-resizer-ghost {
 369   opacity: 0.5;
 370   display: none;
 371   position: absolute;
 372   left: 0;
 373   top: 0;
 374   width: 100%;
 375   height: 100%;
 376   z-index: 2;
 377   pointer-events: none;
 378   background-color: var(--editor-color-primary);
 379 }
 380 .editor-node-resizer.active .editor-node-resizer-ghost {
 381   display: block;
 382 }
 383
 384 .editor-table-marker {
 385   position: fixed;
 386   background-color: var(--editor-color-primary);
 387   z-index: 99;
 388   user-select: none;
 389   opacity: 0;
 390   &:hover, &.active {
 391     opacity: 0.4;
 392   }
 393 }
 394 .editor-table-marker-column {
 395   width: 4px;
 396   cursor: col-resize;
 397 }
 398 .editor-table-marker-row {
 399   height: 4px;
 400   cursor: row-resize;
 401 }
 402
 403 .editor-code-block-wrap {
 404   user-select: none;
 405   > * {
 406     pointer-events: none;
 407   }
 408   &.selected .cm-editor {
 409     border: 1px dashed var(--editor-color-primary);
 410   }
 411 }
 412 .editor-diagram.selected {
 413   outline: 2px dashed var(--editor-color-primary);
 414 }
 415
 416 .editor-media-wrap {
 417   display: inline-block;
 418   cursor: not-allowed;
 419   iframe {
 420     pointer-events: none;
 421   }
 422   &.align-left {
 423     float: left;
 424   }
 425   &.align-right {
 426     float: right;
 427   }
 428   &.align-center {
 429     display: block;
 430     margin-inline: auto;
 431   }
 432 }
 433
 434 /**
 435  * Fake task list checkboxes
 436  */
 437 .editor-content-area .task-list-item {
 438   margin-left: 0;
 439   position: relative;
 440 }
 441 .editor-content-area .task-list-item > input[type="checkbox"] {
 442   display: none;
 443 }
 444 .editor-content-area .task-list-item:before {
 445   content: '';
 446   display: inline-block;
 447   border: 2px solid #CCC;
 448   width: 12px;
 449   height: 12px;
 450   border-radius: 2px;
 451   margin-right: 8px;
 452   vertical-align: text-top;
 453   cursor: pointer;
 454   position: absolute;
 455   left: -24px;
 456   top: 4px;
 457 }
 458 .editor-content-area .task-list-item[checked]:before {
 459   background-color: #CCC;
 460   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>');
 461   background-position: 50% 50%;
 462   background-size: 100% 100%;
 463 }
 464
 465 /**
 466  * Form elements
 467  */
 468 .editor-form-field-wrapper {
 469   margin-bottom: .5rem;
 470 }
 471 .editor-form-field-input {
 472   display: block;
 473   width: 100%;
 474   min-width: 250px;
 475   border: 1px solid #DDD;
 476   padding: .5rem;
 477   border-radius: 4px;
 478   color: #444;
 479 }
 480 textarea.editor-form-field-input {
 481   font-family: var(--font-code);
 482   width: 350px;
 483   height: 250px;
 484   font-size: 12px;
 485 }
 486 .editor-form-field-label {
 487   color: #444;
 488   font-weight: 700;
 489   font-size: 12px;
 490 }
 491 .editor-form-actions {
 492   display: flex;
 493   justify-content: end;
 494   gap: $-s;
 495   margin-top: $-m;
 496 }
 497 .editor-form-actions > button {
 498   display: block;
 499   font-size: 0.85rem;
 500   line-height: 1.4em;
 501   padding: $-xs*1.3 $-m;
 502   font-weight: 400;
 503   border-radius: 4px;
 504   cursor: pointer;
 505   box-shadow: none;
 506   &:focus {
 507     outline: 1px dotted currentColor;
 508     outline-offset: -$-xs;
 509     box-shadow: none;
 510     filter: brightness(90%);
 511   }
 512 }
 513 .editor-form-action-primary {
 514   background-color: var(--color-primary);
 515   color: #FFF;
 516   border: 1px solid var(--color-primary);
 517   &:hover {
 518     @include lightDark(box-shadow, $bs-light, $bs-dark);
 519     filter: brightness(110%);
 520   }
 521 }
 522 .editor-form-action-secondary {
 523   border: 1px solid;
 524   @include lightDark(border-color, #CCC, #666);
 525   @include lightDark(color, #666, #AAA);
 526   &:hover, &:focus, &:active {
 527     @include lightDark(color, #444, #BBB);
 528     border: 1px solid #CCC;
 529     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
 530     background-color: #F2F2F2;
 531     @include lightDark(background-color, #f8f8f8, #444);
 532     filter: none;
 533   }
 534   &:active {
 535     border-color: #BBB;
 536     background-color: #DDD;
 537     color: #666;
 538     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
 539   }
 540 }
 541 .editor-form-tab-container {
 542   display: flex;
 543   flex-direction: row;
 544   gap: 2rem;
 545 }
 546 .editor-form-tab-controls {
 547   display: flex;
 548   flex-direction: column;
 549   align-items: stretch;
 550   gap: .25rem;
 551 }
 552 .editor-form-tab-control {
 553   font-weight: bold;
 554   font-size: 14px;
 555   color: #444;
 556   border-bottom: 2px solid transparent;
 557   position: relative;
 558   cursor: pointer;
 559   padding: .25rem .5rem;
 560   text-align: start;
 561   &[aria-selected="true"] {
 562     border-color: var(--editor-color-primary);
 563     color: var(--editor-color-primary);
 564   }
 565   &[aria-selected="true"]:after, &:hover:after {
 566     background-color: var(--editor-color-primary);
 567     opacity: .15;
 568     content: '';
 569     display: block;
 570     position: absolute;
 571     left: 0;
 572     top: 0;
 573     width: 100%;
 574     height: 100%;
 575   }
 576 }
 577 .editor-form-tab-contents {
 578   width: 360px;
 579 }
 580 .editor-action-input-container {
 581   display: flex;
 582   flex-direction: row;
 583   align-items: end;
 584   justify-content: space-between;
 585   gap: .1rem;
 586   .editor-button {
 587     margin-bottom: 12px;
 588   }
 589 }
 590
 591 // Editor theme styles
 592 .editor-theme-bold {
 593   font-weight: bold;
 594 }
 595 .editor-theme-italic {
 596   font-style: italic;
 597 }
 598 .editor-theme-strikethrough {
 599   text-decoration-line: line-through;
 600 }
 601 .editor-theme-underline {
 602   text-decoration-line: underline;
 603 }
 604 .editor-theme-underline-strikethrough {
 605   text-decoration: underline line-through;
 606 }