mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2025-12-02 15:39:57 +00:00
Kevin Veen-Birkenbach
2132356f02
- 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
157 lines
6.5 KiB
CSS
157 lines
6.5 KiB
CSS
: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);
|
|
}
|