Mercurial Hosting > sceditor

comparison src/themes/modern.css @ 10:2606bfb75529

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 }