dashboard.scss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. .crypto-dashboard {
  2. display: flex;
  3. flex-direction: column;
  4. height: 100%;
  5. background: #f8f8f8;
  6. .resize-handle-h {
  7. height: 5px;
  8. background: var(--border-default);
  9. cursor: row-resize;
  10. flex-shrink: 0;
  11. transition: background 0.15s;
  12. position: relative;
  13. &::after {
  14. content: '';
  15. position: absolute;
  16. left: 50%;
  17. top: 50%;
  18. transform: translate(-50%, -50%);
  19. width: 30px;
  20. height: 3px;
  21. border-top: 1px solid var(--border-strong);
  22. border-bottom: 1px solid var(--border-strong);
  23. }
  24. &:hover {
  25. background: #d0d0d0;
  26. }
  27. }
  28. .dashboard-bottom {
  29. display: flex;
  30. flex: 1;
  31. min-height: 0;
  32. border-top: 1px solid var(--border-default);
  33. .dashboard-orderbook {
  34. overflow: hidden;
  35. min-width: 0;
  36. }
  37. .dashboard-trades {
  38. overflow: hidden;
  39. min-width: 0;
  40. }
  41. .resize-handle-v {
  42. width: 5px;
  43. background: var(--border-default);
  44. cursor: col-resize;
  45. flex-shrink: 0;
  46. transition: background 0.15s;
  47. position: relative;
  48. &::after {
  49. content: '';
  50. position: absolute;
  51. left: 50%;
  52. top: 50%;
  53. transform: translate(-50%, -50%);
  54. width: 3px;
  55. height: 30px;
  56. border-left: 1px solid var(--border-strong);
  57. border-right: 1px solid var(--border-strong);
  58. }
  59. &:hover {
  60. background: #d0d0d0;
  61. }
  62. }
  63. }
  64. }
  65. @media (max-width: 768px) {
  66. .crypto-dashboard {
  67. height: auto;
  68. .dashboard-bottom {
  69. flex-direction: column;
  70. .dashboard-orderbook {
  71. width: 100% !important;
  72. height: 350px;
  73. }
  74. .dashboard-trades {
  75. width: 100% !important;
  76. height: 300px;
  77. }
  78. .resize-handle-v {
  79. display: none;
  80. }
  81. }
  82. }
  83. }