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 // Editor form elements
 328 .editor-form-field-wrapper {
 329   margin-bottom: .5rem;
 330 }
 331 .editor-form-field-input {
 332   display: block;
 333   width: 100%;
 334   min-width: 250px;
 335   border: 1px solid #DDD;
 336   padding: .5rem;
 337   border-radius: 4px;
 338   color: #444;
 339 }
 340 textarea.editor-form-field-input {
 341   font-family: var(--font-code);
 342   width: 350px;
 343   height: 250px;
 344   font-size: 12px;
 345 }
 346 .editor-form-field-label {
 347   color: #444;
 348   font-weight: 700;
 349   font-size: 12px;
 350 }
 351 .editor-form-actions {
 352   display: flex;
 353   justify-content: end;
 354   gap: $-s;
 355   margin-top: $-m;
 356 }
 357 .editor-form-actions > button {
 358   display: block;
 359   font-size: 0.85rem;
 360   line-height: 1.4em;
 361   padding: $-xs*1.3 $-m;
 362   font-weight: 400;
 363   border-radius: 4px;
 364   cursor: pointer;
 365   box-shadow: none;
 366   &:focus {
 367     outline: 1px dotted currentColor;
 368     outline-offset: -$-xs;
 369     box-shadow: none;
 370     filter: brightness(90%);
 371   }
 372 }
 373 .editor-form-action-primary {
 374   background-color: var(--color-primary);
 375   color: #FFF;
 376   border: 1px solid var(--color-primary);
 377   &:hover {
 378     @include lightDark(box-shadow, $bs-light, $bs-dark);
 379     filter: brightness(110%);
 380   }
 381 }
 382 .editor-form-action-secondary {
 383   border: 1px solid;
 384   @include lightDark(border-color, #CCC, #666);
 385   @include lightDark(color, #666, #AAA);
 386   &:hover, &:focus, &:active {
 387     @include lightDark(color, #444, #BBB);
 388     border: 1px solid #CCC;
 389     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
 390     background-color: #F2F2F2;
 391     @include lightDark(background-color, #f8f8f8, #444);
 392     filter: none;
 393   }
 394   &:active {
 395     border-color: #BBB;
 396     background-color: #DDD;
 397     color: #666;
 398     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
 399   }
 400 }
 401 .editor-form-tab-container {
 402   display: flex;
 403   flex-direction: row;
 404   gap: 2rem;
 405 }
 406 .editor-form-tab-controls {
 407   display: flex;
 408   flex-direction: column;
 409   align-items: stretch;
 410   gap: .25rem;
 411 }
 412 .editor-form-tab-control {
 413   font-weight: bold;
 414   font-size: 14px;
 415   color: #444;
 416   border-bottom: 2px solid transparent;
 417   position: relative;
 418   cursor: pointer;
 419   padding: .25rem .5rem;
 420   text-align: start;
 421   &[aria-selected="true"] {
 422     border-color: var(--editor-color-primary);
 423     color: var(--editor-color-primary);
 424   }
 425   &[aria-selected="true"]:after, &:hover:after {
 426     background-color: var(--editor-color-primary);
 427     opacity: .15;
 428     content: '';
 429     display: block;
 430     position: absolute;
 431     left: 0;
 432     top: 0;
 433     width: 100%;
 434     height: 100%;
 435   }
 436 }
 437 .editor-form-tab-contents {
 438   width: 360px;
 439 }
 440
 441 // Editor theme styles
 442 .editor-theme-bold {
 443   font-weight: bold;
 444 }
 445 .editor-theme-italic {
 446   font-style: italic;
 447 }
 448 .editor-theme-strikethrough {
 449   text-decoration-line: line-through;
 450 }
 451 .editor-theme-underline {
 452   text-decoration-line: underline;
 453 }
 454 .editor-theme-underline-strikethrough {
 455   text-decoration: underline line-through;
 456 }