/* The app shell only — header, footer, theme toggle, boot spinner and page container. Everything the converter itself draws lives in the Morph.Blazor package's stylesheet (_content/Morph.Blazor/morph.css), linked ahead of this file by index.html. */ :root { --primary-color: #2b579a; --accent-color: #f0a500; --success-color: #28a745; --background-color: #f8f9fa; --surface-color: #ffffff; --text-color: #333; --muted-color: #6c757d; --border-color: #dee2e6; } [data-theme="dark"] { --primary-color: #5b8dd6; --accent-color: #f0a500; --success-color: #4caf50; --background-color: #1e1e1e; --surface-color: #2a2a2a; --text-color: #e0e0e0; --muted-color: #999999; --border-color: #404040; } /* Hands this app's palette to the Morph components. They declare no colours of their own — every rule reads a --morph-* property with a literal fallback — so this mapping is the whole of their theming, and it follows the light/dark switch above for free (both blocks target the same element). */ :root { --morph-primary: var(--primary-color); --morph-background: var(--background-color); --morph-surface: var(--surface-color); --morph-text: var(--text-color); --morph-muted: var(--muted-color); --morph-border: var(--border-color); } * { box-sizing: border-box; } html, body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: var(--background-color); color: var(--text-color); margin: 0; padding: 0; min-height: 100vh; } .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; color: var(--primary-color); } .spinner { width: 50px; height: 50px; border: 4px solid var(--border-color); border-top-color: var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } #blazor-error-ui { background: #fff3cd; color: #856404; padding: 1rem; text-align: center; display: none; } #blazor-error-ui.show, #blazor-error-ui[style*="display: block"] { display: block; } #blazor-error-ui a { color: #856404; margin-left: 0.5rem; } .container { max-width: 900px; margin: 0 auto; padding: 1rem; } header { background: var(--primary-color); color: white; padding: 1.5rem; text-align: center; margin-bottom: 1.5rem; position: relative; } header h1 { margin: 0; font-size: 1.75rem; outline: none; } header p { margin: 0.5rem auto 0; max-width: 640px; opacity: 0.9; font-size: 0.9rem; } .theme-toggle { position: absolute; top: 1rem; right: 1rem; } .theme-toggle-btn { padding: 0.5rem 1rem; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); color: white; border-radius: 4px; cursor: pointer; font-size: 0.875rem; transition: all 0.2s; } .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); } /* The converter lays its preview and result panes side by side above 1200px (morph.css); the container has to relax to give the pair room. :has() scopes that to when a pane is actually present, so the page keeps its narrow column whenever there is nothing to show on the right. */ @media (min-width: 1200px) { .container:has(.result-pane) { max-width: 1400px; } } footer { text-align: center; padding: 1rem; color: var(--muted-color); font-size: 0.875rem; margin-top: 2rem; } footer a { color: var(--primary-color); text-decoration: none; } footer a:hover { text-decoration: underline; } .footer-version, .footer-size, .footer-ram { margin-left: 0.5rem; opacity: 0.7; } @media (max-width: 768px) { header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } header h1 { font-size: 1.25rem; text-align: left; flex: 1; margin-right: 0.5rem; } header p { display: none; } .theme-toggle { position: static; flex-shrink: 0; } .theme-toggle-btn { padding: 0.5rem; min-width: 36px; } .theme-toggle-btn .text { display: none; } .theme-toggle-btn .icon { font-size: 1.25rem; } /* The footer row is tight on a phone; drop the payload-size figure to keep it readable. */ .footer-size { display: none; } }