input.scss (10909B)
1 .editor-container { 2 position: relative; 3 font-weight: var(--normal-font); 4 line-height: 20px; 5 text-align: left; 6 height: 100%; 7 } 8 9 .editor-inner { 10 overflow-y: auto; 11 position: relative; 12 background-color: var(--background-color); 13 scrollbar-width: thin; 14 max-height: 50lvh; 15 } 16 17 .editor-inner::-webkit-scrollbar { 18 width: 8px; 19 } 20 21 .editor-inner::-webkit-scrollbar-track { 22 background: transparent; 23 } 24 25 .editor-inner::-webkit-scrollbar-thumb { 26 background-color: rgba(155, 155, 155, 0.5); 27 border-radius: 5px; 28 border: transparent; 29 } 30 31 .editor-input { 32 min-height: 150px; 33 resize: none; 34 font-size: 15px; 35 caret-color: rgb(5, 5, 5); 36 position: relative; 37 tab-size: 1; 38 outline: 0; 39 padding: 15px 10px; 40 } 41 42 .toolbar { 43 display: flex; 44 margin-bottom: 1px; 45 background: var(--background-color); 46 padding: 4px; 47 vertical-align: middle; 48 49 button { 50 svg { 51 stroke: var(--text-color); 52 } 53 } 54 } 55 56 .toolbar button.toolbar-item { 57 border: 0; 58 display: flex; 59 background: none; 60 border-radius: 10px; 61 padding: 8px; 62 cursor: pointer; 63 vertical-align: middle; 64 } 65 66 .toolbar button.toolbar-item:disabled { 67 cursor: not-allowed; 68 } 69 70 .toolbar button.toolbar-item.spaced { 71 margin-right: 2px; 72 } 73 74 .toolbar button.toolbar-item svg.format { 75 background-size: contain; 76 display: inline-block; 77 height: 18px; 78 width: 18px; 79 margin-top: 2px; 80 vertical-align: -0.25em; 81 display: flex; 82 opacity: 0.6; 83 } 84 85 .toolbar button.toolbar-item:disabled svg.format { 86 opacity: 0.2; 87 } 88 89 .toolbar button.toolbar-item.active { 90 background-color: rgba(223, 232, 250, 0.3); 91 } 92 93 .toolbar button.toolbar-item.active i { 94 opacity: 1; 95 } 96 97 .toolbar .toolbar-item:hover:not([disabled]) { 98 background-color: var(--background-color-hover); 99 } 100 101 .toolbar .divider { 102 width: 1px; 103 background-color: #eee; 104 margin: 0 4px; 105 } 106 107 .toolbar select.toolbar-item { 108 border: 0; 109 display: flex; 110 background: none; 111 border-radius: 10px; 112 padding: 8px; 113 vertical-align: middle; 114 width: 70px; 115 font-size: 14px; 116 color: #777; 117 text-overflow: ellipsis; 118 } 119 120 .toolbar select.code-language { 121 text-transform: capitalize; 122 width: 130px; 123 } 124 125 .toolbar .toolbar-item .text { 126 display: flex; 127 line-height: 20px; 128 width: 200px; 129 vertical-align: middle; 130 font-size: 14px; 131 color: var(--text-color); 132 text-overflow: ellipsis; 133 width: 70px; 134 overflow: hidden; 135 height: 20px; 136 text-align: left; 137 } 138 139 .toolbar .toolbar-item .icon { 140 display: flex; 141 width: 20px; 142 height: 20px; 143 user-select: none; 144 margin-right: 8px; 145 line-height: 16px; 146 background-size: contain; 147 } 148 149 .toolbar i.chevron-down { 150 margin-top: 3px; 151 width: 16px; 152 height: 16px; 153 display: flex; 154 user-select: none; 155 } 156 157 .toolbar i.chevron-down.inside { 158 width: 16px; 159 height: 16px; 160 display: flex; 161 margin-left: -25px; 162 margin-top: 11px; 163 margin-right: 10px; 164 pointer-events: none; 165 } 166 167 .link-editor { 168 position: absolute; 169 z-index: 100; 170 top: -10000px; 171 left: -10000px; 172 margin-top: -6px; 173 max-width: 300px; 174 width: 100%; 175 opacity: 0; 176 background-color: #fff; 177 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3); 178 border-radius: 8px; 179 transition: opacity 0.5s; 180 } 181 182 .link-editor .link-input { 183 display: block; 184 width: calc(100% - 24px); 185 box-sizing: border-box; 186 margin: 8px 12px; 187 padding: 8px 12px; 188 border-radius: 15px; 189 background-color: #eee; 190 font-size: 15px; 191 color: rgb(5, 5, 5); 192 border: 0; 193 outline: 0; 194 position: relative; 195 font-family: inherit; 196 } 197 198 .link-editor div.link-edit { 199 background-image: url(../../../assets/icons/edit.svg); 200 background-size: 16px; 201 background-position: center; 202 background-repeat: no-repeat; 203 width: 35px; 204 vertical-align: -0.25em; 205 position: absolute; 206 right: 0; 207 top: 0; 208 bottom: 0; 209 cursor: pointer; 210 } 211 212 .link-editor .link-input a { 213 color: rgb(33, 111, 219); 214 text-decoration: none; 215 display: block; 216 white-space: nowrap; 217 overflow: hidden; 218 margin-right: 30px; 219 text-overflow: ellipsis; 220 } 221 222 .link-editor .link-input a:hover { 223 text-decoration: underline; 224 } 225 226 .link-editor .button { 227 width: 20px; 228 height: 20px; 229 display: inline-block; 230 padding: 6px; 231 border-radius: 8px; 232 cursor: pointer; 233 margin: 0 2px; 234 } 235 236 .link-editor .button.hovered { 237 width: 20px; 238 height: 20px; 239 display: inline-block; 240 background-color: #eee; 241 } 242 243 .link-editor .button i, 244 .actions i { 245 background-size: contain; 246 display: inline-block; 247 height: 20px; 248 width: 20px; 249 vertical-align: -0.25em; 250 } 251 252 .dropdown { 253 z-index: 5; 254 display: inline-flex; 255 flex-direction: column; 256 position: absolute; 257 //position: relative; 258 bottom: 0; 259 margin-bottom: 24px; 260 box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), 261 inset 0 0 0 1px rgba(255, 255, 255, 0.5); 262 border-radius: 8px; 263 background-color: #fff; 264 } 265 266 .dropdown .item { 267 margin: 0 8px 0 8px; 268 padding: 8px; 269 color: #050505; 270 cursor: pointer; 271 line-height: 16px; 272 font-size: 15px; 273 display: flex; 274 align-content: center; 275 flex-direction: row; 276 flex-shrink: 0; 277 justify-content: space-between; 278 background-color: #fff; 279 border-radius: 8px; 280 border: 0; 281 min-width: 240px; 282 } 283 284 .dropdown .item .active { 285 display: flex; 286 width: 20px; 287 height: 20px; 288 background-size: contain; 289 } 290 291 .dropdown .item:first-child { 292 margin-top: 8px; 293 } 294 295 .dropdown .item:last-child { 296 margin-bottom: 8px; 297 } 298 299 .dropdown .item:hover { 300 background-color: #eee; 301 } 302 303 .dropdown .item .text { 304 display: flex; 305 line-height: 20px; 306 flex-grow: 1; 307 } 308 309 .dropdown .item .icon { 310 display: flex; 311 width: 20px; 312 height: 20px; 313 user-select: none; 314 margin-right: 12px; 315 line-height: 16px; 316 background-size: contain; 317 } 318 319 // Editor Theme starts here 320 .ltr { 321 text-align: left; 322 } 323 324 .rtl { 325 text-align: right; 326 } 327 328 .editor-placeholder { 329 color: #999; 330 overflow: hidden; 331 position: absolute; 332 text-overflow: ellipsis; 333 top: 15px; 334 left: 10px; 335 font-size: 15px; 336 user-select: none; 337 display: inline-block; 338 pointer-events: none; 339 } 340 341 .editor-quote { 342 margin: 0; 343 margin-left: 20px; 344 font-size: 15px; 345 color: rgb(101, 103, 107); 346 border-left-color: rgb(206, 208, 212); 347 border-left-width: 4px; 348 border-left-style: solid; 349 padding-left: 16px; 350 } 351 352 .editor-heading-h1 { 353 @apply text-2xl text-black font-bold; 354 margin: 0; 355 margin-bottom: 12px; 356 padding: 0; 357 } 358 359 .editor-heading-h2 { 360 @apply text-xl text-black font-bold; 361 margin: 0; 362 margin-top: 10px; 363 padding: 0; 364 } 365 366 .editor-listitem { 367 margin: 8px 32px 8px 32px; 368 } 369 370 .editor-nested-listitem { 371 list-style-type: none; 372 } 373 374 .editor-list-ol { 375 @apply list-decimal; 376 padding: 0; 377 margin: 0; 378 margin-left: 16px; 379 } 380 381 .editor-list-ul { 382 @apply list-disc; 383 padding: 0; 384 margin: 0; 385 margin-left: 16px; 386 } 387 388 .editor-link { 389 color: rgb(33, 111, 219); 390 text-decoration: none; 391 } 392 393 .editor-text-bold { 394 font-weight: bold; 395 } 396 397 .editor-text-italic { 398 font-style: italic; 399 } 400 401 .editor-text-underline { 402 text-decoration: underline; 403 } 404 405 .editor-text-strikethrough { 406 text-decoration: line-through; 407 } 408 409 .editor-text-underlineStrikethrough { 410 text-decoration: underline line-through; 411 } 412 413 .editor-text-code { 414 background-color: rgb(240, 242, 245); 415 padding: 1px 0.25rem; 416 font-family: Menlo, Consolas, Monaco, monospace; 417 font-size: 94%; 418 } 419 420 .editor-code { 421 background-color: rgb(240, 242, 245); 422 font-family: Menlo, Consolas, Monaco, monospace; 423 display: block; 424 padding: 8px 8px 8px 52px; 425 line-height: 1.53; 426 font-size: 13px; 427 margin: 0; 428 margin-top: 8px; 429 margin-bottom: 8px; 430 tab-size: 2; 431 /* white-space: pre; */ 432 overflow-x: auto; 433 position: relative; 434 } 435 436 .editor-code:before { 437 content: attr(data-gutter); 438 position: absolute; 439 background-color: #eee; 440 left: 0; 441 top: 0; 442 border-right: 1px solid #ccc; 443 padding: 8px; 444 color: #777; 445 white-space: pre-wrap; 446 text-align: right; 447 min-width: 25px; 448 } 449 450 .editor-code:after { 451 content: attr(data-highlight-language); 452 top: 0; 453 right: 3px; 454 padding: 3px; 455 font-size: 10px; 456 text-transform: uppercase; 457 position: absolute; 458 color: rgba(0, 0, 0, 0.5); 459 } 460 461 .editor-tokenComment { 462 color: slategray; 463 } 464 465 .editor-tokenPunctuation { 466 color: #999; 467 } 468 469 .editor-tokenProperty { 470 color: #905; 471 } 472 473 .editor-tokenSelector { 474 color: #690; 475 } 476 477 .editor-tokenOperator { 478 color: #9a6e3a; 479 } 480 481 .editor-tokenAttr { 482 color: #07a; 483 } 484 485 .editor-tokenVariable { 486 color: #e90; 487 } 488 489 .editor-tokenFunction { 490 color: #dd4a68; 491 } 492 493 // Mentions 494 .typeahead-popover { 495 background: #fff; 496 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3); 497 border-radius: 8px; 498 margin-top: 25px; 499 } 500 501 .typeahead-popover ul { 502 padding: 0; 503 list-style: none; 504 margin: 0; 505 border-radius: 8px; 506 max-height: 200px; 507 overflow-y: scroll; 508 } 509 510 .typeahead-popover ul::-webkit-scrollbar { 511 display: none; 512 } 513 514 .typeahead-popover ul { 515 -ms-overflow-style: none; 516 scrollbar-width: none; 517 } 518 519 .typeahead-popover ul li { 520 margin: 0; 521 min-width: 180px; 522 font-size: 14px; 523 outline: none; 524 cursor: pointer; 525 border-radius: 8px; 526 } 527 528 .typeahead-popover ul li.selected { 529 background: #eee; 530 } 531 532 .typeahead-popover li { 533 margin: 0 8px 0 8px; 534 padding: 8px; 535 color: #050505; 536 cursor: pointer; 537 line-height: 16px; 538 font-size: 15px; 539 display: flex; 540 align-content: center; 541 flex-direction: row; 542 flex-shrink: 0; 543 background-color: #fff; 544 border-radius: 8px; 545 border: 0; 546 } 547 548 .typeahead-popover li.active { 549 display: flex; 550 width: 20px; 551 height: 20px; 552 background-size: contain; 553 } 554 555 .typeahead-popover li:first-child { 556 border-radius: 8px 8px 0px 0px; 557 } 558 559 .typeahead-popover li:last-child { 560 border-radius: 0px 0px 8px 8px; 561 } 562 563 .typeahead-popover li:hover { 564 background-color: #eee; 565 } 566 567 .typeahead-popover li .text { 568 display: flex; 569 line-height: 20px; 570 flex-grow: 1; 571 min-width: 150px; 572 } 573 574 .typeahead-popover li .icon { 575 display: flex; 576 width: 20px; 577 height: 20px; 578 user-select: none; 579 margin-right: 8px; 580 line-height: 16px; 581 background-size: contain; 582 background-repeat: no-repeat; 583 background-position: center; 584 } 585 586 .mentions-menu { 587 width: 250px; 588 position: absolute; 589 bottom: 30px; 590 } 591 592 .mention, 593 span[data-lexical-mention] { 594 @apply rounded-md bg-slate-300 p-1 select-none; 595 } 596 597 598 .mention::before, 599 span[data-lexical-mention]::before { 600 content: "@"; 601 } 602 603 .mention:focus { 604 box-shadow: rgb(180 213 255) 0px 0px 0px 2px; 605 outline: none; 606 }