/* ===================================================================== Chainlink Hosting theme for Convoy Panel (self-maintaining edition) --------------------------------------------------------------------- - Reskins the whole panel by redefining Convoy's CSS variables. - Pulls the logo LIVE from chainlinkhosting.com (change it there, it changes here too — nothing to re-upload). - Auto-handles the logo colour: original on light, auto-whitened on dark. One source image covers both themes. Injected AFTER Convoy's own CSS, so every rule here wins by source order. It never edits Convoy's files, so it survives every update. Palette source : https://chainlinkhosting.com/clh-assets/css/site.css Convoy vars : resources/scripts/assets/css/tailwind.css ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap'); /* --------------------------------------------------------------------- 0) Knobs you might tweak — logo source + size, all in one place --------------------------------------------------------------------- */ :root { --clh-logo: url('https://chainlinkhosting.com/assets/img/logo.png?clh=1'); --clh-logo-w: 150px; /* wordmark is ~5.3:1, so width ≈ 5.3 × height */ --clh-logo-h: 28px; --clh-login-logo-w: 230px; /* bigger logo on the login card */ --clh-login-logo-h: 44px; } /* --------------------------------------------------------------------- 1) LIGHT MODE -> Convoy reads these on :root accent-1 = lightest (page bg) ... accent-8 = darkest (headings) --------------------------------------------------------------------- */ :root { --color-foreground: #161C2D; /* --ink : headings / strong text */ --color-background: #FFFFFF; /* --surface : card & panel surfaces */ --color-accent-1: #F5FAFF; /* page background (body uses bg-accent-100) */ --color-accent-2: #E7E9ED; /* --border : dividers, hover fills */ --color-accent-3: #C7CBD6; /* faint borders / disabled */ --color-accent-4: #8B93A9; /* --ink-faint : muted icons / placeholder */ --color-accent-5: #5B6278; /* --ink-soft : secondary body text */ --color-accent-6: #3C4358; /* stronger secondary text */ --color-accent-7: #262B3E; /* strong text */ --color-accent-8: #161C2D; /* near-black headings */ /* Convoy's "success" is its PRIMARY action colour -> Chainlink cyan */ --color-success-lighter: #CFECF4; /* --brand-soft */ --color-success-light: #23D4EB; --color-success: #0CBED5; /* --brand */ --color-success-dark: #09AABF; /* --brand-hover */ /* error -> Chainlink danger red */ --color-error-lighter: #F7D4D6; --color-error-light: #F04A54; --color-error: #D92632; /* --danger */ --color-error-dark: #B71D28; } /* --------------------------------------------------------------------- 2) DARK MODE -> Convoy reads these under the .dark class on accent-1 = darkest (page bg) ... accent-8 = lightest (headings) --------------------------------------------------------------------- */ .dark { --color-foreground: #F2F4F8; /* --ink (dark) */ --color-background: #181C2C; /* --surface (dark) : cards */ --color-accent-1: #0E1019; /* --bg (dark) : page background */ --color-accent-2: #262B3E; /* --border(dark): dividers, hover */ --color-accent-3: #3A4056; --color-accent-4: #8B93A9; /* --ink-faint */ --color-accent-5: #B5B5C3; /* --ink-soft : secondary text */ --color-accent-6: #D2D5DE; --color-accent-7: #E7EAF0; --color-accent-8: #F2F4F8; /* headings */ --color-success-lighter: #123A44; /* --brand-soft (dark) */ --color-success-light: #23D4EB; --color-success: #0CBED5; --color-success-dark: #09AABF; } /* --------------------------------------------------------------------- 3) FONT -> match the Chainlink site typeface --------------------------------------------------------------------- */ body, .font-sans { font-family: 'Inter Tight', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; } /* --------------------------------------------------------------------- 4) LOGO -> pulled live from the main site, colour auto-handled Both Convoy brand marks render as . We hide the built-in vector and paint your logo behind it. - light theme : logo shown as-is (it's near-black on transparent) - dark theme : filter whitens it automatically (no 2nd file) --------------------------------------------------------------------- */ svg[viewBox="0 0 512 512"] > path { display: none !important; /* hide Convoy's mark */ } svg[viewBox="0 0 512 512"] { width: var(--clh-logo-w) !important; height: var(--clh-logo-h) !important; background-image: var(--clh-logo); background-position: left center; background-repeat: no-repeat; background-size: contain; } /* Dark mode: recolour the same image to white automatically. brightness(0) crushes any colour to black, invert(1) flips it to white — alpha/transparency is preserved. */ .dark svg[viewBox="0 0 512 512"] { filter: brightness(0) invert(1); } /* --------------------------------------------------------------------- 4b) Hide the hard-coded "Convoy" word beside the logo. Header brand markup is:

Convoy

Your logo image already carries the wordmark, so drop the text. (This word is hard-coded, NOT the app name — to rename it in the browser tab / emails, set APP_NAME="ChainLinkHosting" in .env, see README > "Rename Convoy -> ChainLinkHosting".) --------------------------------------------------------------------- */ svg[viewBox="0 0 512 512"] + h1 { display: none !important; } /* --------------------------------------------------------------------- 4c) Keep the logo affixed (not clipped) when you scroll a server page. Convoy hides the top bar on scroll and slides a 2nd logo into the STICKY sub-nav, but sizes that slot for a square icon (w-8) with overflow hidden — so a wide wordmark gets clipped and looks like it hides behind the Overview tabs. Widen the slot so it shows in full. --------------------------------------------------------------------- */ .grid.place-items-center.\!w-8:has(> svg[viewBox="0 0 512 512"]) { width: auto !important; overflow: visible !important; margin-right: 1.25rem; } /* --------------------------------------------------------------------- 4d) LOGIN CARD brand -> show the logo image (not the word "Convoy"). The login page renders the brand as a plain

Convoy

inside the auth card (no logo svg), so the sitewide logo swap never reached it. Hide the text and paint the logo behind that heading instead. --------------------------------------------------------------------- */ .sm\:bg-background.sm\:rounded-md > h1.font-bold { display: block; color: transparent !important; font-size: 0 !important; line-height: 0 !important; width: var(--clh-login-logo-w); height: var(--clh-login-logo-h); background-image: var(--clh-logo); background-repeat: no-repeat; background-position: left center; background-size: contain; } .dark .sm\:bg-background.sm\:rounded-md > h1.font-bold { filter: brightness(0) invert(1); }