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