Shape's picture
Review and fix the UI
03ffd7c verified
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Improve contrast and readability */
.text-gray-400 {
color: #9ca3af;
}
.text-gray-300 {
color: #d1d5db;
}
/* Better card hovering effects */
.bg-gray-800 {
transition: all 0.2s ease-in-out;
}
.bg-gray-800:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}
/* Table improvements */
table th {
color: #e5e7eb !important;
font-weight: 600;
}
table tbody tr {
transition: background-color 0.15s ease;
}
table tbody tr:hover {
background-color: rgba(55, 65, 81, 0.5) !important;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #1f2937;
}
::-webkit-scrollbar-thumb {
background: #4b5563;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #6b7280;
}
/* Animation for stats cards */
.stats-card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stats-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
/* Pulse animation for notifications */
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}