projects.css.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611
  1. .projects--wrapper {
  2. margin-left: -8px;
  3. }
  4. .projects--wrapper .project--container {
  5. border: 1px solid #34302d;
  6. display: inline-block;
  7. width: 327px;
  8. height: 337px;
  9. margin: 0 6px 20px 6px;
  10. vertical-align: top;
  11. text-align: center;
  12. }
  13. .projects--wrapper .project--container .project-logo--container {
  14. margin-bottom: 25px;
  15. height: 137px;
  16. vertical-align: middle;
  17. }
  18. .projects--wrapper .project--container .project-logo--container .project--logo
  19. {
  20. display: inline-block;
  21. vertical-align: middle;
  22. }
  23. .projects--wrapper .project--container .project--title {
  24. font-family: "Montserrat", sans-serif;
  25. font-size: 16px;
  26. line-height: 20px;
  27. margin-bottom: 20px;
  28. text-transform: uppercase;
  29. }
  30. .projects--wrapper .project--container .project--description {
  31. font-size: 14px;
  32. line-height: 20px;
  33. }
  34. .projects--wrapper .project--container .project-links--container {
  35. position: absolute;
  36. background-color: rgba(109, 179, 63, 0.95);
  37. padding: 13px 0;
  38. width: 326px;
  39. margin: 127px 0 0 -20px;
  40. height: 58px;
  41. opacity: 0;
  42. transition: opacity 0.15s;
  43. -webkit-transition: opacity 0.15s;
  44. -moz-transition: opacity 0.15s;
  45. -o-transition: opacity 0.15s;
  46. -ms-transition: opacity 0.15s;
  47. }
  48. .projects--wrapper .project--container .project-links--container .project-link
  49. {
  50. display: inline-block;
  51. margin: 0 15px;
  52. }
  53. .projects--wrapper .project--container .project-links--container .project-link [class^=icon-]
  54. {
  55. font-size: 34px;
  56. width: 34px;
  57. height: 34px;
  58. color: rgba(241, 241, 241, 0.75);
  59. }
  60. .projects--wrapper .project--container .project-links--container .project-link p
  61. {
  62. margin: 6px 0;
  63. color: rgba(241, 241, 241, 0.75);
  64. font-size: 14px;
  65. line-height: 14px;
  66. }
  67. .projects--wrapper .project--container .project-links--container .project-link:hover
  68. {
  69. text-decoration: none;
  70. }
  71. .projects--wrapper .project--container .project-links--container .project-link:hover [class^=icon-]
  72. {
  73. color: white;
  74. }
  75. .projects--wrapper .project--container:hover .project-links--container {
  76. opacity: 1;
  77. }
  78. .projects--wrapper .project--container.parent-project .child-project-count--wrapper
  79. {
  80. float: right;
  81. }
  82. .projects--wrapper .project--container.parent-project .child-project-count--wrapper .child-project-count--number
  83. {
  84. position: relative;
  85. z-index: 101;
  86. color: #f1f1f1;
  87. margin: -22px -9px 0 9px;
  88. }
  89. .projects--wrapper .project--container.parent-project .child-project-count--wrapper .child-project-count--background
  90. {
  91. position: absolute;
  92. margin: -54px 0 0 -5px;
  93. z-index: 100;
  94. width: 0;
  95. height: 0;
  96. border-top: 40px solid transparent;
  97. border-bottom: 40px solid transparent;
  98. border-left: 40px solid #6db33f;
  99. transform: rotate(-45deg);
  100. -webkit-transform: rotate(-45deg);
  101. -moz-transform: rotate(-45deg);
  102. -o-transform: rotate(-45deg);
  103. -ms-transform: rotate(-45deg);
  104. }
  105. .projects--wrapper.project-aggregator>p {
  106. display: inline-block;
  107. }
  108. .projects--wrapper.project-aggregator .project--container {
  109. transition: all 0.20s;
  110. -webkit-transition: all 0.20s;
  111. -moz-transition: all 0.20s;
  112. -ms-transition: all 0.20s;
  113. -o-transition: all 0.20s;
  114. height: auto;
  115. }
  116. .projects--wrapper.project-aggregator .project--container:hover {
  117. text-decoration: none;
  118. box-shadow: 0 0 3px #6db33f;
  119. border-color: #6db33f;
  120. }
  121. .projects--wrapper.project-aggregator .project--container:active {
  122. box-shadow: none;
  123. }
  124. .projects--wrapper.project-aggregator .project--container a {
  125. padding: 30px 20px;
  126. height: 160px;
  127. width: 288px;
  128. display: inline-block;
  129. color: #34302D;
  130. text-decoration: none;
  131. }
  132. .projects--wrapper.project-aggregator .project--container .project-links--container
  133. {
  134. margin-top: 42px;
  135. }
  136. .project-header--wrapper {
  137. background-color: #666;
  138. border-bottom: 1px solid #34302D;
  139. }
  140. .project-header--wrapper .content--title a {
  141. color: #f1f1f1;
  142. }
  143. .project-header--wrapper .content--title p {
  144. color: #f1f1f1;
  145. font-size: 12px;
  146. line-height: 12px;
  147. }
  148. .project-header--wrapper .project--title {
  149. font-family: "Montserrat", sans-serif;
  150. font-size: 24px;
  151. line-height: 24px;
  152. margin-bottom: 20px;
  153. color: #ebf1e7;
  154. }
  155. .project-header--wrapper .project--links--container {
  156. float: right;
  157. margin-top: -10px;
  158. }
  159. .project-header--wrapper .project--links--container .project-link {
  160. display: inline-block;
  161. vertical-align: middle;
  162. margin-right: 10px;
  163. }
  164. .project-header--wrapper .project--links--container .project-link [class^=icon-]
  165. {
  166. font-size: 37px;
  167. width: 34px;
  168. height: 34px;
  169. color: #d4d4d4;
  170. }
  171. .project-header--wrapper .project--links--container .project-link:last-child
  172. {
  173. margin-right: 20px;
  174. }
  175. .project-header--wrapper .project--links--container .project-link:hover
  176. {
  177. text-decoration: none;
  178. }
  179. .project-header--wrapper .project--links--container .project-link:hover [class^=icon-]
  180. {
  181. color: #6db33f;
  182. }
  183. .project-header--wrapper .project--links--container .project-link div.icon
  184. {
  185. margin-top: 3px;
  186. }
  187. .project-header--wrapper div.project--description {
  188. color: #f1f1f1;
  189. font-size: 16px;
  190. line-height: 24px;
  191. }
  192. .project-header--wrapper div.project--description p {
  193. color: #f1f1f1;
  194. }
  195. .project-header--wrapper .project--description a {
  196. color: #5fa134;
  197. }
  198. .project-header--wrapper .project-quickstart-btn {
  199. margin-top: 30px;
  200. }
  201. .project-header--wrapper .project-download-widget-btn {
  202. margin-top: 40px;
  203. }
  204. .project-header--wrapper .billboard-bg {
  205. height: auto;
  206. border-bottom: none;
  207. }
  208. .project-header--wrapper .billboard--icon {
  209. float: right;
  210. }
  211. .billboard--area {
  212. padding-right: 25px;
  213. padding-top: 9px;
  214. }
  215. .project-icon {
  216. background-image: url("../img/project-icon-large.png");
  217. background-position: left top;
  218. background-repeat: no-repeat;
  219. width: 370px;
  220. height: 370px;
  221. position: absolute;
  222. top: 20px;
  223. left: 677px;
  224. opacity: 0.15;
  225. }
  226. .project-body--wrapper {
  227. min-width: 1100px;
  228. }
  229. .project-body--container {
  230. margin: 100px auto;
  231. width: 1024px;
  232. }
  233. .project-body--container .project-body--section#download-widget {
  234. padding-top: 15px;
  235. }
  236. .project-body--container .project-body--section {
  237. margin-bottom: 30px;
  238. padding-right: 20px;
  239. }
  240. .project-body--container .project-body--section p {
  241. font-size: 14px;
  242. line-height: 20px;
  243. margin-bottom: 20px;
  244. }
  245. .project-body--container .project-body--section .download-widget--container p
  246. {
  247. margin-bottom: 0;
  248. }
  249. .project-body--container .project-body--section li {
  250. padding: 5px 0;
  251. }
  252. .project-body--container .project-body--section .underlined-title {
  253. border-bottom: 1px solid white;
  254. padding-bottom: 10px;
  255. margin-bottom: 20px;
  256. }
  257. .project-body--container .project-body--section h3 {
  258. font-family: "Montserrat", sans-serif;
  259. font-weight: bold;
  260. }
  261. .project-body--container .project-body--section pre {
  262. border-radius: 0;
  263. }
  264. .download-widget--container {
  265. border: 1px solid #34302d;
  266. margin-top: 15px;
  267. }
  268. .download-widget--container .download-widget--title {
  269. font-family: "Montserrat", sans-serif;
  270. color: #f1f1f1;
  271. background-color: #34302d;
  272. font-size: 16px;
  273. line-height: 16px;
  274. padding: 17px 0;
  275. width: 211px;
  276. text-align: center;
  277. display: inline-block;
  278. }
  279. .download-widget--container .btn-group.bootstrap-select.selector {
  280. margin: 0 0 0 15px;
  281. }
  282. .download-widget--container .btn-group.bootstrap-select.selector .filter-option
  283. {
  284. padding: 7px 0 7px 19px;
  285. }
  286. .download-widget--container p {
  287. margin-bottom: 0;
  288. }
  289. .download-widget--container .download-widget--dropdown {
  290. display: inline-block;
  291. width: 34.6%;
  292. margin-left: 16px;
  293. }
  294. .download-widget--container .download-widget--dropdown .item-dropdown--title
  295. {
  296. padding: 9px 0 7px 20px;
  297. border: 1px solid #34302d;
  298. }
  299. .download-widget--container .download-widget--dropdown .item-dropdown--title .icon
  300. {
  301. margin: -3px 0 0 6px;
  302. vertical-align: middle;
  303. }
  304. .download-widget--container .download-widget--dropdown .item-dropdown--icon
  305. {
  306. padding: 9px;
  307. background-color: #34302d;
  308. }
  309. .download-widget--container .download-widget--dropdown .project-version--dropdown
  310. {
  311. width: 100%;
  312. padding: 0;
  313. }
  314. .download-widget--container .download-widget--dropdown .project-version--dropdown .project-version
  315. {
  316. color: #f1f1f1;
  317. padding: 8px 20px;
  318. border-top: 1px solid #4a4440;
  319. cursor: pointer;
  320. }
  321. .download-widget--container .download-widget--dropdown .project-version--dropdown .project-version .icon
  322. {
  323. margin: -3px 0 0 6px;
  324. vertical-align: middle;
  325. }
  326. .download-widget--container .download-widget--dropdown .project-version--dropdown .project-version.active
  327. {
  328. background-color: black;
  329. border-color: transparent;
  330. }
  331. .download-widget--container .download-widget--dropdown .project-version--dropdown .project-version.active:hover
  332. {
  333. background-color: black;
  334. }
  335. .download-widget--container .download-widget--dropdown .project-version--dropdown .project-version:first-child
  336. {
  337. border: none;
  338. }
  339. .download-widget--container .download-widget--dropdown .project-version--dropdown .project-version:hover
  340. {
  341. background-color: rgba(0, 0, 0, 0.3);
  342. }
  343. .download-widget--container .download-widget--dropdown.js-open .item-dropdown--title
  344. {
  345. border: 1px solid #6db33f;
  346. }
  347. .download-widget--container .download-widget--dropdown:hover .item-dropdown--icon
  348. {
  349. color: white;
  350. }
  351. .download-widget--container .download-widget--body {
  352. padding: 20px;
  353. }
  354. .download-widget--container .download-widget--body .highlight {
  355. margin-top: 20px;
  356. }
  357. .download-widget--container .download-widget--body .highlight pre {
  358. margin: 0;
  359. }
  360. .project-documentation--container {
  361. border-color: #34302d;
  362. }
  363. .project-documentation--container .item-dropdown--title {
  364. background-color: transparent;
  365. border-bottom: 1px solid #34302d;
  366. padding: 20px;
  367. font-family: "Montserrat", sans-serif;
  368. font-size: 14px;
  369. line-height: 14px;
  370. }
  371. .project-documentation--container .item--dropdown {
  372. display: block;
  373. position: relative;
  374. width: 100%;
  375. padding: 0;
  376. border: none;
  377. background-color: transparent;
  378. }
  379. .project-documentation--container .item--dropdown .item--body-title {
  380. padding-top: 15px;
  381. color: #34302d;
  382. margin: 0 20px;
  383. border-color: #d7d5d3;
  384. }
  385. .project-documentation--container .item--dropdown .item--body--version {
  386. margin: 0 20px;
  387. border-color: #d7d5d3;
  388. }
  389. .project-documentation--container .item--dropdown .item--body--version p
  390. {
  391. color: #34302d;
  392. display: inline-block;
  393. }
  394. .project-documentation--container .item--dropdown .item--body--version .icon
  395. {
  396. vertical-align: top;
  397. margin: 2px 0 0 6px;
  398. }
  399. .project-documentation--container .item--dropdown .item--body--version .icon.icon-pre-release
  400. {
  401. background-color: #34302d;
  402. border-radius: 2px;
  403. }
  404. .project-documentation--container .item--dropdown .item--body--version:last-child
  405. {
  406. margin-bottom: 20px;
  407. }
  408. .project-sub-link--wrapper {
  409. padding: 15px;
  410. }
  411. .project-sub-link--wrapper .project-sub-link {
  412. min-width: 32px;
  413. height: 32px;
  414. display: inline-block;
  415. margin-right: 2.65%;
  416. vertical-align: middle;
  417. }
  418. .project-sub-link--wrapper .project-sub-link:last-child {
  419. margin-right: 0;
  420. }
  421. .project-sidebar-resource--wrapper {
  422. padding: 20px;
  423. }
  424. .project-sidebar-resource--wrapper h3 {
  425. margin: 5px 0;
  426. }
  427. .project-sidebar-resource--wrapper ul {
  428. margin: 0 0 25px 0;
  429. }
  430. .project-sidebar-resource--wrapper ul li {
  431. border: none;
  432. padding: 5px 0;
  433. }
  434. .project-sidebar-resource--wrapper ul:last-child {
  435. margin-bottom: 0;
  436. }
  437. .github-fork-ribbon--container {
  438. position: relative;
  439. min-width: 1100px;
  440. }
  441. .github-fork-ribbon--wrapper {
  442. width: 150px;
  443. height: 150px;
  444. position: absolute;
  445. overflow: hidden;
  446. z-index: 9999;
  447. right: 0;
  448. }
  449. .github-fork-ribbon--wrapper .github-fork-ribbon {
  450. position: absolute;
  451. padding: 2px 0;
  452. background-color: #34302d;
  453. -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.33);
  454. box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.33);
  455. z-index: 9999;
  456. top: 42px;
  457. right: -43px;
  458. -webkit-transform: rotate(45deg);
  459. -moz-transform: rotate(45deg);
  460. -o-transform: rotate(45deg);
  461. }
  462. .github-fork-ribbon--wrapper .github-fork-ribbon a {
  463. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  464. font-size: 13px;
  465. font-weight: 500;
  466. color: #f1f1f1;
  467. text-decoration: none;
  468. text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
  469. text-align: center;
  470. width: 200px;
  471. line-height: 20px;
  472. display: inline-block;
  473. padding: 2px 0;
  474. border: 1px dotted rgba(255, 255, 255, 0.75);
  475. border-width: 1px 0;
  476. }
  477. .github-fork-ribbon--wrapper .github-fork-ribbon a i {
  478. font-size: 23px;
  479. vertical-align: middle;
  480. margin: 0 3px 0 0;
  481. color: black;
  482. }
  483. #download-widget {
  484. margin-bottom: 10px;
  485. }
  486. .project-body--container p code {
  487. color: #305CB5;
  488. }
  489. .project-body--container h2 {
  490. font-size: 20px;
  491. font-weight: 400;
  492. }
  493. .highlight pre {
  494. overflow-x: auto;
  495. }
  496. .highlight pre code {
  497. overflow-x: auto;
  498. white-space: pre;
  499. word-break: normal;
  500. word-wrap: normal;
  501. }
  502. .project-body--container .copy-button {
  503. position: absolute;
  504. margin-left: 614px;
  505. }
  506. .download-widget--body .copy-button {
  507. margin-left: 574px;
  508. }