You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

470 lines
6.8 KiB

  1. /* Copyright 2013 Michael Bostock. All rights reserved. Do not copy. */
  2. @import url(https://fonts.googleapis.com/css?family=PT+Serif|PT+Serif:b|PT+Serif:i|PT+Sans|PT+Sans:b);
  3. .ocks-org body {
  4. background: hsl(206deg 47% 9%);
  5. color: hsl(0deg 0% 72%);
  6. font-family: "PT Serif", serif;
  7. margin: 1em auto 4em auto;
  8. position: relative;
  9. width: 960px;
  10. padding: 1rem;
  11. }
  12. .ocks-org header,
  13. .ocks-org footer,
  14. .ocks-org aside,
  15. .ocks-org h1,
  16. .ocks-org h2,
  17. .ocks-org h3,
  18. .ocks-org h4 {
  19. font-family: "PT Sans", sans-serif;
  20. }
  21. .ocks-org h1,
  22. .ocks-org h2,
  23. .ocks-org h3,
  24. .ocks-org h4 {
  25. color: hsl(0deg 1% 71%);
  26. }
  27. .ocks-org header,
  28. .ocks-org footer {
  29. color: #636363;
  30. }
  31. h1 {
  32. font-size: 67px;
  33. font-weight: 300;
  34. letter-spacing: -2px;
  35. margin: 0.3em 0 0.1em 0;
  36. }
  37. h2 {
  38. margin-top: 2em;
  39. }
  40. h1,
  41. h2 {
  42. text-rendering: optimizeLegibility;
  43. }
  44. h2 a[name],
  45. h2 a[id] {
  46. color: hsl(0deg 0% 63% / 49%);
  47. padding-right: 0.3em;
  48. }
  49. header,
  50. footer {
  51. font-size: small;
  52. }
  53. .ocks-org header aside,
  54. .ocks-org footer aside {
  55. float: left;
  56. margin-right: 0.5em;
  57. }
  58. .ocks-org header aside:after,
  59. .ocks-org footer aside:after {
  60. padding-left: 0.5em;
  61. content: "/";
  62. }
  63. footer {
  64. margin-top: 6em;
  65. }
  66. h1 ~ aside {
  67. font-size: small;
  68. right: 0;
  69. position: absolute;
  70. width: 180px;
  71. }
  72. .attribution {
  73. font-size: small;
  74. margin-bottom: 2em;
  75. }
  76. body > p,
  77. li > p,
  78. div > p {
  79. line-height: 1.5em;
  80. }
  81. body > p,
  82. div > p {
  83. width: 720px;
  84. }
  85. body > blockquote {
  86. width: 640px;
  87. }
  88. blockquote q {
  89. display: block;
  90. font-style: oblique;
  91. }
  92. ul {
  93. padding: 0;
  94. }
  95. li {
  96. width: 690px;
  97. margin-left: 30px;
  98. }
  99. a {
  100. color: steelblue;
  101. }
  102. a:not(:hover) {
  103. text-decoration: none;
  104. }
  105. pre,
  106. code,
  107. textarea {
  108. font-family: "Menlo", "Menlo Web", monospace;
  109. }
  110. code {
  111. line-height: 1em;
  112. }
  113. textarea {
  114. font-size: 100%;
  115. }
  116. pre {
  117. border-left: solid 2px hsl(206deg 34% 14%);
  118. padding-left: 18px;
  119. margin: 1em 0 1em 0;
  120. background: hsl(206deg 34% 14%);
  121. border-radius: 6px;
  122. padding-top: 16px;
  123. padding-bottom: 16px;
  124. }
  125. .html .value,
  126. .javascript .string,
  127. .javascript .regexp {
  128. color: #756bb1;
  129. }
  130. .html .tag,
  131. .css .tag,
  132. .javascript .keyword {
  133. color: #3182bd;
  134. }
  135. .comment {
  136. color: #636363;
  137. }
  138. .html .doctype,
  139. .javascript .number {
  140. color: #31a354;
  141. }
  142. .html .attribute,
  143. .css .attribute,
  144. .javascript .class,
  145. .javascript .special {
  146. color: #e6550d;
  147. }
  148. svg {
  149. font: 10px sans-serif;
  150. }
  151. .axis path,
  152. .axis line {
  153. fill: none;
  154. stroke: #000;
  155. shape-rendering: crispEdges;
  156. }
  157. sup,
  158. sub {
  159. line-height: 0;
  160. }
  161. q:before {
  162. content: "“";
  163. }
  164. q:after {
  165. content: "”";
  166. }
  167. blockquote q {
  168. line-height: 1.5em;
  169. display: inline;
  170. }
  171. blockquote q:before,
  172. blockquote q:after {
  173. content: "";
  174. }
  175. h3,
  176. h4,
  177. p,
  178. ul {
  179. padding-left: 1.2rem;
  180. }
  181. .banner {
  182. padding: 0;
  183. }
  184. #toc {
  185. margin-top: 0;
  186. }
  187. @media only screen and (max-device-width: 1023px) {
  188. .ocks-org body {
  189. font-size: 72%;
  190. padding: 0.5rem;
  191. }
  192. body > p,
  193. div > p {
  194. width: 90vw !important;
  195. }
  196. li {
  197. width: 82vw;
  198. }
  199. h3,
  200. h4,
  201. p,
  202. ul {
  203. padding-left: .7rem;
  204. width: 90vw;
  205. }
  206. h1 {
  207. font-size: 2rem;
  208. }
  209. pre {
  210. padding-left: 0.5rem;
  211. }
  212. .banner,
  213. h1,
  214. img {
  215. max-width: calc(100vw - 2em);
  216. min-width: calc(100vw - 2em);
  217. }
  218. }
  219. /*@import url(web/style.css);*/
  220. @font-face {font-family: "Menlo web";
  221. src: url("OnlineWebFonts_COM_cb7eb796ae7de7195a34c485cacebad1\\@font-face\\9f94dc20bb2a09c15241d3a880b7ad01.woff2") format("woff2"), /* chrome、firefox */
  222. url("OnlineWebFonts_COM_cb7eb796ae7de7195a34c485cacebad1\\@font-face\\9f94dc20bb2a09c15241d3a880b7ad01.woff") format("woff");
  223. font-weight: normal;
  224. }
  225. @font-face {font-family: "Menlo web";
  226. src: url("OnlineWebFonts_COM_d6ba633f6ea4cafe1a39ab736fe55e88\\Menlo Bold\\@font-face\\a6ffc5d72a96b65159e710ea6d258ba4.woff2") format("woff2"), /* chrome、firefox */
  227. url("OnlineWebFonts_COM_d6ba633f6ea4cafe1a39ab736fe55e88\\Menlo Bold\\@font-face\\a6ffc5d72a96b65159e710ea6d258ba4.woff") format("woff");
  228. font-weight: bold;
  229. }
  230. .join,
  231. .link,
  232. .node rect {
  233. fill: none;
  234. stroke: #636363;
  235. stroke-width: 1.5px;
  236. }
  237. .link {
  238. stroke: #969696;
  239. }
  240. .node rect {
  241. fill: white;
  242. }
  243. .link path,
  244. .node rect,
  245. .node text,
  246. .join {
  247. -webkit-transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
  248. -moz-transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
  249. -ms-transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
  250. -o-transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
  251. transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
  252. }
  253. .node .element rect {
  254. fill: #bdbdbd;
  255. stroke: none;
  256. }
  257. .node .null rect {
  258. fill: none;
  259. stroke: none;
  260. }
  261. .node .null text {
  262. fill: #636363;
  263. }
  264. .node .selection rect {
  265. stroke: #e6550d;
  266. }
  267. .node .data rect {
  268. stroke: #3182bd;
  269. }
  270. .node .datum rect {
  271. fill: #d9d9d9;
  272. stroke: none;
  273. }
  274. .node .code text {
  275. font-family: monospace;
  276. color: hsl(0deg 0% 74%)
  277. }
  278. .node .key rect {
  279. fill: #a1d99b;
  280. stroke: none;
  281. }
  282. .link .to-key,
  283. .join {
  284. stroke: #a1d99b;
  285. }
  286. .join {
  287. stroke-dasharray: 2,2;
  288. }
  289. .link .to-null {
  290. stroke-dasharray: .5,3.5;
  291. stroke-linecap: round;
  292. }
  293. .link .from-data {
  294. stroke: #3182bd;
  295. }
  296. .play circle {
  297. fill: #fff;
  298. stroke: #000;
  299. stroke-width: 3px;
  300. }
  301. .play:hover path {
  302. fill: #f00;
  303. }
  304. .play.mousedown circle {
  305. fill: #f00;
  306. }
  307. .play.mousedown path {
  308. fill: #fff;
  309. }
  310. .play rect {
  311. fill: none;
  312. pointer-events: all;
  313. cursor: pointer;
  314. }
  315. code span {
  316. -webkit-transition: background 250ms linear;
  317. -moz-transition: background 250ms linear;
  318. -ms-transition: background 250ms linear;
  319. -o-transition: background 250ms linear;
  320. transition: background 250ms linear;
  321. }
  322. pre.prettyprint, code.prettyprint {
  323. background-color: #222;
  324. border-radius: 8px;
  325. font-size: 15px;
  326. }
  327. pre.prettyprint {
  328. width: 90%;
  329. margin: 0.5em;
  330. padding: 1em;
  331. white-space: pre-wrap;
  332. }
  333. #return-to-top {
  334. position: fixed;
  335. bottom: 20px;
  336. right: 20px;
  337. background: rgb(0, 0, 0);
  338. background: rgba(0, 0, 0, 0.2);
  339. width: 50px;
  340. height: 50px;
  341. display: block;
  342. text-decoration: none;
  343. -webkit-border-radius: 35px;
  344. -moz-border-radius: 35px;
  345. border-radius: 35px;
  346. display: none;
  347. -webkit-transition: all 0.3s linear;
  348. -moz-transition: all 0.3s ease;
  349. -ms-transition: all 0.3s ease;
  350. -o-transition: all 0.3s ease;
  351. transition: all 0.3s ease;
  352. }
  353. #return-to-top i {
  354. color: #fff;
  355. margin: 0;
  356. position: relative;
  357. left: 16px;
  358. top: 13px;
  359. font-size: 19px;
  360. -webkit-transition: all 0.3s ease;
  361. -moz-transition: all 0.3s ease;
  362. -ms-transition: all 0.3s ease;
  363. -o-transition: all 0.3s ease;
  364. transition: all 0.3s ease;
  365. }
  366. #return-to-top:hover {
  367. background: rgba(0, 0, 0, 0.35);
  368. }
  369. #return-to-top:hover i {
  370. color: #f0f0f0;
  371. }
  372. @media print {
  373. .pagebreak {
  374. page-break-before: always;
  375. }
  376. div {
  377. page-break-inside: avoid;
  378. }
  379. pre {
  380. page-break-inside: avoid;
  381. }
  382. }
  383. .modebar{
  384. display: none !important;
  385. }