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