/* ============================================================= MCPTT Web Dispatcher — UI Customizer CSS-only restyle. Customizer JS does NOT touch React's DOM tree (only attribute-tags + value pins), so the bundle's structure below #root is untouched. We restyle it in place. Bundle structure (login phase) — confirmed via inspection: #root └ div (outer Material-UI Paper, dark grey header) ├ div ← appbar/header strip │ └ img (bundle's logo placeholder) └ div (inner Paper, white form area) ├ div (header strip again, has bundle's img) │ └ img └ form ├ FormControl (Login) ├ FormControl (Password) ├ FormControlLabel + checkbox (Advanced) → tagged data-e9-hide ├ FormControl (Server:port) → tagged data-e9-hide └ button (Sign In) ============================================================= */ :root{ --e9-bg: #050A12; --e9-bg-2: #0A1828; --e9-card: #0F2240; --e9-card-2: #13315C; --e9-border: rgba(244,244,242,0.12); --e9-border-strong:rgba(244,244,242,0.22); --e9-bone: #FBFBFA; --e9-bone-dim: #EAEEF4; --e9-steel: #B5BFCC; --e9-steel-dim: #8A95A4; --e9-red: #B22234; --e9-red-bright: #D63B4D; --e9-success: #3DA35D; --e9-display: "Oswald", "Helvetica Neue Condensed", sans-serif; --e9-mono: "JetBrains Mono", "SF Mono", Menlo, monospace; --e9-body: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; } /* ===== Page background ===== */ html, body, #root{ background: var(--e9-bg) !important; min-height: 100vh; color: var(--e9-bone); font-family: var(--e9-body); } body{ background: radial-gradient(900px 500px at 18% -10%, rgba(178,34,52,0.12), transparent 60%), radial-gradient(800px 600px at 100% 0%, rgba(47,123,216,0.08), transparent 60%), linear-gradient(180deg, var(--e9-bg) 0%, var(--e9-bg-2) 100%) !important; } /* ============================================================= AUTH MODE (body.e9-login or body.e9-role-picker) Strip every background/border/shadow inside #root, then re-apply ONLY on the outermost Paper to make it our card. No DOM moves. ============================================================= */ body.e9-login #root, body.e9-role-picker #root{ display:flex !important; align-items:flex-start !important; justify-content:center !important; padding: 0 24px 24px !important; } /* ============================================================= BRAND SHELL — injected by JS as a sibling of #root inside . This lives OUTSIDE React's tree so we never crash reconciliation. ============================================================= */ #e9-brand-shell{ display: none; /* shown only during auth phase */ } body.e9-login #e9-brand-shell, body.e9-role-picker #e9-brand-shell{ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 8vh 24px 18px !important; text-align: center !important; position: relative; z-index: 1; } #e9-brand-shell .e9-brand-logo{ width: 220px; height: 220px; background: url("/build/mcptt-logo.png") center / contain no-repeat; /* Source asset is JPEG (no alpha) — screen blend hides the baked black background against the dark page. */ mix-blend-mode: screen; filter: drop-shadow(0 0 22px rgba(178,34,52,0.32)); margin-bottom: 14px; } #e9-brand-shell .e9-brand-title{ font-family: var(--e9-display) !important; font-size: 26px; font-weight: 600; letter-spacing: 0.24em; color: var(--e9-bone); text-transform: uppercase; line-height: 1; margin-bottom: 6px; } #e9-brand-shell .e9-brand-tag{ font-family: var(--e9-mono) !important; font-size: 11px; font-weight: 700; letter-spacing: 0.28em; color: var(--e9-steel); text-transform: uppercase; } /* Body becomes a flex column so brand sits above #root */ body.e9-login, body.e9-role-picker{ display: flex !important; flex-direction: column !important; min-height: 100vh !important; } body.e9-login #root, body.e9-role-picker #root{ flex: 1 1 auto !important; } /* Universal reset on all bundle-rendered descendants */ body.e9-login #root *, body.e9-role-picker #root *{ background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; color: inherit !important; } /* Hide every the bundle drops into the login flow — we use a pseudo-element for our own logo so we never have to remove its nodes. */ body.e9-login #root img, body.e9-role-picker #root img{ display: none !important; } /* Restore form-control layout that the * reset above might flatten */ body.e9-login #root form{ display: block !important; width: 100% !important; } body.e9-login #root form > div, body.e9-login #root form > .MuiFormControl-root, body.e9-login #root form > [class*="MuiFormControl-root"], body.e9-login #root form > .MuiTextField-root, body.e9-login #root form > [class*="MuiTextField-root"]{ display: block !important; width: 100% !important; margin-bottom: 22px !important; position: relative !important; } body.e9-login #root form > button, body.e9-login #root form > [type="submit"]{ margin-top: 8px !important; } /* ============================================================= THE CARD — the outermost div inside #root IS the bundle's outer Paper. We give IT the dark gradient + border. No new wrapper. ============================================================= */ body.e9-login #root > div, body.e9-role-picker #root > div{ width: 100% !important; max-width: 460px !important; background: linear-gradient(180deg, var(--e9-card) 0%, var(--e9-bg-2) 100%) !important; background-color: var(--e9-card) !important; border: 1px solid var(--e9-border-strong) !important; border-radius: 6px !important; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 50px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35) !important; overflow: hidden !important; position: relative !important; } body.e9-login #root > div::after, body.e9-role-picker #root > div::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--e9-red); pointer-events:none; } /* The form-area child of the card — keep it as a plain transparent container with comfortable padding. (The brand header is rendered OUTSIDE the card via #e9-brand-shell; see below.) */ body.e9-login #root > div > div, body.e9-login #root > div > form{ background: transparent !important; padding: 26px 26px 22px !important; } /* ============================================================= FORM CONTROLS ============================================================= */ /* Labels */ body.e9-login #root label, body.e9-login #root .MuiFormLabel-root, body.e9-login #root .MuiInputLabel-root{ font-family: var(--e9-mono) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--e9-steel) !important; } body.e9-login #root label.Mui-focused, body.e9-login #root label[data-shrink="true"], body.e9-login #root .MuiInputLabel-shrink{ color: var(--e9-bone) !important; } /* Inputs */ body.e9-login #root input{ font-family: var(--e9-body) !important; font-size: 16px !important; color: var(--e9-bone) !important; caret-color: var(--e9-red-bright) !important; -webkit-text-fill-color: var(--e9-bone) !important; background: transparent !important; } body.e9-login #root input:-webkit-autofill, body.e9-login #root input:-webkit-autofill:hover, body.e9-login #root input:-webkit-autofill:focus{ -webkit-text-fill-color: var(--e9-bone) !important; -webkit-box-shadow: 0 0 0 1000px var(--e9-card) inset !important; caret-color: var(--e9-red-bright) !important; transition: background-color 9999s ease-out, color 9999s ease-out !important; } /* Material underline → hairline + red focus */ body.e9-login #root .MuiInput-underline:before, body.e9-login #root [class*="MuiInput-underline"]:before{ border-bottom: 1px solid var(--e9-border-strong) !important; } body.e9-login #root .MuiInput-underline:hover:not(.Mui-disabled):before, body.e9-login #root [class*="MuiInput-underline"]:hover:not(.Mui-disabled):before{ border-bottom: 1px solid var(--e9-bone-dim) !important; } body.e9-login #root .MuiInput-underline:after, body.e9-login #root [class*="MuiInput-underline"]:after{ border-bottom: 2px solid var(--e9-red-bright) !important; } /* ============================================================= HIDE Advanced + Server (data-e9-hide tagged by JS) ============================================================= */ body.e9-login #root [data-e9-hide], body.e9-login #root .MuiFormControlLabel-root, body.e9-login #root [class*="MuiFormControlLabel"], body.e9-login #root .MuiCheckbox-root, body.e9-login #root [class*="MuiCheckbox"], body.e9-login #root input[type="checkbox"], body.e9-login #root input[placeholder="Server:port"]{ display: none !important; } /* Defensive: any FormControl/TextField that contains the Server input */ body.e9-login #root .MuiFormControl-root:has(input[placeholder="Server:port"]), body.e9-login #root .MuiTextField-root:has(input[placeholder="Server:port"]), body.e9-login #root div:has(> input[placeholder="Server:port"]){ display: none !important; } /* ============================================================= BUTTONS ============================================================= */ body.e9-login #root button, body.e9-role-picker #root button{ font-family: var(--e9-mono) !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; border-radius: 3px !important; height: 48px !important; padding: 0 22px !important; font-size: 13px !important; cursor: pointer !important; transition: background .12s ease, transform .06s ease, box-shadow .12s ease !important; } /* Primary "SIGN IN" — red */ body.e9-login #root button[type="submit"], body.e9-login #root .MuiButton-containedPrimary, body.e9-login #root [class*="containedPrimary"], body.e9-login #root .MuiButton-contained, body.e9-login #root [class*="MuiButton-contained"]{ width: 100% !important; background: var(--e9-red) !important; background-color: var(--e9-red) !important; color: var(--e9-bone) !important; border: 1px solid var(--e9-red-bright) !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 18px rgba(178,34,52,.35) !important; } body.e9-login #root button[type="submit"]:hover, body.e9-login #root .MuiButton-containedPrimary:hover, body.e9-login #root [class*="containedPrimary"]:hover, body.e9-login #root .MuiButton-contained:hover, body.e9-login #root [class*="MuiButton-contained"]:hover{ background: var(--e9-red-bright) !important; background-color: var(--e9-red-bright) !important; transform: translateY(-1px) !important; } body.e9-login #root .MuiTouchRipple-root{ display:none !important; } /* Role picker buttons (in case briefly visible) */ body.e9-role-picker #root button{ width: 100% !important; background: transparent !important; color: var(--e9-bone-dim) !important; border: 1px solid var(--e9-border-strong) !important; margin-bottom: 10px !important; } /* ============================================================= POST-LOGIN — drop all auth-mode constraints. The dispatcher app proper renders normally. ============================================================= */ body.e9-app #root{ display:block !important; align-items:initial !important; justify-content:initial !important; padding:0 !important; } body.e9-app #root > div{ max-width: none !important; background: initial !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }