查看 | 历史 | 提交 | 提交对比
hjg
2023-11-18 bb48edb3d9faaaeab0088151c86fc24137acdb08
提交 | 用户 | 时间
58d006 1 .enable_plugin_mindmup_wysiwyg() when(@enable-plugin-mindmup-wysiwyg = true) {
A 2
3 .wysiwyg-editor {
4     max-height: 250px;
5     height: 250px;
6     background-color: #F7F8FA;
7     border-collapse: separate;
8     border: 1px solid #BBC0CA; 
9     padding: 4px; 
10     box-sizing: content-box; 
11     overflow-y: scroll;
12     overflow-x:hidden;
13     outline: none;
14     
15     &:focus {
16         background-color:#FFF;
17     }
18 }
19
20
21 .wysiwyg-toolbar {
22     line-height: 33px;
23     margin: 0 !important;
24     position: relative;
25     
26     .dropdown-menu {
27         text-align: left;
28     }
29     
30     .btn-group {
31         float: none !important;//to override .RTL's
32         font-size: 0;
33     }
34
35     .btn-group > .btn {
36         //sometimes we need to put .btn inside an .inline.position-relative for dropdowns to show up in correct position
37         float: none;
38
39         padding-left: 0;
40         padding-right: 0;
41         text-align: center;
42         margin-left: 1px;
43         
44         > .@{icon}:first-child {
45             font-size: @font-size-wysiwyg-button-icon;
46             width: 25px;
47             max-width: 25px;
48             display: inline-block;
49             border-width: 1px !important;
50         }
51         &.dropdown-toggle > .@{icon}:last-child {
52             margin-right: 4px;
53         }
54
55         /**
56         &.active:after {
57             border-color: transparent;
58             border-style: solid;
59             border-top-color: inherit;
60             border-width: 6px 14px;
61             bottom: -13px;
62             left: 0;
63             right: 0;
64         }
65         */
66     }
67 }
68
69
70 .wysiwyg-style1 , .wysiwyg-style2 {
71     .btn-group > .btn , .btn-group > .inline > .btn {
72         margin: 0 !important;
73         background: #FFF !important;
74         border-width: 0 !important;
75         color: #ADB3BE !important;
76         text-shadow: none !important;
77         
78         &.active {
79             color: #5B80CE !important;
80             &:after {
81                 display: none;
82             }
83         }
84     }
85     
86     .btn-group {
87         position:relative;
88         &:after {
89             display: block;
90             content: "";
91             position: absolute;
92             left: -2px; 
93             top: 6px;
94             bottom:6px;
95             width: 0;
96             max-width: 0;
97             border-left:1px solid #E1E6EA;
98         }
99         &:first-child:after {
100             display:none;
101         }
102     }
103 }
104
105
106 .wysiwyg-style2 {
107     background-color:#E5E5E5;
108     
109     & + .wysiwyg-editor {
110         border-color:#DDD;
111         background-color:#FFF;
112         border-top:none;
113     }
114     
115     .btn-group > .btn , .btn-group > .inline > .btn  {
116         margin:0 1px 0 0 !important;
117         background:#FFF !important;
118         border:none !important;
119         color:#8D939E !important;
120         text-shadow:none !important;
121         
122         &.active  {
123             color:#FFF !important;
124             background:#6AAEDF !important;
125         }
126     }
127     .btn-group:after {
128         display:none;
129     }
130     
131 }
132
133
134
135
136 .wysiwyg-toolbar {
137     .btn-colorpicker {
138         width: 24px;
139         height: 24px;
140         position: relative;
141         //border-radius: 12px;
142
143         background: #87B87F; /* Old browsers */
144         background: -moz-linear-gradient(top, #CF3E73 10%, #FFFFFF 20%, #2283C5 30%, #FFFFFF 40%, #87B87F 50%, #FFFFFF 60%, #FFB752 70%, #FFFFFF 80%, #D15B47 90%, #FFFFFF 100%); /*  FF3.6+ */
145         background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#CF3E73), color-stop(20%,#FFFFFF), color-stop(30%,#2283C5), color-stop(40%,#FFFFFF), color-stop(50%,#87B87F), color-stop(60%,#FFFFFF), color-stop(70%,#FFB752), color-stop(80%,#FFFFFF), color-stop(90%,#D15B47), color-stop(100%,#FFFFFF)); /* Chrome,Safari4+ */
146         background: -webkit-linear-gradient(top, #CF3E73 10%, #FFFFFF 20%, #2283C5 30%, #FFFFFF 40%, #87B87F 50%, #FFFFFF 60%, #FFB752 70%, #FFFFFF 80%, #D15B47 90%, #FFFFFF 100%); /* Chrome10+,Safari5.1+ */
147         background: -o-linear-gradient(top, #CF3E73 10%, #FFFFFF 20%, #2283C5 30%, #FFFFFF 40%, #87B87F 50%, #FFFFFF 60%, #FFB752 70%, #FFFFFF 80%, #D15B47 90%, #FFFFFF 100%); /* Opera11.10+ */
148         background: -ms-linear-gradient(top, #CF3E73 10%, #FFFFFF 20%, #2283C5 30%, #FFFFFF 40%, #87B87F 50%, #FFFFFF 60%, #FFB752 70%, #FFFFFF 80%, #D15B47 90%, #FFFFFF 100%); /* IE10+ */
149         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CF3E73', endColorstr='#FFB752',GradientType=0 ); /* IE6-9 */
150         background: linear-gradient(top, #CF3E73 10%, #FFFFFF 20%, #2283C5 30%, #FFFFFF 40%, #87B87F 50%, #FFFFFF 60%, #FFB752 70%, #FFFFFF 80%, #D15B47 90%, #FFFFFF 100%); /* W3C */
151     }
152     .dropdown-colorpicker > .dropdown-menu {
153         top: auto;
154     }
155
156     input[type=file]  {
157         position: fixed;
158         z-index: -10;
159         opacity: 0;
160         //inside modals the z-index:-10 does not work as expected
161         max-width: 0;
162         max-height: 0;
163         display: block;
164     }
165     .wysiwyg-choose-file {
166         display:inline-block;
167         width:auto;
168         margin:4px auto 0;
169         padding-left:5px;
170         padding-right:5px;
171     }
172     .dropdown-menu {
173         input[type=text] {
174             margin-left:8px;
175             margin-bottom:0;
176             &.form-control {
177                 min-width: 150px;
178             }
179         }
180         .btn {
181             margin-right: 8px;
182             margin-left: 8px;
183         }
184     }
185 }
186 .wysiwyg-style1 .btn-colorpicker {
187     width: 20px;
188     height: 20px;
189     margin-left: 4px;
190 }
191
192 @media screen and (-webkit-min-device-pixel-ratio: 0) {
193  /* for adding image resize functionality in chrome and safari */
194  .wysiwyg-editor {
195     img {
196         display:inline !important;
197     }
198     .ui-wrapper {
199       border:1px dotted #D00;
200       overflow:visible !important;/* because it's image only, so it's ok */
201       display:inline-block !important;
202       vertical-align:middle;
203       &:after {
204           content:"";
205           display:block;
206           position:absolute;
207           right:-3px; bottom:-3px;
208           width:7px; height:7px;
209           border:1px solid #D00;
210           background-color:#FFF;
211           z-index:1;
212        }
213     }
214  }
215 }
216
217
218
219
220 /* inside widget */
221 .widget-header .wysiwyg-toolbar {
222     background-color:transparent;
223     .btn-group > .btn , .btn-group > .inline > .btn {
224         border-color:transparent;
225         background:rgba(255,255,255,0.25) !important;
226         color:#FFF !important;
227         
228         min-width: 32px;
229
230         border-width: 1px !important;
231         border-radius: 4px !important;
232
233         padding: 2px 1px 4px;
234         
235         &.active {
236             background:rgba(0,0,0,0.25) !important;
237         }
238     }
239 }
240
241 .widget-body .wysiwyg-editor {
242     border-width: 0;
243 }
244
245 .wysiwyg-speech-input {
246     width: 20px !important;
247     color: transparent !important;
248     background: transparent none !important;
249     border-width: 0 !important;
250
251     .transform(~"scale(2.0, 2.0)");
252     .box-shadow(none) !important;
253     
254     position: absolute;
255     right: 0;
256     top: -10px;
257     
258     cursor: pointer;
259     &:focus {
260         .box-shadow(none) !important;
261     }
262 }
263
264 }
265 .enable_plugin_mindmup_wysiwyg();
266
267
268
269
270
271
272
273 .enable_markdown_editor() when(@enable-markdown-editor = true) {
274
275 //Markdown Editor
276 /**
277  * Bootstrap-Markdown.less
278  *
279  * @author Taufan Aditya @taufanaditya
280  * @copyright 2013-2015 Taufan Aditya
281  */
282 .md-editor {
283   display: block;
284   border: 1px solid @table-border-color;
285
286   > .md-header, .md-footer {
287     display: block;
288     padding: 6px 4px;
289     background: @panel-default-heading-bg;
290   }
291
292   > .md-header {
293     margin: 0;
294   }
295
296   > .md-preview {
297     //background: @panel-bg;
298     border-top: 1px dashed @table-border-color;
299     border-bottom: 1px dashed @table-border-color;
300     min-height: 10px;
301     overflow: auto;
302   }
303
304   > textarea {
305     font-family: @font-family-monospace;
306     font-size: @font-size-base;
307     outline: 0;
308     outline: thin dotted  \9; /* IE6-9 */
309     margin: 0;
310     display: block;
311     padding: 0;
312     width: 100%;
313     border: 0;
314     border-top: 1px dashed @table-border-color;
315     border-bottom: 1px dashed @table-border-color;
316     border-radius: 0;
317     box-shadow: none;
318     //background: @input-bg-disabled;
319     background: #f7f8fa;
320     &:focus {
321       box-shadow: none;
322       background: @input-bg;
323     }
324   }
325
326   // Hover state
327   @color: @input-border-focus;
328   @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
329   &.active {
330     border-color: @color;
331     outline: 0;
332     //.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
333   }
334
335   .md-controls {
336     float: right;
337     padding: 3px;
338
339     .md-control {
340       right: 5px;
341       color: #bebebe;
342       padding: 3px 3px 3px 10px;
343       &:hover {
344         color: #333;
345       }
346     }
347   }
348
349   // fullscreen mode styles
350   &.md-fullscreen-mode {
351     width: 100%;
352     height: 100%;
353     position: fixed;
354     top: 0;
355     left: 0;
356     z-index: 99999;
357     padding: 60px 30px 15px;
358     background: #fff !important;
359     border: 0 !important;
360
361     .md-footer {
362       display: none;
363     }
364
365     .md-input,
366     .md-preview {
367       margin: 0 auto !important;
368       height: 100% !important;
369       font-size: 20px !important;
370       padding: 20px !important;
371       color: #999;
372       line-height: 1.6em !important;
373       resize: none !important;
374       box-shadow: none !important;
375       background: #fff !important;
376       border: 0 !important;
377     }
378
379     .md-preview {
380       color: #333;
381       overflow: auto;
382     }
383
384     .md-input {
385       &:hover,
386       &:focus {
387         color: #333;
388         background: #fff !important;
389       }
390     }
391
392     .md-header {
393       background: none;
394       text-align: center;
395       position: fixed;
396       width: 100%;
397       top: 20px;
398     }
399
400     .btn-group {
401       float: none;
402     }
403
404     .btn {
405       border: 0;
406       background: none;
407       color: #b3b3b3;
408
409       &:hover,
410       &:focus,
411       &.active,
412       &:active {
413         box-shadow: none;
414         color: #333;
415       }
416     }
417
418     .md-fullscreen-controls {
419       position: absolute;
420       top: 20px;
421       right: 20px;
422       text-align: right;
423       z-index: 1002;
424       display: block;
425       a {
426         color: #b3b3b3;
427         clear: right;
428         margin: 10px;
429         width: 30px;
430         height: 30px;
431         text-align: center;
432
433         &:hover {
434           color: #333;
435           text-decoration: none;
436         }
437       }
438     }
439
440     .md-editor {
441       height: 100% !important;
442       position: relative;
443     }
444   }
445
446   .md-fullscreen-controls {
447     display: none;
448   }
449 }
450
451 .md-nooverflow {
452   overflow: hidden;
453   position: fixed;
454   width: 100%;    
455 }
456
457 }
458 .enable_markdown_editor();
459