Mercurial Hosting > sceditor
comparison src/themes/square.css @ 10:2606bfb75529
CSS cleanup
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Sun, 07 Aug 2022 00:51:26 -0600 |
parents | 9159df67520a |
children | ab852c9f04c3 |
comparison
equal
deleted
inserted
replaced
9:9159df67520a | 10:2606bfb75529 |
---|---|
10 * http://www.opensource.org/licenses/mit-license.php | 10 * http://www.opensource.org/licenses/mit-license.php |
11 * | 11 * |
12 * Icons by Mark James (http://www.famfamfam.com/lab/icons/silk/) | 12 * Icons by Mark James (http://www.famfamfam.com/lab/icons/silk/) |
13 * Licensed under the Creative Commons CC-BY license (http://creativecommons.org/licenses/by/3.0/) | 13 * Licensed under the Creative Commons CC-BY license (http://creativecommons.org/licenses/by/3.0/) |
14 */ | 14 */ |
15 /** | 15 |
16 * SCEditor | 16 @import "default.css"; |
17 * http://www.sceditor.com/ | 17 |
18 * | |
19 * Copyright (C) 2017, Sam Clarke (samclarke.com) | |
20 * | |
21 * SCEditor is licensed under the MIT license: | |
22 * http://www.opensource.org/licenses/mit-license.php | |
23 */ | |
24 /*--------------------------------------------------- | |
25 LESS Elements 0.7 | |
26 --------------------------------------------------- | |
27 A set of useful LESS mixins | |
28 More info at: http://lesselements.com | |
29 ---------------------------------------------------*/ | |
30 .sceditor-container { | 18 .sceditor-container { |
31 display: -ms-flexbox; | 19 border: 1px solid #d6d6d6; |
32 display: flex; | 20 border-radius: 0; |
33 -ms-flex-direction: column; | 21 background-clip: padding-box; |
34 flex-direction: column; | |
35 position: relative; | |
36 background: #fff; | |
37 border: 1px solid #d9d9d9; | |
38 font-size: 13px; | |
39 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; | |
40 color: #333; | |
41 line-height: 1; | |
42 font-weight: bold; | |
43 height: 250px; | |
44 border-radius: 4px; | |
45 background-clip: padding-box; | |
46 } | |
47 .sceditor-container *, | |
48 .sceditor-container *:before, | |
49 .sceditor-container *:after { | |
50 -webkit-box-sizing: content-box; | |
51 -moz-box-sizing: content-box; | |
52 box-sizing: content-box; | |
53 } | |
54 .sceditor-container, | |
55 .sceditor-container div, | |
56 div.sceditor-dropdown, | |
57 div.sceditor-dropdown div { | |
58 padding: 0; | |
59 margin: 0; | |
60 z-index: 3; | |
61 } | |
62 .sceditor-container iframe, | |
63 .sceditor-container textarea { | |
64 display: block; | |
65 -ms-flex: 1 1 0%; | |
66 flex: 1 1 0%; | |
67 line-height: 1.25; | |
68 border: 0; | |
69 outline: none; | |
70 font-family: Verdana, Arial, Helvetica, sans-serif; | |
71 font-size: 14px; | |
72 color: #111; | |
73 padding: 0; | |
74 margin: 5px; | |
75 resize: none; | |
76 background: #fff; | |
77 height: auto !important; | |
78 width: auto !important; | |
79 width: calc(100% - 10px) !important; | |
80 min-height: 1px; | |
81 } | 22 } |
82 .sceditor-container textarea { | 23 .sceditor-container textarea { |
83 margin: 7px 5px; | 24 font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace; |
84 } | 25 background: #2e3436; |
85 div.sceditor-dnd-cover { | 26 color: #fff; |
86 position: absolute; | 27 margin: 0; |
87 top: 0; | 28 padding: 5px; |
88 left: 0; | |
89 bottom: 0; | |
90 right: 0; | |
91 background: rgba(255, 255, 255, 0.2); | |
92 border: 5px dashed #aaa; | |
93 z-index: 200; | |
94 font-size: 2em; | |
95 text-align: center; | |
96 color: #aaa; | |
97 } | |
98 div.sceditor-dnd-cover p { | |
99 position: relative; | |
100 top: 45%; | |
101 pointer-events: none; | |
102 } | |
103 div.sceditor-resize-cover { | |
104 position: absolute; | |
105 top: 0; | |
106 left: 0; | |
107 background: #000; | |
108 width: 100%; | |
109 height: 100%; | |
110 z-index: 10; | |
111 opacity: 0.3; | |
112 } | |
113 div.sceditor-grip { | |
114 overflow: hidden; | |
115 width: 10px; | |
116 height: 10px; | |
117 cursor: pointer; | |
118 position: absolute; | |
119 bottom: 0; | |
120 right: 0; | |
121 z-index: 3; | |
122 line-height: 0; | |
123 } | |
124 div.sceditor-grip.has-icon { | |
125 background-image: none; | |
126 } | |
127 .sceditor-maximize { | |
128 position: fixed; | |
129 top: 0; | |
130 left: 0; | |
131 height: 100% !important; | |
132 width: 100% !important; | |
133 border-radius: 0; | |
134 background-clip: padding-box; | |
135 z-index: 2000; | |
136 } | |
137 html.sceditor-maximize, | |
138 body.sceditor-maximize { | |
139 height: 100%; | |
140 width: 100%; | |
141 padding: 0; | |
142 margin: 0; | |
143 overflow: hidden; | |
144 } | |
145 .sceditor-maximize div.sceditor-grip { | |
146 display: none; | |
147 } | |
148 .sceditor-maximize div.sceditor-toolbar { | |
149 border-radius: 0; | |
150 background-clip: padding-box; | |
151 } | |
152 /** | |
153 * Dropdown styleing | |
154 */ | |
155 div.sceditor-dropdown { | |
156 position: absolute; | |
157 border: 1px solid #ccc; | |
158 background: #fff; | |
159 z-index: 4000; | |
160 padding: 10px; | |
161 font-weight: normal; | |
162 font-size: 15px; | |
163 border-radius: 2px; | |
164 background-clip: padding-box; | |
165 box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2); | |
166 } | |
167 div.sceditor-dropdown *, | |
168 div.sceditor-dropdown *:before, | |
169 div.sceditor-dropdown *:after { | |
170 -webkit-box-sizing: border-box; | |
171 -moz-box-sizing: border-box; | |
172 box-sizing: border-box; | |
173 } | |
174 div.sceditor-dropdown a, | |
175 div.sceditor-dropdown a:link { | |
176 color: #333; | |
177 } | |
178 div.sceditor-dropdown form { | |
179 margin: 0; | |
180 } | |
181 div.sceditor-dropdown label { | |
182 display: block; | |
183 font-weight: bold; | |
184 color: #3c3c3c; | |
185 padding: 4px 0; | |
186 } | |
187 div.sceditor-dropdown input, | |
188 div.sceditor-dropdown textarea { | |
189 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; | |
190 outline: 0; | |
191 padding: 4px; | |
192 border: 1px solid #ccc; | |
193 border-top-color: #888; | |
194 margin: 0 0 0.75em; | |
195 border-radius: 1px; | |
196 background-clip: padding-box; | |
197 } | |
198 div.sceditor-dropdown textarea { | |
199 padding: 6px; | |
200 } | |
201 div.sceditor-dropdown input:focus, | |
202 div.sceditor-dropdown textarea:focus { | |
203 border-color: #aaa; | |
204 border-top-color: #666; | |
205 box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1); | |
206 } | |
207 div.sceditor-dropdown .button { | |
208 font-weight: bold; | |
209 color: #444; | |
210 padding: 6px 12px; | |
211 background: #ececec; | |
212 border: solid 1px #ccc; | |
213 border-radius: 2px; | |
214 background-clip: padding-box; | |
215 cursor: pointer; | |
216 margin: 0.3em 0 0; | |
217 } | |
218 div.sceditor-dropdown .button:hover { | |
219 background: #f3f3f3; | |
220 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); | |
221 } | |
222 div.sceditor-font-picker, | |
223 div.sceditor-fontsize-picker, | |
224 div.sceditor-format { | |
225 padding: 6px 0; | |
226 } | |
227 div.sceditor-color-picker { | |
228 padding: 4px; | |
229 } | |
230 div.sceditor-emoticons, | |
231 div.sceditor-more-emoticons { | |
232 padding: 0; | |
233 } | |
234 .sceditor-pastetext textarea { | |
235 border: 1px solid #bbb; | |
236 width: 20em; | |
237 } | |
238 .sceditor-emoticons img, | |
239 .sceditor-more-emoticons img { | |
240 padding: 0; | |
241 cursor: pointer; | |
242 margin: 2px; | |
243 } | |
244 .sceditor-more { | |
245 border-top: 1px solid #bbb; | |
246 display: block; | |
247 text-align: center; | |
248 cursor: pointer; | |
249 font-weight: bold; | |
250 padding: 6px 0; | |
251 } | |
252 .sceditor-dropdown a:hover { | |
253 background: #eee; | |
254 } | |
255 .sceditor-fontsize-option, | |
256 .sceditor-font-option, | |
257 .sceditor-format a { | |
258 display: block; | |
259 padding: 7px 10px; | |
260 cursor: pointer; | |
261 text-decoration: none; | |
262 color: #222; | |
263 } | |
264 .sceditor-fontsize-option { | |
265 padding: 7px 13px; | |
266 } | |
267 .sceditor-color-column { | |
268 float: left; | |
269 } | |
270 .sceditor-color-option { | |
271 display: block; | |
272 border: 2px solid #fff; | |
273 height: 18px; | |
274 width: 18px; | |
275 overflow: hidden; | |
276 } | |
277 .sceditor-color-option:hover { | |
278 border: 1px solid #aaa; | |
279 } | |
280 /** | |
281 * Toolbar styleing | |
282 */ | |
283 div.sceditor-toolbar { | |
284 flex-shrink: 0; | |
285 overflow: hidden; | |
286 padding: 3px 5px 2px; | |
287 background: #f7f7f7; | |
288 border-bottom: 1px solid #c0c0c0; | |
289 line-height: 0; | |
290 text-align: left; | |
291 user-select: none; | |
292 border-radius: 3px 3px 0 0; | |
293 background-clip: padding-box; | |
294 } | |
295 div.sceditor-group { | |
296 display: inline-block; | |
297 background: #ddd; | |
298 margin: 1px 5px 1px 0; | |
299 padding: 1px; | |
300 border-bottom: 1px solid #aaa; | |
301 border-radius: 3px; | |
302 background-clip: padding-box; | |
303 } | |
304 .sceditor-button { | |
305 float: left; | |
306 cursor: pointer; | |
307 padding: 3px 5px; | |
308 width: 16px; | |
309 height: 20px; | |
310 border-radius: 3px; | |
311 background-clip: padding-box; | |
312 } | |
313 .sceditor-button:hover, | |
314 .sceditor-button:active, | |
315 .sceditor-button.active { | |
316 background: #fff; | |
317 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); | |
318 } | |
319 .sceditor-button:active { | |
320 background: #fff; | |
321 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); | |
322 } | |
323 .sceditor-button.disabled:hover { | |
324 background: inherit; | |
325 cursor: default; | |
326 box-shadow: none; | |
327 } | |
328 .sceditor-button, | |
329 .sceditor-button div { | |
330 display: block; | |
331 } | |
332 .sceditor-button svg { | |
333 display: inline-block; | |
334 height: 16px; | |
335 width: 16px; | |
336 margin: 2px 0; | |
337 fill: #111; | |
338 text-decoration: none; | |
339 pointer-events: none; | |
340 line-height: 1; | |
341 } | |
342 .sceditor-button.disabled svg { | |
343 fill: #888; | |
344 } | |
345 .sceditor-button div { | |
346 display: inline-block; | |
347 margin: 2px 0; | |
348 padding: 0; | |
349 overflow: hidden; | |
350 line-height: 0; | |
351 font-size: 0; | |
352 color: transparent; | |
353 } | |
354 .sceditor-button.has-icon div { | |
355 display: none; | |
356 } | |
357 .sceditor-button.disabled div { | |
358 opacity: 0.3; | |
359 } | |
360 .text .sceditor-button, | |
361 .text .sceditor-button div, | |
362 .sceditor-button.text, | |
363 .sceditor-button.text div, | |
364 .text-icon .sceditor-button, | |
365 .text-icon .sceditor-button div, | |
366 .sceditor-button.text-icon, | |
367 .sceditor-button.text-icon div { | |
368 display: inline-block; | |
369 width: auto; | |
370 line-height: 16px; | |
371 font-size: 1em; | |
372 color: inherit; | |
373 text-indent: 0; | |
374 } | |
375 .text-icon .sceditor-button.has-icon div, | |
376 .sceditor-button.has-icon div, | |
377 .text .sceditor-button div, | |
378 .sceditor-button.text div { | |
379 padding: 0 2px; | |
380 background: none; | |
381 } | |
382 .text .sceditor-button svg, | |
383 .sceditor-button.text svg { | |
384 display: none; | |
385 } | |
386 .text-icon .sceditor-button div, | |
387 .sceditor-button.text-icon div { | |
388 padding: 0 2px 0 20px; | |
389 } | |
390 .rtl div.sceditor-toolbar { | |
391 text-align: right; | |
392 } | |
393 .rtl .sceditor-button { | |
394 float: right; | |
395 } | |
396 .rtl div.sceditor-grip { | |
397 right: auto; | |
398 left: 0; | |
399 } | |
400 .sceditor-container { | |
401 border: 1px solid #d6d6d6; | |
402 border-radius: 0; | |
403 background-clip: padding-box; | |
404 } | |
405 .sceditor-container textarea { | |
406 font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace; | |
407 background: #2e3436; | |
408 color: #fff; | |
409 margin: 0; | |
410 padding: 5px; | |
411 } | 29 } |
412 div.sceditor-toolbar, | 30 div.sceditor-toolbar, |
413 div.sceditor-group { | 31 div.sceditor-group { |
414 background: #f2f2f2; | 32 background: #f2f2f2; |
415 background: linear-gradient(to bottom, #f2f2f2 0%, #dddddd 89%); | 33 background: linear-gradient(to bottom, #f2f2f2 0%, #dddddd 89%); |
416 } | 34 } |
417 div.sceditor-toolbar { | 35 div.sceditor-toolbar { |
418 padding: 0; | 36 padding: 0; |
419 border-bottom: 1px solid #bbb; | 37 border-bottom: 1px solid #bbb; |
420 background-size: 100% 32px; | 38 background-size: 100% 32px; |
421 } | 39 } |
422 div.sceditor-group { | 40 div.sceditor-group { |
423 margin: 0; | 41 margin: 0; |
424 padding: 2px 4px; | 42 padding: 2px 4px; |
425 border: 0; | 43 border: 0; |
426 border-right: 1px solid #ccc; | 44 border-right: 1px solid #ccc; |
427 border-left: 1px solid #eaeaea; | 45 border-left: 1px solid #eaeaea; |
428 border-radius: 0; | 46 border-radius: 0; |
429 background-clip: padding-box; | 47 background-clip: padding-box; |
430 } | 48 } |
431 div.sceditor-group:last-child { | 49 div.sceditor-group:last-child { |
432 border-right: 0; | 50 border-right: 0; |
433 } | 51 } |
434 div.sceditor-group:first-child { | 52 div.sceditor-group:first-child { |
435 border-left: 0; | 53 border-left: 0; |
436 } | 54 } |
437 .sceditor-button { | 55 .sceditor-button { |
438 height: 16px; | 56 height: 16px; |
439 padding: 5px; | 57 padding: 5px; |
440 margin: 1px; | 58 margin: 1px; |
441 border-radius: 0; | 59 border-radius: 0; |
442 background-clip: padding-box; | 60 background-clip: padding-box; |
443 } | 61 } |
444 .sceditor-button div, | 62 .sceditor-button div, |
445 .sceditor-button svg { | 63 .sceditor-button svg { |
446 margin: 0; | 64 margin: 0; |
447 } | 65 } |
448 .sceditor-button.active, | 66 .sceditor-button.active, |
449 .sceditor-button:hover, | 67 .sceditor-button:hover, |
450 .sceditor-button:active, | 68 .sceditor-button:active, |
451 .sceditor-button.active:hover { | 69 .sceditor-button.active:hover { |
452 margin: 0; | 70 margin: 0; |
453 box-shadow: none; | 71 box-shadow: none; |
454 } | 72 } |
455 .sceditor-button.active { | 73 .sceditor-button.active { |
456 background: #f4f4f4; | 74 background: #f4f4f4; |
457 border: 1px solid #ccc; | 75 border: 1px solid #ccc; |
458 } | 76 } |
459 .sceditor-button:hover { | 77 .sceditor-button:hover { |
460 background: #fefefe; | 78 background: #fefefe; |
461 border: 1px solid #ddd; | 79 border: 1px solid #ddd; |
462 } | 80 } |
463 .sceditor-button.disabled:hover { | 81 .sceditor-button.disabled:hover { |
464 margin: 1px; | 82 margin: 1px; |
465 border: 0; | 83 border: 0; |
466 } | 84 } |
467 .sceditor-button:active { | 85 .sceditor-button:active { |
468 background: #eee; | 86 background: #eee; |
469 border: 1px solid #ccc; | 87 border: 1px solid #ccc; |
470 } | 88 } |
471 .sceditor-button.active:hover { | 89 .sceditor-button.active:hover { |
472 background: #f8f8f8; | 90 background: #f8f8f8; |
473 border: 1px solid #ddd; | 91 border: 1px solid #ddd; |
474 } | 92 } |