/* ───────────────────────────────────────────────────────────── c3 "Mindless" theme — FileBrowser Quantum login + 2FA files.c3lelouch.com · served at /fb-mindless.v3.css Injected before by nginx sub_filter on NPM proxy host 27. Scoping: the login route's own classes are already login-only (form.login-card, .loginOptions, .login-brand, input.input), and the page background is gated on the `c3-login-page` marker class the injected script keeps on while the login card exists — so the authenticated app is untouched. The TOTP/2FA prompt is a separate Vue component and is scoped by its compiled scope id `[data-v-b8413355]`, which no other screen uses. NB: FileBrowser sets `transition: all` on its inputs/buttons. A RUNNING transition outranks !important, so every element we restyle gets `transition: none !important` — otherwise the overrides lose. ───────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ── page background + halo (login route only) ── */ body.c3-login-page { background: #0b0c10 !important; } /* the login route's wrapper (not the floating prompt/tooltip windows, which share the .dark-mode class) */ body.c3-login-page div.dark-mode:not(.floating-window):not(.floating-tooltip) { background: #0b0c10 !important; background-image: none !important; }/* ── login card ── */ body.c3-login-page form.login-card { position: relative; z-index: 2; width: 340px !important; max-width: 340px !important; /* the app caps the card at 256px */ background: #141622 !important; border: 1px solid rgba(139, 44, 245, 0.18) !important; border-radius: 14px !important; padding: 22px 24px 18px !important; box-shadow: 0 0 48px rgba(255, 31, 76, 0.12), 0 4px 32px rgba(0, 0, 0, 0.6) !important; transition: none !important; } /* co-branded header row: emblem | hairline | the app's own logo */ body.c3-login-page .login-brand { display: flex !important; align-items: center !important; justify-content: center !important; gap: 16px !important; } .c3-brand-logo { width: 132px; height: auto; mix-blend-mode: screen; filter: drop-shadow(0 0 14px rgba(255, 31, 76, 0.28)); } .c3-brand-sep { flex: none; width: 1px; height: 52px; background: linear-gradient(180deg, transparent, rgba(139, 44, 245, 0.65), transparent); } body.c3-login-page img.login-icon { width: 68px !important; height: 68px !important; background: rgba(139, 44, 245, 0.10); border: 1px solid rgba(139, 44, 245, 0.22); border-radius: 14px; padding: 6px; box-sizing: border-box; } /* the app name under the logo */ body.c3-login-page .brand-text { background: transparent !important; border: none !important; color: #f1f3f9 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.01em; justify-content: center !important; padding-top: 6px !important; } /* ── inputs ── */ body.c3-login-page .loginOptions .input, body.c3-login-page input.input { background: #0f1118 !important; border: 1px solid rgba(139, 44, 245, 0.28) !important; border-radius: 10px !important; color: #f1f3f9 !important; padding: 10px 14px !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 14px !important; height: auto !important; transition: none !important; } body.c3-login-page input.input::placeholder { color: #6b7290 !important; } body.c3-login-page input.input:focus { border-color: #8b2cf5 !important; box-shadow: 0 0 0 3px rgba(139, 44, 245, 0.18) !important; outline: none !important; } /* ── primary button (Login) ── */ body.c3-login-page input[type="submit"].button--block, body.c3-login-page .login-card .button--block { background: linear-gradient(135deg, #ff1f4c, #8b2cf5) !important; background-image: linear-gradient(135deg, #ff1f4c, #8b2cf5) !important; border: none !important; border-radius: 10px !important; color: #ffffff !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; padding: 11px 16px !important; box-shadow: 0 6px 20px rgba(255, 31, 76, 0.28) !important; transition: none !important; cursor: pointer; } body.c3-login-page input[type="submit"].button--block:hover, body.c3-login-page .login-card .button--block:hover { filter: brightness(1.08); box-shadow: 0 8px 26px rgba(255, 31, 76, 0.4) !important; } /* ── error box ── */ body.c3-login-page .wrong-login { background: rgba(255, 31, 76, 0.10) !important; border: 1px solid rgba(255, 31, 76, 0.35) !important; border-radius: 10px !important; color: #ff6b8a !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 13px !important; transition: none !important; } /* ══════════════════════════════════════════════════════════════ 2FA / TOTP prompt — same theme on the second factor screen. Scoped by the component's compiled scope id (data-v-b8413355), which is used by nothing else in the app. ══════════════════════════════════════════════════════════════ */ [data-v-b8413355].card-content, .card-content[data-v-b8413355] { background: #141622 !important; border: 1px solid rgba(139, 44, 245, 0.18) !important; border-radius: 14px !important; color: #f1f3f9 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; padding: 18px 20px 16px !important; box-shadow: 0 0 48px rgba(255, 31, 76, 0.14), 0 4px 32px rgba(0, 0, 0, 0.65) !important; transition: none !important; } [data-v-b8413355].card-content p { color: #c9cee0 !important; font-size: 13px !important; line-height: 1.5 !important; } /* the app's own error box inside the prompt */ [data-v-b8413355].wrong-login, [data-v-b8413355] .wrong-login { background: rgba(255, 31, 76, 0.10) !important; border: 1px solid rgba(255, 31, 76, 0.35) !important; border-radius: 10px !important; color: #ff6b8a !important; } /* the 6-digit code field */ [data-v-b8413355] input.input { background: #0f1118 !important; border: 1px solid rgba(139, 44, 245, 0.28) !important; border-radius: 10px !important; color: #f1f3f9 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 16px !important; letter-spacing: 0.32em; text-align: center; padding: 11px 14px !important; margin-top: 12px !important; transition: none !important; } [data-v-b8413355] input.input::placeholder { color: #6b7290 !important; letter-spacing: 0.06em; } [data-v-b8413355] input.input:focus { border-color: #8b2cf5 !important; box-shadow: 0 0 0 3px rgba(139, 44, 245, 0.18) !important; outline: none !important; } /* setup mode: the otpauth URL text + QR code (must stay scannable) */ [data-v-b8413355] .box__center { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px; margin: 10px 0 4px; } [data-v-b8413355] p[aria-label="otp-url"] { color: #8b92b0 !important; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 11px !important; word-break: break-all; text-align: center; background: #0f1118 !important; border: 1px solid rgba(139, 44, 245, 0.2) !important; border-radius: 10px; padding: 8px 10px; } [data-v-b8413355] .qrcode, [data-v-b8413355] svg.qrcode { background: #ffffff !important; border: 1px solid rgba(139, 44, 245, 0.28) !important; border-radius: 12px !important; padding: 10px !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important; } /* ── 2FA actions ── */ [data-v-b8413355] .card-actions { display: flex !important; justify-content: center !important; gap: 10px !important; margin-top: 14px !important; } [data-v-b8413355] button.button--blue { background: linear-gradient(135deg, #ff1f4c, #8b2cf5) !important; background-image: linear-gradient(135deg, #ff1f4c, #8b2cf5) !important; border: none !important; border-radius: 10px !important; color: #ffffff !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; padding: 10px 22px !important; box-shadow: 0 6px 20px rgba(255, 31, 76, 0.28) !important; transition: none !important; cursor: pointer; } [data-v-b8413355] button.button--blue:hover { filter: brightness(1.08); } [data-v-b8413355] button.button--flat:not(.button--blue) { background: transparent !important; border: 1px solid rgba(139, 44, 245, 0.45) !important; border-radius: 10px !important; color: #c9cee0 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-size: 14px !important; padding: 10px 18px !important; transition: none !important; cursor: pointer; } [data-v-b8413355] button.button--flat:not(.button--blue):hover { border-color: #8b2cf5 !important; color: #f1f3f9 !important; } [data-v-b8413355] button .material-symbols-outlined { vertical-align: -4px; margin-right: 4px; }