|
|
body { margin: 0; font-family: Arial, sans-serif; font-size: 16px; background-color: #fff; line-height: 1.3em; } pre, code { font-family: Menlo, monospace; font-size: 14px; } pre { line-height: 1.4em; 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; } .ln::before { /* Inserting the line numbers as a ::before pseudo-element avoids making * them selectable; it's the trick Github uses as well. */ content: attr(data-content); } body { color: #222; } a, .exampleHeading .text { color: #375EAB; text-decoration: none; } a:hover, .exampleHeading .text: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: 800px; word-wrap: break-word; } p, pre, ul, ol { margin: 20px; } pre { background: #EFEFEF; padding: 10px;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
h1, h2, h3, h4, .rootHeading { margin: 20px 0 20px; padding: 0; color: #375EAB; font-weight: bold; } h1 { font-size: 28px; line-height: 1; } h1 .text-muted { color:#777; } h2 { font-size: 20px; background: #E0EBF5; padding: 8px; line-height: 1.25; font-weight: normal; } h2 a { font-weight: bold; } h3 { font-size: 20px; } h3, h4 { margin: 20px 5px; } h4 { font-size: 16px; } .rootHeading { font-size: 20px; margin: 0; }
dl { margin: 20px; } dd { margin: 0 0 0 20px; } dl, dd { font-size: 14px; } div#nav table td { vertical-align: top; }
#pkg-index h3 { font-size: 16px; } .pkg-dir { padding: 0 10px; } .pkg-dir table { border-collapse: collapse; border-spacing: 0; } .pkg-name { padding-right: 10px; } .alert { color: #AA0000; }
.top-heading { float: left; padding: 21px 0; font-size: 20px; font-weight: normal; } .top-heading a { color: #222; text-decoration: none; }
div#topbar { background: #E0EBF5; height: 64px; overflow: hidden; }
body { text-align: center; } div#page { width: 100%; } div#page > .container, div#topbar > .container { text-align: left; margin-left: auto; margin-right: auto; padding: 0 20px; } div#topbar > .container, div#page > .container { max-width: 950px; } div#page.wide > .container, div#topbar.wide > .container { max-width: none; } div#plusone { float: right; clear: right; margin-top: 5px; }
div#footer { text-align: center; color: #666; font-size: 14px; margin: 40px 0; }
div#menu > a, input#search, div#learn .buttons a, div.play .buttons a, div#blog .read a, #menu-button { padding: 10px;
text-decoration: none; font-size: 16px;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } div#playground .buttons a, div#menu > a, input#search, #menu-button { border: 1px 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: 1px solid #375EAB; background: #E0EBF5; } .download { width: 150px; }
div#menu { text-align: right; padding: 10px; white-space: nowrap; max-height: 0; -moz-transition: max-height .25s linear; transition: max-height .25s linear; width: 100%; } div#menu.menu-visible { max-height: 500px; } div#menu > a, #menu-button { margin: 10px 2px; padding: 10px; } ::-webkit-input-placeholder { color: #7f7f7f; opacity: 1; } ::placeholder { color: #7f7f7f; opacity: 1; } #menu .search-box { display: inline-flex; width: 140px; } 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: 90px; } input#search:-moz-ui-invalid { box-shadow: unset; } input#search + button { display: inline; font-size: 1em; background-color: #375EAB; color: white; border: 1px solid #375EAB; border-top-left-radius: 0; border-top-right-radius: 5px; border-bottom-left-radius: 0; border-bottom-right-radius: 5px; margin-left: 0; cursor: pointer; } input#search + button span { display: flex; } input#search + button svg { fill: white }
#menu-button { display: none; position: absolute; right: 5px; top: 0; margin-right: 5px; } #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: 20px; } div#learn h2, div#about { margin: 0; } div#about { font-size: 20px; margin: 0 auto 30px; } div#gopher { background: url(/doc/gopher/frontpage.png) no-repeat; background-position: center top; height: 155px; } a#start { display: block; padding: 10px;
text-align: center; text-decoration: none;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } a#start .big { display: block; font-weight: bold; font-size: 20px; } a#start .desc { display: block; font-size: 14px; font-weight: normal; margin-top: 5px; }
div#learn .popout { float: right; display: block; cursor: pointer; font-size: 12px; background: url(/doc/share.png) no-repeat; background-position: right top; padding: 5px 27px; } div#learn pre, div#learn textarea { padding: 0; margin: 0; font-family: Menlo, monospace; font-size: 14px; } div#learn .input { padding: 10px; margin-top: 10px; height: 150px;
-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } div#learn .input textarea { width: 100%; height: 100%; border: none; outline: none; resize: none; } div#learn .output { border-top: none !important;
padding: 10px; height: 59px; overflow: auto;
-webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } div#learn .output pre { padding: 0;
-webkit-border-radius: 0; -moz-border-radius: 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: 1px solid #375EAB; } div#learn .buttons { float: right; padding: 20px 0 10px 0; text-align: right; } div#learn .buttons a { height: 16px; margin-left: 5px; padding: 10px; } div#learn .toys { margin-top: 8px; } div#learn .toys select { border: 1px solid #375EAB; margin: 0; } div#learn .output .exit { display: none; }
div#video { max-width: 100%; } div#blog, div#video { margin-top: 40px; } div#blog > a, div#blog > div, div#blog > h2, div#video > a, div#video > div, div#video > h2 { margin-bottom: 10px; } div#blog .title, div#video .title { display: block; font-size: 20px; } div#blog .when { color: #666; font-size: 14px; } div#blog .read { text-align: right; }
.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: 10px; } hr { border-style: none; border-top: 1px solid black; }
img.gopher { float: right; margin-left: 10px; margin-bottom: 10px; z-index: -1; } h2 { clear: right; }
/* example and drop-down playground */ div.play { padding: 0 20px 40px 20px; } div.play pre, div.play textarea, div.play .lines { padding: 0; margin: 0; font-family: Menlo, monospace; font-size: 14px; } div.play .input { padding: 10px; margin-top: 10px;
-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;
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: 10px; max-height: 200px; overflow: auto;
-webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } div.play .output pre { padding: 0;
-webkit-border-radius: 0; -moz-border-radius: 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: 1px solid #375EAB; } div.play .buttons { float: right; padding: 20px 0 10px 0; text-align: right; } div.play .buttons a { height: 16px; margin-left: 5px; padding: 10px; cursor: pointer; } .output .stderr { color: #933; } .output .system { color: #999; }
/* drop-down playground */ #playgroundButton, div#playground { /* start hidden; revealed by javascript */ display: none; } div#playground { position: absolute; top: 63px; right: 20px; padding: 0 10px 10px 10px; z-index: 1; text-align: left; background: #E0EBF5;
border: 1px solid #B0BBC5; border-top: none;
-webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } div#playground .code { width: 520px; height: 200px; } div#playground .output { height: 100px; }
/* Inline runnable snippets (play.js/initPlayground) */ #content .code pre, #content .playground pre, #content .output pre { margin: 0; padding: 0; background: none; border: none; outline: 0px solid transparent; overflow: auto; } #content .playground .number, #content .code .number { color: #999; } #content .code, #content .playground, #content .output { width: auto; margin: 20px; padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #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: -50px; right: 30px; } #content .output .buttons { top: -60px; 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: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 2px 4px 2px 4px; /* TRBL */ }
#heading-narrow { display: none; }
.downloading { background: #F9F9BE; padding: 10px; text-align: center; border-radius: 5px; }
@media (max-width: 930px) { #heading-wide { display: none; } #heading-narrow { display: block; } }
@media (max-width: 760px) { .container .left, .container .right { width: auto; float: none; }
div#about { max-width: 500px; text-align: center; } }
@media (min-width: 700px) and (max-width: 1000px) { div#menu > a { margin: 5px 0; font-size: 14px; }
input#search { font-size: 14px; } }
@media (max-width: 700px) { body { font-size: 15px; }
pre, code { font-size: 13px; }
div#page > .container { padding: 0 10px; }
div#topbar { height: auto; padding: 10px; }
div#topbar > .container { padding: 0; }
#heading-wide { display: block; } #heading-narrow { display: none; }
.top-heading { float: none; display: inline-block; padding: 12px; }
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: 10px; }
.pkg-synopsis { display: none; }
img.gopher { display: none; } }
@media (max-width: 480px) { #heading-wide { display: none; } #heading-narrow { display: block; } }
@media print { pre { background: #FFF; border: 1px solid #BBB; white-space: pre-wrap; } }
|