| body { |
| margin: 0; |
| font-family: Arial, sans-serif; |
| background-color: #fff; |
| line-height: 1.3; |
| text-align: center; |
| color: #222; |
| } |
| textarea { |
| /* Inherit text color from body avoiding illegible text in the case where the |
| * user has inverted the browsers custom text and background colors. */ |
| color: inherit; |
| } |
| pre, |
| code { |
| font-family: Menlo, monospace; |
| font-size: 0.875rem; |
| } |
| pre { |
| line-height: 1.4; |
| overflow-x: auto; |
| } |
| pre .comment { |
| color: #006600; |
| } |
| pre .highlight, |
| pre .highlight-comment, |
| pre .selection-highlight, |
| pre .selection-highlight-comment { |
| background: #ffff00; |
| } |
| pre .selection, |
| pre .selection-comment { |
| background: #ff9632; |
| } |
| pre .ln { |
| color: #999; |
| background: #efefef; |
| } |
| .ln { |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| |
| /* Ensure 8 characters in the document - which due to floating |
| * point rendering issues, might have a width of less than 1 each - are 8 |
| * characters wide, so a tab in the 9th position indents properly. See |
| * https://github.com/webcompat/web-bugs/issues/17530#issuecomment-402675091 |
| * for more information. */ |
| display: inline-block; |
| width: 8ch; |
| } |
| |
| .search-nav { |
| margin-left: 1.25rem; |
| font-size: 0.875rem; |
| column-gap: 1.25rem; |
| column-fill: auto; |
| column-width: 14rem; |
| } |
| |
| .search-nav .indent { |
| margin-left: 1.25rem; |
| } |
| |
| a, |
| .exampleHeading .text, |
| .expandAll { |
| color: #375eab; |
| text-decoration: none; |
| } |
| a:hover, |
| .exampleHeading .text:hover, |
| .expandAll:hover { |
| text-decoration: underline; |
| } |
| .article a { |
| text-decoration: underline; |
| } |
| .article .title a { |
| text-decoration: none; |
| } |
| |
| .permalink { |
| display: none; |
| } |
| :hover > .permalink { |
| display: inline; |
| } |
| |
| p, |
| li { |
| max-width: 50rem; |
| word-wrap: break-word; |
| } |
| p, |
| pre, |
| ul, |
| ol { |
| margin: 1.25rem; |
| } |
| pre { |
| background: #efefef; |
| padding: 0.625rem; |
| border-radius: 0.3125rem; |
| } |
| |
| h1, |
| h2, |
| h3, |
| h4, |
| .rootHeading { |
| margin: 1.25rem 0 1.25rem; |
| padding: 0; |
| color: #375eab; |
| font-weight: bold; |
| } |
| h1 { |
| font-size: 1.75rem; |
| line-height: 1; |
| } |
| h1 .text-muted { |
| color: #777; |
| } |
| h2 { |
| font-size: 1.25rem; |
| background: #e0ebf5; |
| padding: 0.5rem; |
| line-height: 1.25; |
| font-weight: normal; |
| overflow: auto; |
| overflow-wrap: break-word; |
| } |
| h2 a { |
| font-weight: bold; |
| } |
| h3 { |
| font-size: 1.25rem; |
| line-height: 1.25; |
| overflow: auto; |
| overflow-wrap: break-word; |
| } |
| h3, |
| h4 { |
| margin: 1.25rem 0.3125rem; |
| } |
| h4 { |
| font-size: 1rem; |
| } |
| .rootHeading { |
| font-size: 1.25rem; |
| margin: 0; |
| } |
| |
| h2 > span, |
| h3 > span { |
| float: right; |
| margin: 0 25px 0 0; |
| font-weight: normal; |
| color: #5279c7; |
| } |
| |
| dl { |
| margin: 1.25rem; |
| } |
| dd { |
| margin: 0 0 0 1.25rem; |
| } |
| dl, |
| dd { |
| font-size: 0.875rem; |
| } |
| div#nav table td { |
| vertical-align: top; |
| } |
| |
| #pkg-index h3 { |
| font-size: 1rem; |
| } |
| .pkg-dir { |
| padding: 0 0.625rem; |
| } |
| .pkg-dir table { |
| border-collapse: collapse; |
| border-spacing: 0; |
| } |
| .pkg-name { |
| padding-right: 0.625rem; |
| } |
| .alert { |
| color: #aa0000; |
| } |
| |
| .top-heading { |
| float: left; |
| padding: 1.313rem 0; |
| font-size: 1.25rem; |
| font-weight: normal; |
| } |
| .top-heading a { |
| color: #222; |
| text-decoration: none; |
| } |
| |
| #pkg-examples h3 { |
| float: left; |
| } |
| |
| #pkg-examples dl { |
| clear: both; |
| } |
| |
| .expandAll { |
| cursor: pointer; |
| float: left; |
| margin: 1.25rem 0; |
| } |
| |
| div#topbar { |
| background: #e0ebf5; |
| height: 4rem; |
| overflow: hidden; |
| } |
| |
| div#page { |
| width: 100%; |
| } |
| div#page > .container, |
| div#topbar > .container { |
| text-align: left; |
| margin-left: auto; |
| margin-right: auto; |
| padding: 0 1.25rem; |
| } |
| div#topbar > .container, |
| div#page > .container { |
| max-width: 59.38rem; |
| } |
| div#page.wide > .container, |
| div#topbar.wide > .container { |
| max-width: none; |
| } |
| div#plusone { |
| float: right; |
| clear: right; |
| margin-top: 0.3125rem; |
| } |
| |
| div#footer { |
| text-align: center; |
| color: #666; |
| font-size: 0.875rem; |
| margin: 2.5rem 0; |
| } |
| |
| div#menu > a, |
| input#search, |
| div#learn .buttons a, |
| div.play .buttons a, |
| div#blog .read a, |
| #menu-button { |
| padding: 0.625rem; |
| |
| text-decoration: none; |
| font-size: 1rem; |
| border-radius: 0.3125rem; |
| } |
| div#playground .buttons a, |
| div#menu > a, |
| input#search, |
| #menu-button { |
| border: 0.0625rem solid #375eab; |
| } |
| div#playground .buttons a, |
| div#menu > a, |
| #menu-button { |
| color: white; |
| background: #375eab; |
| } |
| #playgroundButton.active { |
| background: white; |
| color: #375eab; |
| } |
| a#start, |
| div#learn .buttons a, |
| div.play .buttons a, |
| div#blog .read a { |
| color: #222; |
| border: 0.0625rem solid #375eab; |
| background: #e0ebf5; |
| } |
| .download { |
| width: 9.375rem; |
| } |
| |
| div#menu { |
| text-align: right; |
| padding: 0.625rem; |
| white-space: nowrap; |
| max-height: 0; |
| -moz-transition: max-height 0.25s linear; |
| transition: max-height 0.25s linear; |
| width: 100%; |
| } |
| div#menu.menu-visible { |
| max-height: 31.25rem; |
| } |
| div#menu > a, |
| #menu-button { |
| margin: 0.625rem 0.125rem; |
| padding: 0.625rem; |
| } |
| ::-webkit-input-placeholder { |
| color: #7f7f7f; |
| opacity: 1; |
| } |
| ::placeholder { |
| color: #7f7f7f; |
| opacity: 1; |
| } |
| #menu .search-box { |
| display: inline-flex; |
| width: 8.75rem; |
| } |
| input#search { |
| background: white; |
| color: #222; |
| box-sizing: border-box; |
| -webkit-appearance: none; |
| border-top-right-radius: 0; |
| border-bottom-right-radius: 0; |
| border-right: 0; |
| margin-right: 0; |
| flex-grow: 1; |
| max-width: 100%; |
| min-width: 5.625rem; |
| } |
| input#search:-webkit-search-decoration { |
| -webkit-appearance: none; |
| } |
| input#search:-moz-ui-invalid { |
| box-shadow: unset; |
| } |
| input#search + button { |
| display: inline; |
| font-size: 1em; |
| background-color: #375eab; |
| color: white; |
| border: 0.0625rem solid #375eab; |
| border-top-left-radius: 0; |
| border-top-right-radius: 0.3125rem; |
| border-bottom-left-radius: 0; |
| border-bottom-right-radius: 0.3125rem; |
| margin-left: 0; |
| cursor: pointer; |
| } |
| input#search + button span { |
| display: flex; |
| } |
| input#search + button svg { |
| fill: white; |
| } |
| |
| #menu-button { |
| display: none; |
| position: absolute; |
| right: 0.3125rem; |
| top: 0; |
| margin-right: 0.3125rem; |
| } |
| #menu-button-arrow { |
| display: inline-block; |
| } |
| .vertical-flip { |
| transform: rotate(-180deg); |
| } |
| |
| div.left { |
| float: left; |
| clear: left; |
| margin-right: 2.5%; |
| } |
| div.right { |
| float: right; |
| clear: right; |
| margin-left: 2.5%; |
| } |
| div.left, |
| div.right { |
| width: 45%; |
| } |
| |
| div#learn, |
| div#about { |
| padding-top: 1.25rem; |
| } |
| div#learn h2, |
| div#about { |
| margin: 0; |
| } |
| div#about { |
| font-size: 1.25rem; |
| margin: 0 auto 1.875rem; |
| } |
| div#gopher { |
| background: url(/doc/gopher/frontpage.png) no-repeat; |
| background-position: center top; |
| height: 9.688rem; |
| max-height: 200px; /* Setting in px to prevent the gopher from blowing up in very high default font-sizes */ |
| } |
| a#start { |
| display: block; |
| padding: 0.625rem; |
| |
| text-align: center; |
| text-decoration: none; |
| border-radius: 0.3125rem; |
| } |
| a#start .big { |
| display: block; |
| font-weight: bold; |
| font-size: 1.25rem; |
| } |
| a#start .desc { |
| display: block; |
| font-size: 0.875rem; |
| font-weight: normal; |
| margin-top: 0.3125rem; |
| } |
| |
| div#learn .popout { |
| float: right; |
| display: block; |
| cursor: pointer; |
| font-size: 0.75rem; |
| background: url(/doc/share.png) no-repeat; |
| background-position: right center; |
| padding: 0.375rem 1.688rem; |
| } |
| div#learn pre, |
| div#learn textarea { |
| padding: 0; |
| margin: 0; |
| font-family: Menlo, monospace; |
| font-size: 0.875rem; |
| } |
| div#learn .input { |
| padding: 0.625rem; |
| margin-top: 0.625rem; |
| height: 9.375rem; |
| |
| border-top-left-radius: 0.3125rem; |
| border-top-right-radius: 0.3125rem; |
| } |
| div#learn .input textarea { |
| width: 100%; |
| height: 100%; |
| border: none; |
| outline: none; |
| resize: none; |
| } |
| div#learn .output { |
| border-top: none !important; |
| |
| padding: 0.625rem; |
| height: 3.688rem; |
| overflow: auto; |
| |
| border-bottom-right-radius: 0.3125rem; |
| border-bottom-left-radius: 0.3125rem; |
| } |
| div#learn .output pre { |
| padding: 0; |
| border-radius: 0; |
| } |
| div#learn .input, |
| div#learn .input textarea, |
| div#learn .output, |
| div#learn .output pre { |
| background: #ffffd8; |
| } |
| div#learn .input, |
| div#learn .output { |
| border: 0.0625rem solid #375eab; |
| } |
| div#learn .buttons { |
| float: right; |
| padding: 1.25rem 0 0.625rem 0; |
| text-align: right; |
| } |
| div#learn .buttons a { |
| height: 1rem; |
| margin-left: 0.3125rem; |
| padding: 0.625rem; |
| } |
| div#learn .toys { |
| margin-top: 0.5rem; |
| } |
| div#learn .toys select { |
| font-size: 0.875rem; |
| border: 0.0625rem solid #375eab; |
| margin: 0; |
| } |
| div#learn .output .exit { |
| display: none; |
| } |
| |
| div#video { |
| max-width: 100%; |
| } |
| div#blog, |
| div#video { |
| margin-top: 2.5rem; |
| } |
| div#blog > a, |
| div#blog > div, |
| div#blog > h2, |
| div#video > a, |
| div#video > div, |
| div#video > h2 { |
| margin-bottom: 0.625rem; |
| } |
| div#blog .title, |
| div#video .title { |
| display: block; |
| font-size: 1.25rem; |
| } |
| div#blog .when { |
| color: #666; |
| font-size: 0.875rem; |
| } |
| div#blog .read { |
| text-align: right; |
| } |
| |
| @supports (--c: 0) { |
| [style*='--aspect-ratio-padding:'] { |
| position: relative; |
| overflow: hidden; |
| padding-top: var(--aspect-ratio-padding); |
| } |
| |
| [style*='--aspect-ratio-padding:'] > * { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| } |
| } |
| |
| .toggleButton { |
| cursor: pointer; |
| } |
| .toggle > .collapsed { |
| display: block; |
| } |
| .toggle > .expanded { |
| display: none; |
| } |
| .toggleVisible > .collapsed { |
| display: none; |
| } |
| .toggleVisible > .expanded { |
| display: block; |
| } |
| |
| table.codetable { |
| margin-left: auto; |
| margin-right: auto; |
| border-style: none; |
| } |
| table.codetable td { |
| padding-right: 0.625rem; |
| } |
| hr { |
| border-style: none; |
| border-top: 0.0625rem solid black; |
| } |
| |
| img.gopher { |
| float: right; |
| margin-left: 0.625rem; |
| margin-bottom: 0.625rem; |
| z-index: -1; |
| } |
| h2 { |
| clear: right; |
| } |
| |
| /* example and drop-down playground */ |
| div.play { |
| padding: 0 1.25rem 2.5rem 1.25rem; |
| } |
| div.play pre, |
| div.play textarea, |
| div.play .lines { |
| padding: 0; |
| margin: 0; |
| font-family: Menlo, monospace; |
| font-size: 0.875rem; |
| } |
| div.play .input { |
| padding: 0.625rem; |
| margin-top: 0.625rem; |
| |
| border-top-left-radius: 0.3125rem; |
| border-top-right-radius: 0.3125rem; |
| |
| overflow: hidden; |
| } |
| div.play .input textarea { |
| width: 100%; |
| height: 100%; |
| border: none; |
| outline: none; |
| resize: none; |
| |
| overflow: hidden; |
| } |
| div#playground .input textarea { |
| overflow: auto; |
| resize: auto; |
| } |
| div.play .output { |
| border-top: none !important; |
| |
| padding: 0.625rem; |
| max-height: 12.5rem; |
| overflow: auto; |
| |
| border-bottom-right-radius: 0.3125rem; |
| border-bottom-left-radius: 0.3125rem; |
| } |
| div.play .output pre { |
| padding: 0; |
| border-radius: 0; |
| } |
| div.play .input, |
| div.play .input textarea, |
| div.play .output, |
| div.play .output pre { |
| background: #ffffd8; |
| } |
| div.play .input, |
| div.play .output { |
| border: 0.0625rem solid #375eab; |
| } |
| div.play .buttons { |
| float: right; |
| padding: 1.25rem 0 0.625rem 0; |
| text-align: right; |
| } |
| div.play .buttons a { |
| height: 1rem; |
| margin-left: 0.3125rem; |
| padding: 0.625rem; |
| cursor: pointer; |
| } |
| .output .stderr { |
| color: #933; |
| } |
| .output .system { |
| color: #999; |
| } |
| |
| /* drop-down playground */ |
| div#playground { |
| /* start hidden; revealed by javascript */ |
| display: none; |
| } |
| div#playground { |
| position: absolute; |
| top: 3.938rem; |
| right: 1.25rem; |
| padding: 0 0.625rem 0.625rem 0.625rem; |
| z-index: 1; |
| text-align: left; |
| background: #e0ebf5; |
| |
| border: 0.0625rem solid #b0bbc5; |
| border-top: none; |
| |
| border-bottom-left-radius: 0.3125rem; |
| border-bottom-right-radius: 0.3125rem; |
| } |
| div#playground .code { |
| width: 32.5rem; |
| height: 12.5rem; |
| } |
| div#playground .output { |
| height: 6.25rem; |
| } |
| |
| /* Inline runnable snippets (play.js/initPlayground) */ |
| #content .code pre, |
| #content .playground pre, |
| #content .output pre { |
| margin: 0; |
| padding: 0; |
| background: none; |
| border: none; |
| outline: 0 solid transparent; |
| overflow: auto; |
| } |
| #content .playground .number, |
| #content .code .number { |
| color: #999; |
| } |
| #content .code, |
| #content .playground, |
| #content .output { |
| width: auto; |
| margin: 1.25rem; |
| padding: 0.625rem; |
| border-radius: 0.3125rem; |
| } |
| #content .code, |
| #content .playground { |
| background: #e9e9e9; |
| } |
| #content .output { |
| background: #202020; |
| } |
| #content .output .stdout, |
| #content .output pre { |
| color: #e6e6e6; |
| } |
| #content .output .stderr, |
| #content .output .error { |
| color: rgb(244, 74, 63); |
| } |
| #content .output .system, |
| #content .output .exit { |
| color: rgb(255, 209, 77); |
| } |
| #content .buttons { |
| position: relative; |
| float: right; |
| top: -3.125rem; |
| right: 1.875rem; |
| } |
| #content .output .buttons { |
| top: -3.75rem; |
| right: 0; |
| height: 0; |
| } |
| #content .buttons .kill { |
| display: none; |
| visibility: hidden; |
| } |
| a.error { |
| font-weight: bold; |
| color: white; |
| background-color: darkred; |
| border-bottom-left-radius: 0.25rem; |
| border-bottom-right-radius: 0.25rem; |
| border-top-left-radius: 0.25rem; |
| border-top-right-radius: 0.25rem; |
| padding: 0.125rem 0.25rem 0.125rem 0.25rem; /* TRBL */ |
| } |
| |
| #heading-narrow { |
| display: none; |
| } |
| |
| .downloading { |
| background: #f9f9be; |
| padding: 0.625rem; |
| text-align: center; |
| border-radius: 0.3125rem; |
| } |
| |
| @media (max-width: 58.125em) { |
| #heading-wide { |
| display: none; |
| } |
| #heading-narrow { |
| display: block; |
| } |
| } |
| |
| @media (max-width: 47.5em) { |
| .container .left, |
| .container .right { |
| width: auto; |
| float: none; |
| } |
| |
| div#about { |
| max-width: 31.25rem; |
| text-align: center; |
| } |
| } |
| |
| @media (min-width: 43.75em) and (max-width: 62.5em) { |
| div#menu > a { |
| margin: 0.3125rem 0; |
| font-size: 0.875rem; |
| } |
| |
| input#search { |
| font-size: 0.875rem; |
| } |
| } |
| |
| @media (max-width: 43.75em) { |
| body { |
| font-size: 0.9375rem; |
| } |
| |
| div#playground { |
| left: 0; |
| right: 0; |
| } |
| |
| pre, |
| code { |
| font-size: 0.866rem; |
| } |
| |
| div#page > .container { |
| padding: 0 0.625rem; |
| } |
| |
| div#topbar { |
| height: auto; |
| padding: 0.625rem; |
| } |
| |
| div#topbar > .container { |
| padding: 0; |
| } |
| |
| #heading-wide { |
| display: block; |
| } |
| #heading-narrow { |
| display: none; |
| } |
| |
| .top-heading { |
| float: none; |
| display: inline-block; |
| padding: 0.75rem; |
| } |
| |
| div#menu { |
| padding: 0; |
| min-width: 0; |
| text-align: left; |
| float: left; |
| } |
| |
| div#menu > a { |
| display: block; |
| margin-left: 0; |
| margin-right: 0; |
| } |
| |
| #menu .search-box { |
| display: flex; |
| width: 100%; |
| } |
| |
| #menu-button { |
| display: inline-block; |
| } |
| |
| p, |
| pre, |
| ul, |
| ol { |
| margin: 0.625rem; |
| } |
| |
| .pkg-synopsis { |
| display: none; |
| } |
| |
| img.gopher { |
| display: none; |
| } |
| } |
| |
| @media (max-width: 30em) { |
| #heading-wide { |
| display: none; |
| } |
| #heading-narrow { |
| display: block; |
| } |
| } |
| |
| @media print { |
| pre { |
| background: #fff; |
| border: 0.0625rem solid #bbb; |
| white-space: pre-wrap; |
| } |
| } |
