| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- .crypto-dashboard {
- display: flex;
- flex-direction: column;
- height: 100%;
- background: #f8f8f8;
- .resize-handle-h {
- height: 5px;
- background: var(--border-default);
- cursor: row-resize;
- flex-shrink: 0;
- transition: background 0.15s;
- position: relative;
- &::after {
- content: '';
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: 30px;
- height: 3px;
- border-top: 1px solid var(--border-strong);
- border-bottom: 1px solid var(--border-strong);
- }
- &:hover {
- background: #d0d0d0;
- }
- }
- .dashboard-bottom {
- display: flex;
- flex: 1;
- min-height: 0;
- border-top: 1px solid var(--border-default);
- .dashboard-orderbook {
- overflow: hidden;
- min-width: 0;
- }
- .dashboard-trades {
- overflow: hidden;
- min-width: 0;
- }
- .resize-handle-v {
- width: 5px;
- background: var(--border-default);
- cursor: col-resize;
- flex-shrink: 0;
- transition: background 0.15s;
- position: relative;
- &::after {
- content: '';
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: 3px;
- height: 30px;
- border-left: 1px solid var(--border-strong);
- border-right: 1px solid var(--border-strong);
- }
- &:hover {
- background: #d0d0d0;
- }
- }
- }
- }
- @media (max-width: 768px) {
- .crypto-dashboard {
- height: auto;
- .dashboard-bottom {
- flex-direction: column;
- .dashboard-orderbook {
- width: 100% !important;
- height: 350px;
- }
- .dashboard-trades {
- width: 100% !important;
- height: 300px;
- }
- .resize-handle-v {
- display: none;
- }
- }
- }
- }
|