/* ========================================================= main.css (clean + compatible with custom.css) - Base reset + header classes for React/MUI UI - Optional: Bootstrap legacy styling (scoped) ========================================================= */ /* ---------- 0) Color-scheme (NO weird UA mixing) ---------- */ :root { color-scheme: light; } html[data-theme="dark"], html[data-mui-color-scheme="dark"] { color-scheme: dark; } /* ---------- 1) VT legacy tokens (only for legacy bootstrap block) ---------- */ /* (custom.css has its own tokens like --primary/--surface...; keep separate) */ :root{ --vt-text: rgba(10,15,25,.92); --vt-border: rgba(0,0,0,.10); --vt-radius: 18px; --vt-radius-sm: 14px; --vt-shadow: 0 10px 28px rgba(0,0,0,.06); --vt-accent2: #0a4b8c; } html[data-theme="dark"], html[data-mui-color-scheme="dark"]{ --vt-text: rgba(234,240,255,.95); --vt-border: rgba(255,255,255,.12); --vt-shadow: 0 22px 70px rgba(0,0,0,.45); --vt-accent2: #5fb8ff; } /* ---------- 2) Base reset (global, safe) ---------- */ html, body{ margin: 0; padding: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-feature-settings: "ss01" 1, "ss02" 1, "cv01" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } *{ box-sizing: border-box; } a{ color: inherit; text-decoration: none; } a:hover{ text-decoration: none; } /* ========================================================= 3) React/MUI Header classes (your hashed CSS module classes) ========================================================= */ /* Header (Light) – glass */ .header_lightHeader__1G0BI{ background: rgba(255,255,255,.84)!important; backdrop-filter: blur(14px)!important; -webkit-backdrop-filter: blur(14px)!important; box-shadow: inset 0 -1px 0 rgba(10,15,25,.08), 0 10px 28px rgba(0,0,0,.06)!important; } /* Header (Dark) – deep glass */ .header_darkHeader__F646p{ background: rgba(16,23,42,.78)!important; backdrop-filter: blur(14px)!important; -webkit-backdrop-filter: blur(14px)!important; box-shadow: inset 0 -1px 0 rgba(255,255,255,.10), 0 22px 70px rgba(0,0,0,.45)!important; } /* Header link/brand container */ .header_linkContainer__nS5Eg{ display: flex; flex-direction: row; align-items: center; gap: 10px; } /* Logo image */ .header_linkContainer__nS5Eg img{ width: 36px; height: 36px; margin-right: 6px; vertical-align: middle!important; border-radius: 10px; box-shadow: 0 10px 22px rgba(0,0,0,.10); } /* ========================================================= 4) Bootstrap legacy page styling (SCOPED!) Only applies if ========================================================= */ body.pool-legacy{ /* if you use Bootswatch Darkly, keep body background from it. Otherwise you can set your own background here. */ } /* Links (legacy only) */ body.pool-legacy a{ color: var(--vt-text); } body.pool-legacy a:hover{ color: #fff; text-decoration: none; } /* Navbar: glass + clean (legacy only) */ body.pool-legacy .navbar{ border-radius: var(--vt-radius); margin: 12px 12px 14px 12px; border: 1px solid var(--vt-border); background: rgba(16,23,42,.72) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--vt-shadow); } body.pool-legacy .navbar-brand{ font-weight: 950; letter-spacing: -0.02em; } body.pool-legacy .navbar-brand img{ border-radius: 10px; } /* Nav links */ body.pool-legacy .navbar-light .navbar-nav .nav-link{ color: var(--vt-text) !important; font-weight: 900; opacity: .92; border-radius: 14px; padding: .55rem .75rem; transition: transform 140ms ease, background 140ms ease, opacity 140ms ease; } body.pool-legacy .navbar-light .navbar-nav .nav-link:hover{ opacity: 1; background: rgba(255,255,255,.06); transform: translateY(-1px); } body.pool-legacy .navbar-toggler{ border: 1px solid var(--vt-border) !important; border-radius: 14px; } /* “Stat”-Kacheln */ body.pool-legacy .bg-light{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.10) !important; color: var(--vt-text) !important; } body.pool-legacy .border-top, body.pool-legacy .border-right, body.pool-legacy .border-left, body.pool-legacy .border-bottom{ border-color: rgba(255,255,255,.10) !important; } body.pool-legacy .rounded-top, body.pool-legacy .rounded-bottom, body.pool-legacy .rounded{ border-radius: var(--vt-radius) !important; } /* Inputs */ body.pool-legacy .form-control{ background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: var(--vt-radius-sm) !important; color: var(--vt-text) !important; box-shadow: none !important; } body.pool-legacy .form-control::placeholder{ color: rgba(234,240,255,.55) !important; } body.pool-legacy .form-control:focus{ border-color: rgba(95,184,255,.45) !important; box-shadow: 0 0 0 4px rgba(95,184,255,.14) !important; } /* Buttons */ body.pool-legacy .btn{ border-radius: var(--vt-radius-sm) !important; font-weight: 950 !important; letter-spacing: -0.01em; text-transform: none !important; box-shadow: none !important; transition: transform 140ms ease, filter 140ms ease; } body.pool-legacy .btn-primary{ border: 1px solid rgba(255,255,255,.10) !important; background: linear-gradient(135deg, var(--vt-accent2), #123c72) !important; } body.pool-legacy .btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.05); } /* Tables */ body.pool-legacy .table{ color: var(--vt-text) !important; border-color: rgba(255,255,255,.10) !important; } body.pool-legacy .table thead th{ border-color: rgba(255,255,255,.12) !important; font-weight: 950; } body.pool-legacy .table td, body.pool-legacy .table th{ border-color: rgba(255,255,255,.10) !important; } body.pool-legacy .table-striped tbody tr:nth-of-type(odd){ background: rgba(255,255,255,.04) !important; } body.pool-legacy .table-bordered{ border: 1px solid rgba(255,255,255,.10) !important; border-radius: var(--vt-radius); overflow: hidden; } /* Modals */ body.pool-legacy .modal-content{ border-radius: var(--vt-radius) !important; border: 1px solid rgba(255,255,255,.12) !important; background: rgba(16,23,42,.92) !important; box-shadow: var(--vt-shadow) !important; color: var(--vt-text) !important; } body.pool-legacy .modal-header{ border-bottom: 1px solid rgba(255,255,255,.10) !important; } body.pool-legacy .modal-footer{ border-top: 1px solid rgba(255,255,255,.10) !important; } body.pool-legacy .modal-title{ font-weight: 950; letter-spacing: -0.02em; } body.pool-legacy .close{ color: #fff !important; opacity: .85 !important; } body.pool-legacy .close:hover{ opacity: 1 !important; } /* Code blocks */ body.pool-legacy code{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); padding: 2px 6px; border-radius: 10px; color: rgba(234,240,255,.92); } /* Canvas area (Chart) */ body.pool-legacy #sharesChart{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: var(--vt-radius); } /* Small details */ body.pool-legacy p{ margin-bottom: .6rem; }