scratch – Blame information for rev 125

Subversion Repositories:
Rev:
Rev Author Line No. Line
58 office 1 /**
125 office 2 * Trumbowyg v2.6.0 - A lightweight WYSIWYG editor
58 office 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 $light-color: #ecf0f1 !default;
13 $dark-color: #222 !default;
14  
15 $modal-submit-color: #2ecc71 !default;
16 $modal-reset-color: #EEE !default;
17  
18 $transition-duration: 150ms !default;
19  
20 #trumbowyg-icons {
21 overflow: hidden;
22 visibility: hidden;
23 height: 0;
24 width: 0;
25  
26 svg {
27 height: 0;
28 width: 0;
29 }
30 }
31  
32 .trumbowyg-box {
33 *,
34 *::before,
35 *::after {
36 box-sizing: border-box;
37 }
38  
39 svg {
40 width: 17px;
41 height: 100%;
42 fill: $dark-color;
43 }
44 }
45  
46 .trumbowyg-box,
47 .trumbowyg-editor {
48 display: block;
49 position: relative;
50 border: 1px solid #DDD;
51 width: 100%;
52 min-height: 300px;
53 margin: 17px auto;
54 }
55  
56 .trumbowyg-box .trumbowyg-editor {
57 margin: 0 auto;
58 }
59  
60 .trumbowyg-box.trumbowyg-fullscreen {
61 background: #FEFEFE;
62 border: none !important;
63 }
64  
65 .trumbowyg-editor,
66 .trumbowyg-textarea {
67 position: relative;
68 box-sizing: border-box;
69 padding: 20px;
70 min-height: 300px;
71 width: 100%;
72 border-style: none;
73 resize: none;
74 outline: none;
75 overflow: auto;
76 }
77  
78 .trumbowyg-box-blur .trumbowyg-editor {
79 *,
80 &::before {
81 color: transparent !important;
82 text-shadow: 0 0 7px #333;
83  
84 @media screen and (min-width: 0 \0
85 ) {
86 color: rgba(200, 200, 200, 0.6) !important;
87 }
88 @supports (-ms-accelerator:true) {
89 color: rgba(200, 200, 200, 0.6) !important;
90 }
91 }
92 img,
93 hr {
94 opacity: 0.2;
95 }
96 }
97  
98 .trumbowyg-textarea {
99 position: relative;
100 display: block;
101 overflow: auto;
102 border: none;
103 white-space: normal;
104 font-size: 14px;
105 font-family: "Inconsolata", "Consolas", "Courier", "Courier New", sans-serif;
106 line-height: 18px;
107 }
108  
109 .trumbowyg-box.trumbowyg-editor-visible {
110 .trumbowyg-textarea {
111 height: 1px !important;
112 width: 25%;
113 min-height: 0 !important;
114 padding: 0 !important;
115 background: none;
116 opacity: 0 !important;
117 }
118 }
119  
120 .trumbowyg-box.trumbowyg-editor-hidden {
121 .trumbowyg-textarea {
122 display: block;
123 }
124 .trumbowyg-editor {
125 display: none;
126 }
127 }
128  
129 .trumbowyg-box.trumbowyg-disabled {
130 .trumbowyg-textarea {
131 opacity: 0.8;
132 background: none;
133 }
134 }
135  
136 .trumbowyg-editor[contenteditable=true]:empty:not(:focus)::before {
137 content: attr(placeholder);
138 color: #999;
139 pointer-events: none;
140 }
141  
142 .trumbowyg-button-pane {
143 display: flex;
144 flex-flow: row wrap;
145 width: 100%;
146 min-height: 36px;
147 background: $light-color;
148 border-bottom: 1px solid darken($light-color, 7%);
149 margin: 0;
150 padding: 0 5px;
151 list-style-type: none;
152 line-height: 10px;
153 backface-visibility: hidden;
154  
155 &::after {
156 content: " ";
157 display: block;
158 position: absolute;
159 top: 36px;
160 left: 0;
161 right: 0;
162 width: 100%;
163 height: 1px;
164 background: darken($light-color, 7%);
165 }
166  
167 .trumbowyg-button-group {
168 display: flex;
169 flex-flow: row wrap;
170  
171 .trumbowyg-fullscreen-button svg {
172 color: transparent;
173 }
174  
175 &:not(:empty) + .trumbowyg-button-group::before {
176 content: " ";
177 display: block;
178 width: 1px;
179 background: darken($light-color, 7%);
180 margin: 0 5px;
181 height: 35px;
182 }
183 }
184  
185 button {
186 display: block;
187 position: relative;
188 width: 35px;
189 height: 35px;
190 padding: 1px 6px !important;
191 margin-bottom: 1px;
192 overflow: hidden;
193 border: none;
194 cursor: pointer;
195 background: none;
196 transition: background-color $transition-duration, opacity $transition-duration;
197  
198 &.trumbowyg-textual-button {
199 width: auto;
200 line-height: 35px;
201 }
202 }
203  
204 &.trumbowyg-disable button:not(.trumbowyg-not-disable):not(.trumbowyg-active),
205 .trumbowyg-disabled & button:not(.trumbowyg-not-disable):not(.trumbowyg-viewHTML-button) {
206 opacity: 0.2;
207 cursor: default;
208 }
209 &.trumbowyg-disable,
210 .trumbowyg-disabled & {
211 .trumbowyg-button-group::before {
212 background: darken($light-color, 3%);
213 }
214 }
215  
216 button:not(.trumbowyg-disable):hover,
217 button:not(.trumbowyg-disable):focus,
218 button.trumbowyg-active {
219 background-color: #FFF;
220 outline: none;
221 }
222  
223 .trumbowyg-open-dropdown {
224 &::after {
225 display: block;
226 content: " ";
227 position: absolute;
228 top: 25px;
229 right: 3px;
230 height: 0;
231 width: 0;
232 border: 3px solid transparent;
233 border-top-color: #555;
234 }
235  
236 &.trumbowyg-textual-button {
237 padding-left: 10px !important;
238 padding-right: 18px !important;
239  
240 &::after {
241 top: 17px;
242 right: 7px;
243 }
244 }
245 }
246  
247 .trumbowyg-right {
248 margin-left: auto;
249  
250 &::before {
251 display: none !important;
252 }
253 }
254 }
255  
256 .trumbowyg-dropdown {
257 width: 200px;
258 border: 1px solid $light-color;
259 padding: 5px 0;
260 border-top: none;
261 background: #FFF;
262 margin-left: -1px;
263 box-shadow: rgba(0, 0, 0, .1) 0 2px 3px;
264  
265 button {
266 display: block;
267 width: 100%;
268 height: 35px;
269 line-height: 35px;
270 text-decoration: none;
271 background: #FFF;
272 padding: 0 10px;
273 color: #333 !important;
274 border: none;
275 cursor: pointer;
276 text-align: left;
277 font-size: 15px;
278 transition: all $transition-duration;
279  
280 &:hover,
281 &:focus {
282 background: $light-color;
283 }
284  
285 svg {
286 float: left;
287 margin-right: 14px;
288 }
289 }
290 }
291  
292 /* Modal box */
293 .trumbowyg-modal {
294 position: absolute;
295 top: 0;
296 left: 50%;
297 transform: translateX(-50%);
298 max-width: 520px;
299 width: 100%;
300 height: 350px;
301 z-index: 11;
302 overflow: hidden;
303 backface-visibility: hidden;
304 }
305  
306 .trumbowyg-modal-box {
307 position: absolute;
308 top: 0;
309 left: 50%;
310 transform: translateX(-50%);
311 max-width: 500px;
312 width: calc(100% - 20px);
313 padding-bottom: 45px;
314 z-index: 1;
315 background-color: #FFF;
316 text-align: center;
317 font-size: 14px;
318 box-shadow: rgba(0, 0, 0, .2) 0 2px 3px;
319 backface-visibility: hidden;
320  
321 .trumbowyg-modal-title {
322 font-size: 24px;
323 font-weight: bold;
324 margin: 0 0 20px;
325 padding: 15px 0 13px;
326 display: block;
327 border-bottom: 1px solid #EEE;
328 color: #333;
329 background: lighten($light-color, 5%);
330 }
331  
332 .trumbowyg-progress {
333 width: 100%;
334 height: 3px;
335 position: absolute;
336 top: 58px;
337  
338 .trumbowyg-progress-bar {
339 background: #2BC06A;
340 height: 100%;
341 transition: width $transition-duration linear;
342 }
343 }
344  
345 label {
346 display: block;
347 position: relative;
348 margin: 15px 12px;
349 height: 29px;
350 line-height: 29px;
351 overflow: hidden;
352  
353 .trumbowyg-input-infos {
354 display: block;
355 text-align: left;
356 height: 25px;
357 line-height: 25px;
358 transition: all 150ms;
359  
360 span {
361 display: block;
362 color: darken($light-color, 45%);
363 background-color: lighten($light-color, 5%);
364 border: 1px solid #DEDEDE;
365 padding: 0 7px;
366 width: 150px;
367 }
368 span.trumbowyg-msg-error {
369 color: #e74c3c;
370 }
371 }
372  
373 &.trumbowyg-input-error {
374 input,
375 textarea {
376 border: 1px solid #e74c3c;
377 }
378  
379 .trumbowyg-input-infos {
380 margin-top: -27px;
381 }
382 }
383  
384 input {
385 position: absolute;
386 top: 0;
387 right: 0;
388 height: 27px;
389 line-height: 27px;
390 border: 1px solid #DEDEDE;
391 background: #fff;
392 font-size: 14px;
393 max-width: 330px;
394 width: 70%;
395 padding: 0 7px;
396 transition: all $transition-duration;
397  
398 &:hover,
399 &:focus {
400 outline: none;
401 border: 1px solid #95a5a6;
402 }
403 &:focus {
404 background: lighten($light-color, 5%);
405 }
406 }
407 }
408  
409 .error {
410 margin-top: 25px;
411 display: block;
412 color: red;
413 }
414  
415 .trumbowyg-modal-button {
416 position: absolute;
417 bottom: 10px;
418 right: 0;
419 text-decoration: none;
420 color: #FFF;
421 display: block;
422 width: 100px;
423 height: 35px;
424 line-height: 33px;
425 margin: 0 10px;
426 background-color: #333;
427 border: none;
428 cursor: pointer;
429 font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif;
430 font-size: 16px;
431 transition: all $transition-duration;
432  
433 &.trumbowyg-modal-submit {
434 right: 110px;
435 background: darken($modal-submit-color, 3%);
436  
437 &:hover,
438 &:focus {
439 background: lighten($modal-submit-color, 5%);
440 outline: none;
441 }
442 &:active {
443 background: darken($modal-submit-color, 10%);
444 }
445 }
446  
447 &.trumbowyg-modal-reset {
448 color: #555;
449 background: darken($modal-reset-color, 3%);
450  
451 &:hover,
452 &:focus {
453 background: lighten($modal-reset-color, 5%);
454 outline: none;
455 }
456 &:active {
457 background: darken($modal-reset-color, 10%);
458 }
459 }
460 }
461 }
462  
463 .trumbowyg-overlay {
464 position: absolute;
465 background-color: rgba(255, 255, 255, 0.5);
466 width: 100%;
467 left: 0;
468 display: none;
469 z-index: 10;
470 }
471  
472 /**
473 * Fullscreen
474 */
475 body.trumbowyg-body-fullscreen {
476 overflow: hidden;
477 }
478  
479 .trumbowyg-fullscreen {
480 position: fixed;
481 top: 0;
482 left: 0;
483 width: 100%;
484 height: 100%;
485 margin: 0;
486 padding: 0;
487 z-index: 99999;
488  
489 &.trumbowyg-box,
490 .trumbowyg-editor {
491 border: none;
492 }
493 .trumbowyg-editor,
494 .trumbowyg-textarea {
495 height: calc(100% - 37px) !important;
496 overflow: auto;
497 }
498 .trumbowyg-overlay {
499 height: 100% !important;
500 }
501 .trumbowyg-button-group .trumbowyg-fullscreen-button svg {
502 color: $dark-color;
503 fill: transparent;
504 }
505 }
506  
507 .trumbowyg-editor {
508 object,
509 embed,
510 video,
511 img {
512 max-width: 100%;
513 }
514 video,
515 img {
516 height: auto;
517 }
518 img {
519 cursor: move;
520 }
521  
522 /*
523 * lset for resetCss option
524 */
525 &.trumbowyg-reset-css {
526 background: #FEFEFE !important;
527 font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important;
528 font-size: 14px !important;
529 line-height: 1.45em !important;
530 white-space: normal !important;
531 color: #333;
532  
533 a {
534 color: #15c !important;
535 text-decoration: underline !important;
536 }
537  
538 div,
539 p,
540 ul,
541 ol,
542 blockquote {
543 box-shadow: none !important;
544 background: none !important;
545 margin: 0 !important;
546 margin-bottom: 15px !important;
547 line-height: 1.4em !important;
548 font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important;
549 font-size: 14px !important;
550 border: none;
551 }
552 iframe,
553 object,
554 hr {
555 margin-bottom: 15px !important;
556 }
557 blockquote {
558 margin-left: 32px !important;
559 font-style: italic !important;
560 color: #555;
561 }
562 ul,
563 ol {
564 padding-left: 20px !important;
565 }
566 ul ul,
567 ol ol,
568 ul ol,
569 ol ul {
570 border: none;
571 margin: 2px !important;
572 padding: 0 !important;
573 padding-left: 24px !important;
574 }
575 hr {
576 display: block;
577 height: 1px;
578 border: none;
579 border-top: 1px solid #CCC;
580 }
581  
582 h1,
583 h2,
584 h3,
585 h4 {
586 color: #111;
587 background: none;
588 margin: 0 !important;
589 padding: 0 !important;
590 font-weight: bold;
591 }
592  
593 h1 {
594 font-size: 32px !important;
595 line-height: 38px !important;
596 margin-bottom: 20px !important;
597 }
598 h2 {
599 font-size: 26px !important;
600 line-height: 34px !important;
601 margin-bottom: 15px !important;
602 }
603 h3 {
604 font-size: 22px !important;
605 line-height: 28px !important;
606 margin-bottom: 7px !important;
607 }
608 h4 {
609 font-size: 16px !important;
610 line-height: 22px !important;
611 margin-bottom: 7px !important;
612 }
613 }
614 }
615  
616 /*
617 * Dark theme
618 */
619 .trumbowyg-dark {
620 .trumbowyg-textarea {
621 background: #111;
622 color: #ddd;
623 }
624 .trumbowyg-box {
625 border: 1px solid lighten($dark-color, 7%);
626  
627 &.trumbowyg-fullscreen {
628 background: #111;
629 }
630 &.trumbowyg-box-blur .trumbowyg-editor {
631 *,
632 &::before {
633 text-shadow: 0 0 7px #ccc;
634  
635 @media screen and (min-width: 0 \0
636 ) {
637 color: rgba(20, 20, 20, 0.6) !important;
638 }
639 @supports (-ms-accelerator:true) {
640 color: rgba(20, 20, 20, 0.6) !important;
641 }
642 }
643 }
644  
645 svg {
646 fill: $light-color;
647 color: $light-color;
648 }
649 }
650 .trumbowyg-button-pane {
651 background-color: $dark-color;
652 border-bottom-color: lighten($dark-color, 7%);
653  
654 &::after {
655 background: lighten($dark-color, 7%);
656 }
657  
658 .trumbowyg-button-group:not(:empty) {
659 &::before {
660 background-color: lighten($dark-color, 7%);
661 }
662 .trumbowyg-fullscreen-button svg {
663 color: transparent;
664 }
665 }
666  
667 &.trumbowyg-disable {
668 .trumbowyg-button-group::before {
669 background-color: lighten($dark-color, 3%);
670 }
671 }
672  
673 button:not(.trumbowyg-disable):hover,
674 button:not(.trumbowyg-disable):focus,
675 button.trumbowyg-active {
676 background-color: #333;
677 }
678  
679 .trumbowyg-open-dropdown::after {
680 border-top-color: #fff;
681 }
682 }
683 .trumbowyg-fullscreen {
684 .trumbowyg-button-group .trumbowyg-fullscreen-button svg {
685 color: $light-color;
686 fill: transparent;
687 }
688 }
689  
690 .trumbowyg-dropdown {
691 border-color: $dark-color;
692 background: #333;
693 box-shadow: rgba(0, 0, 0, .3) 0 2px 3px;
694  
695 button {
696 background: #333;
697 color: #fff !important;
698  
699 &:hover,
700 &:focus {
701 background: $dark-color;
702 }
703 }
704 }
705  
706 // Modal box
707 .trumbowyg-modal-box {
708 background-color: $dark-color;
709  
710 .trumbowyg-modal-title {
711 border-bottom: 1px solid #555;
712 color: #fff;
713 background: lighten($dark-color, 10%);
714 }
715  
716 label {
717 display: block;
718 position: relative;
719 margin: 15px 12px;
720 height: 27px;
721 line-height: 27px;
722 overflow: hidden;
723  
724 .trumbowyg-input-infos {
725 span {
726 color: #eee;
727 background-color: lighten($dark-color, 5%);
728 border-color: $dark-color;
729 }
730 span.trumbowyg-msg-error {
731 color: #e74c3c;
732 }
733 }
734  
735 &.trumbowyg-input-error {
736 input,
737 textarea {
738 border-color: #e74c3c;
739 }
740 }
741  
742 input {
743 border-color: $dark-color;
744 color: #eee;
745 background: #333;
746  
747 &:hover,
748 &:focus {
749 border-color: lighten($dark-color, 25%);
750 }
751 &:focus {
752 background-color: lighten($dark-color, 5%);
753 }
754 }
755 }
756  
757 .trumbowyg-modal-button {
758 &.trumbowyg-modal-submit {
759 background: darken($modal-submit-color, 20%);
760  
761 &:hover,
762 &:focus {
763 background: darken($modal-submit-color, 10%);
764 }
765 &:active {
766 background: darken($modal-submit-color, 25%);
767 }
768 }
769 &.trumbowyg-modal-reset {
770 background: #333;
771 color: #ccc;
772  
773 &:hover,
774 &:focus {
775 background: #444;
776 }
777 &:active {
778 background: #111;
779 }
780 }
781 }
782 }
783 .trumbowyg-overlay {
784 background-color: rgba(15, 15, 15, 0.6);
785 }
786 }