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   display: inline-block;
 378   cursor: not-allowed;
 379   iframe {
 380     pointer-events: none;
 381   }
 382   &.align-left {
 383     float: left;
 384   }
 385   &.align-right {
 386     float: right;
 387   }
 388   &.align-center {
 389     display: block;
 390     margin-inline: auto;
 391   }
 392 }
 393
 394 /**
 395  * Fake task list checkboxes
 396  */
 397 .editor-content-area .task-list-item {
 398   margin-left: 0;
 399   position: relative;
 400 }
 401 .editor-content-area .task-list-item > input[type="checkbox"] {
 402   display: none;
 403 }
 404 .editor-content-area .task-list-item:before {
 405   content: '';
 406   display: inline-block;
 407   border: 2px solid #CCC;
 408   width: 12px;
 409   height: 12px;
 410   border-radius: 2px;
 411   margin-right: 8px;
 412   vertical-align: text-top;
 413   cursor: pointer;
 414   position: absolute;
 415   left: -24px;
 416   top: 4px;
 417 }
 418 .editor-content-area .task-list-item[checked]:before {
 419   background-color: #CCC;
 420   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>');
 421   background-position: 50% 50%;
 422   background-size: 100% 100%;
 423 }
 424
 425 // Editor form elements
 426 .editor-form-field-wrapper {
 427   margin-bottom: .5rem;
 428 }
 429 .editor-form-field-input {
 430   display: block;
 431   width: 100%;
 432   min-width: 250px;
 433   border: 1px solid #DDD;
 434   padding: .5rem;
 435   border-radius: 4px;
 436   color: #444;
 437 }
 438 textarea.editor-form-field-input {
 439   font-family: var(--font-code);
 440   width: 350px;
 441   height: 250px;
 442   font-size: 12px;
 443 }
 444 .editor-form-field-label {
 445   color: #444;
 446   font-weight: 700;
 447   font-size: 12px;
 448 }
 449 .editor-form-actions {
 450   display: flex;
 451   justify-content: end;
 452   gap: $-s;
 453   margin-top: $-m;
 454 }
 455 .editor-form-actions > button {
 456   display: block;
 457   font-size: 0.85rem;
 458   line-height: 1.4em;
 459   padding: $-xs*1.3 $-m;
 460   font-weight: 400;
 461   border-radius: 4px;
 462   cursor: pointer;
 463   box-shadow: none;
 464   &:focus {
 465     outline: 1px dotted currentColor;
 466     outline-offset: -$-xs;
 467     box-shadow: none;
 468     filter: brightness(90%);
 469   }
 470 }
 471 .editor-form-action-primary {
 472   background-color: var(--color-primary);
 473   color: #FFF;
 474   border: 1px solid var(--color-primary);
 475   &:hover {
 476     @include lightDark(box-shadow, $bs-light, $bs-dark);
 477     filter: brightness(110%);
 478   }
 479 }
 480 .editor-form-action-secondary {
 481   border: 1px solid;
 482   @include lightDark(border-color, #CCC, #666);
 483   @include lightDark(color, #666, #AAA);
 484   &:hover, &:focus, &:active {
 485     @include lightDark(color, #444, #BBB);
 486     border: 1px solid #CCC;
 487     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
 488     background-color: #F2F2F2;
 489     @include lightDark(background-color, #f8f8f8, #444);
 490     filter: none;
 491   }
 492   &:active {
 493     border-color: #BBB;
 494     background-color: #DDD;
 495     color: #666;
 496     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
 497   }
 498 }
 499 .editor-form-tab-container {
 500   display: flex;
 501   flex-direction: row;
 502   gap: 2rem;
 503 }
 504 .editor-form-tab-controls {
 505   display: flex;
 506   flex-direction: column;
 507   align-items: stretch;
 508   gap: .25rem;
 509 }
 510 .editor-form-tab-control {
 511   font-weight: bold;
 512   font-size: 14px;
 513   color: #444;
 514   border-bottom: 2px solid transparent;
 515   position: relative;
 516   cursor: pointer;
 517   padding: .25rem .5rem;
 518   text-align: start;
 519   &[aria-selected="true"] {
 520     border-color: var(--editor-color-primary);
 521     color: var(--editor-color-primary);
 522   }
 523   &[aria-selected="true"]:after, &:hover:after {
 524     background-color: var(--editor-color-primary);
 525     opacity: .15;
 526     content: '';
 527     display: block;
 528     position: absolute;
 529     left: 0;
 530     top: 0;
 531     width: 100%;
 532     height: 100%;
 533   }
 534 }
 535 .editor-form-tab-contents {
 536   width: 360px;
 537 }
 538 .editor-action-input-container {
 539   display: flex;
 540   flex-direction: row;
 541   align-items: end;
 542   justify-content: space-between;
 543   gap: .1rem;
 544   .editor-button {
 545     margin-bottom: 12px;
 546   }
 547 }
 548
 549 // Editor theme styles
 550 .editor-theme-bold {
 551   font-weight: bold;
 552 }
 553 .editor-theme-italic {
 554   font-style: italic;
 555 }
 556 .editor-theme-strikethrough {
 557   text-decoration-line: line-through;
 558 }
 559 .editor-theme-underline {
 560   text-decoration-line: underline;
 561 }
 562 .editor-theme-underline-strikethrough {
 563   text-decoration: underline line-through;
 564 }