index.html 18 KB

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