Mercurial Hosting > sceditor

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