125 lines
2.6 KiB
CSS
125 lines
2.6 KiB
CSS
:root {
|
|
--bg-color: #0b0e11;
|
|
--text-color: #eaecef;
|
|
--accent-color: #f0b90b;
|
|
--card-bg: #1e2329;
|
|
--border-color: #363c4e;
|
|
--success-color: #0ecb81;
|
|
--danger-color: #f6465d;
|
|
--okx-blue: #0046ff;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
|
|
/* Visibility Utilities */
|
|
.text-white { color: #ffffff !important; }
|
|
.text-black { color: #000000 !important; }
|
|
.text-muted { color: #848e9c !important; }
|
|
|
|
.bg-black { background-color: #000000 !important; color: #ffffff !important; }
|
|
.bg-white { background-color: #ffffff !important; color: #000000 !important; }
|
|
|
|
/* Invert colors for white sections */
|
|
.bg-white .text-muted { color: #666666 !important; }
|
|
.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4, .bg-white h5, .bg-white h6 { color: #000000 !important; }
|
|
|
|
.text-accent { color: var(--okx-blue); }
|
|
.text-success { color: var(--success-color) !important; }
|
|
.text-danger { color: var(--danger-color) !important; }
|
|
|
|
.btn-primary {
|
|
background-color: var(--okx-blue);
|
|
border: none;
|
|
}
|
|
|
|
.btn-accent {
|
|
background-color: var(--accent-color);
|
|
color: #000;
|
|
font-weight: bold;
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-accent:hover {
|
|
background-color: #d9a508;
|
|
color: #000;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(240, 185, 11, 0.3);
|
|
}
|
|
|
|
.card {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-color);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border-color);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #484f65;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(0, 40px, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.animated {
|
|
animation-duration: 1s;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.fadeInUp {
|
|
animation-name: fadeInUp;
|
|
}
|
|
|
|
/* Market Table Adjustments */
|
|
.market-table-container {
|
|
background: var(--card-bg);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.market-table th {
|
|
color: #848e9c;
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Trade Page Specific */
|
|
.trade-container {
|
|
background-color: #161a1e;
|
|
}
|
|
|
|
.order-row {
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.order-row:hover {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|