dashboard.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  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: #eee;
  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 #ccc;
  22. border-bottom: 1px solid #ccc;
  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 #eee;
  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: #eee;
  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 #ccc;
  57. border-right: 1px solid #ccc;
  58. }
  59. &:hover {
  60. background: #d0d0d0;
  61. }
  62. }
  63. }
  64. }
  65. @media (max-width: 768px) {
  66. .crypto-dashboard {
  67. .dashboard-bottom {
  68. flex-direction: column;
  69. .dashboard-orderbook {
  70. width: 100% !important;
  71. max-height: 350px;
  72. }
  73. .dashboard-trades {
  74. width: 100% !important;
  75. max-height: 300px;
  76. }
  77. .resize-handle-v {
  78. display: none;
  79. }
  80. }
  81. }
  82. }