Project

General

Profile

Statistics
| Revision:

root / trunk / scripts / codemirror / mode / less / index.html @ 221

History | View | Annotate | Download (13.2 KB)

1

    
2
<!doctype html>
3
<html>
4
  <head>
5
    <title>CodeMirror: LESS mode</title>
6
    <link rel="stylesheet" href="../../lib/codemirror.css">
7
    <script src="../../lib/codemirror.js"></script>
8
    <script src="less.js"></script>
9
    <style>.CodeMirror {background: #f8f8f8; border: 1px solid #ddd;}</style>
10
    <link rel="stylesheet" href="../../doc/docs.css">
11
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
12
  </head>
13
  <body>
14
    <h1>CodeMirror: LESS mode</h1>
15
    <form><textarea id="code" name="code">
16
/* Some LESS code */
17

    
18
@color: #4D926F;
19

    
20
#header {
21
  color: @color;
22
  color: #000000;
23
}
24
h2 {
25
  color: @color;
26
}
27

    
28
.rounded-corners (@radius: 5px) {
29
  border-radius: @radius;
30
  -webkit-border-radius: @radius;
31
  -moz-border-radius: @radius;
32
}
33

    
34
#header {
35
  .rounded-corners;
36
}
37
#footer {
38
  .rounded-corners(10px);
39
}
40

    
41
.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
42
  @val: @x @y @blur rgba(0, 0, 0, @alpha);
43

    
44
  box-shadow:         @val;
45
  -webkit-box-shadow: @val;
46
  -moz-box-shadow:    @val;
47
}
48
.box { @base: #f938ab;
49
  color:        saturate(@base, 5%);
50
  border-color: lighten(@base, 30%);
51
  div { .box-shadow(0, 0, 5px, 0.4) }
52
}
53

    
54
@import url("something.css");
55

    
56
@light-blue:   hsl(190, 50%, 65%);
57
@light-yellow: desaturate(#fefec8, 10%);
58
@dark-yellow:  desaturate(darken(@light-yellow, 10%), 40%);
59
@darkest:      hsl(20, 0%, 15%);
60
@dark:         hsl(190, 20%, 30%);
61
@medium:       hsl(10, 60%, 30%);
62
@light:        hsl(90, 40%, 20%);
63
@lightest:     hsl(90, 20%, 90%);
64
@highlight:    hsl(80, 50%, 90%);
65
@blue:         hsl(210, 60%, 20%);
66
@alpha-blue:   hsla(210, 60%, 40%, 0.5);
67

    
68
.box-shadow (@x, @y, @blur, @alpha) {
69
  @value: @x @y @blur rgba(0, 0, 0, @alpha);
70
  box-shadow:         @value;
71
  -moz-box-shadow:    @value;
72
  -webkit-box-shadow: @value;
73
}
74
.border-radius (@radius) {
75
  border-radius: @radius;
76
  -moz-border-radius: @radius;
77
  -webkit-border-radius: @radius;
78
}
79

    
80
.border-radius (@radius, bottom) {
81
  border-top-right-radius: 0;
82
  border-top-left-radius: 0;
83
  -moz-border-top-right-radius: 0;
84
  -moz-border-top-left-radius: 0;
85
  -webkit-border-top-left-radius: 0;
86
  -webkit-border-top-right-radius: 0;
87
}
88
.border-radius (@radius, right) {
89
  border-bottom-left-radius: 0;
90
  border-top-left-radius: 0;
91
  -moz-border-bottom-left-radius: 0;
92
  -moz-border-top-left-radius: 0;
93
  -webkit-border-bottom-left-radius: 0;
94
  -webkit-border-top-left-radius: 0;
95
}
96
.box-shadow-inset (@x, @y, @blur, @color) {
97
  box-shadow: @x @y @blur @color inset;
98
  -moz-box-shadow: @x @y @blur @color inset;
99
  -webkit-box-shadow: @x @y @blur @color inset;
100
}
101
.code () {
102
  font-family: 'Bitstream Vera Sans Mono',
103
               'DejaVu Sans Mono',
104
               'Monaco',
105
               Courier,
106
               monospace !important;
107
}
108
.wrap () {
109
  text-wrap: wrap;
110
  white-space: pre-wrap;       /* css-3 */
111
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
112
  white-space: -pre-wrap;      /* Opera 4-6 */
113
  white-space: -o-pre-wrap;    /* Opera 7 */
114
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
115
}
116

    
117
html { margin: 0 }
118
body {
119
  background-color: @darkest;
120
  margin: 0 auto;
121
  font-family: Arial, sans-serif;
122
  font-size: 100%;
123
  overflow-x: hidden;
124
}
125
nav, header, footer, section, article {
126
  display: block;
127
}
128
a {
129
  color: #b83000;
130
}
131
h1 a {
132
  color: black;
133
  text-decoration: none;
134
}
135
a:hover {
136
  text-decoration: underline;
137
}
138
h1, h2, h3, h4 {
139
  margin: 0;
140
  font-weight: normal;
141
}
142
ul, li {
143
  list-style-type: none;
144
}
145
code { .code; }
146
code {
147
  .string, .regexp { color: @dark }
148
  .keyword { font-weight: bold }
149
  .comment { color: rgba(0, 0, 0, 0.5) }
150
  .number { color: @blue }
151
  .class, .special { color: rgba(0, 50, 100, 0.8) }
152
}
153
pre {
154
  padding: 0 30px;
155
  .wrap;
156
}
157
blockquote {
158
  font-style: italic;
159
}
160
body > footer {
161
  text-align: left;
162
  margin-left: 10px;
163
        font-style: italic;
164
  font-size: 18px;
165
  color: #888;
166
}
167

    
168
#logo {
169
  margin-top: 30px;
170
  margin-bottom: 30px;
171
  display: block;
172
  width: 199px;
173
  height: 81px;
174
  background: url(/images/logo.png) no-repeat;
175
}
176
nav {
177
  margin-left: 15px;
178
}
179
nav a, #dropdown li {
180
  display: inline-block;
