radar.css 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  1. body {
  2. margin: 0px;
  3. font-family: 'PT Sans', Helvetica, 'Helvetica Neuve', Arial, Tahoma, sans-serif;
  4. font-size: 17px;
  5. color: #333;
  6. }}
  7. h1, h2, h3, h4, h5, h6 {
  8. color:#222;
  9. margin:0 0 20px;
  10. }
  11. p, ul, ol, table, pre, dl {
  12. margin:0 0 20px;
  13. }
  14. h1, h2, h3 {
  15. line-height:1.1;
  16. }
  17. h1 {
  18. font-size:28px;
  19. }
  20. h2 {
  21. color:#393939;
  22. }
  23. h3, h4, h5, h6 {
  24. color:#494949;
  25. }
  26. a {
  27. color:#39c;
  28. font-weight:400;
  29. text-decoration:none;
  30. }
  31. a small {
  32. font-size:11px;
  33. color:#777;
  34. margin-top:-0.6em;
  35. display:block;
  36. }
  37. .wrapper {
  38. width:860px;
  39. margin:0 auto;
  40. }
  41. blockquote {
  42. border-left:1px solid #e5e5e5;
  43. margin:0;
  44. padding:0 0 0 20px;
  45. font-style:italic;
  46. }
  47. code, pre {
  48. color:#333;
  49. font-size:12px;
  50. }
  51. pre {
  52. padding:8px 15px;
  53. background: #f8f8f8;
  54. border-radius:5px;
  55. border:1px solid #e5e5e5;
  56. overflow-x: auto;
  57. }
  58. table {
  59. width:100%;
  60. border-collapse:collapse;
  61. }
  62. th, td {
  63. text-align:left;
  64. padding:5px 10px;
  65. border-bottom:1px solid #e5e5e5;
  66. }
  67. dt {
  68. color:#444;
  69. font-weight:700;
  70. }
  71. th {
  72. color:#444;
  73. }
  74. img {
  75. max-width:100%;
  76. }
  77. header {
  78. width:270px;
  79. float:left;
  80. position:fixed;
  81. }
  82. header ul {
  83. list-style:none;
  84. height:40px;
  85. padding:0;
  86. background: #eee;
  87. background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
  88. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
  89. background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
  90. background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
  91. background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
  92. background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
  93. border-radius:5px;
  94. border:1px solid #d2d2d2;
  95. box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
  96. width:270px;
  97. }
  98. header li {
  99. width:89px;
  100. float:left;
  101. border-right:1px solid #d2d2d2;
  102. height:40px;
  103. }
  104. header ul a {
  105. line-height:1;
  106. font-size:11px;
  107. color:#999;
  108. display:block;
  109. text-align:center;
  110. padding-top:6px;
  111. height:40px;
  112. }
  113. strong {
  114. color:#222;
  115. font-weight:700;
  116. }
  117. header ul li + li {
  118. width:88px;
  119. border-left:1px solid #fff;
  120. }
  121. header ul li + li + li {
  122. border-right:none;
  123. width:89px;
  124. }
  125. header ul a strong {
  126. font-size:14px;
  127. display:block;
  128. color:#222;
  129. }
  130. section {
  131. width:500px;
  132. float:right;
  133. padding-bottom:50px;
  134. }
  135. small {
  136. font-size:11px;
  137. }
  138. hr {
  139. border:0;
  140. background:#e5e5e5;
  141. height:1px;
  142. margin:0 0 20px;
  143. }
  144. footer {
  145. width:270px;
  146. float:left;
  147. position:fixed;
  148. bottom:50px;
  149. }
  150. @media print, screen and (max-width: 960px) {
  151. div.wrapper {
  152. width:auto;
  153. margin:0;
  154. }
  155. header, section, footer {
  156. float:none;
  157. position:static;
  158. width:auto;
  159. }
  160. header {
  161. padding-right:320px;
  162. }
  163. section {
  164. border:1px solid #e5e5e5;
  165. border-width:1px 0;
  166. padding:20px 0;
  167. margin:0 0 20px;
  168. }
  169. header a small {
  170. display:inline;
  171. }
  172. header ul {
  173. position:absolute;
  174. right:50px;
  175. top:52px;
  176. }
  177. }
  178. @media print, screen and (max-width: 720px) {
  179. body {
  180. word-wrap:break-word;
  181. }
  182. header {
  183. padding:0;
  184. }
  185. header ul, header p.view {
  186. position:static;
  187. }
  188. pre, code {
  189. word-wrap:normal;
  190. }
  191. }
  192. @media print, screen and (max-width: 480px) {
  193. body {
  194. padding:15px;
  195. }
  196. header ul {
  197. display:none;
  198. }
  199. }
  200. @media print {
  201. body {
  202. padding:0.4in;
  203. font-size:12pt;
  204. color:#444;
  205. }
  206. }
  207. #wrapper {
  208. padding: 1em;
  209. }
  210. .ca-menu {
  211. list-style: none;
  212. padding: 0;
  213. margin: 20px auto;
  214. }
  215. #toc {
  216. top: 0;
  217. right: 0;
  218. bottom: 0;
  219. left: auto;
  220. width: 20%;
  221. background-color: #fff;
  222. padding: 20px;
  223. position: fixed;
  224. z-index: 1;
  225. display: none;
  226. height: 100%;
  227. }
  228. #toc::before {
  229. content: "";
  230. position: absolute;
  231. top: 15%;
  232. bottom: 15%;
  233. left: -1px;
  234. width: 1px;
  235. background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(227,224,216,0)), color-stop(20%, #e3e0d8), color-stop(80%, #e3e0d8), color-stop(100%, rgba(227,224,216,0)));
  236. background: -webkit-linear-gradient(top, rgba(227,224,216,0) 0%,#e3e0d8 20%,#e3e0d8 80%,rgba(227,224,216,0) 100%);
  237. background: -moz-linear-gradient(top, rgba(227,224,216,0) 0%,#e3e0d8 20%,#e3e0d8 80%,rgba(227,224,216,0) 100%);
  238. background: -o-linear-gradient(top, rgba(227,224,216,0) 0%,#e3e0d8 20%,#e3e0d8 80%,rgba(227,224,216,0) 100%);
  239. background: linear-gradient(top, rgba(227,224,216,0) 0%,#e3e0d8 20%,#e3e0d8 80%,rgba(227,224,216,0) 100%);
  240. }
  241. #toc-inner {
  242. display: table-cell;
  243. vertical-align: middle;
  244. }
  245. .nav-list {
  246. height: 50%;
  247. margin: auto 0;
  248. }
  249. div.clear {
  250. clear: both;
  251. }
  252. h1 { font-size: 2.5em; line-height: 1; }
  253. h2 { font-size: 2em; line-height: 1; }
  254. h3 { font-size: 1.5em; line-height: 1; }
  255. h4 { font-size: 1.2em; line-height: 1.25; }
  256. h5 { font-size: 1em; line-height: 1; font-weight: bold; }
  257. h6 { font-size: 1em; line-height: 1; font-weight: bold; }
  258. h1, h2, h3, h4, h5, h6 { font-weight: normal; margin-top: 1em; margin-bottom: 0.5em; }
  259. h1, h2 { margin-bottom: 0.5em; }
  260. .post p {
  261. max-width: 580px;
  262. }
  263. ul.list, ol.list {
  264. padding-left: 3.333em;
  265. max-width: 580px;
  266. }
  267. .post h2 {
  268. border-bottom: 1px solid #EDEDED;
  269. }
  270. h1:nth-child(1),
  271. h2:nth-child(1),
  272. h3:nth-child(1),
  273. h4:nth-child(1),
  274. h5:nth-child(1),
  275. h6:nth-child(1) {
  276. margin-top: 0;
  277. }
  278. @media (min-width: 43.75em) {
  279. #wrapper {
  280. width: 650px;
  281. padding: 20px 50px;
  282. }
  283. }
  284. @media (min-width: 62em) {
  285. #toc {
  286. display: table;
  287. }
  288. }