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.

841 lines
13 KiB

  1. body {
  2. margin: 0;
  3. font-family: Arial, sans-serif;
  4. font-size: 16px;
  5. background-color: #fff;
  6. line-height: 1.3em;
  7. }
  8. pre,
  9. code {
  10. font-family: Menlo, monospace;
  11. font-size: 14px;
  12. }
  13. pre {
  14. line-height: 1.4em;
  15. overflow-x: auto;
  16. }
  17. pre .comment {
  18. color: #006600;
  19. }
  20. pre .highlight,
  21. pre .highlight-comment,
  22. pre .selection-highlight,
  23. pre .selection-highlight-comment {
  24. background: #FFFF00;
  25. }
  26. pre .selection,
  27. pre .selection-comment {
  28. background: #FF9632;
  29. }
  30. pre .ln {
  31. color: #999;
  32. background: #efefef;
  33. }
  34. .ln {
  35. -webkit-user-select: none;
  36. -moz-user-select: none;
  37. -ms-user-select: none;
  38. user-select: none;
  39. }
  40. .ln::before {
  41. /* Inserting the line numbers as a ::before pseudo-element avoids making
  42. * them selectable; it's the trick Github uses as well. */
  43. content: attr(data-content);
  44. }
  45. body {
  46. color: #222;
  47. }
  48. a,
  49. .exampleHeading .text {
  50. color: #375EAB;
  51. text-decoration: none;
  52. }
  53. a:hover,
  54. .exampleHeading .text:hover {
  55. text-decoration: underline;
  56. }
  57. .article a {
  58. text-decoration: underline;
  59. }
  60. .article .title a {
  61. text-decoration: none;
  62. }
  63. .permalink {
  64. display: none;
  65. }
  66. :hover > .permalink {
  67. display: inline;
  68. }
  69. p, li {
  70. max-width: 800px;
  71. word-wrap: break-word;
  72. }
  73. p,
  74. pre,
  75. ul,
  76. ol {
  77. margin: 20px;
  78. }
  79. pre {
  80. background: #EFEFEF;
  81. padding: 10px;
  82. -webkit-border-radius: 5px;
  83. -moz-border-radius: 5px;
  84. border-radius: 5px;
  85. }
  86. h1,
  87. h2,
  88. h3,
  89. h4,
  90. .rootHeading {
  91. margin: 20px 0 20px;
  92. padding: 0;
  93. color: #375EAB;
  94. font-weight: bold;
  95. }
  96. h1 {
  97. font-size: 28px;
  98. line-height: 1;
  99. }
  100. h1 .text-muted {
  101. color:#777;
  102. }
  103. h2 {
  104. font-size: 20px;
  105. background: #E0EBF5;
  106. padding: 8px;
  107. line-height: 1.25;
  108. font-weight: normal;
  109. }
  110. h2 a {
  111. font-weight: bold;
  112. }
  113. h3 {
  114. font-size: 20px;
  115. }
  116. h3,
  117. h4 {
  118. margin: 20px 5px;
  119. }
  120. h4 {
  121. font-size: 16px;
  122. }
  123. .rootHeading {
  124. font-size: 20px;
  125. margin: 0;
  126. }
  127. dl {
  128. margin: 20px;
  129. }
  130. dd {
  131. margin: 0 0 0 20px;
  132. }
  133. dl,
  134. dd {
  135. font-size: 14px;
  136. }
  137. div#nav table td {
  138. vertical-align: top;
  139. }
  140. #pkg-index h3 {
  141. font-size: 16px;
  142. }
  143. .pkg-dir {
  144. padding: 0 10px;
  145. }
  146. .pkg-dir table {
  147. border-collapse: collapse;
  148. border-spacing: 0;
  149. }
  150. .pkg-name {
  151. padding-right: 10px;
  152. }
  153. .alert {
  154. color: #AA0000;
  155. }
  156. .top-heading {
  157. float: left;
  158. padding: 21px 0;
  159. font-size: 20px;
  160. font-weight: normal;
  161. }
  162. .top-heading a {
  163. color: #222;
  164. text-decoration: none;
  165. }
  166. div#topbar {
  167. background: #E0EBF5;
  168. height: 64px;
  169. overflow: hidden;
  170. }
  171. body {
  172. text-align: center;
  173. }
  174. div#page {
  175. width: 100%;
  176. }
  177. div#page > .container,
  178. div#topbar > .container {
  179. text-align: left;
  180. margin-left: auto;
  181. margin-right: auto;
  182. padding: 0 20px;
  183. }
  184. div#topbar > .container,
  185. div#page > .container {
  186. max-width: 950px;
  187. }
  188. div#page.wide > .container,
  189. div#topbar.wide > .container {
  190. max-width: none;
  191. }
  192. div#plusone {
  193. float: right;
  194. clear: right;
  195. margin-top: 5px;
  196. }
  197. div#footer {
  198. text-align: center;
  199. color: #666;
  200. font-size: 14px;
  201. margin: 40px 0;
  202. }
  203. div#menu > a,
  204. input#search,
  205. div#learn .buttons a,
  206. div.play .buttons a,
  207. div#blog .read a,
  208. #menu-button {
  209. padding: 10px;
  210. text-decoration: none;
  211. font-size: 16px;
  212. -webkit-border-radius: 5px;
  213. -moz-border-radius: 5px;
  214. border-radius: 5px;
  215. }
  216. div#playground .buttons a,
  217. div#menu > a,
  218. input#search,
  219. #menu-button {
  220. border: 1px solid #375EAB;
  221. }
  222. div#playground .buttons a,
  223. div#menu > a,
  224. #menu-button {
  225. color: white;
  226. background: #375EAB;
  227. }
  228. #playgroundButton.active {
  229. background: white;
  230. color: #375EAB;
  231. }
  232. a#start,
  233. div#learn .buttons a,
  234. div.play .buttons a,
  235. div#blog .read a {
  236. color: #222;
  237. border: 1px solid #375EAB;
  238. background: #E0EBF5;
  239. }
  240. .download {
  241. width: 150px;
  242. }
  243. div#menu {
  244. text-align: right;
  245. padding: 10px;
  246. white-space: nowrap;
  247. max-height: 0;
  248. -moz-transition: max-height .25s linear;
  249. transition: max-height .25s linear;
  250. width: 100%;
  251. }
  252. div#menu.menu-visible {
  253. max-height: 500px;
  254. }
  255. div#menu > a,
  256. #menu-button {
  257. margin: 10px 2px;
  258. padding: 10px;
  259. }
  260. ::-webkit-input-placeholder {
  261. color: #7f7f7f;
  262. opacity: 1;
  263. }
  264. ::placeholder {
  265. color: #7f7f7f;
  266. opacity: 1;
  267. }
  268. #menu .search-box {
  269. display: inline-flex;
  270. width: 140px;
  271. }
  272. input#search {
  273. background: white;
  274. color: #222;
  275. box-sizing: border-box;
  276. -webkit-appearance: none;
  277. border-top-right-radius: 0;
  278. border-bottom-right-radius: 0;
  279. border-right: 0;
  280. margin-right: 0;
  281. flex-grow: 1;
  282. max-width: 100%;
  283. min-width: 90px;
  284. }
  285. input#search:-moz-ui-invalid {
  286. box-shadow: unset;
  287. }
  288. input#search + button {
  289. display: inline;
  290. font-size: 1em;
  291. background-color: #375EAB;
  292. color: white;
  293. border: 1px solid #375EAB;
  294. border-top-left-radius: 0;
  295. border-top-right-radius: 5px;
  296. border-bottom-left-radius: 0;
  297. border-bottom-right-radius: 5px;
  298. margin-left: 0;
  299. cursor: pointer;
  300. }
  301. input#search + button span {
  302. display: flex;
  303. }
  304. input#search + button svg {
  305. fill: white
  306. }
  307. #menu-button {
  308. display: none;
  309. position: absolute;
  310. right: 5px;
  311. top: 0;
  312. margin-right: 5px;
  313. }
  314. #menu-button-arrow {
  315. display: inline-block;
  316. }
  317. .vertical-flip {
  318. transform: rotate(-180deg);
  319. }
  320. div.left {
  321. float: left;
  322. clear: left;
  323. margin-right: 2.5%;
  324. }
  325. div.right {
  326. float: right;
  327. clear: right;
  328. margin-left: 2.5%;
  329. }
  330. div.left,
  331. div.right {
  332. width: 45%;
  333. }
  334. div#learn,
  335. div#about {
  336. padding-top: 20px;
  337. }
  338. div#learn h2,
  339. div#about {
  340. margin: 0;
  341. }
  342. div#about {
  343. font-size: 20px;
  344. margin: 0 auto 30px;
  345. }
  346. div#gopher {
  347. background: url(/doc/gopher/frontpage.png) no-repeat;
  348. background-position: center top;
  349. height: 155px;
  350. }
  351. a#start {
  352. display: block;
  353. padding: 10px;
  354. text-align: center;
  355. text-decoration: none;
  356. -webkit-border-radius: 5px;
  357. -moz-border-radius: 5px;
  358. border-radius: 5px;
  359. }
  360. a#start .big {
  361. display: block;
  362. font-weight: bold;
  363. font-size: 20px;
  364. }
  365. a#start .desc {
  366. display: block;
  367. font-size: 14px;
  368. font-weight: normal;
  369. margin-top: 5px;
  370. }
  371. div#learn .popout {
  372. float: right;
  373. display: block;
  374. cursor: pointer;
  375. font-size: 12px;
  376. background: url(/doc/share.png) no-repeat;
  377. background-position: right top;
  378. padding: 5px 27px;
  379. }
  380. div#learn pre,
  381. div#learn textarea {
  382. padding: 0;
  383. margin: 0;
  384. font-family: Menlo, monospace;
  385. font-size: 14px;
  386. }
  387. div#learn .input {
  388. padding: 10px;
  389. margin-top: 10px;
  390. height: 150px;
  391. -webkit-border-top-left-radius: 5px;
  392. -webkit-border-top-right-radius: 5px;
  393. -moz-border-radius-topleft: 5px;
  394. -moz-border-radius-topright: 5px;
  395. border-top-left-radius: 5px;
  396. border-top-right-radius: 5px;
  397. }
  398. div#learn .input textarea {
  399. width: 100%;
  400. height: 100%;
  401. border: none;
  402. outline: none;
  403. resize: none;
  404. }
  405. div#learn .output {
  406. border-top: none !important;
  407. padding: 10px;
  408. height: 59px;
  409. overflow: auto;
  410. -webkit-border-bottom-right-radius: 5px;
  411. -webkit-border-bottom-left-radius: 5px;
  412. -moz-border-radius-bottomright: 5px;
  413. -moz-border-radius-bottomleft: 5px;
  414. border-bottom-right-radius: 5px;
  415. border-bottom-left-radius: 5px;
  416. }
  417. div#learn .output pre {
  418. padding: 0;
  419. -webkit-border-radius: 0;
  420. -moz-border-radius: 0;
  421. border-radius: 0;
  422. }
  423. div#learn .input,
  424. div#learn .input textarea,
  425. div#learn .output,
  426. div#learn .output pre {
  427. background: #FFFFD8;
  428. }
  429. div#learn .input,
  430. div#learn .output {
  431. border: 1px solid #375EAB;
  432. }
  433. div#learn .buttons {
  434. float: right;
  435. padding: 20px 0 10px 0;
  436. text-align: right;
  437. }
  438. div#learn .buttons a {
  439. height: 16px;
  440. margin-left: 5px;
  441. padding: 10px;
  442. }
  443. div#learn .toys {
  444. margin-top: 8px;
  445. }
  446. div#learn .toys select {
  447. border: 1px solid #375EAB;
  448. margin: 0;
  449. }
  450. div#learn .output .exit {
  451. display: none;
  452. }
  453. div#video {
  454. max-width: 100%;
  455. }
  456. div#blog,
  457. div#video {
  458. margin-top: 40px;
  459. }
  460. div#blog > a,
  461. div#blog > div,
  462. div#blog > h2,
  463. div#video > a,
  464. div#video > div,
  465. div#video > h2 {
  466. margin-bottom: 10px;
  467. }
  468. div#blog .title,
  469. div#video .title {
  470. display: block;
  471. font-size: 20px;
  472. }
  473. div#blog .when {
  474. color: #666;
  475. font-size: 14px;
  476. }
  477. div#blog .read {
  478. text-align: right;
  479. }
  480. .toggleButton { cursor: pointer; }
  481. .toggle > .collapsed { display: block; }
  482. .toggle > .expanded { display: none; }
  483. .toggleVisible > .collapsed { display: none; }
  484. .toggleVisible > .expanded { display: block; }
  485. table.codetable { margin-left: auto; margin-right: auto; border-style: none; }
  486. table.codetable td { padding-right: 10px; }
  487. hr { border-style: none; border-top: 1px solid black; }
  488. img.gopher {
  489. float: right;
  490. margin-left: 10px;
  491. margin-bottom: 10px;
  492. z-index: -1;
  493. }
  494. h2 { clear: right; }
  495. /* example and drop-down playground */
  496. div.play {
  497. padding: 0 20px 40px 20px;
  498. }
  499. div.play pre,
  500. div.play textarea,
  501. div.play .lines {
  502. padding: 0;
  503. margin: 0;
  504. font-family: Menlo, monospace;
  505. font-size: 14px;
  506. }
  507. div.play .input {
  508. padding: 10px;
  509. margin-top: 10px;
  510. -webkit-border-top-left-radius: 5px;
  511. -webkit-border-top-right-radius: 5px;
  512. -moz-border-radius-topleft: 5px;
  513. -moz-border-radius-topright: 5px;
  514. border-top-left-radius: 5px;
  515. border-top-right-radius: 5px;
  516. overflow: hidden;
  517. }
  518. div.play .input textarea {
  519. width: 100%;
  520. height: 100%;
  521. border: none;
  522. outline: none;
  523. resize: none;
  524. overflow: hidden;
  525. }
  526. div#playground .input textarea {
  527. overflow: auto;
  528. resize: auto;
  529. }
  530. div.play .output {
  531. border-top: none !important;
  532. padding: 10px;
  533. max-height: 200px;
  534. overflow: auto;
  535. -webkit-border-bottom-right-radius: 5px;
  536. -webkit-border-bottom-left-radius: 5px;
  537. -moz-border-radius-bottomright: 5px;
  538. -moz-border-radius-bottomleft: 5px;
  539. border-bottom-right-radius: 5px;
  540. border-bottom-left-radius: 5px;
  541. }
  542. div.play .output pre {
  543. padding: 0;
  544. -webkit-border-radius: 0;
  545. -moz-border-radius: 0;
  546. border-radius: 0;
  547. }
  548. div.play .input,
  549. div.play .input textarea,
  550. div.play .output,
  551. div.play .output pre {
  552. background: #FFFFD8;
  553. }
  554. div.play .input,
  555. div.play .output {
  556. border: 1px solid #375EAB;
  557. }
  558. div.play .buttons {
  559. float: right;
  560. padding: 20px 0 10px 0;
  561. text-align: right;
  562. }
  563. div.play .buttons a {
  564. height: 16px;
  565. margin-left: 5px;
  566. padding: 10px;
  567. cursor: pointer;
  568. }
  569. .output .stderr {
  570. color: #933;
  571. }
  572. .output .system {
  573. color: #999;
  574. }
  575. /* drop-down playground */
  576. #playgroundButton,
  577. div#playground {
  578. /* start hidden; revealed by javascript */
  579. display: none;
  580. }
  581. div#playground {
  582. position: absolute;
  583. top: 63px;
  584. right: 20px;
  585. padding: 0 10px 10px 10px;
  586. z-index: 1;
  587. text-align: left;
  588. background: #E0EBF5;
  589. border: 1px solid #B0BBC5;
  590. border-top: none;
  591. -webkit-border-bottom-left-radius: 5px;
  592. -webkit-border-bottom-right-radius: 5px;
  593. -moz-border-radius-bottomleft: 5px;
  594. -moz-border-radius-bottomright: 5px;
  595. border-bottom-left-radius: 5px;
  596. border-bottom-right-radius: 5px;
  597. }
  598. div#playground .code {
  599. width: 520px;
  600. height: 200px;
  601. }
  602. div#playground .output {
  603. height: 100px;
  604. }
  605. /* Inline runnable snippets (play.js/initPlayground) */
  606. #content .code pre, #content .playground pre, #content .output pre {
  607. margin: 0;
  608. padding: 0;
  609. background: none;
  610. border: none;
  611. outline: 0px solid transparent;
  612. overflow: auto;
  613. }
  614. #content .playground .number, #content .code .number {
  615. color: #999;
  616. }
  617. #content .code, #content .playground, #content .output {
  618. width: auto;
  619. margin: 20px;
  620. padding: 10px;
  621. -webkit-border-radius: 5px;
  622. -moz-border-radius: 5px;
  623. border-radius: 5px;
  624. }
  625. #content .code, #content .playground {
  626. background: #e9e9e9;
  627. }
  628. #content .output {
  629. background: #202020;
  630. }
  631. #content .output .stdout, #content .output pre {
  632. color: #e6e6e6;
  633. }
  634. #content .output .stderr, #content .output .error {
  635. color: rgb(244, 74, 63);
  636. }
  637. #content .output .system, #content .output .exit {
  638. color: rgb(255, 209, 77)
  639. }
  640. #content .buttons {
  641. position: relative;
  642. float: right;
  643. top: -50px;
  644. right: 30px;
  645. }
  646. #content .output .buttons {
  647. top: -60px;
  648. right: 0;
  649. height: 0;
  650. }
  651. #content .buttons .kill {
  652. display: none;
  653. visibility: hidden;
  654. }
  655. a.error {
  656. font-weight: bold;
  657. color: white;
  658. background-color: darkred;
  659. border-bottom-left-radius: 4px;
  660. border-bottom-right-radius: 4px;
  661. border-top-left-radius: 4px;
  662. border-top-right-radius: 4px;
  663. padding: 2px 4px 2px 4px; /* TRBL */
  664. }
  665. #heading-narrow {
  666. display: none;
  667. }
  668. .downloading {
  669. background: #F9F9BE;
  670. padding: 10px;
  671. text-align: center;
  672. border-radius: 5px;
  673. }
  674. @media (max-width: 930px) {
  675. #heading-wide {
  676. display: none;
  677. }
  678. #heading-narrow {
  679. display: block;
  680. }
  681. }
  682. @media (max-width: 760px) {
  683. .container .left,
  684. .container .right {
  685. width: auto;
  686. float: none;
  687. }
  688. div#about {
  689. max-width: 500px;
  690. text-align: center;
  691. }
  692. }
  693. @media (min-width: 700px) and (max-width: 1000px) {
  694. div#menu > a {
  695. margin: 5px 0;
  696. font-size: 14px;
  697. }
  698. input#search {
  699. font-size: 14px;
  700. }
  701. }
  702. @media (max-width: 700px) {
  703. body {
  704. font-size: 15px;
  705. }
  706. pre,
  707. code {
  708. font-size: 13px;
  709. }
  710. div#page > .container {
  711. padding: 0 10px;
  712. }
  713. div#topbar {
  714. height: auto;
  715. padding: 10px;
  716. }
  717. div#topbar > .container {
  718. padding: 0;
  719. }
  720. #heading-wide {
  721. display: block;
  722. }
  723. #heading-narrow {
  724. display: none;
  725. }
  726. .top-heading {
  727. float: none;
  728. display: inline-block;
  729. padding: 12px;
  730. }
  731. div#menu {
  732. padding: 0;
  733. min-width: 0;
  734. text-align: left;
  735. float: left;
  736. }
  737. div#menu > a {
  738. display: block;
  739. margin-left: 0;
  740. margin-right: 0;
  741. }
  742. #menu .search-box {
  743. display: flex;
  744. width: 100%;
  745. }
  746. #menu-button {
  747. display: inline-block;
  748. }
  749. p,
  750. pre,
  751. ul,
  752. ol {
  753. margin: 10px;
  754. }
  755. .pkg-synopsis {
  756. display: none;
  757. }
  758. img.gopher {
  759. display: none;
  760. }
  761. }
  762. @media (max-width: 480px) {
  763. #heading-wide {
  764. display: none;
  765. }
  766. #heading-narrow {
  767. display: block;
  768. }
  769. }
  770. @media print {
  771. pre {
  772. background: #FFF;
  773. border: 1px solid #BBB;
  774. white-space: pre-wrap;
  775. }
  776. }