25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

693 lines
11 KiB

  1. /*-------------------------------------
  2. Custom CSS
  3. ---------------------------------------*/
  4. body {
  5. font-family: "proxima-nova", sans-serif;
  6. font-size: 15px;
  7. color: #6c7680;
  8. text-rendering: optimizeLegibility !important;
  9. line-height: 1.5em;
  10. -moz-osx-font-smoothing: grayscale;
  11. -webkit-font-smoothing: antialiased;
  12. }
  13. p.lead {
  14. font-family: "proxima-nova", sans-serif;
  15. }
  16. h1,
  17. h2,
  18. h3,
  19. h4,
  20. h5,
  21. h6,
  22. .lead,
  23. .page-sidebar,
  24. .breadcrumb,
  25. .label,
  26. .h6,
  27. .sans,
  28. blockquote {
  29. font-family: "proxima-nova", sans-serif;
  30. color: #36414C;
  31. }
  32. button,
  33. .button,
  34. .btn {
  35. font-family: "proxima-nova", sans-serif;
  36. }
  37. .page-header-block,
  38. .page-header-actions {
  39. display: none;
  40. }
  41. .btn-primary {
  42. background-color: #7575ff;
  43. border-color: #7575ff;
  44. }
  45. .btn-primary :hover {
  46. background-color: #5b5be5;
  47. }
  48. article button,
  49. article .button,
  50. article .btn,
  51. blockquote {
  52. font-size: 0.93em;
  53. }
  54. article ul > li,
  55. article ol > li {
  56. margin: 10px 0px;
  57. }
  58. figcaption {
  59. font-size: 0.8em;
  60. color: #B8C2CC;
  61. padding: 10px 0px;
  62. line-height: 1.3em;
  63. }
  64. .text-extra-muted {
  65. color: #B8C2CC !important;
  66. }
  67. .page-sidebar,
  68. .breadcrumb {
  69. line-height: 1.5em;
  70. }
  71. .breadcrumb {
  72. background-color: transparent;
  73. padding: 10px 0px;
  74. }
  75. .breadcrumb a,
  76. .breadcrumb a:hover,
  77. .breadcrumb a:focus,
  78. .breadcrumb a:visited {
  79. color: inherit;
  80. }
  81. .container,
  82. .navbar,
  83. footer {
  84. max-width: 900px;
  85. margin: auto;
  86. }
  87. @media (min-width: 768px) {
  88. .narrow {
  89. max-width: 75%;
  90. margin: auto;
  91. }
  92. }
  93. h1,
  94. h2,
  95. h3,
  96. h4,
  97. h5,
  98. h6 {
  99. font-weight: 700;
  100. }
  101. p.description,
  102. p.description a {
  103. color: #B8C2CC;
  104. font-size: 1.06em;
  105. margin: 12px 0 0;
  106. text-decoration: none;
  107. }
  108. p.description a:focus,
  109. p.description a:active,
  110. p.description a:hover {
  111. color: #36414C;
  112. }
  113. .hero-content p.description,
  114. .page-hero p.description,
  115. .hero-content p.description a,
  116. .page-hero p.description a {
  117. font-size: 0.9em;
  118. }
  119. .hero-content .x-large.button,
  120. .page-hero .x-large.button {
  121. font-size: 1em;
  122. }
  123. a {
  124. color: #5E64FF;
  125. }
  126. a,
  127. a:focus,
  128. a:hover {
  129. transition: color 0.3s, border 0.3s, background-color 0.3s;
  130. }
  131. a.grey {
  132. color: #36414C;
  133. }
  134. a.close,
  135. a.btn {
  136. text-decoration: none;
  137. }
  138. .navbar a,
  139. .sidebar-navbar-items a {
  140. color: inherit;
  141. text-decoration: none;
  142. border-color: inherit;
  143. }
  144. .page-padding,
  145. .page-content {
  146. padding-top: 30px;
  147. padding-bottom: 30px;
  148. }
  149. .page-title {
  150. text-align: center;
  151. margin-top: 30px;
  152. }
  153. .page-sub-title {
  154. color: #8D99A6;
  155. text-align: center;
  156. margin-top: 0px;
  157. margin-bottom: 45px;
  158. font-weight: 300;
  159. }
  160. .btn-white {
  161. background-color: #fff;
  162. color: #36414C;
  163. border-color: #d1d8dd;
  164. }
  165. .btn-white:hover {
  166. background-color: #fafbfc;
  167. }
  168. .screenshot {
  169. border: 2px solid #d1d8dd;
  170. box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.15);
  171. margin: 15px 0px;
  172. }
  173. blockquote {
  174. border-left: 5px solid #F0F4F7;
  175. background-color: #fafbfc;
  176. margin-top: 15px;
  177. }
  178. blockquote p {
  179. margin: 0px;
  180. }
  181. .page-hero {
  182. padding: 130px 0px 100px;
  183. margin-top: -60px;
  184. }
  185. h1 {
  186. font-size: 2.13em;
  187. }
  188. .navbar {
  189. background-color: transparent;
  190. }
  191. .button {
  192. display: inline-block;
  193. border-radius: 4px;
  194. padding: 7px 12px 9px;
  195. line-height: 1;
  196. text-decoration: none;
  197. }
  198. .button:hover,
  199. .button:active,
  200. .button:focus {
  201. text-decoration: none;
  202. }
  203. .large.button {
  204. font-size: 1.33em;
  205. padding: 12px 24px 10px;
  206. border-bottom: 3px solid rgba(0, 0, 0, 0.2);
  207. }
  208. .x-large.button {
  209. font-size: 1.6em;
  210. padding: 16px 40px;
  211. border-bottom: 3px solid rgba(0, 0, 0, 0.2);
  212. }
  213. .small.button {
  214. padding-top: 11px;
  215. }
  216. .blue.button {
  217. color: #fff;
  218. background: #7575ff;
  219. border: 0px;
  220. border-bottom: 3px solid rgba(0, 0, 0, 0.2);
  221. }
  222. .blue.button:hover {
  223. background: #5b5be5;
  224. }
  225. .white.button {
  226. color: #6C7680;
  227. border: 1px solid #d1d8dd;
  228. }
  229. .white.button:hover {
  230. background: #fafbfc;
  231. }
  232. .navbar {
  233. padding: 10px 0px;
  234. border-bottom: 1px solid #d1d8dd;
  235. }
  236. .navbar-brand,
  237. .navbar-brand:hover,
  238. .navbar-brand:visited,
  239. .navbar-brand:focus {
  240. font-size: 1.2em;
  241. text-decoration: none;
  242. color: #36414C;
  243. }
  244. .hero {
  245. padding: 70px 0;
  246. font-size: 1.6em;
  247. font-weight: 300;
  248. text-align: center;
  249. }
  250. .hero-content {
  251. font-weight: 300;
  252. margin-top: 12px;
  253. }
  254. .hero-content h1 {
  255. padding-top: 24px;
  256. font-size: 1.5em;
  257. }
  258. .hero-content p {
  259. width: 80%;
  260. margin: 0 auto 24px;
  261. line-height: 1.4;
  262. }
  263. .hero-content p.description {
  264. margin-top: 16px;
  265. margin-bottom: 0px;
  266. }
  267. .group,
  268. .border-bottom {
  269. border-bottom: 1px solid #d1d8dd;
  270. }
  271. .row.section,
  272. section {
  273. padding: 70px 0 70px;
  274. }
  275. .row.section p,
  276. section p {
  277. color: #6c7680;
  278. }
  279. .content {
  280. padding: 24px 40px 0;
  281. }
  282. .small-content {
  283. text-align: center;
  284. padding: 0 32px;
  285. }
  286. .small-content img {
  287. width: 130px;
  288. height: 130px;
  289. }
  290. .small-content h1 {
  291. font-size: 1.5em;
  292. }
  293. .tiny-content {
  294. margin-bottom: 40px;
  295. font-size: 1em;
  296. }
  297. .tiny-content h1 {
  298. color: #36414c;
  299. }
  300. .tiny-content p {
  301. margin: 6px 0 0;
  302. color: #858d95;
  303. }
  304. .tiny-content h1 {
  305. font-size: 1.2em;
  306. }
  307. footer {
  308. color: #8D99A6;
  309. padding: 3px 0;
  310. border-top: 1px solid #d1d8dd;
  311. }
  312. footer h1 {
  313. color: #36414C;
  314. font-size: 1.42em;
  315. margin: 0;
  316. }
  317. footer p {
  318. margin: 0;
  319. padding: 2px 0 10px;
  320. color: #6c7680;
  321. }
  322. footer ul,
  323. footer ul li {
  324. margin: 0;
  325. padding: 0;
  326. list-style-type: none;
  327. text-align: center;
  328. }
  329. footer li a {
  330. text-decoration: none;
  331. color: #6c7680;
  332. }
  333. footer li a:hover,
  334. footer li a:active,
  335. footer li a:focus {
  336. color: #36414C;
  337. text-decoration: none;
  338. }
  339. .footer-list {
  340. text-align: center;
  341. display: inline-block;
  342. width: 100%;
  343. margin-top: 50px;
  344. margin-bottom: 10px;
  345. }
  346. .footer-list ul {
  347. margin-top: 20px;
  348. }
  349. .footer-list li {
  350. margin: 0px 15px;
  351. display: inline-block;
  352. }
  353. .footer-link {
  354. color: #B8C2CC;
  355. }
  356. .footer-link:hover,
  357. .footer-link:focus {
  358. color: #8D99A6;
  359. }
  360. .copyright {
  361. font-size: 0.8em;
  362. text-align: center;
  363. padding-bottom: 50px;
  364. }
  365. .copyright p {
  366. padding-bottom: 0px;
  367. color: #B8C2CC;
  368. }
  369. .center {
  370. text-align: center;
  371. }
  372. /*-------------------------------------
  373. ERPNext
  374. ---------------------------------------*/
  375. .erp-next-logo {
  376. margin: 8px 0;
  377. height: 14px;
  378. width: 76px;
  379. }
  380. .erp-hero {
  381. width: 500px;
  382. margin: auto;
  383. }
  384. .tabs {
  385. text-align: center;
  386. }
  387. .tabs ul,
  388. .tabs li {
  389. margin: 0;
  390. padding: 0;
  391. list-style-type: none;
  392. display: inline-block;
  393. }
  394. .tabs ul {
  395. margin: 0 auto;
  396. }
  397. .tabs li {
  398. width: 64px;
  399. text-align: center;
  400. margin: 0 16px;
  401. }
  402. .tabs li input {
  403. background: transparent;
  404. border: 0;
  405. color: #8d99a6;
  406. padding-bottom: 8px;
  407. transition: 0.5s;
  408. border-bottom: 2px solid transparent;
  409. cursor: pointer;
  410. }
  411. .tabs li input:focus {
  412. outline: none;
  413. }
  414. .tabs li input:hover {
  415. color: #36414c;
  416. }
  417. .tabs li input.active {
  418. color: #36414c;
  419. border-bottom: 2px solid #7575ff;
  420. }
  421. .feature {
  422. text-align: center;
  423. display: none;
  424. }
  425. .feature p,
  426. .feature h1 {
  427. width: 65%;
  428. margin: 0 auto;
  429. }
  430. .feature h1 {
  431. padding: 40px 0 16px;
  432. }
  433. .feature p {
  434. font-size: 1.13em;
  435. padding-bottom: 24px;
  436. }
  437. /*-------------------------------------
  438. Frappé for Developers
  439. ---------------------------------------*/
  440. .developers-hero {
  441. width: 313px;
  442. }
  443. .developers-logo {
  444. height: 19px;
  445. }
  446. .erp-framework {
  447. width: 80%;
  448. margin: 30px auto;
  449. }
  450. .get-involved {
  451. color: #36414c;
  452. font-size: 1.2em;
  453. text-align: center;
  454. }
  455. .get-involved p {
  456. margin-top: 0;
  457. }
  458. .get-involved img {
  459. width: 20px;
  460. height: 20px;
  461. margin: -3px 10px 0 -5px;
  462. }
  463. .get-involved .button {
  464. margin: 0 4px;
  465. }
  466. /*-------------------------------------
  467. Frappé
  468. ---------------------------------------*/
  469. .frappe-hero {
  470. width: 385px;
  471. }
  472. .frappe-logo {
  473. height: 19px;
  474. }
  475. .open-source {
  476. text-align: center;
  477. }
  478. .open-source img {
  479. width: 325px;
  480. }
  481. .team-picture {
  482. text-align: center;
  483. }
  484. .team-picture h1 {
  485. margin: 0 0 40px;
  486. }
  487. .team-description {
  488. text-align: center;
  489. margin-bottom: 20px;
  490. }
  491. .team-description a {
  492. text-decoration: none;
  493. }
  494. .input-label {
  495. margin: 16px 0 3px;
  496. color: #8d99a6;
  497. font-size: 0.93em;
  498. }
  499. #message {
  500. height: 150px;
  501. }
  502. #send {
  503. display: block;
  504. text-align: center;
  505. margin-top: 16px;
  506. }
  507. .office-map {
  508. width: 394px;
  509. margin-top: 40px;
  510. }
  511. .contact .content {
  512. margin-top: -40px;
  513. }
  514. .page-breadcrumbs {
  515. display: none !important;
  516. }
  517. .half-width {
  518. max-width: 50%;
  519. margin-left: auto;
  520. margin-right: auto;
  521. }
  522. .width-75 {
  523. max-width: 75%;
  524. margin-left: auto;
  525. margin-right: auto;
  526. }
  527. .media-object {
  528. max-width: 120px;
  529. margin-right: 15px;
  530. }
  531. .browser-image {
  532. border: 1px solid #d1d8dd;
  533. }
  534. .fake-browser-frame {
  535. position: relative;
  536. margin: 40px auto;
  537. max-width: 600px;
  538. }
  539. .fake-browser-frame::before {
  540. content: "";
  541. height: 24px;
  542. position: absolute;
  543. top: -24px;
  544. left: 0px;
  545. right: 0px;
  546. border: 1px solid #d1d8dd;
  547. border-bottom: none;
  548. border-top-left-radius: 4px;
  549. border-top-right-radius: 4px;
  550. }
  551. .fake-browser-frame::after {
  552. content: '\f052 \f052 \f052';
  553. position: absolute;
  554. color: #d1d8dd;
  555. top: -17px;
  556. left: 8px;
  557. /* octicon */
  558. font: normal normal 12px octicons;
  559. line-height: 1;
  560. display: inline-block;
  561. text-decoration: none;
  562. -webkit-font-smoothing: antialiased;
  563. -moz-osx-font-smoothing: grayscale;
  564. -webkit-user-select: none;
  565. -moz-user-select: none;
  566. -ms-user-select: none;
  567. user-select: none;
  568. }
  569. .fake-iphone-frame {
  570. position: relative;
  571. padding: 40px 8px;
  572. border: 1px solid #d1d8dd;
  573. border-radius: 15px;
  574. }
  575. .fake-ipad-frame {
  576. position: relative;
  577. padding: 8px 40px;
  578. border: 1px solid #d1d8dd;
  579. border-radius: 15px;
  580. }
  581. .cover {
  582. width: 100%;
  583. }
  584. .underline {
  585. color: inherit;
  586. text-decoration: underline;
  587. }
  588. .underline:hover,
  589. .underline:focus,
  590. .underline:active {
  591. color: #36414C;
  592. }
  593. .spacer {
  594. margin-top: 40px;
  595. margin-bottom: 40px;
  596. }
  597. article h3 {
  598. margin-top: 40px;
  599. }
  600. article hr + h3 {
  601. margin-top: 0px;
  602. }
  603. .negative-margin {
  604. margin-left: -15px;
  605. margin-right: -15px;
  606. padding-left: 15px;
  607. padding-right: 15px;
  608. }
  609. .navbar-icon {
  610. width: 24px;
  611. margin-right: 7px;
  612. margin-top: -3px;
  613. }
  614. .large-description {
  615. line-height: 1.5;
  616. font-size: 1.5em;
  617. font-weight: 200;
  618. display: inline-block;
  619. }
  620. @media (max-width: 767px) {
  621. .navbar {
  622. height: auto;
  623. }
  624. .hero {
  625. font-size: 1.2em;
  626. }
  627. .large-description {
  628. font-size: 1.2em;
  629. }
  630. .hero-content h1 {
  631. font-size: 1.2em;
  632. }
  633. .hero-content p {
  634. width: 100%;
  635. }
  636. .small-content {
  637. padding-top: 70px;
  638. }
  639. .small-content:first-child {
  640. padding-top: 0px;
  641. }
  642. .page-content {
  643. padding-top: 0px;
  644. }
  645. .footer-list {
  646. margin-top: 40px;
  647. }
  648. .footer-list li {
  649. margin: 15px 0px;
  650. display: block;
  651. text-align: left;
  652. }
  653. .copyright {
  654. text-align: left;
  655. padding-bottom: 55px;
  656. }
  657. .half-width {
  658. max-width: 90%;
  659. }
  660. .width-75 {
  661. max-width: 100%;
  662. }
  663. .fake-iphone-frame {
  664. display: inline-block;
  665. margin-bottom: 60px;
  666. }
  667. .erp-hero {
  668. margin-bottom: 1px;
  669. }
  670. }
  671. .website-list .result {
  672. border: none;
  673. }
  674. .page-container {
  675. max-width: 970px;
  676. margin: 0 auto;
  677. }
  678. .text-center {
  679. text-align: center;
  680. }
  681. .jumbotron {
  682. margin-bottom: 0;
  683. }