/* ===================================================================== * Seekmodo helpdesk skin (Zammad reverse-proxy overlay) * * Injected by nginx sub_filter on helpdesk.seekmodo.com — see * tools/zammad-nginx-helpdesk.conf. Survives every Zammad apt * upgrade because nothing inside /opt/zammad is touched. * * Goal: any page on helpdesk.seekmodo.com should be visually * indistinguishable from seekmodo.com. We do this by: * 1. Overriding Zammad's CSS variables (`--button-primary-*`, * `--fullscreen-*`, `--background-*`, `--border-*`) at :root * so most of the SPA picks up the new colors automatically. * 2. Forcing a light theme regardless of `prefers-color-scheme` * (Zammad sets `` based on system pref). * 3. Replacing the login card chrome, sign-in button, form * inputs, and "Powered by Zammad" footer with high- * specificity rules. * 4. Reusing the same palette as the marketing site * (`app/globals.css`): charcoal #111827, emerald #10B981, * aqua #06B6D4, soft surface #F8FAFC. * * Iteration workflow: * * Edit this file. * * Run `python tools/zammad_brand.py` to SCP it up and reload * nginx. * * Hard-refresh helpdesk.seekmodo.com (Ctrl/Cmd+Shift+R) — the * stylesheet is cached for 5 minutes. * * Selectors are deliberately broad and use `!important` because * Zammad's compiled application.css ships at high specificity * (Bootstrap 3 + their custom layer) and we're injecting after it. * ===================================================================== */ /* ---- 1. Brand variable overrides ---------------------------------- */ :root, :root.dark, html.dark, html:not(.dark), [data-theme="dark"], [data-theme="light"] { /* Login + maintenance fullscreen */ --fullscreen-background: #f8fafc !important; --fullscreen-text: #111827 !important; --fullscreen-text-muted: #64748b !important; --fullscreen-text-link: #10b981 !important; --fullscreen-drop-shadow: 0 10px 24px rgba(16, 24, 39, 0.08) !important; /* Surfaces */ --background-primary: #ffffff !important; --background-primary-alt: #f8fafc !important; --background-secondary: #f8fafc !important; --background-secondary-hover: #ecfdf5 !important; --background-tertiary: #f1f5f9 !important; --background-quaternary: #e5e7eb !important; --background-popover: #ffffff !important; /* Borders */ --border: #e5e7eb !important; --border-alt: #f1f5f9 !important; --border-highlight: #10b981 !important; /* Primary brand */ --interactive-primary: #10b981 !important; --highlight: #10b981 !important; --good-color: #10b981 !important; --create: #10b981 !important; --active: #10b981 !important; /* Buttons */ --button-primary-background: #10b981 !important; --button-primary-background-active: #0ea371 !important; --button-primary-text: #ffffff !important; --button-background: #ffffff !important; --button-background-active: #f8fafc !important; --button-action-color: #10b981 !important; /* Header / nav */ --header-primary: #111827 !important; --header-secondary: #1f2937 !important; --menu-background-primary: #111827 !important; --menu-background-primary-hover: #1f2937 !important; --menu-background-active: #10b981 !important; --menu-border: rgba(255, 255, 255, 0.08) !important; /* Modifier accents — Zammad uses these for the dashboard card "fill" and for activity-stream item backgrounds. Stock value is a saturated blue; tone to our soft surfaces. */ --background-modifier-accent: rgba(16, 185, 129, 0.04) !important; --background-modifier-accent-dark: rgba(16, 185, 129, 0.08) !important; --background-modifier-accent-light: rgba(16, 185, 129, 0.02) !important; --background-modifier-border: #e5e7eb !important; --background-modifier-hover: #ecfdf5 !important; --background-modifier-lighter: #f8fafc !important; /* Article + customer backgrounds (ticket detail view) */ --background-article-customer: #ffffff !important; --background-article-customer-meta: #f8fafc !important; --background-article-meta: #f8fafc !important; --background-highlight: #ecfdf5 !important; --border-article-customer: #e5e7eb !important; --border-article-customer-selected: #10b981 !important; } /* ---- 2. Force light theme regardless of system preference --------- */ html.dark, html[data-theme="dark"] { color-scheme: light !important; } /* ---- 3. Base typography + body ------------------------------------ */ html, body { background: #f8fafc !important; color: #111827 !important; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* The SPA mount uses a "dark gradient" wrapper class on some pages. Override its background explicitly. */ .app, .content, .main, .fullscreen, .fullscreen-body, #app > .fullscreen, #app > .login, #app > .splash { background: #f8fafc !important; color: #111827 !important; } /* `.login.fullscreen` is the OUTER viewport wrapper, NOT the card. Zammad's structure is: .login.fullscreen (viewport bg) .fullscreen-center (vertical centering) .fullscreen-body (title + card + footer column) p (heading: "Log in to ...") .hero-unit (the actual white card) .js-footer ("you're already registered" note) .poweredBy (Zammad attribution — hidden) Pre-Sprint-8b iteration mistakenly card-styled `.login`, which gave the wrapper a 420 px max-width and overflowed its ~500 px content -> both scrollbars appeared. The wrapper now gets only the full-bleed background + hidden overflow; card chrome lives on `.hero-unit` further down this file. */ .login.fullscreen, .fullscreen.login, #app > .login, #app > .fullscreen { background: #f8fafc !important; color: #111827 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 100vh !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; } .fullscreen-center { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 24px !important; box-sizing: border-box !important; } .fullscreen-body { width: 100% !important; max-width: 420px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* The "Log in to helpdesk.seekmodo.com" heading sits in a bare `

` above the card. Keep it centered and muted. */ .fullscreen-body > p:first-child { text-align: center !important; color: #64748b !important; font-size: 13px !important; margin: 0 0 18px !important; } /* The "you're already registered..." footer below the card. */ .js-footer { margin-top: 18px !important; text-align: center !important; } .js-footer p { color: #64748b !important; font-size: 13px !important; line-height: 1.6 !important; margin: 0 !important; } /* The SPA boot splash (visible before JS hydrates) */ .splash { background: #f8fafc !important; color: #111827 !important; } .splash-title, .splash p, .splash div { color: #64748b !important; } .splash .icon-logo { /* The boot splash inlines Zammad's logo SVG via . Hide it and let the title carry the brand for the half-second this screen is visible. */ display: none !important; } /* ---- 4. Login + maintenance fullscreen card ----------------------- */ /* The actual white login card. In Zammad's DOM this is `

` inside `.fullscreen-body`. */ .hero-unit, .fullscreen-body .hero-unit, .maintenance .hero-unit { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 16px !important; box-shadow: 0 10px 24px rgba(16, 24, 39, 0.08) !important; padding: 36px 36px 28px !important; width: 100% !important; max-width: 420px !important; margin: 0 auto !important; color: #111827 !important; box-sizing: border-box !important; } /* Logo inside the card — ``. Cover the legacy `.logo > img` wrapper variant too for safety. */ .hero-unit .company-logo, .fullscreen-body .company-logo, .login img.company-logo, .login .logo img, .login-logo img, .fullscreen .logo img { display: block !important; max-height: 36px !important; width: auto !important; max-width: 100% !important; background: transparent !important; margin: 0 auto 24px !important; padding: 0 !important; border: 0 !important; } .login .logo, .login-logo, .fullscreen .logo { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 24px !important; text-align: center !important; } /* ---- 5. Form controls (login + maintenance only) ----------------- */ /* * Sprint 11 follow-up — these rules are SCOPED to `.login` / * `.fullscreen` / `.maintenance` ancestors so they don't bleed * into the admin chrome's settings forms (where they were * making `` tree-style fields. * * Root cause: Zammad ships with `` set whenever * the OS prefers dark, and its application.css then resolves * `.dropdown-menu li > a { color: var(--text-inverted); }` (white) * at the dark-mode tree. Their popover was meant to be a dark * surface — white text reads cleanly there. We override * `--background-popover`, `--background-primary`, and friends to * light surfaces (sections 1 + 4) to keep the helpdesk chrome * looking like seekmodo.com, but the text-color tree still * resolves to dark-mode values, so options end up white-on-white. * Hover masks the bug because the hover rule changes the * background to `--highlight` (emerald) — readable as white-on- * green. * * Fix: lock dropdown / popover / column-select item text to dark * (#111827) by default and to white when the highlight green * background kicks in. Scoped narrowly enough that the dark * navigation rail (section 10) and primary buttons (section 6) * keep using `--text-inverted: white` correctly. */ /* Default state — dark text on the white popover surface. The `.dropdown-menu li > a` rule from upstream sets `color: var(--text-inverted)`; this overrides it for our overlay. */ .dropdown-menu, .dropdown-menu > li, .dropdown-menu > li > a, .dropdown-menu li > a, .dropdown-menu li > span, .dropdown-menu .dropdown-header, .dropdown.actions .dropdown-menu li, .searchableSelect.dropdown, .searchableSelect.dropdown li, .searchableSelect.dropdown li > a, .searchableSelect.dropdown li > span, .searchableSelect.dropdown li span.searchableSelect-option-text { color: #111827 !important; } /* Bootstrap default dropdown background-color is `#fff`; Zammad's stock overlay flips it to `var(--background-popover)`. Lock to white so the rule above lands on a guaranteed-light surface. */ .dropdown-menu, .searchableSelect.dropdown, .dropdown.actions > .dropdown-menu { background-color: #ffffff !important; border: 1px solid #e5e7eb !important; box-shadow: 0 10px 24px rgba(16, 24, 39, 0.08) !important; } /* Hover / active / keyboard-focused state — emerald background + white text. Zammad's existing rules already swap the background to `--highlight` (we map that to #10b981 in section 1), so this block just locks the text colour so motion-state items read cleanly. */ .dropdown-menu > li:hover, .dropdown-menu > li:hover > a, .dropdown-menu > li:focus, .dropdown-menu > li:focus > a, .dropdown-menu > li.is-active, .dropdown-menu > li.is-active > a, .dropdown-menu > li > a.is-hovered, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown li:hover, .dropdown li:hover > a, .dropdown li:hover > span, .dropdown li.is-active, .dropdown li.is-active > a, .dropdown.actions .dropdown-menu li:hover, .dropdown.actions .dropdown-menu li:hover > a, .searchableSelect.dropdown li:hover, .searchableSelect.dropdown li.is-active, .searchableSelect.dropdown li.is-highlighted span.searchableSelect-option-text, .searchableSelect.dropdown li span.searchableSelect-option-text:hover { color: #ffffff !important; } /* Disabled items keep a muted slate so they read as "skip me" rather than "broken contrast". */ .dropdown-menu > li.disabled, .dropdown-menu > li.disabled > a, .dropdown-menu > li[disabled], .dropdown-menu > li[disabled] > a, .dropdown-menu > li.danger.is-active small, .dropdown li.is-inactive { color: #94a3b8 !important; } /* The kebab toggle (".../Three dots" SVG icon) on the Users / Roles / Organizations admin tables. The button itself sits inside `.actions.dropdown` with the SVG rendered via ``. Zammad's stock fill is `currentColor` = white from the dark-mode body color, which makes the dots invisible against our light table rows. */ .actions.dropdown > .icon, .actions.dropdown > a > .icon, .actions.dropdown .dropdown-toggle .icon, .actions.dropdown .js-action .icon, .dropdown.actions .icon-three-dots { fill: #475569 !important; color: #475569 !important; opacity: 1 !important; } .actions.dropdown:hover > .icon, .actions.dropdown.open > .icon, .actions.dropdown:hover .dropdown-toggle .icon, .actions.dropdown.open .dropdown-toggle .icon { fill: #111827 !important; color: #111827 !important; } /* Native