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.

463 lines
6.4 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 Regular", 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 Regular";
  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. }
  224. .join,
  225. .link,
  226. .node rect {
  227. fill: none;
  228. stroke: #636363;
  229. stroke-width: 1.5px;
  230. }
  231. .link {
  232. stroke: #969696;
  233. }
  234. .node rect {
  235. fill: white;
  236. }
  237. .link path,
  238. .node rect,
  239. .node text,
  240. .join {
  241. -webkit-transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
  242. -moz-transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
  243. -ms-transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
  244. -o-transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
  245. transition: stroke-opacity 500ms linear, fill-opacity 500ms linear;
  246. }
  247. .node .element rect {
  248. fill: #bdbdbd;
  249. stroke: none;
  250. }
  251. .node .null rect {
  252. fill: none;
  253. stroke: none;
  254. }
  255. .node .null text {
  256. fill: #636363;
  257. }
  258. .node .selection rect {
  259. stroke: #e6550d;
  260. }
  261. .node .data rect {
  262. stroke: #3182bd;
  263. }
  264. .node .datum rect {
  265. fill: #d9d9d9;
  266. stroke: none;
  267. }
  268. .node .code text {
  269. font-family: monospace;
  270. color: hsl(0deg 0% 74%)
  271. }
  272. .node .key rect {
  273. fill: #a1d99b;
  274. stroke: none;
  275. }
  276. .link .to-key,
  277. .join {
  278. stroke: #a1d99b;
  279. }
  280. .join {
  281. stroke-dasharray: 2,2;
  282. }
  283. .link .to-null {
  284. stroke-dasharray: .5,3.5;
  285. stroke-linecap: round;
  286. }
  287. .link .from-data {
  288. stroke: #3182bd;
  289. }
  290. .play circle {
  291. fill: #fff;
  292. stroke: #000;
  293. stroke-width: 3px;
  294. }
  295. .play:hover path {
  296. fill: #f00;
  297. }
  298. .play.mousedown circle {
  299. fill: #f00;
  300. }
  301. .play.mousedown path {
  302. fill: #fff;
  303. }
  304. .play rect {
  305. fill: none;
  306. pointer-events: all;
  307. cursor: pointer;
  308. }
  309. code span {
  310. -webkit-transition: background 250ms linear;
  311. -moz-transition: background 250ms linear;
  312. -ms-transition: background 250ms linear;
  313. -o-transition: background 250ms linear;
  314. transition: background 250ms linear;
  315. }
  316. pre.prettyprint, code.prettyprint {
  317. background-color: #222;
  318. border-radius: 8px;
  319. font-size: 15px;
  320. }
  321. pre.prettyprint {
  322. width: 90%;
  323. margin: 0.5em;
  324. padding: 1em;
  325. white-space: pre-wrap;
  326. }
  327. #return-to-top {
  328. position: fixed;
  329. bottom: 20px;
  330. right: 20px;
  331. background: rgb(0, 0, 0);
  332. background: rgba(0, 0, 0, 0.2);
  333. width: 50px;
  334. height: 50px;
  335. display: block;
  336. text-decoration: none;
  337. -webkit-border-radius: 35px;
  338. -moz-border-radius: 35px;
  339. border-radius: 35px;
  340. display: none;
  341. -webkit-transition: all 0.3s linear;
  342. -moz-transition: all 0.3s ease;
  343. -ms-transition: all 0.3s ease;
  344. -o-transition: all 0.3s ease;
  345. transition: all 0.3s ease;
  346. }
  347. #return-to-top i {
  348. color: #fff;
  349. margin: 0;
  350. position: relative;
  351. left: 16px;
  352. top: 13px;
  353. font-size: 19px;
  354. -webkit-transition: all 0.3s ease;
  355. -moz-transition: all 0.3s ease;
  356. -ms-transition: all 0.3s ease;
  357. -o-transition: all 0.3s ease;
  358. transition: all 0.3s ease;
  359. }
  360. #return-to-top:hover {
  361. background: rgba(0, 0, 0, 0.35);
  362. }
  363. #return-to-top:hover i {
  364. color: #f0f0f0;
  365. }
  366. @media print {
  367. .pagebreak {
  368. page-break-before: always;
  369. }
  370. div {
  371. page-break-inside: avoid;
  372. }
  373. pre {
  374. page-break-inside: avoid;
  375. }
  376. }
  377. .modebar{
  378. display: none !important;
  379. }