stock-bot/apps/stock/web-app/src/index.css

132 lines
2.8 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0 0;
--background-secondary: 0 0 0;
--background-tertiary: 0 0 0;
--surface: 0 0 0;
--surface-secondary: 10 10 10;
--surface-tertiary: 17 17 17;
--border: 26 26 26;
--border-secondary: 42 42 42;
--text-primary: 255 255 255;
--text-secondary: 161 161 170;
--text-muted: 113 113 122;
--primary: 99 102 241;
--primary-hover: 79 70 229;
--secondary: 16 185 129;
--accent: 245 158 11;
--destructive: 239 68 68;
--success: 34 197 94;
--warning: 251 191 36;
}
* {
box-sizing: border-box;
}
html {
@apply h-full;
}
body {
@apply h-full bg-black text-white font-sans antialiased text-sm leading-snug;
font-family:
'Inter',
system-ui,
-apple-system,
sans-serif;
}
#root {
@apply h-full;
}
}
@layer components {
/* Global dark-themed scrollbars with better contrast */
* {
scrollbar-width: thin;
scrollbar-color: rgb(115 115 115) rgb(40 40 40);
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: rgb(40 40 40);
border-radius: 5px;
}
*::-webkit-scrollbar-thumb {
background-color: rgb(115 115 115);
border-radius: 5px;
border: 2px solid rgb(40 40 40);
transition: background-color 0.2s ease;
}
*::-webkit-scrollbar-thumb:hover {
background-color: rgb(140 140 140);
}
*::-webkit-scrollbar-thumb:active {
background-color: rgb(160 160 160);
}
*::-webkit-scrollbar-corner {
background: rgb(40 40 40);
}
/* Trading specific styles */
.profit {
@apply text-success;
}
.loss {
@apply text-danger;
}
.neutral {
@apply text-text-secondary;
}
/* Compact component utilities */
.compact-card {
@apply bg-surface-secondary p-3 rounded border border-border text-sm;
}
.compact-button {
@apply px-2 py-1 text-sm rounded border border-border bg-surface hover:bg-surface-secondary transition-colors;
}
.compact-input {
@apply px-2 py-1 text-sm rounded border border-border bg-surface focus:ring-1 focus:ring-primary-500 focus:border-primary-500;
}
.compact-nav-item {
@apply group flex gap-x-2 rounded-md px-2 py-1.5 text-sm leading-tight font-medium transition-colors;
}
}
.sticky {
position: sticky !important;
position: -webkit-sticky !important;
z-index: 2;
}
.row,
.sticky {
display: flex;
align-items: center;
background-color: white;
border-bottom: 1px solid #eee;
box-sizing: border-box;
}