181
  color: white;
182
  line-height: 42px;
183
  margin: 0;
184
  padding: 0px 15px;
185
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
186
  text-decoration: none;
187
  border: 2px solid transparent;
188
  border-width: 0 2px;
189
  &:hover {
190
    .dark-red; 
191
    text-decoration: none;
192
  }
193
}
194
.dark-red {
195
    @red: @medium;
196
    border: 2px solid darken(@red, 25%);
197
    border-left-color: darken(@red, 15%);
198
    border-right-color: darken(@red, 15%);
199
    border-bottom: 0;
200
    border-top: 0;
201
    background-color: darken(@red, 10%);
202
}
203

    
204
.content {
205
  margin: 0 auto;
206
  width: 980px;
207
}
208

    
209
#menu {
210
  position: absolute;
211
  width: 100%;
212
  z-index: 3;
213
  clear: both;
214
  display: block;
215
  background-color: @blue;
216
  height: 42px;
217
  border-top: 2px solid lighten(@alpha-blue, 20%);
218
  border-bottom: 2px solid darken(@alpha-blue, 25%);
219
  .box-shadow(0, 1px, 8px, 0.6);
220
  -moz-box-shadow: 0 0 0 #000; // Because firefox sucks.
221

    
222
  &.docked {
223
    background-color: hsla(210, 60%, 40%, 0.4);
224
  }
225
  &:hover {
226
    background-color: @blue;
227
  }
228

    
229
  #dropdown {
230
    margin: 0 0 0 117px;
231
    padding: 0;
232
    padding-top: 5px;
233
    display: none;
234
    width: 190px;
235
    border-top: 2px solid @medium;
236
    color: @highlight;
237
    border: 2px solid darken(@medium, 25%);
238
    border-left-color: darken(@medium, 15%);
239
    border-right-color: darken(@medium, 15%);
240
    border-top-width: 0;
241
    background-color: darken(@medium, 10%);
242
    ul {
243
      padding: 0px;  
244
    }
245
    li {
246
      font-size: 14px;
247
      display: block;
248
      text-align: left;
249
      padding: 0;
250
      border: 0;
251
      a {
252
        display: block;
253
        padding: 0px 15px;  
254
        text-decoration: none;
255
        color: white;  
256
        &:hover {
257
          background-color: darken(@medium, 15%);
258
          text-decoration: none;
259
        }
260
      }
261
    }
262
    .border-radius(5px, bottom);
263
    .box-shadow(0, 6px, 8px, 0.5);
264
  }
265
}
266

    
267
#main {
268
  margin: 0 auto;
269
  width: 100%;
270
  background-color: @light-blue;
271
  border-top: 8px solid darken(@light-blue, 5%);
272

    
273
  #intro {
274
    background-color: lighten(@light-blue, 25%);
275
    float: left;
276
    margin-top: -8px;
277
    margin-right: 5px;
278

    
279
    height: 380px;
280
    position: relative;
281
    z-index: 2;
282
    font-family: 'Droid Serif', 'Georgia';
283
    width: 395px;
284
    padding: 45px 20px 23px 30px;
285
    border: 2px dashed darken(@light-blue, 10%);
286
    .box-shadow(1px, 0px, 6px, 0.5);
287
    border-bottom: 0;
288
    border-top: 0;
289
    #download { color: transparent; border: 0; float: left; display: inline-block; margin: 15px 0 15px -5px; }
290
    #download img { display: inline-block}
291
    #download-info {
292
      code {
293
        font-size: 13px;  
294
      }
295
      color: @blue + #333; display: inline; float: left; margin: 36px 0 0 15px }
