No Description
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.

theme.css 23KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940
  1. @charset "UTF-8";
  2. @import url(//fonts.googleapis.com/css?family=Montserrat:400|Muli:300,400|Inconsolata);
  3. #top-github-link, #body #breadcrumbs {
  4. position: relative;
  5. top: 50%;
  6. -webkit-transform: translateY(-50%);
  7. -moz-transform: translateY(-50%);
  8. -o-transform: translateY(-50%);
  9. -ms-transform: translateY(-50%);
  10. transform: translateY(-50%); }
  11. .button, .button-secondary {
  12. display: inline-block;
  13. padding: 7px 12px; }
  14. .button:active, .button-secondary:active {
  15. margin: 2px 0 -2px 0; }
  16. body {
  17. background: #fff;
  18. color: #555;
  19. -webkit-font-smoothing: antialiased;
  20. -moz-osx-font-smoothing: grayscale; }
  21. a {
  22. color: #1694CA; }
  23. a:hover {
  24. color: #0e6185; }
  25. pre {
  26. position: relative; }
  27. .bg {
  28. background: #fff;
  29. border: 1px solid #eaeaea; }
  30. b, strong, label, th {
  31. font-weight: 600; }
  32. .default-animation, #header #logo-svg, #header #logo-svg path, #sidebar, #sidebar ul, #body, #body .padding, #body .nav {
  33. -webkit-transition: all 0.5s ease;
  34. -moz-transition: all 0.5s ease;
  35. transition: all 0.5s ease; }
  36. fieldset {
  37. border: 1px solid #ddd; }
  38. textarea, input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], select[multiple=multiple] {
  39. background-color: white;
  40. border: 1px solid #ddd;
  41. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); }
  42. textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, select[multiple=multiple]:hover {
  43. border-color: #c4c4c4; }
  44. textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus {
  45. border-color: #1694CA;
  46. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(19, 131, 179, 0.7); }
  47. #header {
  48. background: #1694CA;
  49. color: #fff;
  50. text-align: center;
  51. padding: 1rem; }
  52. #header a {
  53. display: inline-block; }
  54. #header #logo-svg {
  55. width: 8rem;
  56. height: 2rem; }
  57. #header #logo-svg path {
  58. fill: #fff; }
  59. .searchbox {
  60. margin-top: 0.5rem;
  61. position: relative;
  62. border: 1px solid #19a5e1;
  63. background: #1383b3;
  64. border-radius: 4px; }
  65. .searchbox label {
  66. color: rgba(255, 255, 255, 0.8);
  67. position: absolute;
  68. left: 10px;
  69. top: 3px; }
  70. .searchbox span {
  71. color: rgba(255, 255, 255, 0.6);
  72. position: absolute;
  73. right: 10px;
  74. top: 3px;
  75. cursor: pointer; }
  76. .searchbox span:hover {
  77. color: rgba(255, 255, 255, 0.9); }
  78. .searchbox input {
  79. display: inline-block;
  80. color: #fff;
  81. width: 100%;
  82. height: 30px;
  83. background: transparent;
  84. border: 0;
  85. padding: 0 25px 0 30px;
  86. margin: 0;
  87. font-weight: 400; }
  88. .searchbox input::-webkit-input-placeholder {
  89. color: rgba(255, 255, 255, 0.6); }
  90. .searchbox input::-moz-placeholder {
  91. color: rgba(255, 255, 255, 0.6); }
  92. .searchbox input:-moz-placeholder {
  93. color: rgba(255, 255, 255, 0.6); }
  94. .searchbox input:-ms-input-placeholder {
  95. color: rgba(255, 255, 255, 0.6); }
  96. #sidebar-toggle {
  97. display: none; }
  98. @media only all and (max-width: 47.938em) {
  99. #sidebar-toggle {
  100. display: inline-block; } }
  101. #sidebar {
  102. background-color: #38424D;
  103. position: fixed;
  104. top: 0;
  105. width: 300px;
  106. bottom: 0;
  107. left: 0;
  108. font-weight: 500;
  109. font-size: 15px; }
  110. #sidebar a {
  111. color: #bbbbbb; }
  112. #sidebar a:hover {
  113. color: #d5d5d5; }
  114. #sidebar a.subtitle {
  115. color: rgba(187, 187, 187, 0.6); }
  116. #sidebar hr {
  117. border-bottom: 1px solid #323a44; }
  118. #sidebar a.padding {
  119. padding: 0 1rem; }
  120. #sidebar h5 {
  121. margin: 2rem 0 0;
  122. position: relative;
  123. line-height: 2; }
  124. #sidebar h5 a {
  125. display: block;
  126. margin-left: 0;
  127. margin-right: 0;
  128. padding-left: 1rem;
  129. padding-right: 1rem; }
  130. #sidebar h5 i {
  131. color: rgba(187, 187, 187, 0.6);
  132. position: absolute;
  133. right: 0.6rem;
  134. top: 0.7rem;
  135. font-size: 80%; }
  136. #sidebar h5.parent a {
  137. background: #293038;
  138. color: #c8c8c8 !important; }
  139. #sidebar h5.active a {
  140. background: #fff;
  141. color: #555 !important; }
  142. #sidebar h5.active i {
  143. color: #555 !important; }
  144. #sidebar h5 + ul.topics {
  145. display: none;
  146. margin-top: 0; }
  147. #sidebar h5.parent + ul.topics, #sidebar h5.active + ul.topics {
  148. display: block; }
  149. #sidebar ul {
  150. list-style: none;
  151. padding: 0;
  152. margin: 0; }
  153. #sidebar ul.searched a {
  154. color: #888888; }
  155. #sidebar ul.searched .search-match a {
  156. color: #d5d5d5; }
  157. #sidebar ul.searched .search-match a:hover {
  158. color: #eeeeee; }
  159. #sidebar ul.topics {
  160. margin: 0 1rem; }
  161. #sidebar ul.topics.searched ul {
  162. display: block; }
  163. #sidebar ul.topics ul {
  164. display: none;
  165. padding-bottom: 1rem; }
  166. #sidebar ul.topics ul ul {
  167. padding-bottom: 0; }
  168. #sidebar ul.topics li.parent ul, #sidebar ul.topics > li.active ul {
  169. display: block; }
  170. #sidebar ul.topics > li > a {
  171. line-height: 2rem;
  172. font-size: 1.1rem; }
  173. #sidebar ul.topics > li > a b {
  174. opacity: 0.5;
  175. font-weight: normal; }
  176. #sidebar ul.topics > li > a .fa {
  177. margin-top: 9px; }
  178. #sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
  179. background: #2d353e;
  180. margin-left: -1rem;
  181. margin-right: -1rem;
  182. padding-left: 1rem;
  183. padding-right: 1rem; }
  184. #sidebar ul li.active > a {
  185. background: #fff;
  186. color: #555 !important;
  187. margin-left: -1rem;
  188. margin-right: -1rem;
  189. padding-left: 1rem;
  190. padding-right: 1rem; }
  191. #sidebar ul li {
  192. padding: 0; }
  193. #sidebar ul li.visited + span {
  194. margin-right: 16px; }
  195. #sidebar ul li a {
  196. display: block;
  197. padding: 2px 0; }
  198. #sidebar ul li a span {
  199. text-overflow: ellipsis;
  200. overflow: hidden;
  201. white-space: nowrap;
  202. display: block; }
  203. #sidebar ul li > a {
  204. padding: 4px 0; }
  205. #sidebar ul li .fa {
  206. display: none;
  207. float: right;
  208. font-size: 13px;
  209. min-width: 16px;
  210. margin: 4px 0 0 0;
  211. text-align: right; }
  212. #sidebar ul li.visited > a .read-icon {
  213. color: #1694CA;
  214. display: inline; }
  215. #sidebar ul li li {
  216. padding-left: 1rem;
  217. text-indent: 0.2rem; }
  218. #main {
  219. background: #f7f7f7;
  220. margin: 0 0 1.563rem 0; }
  221. #body {
  222. position: relative;
  223. margin-left: 300px;
  224. min-height: 100%; }
  225. #body img, #body .video-container {
  226. margin: 3rem auto;
  227. display: block;
  228. text-align: center; }
  229. #body img.border, #body .video-container.border {
  230. border: 2px solid #e6e6e6 !important;
  231. padding: 2px; }
  232. #body img.shadow, #body .video-container.shadow {
  233. box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
  234. #body .bordered {
  235. border: 1px solid #ccc; }
  236. #body .padding {
  237. padding: 3rem 6rem; }
  238. @media only all and (max-width: 59.938em) {
  239. #body .padding {
  240. position: static;
  241. padding: 15px 3rem; } }
  242. @media only all and (max-width: 47.938em) {
  243. #body .padding {
  244. padding: 5px 1rem; } }
  245. #body h1 + hr {
  246. margin-top: -1.7rem;
  247. margin-bottom: 3rem; }
  248. @media only all and (max-width: 59.938em) {
  249. #body #navigation {
  250. position: static;
  251. margin-right: 0 !important;
  252. width: 100%;
  253. display: table; } }
  254. #body .nav {
  255. position: fixed;
  256. top: 0;
  257. bottom: 0;
  258. width: 4rem;
  259. font-size: 50px;
  260. height: 100%;
  261. cursor: pointer;
  262. display: table;
  263. text-align: center; }
  264. #body .nav > i {
  265. display: table-cell;
  266. vertical-align: middle;
  267. text-align: center; }
  268. @media only all and (max-width: 59.938em) {
  269. #body .nav {
  270. display: table-cell;
  271. position: static;
  272. top: auto;
  273. width: 50%;
  274. text-align: center;
  275. height: 100px;
  276. line-height: 100px;
  277. padding-top: 0; }
  278. #body .nav > i {
  279. display: inline-block; } }
  280. #body .nav:hover {
  281. background: #F6F6F6; }
  282. #body .nav.nav-pref {
  283. left: 0; }
  284. #body .nav.nav-next {
  285. right: 0; }
  286. #body-inner {
  287. margin-bottom: 5rem; }
  288. #chapter {
  289. display: flex;
  290. align-items: center;
  291. justify-content: center;
  292. height: 100%;
  293. padding: 2rem 0; }
  294. #chapter #body-inner {
  295. padding-bottom: 3rem;
  296. max-width: 80%; }
  297. #chapter h3 {
  298. font-family: "Muli", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
  299. font-weight: 400;
  300. text-align: center; }
  301. #chapter h1 {
  302. font-size: 5rem;
  303. border-bottom: 4px solid #F0F2F4; }
  304. #chapter p {
  305. text-align: center;
  306. font-size: 1.2rem; }
  307. #footer {
  308. padding: 3rem 1rem;
  309. color: #a2a2a2;
  310. font-size: 13px; }
  311. #footer p {
  312. margin: 0; }
  313. body {
  314. font-family: "Muli", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
  315. letter-spacing: -0.03rem;
  316. font-weight: 400; }
  317. h1, h2, h3, h4, h5, h6 {
  318. font-family: "Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
  319. font-weight: 400;
  320. text-rendering: optimizeLegibility;
  321. line-height: 150%;
  322. letter-spacing: -0px; }
  323. h1 {
  324. text-align: center;
  325. letter-spacing: -3px; }
  326. h2 {
  327. letter-spacing: -2px; }
  328. h3 {
  329. letter-spacing: -1px; }
  330. blockquote {
  331. border-left: 10px solid #F0F2F4; }
  332. blockquote p {
  333. font-size: 1.1rem;
  334. color: #999; }
  335. blockquote cite {
  336. display: block;
  337. text-align: right;
  338. color: #666;
  339. font-size: 1.2rem; }
  340. blockquote {
  341. position: relative; }
  342. blockquote blockquote {
  343. position: static; }
  344. blockquote > blockquote > blockquote {
  345. margin: 0; }
  346. blockquote > blockquote > blockquote p {
  347. padding: 15px;
  348. display: block;
  349. font-size: 1rem;
  350. margin-top: 0rem;
  351. margin-bottom: 0rem;
  352. color: #666; }
  353. blockquote > blockquote > blockquote p:first-child:before {
  354. position: absolute;
  355. top: 2px;
  356. color: #fff;
  357. font-family: FontAwesome;
  358. content: '';
  359. left: 10px; }
  360. blockquote > blockquote > blockquote p:first-child:after {
  361. position: absolute;
  362. top: 2px;
  363. color: #fff;
  364. left: 2rem;
  365. font-weight: bold;
  366. content: 'Info'; }
  367. blockquote > blockquote > blockquote > p {
  368. margin-left: -71px;
  369. border-top: 30px solid #F0B37E;
  370. background: #FFF2DB; }
  371. blockquote > blockquote > blockquote > blockquote > p {
  372. margin-left: -94px;
  373. border-top: 30px solid rgba(217, 83, 79, 0.8);
  374. background: #FAE2E2; }
  375. blockquote > blockquote > blockquote > blockquote > p:first-child:after {
  376. content: 'Warning'; }
  377. blockquote > blockquote > blockquote > blockquote > blockquote > p {
  378. margin-left: -118px;
  379. border-top: 30px solid #6AB0DE;
  380. background: #E7F2FA; }
  381. blockquote > blockquote > blockquote > blockquote > blockquote > p:first-child:after {
  382. content: 'Note'; }
  383. blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p {
  384. margin-left: -142px;
  385. border-top: 30px solid rgba(92, 184, 92, 0.8);
  386. background: #E6F9E6; }
  387. blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p:first-child:after {
  388. content: 'Tip'; }
  389. code,
  390. kbd,
  391. pre,
  392. samp {
  393. font-family: "Inconsolata", monospace; }
  394. code {
  395. background: #f9f2f4;
  396. color: #9c1d3d;
  397. padding: .2rem .4rem;
  398. border-radius: 3px; }
  399. pre {
  400. padding: 1rem;
  401. margin: 2rem 0;
  402. background: #f6f6f6;
  403. border: 1px solid #ddd;
  404. border-radius: 2px;
  405. line-height: 1.15;
  406. font-size: 1rem; }
  407. pre code {
  408. color: #237794;
  409. background: inherit;
  410. font-size: 1rem; }
  411. hr {
  412. border-bottom: 4px solid #F0F2F4; }
  413. .page-title {
  414. margin-top: -25px;
  415. padding: 25px;
  416. float: left;
  417. clear: both;
  418. background: #1694CA;
  419. color: #fff; }
  420. #body a.anchor-link {
  421. color: #ccc; }
  422. #body a.anchor-link:hover {
  423. color: #1694CA; }
  424. .scrollbar-inner > .scroll-element .scroll-element_track {
  425. background-color: rgba(255, 255, 255, 0.3); }
  426. .scrollbar-inner > .scroll-element .scroll-bar {
  427. background-color: #b5d1eb; }
  428. .scrollbar-inner > .scroll-element:hover .scroll-bar {
  429. background-color: #ccc; }
  430. .scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar {
  431. background-color: #ccc; }
  432. table {
  433. border: 1px solid #eaeaea;
  434. table-layout: auto; }
  435. th {
  436. background: #f7f7f7;
  437. padding: 0.5rem; }
  438. td {
  439. padding: 0.5rem;
  440. border: 1px solid #eaeaea; }
  441. .button {
  442. background: #1694CA;
  443. color: #fff;
  444. box-shadow: 0 3px 0 #1380ae; }
  445. .button:hover {
  446. background: #1380ae;
  447. box-shadow: 0 3px 0 #106c93;
  448. color: #fff; }
  449. .button:active {
  450. box-shadow: 0 1px 0 #106c93; }
  451. .button-secondary {
  452. background: #F8B450;
  453. color: #fff;
  454. box-shadow: 0 3px 0 #f7a733; }
  455. .button-secondary:hover {
  456. background: #f7a733;
  457. box-shadow: 0 3px 0 #f69b15;
  458. color: #fff; }
  459. .button-secondary:active {
  460. box-shadow: 0 1px 0 #f69b15; }
  461. .bullets {
  462. margin: 1.7rem 0;
  463. margin-left: -0.85rem;
  464. margin-right: -0.85rem;
  465. overflow: auto; }
  466. .bullet {
  467. float: left;
  468. padding: 0 0.85rem; }
  469. .two-column-bullet {
  470. width: 50%; }
  471. @media only all and (max-width: 47.938em) {
  472. .two-column-bullet {
  473. width: 100%; } }
  474. .three-column-bullet {
  475. width: 33.33333%; }
  476. @media only all and (max-width: 47.938em) {
  477. .three-column-bullet {
  478. width: 100%; } }
  479. .four-column-bullet {
  480. width: 25%; }
  481. @media only all and (max-width: 47.938em) {
  482. .four-column-bullet {
  483. width: 100%; } }
  484. .bullet-icon {
  485. float: left;
  486. background: #1694CA;
  487. padding: 0.875rem;
  488. width: 3.5rem;
  489. height: 3.5rem;
  490. border-radius: 50%;
  491. color: #fff;
  492. font-size: 1.75rem;
  493. text-align: center; }
  494. .bullet-icon-1 {
  495. background: #1694CA; }
  496. .bullet-icon-2 {
  497. background: #16cac4; }
  498. .bullet-icon-3 {
  499. background: #b2ca16; }
  500. .bullet-content {
  501. margin-left: 4.55rem; }
  502. .tooltipped {
  503. position: relative; }
  504. .tooltipped:after {
  505. position: absolute;
  506. z-index: 1000000;
  507. display: none;
  508. padding: 5px 8px;
  509. font: normal normal 11px/1.5 "Muli", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
  510. color: #fff;
  511. text-align: center;
  512. text-decoration: none;
  513. text-shadow: none;
  514. text-transform: none;
  515. letter-spacing: normal;
  516. word-wrap: break-word;
  517. white-space: pre;
  518. pointer-events: none;
  519. content: attr(aria-label);
  520. background: rgba(0, 0, 0, 0.8);
  521. border-radius: 3px;
  522. -webkit-font-smoothing: subpixel-antialiased; }
  523. .tooltipped:before {
  524. position: absolute;
  525. z-index: 1000001;
  526. display: none;
  527. width: 0;
  528. height: 0;
  529. color: rgba(0, 0, 0, 0.8);
  530. pointer-events: none;
  531. content: "";
  532. border: 5px solid transparent; }
  533. .tooltipped:hover:before, .tooltipped:hover:after,
  534. .tooltipped:active:before,
  535. .tooltipped:active:after,
  536. .tooltipped:focus:before,
  537. .tooltipped:focus:after {
  538. display: inline-block;
  539. text-decoration: none; }
  540. .tooltipped-s:after,
  541. .tooltipped-se:after,
  542. .tooltipped-sw:after {
  543. top: 100%;
  544. right: 50%;
  545. margin-top: 5px; }
  546. .tooltipped-s:before,
  547. .tooltipped-se:before,
  548. .tooltipped-sw:before {
  549. top: auto;
  550. right: 50%;
  551. bottom: -5px;
  552. margin-right: -5px;
  553. border-bottom-color: rgba(0, 0, 0, 0.8); }
  554. .tooltipped-se:after {
  555. right: auto;
  556. left: 50%;
  557. margin-left: -15px; }
  558. .tooltipped-sw:after {
  559. margin-right: -15px; }
  560. .tooltipped-n:after,
  561. .tooltipped-ne:after,
  562. .tooltipped-nw:after {
  563. right: 50%;
  564. bottom: 100%;
  565. margin-bottom: 5px; }
  566. .tooltipped-n:before,
  567. .tooltipped-ne:before,
  568. .tooltipped-nw:before {
  569. top: -5px;
  570. right: 50%;
  571. bottom: auto;
  572. margin-right: -5px;
  573. border-top-color: rgba(0, 0, 0, 0.8); }
  574. .tooltipped-ne:after {
  575. right: auto;
  576. left: 50%;
  577. margin-left: -15px; }
  578. .tooltipped-nw:after {
  579. margin-right: -15px; }
  580. .tooltipped-s:after,
  581. .tooltipped-n:after {
  582. transform: translateX(50%); }
  583. .tooltipped-w:after {
  584. right: 100%;
  585. bottom: 50%;
  586. margin-right: 5px;
  587. transform: translateY(50%); }
  588. .tooltipped-w:before {
  589. top: 50%;
  590. bottom: 50%;
  591. left: -5px;
  592. margin-top: -5px;
  593. border-left-color: rgba(0, 0, 0, 0.8); }
  594. .tooltipped-e:after {
  595. bottom: 50%;
  596. left: 100%;
  597. margin-left: 5px;
  598. transform: translateY(50%); }
  599. .tooltipped-e:before {
  600. top: 50%;
  601. right: -5px;
  602. bottom: 50%;
  603. margin-top: -5px;
  604. border-right-color: rgba(0, 0, 0, 0.8); }
  605. /*************** SCROLLBAR BASE CSS ***************/
  606. .highlightable {
  607. padding: 25px 0 15px; }
  608. .scroll-wrapper {
  609. overflow: hidden !important;
  610. padding: 0 !important;
  611. position: relative; }
  612. .scroll-wrapper > .scroll-content {
  613. border: none !important;
  614. box-sizing: content-box !important;
  615. height: auto;
  616. left: 0;
  617. margin: 0;
  618. max-height: none;
  619. max-width: none !important;
  620. overflow: scroll !important;
  621. padding: 0;
  622. position: relative !important;
  623. top: 0;
  624. width: auto !important; }
  625. .scroll-wrapper > .scroll-content::-webkit-scrollbar {
  626. height: 0;
  627. width: 0; }
  628. .scroll-element {
  629. display: none; }
  630. .scroll-element, .scroll-element div {
  631. box-sizing: content-box; }
  632. .scroll-element.scroll-x.scroll-scrollx_visible,
  633. .scroll-element.scroll-y.scroll-scrolly_visible {
  634. display: block; }
  635. .scroll-element .scroll-bar,
  636. .scroll-element .scroll-arrow {
  637. cursor: default; }
  638. .scroll-textarea > .scroll-content {
  639. overflow: hidden !important; }
  640. .scroll-textarea > .scroll-content > textarea {
  641. border: none !important;
  642. box-sizing: border-box;
  643. height: 100% !important;
  644. margin: 0;
  645. max-height: none !important;
  646. max-width: none !important;
  647. overflow: scroll !important;
  648. outline: none;
  649. padding: 2px;
  650. position: relative !important;
  651. top: 0;
  652. width: 100% !important; }
  653. .scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
  654. height: 0;
  655. width: 0; }
  656. /*************** SIMPLE INNER SCROLLBAR ***************/
  657. .scrollbar-inner > .scroll-element,
  658. .scrollbar-inner > .scroll-element div {
  659. border: none;
  660. margin: 0;
  661. padding: 0;
  662. position: absolute;
  663. z-index: 10; }
  664. .scrollbar-inner > .scroll-element div {
  665. display: block;
  666. height: 100%;
  667. left: 0;
  668. top: 0;
  669. width: 100%; }
  670. .scrollbar-inner > .scroll-element.scroll-x {
  671. bottom: 2px;
  672. height: 8px;
  673. left: 0;
  674. width: 100%; }
  675. .scrollbar-inner > .scroll-element.scroll-y {
  676. height: 100%;
  677. right: 2px;
  678. top: 0;
  679. width: 8px; }
  680. .scrollbar-inner > .scroll-element .scroll-element_outer {
  681. overflow: hidden; }
  682. .scrollbar-inner > .scroll-element .scroll-element_outer,
  683. .scrollbar-inner > .scroll-element .scroll-element_track,
  684. .scrollbar-inner > .scroll-element .scroll-bar {
  685. -webkit-border-radius: 8px;
  686. -moz-border-radius: 8px;
  687. border-radius: 8px; }
  688. .scrollbar-inner > .scroll-element .scroll-element_track,
  689. .scrollbar-inner > .scroll-element .scroll-bar {
  690. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  691. filter: alpha(opacity=30);
  692. opacity: 0.3; }
  693. /* update scrollbar offset if both scrolls are visible */
  694. .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
  695. left: -12px; }
  696. .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
  697. top: -12px; }
  698. .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  699. left: -12px; }
  700. .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  701. top: -12px; }
  702. .lightbox-active #body {
  703. overflow: visible; }
  704. .lightbox-active #body .padding {
  705. overflow: visible; }
  706. #github-contrib i {
  707. vertical-align: middle; }
  708. .featherlight img {
  709. margin: 0 !important; }
  710. .lifecycle #body-inner ul {
  711. list-style: none;
  712. margin: 0;
  713. padding: 2rem 0 0;
  714. position: relative; }
  715. .lifecycle #body-inner ol {
  716. margin: 1rem 0 1rem 0;
  717. padding: 2rem;
  718. position: relative; }
  719. .lifecycle #body-inner ol li {
  720. margin-left: 1rem; }
  721. .lifecycle #body-inner ol strong, .lifecycle #body-inner ol label, .lifecycle #body-inner ol th {
  722. text-decoration: underline; }
  723. .lifecycle #body-inner ol ol {
  724. margin-left: -1rem; }
  725. .lifecycle #body-inner h3[class*='level'] {
  726. font-size: 20px;
  727. position: absolute;
  728. margin: 0;
  729. padding: 4px 10px;
  730. right: 0;
  731. z-index: 1000;
  732. color: #fff;
  733. background: #1ABC9C; }
  734. .lifecycle #body-inner ol h3 {
  735. margin-top: 1rem !important;
  736. right: 2rem !important; }
  737. .lifecycle #body-inner .level-1 + ol {
  738. background: #f6fefc;
  739. border: 4px solid #1ABC9C;
  740. color: #16A085; }
  741. .lifecycle #body-inner .level-1 + ol h3 {
  742. background: #2ECC71; }
  743. .lifecycle #body-inner .level-2 + ol {
  744. background: #f7fdf9;
  745. border: 4px solid #2ECC71;
  746. color: #27AE60; }
  747. .lifecycle #body-inner .level-2 + ol h3 {
  748. background: #3498DB; }
  749. .lifecycle #body-inner .level-3 + ol {
  750. background: #f3f9fd;
  751. border: 4px solid #3498DB;
  752. color: #2980B9; }
  753. .lifecycle #body-inner .level-3 + ol h3 {
  754. background: #34495E; }
  755. .lifecycle #body-inner .level-4 + ol {
  756. background: #e4eaf0;
  757. border: 4px solid #34495E;
  758. color: #2C3E50; }
  759. .lifecycle #body-inner .level-4 + ol h3 {
  760. background: #34495E; }
  761. #top-bar {
  762. background: #F6F6F6;
  763. border-radius: 2px;
  764. margin: 0rem -1rem 2rem;
  765. padding: 0 1rem;
  766. height: 0;
  767. min-height: 3rem; }
  768. #top-github-link {
  769. position: relative;
  770. z-index: 1;
  771. float: right;
  772. display: block; }
  773. #body #breadcrumbs {
  774. height: auto;
  775. display: block;
  776. margin-bottom: 0;
  777. padding-left: 0;
  778. line-height: 1.4; }
  779. #body #breadcrumbs span {
  780. padding: 0 0.1rem; }
  781. @media only all and (max-width: 59.938em) {
  782. #sidebar {
  783. width: 230px; }
  784. #body {
  785. margin-left: 230px; } }
  786. @media only all and (max-width: 47.938em) {
  787. #sidebar {
  788. width: 230px;
  789. left: -230px; }
  790. #body {
  791. margin-left: 0;
  792. width: 100%; }
  793. .sidebar-hidden {
  794. overflow: hidden; }
  795. .sidebar-hidden #sidebar {
  796. left: 0; }
  797. .sidebar-hidden #body {
  798. margin-left: 230px;
  799. overflow: hidden; }
  800. .sidebar-hidden #overlay {
  801. position: absolute;
  802. left: 0;
  803. right: 0;
  804. top: 0;
  805. bottom: 0;
  806. z-index: 10;
  807. background: rgba(255, 255, 255, 0.5);
  808. cursor: pointer; } }
  809. .copy-to-clipboard {
  810. background-image: url(../images/clippy.svg);
  811. background-position: 50% 50%;
  812. background-size: 16px 16px;
  813. background-repeat: no-repeat;
  814. width: 27px;
  815. height: 1.45rem;
  816. top: -1px;
  817. display: inline-block;
  818. vertical-align: middle;
  819. position: relative;
  820. color: #3c3c3c;
  821. background-color: #f9f2f4;
  822. margin-left: -.2rem;
  823. cursor: pointer;
  824. border-radius: 0 2px 2px 0; }
  825. .copy-to-clipboard:hover {
  826. background-color: #f1e1e5; }
  827. pre .copy-to-clipboard {
  828. position: absolute;
  829. right: 4px;
  830. top: 4px;
  831. background-color: #eee;
  832. border-color: #ddd;
  833. border-radius: 2px; }
  834. pre .copy-to-clipboard:hover {
  835. background-color: #d9d9d9; }
  836. .parent-element {
  837. -webkit-transform-style: preserve-3d;
  838. -moz-transform-style: preserve-3d;
  839. transform-style: preserve-3d; }
  840. /*# sourceMappingURL=theme.css.map */