You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1032 lines
18 KiB

  1. /* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. See License.txt in the project root for license information. */
  2. html,
  3. body {
  4. font-family: 'Segoe UI', Tahoma, Helvetica, sans-serif;
  5. height: 100%;
  6. }
  7. button,
  8. a {
  9. color: #337ab7;
  10. cursor: pointer;
  11. }
  12. button:hover,
  13. button:focus,
  14. a:hover,
  15. a:focus {
  16. color: #23527c;
  17. text-decoration: none;
  18. }
  19. a.disable,
  20. a.disable:hover {
  21. text-decoration: none;
  22. cursor: default;
  23. color: #000000;
  24. }
  25. h1, h2, h3, h4, h5, h6, .text-break {
  26. word-wrap: break-word;
  27. word-break: break-word;
  28. }
  29. h1 mark,
  30. h2 mark,
  31. h3 mark,
  32. h4 mark,
  33. h5 mark,
  34. h6 mark {
  35. padding: 0;
  36. }
  37. .inheritance .level0:before,
  38. .inheritance .level1:before,
  39. .inheritance .level2:before,
  40. .inheritance .level3:before,
  41. .inheritance .level4:before,
  42. .inheritance .level5:before,
  43. .inheritance .level6:before,
  44. .inheritance .level7:before,
  45. .inheritance .level8:before,
  46. .inheritance .level9:before {
  47. content: '↳';
  48. margin-right: 5px;
  49. }
  50. .inheritance .level0 {
  51. margin-left: 0em;
  52. }
  53. .inheritance .level1 {
  54. margin-left: 1em;
  55. }
  56. .inheritance .level2 {
  57. margin-left: 2em;
  58. }
  59. .inheritance .level3 {
  60. margin-left: 3em;
  61. }
  62. .inheritance .level4 {
  63. margin-left: 4em;
  64. }
  65. .inheritance .level5 {
  66. margin-left: 5em;
  67. }
  68. .inheritance .level6 {
  69. margin-left: 6em;
  70. }
  71. .inheritance .level7 {
  72. margin-left: 7em;
  73. }
  74. .inheritance .level8 {
  75. margin-left: 8em;
  76. }
  77. .inheritance .level9 {
  78. margin-left: 9em;
  79. }
  80. .level0.summary {
  81. margin: 2em 0 2em 0;
  82. }
  83. .level1.summary {
  84. margin: 1em 0 1em 0;
  85. }
  86. span.parametername,
  87. span.paramref,
  88. span.typeparamref {
  89. font-style: italic;
  90. }
  91. span.languagekeyword{
  92. font-weight: bold;
  93. }
  94. svg:hover path {
  95. fill: #ffffff;
  96. }
  97. .hljs {
  98. display: inline;
  99. background-color: inherit;
  100. padding: 0;
  101. }
  102. /* additional spacing fixes */
  103. .btn + .btn {
  104. margin-left: 10px;
  105. }
  106. .btn.pull-right {
  107. margin-left: 10px;
  108. margin-top: 5px;
  109. }
  110. .table {
  111. margin-bottom: 10px;
  112. }
  113. table p {
  114. margin-bottom: 0;
  115. }
  116. table a {
  117. display: inline-block;
  118. }
  119. /* Make hidden attribute compatible with old browser.*/
  120. [hidden] {
  121. display: none !important;
  122. }
  123. h1,
  124. .h1,
  125. h2,
  126. .h2,
  127. h3,
  128. .h3 {
  129. margin-top: 15px;
  130. margin-bottom: 10px;
  131. font-weight: 400;
  132. }
  133. h4,
  134. .h4,
  135. h5,
  136. .h5,
  137. h6,
  138. .h6 {
  139. margin-top: 10px;
  140. margin-bottom: 5px;
  141. }
  142. .navbar {
  143. margin-bottom: 0;
  144. }
  145. #wrapper {
  146. min-height: 100%;
  147. position: relative;
  148. }
  149. /* blends header footer and content together with gradient effect */
  150. .grad-top {
  151. /* For Safari 5.1 to 6.0 */
  152. /* For Opera 11.1 to 12.0 */
  153. /* For Firefox 3.6 to 15 */
  154. background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
  155. /* Standard syntax */
  156. height: 5px;
  157. }
  158. .grad-bottom {
  159. /* For Safari 5.1 to 6.0 */
  160. /* For Opera 11.1 to 12.0 */
  161. /* For Firefox 3.6 to 15 */
  162. background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
  163. /* Standard syntax */
  164. height: 5px;
  165. }
  166. .divider {
  167. margin: 0 5px;
  168. color: #cccccc;
  169. }
  170. hr {
  171. border-color: #cccccc;
  172. }
  173. header {
  174. position: fixed;
  175. top: 0;
  176. left: 0;
  177. right: 0;
  178. z-index: 1000;
  179. }
  180. header .navbar {
  181. border-width: 0 0 1px;
  182. border-radius: 0;
  183. }
  184. .navbar-brand {
  185. font-size: inherit;
  186. padding: 0;
  187. }
  188. .navbar-collapse {
  189. margin: 0 -15px;
  190. }
  191. .subnav {
  192. min-height: 40px;
  193. }
  194. .inheritance h5, .inheritedMembers h5{
  195. padding-bottom: 5px;
  196. border-bottom: 1px solid #ccc;
  197. }
  198. article h1, article h2, article h3, article h4{
  199. margin-top: 25px;
  200. }
  201. article h4{
  202. border: 0;
  203. font-weight: bold;
  204. margin-top: 2em;
  205. }
  206. article span.small.pull-right{
  207. margin-top: 20px;
  208. }
  209. article section {
  210. margin-left: 1em;
  211. }
  212. /*.expand-all {
  213. padding: 10px 0;
  214. }*/
  215. .breadcrumb {
  216. margin: 0;
  217. padding: 10px 0;
  218. background-color: inherit;
  219. white-space: nowrap;
  220. }
  221. .breadcrumb > li + li:before {
  222. content: "\00a0/";
  223. }
  224. #autocollapse.collapsed .navbar-header {
  225. float: none;
  226. }
  227. #autocollapse.collapsed .navbar-toggle {
  228. display: block;
  229. }
  230. #autocollapse.collapsed .navbar-collapse {
  231. border-top: 1px solid transparent;
  232. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  233. }
  234. #autocollapse.collapsed .navbar-collapse.collapse {
  235. display: none !important;
  236. }
  237. #autocollapse.collapsed .navbar-nav {
  238. float: none !important;
  239. margin: 7.5px -15px;
  240. }
  241. #autocollapse.collapsed .navbar-nav > li {
  242. float: none;
  243. }
  244. #autocollapse.collapsed .navbar-nav > li > a {
  245. padding-top: 10px;
  246. padding-bottom: 10px;
  247. }
  248. #autocollapse.collapsed .collapse.in,
  249. #autocollapse.collapsed .collapsing {
  250. display: block !important;
  251. }
  252. #autocollapse.collapsed .collapse.in .navbar-right,
  253. #autocollapse.collapsed .collapsing .navbar-right {
  254. float: none !important;
  255. }
  256. #autocollapse .form-group {
  257. width: 100%;
  258. }
  259. #autocollapse .form-control {
  260. width: 100%;
  261. }
  262. #autocollapse .navbar-header {
  263. margin-left: 0;
  264. margin-right: 0;
  265. }
  266. #autocollapse .navbar-brand {
  267. margin-left: 0;
  268. }
  269. .collapse.in,
  270. .collapsing {
  271. text-align: center;
  272. }
  273. .collapsing .navbar-form {
  274. margin: 0 auto;
  275. max-width: 400px;
  276. padding: 10px 15px;
  277. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  278. }
  279. .collapsed .collapse.in .navbar-form {
  280. margin: 0 auto;
  281. max-width: 400px;
  282. padding: 10px 15px;
  283. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  284. }
  285. .navbar .navbar-nav {
  286. display: inline-block;
  287. }
  288. .docs-search {
  289. background: white;
  290. vertical-align: middle;
  291. }
  292. .docs-search > .search-query {
  293. font-size: 14px;
  294. border: 0;
  295. width: 120%;
  296. color: #555;
  297. }
  298. .docs-search > .search-query:focus {
  299. outline: 0;
  300. }
  301. .search-results-frame {
  302. clear: both;
  303. display: table;
  304. width: 100%;
  305. }
  306. .search-results.ng-hide {
  307. display: none;
  308. }
  309. .search-results-container {
  310. padding-bottom: 1em;
  311. border-top: 1px solid #111;
  312. background: rgba(25, 25, 25, 0.5);
  313. }
  314. .search-results-container .search-results-group {
  315. padding-top: 50px !important;
  316. padding: 10px;
  317. }
  318. .search-results-group-heading {
  319. font-family: "Open Sans";
  320. padding-left: 10px;
  321. color: white;
  322. }
  323. .search-close {
  324. position: absolute;
  325. left: 50%;
  326. margin-left: -100px;
  327. color: white;
  328. text-align: center;
  329. padding: 5px;
  330. background: #333;
  331. border-top-right-radius: 5px;
  332. border-top-left-radius: 5px;
  333. width: 200px;
  334. box-shadow: 0 0 10px #111;
  335. }
  336. #search {
  337. display: none;
  338. }
  339. /* Search results display*/
  340. #search-results {
  341. max-width: 960px !important;
  342. margin-top: 120px;
  343. margin-bottom: 115px;
  344. margin-left: auto;
  345. margin-right: auto;
  346. line-height: 1.8;
  347. display: none;
  348. }
  349. #search-results>.search-list {
  350. text-align: center;
  351. font-size: 2.5rem;
  352. margin-bottom: 50px;
  353. }
  354. #search-results p {
  355. text-align: center;
  356. }
  357. #search-results p .index-loading {
  358. animation: index-loading 1.5s infinite linear;
  359. -webkit-animation: index-loading 1.5s infinite linear;
  360. -o-animation: index-loading 1.5s infinite linear;
  361. font-size: 2.5rem;
  362. }
  363. @keyframes index-loading {
  364. from { transform: scale(1) rotate(0deg);}
  365. to { transform: scale(1) rotate(360deg);}
  366. }
  367. @-webkit-keyframes index-loading {
  368. from { -webkit-transform: rotate(0deg);}
  369. to { -webkit-transform: rotate(360deg);}
  370. }
  371. @-o-keyframes index-loading {
  372. from { -o-transform: rotate(0deg);}
  373. to { -o-transform: rotate(360deg);}
  374. }
  375. #search-results .sr-items {
  376. font-size: 24px;
  377. }
  378. .sr-item {
  379. margin-bottom: 25px;
  380. }
  381. .sr-item>.item-href {
  382. font-size: 14px;
  383. color: #093;
  384. }
  385. .sr-item>.item-brief {
  386. font-size: 13px;
  387. }
  388. .pagination>li>a {
  389. color: #47A7A0
  390. }
  391. .pagination>.active>a {
  392. background-color: #47A7A0;
  393. border-color: #47A7A0;
  394. }
  395. .fixed_header {
  396. position: fixed;
  397. width: 100%;
  398. padding-bottom: 10px;
  399. padding-top: 10px;
  400. margin: 0px;
  401. top: 0;
  402. z-index: 9999;
  403. left: 0;
  404. }
  405. .fixed_header+.toc{
  406. margin-top: 50px;
  407. margin-left: 0;
  408. }
  409. .sidenav, .fixed_header, .toc {
  410. background-color: #f1f1f1;
  411. }
  412. .sidetoc {
  413. position: fixed;
  414. width: 260px;
  415. top: 150px;
  416. bottom: 0;
  417. overflow-x: hidden;
  418. overflow-y: auto;
  419. background-color: #f1f1f1;
  420. border-left: 1px solid #e7e7e7;
  421. border-right: 1px solid #e7e7e7;
  422. z-index: 1;
  423. }
  424. .sidetoc.shiftup {
  425. bottom: 70px;
  426. }
  427. body .toc{
  428. background-color: #f1f1f1;
  429. overflow-x: hidden;
  430. }
  431. .sidetoggle.ng-hide {
  432. display: block !important;
  433. }
  434. .sidetoc-expand > .caret {
  435. margin-left: 0px;
  436. margin-top: -2px;
  437. }
  438. .sidetoc-expand > .caret-side {
  439. border-left: 4px solid;
  440. border-top: 4px solid transparent;
  441. border-bottom: 4px solid transparent;
  442. margin-left: 4px;
  443. margin-top: -4px;
  444. }
  445. .sidetoc-heading {
  446. font-weight: 500;
  447. }
  448. .toc {
  449. margin: 0px 0 0 10px;
  450. padding: 0 10px;
  451. }
  452. .expand-stub {
  453. position: absolute;
  454. left: -10px;
  455. }
  456. .toc .nav > li > a.sidetoc-expand {
  457. position: absolute;
  458. top: 0;
  459. left: 0;
  460. }
  461. .toc .nav > li > a {
  462. color: #666666;
  463. margin-left: 5px;
  464. display: block;
  465. padding: 0;
  466. }
  467. .toc .nav > li > a:hover,
  468. .toc .nav > li > a:focus {
  469. color: #000000;
  470. background: none;
  471. text-decoration: inherit;
  472. }
  473. .toc .nav > li.active > a {
  474. color: #337ab7;
  475. }
  476. .toc .nav > li.active > a:hover,
  477. .toc .nav > li.active > a:focus {
  478. color: #23527c;
  479. }
  480. .toc .nav > li> .expand-stub {
  481. cursor: pointer;
  482. }
  483. .toc .nav > li.active > .expand-stub::before,
  484. .toc .nav > li.in > .expand-stub::before,
  485. .toc .nav > li.in.active > .expand-stub::before,
  486. .toc .nav > li.filtered > .expand-stub::before {
  487. content: "-";
  488. }
  489. .toc .nav > li > .expand-stub::before,
  490. .toc .nav > li.active > .expand-stub::before {
  491. content: "+";
  492. }
  493. .toc .nav > li.filtered > ul,
  494. .toc .nav > li.in > ul {
  495. display: block;
  496. }
  497. .toc .nav > li > ul {
  498. display: none;
  499. }
  500. .toc ul{
  501. font-size: 12px;
  502. margin: 0 0 0 3px;
  503. }
  504. .toc .level1 > li {
  505. font-weight: bold;
  506. margin-top: 10px;
  507. position: relative;
  508. font-size: 16px;
  509. }
  510. .toc .level2 {
  511. font-weight: normal;
  512. margin: 5px 0 0 15px;
  513. font-size: 14px;
  514. }
  515. .toc-toggle {
  516. display: none;
  517. margin: 0 15px 0px 15px;
  518. }
  519. .sidefilter {
  520. position: fixed;
  521. top: 90px;
  522. width: 260px;
  523. background-color: #f1f1f1;
  524. padding: 15px;
  525. border-left: 1px solid #e7e7e7;
  526. border-right: 1px solid #e7e7e7;
  527. z-index: 1;
  528. }
  529. .toc-filter {
  530. border-radius: 5px;
  531. background: #fff;
  532. color: #666666;
  533. padding: 5px;
  534. position: relative;
  535. margin: 0 5px 0 5px;
  536. }
  537. .toc-filter > input {
  538. border: 0;
  539. color: #666666;
  540. padding-left: 20px;
  541. padding-right: 20px;
  542. width: 100%;
  543. }
  544. .toc-filter > input:focus {
  545. outline: 0;
  546. }
  547. .toc-filter > .filter-icon {
  548. position: absolute;
  549. top: 10px;
  550. left: 5px;
  551. }
  552. .toc-filter > .clear-icon {
  553. position: absolute;
  554. top: 10px;
  555. right: 5px;
  556. }
  557. .article {
  558. margin-top: 120px;
  559. margin-bottom: 115px;
  560. }
  561. #_content>a{
  562. margin-top: 105px;
  563. }
  564. .article.grid-right {
  565. margin-left: 280px;
  566. }
  567. .inheritance hr {
  568. margin-top: 5px;
  569. margin-bottom: 5px;
  570. }
  571. .article img {
  572. max-width: 100%;
  573. }
  574. .sideaffix {
  575. margin-top: 50px;
  576. font-size: 12px;
  577. max-height: 100%;
  578. overflow: hidden;
  579. top: 100px;
  580. bottom: 10px;
  581. position: fixed;
  582. }
  583. .sideaffix.shiftup {
  584. bottom: 70px;
  585. }
  586. .affix {
  587. position: relative;
  588. height: 100%;
  589. }
  590. .sideaffix > div.contribution {
  591. margin-bottom: 20px;
  592. }
  593. .sideaffix > div.contribution > ul > li > a.contribution-link {
  594. padding: 6px 10px;
  595. font-weight: bold;
  596. font-size: 14px;
  597. }
  598. .sideaffix > div.contribution > ul > li > a.contribution-link:hover {
  599. background-color: #ffffff;
  600. }
  601. .sideaffix ul.nav > li > a:focus {
  602. background: none;
  603. }
  604. .affix h5 {
  605. font-weight: bold;
  606. text-transform: uppercase;
  607. padding-left: 10px;
  608. font-size: 12px;
  609. }
  610. .affix > ul.level1 {
  611. overflow: hidden;
  612. padding-bottom: 10px;
  613. height: calc(100% - 100px);
  614. }
  615. .affix ul > li > a:before {
  616. color: #cccccc;
  617. position: absolute;
  618. }
  619. .affix ul > li > a:hover {
  620. background: none;
  621. color: #666666;
  622. }
  623. .affix ul > li.active > a,
  624. .affix ul > li.active > a:before {
  625. color: #337ab7;
  626. }
  627. .affix ul > li > a {
  628. padding: 5px 12px;
  629. color: #666666;
  630. }
  631. .affix > ul > li.active:last-child {
  632. margin-bottom: 50px;
  633. }
  634. .affix > ul > li > a:before {
  635. content: "|";
  636. font-size: 16px;
  637. top: 1px;
  638. left: 0;
  639. }
  640. .affix > ul > li.active > a,
  641. .affix > ul > li.active > a:before {
  642. color: #337ab7;
  643. font-weight: bold;
  644. }
  645. .affix ul ul > li > a {
  646. padding: 2px 15px;
  647. }
  648. .affix ul ul > li > a:before {
  649. content: ">";
  650. font-size: 14px;
  651. top: -1px;
  652. left: 5px;
  653. }
  654. .affix ul > li > a:before,
  655. .affix ul ul {
  656. display: none;
  657. }
  658. .affix ul > li.active > ul,
  659. .affix ul > li.active > a:before,
  660. .affix ul > li > a:hover:before {
  661. display: block;
  662. white-space: nowrap;
  663. }
  664. .codewrapper {
  665. position: relative;
  666. }
  667. .trydiv {
  668. height: 0px;
  669. }
  670. .tryspan {
  671. position: absolute;
  672. top: 0px;
  673. right: 0px;
  674. border-style: solid;
  675. border-radius: 0px 4px;
  676. box-sizing: border-box;
  677. border-width: 1px;
  678. border-color: #cccccc;
  679. text-align: center;
  680. padding: 2px 8px;
  681. background-color: white;
  682. font-size: 12px;
  683. cursor: pointer;
  684. z-index: 100;
  685. display: none;
  686. color: #767676;
  687. }
  688. .tryspan:hover {
  689. background-color: #3b8bd0;
  690. color: white;
  691. border-color: #3b8bd0;
  692. }
  693. .codewrapper:hover .tryspan {
  694. display: block;
  695. }
  696. .sample-response .response-content{
  697. max-height: 200px;
  698. }
  699. footer {
  700. position: absolute;
  701. left: 0;
  702. right: 0;
  703. bottom: 0;
  704. z-index: 1000;
  705. }
  706. .footer {
  707. border-top: 1px solid #e7e7e7;
  708. background-color: #f8f8f8;
  709. padding: 15px 0;
  710. }
  711. @media (min-width: 768px) {
  712. #sidetoggle.collapse {
  713. display: block;
  714. }
  715. .topnav .navbar-nav {
  716. float: none;
  717. white-space: nowrap;
  718. }
  719. .topnav .navbar-nav > li {
  720. float: none;
  721. display: inline-block;
  722. }
  723. }
  724. @media only screen and (max-width: 768px) {
  725. #mobile-indicator {
  726. display: block;
  727. }
  728. /* TOC display for responsive */
  729. .article {
  730. margin-top: 30px !important;
  731. }
  732. header {
  733. position: static;
  734. }
  735. .topnav {
  736. text-align: center;
  737. }
  738. .sidenav {
  739. padding: 15px 0;
  740. margin-left: -15px;
  741. margin-right: -15px;
  742. }
  743. .sidefilter {
  744. position: static;
  745. width: auto;
  746. float: none;
  747. border: none;
  748. }
  749. .sidetoc {
  750. position: static;
  751. width: auto;
  752. float: none;
  753. padding-bottom: 0px;
  754. border: none;
  755. }
  756. .toc .nav > li, .toc .nav > li >a {
  757. display: inline-block;
  758. }
  759. .toc li:after {
  760. margin-left: -3px;
  761. margin-right: 5px;
  762. content: ", ";
  763. color: #666666;
  764. }
  765. .toc .level1 > li {
  766. display: block;
  767. }
  768. .toc .level1 > li:after {
  769. display: none;
  770. }
  771. .article.grid-right {
  772. margin-left: 0;
  773. }
  774. .grad-top,
  775. .grad-bottom {
  776. display: none;
  777. }
  778. .toc-toggle {
  779. display: block;
  780. }
  781. .sidetoggle.ng-hide {
  782. display: none !important;
  783. }
  784. /*.expand-all {
  785. display: none;
  786. }*/
  787. .sideaffix {
  788. display: none;
  789. }
  790. .mobile-hide {
  791. display: none;
  792. }
  793. .breadcrumb {
  794. white-space: inherit;
  795. }
  796. /* workaround for #hashtag url is no longer needed*/
  797. h1:before,
  798. h2:before,
  799. h3:before,
  800. h4:before {
  801. content: '';
  802. display: none;
  803. }
  804. }
  805. /* For toc iframe */
  806. @media (max-width: 260px) {
  807. .toc .level2 > li {
  808. display: block;
  809. }
  810. .toc .level2 > li:after {
  811. display: none;
  812. }
  813. }
  814. /* Code snippet */
  815. code {
  816. color: #717374;
  817. background-color: #f1f2f3;
  818. }
  819. a code {
  820. color: #337ab7;
  821. background-color: #f1f2f3;
  822. }
  823. a code:hover {
  824. text-decoration: underline;
  825. }
  826. .hljs-keyword {
  827. color: rgb(86,156,214);
  828. }
  829. .hljs-string {
  830. color: rgb(214, 157, 133);
  831. }
  832. pre {
  833. border: 0;
  834. }
  835. /* For code snippet line highlight */
  836. pre > code .line-highlight {
  837. background-color: #ffffcc;
  838. }
  839. /* Alerts */
  840. .alert h5 {
  841. text-transform: uppercase;
  842. font-weight: bold;
  843. margin-top: 0;
  844. }
  845. .alert h5:before {
  846. position:relative;
  847. top:1px;
  848. display:inline-block;
  849. font-family:'Glyphicons Halflings';
  850. line-height:1;
  851. -webkit-font-smoothing:antialiased;
  852. -moz-osx-font-smoothing:grayscale;
  853. margin-right: 5px;
  854. font-weight: normal;
  855. }
  856. .alert-info h5:before {
  857. content:"\e086"
  858. }
  859. .alert-warning h5:before {
  860. content:"\e127"
  861. }
  862. .alert-danger h5:before {
  863. content:"\e107"
  864. }
  865. /* For Embedded Video */
  866. div.embeddedvideo {
  867. padding-top: 56.25%;
  868. position: relative;
  869. width: 100%;
  870. }
  871. div.embeddedvideo iframe {
  872. position: absolute;
  873. top: 0;
  874. left: 0;
  875. right: 0;
  876. bottom: 0;
  877. width: 100%;
  878. height: 100%;
  879. }
  880. /* For printer */
  881. @media print{
  882. .article.grid-right {
  883. margin-top: 0px;
  884. margin-left: 0px;
  885. }
  886. .sideaffix {
  887. display: none;
  888. }
  889. .mobile-hide {
  890. display: none;
  891. }
  892. .footer {
  893. display: none;
  894. }
  895. }
  896. /* For tabbed content */
  897. .tabGroup {
  898. margin-top: 1rem; }
  899. .tabGroup ul[role="tablist"] {
  900. margin: 0;
  901. padding: 0;
  902. list-style: none; }
  903. .tabGroup ul[role="tablist"] > li {
  904. list-style: none;
  905. display: inline-block; }
  906. .tabGroup a[role="tab"] {
  907. color: #6e6e6e;
  908. box-sizing: border-box;
  909. display: inline-block;
  910. padding: 5px 7.5px;
  911. text-decoration: none;
  912. border-bottom: 2px solid #fff; }
  913. .tabGroup a[role="tab"]:hover, .tabGroup a[role="tab"]:focus, .tabGroup a[role="tab"][aria-selected="true"] {
  914. border-bottom: 2px solid #0050C5; }
  915. .tabGroup a[role="tab"][aria-selected="true"] {
  916. color: #222; }
  917. .tabGroup a[role="tab"]:hover, .tabGroup a[role="tab"]:focus {
  918. color: #0050C5; }
  919. .tabGroup a[role="tab"]:focus {
  920. outline: 1px solid #0050C5;
  921. outline-offset: -1px; }
  922. @media (min-width: 768px) {
  923. .tabGroup a[role="tab"] {
  924. padding: 5px 15px; } }
  925. .tabGroup section[role="tabpanel"] {
  926. border: 1px solid #e0e0e0;
  927. padding: 15px;
  928. margin: 0;
  929. overflow: hidden; }
  930. .tabGroup section[role="tabpanel"] > .codeHeader,
  931. .tabGroup section[role="tabpanel"] > pre {
  932. margin-left: -16px;
  933. margin-right: -16px; }
  934. .tabGroup section[role="tabpanel"] > :first-child {
  935. margin-top: 0; }
  936. .tabGroup section[role="tabpanel"] > pre:last-child {
  937. display: block;
  938. margin-bottom: -16px; }
  939. .mainContainer[dir='rtl'] main ul[role="tablist"] {
  940. margin: 0; }
  941. /* Color theme */
  942. /* These are not important, tune down **/
  943. .decalaration, .fieldValue, .parameters, .returns {
  944. color: #a2a2a2;
  945. }
  946. /* Major sections, increase visibility **/
  947. #fields, #properties, #methods, #events {
  948. font-weight: bold;
  949. margin-top: 2em;
  950. }