296
  }
297
  h2 {
298
    span {
299
      color: @medium;  
300
    }
301
    color: @blue;
302
    margin: 20px 0;
303
    font-size: 24px;
304
    line-height: 1.2em;
305
  }
306
  h3 {
307
    color: @blue;
308
    line-height: 1.4em;
309
    margin: 30px 0 15px 0;
310
    font-size: 1em;
311
    text-shadow: 0px 0px 0px @lightest;
312
    span { color: @medium }
313
  }
314
  #example {
315
    p {
316
      font-size: 18px;
317
      color: @blue;
318
      font-weight: bold;
319
      text-shadow: 0px 1px 1px @lightest;
320
    }
321
    pre {
322
      margin: 0;
323
      text-shadow: 0 -1px 1px @darkest;
324
      margin-top: 20px;
325
      background-color: desaturate(@darkest, 8%);
326
      border: 0;
327
      width: 450px;
328
      color: lighten(@lightest, 2%);
329
      background-repeat: repeat;
330
      padding: 15px;
331
      border: 1px dashed @lightest;
332
      line-height: 15px;
333
      .box-shadow(0, 0px, 15px, 0.5);
334
      .code;
335
      .border-radius(2px);
336
      code .attribute { color: hsl(40, 50%, 70%) }
337
      code .variable  { color: hsl(120, 10%, 50%) }
338
      code .element   { color: hsl(170, 20%, 50%) }
339

    
340
      code .string, .regexp { color: hsl(75, 50%, 65%) }
341
      code .class { color: hsl(40, 40%, 60%); font-weight: normal }
342
      code .id { color: hsl(50, 40%, 60%); font-weight: normal }
343
      code .comment { color: rgba(255, 255, 255, 0.2) }
344
      code .number, .color { color: hsl(10, 40%, 50%) }
345
      code .class, code .mixin, .special { color: hsl(190, 20%, 50%) }
346
      #time { color: #aaa }
347
    }
348
    float: right;
349
    font-size: 12px;
350
    margin: 0;
351
    margin-top: 15px;
352
    padding: 0;
353
    width: 500px;
354
  }
355
}
356

    
357

    
358
.page {
359
  .content {
360
    width: 870px;
361
    padding: 45px;
362
  }
363
  margin: 0 auto;
364
  font-family: 'Georgia', serif;
365
  font-size: 18px;
366
  line-height: 26px;
367
  padding: 0 60px;
368
  code {
369
    font-size: 16px;  
370
  }
371
  pre {
372
    border-width: 1px;
373
    border-style: dashed;
374
    padding: 15px;
375
    margin: 15px 0;
376
  }
377
  h1 {
378
    text-align: left;
379
    font-size: 40px;
380
    margin-top: 15px;
381
    margin-bottom: 35px;
382
  }
383
  p + h1 { margin-top: 60px }
384
  h2, h3 {
385
    margin: 30px 0 15px 0;
386
  }
387
  p + h2, pre + h2, code + h2 {
388
    border-top: 6px solid rgba(255, 255, 255, 0.1);
389
    padding-top: 30px;
390
  }
391
  h3 {
392
    margin: 15px 0;
393
  }
394
}
395

    
396

    
397
#docs {
398
  @bg: lighten(@light-blue, 5%);
399
  border-top: 2px solid lighten(@bg, 5%);
400
  color: @blue;
401
  background-color: @light-blue;
402
  .box-shadow(0, -2px, 5px, 0.2);
403

    
404
  h1 {
405
    font-family: 'Droid Serif', 'Georgia', serif;
406
    padding-top: 30px;
407
    padding-left: 45px;
408
    font-size: 44px;
409
    text-align: left;
410
    margin: 30px 0 !important;
411
    text-shadow: 0px 1px 1px @lightest;
412
    font-weight: bold;
413
  }
414
  .content {
415
    clear: both;
416
    border-color: transparent;
417
    background-color: lighten(@light-blue, 25%);
418
    .box-shadow(0, 5px, 5px, 0.4);
419
  }
420
  pre {
421
    @background: lighten(@bg, 30%);
422
    color: lighten(@blue, 10%);
423
    background-color: @background;
424
    border-color: lighten(@light-blue, 25%);
425
    border-width: 2px;
426
    code .attribute { color: hsl(40, 50%, 30%) }
427
    code .variable  { color: hsl(120, 10%, 30%) }
428
    code .element   { color: hsl(170, 20%, 30%) }
429

    
430
    code .string, .regexp { color: hsl(75, 50%, 35%) }
431
    code .class { color: hsl(40, 40%, 30%); font-weight: normal }
432
    code .id { color: hsl(50, 40%, 30%); font-weight: normal }
433
    code .comment { color: rgba(0, 0, 0, 0.4) }
434
    code .number, .color { color: hsl(10, 40%, 30%) }
435
    code .class, code .mixin, .special { color: hsl(190, 20%, 30%) }
436
  }
