Rebrand via Tailwind theme vars; hide signup prompt via :has() + observer; sync yaml with volume fix

Dockerfile

@@ -30,12 +30,12 @@ COPY assets/icon-192x192.png /app/code/librechat/client/dist/assets/icon-192x192
 COPY assets/maskable-icon.png /app/code/librechat/client/dist/assets/maskable-icon.png
 
 # Custom stylesheet and optional helper JS
-COPY assets/custom_v2.css /app/code/librechat/client/dist/assets/custom_v2.css
+COPY assets/custom.css /app/code/librechat/client/dist/assets/custom.css
 # rebuild trigger
 COPY assets/custom2.js /app/code/librechat/client/dist/assets/custom2.js
 
 # Inject branding into built HTML (dist) before image is packaged
 # rebuild marker 20261019-$(date +%s)
 RUN sed -i 's|<title>LibreChat</title>|<title>Inference Co‑op</title>|' /app/code/librechat/client/dist/index.html && \
-    sed -i '/<title>Inference Co‑op<\/title>/a <link rel="stylesheet" href="assets/custom_v2.css">' /app/code/librechat/client/dist/index.html && \
+    sed -i '/<title>Inference Co‑op<\/title>/a <link rel="stylesheet" href="assets/custom.css">' /app/code/librechat/client/dist/index.html && \
-    sed -i '/<link rel="stylesheet" href="assets\/custom_v2.css">/a <script src="assets/custom2.js"></script>' /app/code/librechat/client/dist/index.html
+    sed -i '/<link rel="stylesheet" href="assets\/custom.css">/a <script src="assets/custom2.js"></script>' /app/code/librechat/client/dist/index.html

assets/custom.css

@@ -1,51 +1,65 @@
-/* Co‑op branding colors */
+/* ============================================================
-:root {
+   Inference Co-op branding — LibreChat overlay (v2, DOM-verified)
-  --brand-primary-rgb: 91,140,90;   /* green */
+   LibreChat's Tailwind theme resolves every color through CSS
-  --brand-surface-rgb: 250,248,245;/* cream */
+   variables set on html.light / html.dark (space-separated RGB).
+   Overriding those variables rebrands the WHOLE app — login page,
+   chat UI, dialogs — through the existing theme system.
+   ============================================================ */
+
+html.light {
+  --surface-primary: 250 248 245;   /* cream background */
+  --surface-secondary: 241 237 230;
+  --surface-tertiary: 232 227 217;
+  --surface-hover: 236 234 217;
+  --surface-submit: 91 140 90;      /* co-op green */
+  --surface-submit-hover: 74 122 74;
+  --accent-primary: 91 140 90;
+  --accent-primary-hover: 74 122 74;
+  --ring-primary: 91 140 90;
+  --link: 74 122 74;
+  --text-primary: 36 48 32;
+  --text-secondary: 90 107 82;
+  --border-light: 213 221 208;
 }
 
