demo.css 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. @import url(http://fonts.googleapis.com/css?family=Raleway:100);
  2. body {
  3. font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
  4. margin: 0;
  5. padding: 0;
  6. color: #333;
  7. background-color: #fff;
  8. }
  9. body.dt-example-bootstrap {
  10. font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  11. font-size: 14px;
  12. line-height: 1.42857143;
  13. }
  14. div.container {
  15. max-width: 980px;
  16. margin: 0 auto;
  17. }
  18. h1 {
  19. font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Raleway', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  20. font-weight: 100;
  21. letter-spacing: 1px;
  22. font-size: 3em;
  23. line-height: 1em;
  24. }
  25. h1 span {
  26. font-size: 0.5em;
  27. line-height: 1em;
  28. }
  29. a {
  30. cursor: pointer;
  31. color: #3174c7;
  32. text-decoration: none;
  33. }
  34. p > a:hover {
  35. text-decoration: underline;
  36. }
  37. div.toc ul {
  38. color: #4E6CA3;
  39. list-style-type: none;
  40. padding-left: 0;
  41. }
  42. div.toc li {
  43. padding: 0.2em 1em;
  44. border-left: 4px solid transparent;
  45. border-bottom: 1px solid #e6e6e6;
  46. }
  47. div.toc li.active {
  48. border-left: 4px solid #458ae0;
  49. }
  50. div.toc li:first-child {
  51. border-top: 1px solid #efefef;
  52. }
  53. div.toc li:last-child {
  54. border-bottom: 1px solid #efefef;
  55. }
  56. div.epilogue {
  57. text-align: center;
  58. }
  59. p.copyright {
  60. font-size: 0.8em;
  61. padding-bottom: 2em;
  62. margin-bottom: 0;
  63. }
  64. .clear {
  65. clear: both;
  66. height: 0;
  67. }
  68. div.info {
  69. margin-bottom: 2em;
  70. -webkit-column-count: 2;
  71. -moz-column-count: 2;
  72. -ms-column-count: 2;
  73. -o-column-count: 2;
  74. column-count: 2;
  75. -webkit-column-rule: 1px solid #F3F3F3;
  76. -moz-column-rule: 1px solid #F3F3F3;
  77. -ms-column-rule: 1px solid #F3F3F3;
  78. -o-column-rule: 1px solid #F3F3F3;
  79. column-rule: 1px solid #F3F3F3;
  80. }
  81. div.info > * {
  82. -webkit-column-break-inside: avoid;
  83. break-inside: avoid;
  84. }
  85. div.info li {
  86. margin-top: 0.75em;
  87. }
  88. div.info p:first-child {
  89. margin-top: 0;
  90. }
  91. div.footer {
  92. position: relative;
  93. margin-top: 3em;
  94. border-top: 1px solid #999;
  95. background-color: #eee;
  96. }
  97. div.footer > div.liner {
  98. max-width: 960px;
  99. margin: 0 auto;
  100. }
  101. div.footer > div.gradient {
  102. position: absolute;
  103. top: 0;
  104. left: 0;
  105. width: 100%;
  106. height: 6px;
  107. background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
  108. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
  109. background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
  110. background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
  111. background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
  112. background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); /* W3C */
  113. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
  114. }
  115. div.toc {
  116. -webkit-column-count: 2;
  117. -moz-column-count: 2;
  118. -ms-column-count: 2;
  119. -o-column-count: 2;
  120. column-count: 2;
  121. }
  122. div.toc-group {
  123. display: inline-block;
  124. width: 100%;
  125. }
  126. div.box {
  127. overflow: auto;
  128. height: 8em;
  129. padding: 1em;
  130. color: #444;
  131. background-color: #fcfcfc;
  132. border: 1px solid #e0e0e0;
  133. margin-bottom: 2em;
  134. }
  135. code {
  136. font-family: "Source Code Pro", Consolas, Menlo, Monaco, "Courier New", monospace;
  137. padding: 1px 4px;
  138. font-size: 0.8em;
  139. color: #444;
  140. background-color: #fcfcfc;
  141. border: 1px solid #e0e0e0;
  142. -webkit-border-radius: 3px;
  143. -moz-border-radius: 3px;
  144. border-radius: 3px;
  145. }
  146. code:after {
  147. display: inline-block;
  148. border-left: 1px solid rgba( 0, 0, 0, 0.2 );
  149. margin-left: 4px;
  150. padding-left: 4px;
  151. opacity: 0.5;
  152. }
  153. a code {
  154. text-decoration: underline;
  155. }
  156. code.option {
  157. color: #D14; /* red */
  158. background-color: #fcf6f8;
  159. border: 1px solid #f7d6df;
  160. white-space: nowrap;
  161. }
  162. code.option:after { content: 'Option'; }
  163. code.path {
  164. color: #095c05; /* dark green */
  165. background-color: #eef7ed;
  166. border: 1px solid #8ccb89;
  167. white-space: nowrap;
  168. }
  169. code.path:after { content: 'Path'; }
  170. code.tag {
  171. color: #c29f00; /* yellow */
  172. background-color: #fff9d7;
  173. border: 1px solid #ffe700;
  174. white-space: nowrap;
  175. }
  176. code.tag:after { content: 'Tag'; }
  177. code.api {
  178. color: #0c199c; /* dark blue */
  179. background-color: #f4f5fc;
  180. border: 1px solid #c6cbe9;
  181. white-space: nowrap;
  182. }
  183. code.api:after { content: 'API'; }
  184. code.type {
  185. color: #d119cf; /* pink */
  186. background-color: #faebfa;
  187. border: 1px solid #f3aef2;
  188. white-space: nowrap;
  189. }
  190. code.type:after { content: 'Type'; }
  191. code.event {
  192. color: #2a839e; /* deep aqua */
  193. background-color: #f5fafb;
  194. border: 1px solid #a8ddec;
  195. white-space: nowrap;
  196. }
  197. code.event:after { content: 'Event'; }
  198. code.string {
  199. color: #c05f1d; /* brown */
  200. background-color: #f5eee9;
  201. border: 1px solid #dfc4b2;
  202. white-space: nowrap;
  203. }
  204. code.string:after { content: 'String'; }
  205. code.field {
  206. color: #ad1ee8; /* purple */
  207. background-color: #f9f1fc;
  208. border: 1px solid #ebc9f7;
  209. white-space: nowrap;
  210. }
  211. code.field:after { content: 'Field'; }
  212. code.button {
  213. color: #464e50; /* grey */
  214. background-color: #f2f7f9;
  215. border: 1px solid #b8c3c5;
  216. white-space: nowrap;
  217. }
  218. code.button:after { content: 'Button'; }
  219. code.multiline {
  220. display: inline-block;
  221. width: 95%;
  222. }
  223. div.syntaxhighlighter code:after {
  224. display: none;
  225. }
  226. ul.tabs {
  227. position: relative;
  228. top: 1px;
  229. height: 40px;
  230. margin: 20px 20px 0 0;
  231. }
  232. ul.tabs li {
  233. display: block;
  234. float: left;
  235. padding: 0 15px;
  236. height: 40px;
  237. font-size: 1.2em;
  238. margin: 0 5px;
  239. cursor: pointer;
  240. line-height: 40px;
  241. color: #121e32;
  242. border: 1px solid white;
  243. border-bottom: none;
  244. margin-top: -1px;
  245. }
  246. ul.tabs li.active {
  247. border: 1px solid #ccc;
  248. border-bottom: 1px solid white;
  249. margin-top: 0;
  250. border-top-left-radius: 5px;
  251. border-top-right-radius: 5px;
  252. }
  253. ul.tabs li:hover {
  254. background-color: #fafafa;
  255. }
  256. ul.tabs li.active:hover {
  257. background-color: white;
  258. }
  259. div.tabs {
  260. clear: both;
  261. margin-top: -1px;
  262. }
  263. div.tabs>div {
  264. padding: 15px;
  265. border: 1px solid #ccc;
  266. display: none;
  267. border-radius: 5px;
  268. box-shadow: 2px 2px 2px #bbb;
  269. }
  270. div.tabs>div h1 {
  271. border-bottom: none;
  272. margin-top: 1em;
  273. }
  274. div.tabs > div > p:first-child {
  275. margin-top: 0;
  276. }
  277. div.column_half {
  278. float: left;
  279. width: 49%;
  280. padding-right: 1%;
  281. }
  282. @media only screen and (max-width : 979px) {
  283. div.container,
  284. div.footer {
  285. padding: 0 1em;
  286. }
  287. }
  288. @media
  289. screen and (max-width : 767px),
  290. screen and (max-width : 768px) and (orientation: portrait) {
  291. div.info {
  292. -webkit-column-count: 1;
  293. -moz-column-count: 1;
  294. -ms-column-count: 1;
  295. -o-column-count: 1;
  296. column-count: 1;
  297. }
  298. div.toc {
  299. -webkit-column-count: 1;
  300. -moz-column-count: 1;
  301. -ms-column-count: 1;
  302. -o-column-count: 1;
  303. column-count: 1;
  304. }
  305. h1 span {
  306. display: block;
  307. }
  308. }