third-party/codemirror-3.15/mode/less/index.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CodeMirror: LESS mode</title>
   6     <link rel="stylesheet" href="../../lib/codemirror.css">
   7     <script src="../../lib/codemirror.js"></script>
   8     <script src="../../addon/edit/matchbrackets.js"></script>
   9     <script src="less.js"></script>
  10     <style>.CodeMirror {background: #f8f8f8; border: 1px solid #ddd; font-size:12px; height: 400px}</style>
  11     <link rel="stylesheet" href="../../doc/docs.css">
  12     <link rel="stylesheet" href="../../theme/lesser-dark.css">
  13   </head>
  14   <body>
  15     <h1>CodeMirror: LESS mode</h1>
  16     <form><textarea id="code" name="code">@media screen and (device-aspect-ratio: 16/9) { … }
  17 @media screen and (device-aspect-ratio: 32/18) { … }
  18 @media screen and (device-aspect-ratio: 1280/720) { … }
  19 @media screen and (device-aspect-ratio: 2560/1440) { … }
  20
  21 html:lang(fr-be)
  22 html:lang(de)
  23 :lang(fr-be) > q
  24 :lang(de) > q
  25
  26 tr:nth-child(2n+1) /* represents every odd row of an HTML table */
  27 tr:nth-child(odd)  /* same */
  28 tr:nth-child(2n+0) /* represents every even row of an HTML table */
  29 tr:nth-child(even) /* same */
  30
  31 /* Alternate paragraph colours in CSS */
  32 p:nth-child(4n+1) { color: navy; }
  33 p:nth-child(4n+2) { color: green; }
  34 p:nth-child(4n+3) { color: maroon; }
  35 p:nth-child(4n+4) { color: purple; }
  36
  37 :nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc, element */
  38 :nth-child(10n+9)  /* Same */
  39 :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */
  40
  41 :nth-child( 3n + 1 )
  42 :nth-child( +3n - 2 )
  43 :nth-child( -n+ 6)
  44 :nth-child( +6 )
  45
  46 html|tr:nth-child(-n+6)  /* represents the 6 first rows of XHTML tables */
  47
  48 img:nth-of-type(2n+1) { float: right; }
  49 img:nth-of-type(2n) { float: left; }
  50
  51 body > h2:nth-of-type(n+2):nth-last-of-type(n+2)
  52 body > h2:not(:first-of-type):not(:last-of-type)
  53
  54 html|*:not(:link):not(:visited)
  55 *|*:not(:hover)
  56 p::first-line { text-transform: uppercase }
  57
  58 p { color: red; font-size: 12pt }
  59 p::first-letter { color: green; font-size: 200% }
  60 p::first-line { color: blue }
  61
  62 p { line-height: 1.1 }
  63 p::first-letter { font-size: 3em; font-weight: normal }
  64 span { font-weight: bold }
  65
  66 *               /* a=0 b=0 c=0 -> specificity =   0 */
  67 LI              /* a=0 b=0 c=1 -> specificity =   1 */
  68 UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
  69 UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
  70 H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
  71 UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
  72 LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
  73 #x34y           /* a=1 b=0 c=0 -> specificity = 100 */
  74 #s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */
  75
  76 @namespace foo url(http://www.example.com);
  77 foo|h1 { color: blue }  /* first rule */
  78 foo|* { color: yellow } /* second rule */
  79 |h1 { color: red }      /* ...*/
  80 *|h1 { color: green }
  81 h1 { color: green }
  82
  83 span[hello="Ocean"][goodbye="Land"]
  84
  85 a[rel~="copyright"] { ... }
  86 a[href="http://www.w3.org/"] { ... }
  87
  88 DIALOGUE[character=romeo]
  89 DIALOGUE[character=juliet]
  90
  91 [att^=val]
  92 [att$=val]
  93 [att*=val]
  94
  95 @namespace foo "http://www.example.com";
  96 [foo|att=val] { color: blue }
  97 [*|att] { color: yellow }
  98 [|att] { color: green }
  99 [att] { color: green }
 100
 101
 102 *:target { color : red }
 103 *:target::before { content : url(target.png) }
 104
 105 E[foo]{
 106   padding:65px;
 107 }
 108 E[foo] ~ F{
 109   padding:65px;
 110 }
 111 E#myid{
 112   padding:65px;
 113 }
 114 input[type="search"]::-webkit-search-decoration,
 115 input[type="search"]::-webkit-search-cancel-button {
 116   -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
 117 }
 118 button::-moz-focus-inner,
 119 input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
 120   padding: 0;
 121   border: 0;
 122 }
 123 .btn {
 124   // reset here as of 2.0.3 due to Recess property order
 125   border-color: #ccc;
 126   border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
 127 }
 128 fieldset span button, fieldset span input[type="file"] {
 129   font-size:12px;
 130         font-family:Arial, Helvetica, sans-serif;
 131 }
 132 .el tr:nth-child(even):last-child td:first-child{
 133         -moz-border-radius-bottomleft:3px;
 134         -webkit-border-bottom-left-radius:3px;
 135         border-bottom-left-radius:3px;
 136 }
 137
 138 /* Some LESS code */
 139
 140 button {
 141     width:  32px;
 142     height: 32px;
 143     border: 0;
 144     margin: 4px;
 145     cursor: pointer;
 146 }
 147 button.icon-plus { background: url(http://dahlström.net/tmp/sharp-icons/svg-icon-target.svg#plus) no-repeat; }
 148 button.icon-chart { background: url(http://dahlström.net/tmp/sharp-icons/svg-icon-target.svg#chart) no-repeat; }
 149
 150 button:hover { background-color: #999; }
 151 button:active { background-color: #666; }
 152
 153 @test_a: #eeeQQQ;//this is not a valid hex value and thus parsed as an element id
 154 @test_b: #eeeFFF //this is a valid hex value but the declaration doesn't end with a semicolon and thus parsed as an element id
 155
 156 #eee aaa .box
 157 {
 158   #test bbb {
 159     width: 500px;
 160     height: 250px;
 161     background-image: url(dir/output/sheep.png), url( betweengrassandsky.png );
 162     background-position: center bottom, left top;
 163     background-repeat: no-repeat;
 164   }
 165 }
 166
 167 @base: #f938ab;
 168
 169 .box-shadow(@style, @c) when (iscolor(@c)) {
 170   box-shadow:         @style @c;
 171   -webkit-box-shadow: @style @c;
 172   -moz-box-shadow:    @style @c;
 173 }
 174 .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
 175   .box-shadow(@style, rgba(0, 0, 0, @alpha));
 176 }
 177
 178 @color: #4D926F;
 179
 180 #header {
 181   color: @color;
 182   color: #000000;
 183 }
 184 h2 {
 185   color: @color;
 186 }
 187
 188 .rounded-corners (@radius: 5px) {
 189   border-radius: @radius;
 190   -webkit-border-radius: @radius;
 191   -moz-border-radius: @radius;
 192 }
 193
 194 #header {
 195   .rounded-corners;
 196 }
 197 #footer {
 198   .rounded-corners(10px);
 199 }
 200
 201 .box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
 202   @val: @x @y @blur rgba(0, 0, 0, @alpha);
 203
 204   box-shadow:         @val;
 205   -webkit-box-shadow: @val;
 206   -moz-box-shadow:    @val;
 207 }
 208 .box { @base: #f938ab;
 209   color:        saturate(@base, 5%);
 210   border-color: lighten(@base, 30%);
 211   div { .box-shadow(0, 0, 5px, 0.4) }
 212 }
 213
 214 @import url("something.css");
 215
 216 @light-blue:   hsl(190, 50%, 65%);
 217 @light-yellow: desaturate(#fefec8, 10%);
 218 @dark-yellow:  desaturate(darken(@light-yellow, 10%), 40%);
 219 @darkest:      hsl(20, 0%, 15%);
 220 @dark:         hsl(190, 20%, 30%);
 221 @medium:       hsl(10, 60%, 30%);
 222 @light:        hsl(90, 40%, 20%);
 223 @lightest:     hsl(90, 20%, 90%);
 224 @highlight:    hsl(80, 50%, 90%);
 225 @blue:         hsl(210, 60%, 20%);
 226 @alpha-blue:   hsla(210, 60%, 40%, 0.5);
 227
 228 .box-shadow (@x, @y, @blur, @alpha) {
 229   @value: @x @y @blur rgba(0, 0, 0, @alpha);
 230   box-shadow:         @value;
 231   -moz-box-shadow:    @value;
 232   -webkit-box-shadow: @value;
 233 }
 234 .border-radius (@radius) {
 235   border-radius: @radius;
 236   -moz-border-radius: @radius;
 237   -webkit-border-radius: @radius;
 238 }
 239
 240 .border-radius (@radius, bottom) {
 241   border-top-right-radius: 0;
 242   border-top-left-radius: 0;
 243   -moz-border-top-right-radius: 0;
 244   -moz-border-top-left-radius: 0;
 245   -webkit-border-top-left-radius: 0;
 246   -webkit-border-top-right-radius: 0;
 247 }
 248 .border-radius (@radius, right) {
 249   border-bottom-left-radius: 0;
 250   border-top-left-radius: 0;
 251   -moz-border-bottom-left-radius: 0;
 252   -moz-border-top-left-radius: 0;
 253   -webkit-border-bottom-left-radius: 0;
 254   -webkit-border-top-left-radius: 0;
 255 }
 256 .box-shadow-inset (@x, @y, @blur, @color) {
 257   box-shadow: @x @y @blur @color inset;
 258   -moz-box-shadow: @x @y @blur @color inset;
 259   -webkit-box-shadow: @x @y @blur @color inset;
 260 }
 261 .code () {
 262   font-family: 'Bitstream Vera Sans Mono',
 263                'DejaVu Sans Mono',
 264                'Monaco',
 265                Courier,
 266                monospace !important;
 267 }
 268 .wrap () {
 269   text-wrap: wrap;
 270   white-space: pre-wrap;       /* css-3 */
 271   white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 272   white-space: -pre-wrap;      /* Opera 4-6 */
 273   white-space: -o-pre-wrap;    /* Opera 7 */
 274   word-wrap: break-word;       /* Internet Explorer 5.5+ */
 275 }
 276
 277 html { margin: 0 }
 278 body {
 279   background-color: @darkest;
 280   margin: 0 auto;
 281   font-family: Arial, sans-serif;
 282   font-size: 100%;
 283   overflow-x: hidden;
 284 }
 285 nav, header, footer, section, article {
 286   display: block;
 287 }
 288 a {
 289   color: #b83000;
 290 }
 291 h1 a {
 292   color: black;
 293   text-decoration: none;
 294 }
 295 a:hover {
 296   text-decoration: underline;
 297 }
 298 h1, h2, h3, h4 {
 299   margin: 0;
 300   font-weight: normal;
 301 }
 302 ul, li {
 303   list-style-type: none;
 304 }
 305 code { .code; }
 306 code {
 307   .string, .regexp { color: @dark }
 308   .keyword { font-weight: bold }
 309   .comment { color: rgba(0, 0, 0, 0.5) }
 310   .number { color: @blue }
 311   .class, .special { color: rgba(0, 50, 100, 0.8) }
 312 }
 313 pre {
 314   padding: 0 30px;
 315   .wrap;
 316 }
 317 blockquote {
 318   font-style: italic;
 319 }
 320 body > footer {
 321   text-align: left;
 322   margin-left: 10px;
 323   font-style: italic;
 324   font-size: 18px;
 325   color: #888;
 326 }
 327
 328 #logo {
 329   margin-top: 30px;
 330   margin-bottom: 30px;
 331   display: block;
 332   width: 199px;
 333   height: 81px;
 334   background: url(/images/logo.png) no-repeat;
 335 }
 336 nav {
 337   margin-left: 15px;
 338 }
 339 nav a, #dropdown li {
 340   display: inline-block;
 341   color: white;
 342   line-height: 42px;
 343   margin: 0;
 344   padding: 0px 15px;
 345   text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
 346   text-decoration: none;
 347   border: 2px solid transparent;
 348   border-width: 0 2px;
 349   &:hover {
 350     .dark-red;
 351     text-decoration: none;
 352   }
 353 }
 354 .dark-red {
 355     @red: @medium;
 356     border: 2px solid darken(@red, 25%);
 357     border-left-color: darken(@red, 15%);
 358     border-right-color: darken(@red, 15%);
 359     border-bottom: 0;
 360     border-top: 0;
 361     background-color: darken(@red, 10%);
 362 }
 363
 364 .content {
 365   margin: 0 auto;
 366   width: 980px;
 367 }
 368
 369 #menu {
 370   position: absolute;
 371   width: 100%;
 372   z-index: 3;
 373   clear: both;
 374   display: block;
 375   background-color: @blue;
 376   height: 42px;
 377   border-top: 2px solid lighten(@alpha-blue, 20%);
 378   border-bottom: 2px solid darken(@alpha-blue, 25%);
 379   .box-shadow(0, 1px, 8px, 0.6);
 380   -moz-box-shadow: 0 0 0 #000; // Because firefox sucks.
 381
 382   &.docked {
 383     background-color: hsla(210, 60%, 40%, 0.4);
 384   }
 385   &:hover {
 386     background-color: @blue;
 387   }
 388
 389   #dropdown {
 390     margin: 0 0 0 117px;
 391     padding: 0;
 392     padding-top: 5px;
 393     display: none;
 394     width: 190px;
 395     border-top: 2px solid @medium;
 396     color: @highlight;
 397     border: 2px solid darken(@medium, 25%);
 398     border-left-color: darken(@medium, 15%);
 399     border-right-color: darken(@medium, 15%);
 400     border-top-width: 0;
 401     background-color: darken(@medium, 10%);
 402     ul {
 403       padding: 0px;
 404     }
 405     li {
 406       font-size: 14px;
 407       display: block;
 408       text-align: left;
 409       padding: 0;
 410       border: 0;
 411       a {
 412         display: block;
 413         padding: 0px 15px;
 414         text-decoration: none;
 415         color: white;
 416         &:hover {
 417           background-color: darken(@medium, 15%);
 418           text-decoration: none;
 419         }
 420       }
 421     }
 422     .border-radius(5px, bottom);
 423     .box-shadow(0, 6px, 8px, 0.5);
 424   }
 425 }
 426
 427 #main {
 428   margin: 0 auto;
 429   width: 100%;
 430   background-color: @light-blue;
 431   border-top: 8px solid darken(@light-blue, 5%);
 432
 433   #intro {
 434     background-color: lighten(@light-blue, 25%);
 435     float: left;
 436     margin-top: -8px;
 437     margin-right: 5px;
 438
 439     height: 380px;
 440     position: relative;
 441     z-index: 2;
 442     font-family: 'Droid Serif', 'Georgia';
 443     width: 395px;
 444     padding: 45px 20px 23px 30px;
 445     border: 2px dashed darken(@light-blue, 10%);
 446     .box-shadow(1px, 0px, 6px, 0.5);
 447     border-bottom: 0;
 448     border-top: 0;
 449     #download { color: transparent; border: 0; float: left; display: inline-block; margin: 15px 0 15px -5px; }
 450     #download img { display: inline-block}
 451     #download-info {
 452       code {
 453         font-size: 13px;
 454       }
 455       color: @blue + #333; display: inline; float: left; margin: 36px 0 0 15px }
 456   }
 457   h2 {
 458     span {
 459       color: @medium;
 460     }
 461     color: @blue;
 462     margin: 20px 0;
 463     font-size: 24px;
 464     line-height: 1.2em;
 465   }
 466   h3 {
 467     color: @blue;
 468     line-height: 1.4em;
 469     margin: 30px 0 15px 0;
 470     font-size: 1em;
 471     text-shadow: 0px 0px 0px @lightest;
 472     span { color: @medium }
 473   }
 474   #example {
 475     p {
 476       font-size: 18px;
 477       color: @blue;
 478       font-weight: bold;
 479       text-shadow: 0px 1px 1px @lightest;
 480     }
 481     pre {
 482       margin: 0;
 483       text-shadow: 0 -1px 1px @darkest;
 484       margin-top: 20px;
 485       background-color: desaturate(@darkest, 8%);
 486       border: 0;
 487       width: 450px;
 488       color: lighten(@lightest, 2%);
 489       background-repeat: repeat;
 490       padding: 15px;
 491       border: 1px dashed @lightest;
 492       line-height: 15px;
 493       .box-shadow(0, 0px, 15px, 0.5);
 494       .code;
 495       .border-radius(2px);
 496       code .attribute { color: hsl(40, 50%, 70%) }
 497       code .variable  { color: hsl(120, 10%, 50%) }
 498       code .element   { color: hsl(170, 20%, 50%) }
 499
 500       code .string, .regexp { color: hsl(75, 50%, 65%) }
 501       code .class { color: hsl(40, 40%, 60%); font-weight: normal }
 502       code .id { color: hsl(50, 40%, 60%); font-weight: normal }
 503       code .comment { color: rgba(255, 255, 255, 0.2) }
 504       code .number, .color { color: hsl(10, 40%, 50%) }
 505       code .class, code .mixin, .special { color: hsl(190, 20%, 50%) }
 506       #time { color: #aaa }
 507     }
 508     float: right;
 509     font-size: 12px;
 510     margin: 0;
 511     margin-top: 15px;
 512     padding: 0;
 513     width: 500px;
 514   }
 515 }
 516
 517
 518 .page {
 519   .content {
 520     width: 870px;
 521     padding: 45px;
 522   }
 523   margin: 0 auto;
 524   font-family: 'Georgia', serif;
 525   font-size: 18px;
 526   line-height: 26px;
 527   padding: 0 60px;
 528   code {
 529     font-size: 16px;
 530   }
 531   pre {
 532     border-width: 1px;
 533     border-style: dashed;
 534     padding: 15px;
 535     margin: 15px 0;
 536   }
 537   h1 {
 538     text-align: left;
 539     font-size: 40px;
 540     margin-top: 15px;
 541     margin-bottom: 35px;
 542   }
 543   p + h1 { margin-top: 60px }
 544   h2, h3 {
 545     margin: 30px 0 15px 0;
 546   }
 547   p + h2, pre + h2, code + h2 {
 548     border-top: 6px solid rgba(255, 255, 255, 0.1);
 549     padding-top: 30px;
 550   }
 551   h3 {
 552     margin: 15px 0;
 553   }
 554 }
 555
 556
 557 #docs {
 558   @bg: lighten(@light-blue, 5%);
 559   border-top: 2px solid lighten(@bg, 5%);
 560   color: @blue;
 561   background-color: @light-blue;
 562   .box-shadow(0, -2px, 5px, 0.2);
 563
 564   h1 {
 565     font-family: 'Droid Serif', 'Georgia', serif;
 566     padding-top: 30px;
 567     padding-left: 45px;
 568     font-size: 44px;
 569     text-align: left;
 570     margin: 30px 0 !important;
 571     text-shadow: 0px 1px 1px @lightest;
 572     font-weight: bold;
 573   }
 574   .content {
 575     clear: both;
 576     border-color: transparent;
 577     background-color: lighten(@light-blue, 25%);
 578     .box-shadow(0, 5px, 5px, 0.4);
 579   }
 580   pre {
 581     @background: lighten(@bg, 30%);
 582     color: lighten(@blue, 10%);
 583     background-color: @background;
 584     border-color: lighten(@light-blue, 25%);
 585     border-width: 2px;
 586     code .attribute { color: hsl(40, 50%, 30%) }
 587     code .variable  { color: hsl(120, 10%, 30%) }
 588     code .element   { color: hsl(170, 20%, 30%) }
 589
 590     code .string, .regexp { color: hsl(75, 50%, 35%) }
 591     code .class { color: hsl(40, 40%, 30%); font-weight: normal }
 592     code .id { color: hsl(50, 40%, 30%); font-weight: normal }
 593     code .comment { color: rgba(0, 0, 0, 0.4) }
 594     code .number, .color { color: hsl(10, 40%, 30%) }
 595     code .class, code .mixin, .special { color: hsl(190, 20%, 30%) }
 596   }
 597   pre code                    { font-size: 15px  }
 598   p + h2, pre + h2, code + h2 { border-top-color: rgba(0, 0, 0, 0.1) }
 599 }
 600
 601 td {
 602   padding-right: 30px;
 603 }
 604 #synopsis {
 605   .box-shadow(0, 5px, 5px, 0.2);
 606 }
 607 #synopsis, #about {
 608   h2 {
 609     font-size: 30px;
 610     padding: 10px 0;
 611   }
 612   h1 + h2 {
 613       margin-top: 15px;
 614   }
 615   h3 { font-size: 22px }
 616
 617   .code-example {
 618     border-spacing: 0;
 619     border-width: 1px;
 620     border-style: dashed;
 621     padding: 0;
 622     pre { border: 0; margin: 0 }
 623     td {
 624       border: 0;
 625       margin: 0;
 626       background-color: desaturate(darken(@darkest, 5%), 20%);
 627       vertical-align: top;
 628       padding: 0;
 629     }
 630     tr { padding: 0 }
 631   }
 632   .css-output {
 633     td {
 634       border-left: 0;
 635     }
 636   }
 637   .less-example {
 638     //border-right: 1px dotted rgba(255, 255, 255, 0.5) !important;
 639   }
 640   .css-output, .less-example {
 641     width: 390px;
 642   }
 643   pre {
 644     padding: 20px;
 645     line-height: 20px;
 646     font-size: 14px;
 647   }
 648 }
 649 #about, #synopsis, #guide {
 650   a {
 651     text-decoration: none;
 652     color: @light-yellow;
 653     border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
 654     &:hover {
 655       text-decoration: none;
 656       border-bottom: 1px dashed @light-yellow;
 657     }
 658   }
 659   @bg: desaturate(darken(@darkest, 5%), 20%);
 660   text-shadow: 0 -1px 1px lighten(@bg, 5%);
 661   color: @highlight;
 662   background-color: @bg;
 663   .content {
 664     background-color: desaturate(@darkest, 20%);
 665     clear: both;
 666     .box-shadow(0, 5px, 5px, 0.4);
 667   }
 668   h1, h2, h3 {
 669     color: @dark-yellow;
 670   }
 671   pre {
 672       code .attribute { color: hsl(40, 50%, 70%) }
 673       code .variable  { color: hsl(120, 10%, 50%) }
 674       code .element   { color: hsl(170, 20%, 50%) }
 675
 676       code .string, .regexp { color: hsl(75, 50%, 65%) }
 677       code .class { color: hsl(40, 40%, 60%); font-weight: normal }
 678       code .id { color: hsl(50, 40%, 60%); font-weight: normal }
 679       code .comment { color: rgba(255, 255, 255, 0.2) }
 680       code .number, .color { color: hsl(10, 40%, 50%) }
 681       code .class, code .mixin, .special { color: hsl(190, 20%, 50%) }
 682     background-color: @bg;
 683     border-color: darken(@light-yellow, 5%);
 684   }
 685   code {
 686     color: darken(@dark-yellow, 5%);
 687     .string, .regexp { color: desaturate(@light-blue, 15%) }
 688     .keyword { color: hsl(40, 40%, 60%); font-weight: normal }
 689     .comment { color: rgba(255, 255, 255, 0.2) }
 690     .number { color: lighten(@blue, 10%) }
 691     .class, .special { color: hsl(190, 20%, 50%) }
 692   }
 693 }
 694 #guide {
 695   background-color: @darkest;
 696   .content {
 697     background-color: transparent;
 698   }
 699
 700 }
 701
 702 #about {
 703   background-color: @darkest !important;
 704   .content {
 705     background-color: desaturate(lighten(@darkest, 3%), 5%);
 706   }
 707 }
 708 #synopsis {
 709   background-color: desaturate(lighten(@darkest, 3%), 5%) !important;
 710   .content {
 711     background-color: desaturate(lighten(@darkest, 3%), 5%);
 712   }
 713   pre {}
 714 }
 715 #synopsis, #guide {
 716   .content {
 717     .box-shadow(0, 0px, 0px, 0.0);
 718   }
 719 }
 720 #about footer {
 721   margin-top: 30px;
 722   padding-top: 30px;
 723   border-top: 6px solid rgba(0, 0, 0, 0.1);
 724   text-align: center;
 725   font-size: 16px;
 726   color: rgba(255, 255, 255, 0.35);
 727   #copy { font-size: 12px }
 728   text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02);
 729 }
 730 </textarea></form>
 731     <script>
 732       var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
 733         theme: "lesser-dark",
 734         lineNumbers : true,
 735         matchBrackets : true
 736       });
 737     </script>
 738
 739     <p><strong>MIME types defined:</strong> <code>text/x-less</code>, <code>text/css</code> (if not previously defined).</p>
 740   </body>
 741 </html>