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