| /* Reset */ |
| body, h1, h2, h3, h4, li, ol, p, pre, section, ul { |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| font-family: Georgia, serif; |
| background: #e8e8e8; |
| color: #333; |
| background-image: url('body-bg.png'); |
| background-repeat: repeat; |
| } |
| |
| h2 { |
| font: 400 28px/44px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| sans-serif; |
| } |
| |
| h3 { |
| font: 600 14px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| sans-serif; |
| color: #999; |
| margin: 22px 0 0 0; |
| } |
| |
| h4 { |
| font: 600 16px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| sans-serif; |
| } |
| |
| p { |
| font-size: 16px; |
| line-height: 22px; |
| margin: 0 0 22px 0; |
| } |
| |
| h3 + p { |
| /* Text immediately following a subheader should be snug with it. */ |
| margin-top: 0; |
| } |
| |
| strong { |
| font-weight: 700; |
| } |
| |
| pre, code { |
| font: 14px/22px Menlo, Monaco, Consolas, Courier, monospace; |
| color: hsl(220, 20%, 30%); |
| background: hsl(220, 20%, 95%); |
| margin: 22px 0; |
| padding: 0 4px; |
| border-radius: 4px; |
| overflow-x:auto; |
| overflow-y:hidden; |
| } |
| |
| a { |
| color: #15c; |
| text-decoration: none; |
| } |
| |
| a:hover { |
| text-decoration: underline; |
| } |
| |
| a:visited { |
| color: #15c; |
| } |
| |
| li { |
| font-size: 16px; |
| line-height: 22px; |
| } |
| |
| ol, ul { |
| padding-left: 22px; |
| } |
| |
| hr { |
| border: none; |
| height: 1px; |
| background: #ccc; |
| margin: 22px 0 21px 0; |
| } |
| |
| hr + h2 { |
| margin-top: 21px; /* To compensate for the thickness of the hr. */ |
| } |
| |
| .page { |
| max-width: 1000px; |
| background: #fff; |
| margin: 0 auto 22px auto; |
| border: solid 1px #ccc; |
| border-top: none; |
| box-shadow: 0 0 50px #888; |
| |
| background-image: url('content-bg.png'); |
| background-repeat: repeat-y; |
| |
| position: relative; |
| } |
| |
| .header { |
| background: #333; |
| background-image: url('header-bg.png'); |
| height: 44px; |
| color: hsl(0, 0%, 50%); |
| font: 400 15px/44px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| sans-serif; |
| } |
| |
| .header .logo { |
| background-image: url('dart-logo-small.png'); |
| width: 66px; |
| height: 44px; |
| float: left; |
| } |
| |
| .header a { |
| color: hsl(0, 0%, 80%); |
| } |
| |
| .header a:hover { |
| color: hsl(0, 0%, 100%); |
| } |
| |
| .header #search-box { |
| display: inline; |
| float: right; |
| margin-right: 11px; |
| } |
| |
| .search-input, .drop-down { |
| font: 400 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| sans-serif; |
| width: 300px; |
| } |
| |
| .drop-down { |
| visibility: hidden; |
| z-index: 1000; |
| position: absolute; |
| right: 10px; |
| top: 36px; |
| border: 1px #CCC solid; |
| background-color: white; |
| -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); |
| -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); |
| box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); |
| } |
| |
| .drop-down-table { |
| width: 100%; |
| } |
| |
| .drop-down-link-tr { |
| padding: 4px 0px; |
| cursor: pointer; |
| } |
| .drop-down-link-td { |
| border-bottom: 1px solid #EEE; |
| } |
| |
| .drop-down-link-tr:hover { |
| background: #EEE; |
| color: #333; |
| } |
| |
| .drop-down-link-select { |
| background: #15C; |
| color: white; |
| } |
| |
| .drop-down-link-select:hover { |
| background: #2AF; |
| color: white; |
| } |
| |
| .drop-down-link-kind, .drop-down-link-library { |
| font: 400 10px/10px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| sans-serif; |
| } |
| |
| .drop-down-link-library { |
| text-align: right; |
| } |
| |
| .drop-down-link-highlight { |
| font-weight:bold; |
| } |
| |
| .nav { |
| float: left; |
| width: 263px; /* 12 x 22px - 1 for border */ |
| padding: 0 22px; |
| overflow: hidden; |
| background: #f4f4f4; |
| border-right: solid 1px #ccc; |
| } |
| |
| .nav h2 { |
| font: 400 16px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| sans-serif; |
| margin: 0 -21px; |
| padding: 11px 22px; |
| |
| /* Using http://www.colorzilla.com/gradient-editor/ */ |
| background: -moz-linear-gradient(top, hsla(0,0%,0%,0.05) 0%, hsla(0,0%,0%,0) 100%); |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,0%,0.05)), color-stop(100%,hsla(0,0%,0%,0))); |
| background: -webkit-linear-gradient(top, hsla(0,0%,0%,0.05) 0%,hsla(0,0%,0%,0) 100%); |
| background: -o-linear-gradient(top, hsla(0,0%,0%,0.05) 0%,hsla(0,0%,0%,0) 100%); |
| background: -ms-linear-gradient(top, hsla(0,0%,0%,0.05) 0%,hsla(0,0%,0%,0) 100%); |
| background: linear-gradient(top, hsla(0,0%,0%,0.05) 0%,hsla(0,0%,0%,0) 100%); |
| } |
| |
| ul.icon { |
| margin: 0 0 22px 0; |
| padding: 0; |
| } |
| |
| ul.icon li { |
| font: 600 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| sans-serif; |
| list-style-type: none; |
| white-space: nowrap; |
| } |
| |
| /* Indent nested lists. */ |
| ul.icon ul { |
| margin-left: 22px; |
| } |
| |
| .icon-class, |
| .icon-exception, |
| .icon-interface { |
| display: inline-block; |
| width: 14px; |
| height: 14px; |
| margin: 5px 10px 0 2px; |
| vertical-align: top; |
| } |
| |
| .icon-class { background: url('class.png'); } |
| .icon-exception { background: url('exception.png'); } |
| .icon-interface { background: url('interface.png'); } |
| |
| .icon-library { |
| background: url('library.png'); |
| width: 16px; |
| height: 14px; |
| display: inline-block; |
| margin: 4px 8px 0 0; |
| vertical-align: top; |
| } |
| |
| .type-box { |
| display: inline-block; |
| font: 600 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| sans-serif; |
| background: #f4f4f4; |
| padding: 0 6px 0 3px; |
| border-radius: 4px; |
| } |
| |
| .type-box .icon-class, |
| .type-box .icon-exception, |
| .type-box .icon-interface { |
| /* Make a little snugger with the text. */ |
| margin-right: 5px; |
| } |
| |
| .content { |
| margin-left: 308px; /* 14 x 22 */ |
| padding: 22px 22px; |
| } |
| |
| .clear { |
| clear: both; |
| } |
| |
| .footer { |
| max-width: 956px; /* 1000 - 22 - 22 */ |
| text-align: center; |
| margin: 22px auto; |
| color: #888; |
| } |
| |
| .footer p { |
| font: 400 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| sans-serif; |
| } |
| |
| .inherited { |
| } |
| |
| .inherited-from { |
| font: 400 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| sans-serif; |
| text-align: right; |
| opacity: 0.7; |
| } |
| |
| .inherited-from, .docs-inherited-from { |
| font: 400 13px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| sans-serif; |
| text-align: right; |
| opacity: 0.7; |
| } |
| |
| .docs-inherited-from { |
| margin-top: -22px; |
| } |
| |
| .method .doc, |
| .field .doc { |
| padding-left: 44px; |
| /* Ensure there is some space between members with no documentation. */ |
| margin-bottom: 22px; |
| } |
| |
| .param { |
| font: 600 14px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| sans-serif; |
| } |
| |
| .crossref { |
| font: 600 15px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| sans-serif; |
| } |
| |
| .doc h1 { |
| font: 700 17px/22px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| sans-serif; |
| color: #666; |
| } |
| |
| .doc h2 { |
| font: 600 16px/22px 'Open Sans', 'Lucida Sans Unicode', |
| 'Lucida Grande', sans-serif; |
| color: #666; |
| } |
| |
| /* Style external links in docs differently. */ |
| .doc a[href^="http:"]:after, |
| .doc a[href^="https:"]:after { |
| content: url('external-link.png'); |
| } |
| |
| /* Highlight members on hover so you can see which docs are for which member. */ |
| .method:hover, |
| .field:hover { |
| margin: 0 -22px; |
| border: solid 4px hsl(40, 100%, 85%); |
| padding: 0 18px; |
| border-top: none; |
| border-bottom: none; |
| } |
| |
| /* Only show the "code" link for the highlighted member. */ |
| .show-code, .show-inherited { |
| float: right; |
| font: 600 11px 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', |
| sans-serif; |
| padding: 0 0 0 6px; /* In case it gets too close to the member. */ |
| border: none; |
| background: transparent; |
| margin: 0; |
| } |
| |
| .method:hover .show-code, |
| .field:hover .show-code { |
| display: inline; |
| } |
| |
| /* Only show permalinks when hovered over. */ |
| .anchor-link { |
| display: none; |
| } |
| |
| h2:hover > .anchor-link, |
| h4:hover > .anchor-link { |
| display: inline; |
| } |
| |
| /* Only show code when expanded. */ |
| pre.source { |
| display: none; |
| } |
| |
| pre.source.expanded { |
| display: block; |
| } |
| |
| /* Links that don't cause a page refresh. */ |
| .anchor-link, .anchor-link:visited, |
| .show-code, .show-code:visited, |
| .show-inherited, .show-inherited:visited { |
| color: hsl(40, 100%, 40%); |
| cursor: pointer; |
| } |
| |
| .anchor-link, .anchor-link:visited, |
| .show-code, .show-code:visited { |
| display: none; |
| } |
| |
| .anchor-link:hover, |
| .show-code:hover, |
| .show-inherited:hover { |
| color: hsl(40, 100%, 60%); |
| } |
| |
| /* Syntax highlighting. */ |
| /* Note: these correspond to the constants in classify.dart. */ |
| pre.source .e { color: hsl( 0, 100%, 70%); } /* Error */ |
| pre.source .c { color: hsl(220, 20%, 65%); } /* Comment */ |
| pre.source .i { color: hsl(220, 20%, 20%); } /* Identifier */ |
| pre.source .k { color: hsl(220, 100%, 50%); } /* Keyword */ |
| pre.source .p { color: hsl(220, 20%, 50%); } /* Punctuation */ |
| pre.source .o { color: hsl(220, 40%, 50%); } /* Operator */ |
| pre.source .s { color: hsl( 40, 90%, 40%); } /* String */ |
| pre.source .n { color: hsl( 30, 70%, 50%); } /* Number */ |
| pre.source .t { color: hsl(180, 40%, 40%); } /* Type Name */ |
| pre.source .r { color: hsl(200, 100%, 50%); } /* Special Identifier */ |
| pre.source .a { color: hsl(220, 100%, 45%); } /* Arrow */ |
| |
| /* Interpolated expressions within strings. */ |
| pre.source .si { |
| background: hsl(40, 100%, 90%); |
| } |
| |
| pre.source .s.si { background: hsl(40, 80%, 95%); } |
| pre.source .i.si { color: hsl(40, 30%, 30%); } |
| pre.source .p.si { color: hsl(40, 60%, 40%); } |
| |
| /* Enable these to debug the grid: */ |
| |
| /* |
| body { |
| background: -webkit-linear-gradient(top, #eee 0, #fff 10%, #fff 90%, #eee 100%); |
| background-size: 22px 22px; |
| background-repeat: repeat; |
| } |
| |
| .page { |
| background: none; |
| } |
| |
| h1 { |
| border-left: solid 4px green; |
| } |
| |
| h2 { |
| border-left: solid 4px blue; |
| } |
| |
| h3 { |
| border-left: solid 4px red; |
| } |
| |
| h4 { |
| border-left: solid 4px orange; |
| } |
| |
| p { |
| border-left: solid 4px purple; |
| } |
| |
| section { |
| border-left: solid 4px gray; |
| } |
| */ |