117 lines
2.0 KiB
CSS
117 lines
2.0 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 222 47% 11%;
|
|
--foreground: 0 0% 98%;
|
|
|
|
--card: 222 47% 11%;
|
|
--card-foreground: 0 0% 98%;
|
|
|
|
--popover: 222 47% 11%;
|
|
--popover-foreground: 0 0% 98%;
|
|
|
|
--primary: 24 100% 50%;
|
|
--primary-foreground: 0 0% 98%;
|
|
|
|
--secondary: 217 32% 18%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
|
|
--muted: 217 32% 18%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
|
|
--accent: 217 32% 18%;
|
|
--accent-foreground: 0 0% 98%;
|
|
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
|
|
--border: 217 32% 18%;
|
|
--input: 217 32% 18%;
|
|
--ring: 24 100% 50%;
|
|
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
html, body {
|
|
overflow-x: hidden;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
body {
|
|
@apply bg-netbirdDark text-foreground;
|
|
}
|
|
|
|
/* Custom Scrollbar Styling */
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: #0f1729; /* netbirdDark */
|
|
border-radius: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #ff6b00; /* netbirdOrange */
|
|
border-radius: 10px;
|
|
border: 2px solid #0f1729; /* Border to match track */
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: #ff8833; /* Lighter shade on hover */
|
|
}
|
|
|
|
/* Firefox */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #ff6b00 #0f1729;
|
|
}
|
|
}
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(90deg, #ff6b00, #ff9d57);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.data-flow-animation {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.data-flow-animation::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 50%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 107, 0, 0.2),
|
|
transparent
|
|
);
|
|
animation: data-flow 3s infinite;
|
|
}
|
|
|
|
@keyframes data-flow {
|
|
0% {
|
|
left: -100%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
|
|
/* Import animations */
|
|
@import './animations.css';
|