jazzy.css 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
  1. *, *:before, *:after {
  2. box-sizing: inherit; }
  3. body {
  4. margin: 0;
  5. background: #fff;
  6. color: #333;
  7. font: 16px/1.7 "Helvetica Neue", Helvetica, Arial, sans-serif;
  8. letter-spacing: .2px;
  9. -webkit-font-smoothing: antialiased;
  10. box-sizing: border-box; }
  11. h1 {
  12. font-size: 2rem;
  13. font-weight: 700;
  14. margin: 1.275em 0 0.6em; }
  15. h2 {
  16. font-size: 1.75rem;
  17. font-weight: 700;
  18. margin: 1.275em 0 0.3em; }
  19. h3 {
  20. font-size: 1.5rem;
  21. font-weight: 700;
  22. margin: 1em 0 0.3em; }
  23. h4 {
  24. font-size: 1.25rem;
  25. font-weight: 700;
  26. margin: 1.275em 0 0.85em; }
  27. h5 {
  28. font-size: 1rem;
  29. font-weight: 700;
  30. margin: 1.275em 0 0.85em; }
  31. h6 {
  32. font-size: 1rem;
  33. font-weight: 700;
  34. margin: 1.275em 0 0.85em;
  35. color: #777; }
  36. p {
  37. margin: 0 0 1em; }
  38. ul, ol {
  39. padding: 0 0 0 2em;
  40. margin: 0 0 0.85em; }
  41. blockquote {
  42. margin: 0 0 0.85em;
  43. padding: 0 15px;
  44. color: #858585;
  45. border-left: 4px solid #e5e5e5; }
  46. img {
  47. max-width: 100%; }
  48. a {
  49. color: #4183c4;
  50. text-decoration: none; }
  51. a:hover, a:focus {
  52. outline: 0;
  53. text-decoration: underline; }
  54. a.discouraged {
  55. text-decoration: line-through; }
  56. a.discouraged:hover, a.discouraged:focus {
  57. text-decoration: underline line-through; }
  58. table {
  59. background: #fff;
  60. width: 100%;
  61. border-collapse: collapse;
  62. border-spacing: 0;
  63. overflow: auto;
  64. margin: 0 0 0.85em; }
  65. tr:nth-child(2n) {
  66. background-color: #fbfbfb; }
  67. th, td {
  68. padding: 6px 13px;
  69. border: 1px solid #ddd; }
  70. pre {
  71. margin: 0 0 1.275em;
  72. padding: .85em 1em;
  73. overflow: auto;
  74. background: #f7f7f7;
  75. font-size: .85em;
  76. font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; }
  77. code {
  78. font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; }
  79. .item-container p > code, .item-container li > code, .top-matter p > code, .top-matter li > code {
  80. background: #f7f7f7;
  81. padding: .2em; }
  82. .item-container p > code:before, .item-container p > code:after, .item-container li > code:before, .item-container li > code:after, .top-matter p > code:before, .top-matter p > code:after, .top-matter li > code:before, .top-matter li > code:after {
  83. letter-spacing: -.2em;
  84. content: "\00a0"; }
  85. pre code {
  86. padding: 0;
  87. white-space: pre; }
  88. .content-wrapper {
  89. display: flex;
  90. flex-direction: column; }
  91. @media (min-width: 768px) {
  92. .content-wrapper {
  93. flex-direction: row; } }
  94. .header {
  95. display: flex;
  96. padding: 8px;
  97. font-size: 0.875em;
  98. background: #444;
  99. color: #999; }
  100. .header-col {
  101. margin: 0;
  102. padding: 0 8px; }
  103. .header-col--primary {
  104. flex: 1; }
  105. .header-link {
  106. color: #fff; }
  107. .header-icon {
  108. padding-right: 6px;
  109. vertical-align: -4px;
  110. height: 16px; }
  111. .breadcrumbs {
  112. font-size: 0.875em;
  113. padding: 8px 16px;
  114. margin: 0;
  115. background: #fbfbfb;
  116. border-bottom: 1px solid #ddd; }
  117. .carat {
  118. height: 10px;
  119. margin: 0 5px; }
  120. .navigation {
  121. order: 2; }
  122. @media (min-width: 768px) {
  123. .navigation {
  124. order: 1;
  125. width: 25%;
  126. max-width: 300px;
  127. padding-bottom: 64px;
  128. overflow: hidden;
  129. word-wrap: normal;
  130. background: #fbfbfb;
  131. border-right: 1px solid #ddd; } }
  132. .nav-groups {
  133. list-style-type: none;
  134. padding-left: 0; }
  135. .nav-group-name {
  136. border-bottom: 1px solid #ddd;
  137. padding: 8px 0 8px 16px; }
  138. .nav-group-name-link {
  139. color: #333; }
  140. .nav-group-tasks {
  141. margin: 8px 0;
  142. padding: 0 0 0 8px; }
  143. .nav-group-task {
  144. font-size: 1em;
  145. list-style-type: none;
  146. white-space: nowrap; }
  147. .nav-group-task-link {
  148. color: #808080; }
  149. .main-content {
  150. order: 1; }
  151. @media (min-width: 768px) {
  152. .main-content {
  153. order: 2;
  154. flex: 1;
  155. padding-bottom: 60px; } }
  156. .section {
  157. padding: 0 32px;
  158. border-bottom: 1px solid #ddd; }
  159. .section-content {
  160. max-width: 834px;
  161. margin: 0 auto;
  162. padding: 16px 0; }
  163. .section-name {
  164. color: #666;
  165. display: block; }
  166. .section-name p {
  167. margin-bottom: inherit; }
  168. .declaration .highlight {
  169. overflow-x: initial;
  170. padding: 8px 0;
  171. margin: 0;
  172. background-color: transparent;
  173. border: none; }
  174. .task-group-section {
  175. border-top: 1px solid #ddd; }
  176. .task-group {
  177. padding-top: 0px; }
  178. .task-name-container a[name]:before {
  179. content: "";
  180. display: block; }
  181. .section-name-container {
  182. position: relative; }
  183. .section-name-container .section-name-link {
  184. position: absolute;
  185. top: 0;
  186. left: 0;
  187. bottom: 0;
  188. right: 0;
  189. margin-bottom: 0; }
  190. .section-name-container .section-name {
  191. position: relative;
  192. pointer-events: none;
  193. z-index: 1; }
  194. .section-name-container .section-name a {
  195. pointer-events: auto; }
  196. .item-container {
  197. padding: 0; }
  198. .item {
  199. padding-top: 8px;
  200. width: 100%;
  201. list-style-type: none; }
  202. .item a[name]:before {
  203. content: "";
  204. display: block; }
  205. .item .token, .item .direct-link {
  206. padding-left: 3px;
  207. margin-left: 0px;
  208. font-size: 1rem; }
  209. .item .declaration-note {
  210. font-size: .85em;
  211. color: #808080;
  212. font-style: italic; }
  213. .pointer-container {
  214. border-bottom: 1px solid #ddd;
  215. left: -23px;
  216. padding-bottom: 13px;
  217. position: relative;
  218. width: 110%; }
  219. .pointer {
  220. left: 21px;
  221. top: 7px;
  222. display: block;
  223. position: absolute;
  224. width: 12px;
  225. height: 12px;
  226. border-left: 1px solid #ddd;
  227. border-top: 1px solid #ddd;
  228. background: #fff;
  229. transform: rotate(45deg); }
  230. .height-container {
  231. display: none;
  232. position: relative;
  233. width: 100%;
  234. overflow: hidden; }
  235. .height-container .section {
  236. background: #fff;
  237. border: 1px solid #ddd;
  238. border-top-width: 0;
  239. padding-top: 10px;
  240. padding-bottom: 5px;
  241. padding: 8px 16px; }
  242. .aside, .language {
  243. padding: 6px 12px;
  244. margin: 12px 0;
  245. border-left: 5px solid #dddddd;
  246. overflow-y: hidden; }
  247. .aside .aside-title, .language .aside-title {
  248. font-size: 9px;
  249. letter-spacing: 2px;
  250. text-transform: uppercase;
  251. padding-bottom: 0;
  252. margin: 0;
  253. color: #aaa;
  254. -webkit-user-select: none; }
  255. .aside p:last-child, .language p:last-child {
  256. margin-bottom: 0; }
  257. .language {
  258. border-left: 5px solid #cde9f4; }
  259. .language .aside-title {
  260. color: #4183c4; }
  261. .aside-warning, .aside-deprecated, .aside-unavailable {
  262. border-left: 5px solid #ff6666; }
  263. .aside-warning .aside-title, .aside-deprecated .aside-title, .aside-unavailable .aside-title {
  264. color: #ff0000; }
  265. .graybox {
  266. border-collapse: collapse;
  267. width: 100%; }
  268. .graybox p {
  269. margin: 0;
  270. word-break: break-word;
  271. min-width: 50px; }
  272. .graybox td {
  273. border: 1px solid #ddd;
  274. padding: 5px 25px 5px 10px;
  275. vertical-align: middle; }
  276. .graybox tr td:first-of-type {
  277. text-align: right;
  278. padding: 7px;
  279. vertical-align: top;
  280. word-break: normal;
  281. width: 40px; }
  282. .slightly-smaller {
  283. font-size: 0.9em; }
  284. .footer {
  285. padding: 8px 16px;
  286. background: #444;
  287. color: #ddd;
  288. font-size: 0.8em; }
  289. .footer p {
  290. margin: 8px 0; }
  291. .footer a {
  292. color: #fff; }
  293. html.dash .header, html.dash .breadcrumbs, html.dash .navigation {
  294. display: none; }
  295. html.dash .height-container {
  296. display: block; }
  297. form[role=search] input {
  298. font: 16px/1.7 "Helvetica Neue", Helvetica, Arial, sans-serif;
  299. font-size: 14px;
  300. line-height: 24px;
  301. padding: 0 10px;
  302. margin: 0;
  303. border: none;
  304. border-radius: 1em; }
  305. .loading form[role=search] input {
  306. background: white url(../img/spinner.gif) center right 4px no-repeat; }
  307. form[role=search] .tt-menu {
  308. margin: 0;
  309. min-width: 300px;
  310. background: #fbfbfb;
  311. color: #333;
  312. border: 1px solid #ddd; }
  313. form[role=search] .tt-highlight {
  314. font-weight: bold; }
  315. form[role=search] .tt-suggestion {
  316. font: 16px/1.7 "Helvetica Neue", Helvetica, Arial, sans-serif;
  317. padding: 0 8px; }
  318. form[role=search] .tt-suggestion span {
  319. display: table-cell;
  320. white-space: nowrap; }
  321. form[role=search] .tt-suggestion .doc-parent-name {
  322. width: 100%;
  323. text-align: right;
  324. font-weight: normal;
  325. font-size: 0.9em;
  326. padding-left: 16px; }
  327. form[role=search] .tt-suggestion:hover,
  328. form[role=search] .tt-suggestion.tt-cursor {
  329. cursor: pointer;
  330. background-color: #4183c4;
  331. color: #fff; }
  332. form[role=search] .tt-suggestion:hover .doc-parent-name,
  333. form[role=search] .tt-suggestion.tt-cursor .doc-parent-name {
  334. color: #fff; }