575 lines
15 KiB
CSS
575 lines
15 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-ring: var(--ring);
|
|
--color-input: var(--input);
|
|
--color-border: var(--border);
|
|
--color-destructive: var(--destructive);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-card: var(--card);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
}
|
|
|
|
:root {
|
|
--radius: 0.625rem;
|
|
--background: oklch(1 0 0);
|
|
--foreground: oklch(0.129 0.042 264.695);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.129 0.042 264.695);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.129 0.042 264.695);
|
|
--primary: oklch(0.208 0.042 265.755);
|
|
--primary-foreground: oklch(0.984 0.003 247.858);
|
|
--secondary: oklch(0.968 0.007 247.896);
|
|
--secondary-foreground: oklch(0.208 0.042 265.755);
|
|
--muted: oklch(0.968 0.007 247.896);
|
|
--muted-foreground: oklch(0.554 0.046 257.417);
|
|
--accent: oklch(0.968 0.007 247.896);
|
|
--accent-foreground: oklch(0.208 0.042 265.755);
|
|
--destructive: oklch(0.577 0.245 27.325);
|
|
--border: oklch(0.929 0.013 255.508);
|
|
--input: oklch(0.929 0.013 255.508);
|
|
--ring: oklch(0.704 0.04 256.788);
|
|
--chart-1: oklch(0.646 0.222 41.116);
|
|
--chart-2: oklch(0.6 0.118 184.704);
|
|
--chart-3: oklch(0.398 0.07 227.392);
|
|
--chart-4: oklch(0.828 0.189 84.429);
|
|
--chart-5: oklch(0.769 0.188 70.08);
|
|
--sidebar: oklch(0.984 0.003 247.858);
|
|
--sidebar-foreground: oklch(0.129 0.042 264.695);
|
|
--sidebar-primary: oklch(0.208 0.042 265.755);
|
|
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
|
--sidebar-accent: oklch(0.968 0.007 247.896);
|
|
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
|
|
--sidebar-border: oklch(0.929 0.013 255.508);
|
|
--sidebar-ring: oklch(0.704 0.04 256.788);
|
|
}
|
|
|
|
.dark {
|
|
--background: oklch(0.129 0.042 264.695);
|
|
--foreground: oklch(0.984 0.003 247.858);
|
|
--card: oklch(0.208 0.042 265.755);
|
|
--card-foreground: oklch(0.984 0.003 247.858);
|
|
--popover: oklch(0.208 0.042 265.755);
|
|
--popover-foreground: oklch(0.984 0.003 247.858);
|
|
--primary: oklch(0.929 0.013 255.508);
|
|
--primary-foreground: oklch(0.208 0.042 265.755);
|
|
--secondary: oklch(0.279 0.041 260.031);
|
|
--secondary-foreground: oklch(0.984 0.003 247.858);
|
|
--muted: oklch(0.279 0.041 260.031);
|
|
--muted-foreground: oklch(0.704 0.04 256.788);
|
|
--accent: oklch(0.279 0.041 260.031);
|
|
--accent-foreground: oklch(0.984 0.003 247.858);
|
|
--destructive: oklch(0.704 0.191 22.216);
|
|
--border: oklch(1 0 0 / 10%);
|
|
--input: oklch(1 0 0 / 15%);
|
|
--ring: oklch(0.551 0.027 264.364);
|
|
--chart-1: oklch(0.488 0.243 264.376);
|
|
--chart-2: oklch(0.696 0.17 162.48);
|
|
--chart-3: oklch(0.769 0.188 70.08);
|
|
--chart-4: oklch(0.627 0.265 303.9);
|
|
--chart-5: oklch(0.645 0.246 16.439);
|
|
--sidebar: oklch(0.208 0.042 265.755);
|
|
--sidebar-foreground: oklch(0.984 0.003 247.858);
|
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
|
--sidebar-accent: oklch(0.279 0.041 260.031);
|
|
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
|
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
--sidebar-ring: oklch(0.551 0.027 264.364);
|
|
}
|
|
|
|
/* === CUSTOM COLOR THEME === */
|
|
@theme {
|
|
/* Extended Gray Scale */
|
|
--color-gray-900: #050505;
|
|
--color-gray-800: #141414;
|
|
--color-gray-700: #212328;
|
|
--color-gray-600: #30333a;
|
|
--color-gray-500: #9095a1;
|
|
--color-gray-400: #ccdadc;
|
|
--color-gray-100: #fafafa;
|
|
|
|
/* Vibrant Colors */
|
|
--color-blue-600: #5862ff;
|
|
--color-yellow-400: #fdd458;
|
|
--color-yellow-500: #e8ba40;
|
|
--color-teal-400: #0fedbe;
|
|
--color-red-500: #ff495b;
|
|
--color-orange-500: #ff8243;
|
|
--color-purple-500: #d13bff;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
|
|
body {
|
|
@apply text-foreground bg-gray-900;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.dashboard {
|
|
@apply min-h-screen bg-gray-100 dark:bg-gray-900;
|
|
}
|
|
.container {
|
|
@apply mx-auto max-w-screen-2xl px-4 md:px-6 lg:px-8;
|
|
}
|
|
|
|
.yellow-btn {
|
|
@apply h-12 cursor-pointer rounded-lg bg-gradient-to-b from-yellow-400 to-yellow-500 text-base font-medium text-gray-950 shadow-lg hover:from-yellow-500 hover:to-yellow-400 disabled:opacity-50;
|
|
}
|
|
|
|
.home-wrapper {
|
|
@apply flex-col items-center gap-4 text-gray-400 sm:items-start md:gap-10;
|
|
}
|
|
|
|
.home-section {
|
|
@apply w-full grid-cols-1 gap-8 md:grid-cols-2 xl:grid-cols-3;
|
|
}
|
|
|
|
.header {
|
|
@apply z-50 bg-white dark:bg-gray-800;
|
|
}
|
|
|
|
.side-bar {
|
|
@apply z-50 bg-white dark:bg-gray-800;
|
|
}
|
|
|
|
.header-wrapper {
|
|
@apply flex items-center justify-between px-6 py-4 text-gray-500;
|
|
}
|
|
|
|
.auth-layout {
|
|
@apply relative flex h-screen flex-col justify-between overflow-hidden bg-gray-900 lg:flex-row;
|
|
}
|
|
|
|
.auth-logo {
|
|
@apply mb-8 pt-6 lg:mb-12 lg:pt-8;
|
|
}
|
|
|
|
.auth-left-section {
|
|
@apply flex w-full flex-col overflow-y-auto px-6 lg:h-screen lg:w-[45%] lg:px-16;
|
|
}
|
|
|
|
.auth-right-section {
|
|
@apply flex w-full flex-col justify-start bg-gray-800 px-6 py-4 max-lg:border-t max-lg:border-gray-600 md:p-6 lg:h-screen lg:w-[55%] lg:px-18 lg:py-12;
|
|
}
|
|
|
|
.auth-blockquote {
|
|
@apply mb-1 text-sm font-medium text-gray-400 md:mb-6 md:text-xl lg:mb-8 lg:text-2xl;
|
|
}
|
|
|
|
.auth-testimonial-author {
|
|
@apply text-xs font-bold text-gray-400 not-italic md:text-lg;
|
|
}
|
|
|
|
.auth-dashboard-preview {
|
|
@apply left-0 hidden h-auto w-[1024px] max-w-none rounded-xl border-6 border-gray-800 shadow-2xl lg:block;
|
|
}
|
|
|
|
.form-title {
|
|
@apply mb-10 text-4xl font-bold text-gray-400;
|
|
}
|
|
|
|
.form-label {
|
|
@apply text-sm font-medium text-gray-400;
|
|
}
|
|
|
|
.form-input {
|
|
@apply rounded-lg !border-yellow-500 border-gray-600 bg-gray-800 px-3 py-3 text-base text-white placeholder:text-gray-500 focus:h-12 focus:ring-0;
|
|
}
|
|
|
|
.select-trigger {
|
|
@apply w-full rounded-lg !border-yellow-500 border-gray-600 bg-gray-800 px-3 py-3 text-base text-white focus:!h-12 focus:ring-0;
|
|
}
|
|
|
|
.country-select-trigger {
|
|
@apply w-full justify-between rounded-lg !border-yellow-500 border-gray-600 bg-gray-800 px-3 py-3 text-base font-normal text-gray-400 focus:h-12 focus:ring-0;
|
|
}
|
|
|
|
.country-select-input {
|
|
@apply rounded-none border-0 border-b border-gray-600 !bg-gray-800 text-gray-400 placeholder:text-gray-500 focus:ring-0;
|
|
}
|
|
|
|
.country-select-empty {
|
|
@apply !bg-gray-800 py-6 text-center text-gray-500;
|
|
}
|
|
|
|
.country-select-item {
|
|
@apply rounded-sm !bg-gray-600 bg-gray-800 px-3 py-2 text-white hover:cursor-pointer;
|
|
}
|
|
|
|
.footer-link {
|
|
@apply font-medium text-gray-400 transition-colors hover:text-yellow-400 hover:underline;
|
|
}
|
|
|
|
.search-text {
|
|
@apply cursor-pointer hover:text-yellow-500;
|
|
}
|
|
|
|
.search-btn {
|
|
@apply flex w-fit cursor-pointer items-center gap-2 rounded bg-yellow-500 px-4 py-2 text-sm font-medium text-black hover:bg-yellow-500 md:text-base;
|
|
}
|
|
|
|
.search-dialog {
|
|
@apply fixed top-10 left-1/2 -translate-x-1/2 translate-y-10 border-gray-600 !bg-gray-800 lg:min-w-[800px];
|
|
}
|
|
|
|
.search-field {
|
|
@apply relative border-b border-gray-600 !bg-gray-800;
|
|
}
|
|
|
|
.search-list {
|
|
@apply max-h-[400px] !bg-gray-800;
|
|
}
|
|
|
|
.search-list-indicator {
|
|
@apply px-5 py-2;
|
|
}
|
|
|
|
.search-list-empty {
|
|
@apply !bg-transparent py-6 text-center text-gray-500;
|
|
}
|
|
|
|
.search-input {
|
|
@apply h-14 border-0 !bg-gray-800 pr-10 text-base text-gray-400 placeholder:text-gray-500 focus:ring-0;
|
|
}
|
|
|
|
.search-loader {
|
|
@apply absolute top-1/2 right-12 h-4 w-4 -translate-y-1/2 animate-spin text-gray-500;
|
|
}
|
|
|
|
.search-count {
|
|
@apply border-b border-gray-700 bg-gray-700 px-4 py-2 text-sm font-medium text-gray-400;
|
|
}
|
|
|
|
.search-item {
|
|
@apply my-3 w-full rounded-none px-1 data-[selected=true]:bg-gray-600;
|
|
}
|
|
|
|
.search-item-link {
|
|
@apply flex w-full cursor-pointer items-center gap-3 border-b border-gray-600 px-2 transition-colors last:border-b-0;
|
|
}
|
|
|
|
.search-item-name {
|
|
@apply text-base font-medium text-gray-400;
|
|
}
|
|
|
|
.nav-list {
|
|
@apply flex flex-col gap-3 p-2 font-medium sm:flex-row sm:gap-10;
|
|
}
|
|
|
|
.stock-details-container {
|
|
@apply w-full grid-cols-1 gap-6 space-y-6 sm:space-y-8 xl:grid-cols-3;
|
|
}
|
|
|
|
.watchlist-btn {
|
|
@apply h-11 w-full cursor-pointer rounded bg-yellow-500 text-base font-semibold text-gray-900 hover:bg-yellow-500;
|
|
}
|
|
|
|
.watchlist-remove {
|
|
@apply bg-red-500! text-gray-900! hover:bg-red-500!;
|
|
}
|
|
|
|
.watchlist-empty-container {
|
|
@apply container flex-col items-center gap-8 p-6 text-center md:mt-10;
|
|
}
|
|
|
|
.watchlist-empty {
|
|
@apply flex flex-col items-center justify-center text-center;
|
|
}
|
|
|
|
.watchlist-star {
|
|
@apply mb-4 h-16 w-16 text-gray-500;
|
|
}
|
|
|
|
.empty-title {
|
|
@apply mb-2 text-xl font-semibold text-gray-400;
|
|
}
|
|
|
|
.empty-description {
|
|
@apply mb-6 max-w-md text-gray-500;
|
|
}
|
|
|
|
.watchlist-container {
|
|
@apply flex flex-col-reverse gap-8 lg:grid lg:grid-cols-3;
|
|
}
|
|
|
|
.watchlist {
|
|
@apply space-y-8 lg:col-span-2;
|
|
}
|
|
|
|
.watchlist-alerts {
|
|
@apply h-full w-full flex-col items-start gap-6 lg:col-span-1;
|
|
}
|
|
|
|
.watchlist-icon-btn {
|
|
@apply w-fit cursor-pointer text-gray-400 hover:bg-transparent! hover:text-yellow-500;
|
|
}
|
|
|
|
.watchlist-icon-added {
|
|
@apply !text-yellow-600 hover:!text-yellow-500;
|
|
}
|
|
|
|
.watchlist-icon {
|
|
@apply flex h-8 w-8 items-center justify-center rounded-full bg-gray-700/50;
|
|
}
|
|
|
|
.trash-icon {
|
|
@apply h-4 w-4 text-gray-400 hover:text-red-400;
|
|
}
|
|
|
|
.star-icon {
|
|
@apply h-4 w-4;
|
|
}
|
|
|
|
.watchlist-title {
|
|
@apply text-xl font-bold text-gray-100 md:text-2xl;
|
|
}
|
|
|
|
.watchlist-table {
|
|
@apply !relative !w-full overflow-hidden !rounded-lg border !border-gray-600 bg-gray-800;
|
|
}
|
|
|
|
.table-header-row {
|
|
@apply border-b border-gray-600 bg-gray-700 font-medium text-gray-400 hover:bg-gray-700;
|
|
}
|
|
|
|
.table-header:first-child {
|
|
@apply pl-4;
|
|
}
|
|
|
|
.table-row {
|
|
@apply cursor-pointer border-b border-gray-600 text-gray-100 transition-colors hover:bg-gray-700/50;
|
|
}
|
|
|
|
.table-cell {
|
|
@apply text-base font-medium;
|
|
}
|
|
|
|
.add-alert {
|
|
@apply flex w-fit cursor-pointer items-center gap-1.5 rounded border border-yellow-600/20 bg-transparent px-3 py-2 text-sm font-medium whitespace-nowrap text-yellow-600 transition-colors hover:bg-transparent;
|
|
}
|
|
|
|
.watchlist-news {
|
|
@apply grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3;
|
|
}
|
|
|
|
.news-item {
|
|
@apply w-full cursor-pointer rounded-lg border border-gray-600 bg-gray-800 p-4 duration-200 hover:border-gray-600;
|
|
}
|
|
|
|
.news-tag {
|
|
@apply mb-5 inline-block w-fit rounded bg-gray-600/60 px-2 py-1 font-mono text-sm font-medium text-green-500;
|
|
}
|
|
|
|
.news-title {
|
|
@apply mb-3 line-clamp-2 text-lg leading-tight font-semibold text-gray-100;
|
|
}
|
|
|
|
.news-meta {
|
|
@apply mb-1 flex items-center text-sm text-gray-500;
|
|
}
|
|
|
|
.news-summary {
|
|
@apply mb-3 line-clamp-3 flex-1 text-base leading-relaxed text-gray-400;
|
|
}
|
|
|
|
.news-cta {
|
|
@apply align-bottom text-sm text-yellow-500 hover:text-gray-400;
|
|
}
|
|
|
|
.alert-dialog {
|
|
@apply max-w-md border-gray-600 bg-gray-800 text-gray-400;
|
|
}
|
|
|
|
.alert-title {
|
|
@apply text-xl font-semibold text-gray-100;
|
|
}
|
|
|
|
.alert-list {
|
|
@apply flex max-h-[911px] w-full flex-1 flex-col gap-4 overflow-y-auto rounded-lg border border-gray-600 bg-gray-800 p-3;
|
|
}
|
|
|
|
.alert-empty {
|
|
@apply px-6 py-8 text-center text-gray-500/50;
|
|
}
|
|
|
|
.alert-item {
|
|
@apply rounded-lg border border-gray-600 bg-gray-700 p-4;
|
|
}
|
|
|
|
.alert-name {
|
|
@apply mb-2 text-lg font-semibold text-yellow-500;
|
|
}
|
|
|
|
.alert-details {
|
|
@apply mb-2 flex items-center justify-between gap-3 border-b pb-3;
|
|
}
|
|
|
|
.alert-company {
|
|
@apply text-base text-gray-400;
|
|
}
|
|
|
|
.alert-price {
|
|
@apply font-bold text-gray-100;
|
|
}
|
|
|
|
.alert-actions {
|
|
@apply flex items-end justify-between;
|
|
}
|
|
|
|
.alert-update-btn {
|
|
@apply cursor-pointer rounded-full bg-transparent text-gray-400 hover:bg-green-500/15;
|
|
}
|
|
|
|
.alert-delete-btn {
|
|
@apply cursor-pointer rounded-full bg-transparent text-gray-400 transition-colors hover:bg-red-600/15;
|
|
}
|
|
}
|
|
|
|
/* Market News Component Styles */
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* TradingView Advanced Chart Widget Styles */
|
|
.tradingview-widget-container {
|
|
position: relative;
|
|
background-color: #141414 !important;
|
|
border-radius: 8px !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.tv-embed-widget-wrapper__body {
|
|
background-color: #141414 !important;
|
|
}
|
|
|
|
.tradingview-widget-container__widget {
|
|
background-color: #141414 !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.widget-stock-heatmap-container .screenerMapWrapper-BBVfGP0b {
|
|
overflow: hidden !important;
|
|
background: #141414 !important;
|
|
background-color: #141414 !important;
|
|
}
|
|
|
|
.canvasContainer-tyaAU8aH {
|
|
background: #141414 !important;
|
|
background-color: #141414 !important;
|
|
}
|
|
|
|
.tv-site-widget--bg_none {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.tradingview-widget-copyright {
|
|
font-size: 11px;
|
|
color: #9ca3af;
|
|
text-align: center;
|
|
padding: 4px 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.tradingview-widget-copyright a {
|
|
color: #60a5fa;
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.tradingview-widget-copyright a:hover {
|
|
color: #93c5fd;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.tv-embed-widget-wrapper .tv-embed-widget-wrapper__body {
|
|
background: #141414 !important;
|
|
background-color: #141414 !important;
|
|
}
|
|
|
|
.tradingview-widget-container iframe {
|
|
background-color: #141414 !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.custom-chart.tradingview-widget-container iframe {
|
|
border: 1px solid #30333a;
|
|
border-radius: 8px !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* Custom scrollbar that shows on hover */
|
|
.scrollbar-hide-default {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: transparent transparent;
|
|
}
|
|
|
|
.scrollbar-hide-default::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.scrollbar-hide-default::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-hide-default::-webkit-scrollbar-thumb {
|
|
background-color: transparent;
|
|
border-radius: 4px;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.scrollbar-hide-default:hover {
|
|
scrollbar-color: #30333a transparent;
|
|
}
|
|
|
|
.scrollbar-hide-default:hover::-webkit-scrollbar-thumb {
|
|
background-color: #30333a;
|
|
}
|
|
|
|
.scrollbar-hide-default::-webkit-scrollbar-thumb:hover {
|
|
background-color: #9095a1;
|
|
}
|