Mercurial Hosting > sceditor
comparison src/development/themes/modern.css @ 0:4c4fc447baea
start with sceditor-3.1.1
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Thu, 04 Aug 2022 15:21:29 -0600 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:4c4fc447baea |
---|---|
1 /** | |
2 * Modern theme | |
3 * | |
4 * Copyright (C) 2012, Sam Clarke (samclarke.com) | |
5 * | |
6 * SCEditor is licensed under the MIT license: | |
7 * http://www.opensource.org/licenses/mit-license.php | |
8 * | |
9 * Icons by Mark James (http://www.famfamfam.com/lab/icons/silk/) | |
10 * Licensed under the Creative Commons CC-BY license (http://creativecommons.org/licenses/by/3.0/) | |
11 */ | |
12 /*! SCEditor | (C) 2011-2016, Sam Clarke | sceditor.com/license */ | |
13 /** | |
14 * Default SCEditor | |
15 * http://www.sceditor.com/ | |
16 * | |
17 * Copyright (C) 2011-16, Sam Clarke | |
18 * | |
19 * SCEditor is licensed under the MIT license: | |
20 * http://www.opensource.org/licenses/mit-license.php | |
21 */ | |
22 div.sceditor-grip, | |
23 .sceditor-button div { | |
24 background-image: url("famfamfam.png"); | |
25 background-repeat: no-repeat; | |
26 width: 16px; | |
27 height: 16px; | |
28 } | |
29 .sceditor-button-youtube div { | |
30 background-position: 0px 0px; | |
31 } | |
32 .sceditor-button-link div { | |
33 background-position: 0px -16px; | |
34 } | |
35 .sceditor-button-unlink div { | |
36 background-position: 0px -32px; | |
37 } | |
38 .sceditor-button-underline div { | |
39 background-position: 0px -48px; | |
40 } | |
41 .sceditor-button-time div { | |
42 background-position: 0px -64px; | |
43 } | |
44 .sceditor-button-table div { | |
45 background-position: 0px -80px; | |
46 } | |
47 .sceditor-button-superscript div { | |
48 background-position: 0px -96px; | |
49 } | |
50 .sceditor-button-subscript div { | |
51 background-position: 0px -112px; | |
52 } | |
53 .sceditor-button-strike div { | |
54 background-position: 0px -128px; | |
55 } | |
56 .sceditor-button-source div { | |
57 background-position: 0px -144px; | |
58 } | |
59 .sceditor-button-size div { | |
60 background-position: 0px -160px; | |
61 } | |
62 .sceditor-button-rtl div { | |
63 background-position: 0px -176px; | |
64 } | |
65 .sceditor-button-right div { | |
66 background-position: 0px -192px; | |
67 } | |
68 .sceditor-button-removeformat div { | |
69 background-position: 0px -208px; | |
70 } | |
71 .sceditor-button-quote div { | |
72 background-position: 0px -224px; | |
73 } | |
74 .sceditor-button-print div { | |
75 background-position: 0px -240px; | |
76 } | |
77 .sceditor-button-pastetext div { | |
78 background-position: 0px -256px; | |
79 } | |
80 .sceditor-button-paste div { | |
81 background-position: 0px -272px; | |
82 } | |
83 .sceditor-button-outdent div { | |
84 background-position: 0px -288px; | |
85 } | |
86 .sceditor-button-orderedlist div { | |
87 background-position: 0px -304px; | |
88 } | |
89 .sceditor-button-maximize div { | |
90 background-position: 0px -320px; | |
91 } | |
92 .sceditor-button-ltr div { | |
93 background-position: 0px -336px; | |
94 } | |
95 .sceditor-button-left div { | |
96 background-position: 0px -352px; | |
97 } | |
98 .sceditor-button-justify div { | |
99 background-position: 0px -368px; | |
100 } | |
101 .sceditor-button-italic div { | |
102 background-position: 0px -384px; | |
103 } | |
104 .sceditor-button-indent div { | |
105 background-position: 0px -400px; | |
106 } | |
107 .sceditor-button-image div { | |
108 background-position: 0px -416px; | |
109 } | |
110 .sceditor-button-horizontalrule div { | |
111 background-position: 0px -432px; | |
112 } | |
113 .sceditor-button-format div { | |
114 background-position: 0px -448px; | |
115 } | |
116 .sceditor-button-font div { | |
117 background-position: 0px -464px; | |
118 } | |
119 .sceditor-button-emoticon div { | |
120 background-position: 0px -480px; | |
121 } | |
122 .sceditor-button-email div { | |
123 background-position: 0px -496px; | |
124 } | |
125 .sceditor-button-date div { | |
126 background-position: 0px -512px; | |
127 } | |
128 .sceditor-button-cut div { | |
129 background-position: 0px -528px; | |
130 } | |
131 .sceditor-button-copy div { | |
132 background-position: 0px -544px; | |
133 } | |
134 .sceditor-button-color div { | |
135 background-position: 0px -560px; | |
136 } | |
137 .sceditor-button-code div { | |
138 background-position: 0px -576px; | |
139 } | |
140 .sceditor-button-center div { | |
141 background-position: 0px -592px; | |
142 } | |
143 .sceditor-button-bulletlist div { | |
144 background-position: 0px -608px; | |
145 } | |
146 .sceditor-button-bold div { | |
147 background-position: 0px -624px; | |
148 } | |
149 div.sceditor-grip { | |
150 background-position: 0px -640px; | |
151 width: 10px; | |
152 height: 10px; | |
153 } | |
154 .rtl div.sceditor-grip { | |
155 background-position: 0px -650px; | |
156 } | |
157 /** | |
158 * SCEditor | |
159 * http://www.sceditor.com/ | |
160 * | |
161 * Copyright (C) 2017, Sam Clarke (samclarke.com) | |
162 * | |
163 * SCEditor is licensed under the MIT license: | |
164 * http://www.opensource.org/licenses/mit-license.php | |
165 */ | |
166 /*--------------------------------------------------- | |
167 LESS Elements 0.7 | |
168 --------------------------------------------------- | |
169 A set of useful LESS mixins | |
170 More info at: http://lesselements.com | |
171 ---------------------------------------------------*/ | |
172 .sceditor-container { | |
173 display: -ms-flexbox; | |
174 display: flex; | |
175 -ms-flex-direction: column; | |
176 flex-direction: column; | |
177 position: relative; | |
178 background: #fff; | |
179 border: 1px solid #d9d9d9; | |
180 font-size: 13px; | |
181 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; | |
182 color: #333; | |
183 line-height: 1; | |
184 font-weight: bold; | |
185 height: 250px; | |
186 border-radius: 4px; | |
187 background-clip: padding-box; | |
188 } | |
189 .sceditor-container *, | |
190 .sceditor-container *:before, | |
191 .sceditor-container *:after { | |
192 -webkit-box-sizing: content-box; | |
193 -moz-box-sizing: content-box; | |
194 box-sizing: content-box; | |
195 } | |
196 .sceditor-container, | |
197 .sceditor-container div, | |
198 div.sceditor-dropdown, | |
199 div.sceditor-dropdown div { | |
200 padding: 0; | |
201 margin: 0; | |
202 z-index: 3; | |
203 } | |
204 .sceditor-container iframe, | |
205 .sceditor-container textarea { | |
206 display: block; | |
207 -ms-flex: 1 1 0%; | |
208 flex: 1 1 0%; | |
209 line-height: 1.25; | |
210 border: 0; | |
211 outline: none; | |
212 font-family: Verdana, Arial, Helvetica, sans-serif; | |
213 font-size: 14px; | |
214 color: #111; | |
215 padding: 0; | |
216 margin: 5px; | |
217 resize: none; | |
218 background: #fff; | |
219 height: auto !important; | |
220 width: auto !important; | |
221 width: calc(100% - 10px) !important; | |
222 min-height: 1px; | |
223 } | |
224 .sceditor-container textarea { | |
225 margin: 7px 5px; | |
226 } | |
227 div.sceditor-dnd-cover { | |
228 position: absolute; | |
229 top: 0; | |
230 left: 0; | |
231 bottom: 0; | |
232 right: 0; | |
233 background: rgba(255, 255, 255, 0.2); | |
234 border: 5px dashed #aaa; | |
235 z-index: 200; | |
236 font-size: 2em; | |
237 text-align: center; | |
238 color: #aaa; | |
239 } | |
240 div.sceditor-dnd-cover p { | |
241 position: relative; | |
242 top: 45%; | |
243 pointer-events: none; | |
244 } | |
245 div.sceditor-resize-cover { | |
246 position: absolute; | |
247 top: 0; | |
248 left: 0; | |
249 background: #000; | |
250 width: 100%; | |
251 height: 100%; | |
252 z-index: 10; | |
253 opacity: 0.3; | |
254 } | |
255 div.sceditor-grip { | |
256 overflow: hidden; | |
257 width: 10px; | |
258 height: 10px; | |
259 cursor: pointer; | |
260 position: absolute; | |
261 bottom: 0; | |
262 right: 0; | |
263 z-index: 3; | |
264 line-height: 0; | |
265 } | |
266 div.sceditor-grip.has-icon { | |
267 background-image: none; | |
268 } | |
269 .sceditor-maximize { | |
270 position: fixed; | |
271 top: 0; | |
272 left: 0; | |
273 height: 100% !important; | |
274 width: 100% !important; | |
275 border-radius: 0; | |
276 background-clip: padding-box; | |
277 z-index: 2000; | |
278 } | |
279 html.sceditor-maximize, | |
280 body.sceditor-maximize { | |
281 height: 100%; | |
282 width: 100%; | |
283 padding: 0; | |
284 margin: 0; | |
285 overflow: hidden; | |
286 } | |
287 .sceditor-maximize div.sceditor-grip { | |
288 display: none; | |
289 } | |
290 .sceditor-maximize div.sceditor-toolbar { | |
291 border-radius: 0; | |
292 background-clip: padding-box; | |
293 } | |
294 /** | |
295 * Dropdown styleing | |
296 */ | |
297 div.sceditor-dropdown { | |
298 position: absolute; | |
299 border: 1px solid #ccc; | |
300 background: #fff; | |
301 z-index: 4000; | |
302 padding: 10px; | |
303 font-weight: normal; | |
304 font-size: 15px; | |
305 border-radius: 2px; | |
306 background-clip: padding-box; | |
307 box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2); | |
308 } | |
309 div.sceditor-dropdown *, | |
310 div.sceditor-dropdown *:before, | |
311 div.sceditor-dropdown *:after { | |
312 -webkit-box-sizing: border-box; | |
313 -moz-box-sizing: border-box; | |
314 box-sizing: border-box; | |
315 } | |
316 div.sceditor-dropdown a, | |
317 div.sceditor-dropdown a:link { | |
318 color: #333; | |
319 } | |
320 div.sceditor-dropdown form { | |
321 margin: 0; | |
322 } | |
323 div.sceditor-dropdown label { | |
324 display: block; | |
325 font-weight: bold; | |
326 color: #3c3c3c; | |
327 padding: 4px 0; | |
328 } | |
329 div.sceditor-dropdown input, | |
330 div.sceditor-dropdown textarea { | |
331 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; | |
332 outline: 0; | |
333 padding: 4px; | |
334 border: 1px solid #ccc; | |
335 border-top-color: #888; | |
336 margin: 0 0 0.75em; | |
337 border-radius: 1px; | |
338 background-clip: padding-box; | |
339 } | |
340 div.sceditor-dropdown textarea { | |
341 padding: 6px; | |
342 } | |
343 div.sceditor-dropdown input:focus, | |
344 div.sceditor-dropdown textarea:focus { | |
345 border-color: #aaa; | |
346 border-top-color: #666; | |
347 box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1); | |
348 } | |
349 div.sceditor-dropdown .button { | |
350 font-weight: bold; | |
351 color: #444; | |
352 padding: 6px 12px; | |
353 background: #ececec; | |
354 border: solid 1px #ccc; | |
355 border-radius: 2px; | |
356 background-clip: padding-box; | |
357 cursor: pointer; | |
358 margin: 0.3em 0 0; | |
359 } | |
360 div.sceditor-dropdown .button:hover { | |
361 background: #f3f3f3; | |
362 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); | |
363 } | |
364 div.sceditor-font-picker, | |
365 div.sceditor-fontsize-picker, | |
366 div.sceditor-format { | |
367 padding: 6px 0; | |
368 } | |
369 div.sceditor-color-picker { | |
370 padding: 4px; | |
371 } | |
372 div.sceditor-emoticons, | |
373 div.sceditor-more-emoticons { | |
374 padding: 0; | |
375 } | |
376 .sceditor-pastetext textarea { | |
377 border: 1px solid #bbb; | |
378 width: 20em; | |
379 } | |
380 .sceditor-emoticons img, | |
381 .sceditor-more-emoticons img { | |
382 padding: 0; | |
383 cursor: pointer; | |
384 margin: 2px; | |
385 } | |
386 .sceditor-more { | |
387 border-top: 1px solid #bbb; | |
388 display: block; | |
389 text-align: center; | |
390 cursor: pointer; | |
391 font-weight: bold; | |
392 padding: 6px 0; | |
393 } | |
394 .sceditor-dropdown a:hover { | |
395 background: #eee; | |
396 } | |
397 .sceditor-fontsize-option, | |
398 .sceditor-font-option, | |
399 .sceditor-format a { | |
400 display: block; | |
401 padding: 7px 10px; | |
402 cursor: pointer; | |
403 text-decoration: none; | |
404 color: #222; | |
405 } | |
406 .sceditor-fontsize-option { | |
407 padding: 7px 13px; | |
408 } | |
409 .sceditor-color-column { | |
410 float: left; | |
411 } | |
412 .sceditor-color-option { | |
413 display: block; | |
414 border: 2px solid #fff; | |
415 height: 18px; | |
416 width: 18px; | |
417 overflow: hidden; | |
418 } | |
419 .sceditor-color-option:hover { | |
420 border: 1px solid #aaa; | |
421 } | |
422 /** | |
423 * Toolbar styleing | |
424 */ | |
425 div.sceditor-toolbar { | |
426 flex-shrink: 0; | |
427 overflow: hidden; | |
428 padding: 3px 5px 2px; | |
429 background: #f7f7f7; | |
430 border-bottom: 1px solid #c0c0c0; | |
431 line-height: 0; | |
432 text-align: left; | |
433 user-select: none; | |
434 border-radius: 3px 3px 0 0; | |
435 background-clip: padding-box; | |
436 } | |
437 div.sceditor-group { | |
438 display: inline-block; | |
439 background: #ddd; | |
440 margin: 1px 5px 1px 0; | |
441 padding: 1px; | |
442 border-bottom: 1px solid #aaa; | |
443 border-radius: 3px; | |
444 background-clip: padding-box; | |
445 } | |
446 .sceditor-button { | |
447 float: left; | |
448 cursor: pointer; | |
449 padding: 3px 5px; | |
450 width: 16px; | |
451 height: 20px; | |
452 border-radius: 3px; | |
453 background-clip: padding-box; | |
454 } | |
455 .sceditor-button:hover, | |
456 .sceditor-button:active, | |
457 .sceditor-button.active { | |
458 background: #fff; | |
459 box-shadow: inset 1px 1px 0 rgba(0,0,0,0.3), inset -1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.2); | |
460 } | |
461 .sceditor-button:active { | |
462 background: #fff; | |
463 box-shadow: inset 1px 1px 0 rgba(0,0,0,0.3), inset -1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.2), inset 0 0 8px rgba(0,0,0,0.3); | |
464 } | |
465 .sceditor-button.disabled:hover { | |
466 background: inherit; | |
467 cursor: default; | |
468 box-shadow: none; | |
469 } | |
470 .sceditor-button, | |
471 .sceditor-button div { | |
472 display: block; | |
473 } | |
474 .sceditor-button svg { | |
475 display: inline-block; | |
476 height: 16px; | |
477 width: 16px; | |
478 margin: 2px 0; | |
479 fill: #111; | |
480 text-decoration: none; | |
481 pointer-events: none; | |
482 line-height: 1; | |
483 } | |
484 .sceditor-button.disabled svg { | |
485 fill: #888; | |
486 } | |
487 .sceditor-button div { | |
488 display: inline-block; | |
489 margin: 2px 0; | |
490 padding: 0; | |
491 overflow: hidden; | |
492 line-height: 0; | |
493 font-size: 0; | |
494 color: transparent; | |
495 } | |
496 .sceditor-button.has-icon div { | |
497 display: none; | |
498 } | |
499 .sceditor-button.disabled div { | |
500 opacity: 0.3; | |
501 } | |
502 .text .sceditor-button, | |
503 .text .sceditor-button div, | |
504 .sceditor-button.text, | |
505 .sceditor-button.text div, | |
506 .text-icon .sceditor-button, | |
507 .text-icon .sceditor-button div, | |
508 .sceditor-button.text-icon, | |
509 .sceditor-button.text-icon div { | |
510 display: inline-block; | |
511 width: auto; | |
512 line-height: 16px; | |
513 font-size: 1em; | |
514 color: inherit; | |
515 text-indent: 0; | |
516 } | |
517 .text-icon .sceditor-button.has-icon div, | |
518 .sceditor-button.has-icon div, | |
519 .text .sceditor-button div, | |
520 .sceditor-button.text div { | |
521 padding: 0 2px; | |
522 background: none; | |
523 } | |
524 .text .sceditor-button svg, | |
525 .sceditor-button.text svg { | |
526 display: none; | |
527 } | |
528 .text-icon .sceditor-button div, | |
529 .sceditor-button.text-icon div { | |
530 padding: 0 2px 0 20px; | |
531 } | |
532 .rtl div.sceditor-toolbar { | |
533 text-align: right; | |
534 } | |
535 .rtl .sceditor-button { | |
536 float: right; | |
537 } | |
538 .rtl div.sceditor-grip { | |
539 right: auto; | |
540 left: 0; | |
541 } | |
542 .sceditor-container { | |
543 border: 1px solid #999; | |
544 } | |
545 .sceditor-container textarea { | |
546 font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace; | |
547 background: #2e3436; | |
548 color: #fff; | |
549 margin: 0; | |
550 padding: 5px; | |
551 } | |
552 div.sceditor-toolbar { | |
553 background: #ccc; | |
554 background: linear-gradient(to bottom, #cccccc 0%, #b2b2b2 100%); | |
555 } | |
556 div.sceditor-group { | |
557 display: inline; | |
558 background: transparent; | |
559 margin: 0; | |
560 padding: 0; | |
561 border: 0; | |
562 } | |
563 .sceditor-button { | |
564 padding: 4px; | |
565 margin: 2px 1px 2px 3px; | |
566 height: 16px; | |
567 border-radius: 12px; | |
568 background-clip: padding-box; | |
569 } | |
570 .sceditor-button:hover, | |
571 .sceditor-button.active, | |
572 .sceditor-button.active:hover { | |
573 box-shadow: none; | |
574 } | |
575 .sceditor-button:hover { | |
576 background: #fff; | |
577 background: rgba(255, 255, 255, 0.75); | |
578 margin: 1px 0 1px 2px; | |
579 border: 1px solid #eee; | |
580 } | |
581 .sceditor-button.disabled:hover { | |
582 margin: 2px 1px 2px 3px; | |
583 border: 0; | |
584 } | |
585 .sceditor-button.active { | |
586 background: #b1b1b1; | |
587 background: rgba(0, 0, 0, 0.1); | |
588 margin: 1px 0 1px 2px; | |
589 border: 1px solid #999; | |
590 } | |
591 .sceditor-button.active:hover { | |
592 background: #fff; | |
593 background: rgba(255, 255, 255, 0.25); | |
594 } | |
595 .sceditor-button:active, | |
596 .sceditor-button.active:active { | |
597 margin: 1px 0 1px 2px; | |
598 border: 1px solid #999; | |
599 box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5); | |
600 } | |
601 .sceditor-button div, | |
602 .sceditor-button svg { | |
603 margin: 0; | |
604 } |