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