From 2132356f02ed786edfbab614ea84c98a5fb00e4e Mon Sep 17 00:00:00 2001 From: Kevin Veen-Birkenbach Date: Fri, 28 Nov 2025 15:44:15 +0100 Subject: [PATCH] Enable custom EspoCRM CSS with Infinito.Nexus color scheme - Activate css feature flag for EspoCRM - Extend CSP with frame-ancestors for PRIMARY_DOMAIN - Add style.css mapping EspoCRM UI to the --color-01-** blue palette See ChatGPT discussion: https://chatgpt.com/share/6929b521-3a90-800f-9ce7-29bfb1faaeb4 --- roles/web-app-espocrm/config/main.yml | 5 +- roles/web-app-espocrm/files/style.css | 156 ++++++++++++++++++++++++++ 2 files changed, 160 insertions(+), 1 deletion(-) create mode 100644 roles/web-app-espocrm/files/style.css diff --git a/roles/web-app-espocrm/config/main.yml b/roles/web-app-espocrm/config/main.yml index b61aa99d..46082591 100644 --- a/roles/web-app-espocrm/config/main.yml +++ b/roles/web-app-espocrm/config/main.yml @@ -1,6 +1,6 @@ features: matomo: true - css: false + css: true desktop: false # @todo Solve https://chatgpt.com/c/687a50b4-8d78-800f-a202-1631aa05fd4f before setting it to true ldap: false oidc: true @@ -20,6 +20,9 @@ server: - "data:" frame-src: - https://s.espocrm.com/ + frame-ancestors: + - "{{ PRIMARY_DOMAIN }}" + - "*.{{ PRIMARY_DOMAIN }}" domains: aliases: [] canonical: diff --git a/roles/web-app-espocrm/files/style.css b/roles/web-app-espocrm/files/style.css new file mode 100644 index 00000000..cce4891d --- /dev/null +++ b/roles/web-app-espocrm/files/style.css @@ -0,0 +1,156 @@ +:root { + /* ---------- Base layout / surfaces ---------- */ + + /* Page background and main surface */ + --body-bg: var(--color-01-83); /* light bluish background */ + --panel-bg: var(--color-01-89); /* “white” on the blue scale */ + --panel-default-bg: var(--color-01-89); + --table-bg: var(--color-01-89); + --table-bg-accent: var(--color-01-87); /* slightly tinted row background */ + --code-bg: var(--color-01-87); + --well-bg: var(--color-01-89); + + /* Former “white” variants now on the 01 scale */ + --white-color: var(--color-01-89); + --white-color-3: var(--color-01-86); + --white-color-5: var(--color-01-83); + + /* Main gray scale now on primary 01 */ + --main-gray: var(--color-01-85); + --main-gray-5: var(--color-01-80); + --main-gray-7: var(--color-01-79); + --main-gray-10: var(--color-01-78); + --main-gray-12: var(--color-01-77); + --main-gray-17: var(--color-01-70); + --main-gray-25: var(--color-01-62); + --main-gray-40: var(--color-01-49); + + /* ---------- Text ---------- */ + + --text-color: var(--color-01-20); /* main text (dark) */ + --text-white-color: var(--color-01-89); + --text-muted-color: var(--color-01-60); /* secondary / muted */ + --text-gray-color: var(--color-01-45); + + --code-border-color: var(--color-01-85); + --blockquote-border-color: var(--color-01-80); + + /* ---------- Links ---------- */ + + /* Link blue = core brand color (01) */ + --link-color: var(--color-01-60); /* primary link blue */ + --link-hover-color: var(--color-01-45); /* darker on hover */ + + /* ---------- Navbar / header ---------- */ + + --navbar-bg: var(--color-01-83); + --navbar-link-color: var(--color-01-60); + --navbar-link-icon-color: var(--color-01-45); + --navbar-link-hover-color: var(--color-01-40); + --navbar-link-hover-bg: var(--color-01-83); + --navbar-link-active-bg: var(--color-01-88); + + --navbar-inverse-color: var(--color-01-60); + --navbar-inverse-bg: var(--color-01-83); + --navbar-inverse-link-color: var(--color-01-20); + --navbar-inverse-link-active-bg: var(--color-01-87); + --navbar-inverse-border: var(--color-01-85); + --navbar-inverse-toggle-hover-bg: var(--color-01-86); + --navbar-inverse-bg-7: var(--color-01-86); + --navbar-inverse-link-hover-color: var(--color-01-20); + --navbar-inverse-link-hover-bg: var(--color-01-84); + --navbar-inverse-link-disabled-color:var(--color-01-28); + --navbar-inverse-link-disabled-bg: transparent; + --navbar-inverse-link-icon-color: var(--color-01-39); + --navbar-inverse-link-icon-hover-color: var(--color-01-39); + + /* ---------- Footer ---------- */ + + --site-footer-bg: transparent; + --site-footer-color: var(--color-01-40); + + /* ---------- Inputs / form elements ---------- */ + + --input-color: var(--color-01-40); + --input-bg: var(--color-01-89); + --input-border: var(--color-01-82); + --input-border-focus: var(--color-01-60); /* blue focus ring */ + --input-box-shadow: inset 0 var(--1px) var(--1px) + rgba(var(--color-rgb-01-00), 0.04); + --input-bg-disabled: var(--color-01-80); + --input-color-disabled: var(--color-01-60); + --input-border-width: var(--1px); + + /* ---------- Tooltips ---------- */ + + --tooltip-bg: var(--color-01-05); /* almost black on 01 scale */ + --tooltip-color: var(--color-01-89); + + /* ---------- Neutral button (non-primary) ---------- */ + + --btn-default-bg: var(--color-01-88); + --btn-default-border: var(--color-01-82); + --btn-default-color: var(--color-01-40); + --btn-default-hover-bg: var(--color-01-85); + --btn-default-hover-border: var(--color-01-80); + --btn-default-active-bg: var(--color-01-82); + --btn-default-active-border:var(--color-01-78); + + /* Primary button = same scale as links */ + --btn-primary-bg: var(--color-01-60); + --btn-primary-border: var(--color-01-60); + --btn-primary-color: var(--color-01-89); + --btn-primary-hover-bg: var(--color-01-45); + --btn-primary-hover-border: var(--color-01-45); + --btn-primary-active-bg: var(--color-01-40); + --btn-primary-active-border:var(--color-01-38); + + /* Keep success / danger / warning as they are for now */ + /* (you said: do not re-declare them here) */ + + --btn-text-color: var(--color-01-39); + --btn-active-box-shadow: inset 0 3px 5px + rgba(var(--color-rgb-01-00), 0.125); + + /* ---------- Dropdown / popover / modal ---------- */ + + --dropdown-bg: var(--color-01-89); + --dropdown-link-color: var(--color-01-20); + --dropdown-link-hover-color:var(--color-01-12); + --dropdown-link-hover-bg: var(--color-01-85); + --dropdown-border: var(--color-01-85); + --dropdown-divider-bg: var(--color-01-87); + --dropdown-box-shadow: 0 4px 6px + rgba(var(--color-rgb-01-00), 0.11); + + --popover-bg: var(--color-01-89); + + --modal-backdrop-bg: rgba(var(--color-rgb-01-85), 0.5); + --modal-backdrop-filter: blur(1px); + --modal-header-bg: var(--color-01-83); + --modal-footer-bg: var(--color-01-83); + --modal-content-bg: var(--color-01-83); + --modal-box-shadow: 0 5px 15px + rgba(var(--color-rgb-01-00), 0.5); + --modal-border-color: var(--color-01-87); + --modal-border-width: 0; + + /* ---------- Scrollbars ---------- */ + + --scroll-bg: var(--color-01-80); + --scroll-thumb-bg: var(--color-01-75); + --scroll-width: 11px; + --scroll-border-width: 0; + + /* ---------- Misc ---------- */ + + --default-heading-bg-color: var(--color-01-83); + --default-border-color: var(--color-01-85); + --label-color: var(--color-01-89); + --label-default-bg: var(--color-01-60); + + --default-box-shadow: 1px 2px 2px + rgba(var(--color-rgb-01-00), 0.05); + --top-bar-box-shadow: 2px 2px 2px + rgba(var(--color-rgb-01-00), 0.09); +}