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