From c5a1e483131f44dc33f747094ac571f51cee2057 Mon Sep 17 00:00:00 2001 From: kjh2064 Date: Sun, 5 Jul 2026 23:12:54 +0900 Subject: [PATCH] fix(ui): resolve app.css 302 redirect by copying wwwroot files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Copy Client/app.css to Server/wwwroot/app.css - Ensure MapStaticAssets() properly serves static files - All CSS files now return 200 OK (app.css, MudBlazor.min.css) - Playwright test verified: 1 passed - Login page styling fully functional CSS Status: ✅ app.css: 200 OK ✅ MudBlazor.min.css: 200 OK ✅ Blazor framework CSS: 200 OK Co-Authored-By: Claude Haiku 4.5 --- src/dotnet/QuantEngine.Web/wwwroot/app.css | 297 +++++++++++++++++++++ 1 file changed, 297 insertions(+) create mode 100644 src/dotnet/QuantEngine.Web/wwwroot/app.css diff --git a/src/dotnet/QuantEngine.Web/wwwroot/app.css b/src/dotnet/QuantEngine.Web/wwwroot/app.css new file mode 100644 index 0000000..a743fcc --- /dev/null +++ b/src/dotnet/QuantEngine.Web/wwwroot/app.css @@ -0,0 +1,297 @@ +/* QuantEngine Global Styles */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, body { + height: 100%; +} + +body { + font-family: 'Roboto', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + color: var(--mud-palette-text-primary, #212121); + background-color: var(--mud-palette-background, #fafafa); + transition: background-color 0.3s ease, color 0.3s ease; +} + +#app { + display: flex; + flex-direction: column; + height: 100%; +} + +/* Scrollbar Styling */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: var(--mud-palette-surface, #ffffff); +} + +::-webkit-scrollbar-thumb { + background: var(--mud-palette-action-default, #c0c0c0); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--mud-palette-primary, #3f51b5); +} + +/* Text Utilities */ +.text-primary { + color: var(--mud-palette-primary, #3f51b5); +} + +.text-secondary { + color: var(--mud-palette-secondary, #f50057); +} + +.text-success { + color: var(--mud-palette-success, #4caf50); +} + +.text-warning { + color: var(--mud-palette-warning, #ff9800); +} + +.text-error { + color: var(--mud-palette-error, #f44336); +} + +.text-muted { + color: var(--mud-palette-text-secondary, rgba(0,0,0,0.6)); +} + +/* Spacing Utilities */ +.mt-1 { margin-top: 0.25rem; } +.mt-2 { margin-top: 0.5rem; } +.mt-3 { margin-top: 1rem; } +.mt-4 { margin-top: 1.5rem; } +.mt-5 { margin-top: 3rem; } + +.mb-1 { margin-bottom: 0.25rem; } +.mb-2 { margin-bottom: 0.5rem; } +.mb-3 { margin-bottom: 1rem; } +.mb-4 { margin-bottom: 1.5rem; } +.mb-5 { margin-bottom: 3rem; } + +.mx-auto { margin-left: auto; margin-right: auto; } +.my-auto { margin-top: auto; margin-bottom: auto; } + +.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } +.px-4 { padding-left: 1rem; padding-right: 1rem; } +.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } +.py-4 { padding-top: 1rem; padding-bottom: 1rem; } + +/* Flex Utilities */ +.d-flex { + display: flex; +} + +.flex-column { + flex-direction: column; +} + +.align-items-center { + align-items: center; +} + +.justify-content-center { + justify-content: center; +} + +.justify-content-between { + justify-content: space-between; +} + +/* Gap Utilities */ +.gap-1 { gap: 0.25rem; } +.gap-2 { gap: 0.5rem; } +.gap-3 { gap: 1rem; } +.gap-4 { gap: 1.5rem; } + +/* Loading Skeleton */ +.skeleton { + background: linear-gradient( + 90deg, + var(--mud-palette-surface, #fff) 0%, + var(--mud-palette-divider, #e0e0e0) 50%, + var(--mud-palette-surface, #fff) 100% + ); + background-size: 200% 100%; + animation: loading 1.5s infinite; +} + +@keyframes loading { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } +} + +/* MudBlazor Overrides */ +.mud-appbar { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.mud-drawer { + border-right: 1px solid var(--mud-palette-divider, #e0e0e0); +} + +.mud-drawer-content { + padding: 1rem; +} + +.mud-nav-link { + border-radius: 4px; + margin-bottom: 0.25rem; + transition: all 0.2s ease; +} + +.mud-nav-link:hover { + background-color: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04)); +} + +.mud-nav-link.mud-ripple-nav-link-active { + background-color: var(--mud-palette-primary-lighten, rgba(63, 81, 181, 0.1)); + color: var(--mud-palette-primary, #3f51b5); + font-weight: 600; +} + +.mud-card { + border: 1px solid var(--mud-palette-divider, #e0e0e0); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + transition: box-shadow 0.2s ease, transform 0.2s ease; +} + +.mud-card:hover { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transform: translateY(-2px); +} + +.mud-button { + text-transform: none; + font-weight: 500; + padding: 0.5rem 1rem; + border-radius: 4px; +} + +.mud-button-root:disabled { + opacity: 0.6; +} + +/* Forms */ +.mud-input-control { + margin-bottom: 1rem; +} + +.mud-input-label { + font-weight: 500; +} + +.mud-input { + border-radius: 4px; +} + +.mud-input.mud-input-text { + background-color: var(--mud-palette-surface, #ffffff); +} + +/* Tables */ +.mud-table { + background-color: var(--mud-palette-surface, #ffffff); +} + +.mud-table-head { + background-color: var(--mud-palette-background, #fafafa); +} + +.mud-table-row:hover { + background-color: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04)); +} + +.mud-table-cell { + padding: 1rem; + border-color: var(--mud-palette-divider, #e0e0e0); +} + +/* Responsive */ +@media (max-width: 600px) { + body { + font-size: 13px; + } + + .mud-drawer { + width: 100% !important; + max-width: 90% !important; + } + + .mud-appbar { + height: 56px; + } + + .mud-table-cell { + padding: 0.75rem 0.5rem; + } +} + +/* Animation Classes */ +.fade-in { + animation: fadeIn 0.3s ease-in; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.slide-in { + animation: slideIn 0.3s ease-in; +} + +@keyframes slideIn { + from { + transform: translateY(10px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} + +/* Accessibility */ +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +/* Print Styles */ +@media print { + .mud-appbar, + .mud-drawer, + .no-print { + display: none !important; + } + + body { + background: white; + } +}