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