-/* Primary‑color UI */
+html.dark {
-button,
+  --surface-primary: 31 36 27;
-.primary,
+  --surface-secondary: 38 45 34;
-.MuiButton-contained,
+  --surface-tertiary: 46 54 40;
-.ant-btn-primary {
+  --surface-hover: 49 57 45;
-  background-color: rgb(var(--brand-primary-rgb)) !important;
+  --surface-submit: 122 184 122;
-  border-color: rgb(var(--brand-primary-rgb)) !important;
+  --surface-submit-hover: 142 200 142;
+  --accent-primary: 122 184 122;
+  --accent-primary-hover: 142 200 142;
+  --ring-primary: 142 200 142;
+  --link: 142 200 142;
+  --text-primary: 236 233 226;
+  --text-secondary: 168 173 158;
+  --border-light: 74 82 64;
 }
 
-/* Surface background */
+/* ---- Remove the "Don't have an account? Sign up" line ----
-body,
+   The <p> wraps the register link on auth pages. :has() hides the
-.appContainer,
+   whole paragraph (custom2.js is the MutationObserver fallback). */
-.chatContainer,
+p:has(> a[href*="register"]) {
-.login-page {
+  display: none !important;
-  background-color: rgb(var(--brand-surface-rgb)) !important;
 }
-
+/* Belt-and-braces: hide any residual register/signup links */
-/* Hide any registration / external‑account UI */
 a[href*="register"],
-a[href*="signup"],
+a[href*="signup"] {
-.register-link,
-.signup-link {
   display: none !important;
 }
 
-/* Ensure text on login page uses branding colors */
+/* ---- Footer: simple centered link to the co-op homepage ---- */
-.login-page, .login-page * {
-  color: rgb(36,48,32) !important;
-}
-
 footer {
   text-align: center;
   padding: 1rem;
 }
 footer::before {
-  content: "© Inference Co‑op – ";
+  content: "© Inference Co-op – ";
 }
 footer::after {
   content: "inference.coop";
-  color: rgb(var(--brand-primary-rgb));
+  color: rgb(var(--accent-primary));
   cursor: pointer;
 }
-footer::after:hover {
-  text-decoration: underline;
-}

assets/custom2.js

@@ -1,16 +1,28 @@
-// Auto-load saved image‑generation API key into the MCP input field.
+// Co-op login-page polish.
-// No prompt is shown; if a key is stored in localStorage it is auto‑filled.
+// The auth form is client-rendered (React), so a plain `load` listener runs
-window.addEventListener('load', () => {
+// too early — a MutationObserver re-checks on every DOM change instead.
-  const savedKey = localStorage.getItem('image_api_key');
+(function () {
-  if (savedKey) {
+  function hideSignupPrompt() {
-    const icInput = document.querySelector('input[name=\"IC_API_KEY\"]');
+    document.querySelectorAll('p').forEach(function (p) {
-    if (icInput) icInput.value = savedKey;
+      var link = p.querySelector('a[href*="register"]');
+      var text = (p.textContent || '');
+      if (link || text.indexOf("Don't have an account") !== -1) {
+        p.style.display = 'none';
+      }
+    });
   }
-  // Hide "Don't have an account?" text on the login page
+
-  const nodes = document.querySelectorAll('p, span, div');
+  function start() {
-  nodes.forEach(node => {
+    hideSignupPrompt();
-    if (node.textContent && node.textContent.includes("Don't have an account")) {
+    new MutationObserver(hideSignupPrompt).observe(document.body, {
-      node.style.display = 'none';
+      childList: true,
-    }
+      subtree: true,
-  });
+    });
-});
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', start);
+  } else {
+    start();
+  }
+})();

assets/custom_v2.css

@@ -1,50 +0,0 @@
-/* Co‑op branding colors */
-:root {
-  --brand-primary-rgb: 91,140,90;   /* green */
-  --brand-surface-rgb: 250,248,245;/* cream */
-}
-
-/* Primary‑color UI */
-button,
-.MuiButton-contained,
-.ant-btn-primary {
-  background-color: rgb(var(--brand-primary-rgb)) !important;
-  border-color: rgb(var(--brand-primary-rgb)) !important;
-}
-
-/* Surface background */
-body,
-.appContainer,
-.chatContainer,
-.login-page {
-  background-color: rgb(var(--brand-surface-rgb)) !important;
-}
-
-/* Hide any registration / external‑account UI */
-a[href*="register"],
-a[href*="signup"],
-.register-link,
-.signup-link {
-  display: none !important;
-}
-
-/* Ensure text on login page uses branding colors */
-.login-page, .login-page * {
-  color: rgb(36,48,32) !important;
-}
-
-footer {
-  text-align: center;
-  padding: 1rem;
-}
-footer::before {
-  content: "© Inference Co‑op – ";
-}
-footer::after {
-  content: "inference.coop";
-  color: rgb(var(--brand-primary-rgb));
-  cursor: pointer;
-}
-footer::after:hover {
-  text-decoration: underline;
-}