API tools faq
paste
Guest User

Untitled

a guest
Feb 22nd, 2018
108
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.43 KB | None | 0 0
raw download clone embed print report
  1. @import "bourbon";
  2.  
  3. @import 'vars/bootstrap';
  4. @import 'vars/bootstrap_market';
  5.  
  6. @import 'bootstrap';
  7. @import 'bootstrap-switch.min';
  8.  
  9. @import 'vars/basic';
  10. @import 'vars/market';
  11. @import 'vars/custom';
  12.  
  13. @import "font-awesome-sprockets";
  14. @import 'font-awesome';
  15. @import 'csshake.min';
  16.  
  17. @import 'layouts/basic';
  18.  
  19. /* basic layout
  20. ------------------------------------------------ */
  21.  
  22. html,
  23. body,
  24. #wrap,
  25. .content {
  26. height: 100%;
  27. @include user-select(none);
  28. }
  29.  
  30. body {
  31. min-width: $min-width !important;
  32. min-height: $min-height !important;
  33.  
  34. // fixed icon spin
  35. -webkit-font-smoothing: antialiased !important;
  36. -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
  37. -webkit-tap-highlight-color: transparent !important;
  38. -webkit-focus-ring-color: transparent !important;
  39.  
  40. * {
  41. -webkit-font-smoothing: antialiased !important;
  42. -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
  43. -webkit-tap-highlight-color: transparent !important;
  44. -webkit-focus-ring-color: transparent !important;
  45. }
  46.  
  47. a.hand-point {
  48. cursor: pointer;
  49. text-decoration: none;
  50. }
  51. }
  52.  
  53. header {
  54. box-sizing: border-box;
  55. bottom-border: 0px;
  56.  
  57. p + p { margin-left: 20px !important; }
  58. span + span { margin-left: 10px !important; }
  59.  
  60. span[data-title]:before { content: attr(data-title) ": "; }
  61.  
  62. span.vol, span.high, span.low {
  63. font-family: $font-family-monospace;
  64. }
  65.  
  66. .bootstrap-switch {
  67. margin-top: -2px;
  68. border-color: $panel-default-border;
  69. }
  70.  
  71. .bootstrap-switch.bootstrap-switch-focused {
  72. @include box-shadow(none);
  73. border-color: $panel-default-border;
  74. }
  75.  
  76. .bootstrap-switch.bootstrap-switch-mini.bootstrap-switch-animate {
  77. margin-top: -2px;
  78. border: none;
  79.  
  80. & .bootstrap-switch-handle-on.bootstrap-switch-success {
  81. padding: 6px 2px;
  82. font-size: 12px;
  83. color: white !important;
  84. background-color: $up-text-fade;
  85. }
  86.  
  87. & .bootstrap-switch-handle-off.bootstrap-switch-default {
  88. padding: 6px 2px;
  89. font-size: 12px;
  90. color: white !important;
  91. background-color: $down-text-fade;
  92. }
  93.  
  94. .bootstrap-switch-label {
  95. color: rgba(255,255,255,.5);
  96. padding: 6px 2px;
  97. font-size: 12px;
  98. background-color: $btn-danger-bg;
  99. }
  100.  
  101. }
  102.  
  103. li.dropdown {
  104. a:hover {
  105. color: white;
  106. text-decoration: none;
  107. background: none;
  108. text-shadow: white 0 0 2px;
  109. text-decoration: none;
  110. }
  111. a:focus {
  112. text-shadow: none;
  113. text-decoration: none;
  114. }
  115.  
  116. table {
  117. margin-bottom: 0px;
  118. td {
  119. vertical-align: middle;
  120. border-top: none;
  121. border-bottom: 1px solid $navbar-default-spliter;
  122. }
  123. }
  124. }
  125.  
  126. @mixin header-dropdown {
  127. min-width: 0;
  128. border-bottom-left-radius: 5px;
  129. border-bottom-right-radius: 5px;
  130. background-color: $panel-bg;
  131. border: 1px solid $panel-default-border;
  132. box-shadow: 0px 0px 8px $panel-default-border;
  133.  
  134. li:first-child {
  135. padding-top: 8px;
  136. }
  137. li:last-child {
  138. padding-bottom: 8px;
  139. }
  140. }
  141.  
  142. #language {
  143. .lang-icon {
  144. height: 16px;
  145. }
  146. .dropdown-menu {
  147. @include header-dropdown;
  148. min-width: 0;
  149. a {
  150. padding: 5px 15px;
  151. }
  152. }
  153. }
  154.  
  155. #settings {
  156. .dropdown-menu {
  157. @include header-dropdown;
  158. li:nth-child(1), li:nth-child(2) {
  159. & > a:hover { text-shadow: none; }
  160. }
  161. li:nth-child(2) {
  162. padding-bottom: 8px;
  163. }
  164.  
  165. .fa { width: 14px; }
  166.  
  167. a { padding: 3px 10px; }
  168. }
  169. }
  170.  
  171. #account_summary {
  172. font-family: $font-family-monospace;
  173. .dropdown-menu {
  174. @include header-dropdown;
  175. }
  176. table {
  177. min-width: 280px;
  178. td.account-symbol { img { max-height: 32px; } }
  179. span.locked { color: #777; }
  180. }
  181. p { margin: 8px; }
  182. }
  183.  
  184. i.fa.fa-wifi { color: $text-color; }
  185.  
  186. .navbar-right {
  187. .dropdown-menu {
  188. right: -1px !important;
  189. padding: 0px !important;
  190. }
  191. }
  192.  
  193. .navbar-left {
  194. .dropdown-menu {
  195. left: -1px !important;
  196. padding: 0px !important;
  197. }
  198.  
  199. span.vol, span.high, span.low, span.change {
  200. color: gainsboro;
  201. }
  202. }
  203. }
  204.  
  205. .navbar-static-top {
  206. min-width: $min-width;
  207. }
  208.  
  209. #wrap {
  210. box-sizing: border-box;
  211. margin-top: 0px - $navbar-height;
  212. }
  213.  
  214. .container-fluid {
  215. padding-left: 10px;
  216. padding-right: 10px;
  217. }
  218.  
  219. .content {
  220. top: $navbar-height;
  221. min-width: $min-width;
  222. min-height: $min-height - $navbar-height;
  223. width: 100%;
  224. height: 100%;
  225. position: absolute;
  226. font-size: 14px !important;
  227. background-color: #000;
  228. font-family: $font-family-monospace;
  229. }
  230.  
  231. #candlestick > .mask {
  232. background-color: rgba(44,44,44,0.5);
  233. }
  234.  
  235. .mask {
  236. position: absolute;
  237. top: 0px;
  238. left: 0px;
  239. width: 100%;
  240. height: 100%;
  241. z-index: 900;
  242. background-color: rgba(44,44,44,0.8);
  243. table {
  244. width: 100%;
  245. height: 100%;
  246. }
  247. }
  248.  
  249. #ask_entry > .mask { padding-top: 80px; }
  250. #bid_entry > .mask { padding-top: 80px; }
  251.  
  252. .float {
  253. position: absolute;
  254. @include transition(0.1s);
  255. @include transition-property(width);
  256.  
  257. .sideways {
  258. width: auto;
  259. position: absolute;
  260.  
  261. li > a { background: #000; }
  262.  
  263. &.tabs-left {
  264. left: 3px;
  265. li { float: right; } // turn tabs
  266. @include transform(rotate(-90deg));
  267. @include transform-origin(left bottom);
  268. }
  269.  
  270. &.tabs-right {
  271. right: 3px;
  272. li { float: left; } // turn tabs
  273. @include transform(rotate(90deg));
  274. @include transform-origin(right bottom);
  275. }
  276. }
  277.  
  278. i.fa.fa-close { position: relative; z-index: 910; }
  279. .tab-content .tab-pane > * { width: 100%; height: 100%; }
  280. }
  281.  
  282.  
  283. @mixin float-wrapper($width, $height, $ul-top: 198px, $ul-width: 182px) {
  284. & > ul { width: $ul-width; top: $ul-top; }
  285. height: $height;
  286.  
  287. width: 0px;
  288. .tab-content { display: none; }
  289.  
  290. &.hover, &.hover-force {
  291. width: $width;
  292. .tab-content { display: block; }
  293. .sideways.tabs-left { left: 1px; }
  294. }
  295. }
  296.  
  297. #chat_tabs_wrapper {
  298. bottom: $gutter; left: $gutter;
  299. min-height: 300px;
  300. @include float-wrapper(260px, 300px);
  301. &.stop-resize {
  302. height: 100px !important;
  303. min-height: 100px !important;
  304. & > ul { top: 140px }
  305. }
  306. }
  307.  
  308. /* panel
  309. ------------------------------------------------ */
  310. .panel {
  311. position: absolute;
  312. margin-bottom: 0px;
  313.  
  314. &.panel-wide {
  315. .panel-body { padding: 8px; }
  316. .panel-heading { padding: 8px; }
  317. }
  318.  
  319. &.panel-with-dropdown {
  320. .panel-heading {
  321. -moz-user-select: none;
  322. -webkit-user-select: none;
  323. -ms-user-select: none;
  324.  
  325. .btn-group.open .dropdown-toggle {
  326. box-shadow: none;
  327. -moz-box-shadow: none;
  328. -webkit-box-shadow: none;
  329. }
  330.  
  331. .btn-group {
  332. margin-right: 5px;
  333. cursor: pointer;
  334. span.caret { margin-left: 2px; }
  335. a:hover, a:focus { text-decoration: none; }
  336. }
  337. }
  338. }
  339.  
  340. .panel-heading
  341.  
  342. .panel-body.panel-fixed-table-head {
  343. table { margin-bottom: 0px; }
  344. padding-bottom: 0px;
  345. }
  346.  
  347. .panel-body.panel-fixed-table-body {
  348. table { margin-bottom: 0px;}
  349. overflow-y: auto;
  350. }
  351. }
  352.  
  353. .has-left-dropdown {
  354. .dropdown-wrapper {
  355. .dropdown-menu {
  356. display: block;
  357. z-index: 0;
  358. position: relative;
  359. top: 0;
  360. left: 100%;
  361. -webkit-transition: left .1s linear;
  362. transition: left .1s linear;
  363. min-width: 0;
  364. margin: 0;
  365. font-size: 11px;
  366. background-color: $panel-bg;
  367. border: 1px solid $panel-default-border;
  368. border-right: 0;
  369. border-top-right-radius: 0;
  370. border-bottom-right-radius: 0;
  371.  
  372. a {
  373. display: none;
  374. padding: 3px 12px 3px 11px;
  375. background-color: $panel-bg;
  376. }
  377.  
  378. a:hover {
  379. color: white;
  380. background-color: $panel-bg;
  381. text-shadow: white 0 0 2px;
  382. text-decoration: none;
  383. }
  384.  
  385. a:focus {
  386. color: $text-color;
  387. text-shadow: none;
  388. }
  389. }
  390. }
  391. }
  392.  
  393. .has-left-dropdown:hover {
  394. .dropdown-wrapper {
  395. .dropdown-menu {
  396. left: 1px;
  397. -webkit-transition: left .1s linear;
  398. transition: left .1s linear;
  399.  
  400. a { display: block; }
  401. }
  402. }
  403. }
  404.  
  405. .has-right-dropdown {
  406. .dropdown-wrapper {
  407. .dropdown-menu {
  408. display: block;
  409. position: relative;
  410. top: 0;
  411. left: 0;
  412. -webkit-transition: margin-left .1s linear;
  413. transition: margin-left .1s linear;
  414. min-width: 0;
  415. padding-left: 6px;
  416. margin: 0 0 0 -100%;
  417. font-size: 11px;
  418. background-color: $panel-bg;
  419. border: 1px solid $panel-default-border;
  420. border-left: 0;
  421. border-left-right-radius: 0;
  422. border-left-right-radius: 0;
  423.  
  424. a {
  425. padding: 3px 8px;
  426. background-color: $panel-bg;
  427. i { color: $panel-bg; }
  428. }
  429.  
  430. a.active {
  431. i {
  432. color: white;
  433. text-shadow: white 0 0 2px;
  434. }
  435. }
  436.  
  437. a:hover {
  438. color: white;
  439. background-color: $panel-bg;
  440. text-shadow: white 0 0 2px;
  441. text-decoration: none;
  442. i { text-shadow: none; }
  443. }
  444.  
  445. a:focus {
  446. color: $text-color;
  447. }
  448. }
  449. }
  450. }
  451.  
  452. .has-right-dropdown:hover {
  453. .dropdown-wrapper {
  454. .dropdown-menu {
  455. margin-left: -1px;
  456. -webkit-transition: margin-left .1s linear;
  457. transition: margin-left .1s linear;
  458.  
  459. a { display: block; }
  460. }
  461. }
  462. }
  463.  
  464. /* layout position
  465. ----------------------------------------------- */
  466. #ask_entry, #bid_entry { width: $entry-width; height: $entry-height; }
  467. .entry-right { bottom: $gutter; right: $gutter + $entry-width + $gutter; }
  468. .entry-left { bottom: $gutter; right: $gutter; }
  469.  
  470. #ticker {
  471. width: $ticker-width; height: $ticker-height;
  472. bottom: $gutter_4x + $entry-height + $my-orders-height + $depths-height; right: $gutter;
  473.  
  474. .ask, .last, .bid {
  475. text-align: center;
  476. font-family: $font-family-monospace;
  477. .hint { cursor: default; color: #777; }
  478. }
  479.  
  480. .last {
  481. padding-top: 5px;
  482. font-size: 34px;
  483. line-height: 34px;
  484. }
  485. }
  486.  
  487. #order_book {
  488. width: $order-book-width; height: $order-book-height;
  489. min-height: $order-book-height;
  490. top: $gutter; right: $gutter;
  491.  
  492. .panel-body-content {
  493. min-height: $order-book-height - $panel_table_header_high;
  494. }
  495.  
  496. table.asks, table.bids {
  497. .new {
  498. background-color: #333;
  499. div { display: none; }
  500. }
  501.  
  502. .obsolete {
  503. color: #444;
  504. .price, .amount, .volume, g { color: #444; }
  505. }
  506. }
  507. }
  508.  
  509. #candlestick {
  510. position: absolute;
  511. min-width: $candlestick-width; width: $candlestick-width;
  512. min-height: $candlestick-height; height: $candlestick-height;
  513. top: $gutter; left: $market-list-width + $gutter-2x;
  514. }
  515.  
  516. .switch {
  517. font-size: 12px;
  518. position: absolute;
  519. a { color: #777; }
  520. a:hover { color: lighten(#777, 50%); }
  521. a.active { color: #eee; }
  522. }
  523.  
  524. #range_switch {
  525. top: 13px; right: $order-book-width + $gutter-2x + 25;
  526. li { padding-left: 10px; padding-right: 0; }
  527. }
  528. #indicator_switch_wrapper {
  529. top: 33px; right: $order-book-width + $gutter-2x + 25;
  530. li { padding-left: 10px; padding-right: 0; }
  531. }
  532.  
  533. #depths_wrapper {
  534. width: $order-book-width; height: $depths-height;
  535. bottom: $gutter-3x + $my-orders-height + $entry-height; right: $gutter;
  536.  
  537. .panel-body {
  538. padding: 0;
  539. }
  540.  
  541. table.depths-table {
  542. th, td { text-align: right; width: 90px; min-width: 90px; }
  543. th { color: #888; }
  544. td { color: #eee; }
  545. }
  546. }
  547.  
  548. #market_trades_wrapper {
  549. .dropdown-wrapper {
  550. position: absolute;
  551. height: 100px;
  552. top: $market-list-height + $gutter-3x; left: $market-trades-width + $gutter;
  553. z-index: 998;
  554. }
  555. }
  556.  
  557. #market_trades {
  558. position: absolute;
  559. bottom: $gutter; left: $gutter;
  560. width: $market-trades-width;
  561. height: $market-trades-height;
  562. min-height: $market-trades-height;
  563. z-index: 999;
  564.  
  565. .panel {
  566. width: $market-trades-width;
  567. height: $market-trades-height;
  568. min-height: $market-trades-height;
  569. }
  570. .panel-body-content {
  571. min-height: $market-trades-height - $panel_table_header_high;
  572. }
  573.  
  574. table {
  575. .new {
  576. background-color: #333;
  577. div { display: none; }
  578. }
  579. }
  580.  
  581. .all-trades tr td.my i { display: none; }
  582. .all-trades tr.mine td.my i { display: inline; }
  583.  
  584. .my-trades tbody {
  585. display: none;
  586. }
  587. }
  588.  
  589. #market_list_wrapper {
  590. .dropdown-wrapper {
  591. position: absolute;
  592. width: 200px;
  593. height: 100px;
  594. top: $gutter; left: $market-list-width + $gutter;
  595. z-index: 998;
  596. }
  597. }
  598.  
  599. #market_list {
  600. position: absolute;
  601. top: $gutter; left: $gutter;
  602. width: $market-list-width; height: $market-list-height;
  603. z-index: 999;
  604.  
  605. .panel-body-content {
  606. height: $market-list-height - $panel_table_header_high;
  607.  
  608. td.price {
  609. .fill { color: #333; }
  610. }
  611.  
  612. td.change {
  613. min-width: 72px;
  614. }
  615.  
  616. .markets {
  617. tr { display: none; }
  618. &.all { tr { display: block; } }
  619. &.cny { tr.quote-cny { display: block; } }
  620. &.btc { tr.quote-btc { display: block; } }
  621. &.ltc { tr.quote-ltc { display: block; } }
  622. &.ppc { tr.quote-ppc { display: block; } }
  623. &.blk { tr.quote-blk { display: block; } }
  624. &.rpt { tr.quote-rpt { display: block; } }
  625. &.trt { tr.quote-trt { display: block; } }
  626. }
  627. }
  628. }
  629.  
  630. #my_orders_wrapper {
  631. .dropdown-wrapper {
  632. position: absolute;
  633. height: $my-orders-height;
  634. bottom: $gutter-2x + $entry-height; right: $order-book-width + $gutter;
  635. }
  636. }
  637.  
  638. #my_orders {
  639. width: $my-orders-width; height: $my-orders-height;
  640. bottom: $gutter-2x + $entry-height; right: $gutter;
  641.  
  642. .panel-body-content {
  643. height: $my-orders-height - $gutter-2x;
  644.  
  645. .time, .price, .volume, .amount {
  646. & > span { display: block; height: 16px; padding: 2px 0; }
  647. }
  648.  
  649. .empty-row {
  650. position: absolute;
  651. top: 44%;
  652. width: 99%;
  653. height: 0;
  654. padding: 0;
  655. color: $gray-light;
  656. text-align: center;
  657. }
  658.  
  659. .label { margin: 0 1px; padding: 2px; }
  660. .label-ask { background-color: $down-text-fade; }
  661. .label-bid { background-color: $up-text-fade; }
  662. .label-new { background-color: $gray-light; }
  663. .label-partial { background-color: #2b90de; }
  664. }
  665.  
  666. & > .mask { padding-top: 130px; }
  667. }
  668.  
  669. /* order entry
  670. -----------------------------------------------------*/
  671. [data-lang=zh-cn] {
  672. #ask_entry, #bid_entry {
  673. label.input-group-addon {
  674. min-width: 40px !important;
  675. }
  676.  
  677. .hint-price-disadvantage, .hint-positions {
  678. top: 2px;
  679. left: 39px;
  680. margin-left: 0px;
  681. position: absolute;
  682. z-index: 10;
  683. }
  684. }
  685.  
  686. .sideways li {
  687. direction: rtl;
  688. unicode-bidi: bidi-override;
  689. v { display: inline-block; @include transform(rotate(-270deg)); }
  690. }
  691.  
  692. #account_summary {
  693. table {
  694. min-width: 260px;
  695. }
  696. }
  697. }
  698.  
  699. #ask_entry, #bid_entry {
  700. z-index: 999;
  701.  
  702. .panel-body { padding-top: 10px; }
  703.  
  704. .btn:focus, .btn:active:focus, .btn.active:focus {
  705. outline: 0px auto -webkit-focus-ring-color;
  706. outline-offset: -2px;
  707. }
  708.  
  709. .row { margin-bottom: 6px; }
  710.  
  711. .input-group {
  712. .input-group-addon {
  713. padding: 1px 4px 0px 4px;
  714. }
  715.  
  716. label.input-group-addon {
  717. padding: 3px 6px 0px 6px;
  718. min-width: 70px;
  719. text-align: right;
  720. color: #aaa;
  721. }
  722.  
  723. span.input-group-addon {
  724. padding: 3px 6px 0px 6px;
  725. min-width: 40px;
  726. text-align: left;
  727. color: #aaa;
  728. }
  729.  
  730. input {
  731. text-align: right;
  732. padding-top: 8px !important;
  733. padding-bottom: 4px !important;
  734. padding-right: 6px !important;
  735. padding-left: 24px !important;
  736. }
  737.  
  738. margin-bottom: 8px;
  739. }
  740.  
  741. .hint-price-disadvantage, .hint-positions {
  742. top: 3px;
  743. left: 60px;
  744. margin-left: 0px;
  745. position: absolute;
  746. z-index: 10;
  747. }
  748.  
  749. .label { font-size: inherit; }
  750. .label.label-info { color: $brand-info }
  751. .label.label-success { color: $brand-success }
  752. .label.label-danger { color: $brand-danger }
  753.  
  754. span.status-info, .status-success, .status-danger {
  755. top: -3px;
  756. left: -6px;
  757. margin-left: 0px;
  758. position: absolute;
  759. i.fa { margin-left: 4px; }
  760. }
  761.  
  762. .row-tips {
  763. margin-top: 18px;
  764. margin-bottom: 13px;
  765.  
  766. .current-balance { font-family: $font-family-monospace; }
  767. .unit { padding-left: 3px; }
  768. }
  769. }
  770.  
  771. /* order-book trades my-orders table
  772. ---------------------------------------------------*/
  773. .col-left { padding-right: 12px; }
  774. .panel-body-head { border-bottom: 1px solid #333; }
  775.  
  776. #ticker, #order_book, #market_trades, #my_orders, #market_list {
  777. table {
  778. margin-bottom: 0px;
  779.  
  780. &.hidden-buy { tr.bid { display: none; } }
  781. &.hidden-sell { tr.ask { display: none; } }
  782.  
  783. td, th {
  784. padding: 0px 2px;
  785. border: none;
  786. }
  787.  
  788. tr.highlight {
  789. background-color: #333;
  790. }
  791.  
  792. td {
  793. &.price, &.amount, &.volume, &.change {
  794. text-align: right;
  795. }
  796. }
  797. }
  798. }
  799.  
  800. table {
  801. thead { cursor: default; th { color: #777; }}
  802. &.table-hover { tbody > tr:hover { cursor: pointer;} }
  803. }
  804.  
  805. .panel-body-content::-webkit-scrollbar { width: 0 !important }
  806. .panel-body-content { overflow-y: auto; -ms-overflow-style: none; overflow: -moz-scrollbars-auto; }
  807.  
  808. .panel-heading {
  809. .pull-right + .pull-right {
  810. margin-right: 10px;
  811. }
  812. }
  813.  
  814. .chart-ticker {
  815. color: #777;
  816. background-color: $panel-bg-alpha;
  817. border: 1px solid $navbar-default-border;
  818. padding: 6px 0 6px 6px;
  819. font-size: 11px;
  820.  
  821. & > div { display: inline-block; width: 70px; }
  822. & > div.tooltip-ma { width: 76; margin-top: 3px; }
  823. & > div.tooltip-ticker { margin-top: 5px; }
  824.  
  825. ul.list-inline {
  826. margin: 6px 0 0 0;
  827. li { padding: 0 6px 0 0; }
  828. }
  829.  
  830. span.t-title {
  831. display: block;
  832. text-align: rigth;
  833. }
  834.  
  835. span.t-value {
  836. color: $text-color !important;
  837. font-family: $font-family-monospace;
  838. text-align: right;
  839. margin-right: 15px;
  840. }
  841. }
  842.  
  843. .dropdown:hover .dropdown-menu {
  844. display: block;
  845. }
  846. .new_order_bid, .new_order_ask {
  847. zoom: 85%;
  848. }
  849. input#fee[disabled] {
  850. background-color: black;
  851. }
  852. input#order_bid_fee, input#order_ask_fee {
  853. background: black;
  854. }
  855.  
  856. @import 'custom/market';
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!