1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. 2 * Use of this source code is governed by a BSD-style license that can be 3 * found in the LICENSE file. 4 */ 5 6 .hidden { 7 display: none; 8 } 9 10 body { 11 font: 14px/22px 'Open Sans',arial,sans-serif; 12 margin: auto; 13 padding: 0; 14 background-color: white; 15 } 16 17 p.note, 18 p.caution, 19 p.warning { 20 margin: 1em 0 0 0; 21 padding: .2em .5em .2em .9em; 22 background-color: #F5F5F5; 23 border-top: 1px solid; 24 border-bottom: 1px solid; 25 overflow: hidden; 26 } 27 28 p.note { 29 border-color: #36C; 30 } 31 p.caution { 32 border-color: #FC3; 33 } 34 p.warning { 35 border-color: #A03; 36 } 37 38 p.warning em, 39 p.warning strong { 40 color: #A03; 41 } 42 43 a, a:link { 44 text-decoration: none; 45 color: #4787ed; 46 font-weight: 600; 47 } 48 49 a:active, 50 a:hover, 51 a:visited { 52 color: #236bb2; 53 } 54 55 #toc a { 56 color: black; 57 } 58 59 li { 60 margin: .3em 0 0 1.5em; 61 padding: 0; 62 } 63 64 ol li { 65 margin-top: 1em; 66 } 67 68 img { 69 border: none; 70 padding: 10px 0; 71 } 72 73 p img { 74 padding: 0 2px; 75 } 76 77 .code, 78 code, 79 pre { 80 font-family: monospace; 81 color: #080; 82 } 83 84 .code, 85 code{ 86 font-size: 10pt; 87 } 88 89 pre { 90 font-size: 10pt; 91 background-color: #F5F5F5; 92 margin: 1em 0 0 0; 93 padding: .99em; 94 overflow: auto; 95 word-wrap: break-word; 96 position: relative; 97 } 98 99 pre a { 100 text-decoration: underline!important; 101 } 102 103 pre b { 104 background: yellow; 105 } 106 107 pre[data-filename]::after { 108 content: attr(data-filename); 109 background-color: darkGray; 110 right: 0; 111 top: 0; 112 position: absolute; 113 font-size: 16px; 114 color: #FFF; 115 padding: 2px 25px; 116 text-transform: uppercase; 117 } 118 119 dt { 120 font-weight: bold; 121 margin: .75em 0 0 0; 122 } 123 124 dl { 125 margin: 0; 126 } 127 128 dd { 129 margin: .4em 0 0 2em; 130 padding: 0; 131 font-weight: normal; 132 } 133 134 #gc-container { 135 margin: auto; 136 margin-top: 2em; 137 max-width: 1160px; 138 padding: 0 50px; 139 height: auto; 140 } 141 142 #gc-topnav { 143 font-size: 1em; 144 margin: auto; 145 max-width: 1160px; 146 white-space: nowrap; 147 background-color: white; 148 border-bottom: 1px solid #F5F5F5; 149 line-height: 50px; 150 padding: 0 7px; 151 } 152 153 #gc-topnav * { 154 padding: 0; 155 } 156 157 #gc-topnav table { 158 border-spacing: 0; 159 } 160 161 #gc-topnav li { 162 font-weight: 600; 163 text-transform: uppercase; 164 white-space: nowrap; 165 display: inline-block; 166 margin: 0 0 0 25px; 167 } 168 #gc-topnav li:first-child { 169 margin-left: 0; 170 } 171 172 #gc-topnav ul { 173 font-size: 12px; 174 margin: 0; 175 } 176 177 #gc-topnav a { 178 color: #333; 179 } 180 #gc-topnav a:hover { 181 color: #4787ed; 182 } 183 184 #gc-topnav #chrome-logo { 185 width: 100%; 186 font-size: 1.7em; 187 } 188 189 #gc-topnav #chrome-logo a { 190 font-weight: 400; 191 color: #77787a; 192 margin: 0; 193 } 194 195 #gc-topnav #chrome-logo img { 196 vertical-align: middle; 197 } 198 199 #gc-topnav a, 200 #gc-topnav button { 201 background: none; 202 border: none; 203 color: #333; 204 cursor: pointer; 205 font-family: inherit; 206 font-size: inherit; 207 font-style: inherit; 208 margin: 0; padding: 0; 209 outline: none; 210 } 211 #gc-topnav a:focus, 212 #gc-topnav button:focus { 213 outline: 1px dotted; 214 } 215 216 #platform-chooser { 217 display: inline; 218 position: relative; 219 } 220 221 #platform-chooser-popup { 222 /* Make it appear to be an extension of the header. */ 223 background-color: white; 224 border: 1px solid #F5F5F5; 225 border-top: none; 226 z-index: 4; 227 /* Ready to be shown by popup.js. */ 228 position: absolute; 229 display: none; 230 /* Align with the button, which have padding:6px. */ 231 left: -6px; 232 } 233 234 #platform-chooser-popup button { 235 display: block; 236 padding: 6px; 237 width: 100%; 238 text-align: left; 239 } 240 #platform-chooser-popup button:hover { 241 color: #4787ed; 242 } 243 244 button.google-button { 245 background-color: #f5f5f5; 246 border: 1px solid rgba(0,0,0,0.1); 247 text-transform: uppercase; 248 border-radius: 2px 0 0 0; 249 -webkit-border-radius: 2px 0 0 0; 250 -moz-border-radius: 2px 0 0 0; 251 white-space: nowrap; 252 text-align: center; 253 height: 27px; 254 padding: 5px 12px; 255 margin: 0; 256 } 257 button.google-button:hover { 258 border-color: #c6c6c6; 259 box-shadow: 0 -1px 1px rgba(0,0,0,0.1); 260 -webkit-box-shadow: 0 -1px 1px rgba(0,0,0,0.1); 261 -moz-box-shadow: 0 -1px 1px rgba(0,0,0,0.1); 262 } 263 button.google-button:active { 264 background-color: #f1f1f1; 265 box-shadow: inset 0 0px 2px rgba(0,0,0,0.2); 266 -webkit-box-shadow: inset 0 0px 2px rgba(0,0,0,0.2); 267 -moz-box-shadow: inset 0 0px 2px rgba(0,0,0,0.2); 268 } 269 270 #scroll-to-top, 271 #send-feedback { 272 border-bottom: none; 273 position: fixed; 274 bottom: 0; 275 z-index: 5; 276 } 277 #scroll-to-top { 278 left: 0; 279 border-left: 0; 280 } 281 #send-feedback { 282 right: 0; 283 border-right: 0; 284 } 285 286 #gc-pagecontent { 287 margin: 0 0 100px 250px; 288 } 289 290 #gc-pagecontent h1 { 291 line-height: 130%; 292 font-size: 320%; 293 font-weight: normal; 294 } 295 296 #gc-pagecontent h2 { 297 font-size: 170%; 298 font-weight: normal; 299 } 300 301 #gc-pagecontent h3 { 302 font-size: 130%; 303 } 304 305 #gc-pagecontent h4 { 306 font-size: 110%; 307 } 308 309 #gc-pagecontent h5 { 310 font-size: 100%; 311 } 312 313 #gc-pagecontent table { 314 border-collapse: collapse; 315 } 316 #gc-pagecontent th { 317 text-align: left; 318 padding: 6px 12px; 319 } 320 #gc-pagecontent td { 321 padding: 6px 12px; 322 border: 1px solid #36C; 323 vertical-align: top; 324 } 325 326 /* Provide an intro table for api reference docs. */ 327 #gc-pagecontent table.intro 328 #gc-pagecontent table.intro th, 329 #gc-pagecontent table.intro td { 330 border-collapse: separate; 331 border-style: none; 332 } 333 334 #gc-pagecontent table.intro { 335 padding: 0; 336 } 337 338 #gc-pagecontent table.intro th { 339 border-style: none; 340 padding: 6px 12px; 341 text-align: left; 342 } 343 344 #gc-pagecontent table.intro td { 345 border-bottom: 1px solid #F5F5F5; 346 padding: 6px 12px; 347 vertical-align: top; 348 } 349 350 /* Provide an intro table for api reference docs. */ 351 #gc-pagecontent table.intro 352 #gc-pagecontent table.intro th, 353 #gc-pagecontent table.intro td { 354 border-collapse: separate; 355 border-style: none; 356 } 357 358 #gc-pagecontent table.intro { 359 padding: 0; 360 } 361 362 #gc-pagecontent table.intro th { 363 border-style: none; 364 padding: 6px 12px; 365 text-align: left; 366 } 367 368 #gc-pagecontent table.intro td { 369 border-bottom: 1px solid #F5F5F5; 370 padding: 6px 12px; 371 vertical-align: top; 372 } 373 374 /* Provide a "simple" version of the table to use just for layout. */ 375 #gc-pagecontent table.simple, 376 #gc-pagecontent table.simple th, 377 #gc-pagecontent table.simple td { 378 border-collapse: separate; 379 border-style: none; 380 } 381 #gc-pagecontent table.simple { 382 padding: 0; 383 } 384 #gc-pagecontent table.simple th, 385 #gc-pagecontent table.simple td { 386 padding: 1px; 387 } 388 389 #gc-footer { 390 margin: auto; 391 max-width: 1160px; 392 padding: 0 150px 0 400px; 393 } 394 395 #gc-footer .text { 396 text-align: center; 397 color: #666; 398 padding: 30px 0; 399 margin: 0; 400 } 401 402 #gc-sidebar { 403 width: 180px; 404 float: left; 405 } 406 407 /* scroll.js adds and removes the floating class depending on the scroll 408 * position. */ 409 #gc-sidebar.floating { 410 position: fixed; 411 top: 0; bottom: 0; 412 overflow: auto; 413 } 414 415 /* Sidebar link/button styling. */ 416 #gc-sidebar span, 417 #gc-sidebar a { 418 color: black; 419 display: block; 420 position: relative; 421 font-weight: normal; 422 } 423 #gc-sidebar a:hover, 424 #gc-sidebar a.selected { 425 color: #0d68ae; 426 } 427 #gc-sidebar span.level2, 428 #gc-sidebar a.level2 { 429 font-weight: bold; 430 } 431 #gc-sidebar a.button, 432 #gc-sidebar .level3, 433 #gc-sidebar .level4 { 434 color: #444; 435 } 436 437 #gc-sidebar .toggleIndicator { 438 position: absolute; 439 right: 0; 440 top: 3px; 441 background: url(../images/toggle_sprite.png) no-repeat 0 0; 442 height: 8px; 443 width: 8px; 444 } 445 #gc-sidebar .toggleIndicator.toggled { 446 background-position: 0 -9px; 447 } 448 449 /* Sidebar list styling. */ 450 #gc-sidebar ul { 451 list-style: none; 452 padding: 0; 453 margin: 0; 454 } 455 #gc-sidebar ul.level2 { 456 margin-left: 10px; 457 padding-top: 10px; 458 } 459 #gc-sidebar ul.level3 { 460 margin-left: 20px; 461 padding-top: 10px; 462 list-style: url(../images/sidearrow.png); 463 } 464 465 #gc-sidebar li { 466 margin: 0; 467 padding: 8px 0; 468 line-height: 120%; 469 } 470 471 #gc-sidebar li.level2 { 472 border-top: 1px solid #F5F5F5; 473 } 474 #gc-sidebar li.level2:first-child { 475 border-top: none; 476 } 477 478 #toc { 479 background-color: #F5F5F5; 480 float: right; 481 margin: 5px 0px 0px 0px; 482 padding: 5px; 483 width: 250px; 484 word-break: break-word; 485 /* We want this element to have a visual left-margin of 20px, but margins on 486 floated elements don't affect the borders and background of the elements 487 they float over. So we add this border to force the issue. */ 488 border-left: 20px solid white; 489 border-bottom: 20px solid white; 490 z-index: 3; 491 position: relative; 492 } 493 494 #toc * { 495 padding: 0; 496 list-style: none; 497 white-space: nowrap; 498 overflow: hidden; 499 text-overflow: ellipsis; 500 } 501 502 #toc h2 { 503 font-weight: bold; 504 font-size: 100%; 505 margin: 0; 506 border: none; 507 padding: 0; 508 } 509 510 #toc ol { 511 margin: 1em 0 0 0; 512 } 513 514 #toc ol li { 515 margin: .5em 0 .5em 1em; 516 line-height: 1.2em; 517 } 518 519 #toc ol li ol { 520 margin: 0; 521 } 522 523 #toc ol li ol li { 524 margin: .5em 0 0 1em; 525 } 526 527 #toc .api-reference { 528 border-top: 1px solid #e5e5e5; 529 } 530 531 .filtered_item { 532 line-height: 6px; 533 } 534 535 #filtered_apis { 536 margin-top: 5px; 537 } 538 539 #skipto { 540 display: none; 541 } 542 543 /* List with largeish images floated to the right. */ 544 .imaged li { 545 clear: right; 546 } 547 548 .imaged li img { 549 float: right; 550 margin-bottom: 1em; 551 } 552 553 .imaged + p { 554 clear: right; 555 } 556 557 /* small indent for better visual distinction 558 (e.g., in a long list) */ 559 .indent-small { 560 margin-left: 2em; 561 } 562 563 /* Tabbed pane with header (tabs) and content */ 564 tabs { 565 margin: 25px 0; 566 display: block; 567 } 568 tabs header { 569 display: inline-block; 570 padding: 10px; 571 border: 1px solid #ccc; 572 margin-bottom: 0; 573 background: inherit; 574 border-bottom: 1px solid white; 575 cursor: auto; 576 } 577 tabs header.unselected { 578 border-bottom: 1px solid #ccc; 579 background: #eee; 580 cursor: pointer; 581 } 582 tabs content { 583 display: block; 584 padding: 20px; 585 border: 1px solid #ccc; 586 margin-top: -1px; 587 } 588 tabs content.unselected { 589 display: none; 590 } 591 tabs content pre { 592 margin: 0; 593 padding: 10px; 594 } 595