| /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. |
| */ |
| |
| /* |
| * Site-wide styles. |
| */ |
| |
| .hidden { |
| display: none; |
| } |
| |
| body { |
| background-color: white; |
| font: 14px/22px 'Open Sans',arial,sans-serif; |
| margin: auto; |
| padding: 0; |
| } |
| |
| p.note, |
| p.caution, |
| p.warning, |
| div.note, |
| div.caution, |
| div.warning { |
| background-color: #F5F5F5; |
| border-bottom: 1px solid; |
| border-top: 1px solid; |
| margin: 1em 0 0 0; |
| overflow: hidden; |
| padding: .2em .5em .2em .9em; |
| } |
| |
| p.note, |
| div.note { |
| border-color: #36C; |
| } |
| p.caution, |
| div.caution { |
| border-color: #FC3; |
| } |
| p.warning, |
| div.warning { |
| border-color: #A03; |
| } |
| |
| p.warning em, |
| p.warning strong, |
| div.warning em, |
| div.warning strong { |
| color: #A03; |
| } |
| |
| a, a:link { |
| color: #4787ed; |
| font-weight: 600; |
| text-decoration: none; |
| } |
| |
| a:active, |
| a:hover, |
| a:visited { |
| color: #236bb2; |
| } |
| |
| li { |
| margin: .3em 0 0 1.5em; |
| padding: 0; |
| } |
| |
| ul.condensed { |
| margin: 0.5em 0; |
| } |
| |
| ul.condensed li { |
| margin-top: 0; |
| } |
| |
| ol li { |
| margin-top: 1em; |
| } |
| |
| img { |
| border: none; |
| padding: 10px 0; |
| } |
| |
| p img { |
| padding: 0 2px; |
| } |
| |
| .code, |
| code, |
| pre { |
| color: #080; |
| font-family: monospace; |
| } |
| |
| .code, |
| code{ |
| font-size: 10pt; |
| } |
| |
| pre { |
| background-color: #F5F5F5; |
| font-size: 10pt; |
| margin: 1em 0 0 0; |
| overflow: auto; |
| padding: .99em; |
| position: relative; |
| word-wrap: break-word; |
| } |
| |
| pre a { |
| text-decoration: underline!important; |
| } |
| |
| pre b { |
| background: yellow; |
| } |
| |
| pre[data-filename] .filename { |
| background-color: #777; |
| color: #FFF; |
| font-size: 16px; |
| padding: 2px 12px; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| dt { |
| font-weight: bold; |
| margin: .75em 0 0 0; |
| } |
| |
| dl { |
| margin: 0; |
| } |
| |
| dd { |
| font-weight: normal; |
| margin: .4em 0 0 2em; |
| padding: 0; |
| } |
| |
| section { |
| margin-top: 1em; |
| padding-top: 1em; |
| } |
| section + section { |
| border-top: 1px solid #F5F5F5; |
| } |
| |
| /* Support a hack for the ::first-element rules below, which only apply if |
| * the element has a subset of displays, which include inline-block. |
| * |
| * Use the data-inline-block attribute rather than a class on the element |
| * because the templates may end up overriding the class attribute. |
| */ |
| [data-list-item] { |
| display: list-item; |
| } |
| |
| .uncapitalize::first-letter { |
| text-transform: lowercase; |
| } |
| |
| .capitalize::first-letter { |
| text-transform: uppercase; |
| } |
| |
| #gc-container { |
| height: auto; |
| margin-top: 2em; |
| margin: auto; |
| max-width: 1160px; |
| padding: 0 50px; |
| } |
| |
| #gc-topnav { |
| background-color: white; |
| border-bottom: 1px solid #F5F5F5; |
| font-size: 1em; |
| line-height: 50px; |
| margin: auto; |
| max-width: 1160px; |
| padding: 0 7px; |
| white-space: nowrap; |
| } |
| |
| #gc-topnav * { |
| padding: 0; |
| } |
| |
| #gc-topnav table { |
| border-spacing: 0; |
| } |
| |
| #gc-topnav li { |
| display: inline-block; |
| font-weight: 600; |
| margin: 0 0 0 25px; |
| text-transform: uppercase; |
| white-space: nowrap; |
| } |
| #gc-topnav li:first-child { |
| margin-left: 0; |
| } |
| |
| #gc-topnav ul { |
| font-size: 12px; |
| margin: 0; |
| } |
| |
| #gc-topnav a { |
| color: #333; |
| } |
| #gc-topnav a:hover { |
| color: #4787ed; |
| } |
| |
| #gc-topnav #chrome-logo { |
| width: 100%; |
| font-size: 1.7em; |
| } |
| |
| #gc-topnav #chrome-logo a { |
| color: #77787a; |
| font-weight: 400; |
| margin: 0; |
| } |
| |
| #gc-topnav #chrome-logo img { |
| vertical-align: middle; |
| } |
| |
| #gc-topnav a, |
| #gc-topnav button { |
| background: none; |
| border: none; |
| color: #333; |
| cursor: pointer; |
| font-family: inherit; |
| font-size: inherit; |
| font-style: inherit; |
| margin: 0; padding: 0; |
| outline: none; |
| } |
| #gc-topnav a:focus, |
| #gc-topnav button:focus { |
| outline: 1px dotted; |
| } |
| |
| #platform-chooser { |
| display: inline; |
| position: relative; |
| } |
| |
| #platform-chooser-popup { |
| /* Make it appear to be an extension of the header. */ |
| background-color: white; |
| border-top: none; |
| border: 1px solid #F5F5F5; |
| z-index: 4; |
| /* Ready to be shown by popup.js. */ |
| display: none; |
| position: absolute; |
| /* Align with the button, which have padding:6px. */ |
| left: -6px; |
| } |
| |
| #platform-chooser-popup button { |
| display: block; |
| padding: 6px; |
| text-align: left; |
| width: 100%; |
| } |
| #platform-chooser-popup button:hover { |
| color: #4787ed; |
| } |
| |
| button.google-button { |
| background-color: #f5f5f5; |
| border-radius: 2px 0 0 0; |
| -moz-border-radius: 2px 0 0 0; |
| -webkit-border-radius: 2px 0 0 0; |
| border: 1px solid rgba(0,0,0,0.1); |
| height: 27px; |
| margin: 0; |
| padding: 5px 12px; |
| text-align: center; |
| text-transform: uppercase; |
| white-space: nowrap; |
| } |
| button.google-button:hover { |
| border-color: #c6c6c6; |
| box-shadow: 0 -1px 1px rgba(0,0,0,0.1); |
| -webkit-box-shadow: 0 -1px 1px rgba(0,0,0,0.1); |
| -moz-box-shadow: 0 -1px 1px rgba(0,0,0,0.1); |
| } |
| button.google-button:active { |
| background-color: #f1f1f1; |
| box-shadow: inset 0 0px 2px rgba(0,0,0,0.2); |
| -webkit-box-shadow: inset 0 0px 2px rgba(0,0,0,0.2); |
| -moz-box-shadow: inset 0 0px 2px rgba(0,0,0,0.2); |
| } |
| |
| #scroll-to-top, |
| #send-feedback { |
| border-bottom: none; |
| bottom: 0; |
| position: fixed; |
| z-index: 5; |
| } |
| #scroll-to-top { |
| border-left: 0; |
| left: 0; |
| } |
| #send-feedback { |
| border-right: 0; |
| right: 0; |
| } |
| |
| #gc-pagecontent { |
| margin: 0 0 100px 250px; |
| } |
| |
| #gc-pagecontent h1 { |
| font-size: 320%; |
| font-weight: normal; |
| line-height: 130%; |
| } |
| |
| #gc-pagecontent h2 { |
| font-size: 170%; |
| font-weight: normal; |
| line-height: 130%; |
| } |
| |
| #gc-pagecontent #api-reference-header { |
| font-size: 320%; |
| } |
| |
| #gc-pagecontent h3 { |
| font-size: 130%; |
| } |
| |
| #gc-pagecontent h4 { |
| font-size: 110%; |
| } |
| |
| #gc-pagecontent h5 { |
| font-size: 100%; |
| } |
| |
| #gc-pagecontent table { |
| border-collapse: collapse; |
| } |
| #gc-pagecontent th { |
| text-align: left; |
| padding: 6px 12px; |
| } |
| #gc-pagecontent td { |
| border: 1px solid #36C; |
| padding: 6px 12px; |
| vertical-align: top; |
| } |
| |
| /* Provide an intro table for api reference docs. */ |
| #gc-pagecontent table.intro |
| #gc-pagecontent table.intro th, |
| #gc-pagecontent table.intro td { |
| border-collapse: separate; |
| border-style: none; |
| } |
| |
| #gc-pagecontent table.intro { |
| padding: 0; |
| } |
| |
| #gc-pagecontent table.intro td.title { |
| font-weight: bold; |
| white-space: nowrap; |
| } |
| |
| #gc-pagecontent table.intro td { |
| border-bottom: 1px solid #F5F5F5; |
| padding: 6px 12px; |
| vertical-align: top; |
| } |
| |
| /* Provide an intro table for api reference docs. */ |
| #gc-pagecontent table.intro |
| #gc-pagecontent table.intro th, |
| #gc-pagecontent table.intro td { |
| border-collapse: separate; |
| border-style: none; |
| } |
| |
| #gc-pagecontent table.intro { |
| padding: 0; |
| } |
| |
| #gc-pagecontent table.intro th { |
| border-style: none; |
| padding: 6px 12px; |
| text-align: left; |
| } |
| |
| #gc-pagecontent table.intro td { |
| border-bottom: 1px solid #F5F5F5; |
| padding: 6px 12px; |
| vertical-align: top; |
| } |
| |
| /* Provide a "simple" version of the table to use just for layout. */ |
| #gc-pagecontent table.simple, |
| #gc-pagecontent table.simple th, |
| #gc-pagecontent table.simple td { |
| border-collapse: separate; |
| border-style: none; |
| } |
| #gc-pagecontent table.simple { |
| padding: 0; |
| } |
| #gc-pagecontent table.simple th, |
| #gc-pagecontent table.simple td { |
| padding: 1px; |
| } |
| |
| #gc-footer { |
| margin: auto; |
| max-width: 1160px; |
| padding: 0 150px 0 400px; |
| } |
| |
| #gc-footer .text { |
| color: #666; |
| margin: 0; |
| padding: 30px 0; |
| text-align: center; |
| } |
| |
| #gc-sidebar { |
| width: 185px; |
| float: left; |
| } |
| |
| /* scroll.js adds and removes the floating class depending on the scroll |
| * position. */ |
| #gc-sidebar.floating { |
| overflow: auto; |
| position: fixed; |
| top: 0; bottom: 0; |
| } |
| |
| /* Sidebar link/button styling. */ |
| #gc-sidebar span, |
| #gc-sidebar a { |
| color: black; |
| display: block; |
| font-weight: normal; |
| position: relative; |
| } |
| #gc-sidebar a:hover, |
| #gc-sidebar a.selected { |
| color: #0d68ae; |
| } |
| #gc-sidebar span.level2, |
| #gc-sidebar a.level2 { |
| font-weight: bold; |
| } |
| #gc-sidebar a.button, |
| #gc-sidebar .level3, |
| #gc-sidebar .level4 { |
| color: #444; |
| } |
| |
| #gc-sidebar .toggleIndicator { |
| background: url(../images/toggle_sprite.png) no-repeat 0 0; |
| height: 8px; |
| position: absolute; |
| right: 0; |
| top: 3px; |
| width: 8px; |
| } |
| #gc-sidebar .toggleIndicator.toggled { |
| background-position: 0 -9px; |
| } |
| |
| /* Sidebar list styling. */ |
| #gc-sidebar ul { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
| #gc-sidebar ul.level2 { |
| margin-left: 10px; |
| padding-top: 10px; |
| } |
| #gc-sidebar ul.level3, |
| #gc-sidebar ul.level4, |
| #gc-sidebar ul.level5 { |
| margin-left: 20px; |
| padding-top: 10px; |
| } |
| |
| #gc-sidebar li { |
| line-height: 120%; |
| margin: 0; |
| padding: 8px 0; |
| } |
| |
| #gc-sidebar li.level2 { |
| border-top: 1px solid #F5F5F5; |
| } |
| #gc-sidebar li.level2:first-child { |
| border-top: none; |
| } |
| |
| #toc { |
| background-color: #F5F5F5; |
| border-bottom: 20px solid white; |
| /* We want this element to have a visual left-margin of 20px, but margins on |
| floated elements don't affect the borders and background of the elements |
| they float over. So we add this border to force the issue. */ |
| border-left: 20px solid white; |
| float: right; |
| /* The spacing in the TOC is based around 10px: |
| * - The spacing between text and the box border is 10px, made up of a |
| * top/bottom padding of 10px here and a left/right margin on every |
| * TOC link of 10px. |
| * - The separator has a 5px top margin and 5px top padding for a total |
| * separation of 10px between each section. |
| */ |
| padding: 10px 0; |
| position: relative; |
| width: 250px; |
| word-break: break-word; |
| z-index: 3; |
| } |
| |
| #toc * { |
| list-style: none; |
| margin: 0; |
| overflow: hidden; |
| padding: 0; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| #toc a { |
| color: black; |
| line-height: 1.2em; |
| margin: 3px 0 3px 10px; |
| } |
| |
| #toc li { |
| margin: 0 10px 0 10px; |
| } |
| |
| #toc .separator { |
| border-top: 1px solid #e5e5e5; |
| margin-top: 5px; |
| padding-top: 5px; |
| } |
| |
| .filtered_item { |
| line-height: 6px; |
| } |
| |
| #filtered_apis { |
| margin-top: 5px; |
| } |
| |
| #skipto { |
| display: none; |
| } |
| |
| /* List with largeish images floated to the right. */ |
| .imaged li { |
| clear: right; |
| } |
| |
| .imaged li img { |
| float: right; |
| margin-bottom: 1em; |
| } |
| |
| .imaged + p { |
| clear: right; |
| } |
| |
| /* small indent for better visual distinction |
| (e.g., in a long list) */ |
| .indent-small { |
| margin-left: 2em; |
| } |
| |
| /* Tabbed pane with header (tabs) and content */ |
| tabs { |
| display: block; |
| margin: 25px 0; |
| } |
| tabs header { |
| background: inherit; |
| border: 1px solid #ccc; |
| border-bottom: 1px solid white; |
| cursor: auto; |
| display: inline-block; |
| margin-bottom: 0; |
| padding: 10px; |
| outline: none; |
| } |
| tabs header.unselected { |
| background: #eee; |
| border-bottom: 1px solid #ccc; |
| cursor: pointer; |
| } |
| tabs content { |
| border: 1px solid #ccc; |
| display: block; |
| margin-top: -1px; |
| padding: 20px; |
| } |
| tabs content.unselected { |
| display: none; |
| } |
| tabs content pre { |
| margin: 0; |
| padding: 10px; |
| } |
| |
| /* |
| * API references. |
| */ |
| |
| h2#apiReference { |
| font-size: 28pt; |
| } |
| |
| .type_name, |
| .property { |
| font-style: italic; |
| } |
| |
| .api_reference div.summary { |
| background-color: #CADEF4; |
| border: 1px solid #93B4D9; |
| font-family: "Courier New", courier, monospace; |
| margin-top: 1em; |
| padding: 0.5em; |
| text-indent: -1.5em; |
| } |
| |
| .api_reference div.summary .line { |
| padding-left: 1.5em; |
| text-indent: -1.5em; |
| } |
| |
| .api_reference div.description { |
| margin-left: 2em; |
| } |
| |
| div.summary .subdued { |
| color: #7594B8; |
| } |
| |
| .optional { |
| color: #7D7D7D; |
| } |
| |
| /* |
| * Samples. |
| */ |
| |
| #samples-controls { |
| margin: 10px 0; |
| background: #EEE; |
| padding: 10px; |
| border-radius: 10px; |
| } |
| |
| #samples-controls #search_input { |
| width: 30em; |
| } |
| |
| #samples-controls .label { |
| font-weight: bold; |
| } |
| |
| #samples-controls td { |
| border: none; |
| } |
| |
| #samples-controls td.label { |
| min-width: 150px; |
| text-align: right; |
| vertical-align: top; |
| padding-right: 10px; |
| } |
| |
| #samples-controls .sample { |
| position: relative; |
| padding-left: 80px; |
| } |
| |
| #samples-controls img.icon { |
| position: absolute; |
| width: 64px; |
| height: 64px; |
| left: 0; |
| top: 40px; |
| } |