moex-vibe/apps/frontend/src/styles.css
Sergey Krylov cfadb2adbe feat: migrate from react-router-dom to @tanstack/react-router (code-first)
- Create code-first route tree in src/app/routing/routeTree.tsx
- Replace ProtectedRoute with beforeLoad auth guards
- Add useSearchParamsCompat for URLSearchParams access
- Update App.tsx, layouts, and all page/widget imports
- Add frontend tooling: biome, prettier, env config
- Update all tests for TanStack Router compatibility
- Remove react-router-dom dependency, @tanstack/router-plugin
- Consolidate biome config at root level
2026-06-23 06:51:48 +03:00

98 lines
1.7 KiB
CSS

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--color-bg: #f5f5f5;
--color-surface: #ffffff;
--color-text: #1a1a1a;
--color-text-secondary: #666;
--color-primary: #1976d2;
--color-positive: #2e7d32;
--color-negative: #c62828;
--border-radius: 8px;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.pnl-cell {
text-align: right;
}
.positive {
color: var(--color-positive);
}
.negative {
color: var(--color-negative);
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
}
a {
color: var(--color-primary);
text-decoration: none;
}
@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.skeleton {
background: linear-gradient(90deg, var(--color-bg) 25%, #f0f0f0 50%, var(--color-bg) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
border-radius: 4px;
}
@keyframes loading-spin {
to {
transform: rotate(360deg);
}
}
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid var(--color-bg);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: loading-spin 0.8s linear infinite;
}
.table-container {
position: relative;
}
.table-loading-overlay {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.65);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
transition: opacity 0.2s ease;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.loading-spinner,
.skeleton {
transition: none;
animation: none;
}
}