/* Light theme for the embedded GrapesJS campaign editor, matching the admin's Tailwind palette. GrapesJS derives its whole UI from four color classes (https://grapesjs.com/docs/getting-started.html); the .grapesjs-light scope outranks grapes.min.css, which is injected into after this file. */ .grapesjs-light .gjs-one-bg { background-color: #ffffff; } .grapesjs-light .gjs-two-color { color: #374151; } .grapesjs-light .gjs-three-bg { background-color: #2563eb; color: #ffffff; } .grapesjs-light .gjs-four-color, .grapesjs-light .gjs-four-color-h:hover { color: #2563eb; } /* The default hover/active states assume a dark background */ .grapesjs-light .gjs-pn-btn:hover { color: #111827; } .grapesjs-light .gjs-pn-btn.gjs-pn-active { background-color: #eff6ff; color: #2563eb; box-shadow: none; } .grapesjs-light .gjs-pn-panel { border-color: #e5e7eb; } /* Inputs in the settings/style panels */ .grapesjs-light .gjs-field { background-color: #f3f4f6; color: #111827; } .grapesjs-light .gjs-block { border: 1px solid #e5e7eb; box-shadow: none; } .grapesjs-light .gjs-block:hover { border-color: #2563eb; }