437
  pre code                    { font-size: 15px  }
438
  p + h2, pre + h2, code + h2 { border-top-color: rgba(0, 0, 0, 0.1) }
439
}
440

    
441
td {
442
  padding-right: 30px;  
443
}
444
#synopsis {
445
  .box-shadow(0, 5px, 5px, 0.2);
446
}
447
#synopsis, #about {
448
  h2 {
449
    font-size: 30px;  
450
    padding: 10px 0;
451
  }
452
  h1 + h2 {
453
      margin-top: 15px;  
454
  }
455
  h3 { font-size: 22px }
456

    
457
  .code-example {
458
    border-spacing: 0;
459
    border-width: 1px;
460
    border-style: dashed;
461
    padding: 0;
462
    pre { border: 0; margin: 0 }
463
    td {
464
      border: 0;
465
      margin: 0;
466
      background-color: desaturate(darken(@darkest, 5%), 20%);
467
      vertical-align: top;
468
      padding: 0;
469
    }
470
    tr { padding: 0 }
471
  }
472
  .css-output {
473
    td {
474
      border-left: 0;  
475
    }
476
  }
477
  .less-example {
478
    //border-right: 1px dotted rgba(255, 255, 255, 0.5) !important;
479
  }
480
  .css-output, .less-example {
481
    width: 390px;
482
  }
483
  pre {
484
    padding: 20px;
485
    line-height: 20px;
486
    font-size: 14px;
487
  }
488
}
489
#about, #synopsis, #guide {
490
  a {
491
    text-decoration: none;
492
    color: @light-yellow;
493
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
494
    &:hover {
495
      text-decoration: none;
496
      border-bottom: 1px dashed @light-yellow;
497
    }
498
  }
499
  @bg: desaturate(darken(@darkest, 5%), 20%);
500
  text-shadow: 0 -1px 1px lighten(@bg, 5%);
501
  color: @highlight;
502
  background-color: @bg;
503
  .content {
504
    background-color: desaturate(@darkest, 20%);
505
    clear: both;
506
    .box-shadow(0, 5px, 5px, 0.4);
507
  }
508
  h1, h2, h3 {
509
    color: @dark-yellow;
510
  }
511
  pre {
512
      code .attribute { color: hsl(40, 50%, 70%) }
513
      code .variable  { color: hsl(120, 10%, 50%) }
514
      code .element   { color: hsl(170, 20%, 50%) }
515

    
516
      code .string, .regexp { color: hsl(75, 50%, 65%) }
517
      code .class { color: hsl(40, 40%, 60%); font-weight: normal }
518
      code .id { color: hsl(50, 40%, 60%); font-weight: normal }
519
      code .comment { color: rgba(255, 255, 255, 0.2) }
520
      code .number, .color { color: hsl(10, 40%, 50%) }
521
      code .class, code .mixin, .special { color: hsl(190, 20%, 50%) }
522
    background-color: @bg;
523
    border-color: darken(@light-yellow, 5%);
524
  }
525
  code {
526
    color: darken(@dark-yellow, 5%);
527
    .string, .regexp { color: desaturate(@light-blue, 15%) }
528
    .keyword { color: hsl(40, 40%, 60%); font-weight: normal }
529
    .comment { color: rgba(255, 255, 255, 0.2) }
530
    .number { color: lighten(@blue, 10%) }
531
    .class, .special { color: hsl(190, 20%, 50%) }
532
  }
533
}
534
#guide {
535
  background-color: @darkest;
536
  .content {
537
    background-color: transparent;
538
  }
539

    
540
}
541

    
542
#about {
543
  background-color: @darkest !important;
544
  .content {
545
    background-color: desaturate(lighten(@darkest, 3%), 5%);
546
  }
547
}
548
#synopsis {
549
  background-color: desaturate(lighten(@darkest, 3%), 5%) !important;
550
  .content {
551
    background-color: desaturate(lighten(@darkest, 3%), 5%);
552
  }
553
  pre {}
554
}
555
#synopsis, #guide {
556
  .content {
557
    .box-shadow(0, 0px, 0px, 0.0);
558
  }
559
}
560
#about footer {
561
  margin-top: 30px;
562
  padding-top: 30px;
563
  border-top: 6px solid rgba(0, 0, 0, 0.1);
564
  text-align: center;
565
  font-size: 16px;
566
  color: rgba(255, 255, 255, 0.35);
567
  #copy { font-size: 12px }
568
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02);
569
}
570
</textarea></form>
571
    <script>
572
      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {});
573
    </script>
574

    
575
    <p><strong>MIME types defined:</strong> <code>text/less</code>.</p>
576
  </body>
577
</html>