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 }
 165
 166 // Modals
 167 .editor-modal-wrapper {
 168   position: fixed;
 169   display: flex;
 170   align-items: center;
 171   justify-content: center;
 172   z-index: 999;
 173   background-color: rgba(0, 0, 0, 0.5);
 174   width: 100%;
 175   height: 100%;
 176 }
 177 .editor-modal {
 178   background-color: #FFF;
 179   border-radius: 4px;
 180   overflow: hidden;
 181   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
 182 }
 183 .editor-modal-header {
 184   display: flex;
 185   justify-content: space-between;
 186   align-items: stretch;
 187   background-color: var(--color-primary);
 188   color: #FFF;
 189 }
 190 .editor-modal-title {
 191   padding: 8px $-m;
 192 }
 193 .editor-modal-close {
 194   color: #FFF;
 195   padding: 8px $-m;
 196   align-items: center;
 197   justify-content: center;
 198   cursor: pointer;
 199   &:hover {
 200   background-color: rgba(255, 255, 255, 0.1);
 201   }
 202   svg {
 203     width: 1rem;
 204     height: 1rem;
 205     fill: currentColor;
 206     display: block;
 207   }
 208 }
 209 .editor-modal-body {
 210   padding: $-m;
 211 }
 212
 213 // Specific UI elements
 214 .editor-color-select-row {
 215   display: flex;
 216 }
 217 .editor-color-select-option {
 218   width: 28px;
 219   height: 28px;
 220   cursor: pointer;
 221 }
 222 .editor-color-select-option:hover {
 223   border-radius: 3px;
 224   box-sizing: border-box;
 225   z-index: 3;
 226   box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.25);
 227 }
 228 .editor-table-creator-row {
 229   display: flex;
 230 }
 231 .editor-table-creator-cell {
 232   border: 1px solid #DDD;
 233   width: 15px;
 234   height: 15px;
 235   cursor: pointer;
 236   &.active {
 237     background-color: var(--editor-color-primary);
 238   }
 239 }
 240 .editor-table-creator-display {
 241   text-align: center;
 242   padding: 0.2em;
 243 }
 244
 245 // In-editor elements
 246 .editor-image-wrap {
 247   position: relative;
 248   display: inline-flex;
 249 }
 250 .editor-image-decorator {
 251   position: absolute;
 252   left: 0;
 253   right: 0;
 254   width: 100%;
 255   height: 100%;
 256   display: inline-block;
 257   &.selected {
 258     border: 1px dashed var(--editor-color-primary);
 259   }
 260 }
 261 .editor-image-decorator-handle {
 262   position: absolute;
 263   display: block;
 264   width: 10px;
 265   height: 10px;
 266   border: 2px solid var(--editor-color-primary);
 267   background-color: #FFF;
 268   user-select: none;
 269   &.nw {
 270     inset-inline-start: -5px;
 271     inset-block-start: -5px;
 272     cursor: nw-resize;
 273   }
 274   &.ne {
 275     inset-inline-end: -5px;
 276     inset-block-start: -5px;
 277     cursor: ne-resize;
 278   }
 279   &.se {
 280     inset-inline-end: -5px;
 281     inset-block-end: -5px;
 282     cursor: se-resize;
 283   }
 284   &.sw {
 285     inset-inline-start: -5px;
 286     inset-block-end: -5px;
 287     cursor: sw-resize;
 288   }
 289 }
 290
 291 .editor-table-marker {
 292   position: fixed;
 293   background-color: var(--editor-color-primary);
 294   z-index: 99;
 295   user-select: none;
 296   opacity: 0;
 297   &:hover, &.active {
 298     opacity: 0.4;
 299   }
 300 }
 301 .editor-table-marker-column {
 302   width: 4px;
 303   cursor: col-resize;
 304 }
 305 .editor-table-marker-row {
 306   height: 4px;
 307   cursor: row-resize;
 308 }
 309
 310 .editor-code-block-wrap {
 311   user-select: none;
 312   > * {
 313     pointer-events: none;
 314   }
 315   &.selected .cm-editor {
 316     border: 1px dashed var(--editor-color-primary);
 317   }
 318 }
 319
 320 // Editor form elements
 321 .editor-form-field-wrapper {
 322   margin-bottom: .5rem;
 323 }
 324 .editor-form-field-input {
 325   display: block;
 326   width: 100%;
 327   min-width: 250px;
 328   border: 1px solid #DDD;
 329   padding: .5rem;
 330   border-radius: 4px;
 331   color: #444;
 332 }
 333 textarea.editor-form-field-input {
 334   font-family: var(--font-code);
 335   width: 350px;
 336   height: 250px;
 337   font-size: 12px;
 338 }
 339 .editor-form-field-label {
 340   color: #444;
 341   font-weight: 700;
 342   font-size: 12px;
 343 }
 344 .editor-form-actions {
 345   display: flex;
 346   justify-content: end;
 347   gap: $-s;
 348   margin-top: $-m;
 349 }
 350 .editor-form-actions > button {
 351   display: block;
 352   font-size: 0.85rem;
 353   line-height: 1.4em;
 354   padding: $-xs*1.3 $-m;
 355   font-weight: 400;
 356   border-radius: 4px;
 357   cursor: pointer;
 358   box-shadow: none;
 359   &:focus {
 360     outline: 1px dotted currentColor;
 361     outline-offset: -$-xs;
 362     box-shadow: none;
 363     filter: brightness(90%);
 364   }
 365 }
 366 .editor-form-action-primary {
 367   background-color: var(--color-primary);
 368   color: #FFF;
 369   border: 1px solid var(--color-primary);
 370   &:hover {
 371     @include lightDark(box-shadow, $bs-light, $bs-dark);
 372     filter: brightness(110%);
 373   }
 374 }
 375 .editor-form-action-secondary {
 376   border: 1px solid;
 377   @include lightDark(border-color, #CCC, #666);
 378   @include lightDark(color, #666, #AAA);
 379   &:hover, &:focus, &:active {
 380     @include lightDark(color, #444, #BBB);
 381     border: 1px solid #CCC;
 382     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
 383     background-color: #F2F2F2;
 384     @include lightDark(background-color, #f8f8f8, #444);
 385     filter: none;
 386   }
 387   &:active {
 388     border-color: #BBB;
 389     background-color: #DDD;
 390     color: #666;
 391     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
 392   }
 393 }
 394
 395 // Editor theme styles
 396 .editor-theme-bold {
 397   font-weight: bold;
 398 }
 399 .editor-theme-italic {
 400   font-style: italic;
 401 }
 402 .editor-theme-strikethrough {
 403   text-decoration-line: line-through;
 404 }
 405 .editor-theme-underline {
 406   text-decoration-line: underline;
 407 }
 408 .editor-theme-underline-strikethrough {
 409   text-decoration: underline line-through;
 410 }