Mercurial Hosting > sceditor

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