/* * Ada — UI branding overrides for LibreChat v0.8.5 * * Served from /data1/branding/ada-branding.css * Injected into LibreChat's HTML response via nginx sub_filter * (see nginx/sites-available/librechat). * * Hides eight LibreChat UI elements: * 1. The Anthropic "A\" logo SVG, wherever it appears * 2. The circular wrapper containers around the logo on the landing screen * 3. The per-conversation Claude icon in the sidebar list * 4. The "Ada" model selector button at the top (decorative — modelSelect: false) * 5. The "Used N tools" disclosure button on assistant messages * 6. The black active-conversation indicator bar in the sidebar * 7. The bookmark menu button in the chat history sidebar (lets the * search box expand to fill the row via its existing flex-1 class) * 8. The "Admin Settings" buttons everywhere they appear (URL access * is unchanged — this is a cosmetic hide, not a security control) * * Related branding handled elsewhere: * - Placeholder text rewrite ("Message Claude" → "Message Ada"): ada-branding.js * - "Claude" → "Ada" in assistant response header: ada-branding.js * - 🤖 avatar swap on assistant messages: ada-branding.js * - 🤖 favicon and in-app logo: nginx rewrites in librechat config, * served from /data1/branding/ada-icon.svg */ /* ------------------------------------------------------------------------- * 1. Hide the Anthropic "A\" logo SVG. * Identified by its distinctive viewBox attribute, shared by all instances * of the brand mark regardless of size. * ------------------------------------------------------------------------- */ svg[viewBox="0 0 24 16"] { display: none !important; } /* ------------------------------------------------------------------------- * 2. Hide the circular wrapper containers around the logo. * * Two layers of wrapper exist on the landing screen: *
← outer size-10 container *
← inner rounded pill * ← the logo (hidden by #1) * * We hide the outer size-10 container only if it contains the Anthropic * SVG (via :has()) — this preserves size-10 containers elsewhere in the * UI that might be used for user avatars, attachment icons, etc. * * Browser support: :has() requires Chromium 105+, Safari 15.4+, * Firefox 121+. All current staff browsers support it. * ------------------------------------------------------------------------- */ div.size-10:has(svg[viewBox="0 0 24 16"]), div.rounded-full:has(> svg[viewBox="0 0 24 16"]) { display: none !important; } /* ------------------------------------------------------------------------- * 3. Hide the per-conversation Claude icon in the sidebar. * * LibreChat renders a small Claude icon to the left of every chat title. * data-testid="convo-icon" is the stable test-id for this element. * Hiding the whole container removes the empty space that would otherwise * sit before each conversation title. * ------------------------------------------------------------------------- */ [data-testid="convo-icon"] { display: none !important; } /* ------------------------------------------------------------------------- * 4. Hide the "Ada" model selector button. * * modelSelect: false in librechat.yaml means users can't switch models, * so this button is purely decorative — no functional loss from hiding it. * ------------------------------------------------------------------------- */ button[aria-label="Select a model"] { display: none !important; } /* ------------------------------------------------------------------------- * 5. Hide the "Used N tools" disclosure button on assistant messages. * * Selector matches the aria-label prefix "Used " (covers "Used 1 tool", * "Used 20 tools", etc.). This hides ONLY the button — the assistant's * actual text response is unaffected. * * Trade-off: users lose visibility into which MCPs Ada called and what * data came back. For most staff that's a cleaner experience; for tech * staff debugging odd answers it's a loss. If you ever want to revert, * delete this block. * ------------------------------------------------------------------------- */ button[aria-label^="Used "] { display: none !important; } /* ------------------------------------------------------------------------- * 6. Hide the black active-conversation indicator bar. * * The active conversation in the sidebar has a vertical bar rendered as * a ::before pseudo-element on the convo-item div. The background * highlight (bg-surface-active-alt) still indicates the active row, so * users don't lose the cue entirely — just the prominent black bar. * ------------------------------------------------------------------------- */ [data-testid="convo-item"]::before { display: none !important; } /* ------------------------------------------------------------------------- * 7. Hide the bookmark button from the chat history sidebar. * * Targeted by its specific ID rather than data-testid because the same * data-testid is used for the bookmark button at the top of an open * chat (next to share) — and we want to keep that one. * * Once hidden, the search box next to it expands automatically to fill * the row (it already has the flex-1 class that grows to available space). * ------------------------------------------------------------------------- */ #bookmark-nav-menu-button { display: none !important; } /* ------------------------------------------------------------------------- * 8. Hide all "Admin Settings" buttons. * * These appear in the sidebar (for admins) as entry points to the admin * panel. Hiding via CSS is a cosmetic change only — the underlying admin * routes remain accessible if you navigate directly to the admin URL. * If you need real access restriction, that has to be enforced server-side * via RBAC (Role_Ada_Admin or similar Entra group), not by this CSS rule. * * Trade-off: even admin users now need to bookmark the admin URL to * reach the admin panel quickly. * ------------------------------------------------------------------------- */ button[aria-label="Admin Settings"] { display: none !important; }