cryptotrader-pro / style.css
lonestar108's picture
tighten up the UI, make it more compact
df2b0e6 verified
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
min-height: 100vh;
padding-bottom: 40px;
font-size: 13px;
}
#tradingview-chart {
min-height: 400px;
}
@media (min-width: 1280px) {
.xl\:w-80 {
width: 18rem;
}
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #1e293b;
}
::-webkit-scrollbar-thumb {
background: #334155;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #475569;
}
/* Compact tabs */
.flex.border-b.border-gray-700 > button {
padding: 0.25rem 0.75rem;
font-size: 12px;
margin-bottom: -1px;
}
/* Tables */
table {
font-size: 12px;
}
th, td {
padding: 0.25rem;
}
/* Form elements */
input, select {
padding: 0.25rem 0.5rem;
font-size: 12px;
}
button {
padding: 0.25rem 0.5rem;
font-size: 12px;
}
/* Tight spacing */
.p-4 { padding: 0.5rem; }
.py-4 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-4 { padding-left: 0.5rem; padding-right: 0.5rem; }
.mt-4 { margin-top: 0.5rem; }
/* Live price ticker */
.live-price {
animation: pulse 1s infinite alternate;
}
@keyframes pulse {
from { opacity: 0.7; }
to { opacity: 1; }
}
.price-ticker {
position: relative;
}
.price-ticker::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
background: #10b981;
border-radius: 50%;
right: -10px;
top: 4px;
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
/* Trading mode toggle */
#paper-mode, #live-mode {
transition: all 0.2s ease;
}
/* Custom table styling */
table {
border-collapse: separate;
border-spacing: 0;
}
th {
font-weight: 500;
font-size: 0.875rem;
}
td {
font-size: 0.875rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
/* Input number arrows */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}