mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2025-12-02 15:39:57 +00:00
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
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
features:
|
features:
|
||||||
matomo: true
|
matomo: true
|
||||||
css: false
|
css: true
|
||||||
desktop: false # @todo Solve https://chatgpt.com/c/687a50b4-8d78-800f-a202-1631aa05fd4f before setting it to true
|
desktop: false # @todo Solve https://chatgpt.com/c/687a50b4-8d78-800f-a202-1631aa05fd4f before setting it to true
|
||||||
ldap: false
|
ldap: false
|
||||||
oidc: true
|
oidc: true
|
||||||
@@ -20,6 +20,9 @@ server:
|
|||||||
- "data:"
|
- "data:"
|
||||||
frame-src:
|
frame-src:
|
||||||
- https://s.espocrm.com/
|
- https://s.espocrm.com/
|
||||||
|
frame-ancestors:
|
||||||
|
- "{{ PRIMARY_DOMAIN }}"
|
||||||
|
- "*.{{ PRIMARY_DOMAIN }}"
|
||||||
domains:
|
domains:
|
||||||
aliases: []
|
aliases: []
|
||||||
canonical:
|
canonical:
|
||||||
|
|||||||
156
roles/web-app-espocrm/files/style.css
Normal file
156
roles/web-app-espocrm/files/style.css
Normal file
@@ -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);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user