trumbowyg.css (19216B)
1 /** 2 * Trumbowyg v2.10.0 - A lightweight WYSIWYG editor 3 * Default stylesheet for Trumbowyg editor 4 * ------------------------ 5 * @link http://alex-d.github.io/Trumbowyg 6 * @license MIT 7 * @author Alexandre Demode (Alex-D) 8 * Twitter : @AlexandreDemode 9 * Website : alex-d.fr 10 */ 11 12 #trumbowyg-icons { 13 overflow: hidden; 14 visibility: hidden; 15 height: 0; 16 width: 0; } 17 #trumbowyg-icons svg { 18 height: 0; 19 width: 0; } 20 21 .trumbowyg-box *, 22 .trumbowyg-box *::before, 23 .trumbowyg-box *::after { 24 box-sizing: border-box; } 25 26 .trumbowyg-box svg { 27 width: 17px; 28 height: 100%; 29 fill: #222; } 30 31 .trumbowyg-box, 32 .trumbowyg-editor { 33 display: block; 34 position: relative; 35 border: 1px solid #DDD; 36 width: 100%; 37 min-height: 300px; 38 margin: 17px auto; } 39 40 .trumbowyg-box .trumbowyg-editor { 41 margin: 0 auto; } 42 43 .trumbowyg-box.trumbowyg-fullscreen { 44 background: #FEFEFE; 45 border: none !important; } 46 47 .trumbowyg-editor, 48 .trumbowyg-textarea { 49 position: relative; 50 box-sizing: border-box; 51 padding: 20px; 52 min-height: 300px; 53 width: 100%; 54 border-style: none; 55 resize: none; 56 outline: none; 57 overflow: auto; } 58 .trumbowyg-editor.trumbowyg-autogrow-on-enter, 59 .trumbowyg-textarea.trumbowyg-autogrow-on-enter { 60 transition: height 300ms ease-out; } 61 62 .trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-box-blur .trumbowyg-editor::before { 63 color: transparent !important; 64 text-shadow: 0 0 7px #333; } 65 @media screen and (min-width: 0 \0) { 66 .trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-box-blur .trumbowyg-editor::before { 67 color: rgba(200, 200, 200, 0.6) !important; } } 68 @supports (-ms-accelerator: true) { 69 .trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-box-blur .trumbowyg-editor::before { 70 color: rgba(200, 200, 200, 0.6) !important; } } 71 72 .trumbowyg-box-blur .trumbowyg-editor img, 73 .trumbowyg-box-blur .trumbowyg-editor hr { 74 opacity: 0.2; } 75 76 .trumbowyg-textarea { 77 position: relative; 78 display: block; 79 overflow: auto; 80 border: none; 81 font-size: 14px; 82 font-family: "Inconsolata", "Consolas", "Courier", "Courier New", sans-serif; 83 line-height: 18px; } 84 85 .trumbowyg-box.trumbowyg-editor-visible .trumbowyg-textarea { 86 height: 1px !important; 87 width: 25%; 88 min-height: 0 !important; 89 padding: 0 !important; 90 background: none; 91 opacity: 0 !important; } 92 93 .trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-textarea { 94 display: block; } 95 96 .trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-editor { 97 display: none; } 98 99 .trumbowyg-box.trumbowyg-disabled .trumbowyg-textarea { 100 opacity: 0.8; 101 background: none; } 102 103 .trumbowyg-editor[contenteditable=true]:empty:not(:focus)::before { 104 content: attr(placeholder); 105 color: #999; 106 pointer-events: none; } 107 108 .trumbowyg-button-pane { 109 width: 100%; 110 min-height: 36px; 111 background: #ecf0f1; 112 border-bottom: 1px solid #d7e0e2; 113 margin: 0; 114 padding: 0 5px; 115 position: relative; 116 list-style-type: none; 117 line-height: 10px; 118 backface-visibility: hidden; 119 z-index: 11; } 120 .trumbowyg-button-pane::after { 121 content: " "; 122 display: block; 123 position: absolute; 124 top: 36px; 125 left: 0; 126 right: 0; 127 width: 100%; 128 height: 1px; 129 background: #d7e0e2; } 130 .trumbowyg-button-pane .trumbowyg-button-group { 131 display: inline-block; } 132 .trumbowyg-button-pane .trumbowyg-button-group .trumbowyg-fullscreen-button svg { 133 color: transparent; } 134 .trumbowyg-button-pane .trumbowyg-button-group::after { 135 content: " "; 136 display: inline-block; 137 width: 1px; 138 background: #d7e0e2; 139 margin: 0 5px; 140 height: 35px; 141 vertical-align: top; } 142 .trumbowyg-button-pane .trumbowyg-button-group:last-child::after { 143 content: none; } 144 .trumbowyg-button-pane button { 145 display: inline-block; 146 position: relative; 147 width: 35px; 148 height: 35px; 149 padding: 1px 6px !important; 150 margin-bottom: 1px; 151 overflow: hidden; 152 border: none; 153 cursor: pointer; 154 background: none; 155 vertical-align: middle; 156 transition: background-color 150ms, opacity 150ms; } 157 .trumbowyg-button-pane button.trumbowyg-textual-button { 158 width: auto; 159 line-height: 35px; 160 -webkit-user-select: none; 161 -moz-user-select: none; 162 -ms-user-select: none; 163 user-select: none; } 164 .trumbowyg-button-pane.trumbowyg-disable button:not(.trumbowyg-not-disable):not(.trumbowyg-active), 165 .trumbowyg-button-pane button.trumbowyg-disable, 166 .trumbowyg-disabled .trumbowyg-button-pane button:not(.trumbowyg-not-disable):not(.trumbowyg-viewHTML-button) { 167 opacity: 0.2; 168 cursor: default; } 169 .trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::before, 170 .trumbowyg-disabled .trumbowyg-button-pane .trumbowyg-button-group::before { 171 background: #e3e9eb; } 172 .trumbowyg-button-pane button:not(.trumbowyg-disable):hover, 173 .trumbowyg-button-pane button:not(.trumbowyg-disable):focus, 174 .trumbowyg-button-pane button.trumbowyg-active { 175 background-color: #FFF; 176 outline: none; } 177 .trumbowyg-button-pane .trumbowyg-open-dropdown::after { 178 display: block; 179 content: " "; 180 position: absolute; 181 top: 25px; 182 right: 3px; 183 height: 0; 184 width: 0; 185 border: 3px solid transparent; 186 border-top-color: #555; } 187 .trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button { 188 padding-left: 10px !important; 189 padding-right: 18px !important; } 190 .trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button::after { 191 top: 17px; 192 right: 7px; } 193 .trumbowyg-button-pane .trumbowyg-right { 194 float: right; } 195 196 .trumbowyg-dropdown { 197 width: 200px; 198 border: 1px solid #ecf0f1; 199 padding: 5px 0; 200 border-top: none; 201 background: #FFF; 202 margin-left: -1px; 203 box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px; 204 z-index: 12; } 205 .trumbowyg-dropdown button { 206 display: block; 207 width: 100%; 208 height: 35px; 209 line-height: 35px; 210 text-decoration: none; 211 background: #FFF; 212 padding: 0 10px; 213 color: #333 !important; 214 border: none; 215 cursor: pointer; 216 text-align: left; 217 font-size: 15px; 218 transition: all 150ms; } 219 .trumbowyg-dropdown button:hover, .trumbowyg-dropdown button:focus { 220 background: #ecf0f1; } 221 .trumbowyg-dropdown button svg { 222 float: left; 223 margin-right: 14px; } 224 225 /* Modal box */ 226 .trumbowyg-modal { 227 position: absolute; 228 top: 0; 229 left: 50%; 230 transform: translateX(-50%); 231 max-width: 520px; 232 width: 100%; 233 height: 350px; 234 z-index: 12; 235 overflow: hidden; 236 backface-visibility: hidden; } 237 238 .trumbowyg-modal-box { 239 position: absolute; 240 top: 0; 241 left: 50%; 242 transform: translateX(-50%); 243 max-width: 500px; 244 width: calc(100% - 20px); 245 padding-bottom: 45px; 246 z-index: 1; 247 background-color: #FFF; 248 text-align: center; 249 font-size: 14px; 250 box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px; 251 backface-visibility: hidden; } 252 .trumbowyg-modal-box .trumbowyg-modal-title { 253 font-size: 24px; 254 font-weight: bold; 255 margin: 0 0 20px; 256 padding: 15px 0 13px; 257 display: block; 258 border-bottom: 1px solid #EEE; 259 color: #333; 260 background: #fbfcfc; } 261 .trumbowyg-modal-box .trumbowyg-progress { 262 width: 100%; 263 height: 3px; 264 position: absolute; 265 top: 58px; } 266 .trumbowyg-modal-box .trumbowyg-progress .trumbowyg-progress-bar { 267 background: #2BC06A; 268 width: 0; 269 height: 100%; 270 transition: width 150ms linear; } 271 .trumbowyg-modal-box label { 272 display: block; 273 position: relative; 274 margin: 15px 12px; 275 height: 29px; 276 line-height: 29px; 277 overflow: hidden; } 278 .trumbowyg-modal-box label .trumbowyg-input-infos { 279 display: block; 280 text-align: left; 281 height: 25px; 282 line-height: 25px; 283 transition: all 150ms; } 284 .trumbowyg-modal-box label .trumbowyg-input-infos span { 285 display: block; 286 color: #69878f; 287 background-color: #fbfcfc; 288 border: 1px solid #DEDEDE; 289 padding: 0 7px; 290 width: 150px; } 291 .trumbowyg-modal-box label .trumbowyg-input-infos span.trumbowyg-msg-error { 292 color: #e74c3c; } 293 .trumbowyg-modal-box label.trumbowyg-input-error input, 294 .trumbowyg-modal-box label.trumbowyg-input-error textarea { 295 border: 1px solid #e74c3c; } 296 .trumbowyg-modal-box label.trumbowyg-input-error .trumbowyg-input-infos { 297 margin-top: -27px; } 298 .trumbowyg-modal-box label input { 299 position: absolute; 300 top: 0; 301 right: 0; 302 height: 27px; 303 line-height: 27px; 304 border: 1px solid #DEDEDE; 305 background: #fff; 306 font-size: 14px; 307 max-width: 330px; 308 width: 70%; 309 padding: 0 7px; 310 transition: all 150ms; } 311 .trumbowyg-modal-box label input:hover, .trumbowyg-modal-box label input:focus { 312 outline: none; 313 border: 1px solid #95a5a6; } 314 .trumbowyg-modal-box label input:focus { 315 background: #fbfcfc; } 316 .trumbowyg-modal-box label input[type="checkbox"] { 317 left: 5px; 318 top: 5px; 319 right: auto; } 320 .trumbowyg-modal-box label input[type="checkbox"] + .trumbowyg-input-infos span { 321 width: auto; 322 padding-left: 25px; } 323 .trumbowyg-modal-box .error { 324 margin-top: 25px; 325 display: block; 326 color: red; } 327 .trumbowyg-modal-box .trumbowyg-modal-button { 328 position: absolute; 329 bottom: 10px; 330 right: 0; 331 text-decoration: none; 332 color: #FFF; 333 display: block; 334 width: 100px; 335 height: 35px; 336 line-height: 33px; 337 margin: 0 10px; 338 background-color: #333; 339 border: none; 340 cursor: pointer; 341 font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif; 342 font-size: 16px; 343 transition: all 150ms; } 344 .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit { 345 right: 110px; 346 background: #2bc06a; } 347 .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover, .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus { 348 background: #40d47e; 349 outline: none; } 350 .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active { 351 background: #25a25a; } 352 .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset { 353 color: #555; 354 background: #e6e6e6; } 355 .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover, .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus { 356 background: #fbfbfb; 357 outline: none; } 358 .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active { 359 background: #d5d5d5; } 360 361 .trumbowyg-overlay { 362 position: absolute; 363 background-color: rgba(255, 255, 255, 0.5); 364 height: 100%; 365 width: 100%; 366 left: 0; 367 display: none; 368 top: 0; 369 z-index: 10; } 370 371 /** 372 * Fullscreen 373 */ 374 body.trumbowyg-body-fullscreen { 375 overflow: hidden; } 376 377 .trumbowyg-fullscreen { 378 position: fixed; 379 top: 0; 380 left: 0; 381 width: 100%; 382 height: 100%; 383 margin: 0; 384 padding: 0; 385 z-index: 99999; } 386 .trumbowyg-fullscreen.trumbowyg-box, 387 .trumbowyg-fullscreen .trumbowyg-editor { 388 border: none; } 389 .trumbowyg-fullscreen .trumbowyg-editor, 390 .trumbowyg-fullscreen .trumbowyg-textarea { 391 height: calc(100% - 37px) !important; 392 overflow: auto; } 393 .trumbowyg-fullscreen .trumbowyg-overlay { 394 height: 100% !important; } 395 .trumbowyg-fullscreen .trumbowyg-button-group .trumbowyg-fullscreen-button svg { 396 color: #222; 397 fill: transparent; } 398 399 .trumbowyg-editor { 400 /* 401 * lset for resetCss option 402 */ } 403 .trumbowyg-editor object, 404 .trumbowyg-editor embed, 405 .trumbowyg-editor video, 406 .trumbowyg-editor img { 407 max-width: 100%; } 408 .trumbowyg-editor video, 409 .trumbowyg-editor img { 410 height: auto; } 411 .trumbowyg-editor img { 412 cursor: move; } 413 .trumbowyg-editor.trumbowyg-reset-css { 414 background: #FEFEFE !important; 415 font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important; 416 font-size: 14px !important; 417 line-height: 1.45em !important; 418 color: #333; } 419 .trumbowyg-editor.trumbowyg-reset-css a { 420 color: #15c !important; 421 text-decoration: underline !important; } 422 .trumbowyg-editor.trumbowyg-reset-css div, 423 .trumbowyg-editor.trumbowyg-reset-css p, 424 .trumbowyg-editor.trumbowyg-reset-css ul, 425 .trumbowyg-editor.trumbowyg-reset-css ol, 426 .trumbowyg-editor.trumbowyg-reset-css blockquote { 427 box-shadow: none !important; 428 background: none !important; 429 margin: 0 !important; 430 margin-bottom: 15px !important; 431 line-height: 1.4em !important; 432 font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important; 433 font-size: 14px !important; 434 border: none; } 435 .trumbowyg-editor.trumbowyg-reset-css iframe, 436 .trumbowyg-editor.trumbowyg-reset-css object, 437 .trumbowyg-editor.trumbowyg-reset-css hr { 438 margin-bottom: 15px !important; } 439 .trumbowyg-editor.trumbowyg-reset-css blockquote { 440 margin-left: 32px !important; 441 font-style: italic !important; 442 color: #555; } 443 .trumbowyg-editor.trumbowyg-reset-css ul { 444 list-style: disc; } 445 .trumbowyg-editor.trumbowyg-reset-css ul, 446 .trumbowyg-editor.trumbowyg-reset-css ol { 447 padding-left: 20px !important; } 448 .trumbowyg-editor.trumbowyg-reset-css ul ul, 449 .trumbowyg-editor.trumbowyg-reset-css ol ol, 450 .trumbowyg-editor.trumbowyg-reset-css ul ol, 451 .trumbowyg-editor.trumbowyg-reset-css ol ul { 452 border: none; 453 margin: 2px !important; 454 padding: 0 !important; 455 padding-left: 24px !important; } 456 .trumbowyg-editor.trumbowyg-reset-css hr { 457 display: block; 458 height: 1px; 459 border: none; 460 border-top: 1px solid #CCC; } 461 .trumbowyg-editor.trumbowyg-reset-css h1, 462 .trumbowyg-editor.trumbowyg-reset-css h2, 463 .trumbowyg-editor.trumbowyg-reset-css h3, 464 .trumbowyg-editor.trumbowyg-reset-css h4 { 465 color: #111; 466 background: none; 467 margin: 0 !important; 468 padding: 0 !important; 469 font-weight: bold; } 470 .trumbowyg-editor.trumbowyg-reset-css h1 { 471 font-size: 32px !important; 472 line-height: 38px !important; 473 margin-bottom: 20px !important; } 474 .trumbowyg-editor.trumbowyg-reset-css h2 { 475 font-size: 26px !important; 476 line-height: 34px !important; 477 margin-bottom: 15px !important; } 478 .trumbowyg-editor.trumbowyg-reset-css h3 { 479 font-size: 22px !important; 480 line-height: 28px !important; 481 margin-bottom: 7px !important; } 482 .trumbowyg-editor.trumbowyg-reset-css h4 { 483 font-size: 16px !important; 484 line-height: 22px !important; 485 margin-bottom: 7px !important; } 486 487 /* 488 * Dark theme 489 */ 490 .trumbowyg-dark .trumbowyg-textarea { 491 background: #111; 492 color: #ddd; } 493 494 .trumbowyg-dark .trumbowyg-box { 495 border: 1px solid #343434; } 496 .trumbowyg-dark .trumbowyg-box.trumbowyg-fullscreen { 497 background: #111; } 498 .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before { 499 text-shadow: 0 0 7px #ccc; } 500 @media screen and (min-width: 0 \0 ) { 501 .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before { 502 color: rgba(20, 20, 20, 0.6) !important; } } 503 @supports (-ms-accelerator: true) { 504 .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before { 505 color: rgba(20, 20, 20, 0.6) !important; } } 506 .trumbowyg-dark .trumbowyg-box svg { 507 fill: #ecf0f1; 508 color: #ecf0f1; } 509 510 .trumbowyg-dark .trumbowyg-button-pane { 511 background-color: #222; 512 border-bottom-color: #343434; } 513 .trumbowyg-dark .trumbowyg-button-pane::after { 514 background: #343434; } 515 .trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty)::after { 516 background-color: #343434; } 517 .trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty) .trumbowyg-fullscreen-button svg { 518 color: transparent; } 519 .trumbowyg-dark .trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::after { 520 background-color: #2a2a2a; } 521 .trumbowyg-dark .trumbowyg-button-pane button:not(.trumbowyg-disable):hover, 522 .trumbowyg-dark .trumbowyg-button-pane button:not(.trumbowyg-disable):focus, 523 .trumbowyg-dark .trumbowyg-button-pane button.trumbowyg-active { 524 background-color: #333; } 525 .trumbowyg-dark .trumbowyg-button-pane .trumbowyg-open-dropdown::after { 526 border-top-color: #fff; } 527 528 .trumbowyg-dark .trumbowyg-fullscreen .trumbowyg-button-group .trumbowyg-fullscreen-button svg { 529 color: #ecf0f1; 530 fill: transparent; } 531 532 .trumbowyg-dark .trumbowyg-dropdown { 533 border-color: #222; 534 background: #333; 535 box-shadow: rgba(0, 0, 0, 0.3) 0 2px 3px; } 536 .trumbowyg-dark .trumbowyg-dropdown button { 537 background: #333; 538 color: #fff !important; } 539 .trumbowyg-dark .trumbowyg-dropdown button:hover, .trumbowyg-dark .trumbowyg-dropdown button:focus { 540 background: #222; } 541 542 .trumbowyg-dark .trumbowyg-modal-box { 543 background-color: #222; } 544 .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-title { 545 border-bottom: 1px solid #555; 546 color: #fff; 547 background: #3c3c3c; } 548 .trumbowyg-dark .trumbowyg-modal-box label { 549 display: block; 550 position: relative; 551 margin: 15px 12px; 552 height: 27px; 553 line-height: 27px; 554 overflow: hidden; } 555 .trumbowyg-dark .trumbowyg-modal-box label .trumbowyg-input-infos span { 556 color: #eee; 557 background-color: #2f2f2f; 558 border-color: #222; } 559 .trumbowyg-dark .trumbowyg-modal-box label .trumbowyg-input-infos span.trumbowyg-msg-error { 560 color: #e74c3c; } 561 .trumbowyg-dark .trumbowyg-modal-box label.trumbowyg-input-error input, 562 .trumbowyg-dark .trumbowyg-modal-box label.trumbowyg-input-error textarea { 563 border-color: #e74c3c; } 564 .trumbowyg-dark .trumbowyg-modal-box label input { 565 border-color: #222; 566 color: #eee; 567 background: #333; } 568 .trumbowyg-dark .trumbowyg-modal-box label input:hover, .trumbowyg-dark .trumbowyg-modal-box label input:focus { 569 border-color: #626262; } 570 .trumbowyg-dark .trumbowyg-modal-box label input:focus { 571 background-color: #2f2f2f; } 572 .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit { 573 background: #1b7943; } 574 .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover, .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus { 575 background: #25a25a; } 576 .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active { 577 background: #176437; } 578 .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset { 579 background: #333; 580 color: #ccc; } 581 .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover, .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus { 582 background: #444; } 583 .trumbowyg-dark .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active { 584 background: #111; } 585 586 .trumbowyg-dark .trumbowyg-overlay { 587 background-color: rgba(15, 15, 15, 0.6); }