| body { |
| background-color: #fff; |
| color: #3e4042; |
| font-family: Roboto, Arial, sans-serif; |
| line-height: 1.3; |
| margin: 0; |
| text-align: center; |
| } |
| .Note { |
| /* For styling "Note" sections. */ |
| background-color: rgb(224, 235, 245); |
| font-size: 0.875rem; |
| margin: 1.25rem; |
| max-width: 50rem; |
| padding: 0.5rem 0.5rem 0.5rem 0.625rem; |
| } |
| /* Tabs */ |
| .TabSection { |
| background: #fff; |
| border: 0.0625rem solid #dadce0; |
| border-radius: 0.3125rem; |
| box-shadow: none; |
| max-width: 50rem; |
| } |
| .TabSection-tabList { |
| flex-shrink: 0; |
| position: relative; |
| border-bottom: 0.0625rem solid #dadce0; |
| } |
| .TabSection-tab { |
| background: #fff; |
| border: none; |
| line-height: 3rem; |
| padding: 0 1.125rem; |
| position: relative; |
| } |
| .TabSection-tab[aria-selected='true'] { |
| outline: 0; |
| background-color: #e0ebf5; |
| } |
| .TabSection-tab:focus { |
| outline: 0; |
| background-color: #e0ebf5; |
| } |
| .TabSection-tabPanel { |
| font-size: 0.875rem; |
| } |
| /* Tutorial previous and next links */ |
| .Navigation { |
| font-size: 0.875rem; |
| } |
| .Navigation-prev { |
| float: left; |
| font-weight: bold; |
| } |
| .Navigation-next { |
| float: right; |
| font-weight: bold; |
| } |
| /* Table in doc topics. */ |
| .DocTable { |
| border-collapse: collapse; |
| font-size: 0.875rem; |
| margin: 1.25rem; |
| max-width: 50rem; |
| } |
| .DocTable-row { |
| border-bottom: 0.0625rem solid #dadce0; |
| height: 3rem; |
| vertical-align: middle; |
| } |
| .DocTable-head { |
| background: #e8eaed; |
| border-bottom: 0.0625rem solid #dadce0; |
| border-top: 0.0625rem solid #dadce0; |
| height: 3rem; |
| } |
| .DocTable-cell { |
| padding: 0rem 0.4375rem; |
| } |
| .DocTable-row--highlighted { |
| background: #f0f0f0; |
| border-bottom: 0.0625rem solid #dadce0; |
| height: 3rem; |
| } |
| 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; |
| } |
| code { |
| /* Reduce spacing between words in code inline with text. Monospace font |
| * spaces tend to be wider than proportional font spaces. */ |
| word-spacing: -0.3em; |
| } |
| 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; |
| } |
| pre ins { |
| /* For styling highlighted code in examples. */ |
| color: rgb(0, 125, 156); |
| font-weight: bold; |
| text-decoration: none; |
| } |
| .ln { |
| 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: #007d9c; |
| 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 { |
| margin: 1.25rem 0 1.25rem; |
| padding: 0; |
| color: #202224; |
| font-family: 'Work Sans', sans-serif; |
| font-weight: 600; |
| } |
| 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-wrap: break-word; |
| } |
| h2 a { |
| font-weight: bold; |
| } |
| h3 { |
| font-size: 1.25rem; |
| line-height: 1.25; |
| overflow-wrap: break-word; |
| } |
| h3, |
| h4 { |
| margin: 1.25rem 0.3125rem; |
| } |
| h4 { |
| font-size: 1rem; |
| } |
| 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; |
| } |
| .ModTable { |
| border-collapse: collapse; |
| margin: 1.25rem; |
| max-width: 50rem; |
| } |
| .ModTable code { |
| white-space: nowrap; |
| } |
| .ModTable td, |
| .ModTable th { |
| border: 1px solid #a9a9a9; |
| padding: 1rem; |
| vertical-align: top; |
| } |
| .ModTable td p { |
| margin: 0 0 1rem 0; |
| } |
| .ModTable td p:last-child { |
| margin-bottom: 0; |
| } |
| #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; |
| } |
| #pkg-examples h3 { |
| float: left; |
| } |
| #pkg-examples dl { |
| clear: both; |
| } |
| .expandAll { |
| cursor: pointer; |
| float: left; |
| margin: 1.25rem 0; |
| } |
| .Site { |
| display: flex; |
| flex-direction: column; |
| min-height: 100vh; |
| } |
| .Site-content { |
| flex: 1; |
| } |
| #page { |
| width: 100%; |
| } |
| #page > .container, |
| .Header-nav { |
| text-align: left; |
| margin-left: auto; |
| margin-right: auto; |
| padding: 0 1.25rem; |
| } |
| #page > .container, |
| .Header-nav, |
| .Footer { |
| max-width: 59.38rem; |
| } |
| #page.wide > .container, |
| .Header-nav--wide, |
| .Footer--wide { |
| max-width: none; |
| } |
| div#playground .buttons a { |
| background: #375eab; |
| border: 0.0625rem solid #757575; |
| color: white; |
| } |
| /* Style download button on doc/install page */ |
| a#start { |
| background: #e0ebf5; |
| border: 0.0625rem solid #375eab; |
| border-radius: 0.3125rem; |
| color: #222; |
| display: block; |
| padding: 0.625rem; |
| text-align: center; |
| text-decoration: none; |
| } |
| a#start .big { |
| display: block; |
| font-size: 1.25rem; |
| font-weight: bold; |
| } |
| a#start .desc { |
| display: block; |
| font-size: 0.875rem; |
| font-weight: normal; |
| margin-top: 0.3125rem; |
| } |
| .download { |
| width: 9.375rem; |
| } |
| ::-webkit-input-placeholder { |
| color: #7f7f7f; |
| opacity: 1; |
| } |
| ::placeholder { |
| color: #7f7f7f; |
| opacity: 1; |
| } |
| .Header { |
| align-items: center; |
| box-sizing: border-box; |
| display: flex; |
| font-size: 0.875rem; |
| justify-content: space-between; |
| padding: 1.375rem 0; |
| } |
| .Header.is-active { |
| background-color: #f7f9fa; |
| } |
| .Header-banner { |
| display: none; |
| } |
| .Header-logo { |
| height: 2rem; |
| width: 5.125rem; |
| } |
| .Header-nav { |
| align-items: center; |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: space-between; |
| width: 100%; |
| } |
| .Header-menuButton { |
| background-color: transparent; |
| border: none; |
| box-sizing: content-box; |
| cursor: pointer; |
| display: inline-block; |
| height: 1.313rem; |
| padding: 0.375rem; |
| position: relative; |
| vertical-align: middle; |
| width: 1.313rem; |
| } |
| .Header-menuButtonInner { |
| position: relative; |
| } |
| .Header-menuButton::after, |
| .Header-menuButtonInner, |
| .Header-menuButtonInner::before, |
| .Header-menuButtonInner::after { |
| background-color: #3e4042; |
| height: 0.1875rem; |
| transition: all 100ms ease-in; |
| } |
| .Header-menuButton::after { |
| opacity: 0; |
| top: 0.9375rem; |
| } |
| .Header-menuButton::after, |
| .Header-menuButtonInner::before, |
| .Header-menuButtonInner::after { |
| content: ''; |
| display: block; |
| position: absolute; |
| width: 1.313rem; |
| } |
| .Header-menuButtonInner::before { |
| top: -0.375rem; |
| } |
| .Header-menuButtonInner::after { |
| bottom: -0.375rem; |
| } |
| .Header.is-active .Header-menuButton::after { |
| opacity: 1; |
| transform: rotate(-45deg); |
| } |
| .Header.is-active .Header-menuButton .Header-menuButtonInner { |
| transform: rotate(45deg); |
| } |
| .Header.is-active .Header-menuButton .Header-menuButtonInner::before, |
| .Header.is-active .Header-menuButton .Header-menuButtonInner::after { |
| background-color: transparent; |
| } |
| .Header-menu { |
| align-items: center; |
| display: none; |
| flex-direction: column; |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| width: 100%; |
| } |
| .Header.is-active .Header-menu { |
| display: flex; |
| } |
| .Header-menuItem:first-of-type { |
| /* Offset the padding of the inner link, maintaining its click target size, |
| while still placing the item as if it had no top margin or padding. */ |
| margin-top: -0.5rem; |
| } |
| .Header-menuItem { |
| display: inline-flex; |
| } |
| .Header-menuItem, |
| .Header-menuItem a:link, |
| .Header-menuItem a:visited, |
| .Header-menuItem--search, |
| .HeaderSearch { |
| width: 100%; |
| } |
| .Header-menuItem, |
| .Header-menuItem a:link, |
| .Header-menuItem a:visited { |
| color: #3e4042; |
| text-align: center; |
| } |
| .Header-menuItem a:link, |
| .Header-menuItem a:visited { |
| padding: 0.5rem 0; |
| } |
| .Header-menuItem--search { |
| margin-top: 0.5rem; |
| } |
| .HeaderSearch, |
| .HeaderSearch-label { |
| display: inline-block; |
| position: relative; |
| } |
| .HeaderSearch { |
| border: 0.0625rem solid #979797; |
| border-radius: 0.1875rem; |
| display: inline-flex; |
| overflow: hidden; |
| position: relative; |
| } |
| .HeaderSearch-input { |
| -webkit-appearance: none; |
| border: none; |
| border-radius: 0; |
| box-sizing: border-box; |
| display: block; |
| flex: 1; |
| font: inherit; |
| font-size: 16px; |
| /* Prevents automatic zoom on mobile devices */ |
| margin: 0; |
| padding: 0.5rem; |
| } |
| .HeaderSearch-input::-webkit-search-decoration { |
| -webkit-appearance: none; |
| } |
| .HeaderSearch-input::-moz-ui-invalid { |
| box-shadow: unset; |
| } |
| .HeaderSearch-submit { |
| background-color: #fff; |
| border: none; |
| box-sizing: border-box; |
| cursor: pointer; |
| margin: 0; |
| padding: 0.125rem 0.5rem 0 0.55rem; |
| transition: background-color 200ms; |
| } |
| .HeaderSearch:focus-within .HeaderSearch-submit { |
| background-color: #e5f6fb; |
| } |
| .HeaderSearch-icon { |
| fill: #757575; |
| transition: fill 200ms; |
| } |
| .HeaderSearch:focus-within .HeaderSearch-icon { |
| fill: #007d9c; |
| } |
| @media only screen and (min-width: 56rem) { |
| .Header { |
| display: block; |
| padding: 0; |
| } |
| .Header-banner { |
| background-color: #000; |
| color: #fff; |
| display: block; |
| padding: 1rem; |
| } |
| .Header-banner a:link, |
| .Header-banner a:visited { |
| color: #fff; |
| text-decoration: underline; |
| } |
| .Header-nav { |
| width: auto; |
| } |
| .Header.is-active { |
| background-color: #fff; |
| } |
| .Header.is-active .Header-menu { |
| display: block; |
| } |
| .Header-menuButton { |
| display: none; |
| } |
| .Header-menu { |
| display: flex; |
| flex-direction: row; |
| width: auto; |
| } |
| .Header-menuItem:first-of-type { |
| margin-top: 0; |
| } |
| .Header-menuItem, |
| .Header-menuItem a:link, |
| .Header-menuItem a:visited { |
| width: auto; |
| } |
| .Header-menuItem a:link, |
| .Header-menuItem a:visited { |
| padding: 2rem 1.5rem; |
| } |
| .Header-menuItem a:hover, |
| .Header-menuItem a:focus { |
| text-decoration: underline; |
| } |
| .Header-menuItem--search, |
| .HeaderSearch { |
| width: 8.75rem; |
| } |
| .Header-menuItem--search { |
| margin-left: 1.5rem; |
| margin-top: 0; |
| } |
| .HeaderSearch-input { |
| min-width: 5.625rem; |
| } |
| .HeaderSearch-submit { |
| padding: 0.125rem 0.5rem 0; |
| } |
| } |
| @media only screen and (min-width: 57.5rem) { |
| .Header { |
| font-size: 1rem; |
| } |
| } |
| .Button, |
| .Button:link, |
| .Button:visited { |
| align-items: center; |
| background-color: #f7f9fa; |
| border: none; |
| border-radius: 0.1875rem; |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); |
| box-sizing: border-box; |
| color: #007d9c; |
| cursor: pointer; |
| display: inline-flex; |
| font: bold 0.875rem Roboto, sans-serif; |
| height: 2.375rem; |
| padding: 0 0.625rem; |
| justify-content: center; |
| min-width: 4.063rem; |
| text-decoration: none; |
| } |
| .Button:active { |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); |
| } |
| .Button--primary, |
| .Button--primary:link, |
| .Button--primary:visited { |
| border: 0.0625rem solid #00add8; |
| } |
| .Button--big, |
| .Button--big:link, |
| .Button--big:visited { |
| background-color: #7fd5ea; |
| border-radius: 0.3125rem; |
| color: #202224; |
| font-size: 1.5rem; |
| height: 4rem; |
| justify-content: center; |
| } |
| .HomeContainer { |
| align-items: top; |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: space-between; |
| } |
| .HomeContainer * { |
| box-sizing: border-box; |
| } |
| .HomeSection { |
| flex: 0 0 100%; |
| margin-bottom: 2.5rem; |
| padding: 0 1rem; |
| } |
| .HomeSection-header { |
| background: none; |
| color: #202224; |
| margin: 0 0 0.625rem 0; |
| padding: 0; |
| font-weight: bold; |
| } |
| .Hero-header { |
| font: 1.5rem Roboto, sans-serif; |
| line-height: inherit; |
| margin: 0 0 1.875rem; |
| } |
| .Hero-gopher { |
| background: url('/lib/godoc/images/home-gopher.png') no-repeat; |
| background-position: center top; |
| display: block; |
| height: 9.688rem; |
| max-height: 200px; |
| /* Setting in px to prevent the gopher from blowing up in very high default font-sizes */ |
| } |
| .HeroDownloadButton, |
| .Hero-description { |
| text-align: center; |
| } |
| .HeroDownloadButton, |
| .HeroDownloadButton:link, |
| .HeroDownloadButton:visited { |
| display: flex; |
| margin-bottom: 0.5rem; |
| } |
| .HeroDownloadButton-image { |
| height: 2rem; |
| margin-right: 2rem; |
| width: 2rem; |
| } |
| .Hero-description { |
| color: #616161; |
| font-size: 0.875rem; |
| margin: 0; |
| } |
| @media only screen and (min-width: 57.1875rem) { |
| .HomeSection { |
| flex: 0 0 26.875rem; |
| padding: 0; |
| } |
| .Hero, |
| .Playground { |
| margin-top: 1rem; |
| } |
| } |
| .Playground-headerContainer { |
| align-items: baseline; |
| display: flex; |
| justify-content: space-between; |
| } |
| .Playground-popout { |
| background: url('/lib/godoc/images/play-link.svg') no-repeat; |
| background-position: right center; |
| cursor: pointer; |
| display: block; |
| font-size: 1rem; |
| padding: 0 1.688rem; |
| } |
| .Playground-input, |
| .Playground-output { |
| padding: 0; |
| margin: 0; |
| font-family: Menlo, monospace; |
| font-size: 0.875rem; |
| } |
| .Playground-inputContainer { |
| border-top-left-radius: 0.3125rem; |
| border-top-right-radius: 0.3125rem; |
| overflow: hidden; |
| height: 11rem; |
| } |
| .Playground-input { |
| width: 100%; |
| height: 100%; |
| border: none; |
| outline: none; |
| resize: none; |
| padding: 0.625rem; |
| } |
| .Playground-outputContainer { |
| border-bottom-right-radius: 0.3125rem; |
| border-bottom-left-radius: 0.3125rem; |
| border-top: none !important; |
| padding: 0.625rem; |
| height: 5rem; |
| margin-bottom: 1rem; |
| overflow: auto; |
| } |
| .Playground-output { |
| padding: 0; |
| border-radius: 0; |
| } |
| .Playground-inputContainer, |
| .Playground-input, |
| .Playground-outputContainer, |
| .Playground-output { |
| background: #f7f9fa; |
| color: #202224; |
| } |
| .Playground-inputContainer, |
| .Playground-outputContainer { |
| border: 0.0625rem solid #c0c2c3; |
| } |
| .Playground-controls { |
| display: flex; |
| flex-wrap: wrap; |
| } |
| .Playground-buttons { |
| display: flex; |
| flex: 1; |
| flex-wrap: nowrap; |
| justify-content: space-between; |
| } |
| .Playground-selectExample { |
| background-color: white; |
| border-radius: 3px; |
| border: 0.0625rem solid #979797; |
| color: inherit; |
| font-family: inherit; |
| font-size: 16px; |
| /* Prevents automatic zoom on mobile devices */ |
| height: 2.375rem; |
| margin: 0 0 0.5rem 0; |
| width: 100%; |
| } |
| .Playground-secondaryButtons { |
| white-space: nowrap; |
| } |
| .Playground-secondaryButtons .Button:not(:first-child) { |
| margin-left: 0.4375rem; |
| } |
| @media only screen and (min-width: 27.8125rem) { |
| .Playground-outputContainer { |
| margin-bottom: 1.688rem; |
| } |
| .Playground-controls { |
| flex-wrap: nowrap; |
| } |
| .Playground-selectExample { |
| margin: 0 0.4375rem 0 0; |
| width: auto; |
| } |
| } |
| .Blog-title { |
| display: block; |
| font-size: 1.25rem; |
| font-weight: normal; |
| margin: 0; |
| } |
| .Blog-title, |
| .Blog-extract, |
| .Blog-when { |
| margin-bottom: 0.625rem; |
| } |
| .Blog-when { |
| color: #666; |
| font-size: 0.875rem; |
| } |
| .Blog-footer { |
| 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%; |
| } |
| } |
| .Footer { |
| margin: 2rem auto 0; |
| padding: 1rem 1.25rem; |
| position: relative; |
| text-align: right; |
| } |
| .Footer-gopher { |
| bottom: 0; |
| left: 1.25rem; |
| position: absolute; |
| width: 5rem; |
| } |
| .Footer-links { |
| flex: 1; |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
| .Footer-link { |
| font-size: 0.875rem; |
| white-space: nowrap; |
| } |
| .Footer-link + .Footer-link { |
| margin-top: 0.5rem; |
| } |
| .Footer-supportedBy { |
| color: #6e7072; |
| display: inline-block; |
| font: 0.875rem 'Product Sans', 'Roboto', 'sans-serif'; |
| margin-top: 1rem; |
| } |
| .Footer-supportedBy:hover { |
| text-decoration: none; |
| } |
| @media only screen and (min-width: 50rem) { |
| .Footer { |
| align-items: center; |
| display: flex; |
| margin: 5rem auto 0; |
| } |
| .Footer-links { |
| padding-left: 6.25rem; |
| text-align: left; |
| } |
| .Footer-link { |
| display: inline; |
| } |
| .Footer-link + .Footer-link { |
| border-left: 0.0625rem solid #3e4042; |
| margin-left: 0.75rem; |
| padding-left: 0.75rem; |
| } |
| .Footer-supportedBy { |
| margin-top: 0; |
| } |
| } |
| .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; |
| } |
| 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: #f7f9fa; |
| color: #202224; |
| } |
| div.play .input, |
| div.play .output { |
| border: 0.0625rem solid #c0c2c3; |
| } |
| div.play .buttons { |
| float: right; |
| padding: 0.625rem 0; |
| text-align: right; |
| } |
| div.play .buttons .Button { |
| margin-left: 0.3125rem; |
| } |
| .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 */ |
| } |
| .downloading { |
| background: #f9f9be; |
| padding: 0.625rem; |
| text-align: center; |
| border-radius: 0.3125rem; |
| } |
| @media (max-width: 43.75em) { |
| body { |
| font-size: 0.9375rem; |
| } |
| div#playground { |
| left: 0; |
| right: 0; |
| } |
| pre, |
| code { |
| font-size: 0.866rem; |
| } |
| #page > .container, |
| .Header-nav { |
| padding: 0 0.625rem; |
| } |
| p, |
| pre, |
| ul, |
| ol { |
| margin: 0.625rem; |
| } |
| .pkg-synopsis { |
| display: none; |
| } |
| img.gopher { |
| display: none; |
| } |
| } |
| @media print { |
| pre { |
| background: #fff; |
| border: 0.0625rem solid #bbb; |
| white-space: pre-wrap; |
| page-break-inside: avoid; |
| } |
| } |
