1
0
mirror of https://github.com/golang/go synced 2024-11-18 19:24:39 -07:00
go/godoc/static/style.css
Kevin Burke b54fdb7e52 godoc: don't select line numbers in orange
Previously a selection of text that spanned multiple lines would
include the line number as part of the orange highlight. This is
misleading (the line numbers aren't copied when you highlight the
text with your mouse) and a little ugly.

I had to move the tab character inside the <span class="ln"> block,
otherwise the orange highlight goes right up to the number, which is
off-putting and means the orange highlights don't line up vertically.

Before: https://monosnap.com/file/F9L166Zxxnf3ev74Z3JoJT0xz0nYLn.png
After: https://monosnap.com/file/6jfeFBG6tzhy3ZErqYWn6BfZ4fyk1R.png

Fixes golang/go#18561

Change-Id: I312d30ce01071850f8724246c54ce2d7259619d2
Reviewed-on: https://go-review.googlesource.com/34924
Run-TryBot: Matt Layher <mdlayher@gmail.com>
TryBot-Result: Gobot Gobot <gobot@golang.org>
Reviewed-by: Matt Layher <mdlayher@gmail.com>
Reviewed-by: Brad Fitzpatrick <bradfitz@golang.org>
2017-01-09 17:48:59 +00:00

795 lines
12 KiB
CSS

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;
}
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;
}
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-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,
div#menu > input,
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,
div#menu > input,
#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;
}
div#menu > input {
position: relative;
top: 1px;
width: 140px;
background: white;
color: #222;
box-sizing: border-box;
}
div#menu > input.inactive {
color: #999;
}
#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;
}
div#menu > input {
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,
div#menu > input {
display: block;
margin-left: 0;
margin-right: 0;
}
div#menu > input {
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;
}
}