148 lines
2.8 KiB
CSS
148 lines
2.8 KiB
CSS
#root {
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
text-align: center;
|
|
position: relative;
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Ensure body and html have no margins/padding for full screen background */
|
|
body, html {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
|
|
}
|
|
|
|
/* Custom animations */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(-10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn 0.3s ease-in-out forwards;
|
|
}
|
|
|
|
/* New animations for DataStatsPage */
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slide-up {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes fade-in-up {
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes slide-in-left {
|
|
from { opacity: 0; transform: translateX(-20px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fade-in 0.8s ease-out forwards;
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slide-up 0.6s ease-out forwards;
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
animation: fade-in-up 0.8s ease-out forwards;
|
|
}
|
|
|
|
.animate-slide-in-left {
|
|
animation: slide-in-left 0.6s ease-out forwards;
|
|
}
|
|
|
|
.delay-100 {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.delay-200 {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
/* Custom scrollbar for search results */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: #888;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: #555;
|
|
}
|
|
|
|
.scrollbar-hide {
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* Internet Explorer and Edge */
|
|
overflow: -moz-scrollbars-none; /* Old versions of Firefox */
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3.2em;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
/* Custom minimal scrollbar styles */
|
|
.custom-scrollbar {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 1px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: rgba(156, 163, 175, 0.5);
|
|
border-radius: 2px;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(107, 114, 128, 0.7);
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Custom fade-in animation for dropdown content */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn 0.3s ease-out forwards;
|
|
}
|